@scalably/ui 0.6.3 → 0.6.4

package/dist/index.d.cts

@@ -176,6 +176,26 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 }
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type BottomNavigationToggleButtonOptions = {
+    /** Enable dragging the toggle button anywhere on screen. Defaults to true. */
+    draggable?: boolean;
+    /** Override the toggle button's size in pixels. Defaults to 48. */
+    size?: number;
+    /**
+     * Optional initial position of the toggle button in viewport coordinates.
+     * If omitted, the button appears near the bottom-right corner, just above the BottomNavigation.
+     */
+    initialPosition?: {
+        x?: number;
+        y?: number;
+    };
+    /** Additional className for the toggle button. */
+    className?: string;
+    /** Aria label when the bottom navigation is visible (button hides it). */
+    ariaLabelClose?: string;
+    /** Aria label when the bottom navigation is hidden (button shows it). */
+    ariaLabelExpand?: string;
+};
 type BottomNavigationProps = {
     /** Additional class name for the navigation container */
     className?: string;
@@ -195,9 +215,41 @@ type BottomNavigationProps = {
     showShadow?: boolean;
     /** Custom z-index value when fixed. Defaults to 40. Modals/dialogs typically use z-50+. */
     zIndex?: number;
-    /** Hide the navigation (useful when modals/dialogs are open) */
+    /** Controlled: hide the navigation (useful when modals/dialogs are open) */
     hidden?: boolean;
+    /** Uncontrolled: initial hidden state when `hidden` is not provided. Defaults to false. */
+    defaultHidden?: boolean;
+    /** Callback when hidden state changes. */
+    onHiddenChange?: (hidden: boolean) => void;
+    /**
+     * Optional floating toggle button that can hide/unhide the BottomNavigation.
+     * Useful for patterns like your screenshot where the navigation can be collapsed.
+     */
+    toggleButton?: boolean | BottomNavigationToggleButtonOptions;
 };
+type BottomNavigationItemProps = {
+    /** Unique value identifier for this item */
+    value: string;
+    /** Label text displayed below the icon */
+    label: string;
+    /** Icon displayed when inactive */
+    icon: ReactElement;
+    /** Icon displayed when active (optional, defaults to icon with active styling) */
+    activeIcon?: ReactElement;
+    /** URL to navigate to when clicked. When provided, renders as an anchor tag. */
+    href?: string;
+    /** Badge count to display on the icon */
+    badge?: number | string;
+    /** Maximum badge count before showing "99+" */
+    maxBadge?: number;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Click handler - called after internal state update */
+    onClick?: (e: React.MouseEvent) => void;
+};
+
 /**
  * BottomNavigation - A mobile-optimized bottom navigation bar with animated interactions.
  *
@@ -214,7 +266,6 @@ type BottomNavigationProps = {
  *
  * @example
  * ```tsx
- * // Basic usage with URL navigation
  * <BottomNavigation defaultValue="home" fixed>
  *   <BottomNavigationItem
  *     value="home"
@@ -223,79 +274,11 @@ type BottomNavigationProps = {
  *     activeIcon={<HomeFilledIcon />}
  *     href="/"
  *   />
- *   <BottomNavigationItem
- *     value="feed"
- *     label="Feeds"
- *     icon={<FeedIcon />}
- *     activeIcon={<FeedFilledIcon />}
- *     href="/feeds"
- *   />
- *   <BottomNavigationItem
- *     value="shop"
- *     label="Shop"
- *     icon={<ShoppingBagIcon />}
- *     activeIcon={<ShoppingBagFilledIcon />}
- *     href="/shop"
- *   />
- *   <BottomNavigationItem
- *     value="wallet"
- *     label="Wallet"
- *     icon={<WalletIcon />}
- *     activeIcon={<WalletFilledIcon />}
- *     href="/wallet"
- *     badge={2}
- *   />
- *   <BottomNavigationItem
- *     value="profile"
- *     label="Profile"
- *     icon={<UserIcon />}
- *     activeIcon={<UserFilledIcon />}
- *     href="/profile"
- *   />
- * </BottomNavigation>
- *
- * // With React Router or Next.js - use onClick for client-side navigation
- * <BottomNavigationItem
- *   value="home"
- *   label="Home"
- *   icon={<HomeIcon />}
- *   href="/"
- *   onClick={(e) => {
- *     e.preventDefault();
- *     router.push('/');
- *   }}
- * />
- *
- * // Controlled mode
- * const [activeTab, setActiveTab] = useState("home");
- * <BottomNavigation value={activeTab} onValueChange={setActiveTab}>
- *   ...
  * </BottomNavigation>
  * ```
  */
 declare const BottomNavigation: react.ForwardRefExoticComponent<BottomNavigationProps & react.RefAttributes<HTMLDivElement>>;
-type BottomNavigationItemProps = {
-    /** Unique value identifier for this item */
-    value: string;
-    /** Label text displayed below the icon */
-    label: string;
-    /** Icon displayed when inactive */
-    icon: ReactElement;
-    /** Icon displayed when active (optional, defaults to icon with active styling) */
-    activeIcon?: ReactElement;
-    /** URL to navigate to when clicked. When provided, renders as an anchor tag. */
-    href?: string;
-    /** Badge count to display on the icon */
-    badge?: number | string;
-    /** Maximum badge count before showing "99+" */
-    maxBadge?: number;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** Click handler - called after internal state update */
-    onClick?: (e: React.MouseEvent) => void;
-};
+
 declare const BottomNavigationItem: react.ForwardRefExoticComponent<BottomNavigationItemProps & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type SvgProps = React.ComponentPropsWithoutRef<"svg">;
@@ -4273,6 +4256,30 @@ declare const BellIcon: {
     displayName: string;
 };
 
+interface BottomNavigationCloseIconProps extends IconProps {
+}
+/**
+ * BottomNavigationCloseIcon - close/hide bottom navigation.
+ *
+ * Uses `currentColor`, so it can be styled with Tailwind classes.
+ */
+declare const BottomNavigationCloseIcon: {
+    (props: BottomNavigationCloseIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface BottomNavigationExpandIconProps extends IconProps {
+}
+/**
+ * BottomNavigationExpandIcon - expand/unhide bottom navigation.
+ *
+ * Uses `currentColor`, so it can be styled with Tailwind classes.
+ */
+declare const BottomNavigationExpandIcon: {
+    (props: BottomNavigationExpandIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface CalendarIconProps extends IconProps {
 }
 /**
@@ -4702,4 +4709,4 @@ declare const WalletIcon: {
     displayName: string;
 };
 
-export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BellIcon, type BellIconProps, BoldIcon, type BoldIconProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CartIcon, type CartIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, FeedFilledIcon, type FeedFilledIconProps, FeedIcon, type FeedIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, HomeFilledIcon, type HomeFilledIconProps, HomeIcon, type HomeIconProps, IconBadge, type IconBadgeProps, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageGallery, type ImageGalleryProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PaletteIcon, type PaletteIconProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, ShareIcon, type ShareIconProps, ShoppingBagFilledIcon, type ShoppingBagFilledIconProps, ShoppingBagIcon, type ShoppingBagIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, UserFilledIcon, type UserFilledIconProps, UserIcon, type UserIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WalletFilledIcon, type WalletFilledIconProps, WalletIcon, type WalletIconProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BellIcon, type BellIconProps, BoldIcon, type BoldIconProps, BottomNavigation, BottomNavigationCloseIcon, type BottomNavigationCloseIconProps, BottomNavigationExpandIcon, type BottomNavigationExpandIconProps, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CartIcon, type CartIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, FeedFilledIcon, type FeedFilledIconProps, FeedIcon, type FeedIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, HomeFilledIcon, type HomeFilledIconProps, HomeIcon, type HomeIconProps, IconBadge, type IconBadgeProps, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageGallery, type ImageGalleryProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PaletteIcon, type PaletteIconProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, ShareIcon, type ShareIconProps, ShoppingBagFilledIcon, type ShoppingBagFilledIconProps, ShoppingBagIcon, type ShoppingBagIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, UserFilledIcon, type UserFilledIconProps, UserIcon, type UserIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WalletFilledIcon, type WalletFilledIconProps, WalletIcon, type WalletIconProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };

package/dist/index.d.ts

@@ -176,6 +176,26 @@ interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
 }
 declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
 
+type BottomNavigationToggleButtonOptions = {
+    /** Enable dragging the toggle button anywhere on screen. Defaults to true. */
+    draggable?: boolean;
+    /** Override the toggle button's size in pixels. Defaults to 48. */
+    size?: number;
+    /**
+     * Optional initial position of the toggle button in viewport coordinates.
+     * If omitted, the button appears near the bottom-right corner, just above the BottomNavigation.
+     */
+    initialPosition?: {
+        x?: number;
+        y?: number;
+    };
+    /** Additional className for the toggle button. */
+    className?: string;
+    /** Aria label when the bottom navigation is visible (button hides it). */
+    ariaLabelClose?: string;
+    /** Aria label when the bottom navigation is hidden (button shows it). */
+    ariaLabelExpand?: string;
+};
 type BottomNavigationProps = {
     /** Additional class name for the navigation container */
     className?: string;
@@ -195,9 +215,41 @@ type BottomNavigationProps = {
     showShadow?: boolean;
     /** Custom z-index value when fixed. Defaults to 40. Modals/dialogs typically use z-50+. */
     zIndex?: number;
-    /** Hide the navigation (useful when modals/dialogs are open) */
+    /** Controlled: hide the navigation (useful when modals/dialogs are open) */
     hidden?: boolean;
+    /** Uncontrolled: initial hidden state when `hidden` is not provided. Defaults to false. */
+    defaultHidden?: boolean;
+    /** Callback when hidden state changes. */
+    onHiddenChange?: (hidden: boolean) => void;
+    /**
+     * Optional floating toggle button that can hide/unhide the BottomNavigation.
+     * Useful for patterns like your screenshot where the navigation can be collapsed.
+     */
+    toggleButton?: boolean | BottomNavigationToggleButtonOptions;
 };
+type BottomNavigationItemProps = {
+    /** Unique value identifier for this item */
+    value: string;
+    /** Label text displayed below the icon */
+    label: string;
+    /** Icon displayed when inactive */
+    icon: ReactElement;
+    /** Icon displayed when active (optional, defaults to icon with active styling) */
+    activeIcon?: ReactElement;
+    /** URL to navigate to when clicked. When provided, renders as an anchor tag. */
+    href?: string;
+    /** Badge count to display on the icon */
+    badge?: number | string;
+    /** Maximum badge count before showing "99+" */
+    maxBadge?: number;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Click handler - called after internal state update */
+    onClick?: (e: React.MouseEvent) => void;
+};
+
 /**
  * BottomNavigation - A mobile-optimized bottom navigation bar with animated interactions.
  *
@@ -214,7 +266,6 @@ type BottomNavigationProps = {
  *
  * @example
  * ```tsx
- * // Basic usage with URL navigation
  * <BottomNavigation defaultValue="home" fixed>
  *   <BottomNavigationItem
  *     value="home"
@@ -223,79 +274,11 @@ type BottomNavigationProps = {
  *     activeIcon={<HomeFilledIcon />}
  *     href="/"
  *   />
- *   <BottomNavigationItem
- *     value="feed"
- *     label="Feeds"
- *     icon={<FeedIcon />}
- *     activeIcon={<FeedFilledIcon />}
- *     href="/feeds"
- *   />
- *   <BottomNavigationItem
- *     value="shop"
- *     label="Shop"
- *     icon={<ShoppingBagIcon />}
- *     activeIcon={<ShoppingBagFilledIcon />}
- *     href="/shop"
- *   />
- *   <BottomNavigationItem
- *     value="wallet"
- *     label="Wallet"
- *     icon={<WalletIcon />}
- *     activeIcon={<WalletFilledIcon />}
- *     href="/wallet"
- *     badge={2}
- *   />
- *   <BottomNavigationItem
- *     value="profile"
- *     label="Profile"
- *     icon={<UserIcon />}
- *     activeIcon={<UserFilledIcon />}
- *     href="/profile"
- *   />
- * </BottomNavigation>
- *
- * // With React Router or Next.js - use onClick for client-side navigation
- * <BottomNavigationItem
- *   value="home"
- *   label="Home"
- *   icon={<HomeIcon />}
- *   href="/"
- *   onClick={(e) => {
- *     e.preventDefault();
- *     router.push('/');
- *   }}
- * />
- *
- * // Controlled mode
- * const [activeTab, setActiveTab] = useState("home");
- * <BottomNavigation value={activeTab} onValueChange={setActiveTab}>
- *   ...
  * </BottomNavigation>
  * ```
  */
 declare const BottomNavigation: react.ForwardRefExoticComponent<BottomNavigationProps & react.RefAttributes<HTMLDivElement>>;
-type BottomNavigationItemProps = {
-    /** Unique value identifier for this item */
-    value: string;
-    /** Label text displayed below the icon */
-    label: string;
-    /** Icon displayed when inactive */
-    icon: ReactElement;
-    /** Icon displayed when active (optional, defaults to icon with active styling) */
-    activeIcon?: ReactElement;
-    /** URL to navigate to when clicked. When provided, renders as an anchor tag. */
-    href?: string;
-    /** Badge count to display on the icon */
-    badge?: number | string;
-    /** Maximum badge count before showing "99+" */
-    maxBadge?: number;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Additional class name */
-    className?: string;
-    /** Click handler - called after internal state update */
-    onClick?: (e: React.MouseEvent) => void;
-};
+
 declare const BottomNavigationItem: react.ForwardRefExoticComponent<BottomNavigationItemProps & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
 type SvgProps = React.ComponentPropsWithoutRef<"svg">;
@@ -4273,6 +4256,30 @@ declare const BellIcon: {
     displayName: string;
 };
 
+interface BottomNavigationCloseIconProps extends IconProps {
+}
+/**
+ * BottomNavigationCloseIcon - close/hide bottom navigation.
+ *
+ * Uses `currentColor`, so it can be styled with Tailwind classes.
+ */
+declare const BottomNavigationCloseIcon: {
+    (props: BottomNavigationCloseIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+interface BottomNavigationExpandIconProps extends IconProps {
+}
+/**
+ * BottomNavigationExpandIcon - expand/unhide bottom navigation.
+ *
+ * Uses `currentColor`, so it can be styled with Tailwind classes.
+ */
+declare const BottomNavigationExpandIcon: {
+    (props: BottomNavigationExpandIconProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface CalendarIconProps extends IconProps {
 }
 /**
@@ -4702,4 +4709,4 @@ declare const WalletIcon: {
     displayName: string;
 };
 
-export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BellIcon, type BellIconProps, BoldIcon, type BoldIconProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CartIcon, type CartIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, FeedFilledIcon, type FeedFilledIconProps, FeedIcon, type FeedIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, HomeFilledIcon, type HomeFilledIconProps, HomeIcon, type HomeIconProps, IconBadge, type IconBadgeProps, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageGallery, type ImageGalleryProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PaletteIcon, type PaletteIconProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, ShareIcon, type ShareIconProps, ShoppingBagFilledIcon, type ShoppingBagFilledIconProps, ShoppingBagIcon, type ShoppingBagIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, UserFilledIcon, type UserFilledIconProps, UserIcon, type UserIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WalletFilledIcon, type WalletFilledIconProps, WalletIcon, type WalletIconProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };
+export { AlignCenterIcon, type AlignCenterIconProps, AlignLeftIcon, type AlignLeftIconProps, AlignRightIcon, type AlignRightIconProps, AppLogo, AuthPrompt, type AuthPromptProps, AvatarPlaceholder, type AvatarPlaceholderCategory, type AvatarPlaceholderProps, type AvatarPlaceholderVariant, BackToTop, type BackToTopProps, type BasicFileValidationError, BellIcon, type BellIconProps, BoldIcon, type BoldIconProps, BottomNavigation, BottomNavigationCloseIcon, type BottomNavigationCloseIconProps, BottomNavigationExpandIcon, type BottomNavigationExpandIconProps, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CalendarIcon, type CalendarIconProps, CampaignLogo, CaptureIcon, type CaptureIconProps, CartIcon, type CartIconProps, CelebrationModal, type CelebrationModalProps, CheckBox, CheckBoxGroup, type CheckBoxGroupOption, type CheckBoxGroupProps, type CheckBoxProps, CheckIcon, type CheckIconProps, CloseIcon, type CloseIconProps, CopyIcon, type CopyIconProps, Countdown, type CountdownProps, type CountdownSize, type CountdownTimeValues, type CountdownUnit, CropIcon, type CropIconProps, type CroppedImageResult, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, type DefaultAssetCategory, type DefaultAssetComponent, type DefaultAssetProps, type DefaultAssetVariant, type DefaultAssets, DeleteIcon, type DeleteIconProps, DiscordIcon, type DiscordIconProps, Divider, type DividerProps, type DividerVariant, DownloadIcon, type DownloadIconProps, DropUpIcon, type DropUpIconProps, DropdownIcon, type DropdownIconProps, EditIcon, type EditIconProps, ErrorIcon, type ErrorIconProps, EyeIcon, type EyeIconProps, EyeSlashIcon, type EyeSlashIconProps, FacebookIcon, type FacebookIconProps, FeedFilledIcon, type FeedFilledIconProps, FeedIcon, type FeedIconProps, type FieldErrorLike, FileIcon, type FileIconProps, FileUpload, type FileUploadError, type FileUploadFile, FileUploadIcon, type FileUploadIconProps, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, FilterIcon, type FilterIconProps, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, type GetCroppedImgOptions, GmailIcon, type GmailIconProps, GridIcon, type GridIconProps, GroupAvatar, HomeFilledIcon, type HomeFilledIconProps, HomeIcon, type HomeIconProps, IconBadge, type IconBadgeProps, IconBigLogo, IconLogo, ImageCrop, ImageCropModal, type ImageCropModalProps, type ImageCropProps, ImageGallery, type ImageGalleryProps, ImageIcon, type ImageIconProps, ImagePlaceholder, type ImageSourceMode, ImageUploadIcon, type ImageUploadIconProps, IndeterminateIcon, type IndeterminateIconProps, InfoIcon, type InfoIconProps, Input, type InputProps, type InputVariant, InsertImageIcon, type InsertImageIconProps, InsertVideoIcon, type InsertVideoIconProps, InstagramIcon, type InstagramIconProps, ItalicIcon, type ItalicIconProps, KakaoTalkIcon, type KakaoTalkIconProps, LineIcon, type LineIconProps, LinkIcon, type LinkIconProps, LinkedInIcon, type LinkedInIconProps, ListBulletIcon, type ListBulletIconProps, ListIcon, type ListIconProps, ListNumberIcon, type ListNumberIconProps, LoadingScreen, type LoadingScreenProps, LoadingSpinner, type LoadingSpinnerProps, Logo, type LogoAssetComponent, type LogoAssetProps, type LogoAssets, type LogoFormat, type LogoProps, type LogoVariant, MessengerIcon, type MessengerIconProps, MinusIcon, type MinusIconProps, MultipleSelectionButton, type MultipleSelectionButtonProps, MultipleSelectionIcon, type MultipleSelectionIconProps, Pagination, type PaginationProps, PaletteIcon, type PaletteIconProps, PlusIcon, type PlusIconProps, ProfileAvatar, ProgressBar, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, Rating, type RatingProps, RedditIcon, type RedditIconProps, ResetIcon, type ResetIconProps, RichTextEditor, type RichTextEditorProps, RichTextViewer, type RichTextViewerProps, RotateLeftIcon, type RotateLeftIconProps, RotateRightIcon, type RotateRightIconProps, ScalablyUIProvider, type ScalablyUIProviderProps, SearchIcon, type SearchIconProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, SettingsIcon, type SettingsIconProps, ShareIcon, type ShareIconProps, ShoppingBagFilledIcon, type ShoppingBagFilledIconProps, ShoppingBagIcon, type ShoppingBagIconProps, SignalIcon, type SignalIconProps, Skeleton, type SkeletonProps, type SkeletonSize, SkeletonText, type SkeletonTextProps, type SkeletonVariant, SlackIcon, type SlackIconProps, StarIcon, type StarIconProps, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, SuccessIcon, type SuccessIconProps, Switch, type SwitchProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Tag, TelegramIcon, type TelegramIconProps, TickIcon, type TickIconProps, TiktokIcon, type TiktokIconProps, TimePicker, type TimePickerProps, ToFirstIcon, type ToFirstIconProps, ToLastIcon, type ToLastIconProps, ToNextIcon, type ToNextIconProps, ToPreviousIcon, type ToPreviousIconProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, TranslateIcon, type TranslateIconProps, TwitchIcon, type TwitchIconProps, UnderlineIcon, type UnderlineIconProps, UserFilledIcon, type UserFilledIconProps, UserIcon, type UserIconProps, VideoIcon, type VideoIconProps, VideoUploadIcon, type VideoUploadIconProps, type ViewMode, ViewToggle, type ViewToggleProps, WalletFilledIcon, type WalletFilledIconProps, WalletIcon, type WalletIconProps, WarnIcon, type WarnIconProps, WelcomeBackground, type WelcomeBackgroundProps, WhatsAppIcon, type WhatsAppIconProps, XIcon, type XIconProps, YoutubeIcon, type YoutubeIconProps, clampDate, cn, daysGrid, debounce, defaultAssets, extensionToMimeType, fieldErrorToProps, formatAcceptedFileTypes, formatDateLocalized, getCroppedImg, logoAssets, mimeTypeToDisplayName, monthsForLocale, normalizeAcceptedFileTypes, scopeClass, throttle, toDateKey, validateFileTypeAndSize, weekdaysForLocale, welcomeAssets, zodErrorsToSummary };