{"version":3,"file":"BottomNavigation.cjs","names":[],"sources":["../../../src/components/BottomNavigation/BottomNavigation.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./BottomNavigation.module.css\";\n\nexport interface BottomNavigationItem {\n    /** Unique identifier — used as React key and for value matching. */\n    key: string;\n    /** Visible label. */\n    label: ReactNode;\n    /** Icon rendered above the label. */\n    icon?: ReactNode;\n    /** Optional badge content rendered above the icon. */\n    badge?: ReactNode;\n    /** When true, the item is not selectable. */\n    disabled?: boolean;\n}\n\nexport interface BottomNavigationProps extends Omit<HTMLAttributes<HTMLElement>, \"onChange\"> {\n    items: BottomNavigationItem[];\n    /** Selected key. */\n    value: string;\n    /** Called with the new selected key on click. */\n    onChange: (key: string) => void;\n    /** Show label below each icon. Default `true`. */\n    showLabels?: boolean;\n}\n\n/**\n * Fixed-bottom mobile tab bar. 3–5 items recommended. Pair with\n * `<Show below=\"md\">` to render only on mobile.\n *\n * @example\n * <Show below=\"md\">\n *     <BottomNavigation\n *         items={[\n *             { key: \"home\", label: \"Início\", icon: <Home /> },\n *             { key: \"search\", label: \"Buscar\", icon: <Search /> },\n *             { key: \"profile\", label: \"Perfil\", icon: <User /> },\n *         ]}\n *         value={tab}\n *         onChange={setTab}\n *     />\n * </Show>\n */\nexport function BottomNavigation({\n    items,\n    value,\n    onChange,\n    showLabels = true,\n    className,\n    ...props\n}: BottomNavigationProps) {\n    return (\n        <nav className={cn(styles.bar, className)} aria-label=\"Navegação principal\" {...props}>\n            {items.map((item) => {\n                const active = item.key === value;\n                return (\n                    <button\n                        key={item.key}\n                        type=\"button\"\n                        className={cn(styles.item, active && styles.active)}\n                        aria-current={active ? \"page\" : undefined}\n                        disabled={item.disabled}\n                        onClick={() => onChange(item.key)}\n                    >\n                        <span className={styles.iconWrap}>\n                            {item.icon && <span className={styles.icon}>{item.icon}</span>}\n                            {item.badge !== undefined && (\n                                <span className={styles.badge}>{item.badge}</span>\n                            )}\n                        </span>\n                        {showLabels && <span className={styles.label}>{item.label}</span>}\n                    </button>\n                );\n            })}\n        </nav>\n    );\n}\n"],"mappings":"oHA4CA,SAAgB,EAAiB,CAC7B,QACA,QACA,WACA,aAAa,GACb,YACA,GAAG,GACmB,CACtB,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,GAAG,EAAA,QAAO,IAAK,CAAS,EAAG,aAAW,sBAAsB,GAAI,EAC3E,SAAA,EAAM,IAAK,GAAS,CACjB,IAAM,EAAS,EAAK,MAAQ,EAC5B,OACI,EAAA,EAAA,KAAA,CAAC,SAAD,CAEI,KAAK,SACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAU,EAAA,QAAO,MAAM,EAClD,eAAc,EAAS,OAAS,IAAA,GAChC,SAAU,EAAK,SACf,YAAe,EAAS,EAAK,GAAG,EANpC,SAAA,EAQI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SAAxB,SAAA,CACK,EAAK,OAAQ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,KAAO,SAAA,EAAK,IAAW,CAAA,EAC5D,EAAK,QAAU,IAAA,KACZ,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,CAEnD,CACL,CAAA,EAAA,IAAc,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,MAAQ,SAAA,EAAK,KAAY,CAAA,CAC5D,CAdC,EAAA,EAAK,GAcN,CAEhB,CAAC,CACA,CAAA,CAEb"}