@scalably/ui 0.14.0 → 0.14.1

package/dist/index.d.cts

@@ -302,11 +302,23 @@ interface BottomNavigationV2Props {
     fixed?: boolean;
     /** Custom z-index value when fixed. Defaults to 40. */
     zIndex?: number;
+    /** Controlled: hide the navigation entirely. */
+    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 BottomNavigationV2. */
+    toggleButton?: boolean | BottomNavigationToggleButtonOptions;
 }
 
+declare const BottomNavigationV2: react.ForwardRefExoticComponent<BottomNavigationV2Props & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * BottomNavigation - A mobile-optimized bottom navigation bar with animated interactions.
  *
+ * @deprecated Prefer `BottomNavigationV2` for new work.
+ *
  * Features:
  * - Compound component pattern (BottomNavigation, BottomNavigationItem)
  * - Smooth animations with scale and color transitions
@@ -335,32 +347,6 @@ declare const BottomNavigation: react.ForwardRefExoticComponent<BottomNavigation
 
 declare const BottomNavigationItem: react.ForwardRefExoticComponent<BottomNavigationItemProps & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-/**
- * BottomNavigationV2 - A premium mobile bottom navigation bar with a curved cutout shape,
- * a central rotating app launcher button, and an expandable popup action drawer.
- *
- * @example
- * ```tsx
- * <BottomNavigationV2
- *   defaultValue="home"
- *   tabs={[
- *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
- *     { value: 'feeds', label: 'Feeds', icon: <FeedIcon /> },
- *     { value: 'shop', label: 'Shop', icon: <ShopIcon /> },
- *     { value: 'notifications', label: 'Notifications', icon: <BellIcon />, badge: 99 },
- *   ]}
- *   menuItems={[
- *     { value: 'campaigns', label: 'Campaigns', icon: <SocialCampaignIcon /> },
- *     { value: 'reviews', label: 'Reviews', icon: <ReviewIcon /> },
- *     { value: 'marketplace', label: 'Marketplace', icon: <StoreIcon /> },
- *     { value: 'profile', label: 'Profile', icon: <UserIcon /> },
- *   ]}
- *   fixed
- * />
- * ```
- */
-declare const BottomNavigationV2: react.ForwardRefExoticComponent<BottomNavigationV2Props & react.RefAttributes<HTMLDivElement>>;
-
 type SvgProps = React.ComponentPropsWithoutRef<"svg">;
 interface IconBaseProps extends SvgProps {
     /** Size of the icon in pixels. Defaults to 24. */

package/dist/index.d.ts

@@ -302,11 +302,23 @@ interface BottomNavigationV2Props {
     fixed?: boolean;
     /** Custom z-index value when fixed. Defaults to 40. */
     zIndex?: number;
+    /** Controlled: hide the navigation entirely. */
+    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 BottomNavigationV2. */
+    toggleButton?: boolean | BottomNavigationToggleButtonOptions;
 }
 
+declare const BottomNavigationV2: react.ForwardRefExoticComponent<BottomNavigationV2Props & react.RefAttributes<HTMLDivElement>>;
+
 /**
  * BottomNavigation - A mobile-optimized bottom navigation bar with animated interactions.
  *
+ * @deprecated Prefer `BottomNavigationV2` for new work.
+ *
  * Features:
  * - Compound component pattern (BottomNavigation, BottomNavigationItem)
  * - Smooth animations with scale and color transitions
@@ -335,32 +347,6 @@ declare const BottomNavigation: react.ForwardRefExoticComponent<BottomNavigation
 
 declare const BottomNavigationItem: react.ForwardRefExoticComponent<BottomNavigationItemProps & react.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
 
-/**
- * BottomNavigationV2 - A premium mobile bottom navigation bar with a curved cutout shape,
- * a central rotating app launcher button, and an expandable popup action drawer.
- *
- * @example
- * ```tsx
- * <BottomNavigationV2
- *   defaultValue="home"
- *   tabs={[
- *     { value: 'home', label: 'Home', icon: <HomeIcon /> },
- *     { value: 'feeds', label: 'Feeds', icon: <FeedIcon /> },
- *     { value: 'shop', label: 'Shop', icon: <ShopIcon /> },
- *     { value: 'notifications', label: 'Notifications', icon: <BellIcon />, badge: 99 },
- *   ]}
- *   menuItems={[
- *     { value: 'campaigns', label: 'Campaigns', icon: <SocialCampaignIcon /> },
- *     { value: 'reviews', label: 'Reviews', icon: <ReviewIcon /> },
- *     { value: 'marketplace', label: 'Marketplace', icon: <StoreIcon /> },
- *     { value: 'profile', label: 'Profile', icon: <UserIcon /> },
- *   ]}
- *   fixed
- * />
- * ```
- */
-declare const BottomNavigationV2: react.ForwardRefExoticComponent<BottomNavigationV2Props & react.RefAttributes<HTMLDivElement>>;
-
 type SvgProps = React.ComponentPropsWithoutRef<"svg">;
 interface IconBaseProps extends SvgProps {
     /** Size of the icon in pixels. Defaults to 24. */