/**
 * @deijose/nix-ionic / tabs.ts  —  v2
 *
 * Bottom tab bar that drives navigation through the core router. The visual
 * "active" state is computed from `nixRouter().current` directly.
 *
 * Tab switches are intentionally direction:"none" — Ionic's convention is no
 * animation between tabs. Per-tab stacks (configured on IonRouterOutlet via
 * `tabs: [...]`) preserve each tab's deep view across switches.
 */
import { NixComponent } from "@deijose/nix-js";
import type { NixTemplate } from "@deijose/nix-js";
import { type NavigationDirection } from "@deijose/nix-js";
import { type IconDefinitionMap } from "./setup.js";
/** Layout of icon and label inside each tab button. */
export type TabButtonLayout = "icon-top" | "icon-start" | "icon-end" | "icon-bottom" | "icon-hide" | "label-hide";
export interface BottomTabItem {
    path: string;
    label: string;
    icon?: string;
    activeIcon?: string;
    exact?: boolean;
    tabId?: string;
    /** Badge text or number (e.g. notification count). */
    badge?: string | number;
    /** Badge color (Ionic color name). Default: "danger". */
    badgeColor?: string;
}
export interface BottomTabBarOptions {
    slot?: "top" | "bottom";
    className?: string;
    hiddenPaths?: string[];
    /**
     * Direction passed to the router on tab change.
     * Default `"none"` — no animation, native Ionic feel.
     */
    navigationDirection?: NavigationDirection;
    hideWhen?: (path: string) => boolean;
    /**
     * Icon SVG data to register for the tab bar icons.
     *
     * The Vite plugin can only detect static `name="icon-name"` in html``
     * templates. Tab bar icons are dynamic, so pass the data here.
     */
    icons?: IconDefinitionMap;
    /**
     * Layout of icon and label inside each tab button.
     * Default: `"icon-top"`.
     */
    layout?: TabButtonLayout;
    /**
     * CSS custom properties to set on the `ion-tab-bar` element.
     * Useful for theming: `--background`, `--color`, `--color-selected`, etc.
     *
     * @example
     * ```ts
     * createBottomTabBar(tabs, {
     *   cssVars: {
     *     "--background": "#1a1a2e",
     *     "--color-selected": "#00ff88",
     *   },
     * });
     * ```
     */
    cssVars?: Record<string, string>;
}
export declare function createBottomTabBar(tabs: BottomTabItem[], options?: BottomTabBarOptions): NixTemplate;
/**
 * Wraps an IonRouterOutlet and a tab bar in <ion-tabs>.
 *
 * <ion-tabs> provides the correct CSS layout context: the outlet fills
 * the available space and the tab bar sits at the bottom (or top).
 *
 * We use <ion-tabs> for layout only — navigation is driven by the
 * Nix.js router via the @click handler on each <ion-tab-button>, not
 * by Ionic's internal tab selection. The tab buttons have `tab` IDs
 * so Ionic doesn't warn, but there are no <ion-tab> children.
 *
 * A small CSS snippet is injected to ensure <ion-tabs> fills its
 * parent and the absolutely-positioned <ion-router-outlet> doesn't
 * collapse the layout.
 */
export declare function createTabsLayout(outlet: NixTemplate | NixComponent, tabBar: NixTemplate): NixTemplate;