@tinybigui/react 0.1.1 → 0.2.0

package/dist/index.js

@@ -2,12 +2,12 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import { forwardRef, useRef, useEffect, createContext, useContext, useState, useCallback } from 'react';
-import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio } from 'react-aria';
-import { mergeProps, filterDOMProps } from '@react-aria/utils';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useEffect, createContext, useContext, useMemo, useCallback, useState, useLayoutEffect, Children, isValidElement } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useToggleState, useRadioGroupState } from 'react-stately';
+import { useButton, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink } from 'react-aria';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
+import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState } from 'react-stately';
 
 // src/utils/cn.ts
 function cn(...inputs) {
@@ -130,6 +130,162 @@ function truncateText(lines = 1) {
     textOverflow: "ellipsis"
   };
 }
+function useScrollElevation(options = {}) {
+  const { scrolled: controlledScrolled, onScrollStateChange, threshold = 0 } = options;
+  const isControlled = controlledScrolled !== void 0;
+  const [internalScrolled, setInternalScrolled] = useState(false);
+  const handleScroll = useCallback(() => {
+    const currentlyScrolled = window.scrollY > threshold;
+    setInternalScrolled((prev) => {
+      if (prev !== currentlyScrolled) {
+        onScrollStateChange?.(currentlyScrolled);
+        return currentlyScrolled;
+      }
+      return prev;
+    });
+  }, [threshold, onScrollStateChange]);
+  useEffect(() => {
+    if (isControlled) return;
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    handleScroll();
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, [isControlled, handleScroll]);
+  return {
+    isScrolled: isControlled ? controlledScrolled : internalScrolled
+  };
+}
+var AppBarHeadless = forwardRef(
+  ({ className, children, scrolled: scrolledProp, onScrollStateChange }, ref) => {
+    const { isScrolled } = useScrollElevation({
+      scrolled: scrolledProp,
+      onScrollStateChange
+    });
+    return /* @__PURE__ */ jsx("header", { ref, role: "banner", className, "data-scrolled": isScrolled, children });
+  }
+);
+AppBarHeadless.displayName = "AppBarHeadless";
+var appBarVariants = cva(
+  [
+    // Base classes (always applied)
+    "w-full",
+    "bg-surface text-on-surface",
+    "flex flex-col",
+    // Elevation transition using MD3 motion tokens
+    "transition-shadow duration-medium2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Size variant (MD3 specification)
+       * Controls bar height, title placement, and type scale
+       */
+      variant: {
+        /** 64dp, title left-aligned, title-large */
+        small: "h-appbar-small",
+        /** 64dp, title centered, title-large */
+        "center-aligned": "h-appbar-small variant-center-aligned",
+        /** 112dp, title bottom-left, headline-small */
+        medium: "h-appbar-medium",
+        /** 152dp, title bottom-left, display-small */
+        large: "h-appbar-large"
+      },
+      /**
+       * Scroll state — controls surface elevation
+       * MD3: flat at rest, elevated on scroll
+       */
+      scrolled: {
+        false: "shadow-elevation-0",
+        true: "shadow-elevation-2"
+      }
+    },
+    defaultVariants: {
+      variant: "small",
+      scrolled: false
+    }
+  }
+);
+var appBarTitleVariants = cva("text-on-surface font-normal truncate", {
+  variants: {
+    variant: {
+      small: "text-title-large",
+      "center-aligned": "text-title-large",
+      medium: "text-headline-small",
+      large: "text-display-small"
+    }
+  },
+  defaultVariants: {
+    variant: "small"
+  }
+});
+var AppBar = forwardRef(
+  ({
+    variant = "small",
+    title,
+    navigationIcon,
+    actions,
+    scrolled: scrolledProp,
+    onScrollStateChange,
+    className
+  }, ref) => {
+    const { isScrolled } = useScrollElevation({
+      scrolled: scrolledProp,
+      onScrollStateChange
+    });
+    const isExpandedVariant = variant === "medium" || variant === "large";
+    return /* @__PURE__ */ jsxs(
+      AppBarHeadless,
+      {
+        ref,
+        scrolled: isScrolled,
+        className: cn(appBarVariants({ variant, scrolled: isScrolled }), className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "top-row",
+              className: cn(
+                "flex items-center",
+                "px-1",
+                // Small and center-aligned: fill the full bar height
+                !isExpandedVariant && "flex-1",
+                // Expanded variants: fixed height for the top row (64dp)
+                isExpandedVariant && "h-16 shrink-0"
+              ),
+              children: [
+                navigationIcon != null && /* @__PURE__ */ jsx("div", { "data-slot": "navigation", className: "flex shrink-0 items-center", children: navigationIcon }),
+                !isExpandedVariant && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-testid": "appbar-title",
+                    className: cn(
+                      "min-w-0 flex-1 px-1",
+                      appBarTitleVariants({ variant }),
+                      // Center-aligned: center the title text
+                      variant === "center-aligned" && "text-center"
+                    ),
+                    children: title
+                  }
+                ),
+                actions != null && /* @__PURE__ */ jsx("div", { "data-slot": "actions", className: "flex shrink-0 items-center gap-0.5", children: actions })
+              ]
+            }
+          ),
+          isExpandedVariant && /* @__PURE__ */ jsx("div", { "data-slot": "expanded-title", className: cn("flex flex-1 items-end", "px-4 pb-4"), children: /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-testid": "appbar-title",
+              className: cn("min-w-0 truncate", appBarTitleVariants({ variant })),
+              children: title
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+AppBar.displayName = "AppBar";
 var ButtonHeadless = forwardRef(
   ({ className, children, tabIndex = 0, onMouseDown, type, ...restProps }, forwardedRef) => {
     const internalRef = useRef(null);
@@ -303,7 +459,7 @@ var buttonVariants = cva(
       {
         variant: "tonal",
         color: "primary",
-        className: "bg-secondary-container text-on-secondary-container"
+        className: "bg-primary-container text-on-primary-container"
       },
       {
         variant: "tonal",
@@ -574,7 +730,7 @@ IconButtonHeadless.displayName = "IconButtonHeadless";
 var iconButtonVariants = cva(
   [
     // Base classes (always applied)
-    "relative inline-flex items-center justify-center",
+    "relative inline-flex items-center justify-center cursor-pointer",
     "overflow-hidden rounded-full",
     // Circular shape
     "transition-all duration-200",
@@ -888,7 +1044,7 @@ FABHeadless.displayName = "FABHeadless";
 var fabVariants = cva(
   [
     // Base classes (always applied)
-    "relative inline-flex items-center justify-center",
+    "relative inline-flex items-center justify-center cursor-pointer",
     "overflow-hidden",
     "transition-all duration-200",
     "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
@@ -1329,8 +1485,8 @@ var textFieldLabelVariants = cva(
   {
     variants: {
       variant: {
-        filled: "top-4",
-        outlined: "top-3 bg-surface px-1"
+        filled: "top-2.5",
+        outlined: "top-2.5 bg-surface px-1"
       },
       size: {
         small: "text-sm",
@@ -1338,7 +1494,7 @@ var textFieldLabelVariants = cva(
         large: "text-lg"
       },
       floating: {
-        true: "-translate-y-6 scale-75",
+        true: "-translate-y-5 scale-75",
         false: "scale-100"
       },
       focused: {
@@ -1363,7 +1519,7 @@ var textFieldLabelVariants = cva(
       {
         variant: "outlined",
         floating: true,
-        className: "-top-2"
+        className: "top-2.5"
       }
     ],
     defaultVariants: {
@@ -1676,7 +1832,8 @@ var TextField = forwardRef(
                       hasLeadingIcon: !!leadingIcon,
                       hasTrailingIcon: !!trailingIcon,
                       multiline: true
-                    })
+                    }),
+                    label && "placeholder:opacity-0"
                   ),
                   rows,
                   spellCheck: spellCheckProp
@@ -1694,7 +1851,9 @@ var TextField = forwardRef(
                       hasLeadingIcon: !!leadingIcon,
                       hasTrailingIcon: !!trailingIcon,
                       multiline: false
-                    })
+                    }),
+                    label && "placeholder:opacity-0"
+                    // Hide placeholder when there's a value to prevent overlap with floating label
                   ),
                   spellCheck: spellCheckProp
                 }
@@ -1928,8 +2087,7 @@ var checkboxLabelVariants = cva(
     // MD3: Body Medium (14px)
     "text-on-surface",
     "select-none",
-    "ml-4"
-    // 16px spacing between checkbox and label (MD3 standard)
+    "ml-1.5"
   ],
   {
     variants: {
@@ -2191,7 +2349,7 @@ var switchHandleContainerVariants = cva(
        */
       selected: {
         true: [
-          "left-[28px]",
+          "left-[24px]",
           // Position when ON (52px - 24px = 28px)
           "text-primary"
           // State layer color
@@ -2731,8 +2889,7 @@ var radioLabelVariants = cva(
     // MD3: Body Medium (14px)
     "text-on-surface",
     "select-none",
-    "ml-4"
-    // 16px spacing between radio and label (MD3 standard)
+    "ml-1.5"
   ],
   {
     variants: {
@@ -2984,7 +3141,1364 @@ var RadioHeadless = forwardRef(
   }
 );
 RadioHeadless.displayName = "RadioHeadless";
+var HeadlessTabsContext = createContext(null);
+function useHeadlessTabsContext(componentName) {
+  const context = useContext(HeadlessTabsContext);
+  if (!context) {
+    throw new Error(`${componentName} must be used within a Tabs component`);
+  }
+  return context;
+}
+var HeadlessTabList = forwardRef(
+  ({ children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTabList");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabListProps } = useTabList({}, state, ref);
+    return /* @__PURE__ */ jsx("div", { ...tabListProps, ref, className, children });
+  }
+);
+HeadlessTabList.displayName = "HeadlessTabList";
+var HeadlessTab = forwardRef(
+  ({ item, className, onMouseDown, children, ...props }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTab");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabProps, isSelected, isDisabled, isPressed } = useTab(
+      {
+        key: item.key,
+        ...item.isDisabled !== void 0 && { isDisabled: item.isDisabled }
+      },
+      state,
+      ref
+    );
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const mergedProps = mergeProps(tabProps, focusProps, {
+      className,
+      onMouseDown
+    });
+    return /* @__PURE__ */ jsx("button", { ...mergedProps, ref, type: "button", "data-key": String(item.key), ...props, children: typeof children === "function" ? children({ isSelected, isDisabled, isFocusVisible, isPressed }) : children });
+  }
+);
+HeadlessTab.displayName = "HeadlessTab";
+var HeadlessTabPanel = forwardRef(
+  ({ children, className, ...props }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("HeadlessTabPanel");
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabPanelProps } = useTabPanel(props, state, ref);
+    return /* @__PURE__ */ jsx("div", { ...tabPanelProps, ref, className, children });
+  }
+);
+HeadlessTabPanel.displayName = "HeadlessTabPanel";
+var TabsContext = createContext(null);
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("Component must be used within a Tabs component");
+  }
+  return context;
+}
+function getComponentName(type) {
+  if (typeof type === "string") return type;
+  const exotic = type;
+  return exotic.displayName ?? exotic.name ?? "";
+}
+function extractTabItemsFromChildren(children) {
+  const items = [];
+  Children.forEach(children, (child) => {
+    if (!isValidElement(child)) return;
+    if (getComponentName(child.type) === "TabList") {
+      const tabListProps = child.props;
+      Children.forEach(tabListProps.children, (tabChild) => {
+        if (!isValidElement(tabChild)) return;
+        if (getComponentName(tabChild.type) === "Tab") {
+          const tabProps = tabChild.props;
+          items.push({
+            key: tabProps.id,
+            ...tabProps.label !== void 0 && { label: tabProps.label },
+            ...tabProps.icon !== void 0 && { icon: tabProps.icon },
+            ...tabProps.isDisabled !== void 0 && { isDisabled: tabProps.isDisabled },
+            ...tabProps["aria-label"] !== void 0 && { "aria-label": tabProps["aria-label"] }
+          });
+        }
+      });
+    }
+  });
+  return items;
+}
+var Tabs = forwardRef(
+  ({
+    selectedKey,
+    defaultSelectedKey,
+    onSelectionChange,
+    variant = "primary",
+    layout = "fixed",
+    children,
+    className,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy
+  }, ref) => {
+    const tabItems = useMemo(() => extractTabItemsFromChildren(children), [children]);
+    const state = useTabListState({
+      ...selectedKey !== void 0 && { selectedKey },
+      ...defaultSelectedKey !== void 0 && { defaultSelectedKey },
+      ...onSelectionChange !== void 0 && { onSelectionChange },
+      disabledKeys: tabItems.filter((t) => t.isDisabled).map((t) => t.key),
+      children: tabItems.map((item) => /* @__PURE__ */ jsx(Item, { textValue: item.label ?? item["aria-label"] ?? String(item.key), children: item.label ?? item["aria-label"] ?? "" }, item.key))
+    });
+    const tabsContextValue = useMemo(
+      () => ({
+        selectedKey: state.selectedKey,
+        variant,
+        layout,
+        disabledKeys: tabItems.filter((t) => t.isDisabled).map((t) => t.key),
+        ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+        ...ariaLabelledBy !== void 0 && { "aria-labelledby": ariaLabelledBy }
+      }),
+      [state.selectedKey, variant, layout, tabItems, ariaLabel, ariaLabelledBy]
+    );
+    const headlessContextValue = useMemo(() => ({ state }), [state]);
+    return /* @__PURE__ */ jsx(HeadlessTabsContext.Provider, { value: headlessContextValue, children: /* @__PURE__ */ jsx(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col", className), children }) }) });
+  }
+);
+Tabs.displayName = "Tabs";
+var tabListVariants = cva(
+  [
+    // Base classes
+    "relative flex",
+    "bg-surface",
+    // Bottom divider line (MD3 spec)
+    "border-b border-outline-variant"
+  ],
+  {
+    variants: {
+      layout: {
+        fixed: "w-full",
+        scrollable: "overflow-x-auto scrollbar-none"
+      }
+    },
+    defaultVariants: {
+      layout: "fixed"
+    }
+  }
+);
+var tabVariants = cva(
+  [
+    // Base layout
+    "relative flex flex-col items-center justify-center",
+    "min-h-12 px-4",
+    "cursor-pointer select-none",
+    "overflow-hidden",
+    // Typography: MD3 Title Small
+    "text-sm font-medium tracking-[0.1px]",
+    // Transition
+    "transition-colors duration-200",
+    // Focus visible
+    "focus-visible:outline-none",
+    // State layer via before pseudo-element
+    "before:absolute before:inset-0 before:transition-opacity before:duration-200",
+    "before:bg-current before:opacity-0",
+    "hover:before:opacity-8",
+    "active:before:opacity-12",
+    "focus-visible:before:opacity-12"
+  ],
+  {
+    variants: {
+      /**
+       * Tab variant (Primary or Secondary)
+       */
+      variant: {
+        primary: "",
+        secondary: ""
+      },
+      /**
+       * Selected state
+       */
+      selected: {
+        true: "",
+        false: ""
+      },
+      /**
+       * Disabled state
+       */
+      disabled: {
+        true: "opacity-38 cursor-not-allowed pointer-events-none",
+        false: ""
+      },
+      /**
+       * Layout determines min-width behavior
+       */
+      layout: {
+        fixed: "flex-1",
+        scrollable: "min-w-[90px] shrink-0"
+      }
+    },
+    compoundVariants: [
+      // Primary + selected
+      {
+        variant: "primary",
+        selected: true,
+        disabled: false,
+        className: "text-primary"
+      },
+      // Primary + unselected
+      {
+        variant: "primary",
+        selected: false,
+        disabled: false,
+        className: "text-on-surface-variant"
+      },
+      // Secondary + selected
+      {
+        variant: "secondary",
+        selected: true,
+        disabled: false,
+        className: "text-on-surface"
+      },
+      // Secondary + unselected
+      {
+        variant: "secondary",
+        selected: false,
+        disabled: false,
+        className: "text-on-surface-variant"
+      }
+    ],
+    defaultVariants: {
+      variant: "primary",
+      selected: false,
+      disabled: false,
+      layout: "fixed"
+    }
+  }
+);
+var tabIndicatorVariants = cva(
+  [
+    // Base: absolutely positioned at bottom
+    "absolute bottom-0 left-0",
+    "pointer-events-none",
+    // Transition using MD3 motion tokens (medium2 duration, emphasized easing)
+    "transition-[left,width]",
+    "duration-medium2",
+    "ease-emphasized"
+  ],
+  {
+    variants: {
+      variant: {
+        primary: ["h-[3px]", "bg-primary", "rounded-t-sm"],
+        secondary: ["h-[2px]", "bg-on-surface-variant"]
+      }
+    },
+    defaultVariants: {
+      variant: "primary"
+    }
+  }
+);
+var tabPanelVariants = cva(
+  [
+    // Base panel styles
+    "outline-none",
+    "focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+  ],
+  {
+    variants: {},
+    defaultVariants: {}
+  }
+);
+var tabBadgeVariants = cva(
+  [
+    // Base badge
+    "absolute",
+    "inline-flex items-center justify-center",
+    "bg-error text-on-error",
+    "font-medium leading-none",
+    "pointer-events-none"
+  ],
+  {
+    variants: {
+      type: {
+        dot: ["top-1 right-1", "w-1.5 h-1.5", "rounded-full"],
+        count: ["-top-1 -right-1", "min-w-[16px] h-4", "px-1", "rounded-full", "text-[11px]"]
+      }
+    },
+    defaultVariants: {
+      type: "count"
+    }
+  }
+);
+var tabIconVariants = cva(
+  ["relative", "inline-flex items-center justify-center", "w-6 h-6"],
+  {
+    variants: {
+      hasLabel: {
+        true: "mb-1",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      hasLabel: false
+    }
+  }
+);
+var TabList = forwardRef(
+  ({ children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("TabList");
+    const {
+      variant,
+      layout,
+      "aria-label": ariaLabel,
+      "aria-labelledby": ariaLabelledBy
+    } = useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabListProps } = useTabList(
+      {
+        ...ariaLabel !== void 0 && { "aria-label": ariaLabel },
+        ...ariaLabelledBy !== void 0 && { "aria-labelledby": ariaLabelledBy }
+      },
+      state,
+      ref
+    );
+    const handleNavKeyDown = useCallback(
+      (e) => {
+        if (!["ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key)) return;
+        const container = ref.current;
+        if (!container) return;
+        const focusedEl = document.activeElement;
+        const currentKey = focusedEl?.dataset?.key;
+        if (!currentKey) return;
+        const allTabEls = [...container.querySelectorAll("[data-key]")];
+        const allKeys = allTabEls.map((el) => el.dataset.key).filter(Boolean);
+        const enabledKeys = allKeys.filter(
+          (k) => allTabEls.find((el) => el.dataset.key === k)?.getAttribute("aria-disabled") !== "true"
+        );
+        const currentIndex = enabledKeys.indexOf(currentKey);
+        if (currentIndex === -1) return;
+        let nextKey = null;
+        switch (e.key) {
+          case "ArrowRight":
+            nextKey = enabledKeys[(currentIndex + 1) % enabledKeys.length] ?? null;
+            break;
+          case "ArrowLeft":
+            nextKey = enabledKeys[(currentIndex - 1 + enabledKeys.length) % enabledKeys.length] ?? null;
+            break;
+          case "Home":
+            nextKey = enabledKeys[0] ?? null;
+            break;
+          case "End":
+            nextKey = enabledKeys[enabledKeys.length - 1] ?? null;
+            break;
+        }
+        if (nextKey != null) {
+          e.preventDefault();
+          state.setSelectedKey(nextKey);
+          const nextEl = container.querySelector(
+            `[data-key="${CSS.escape(nextKey)}"]`
+          );
+          nextEl?.focus();
+        }
+      },
+      [state, ref]
+    );
+    const { onKeyDown: tabListKeyDown } = tabListProps;
+    const handleKeyDown = useCallback(
+      (e) => {
+        handleNavKeyDown(e);
+        if (!e.defaultPrevented) {
+          tabListKeyDown?.(e);
+        }
+      },
+      [handleNavKeyDown, tabListKeyDown]
+    );
+    const [indicatorStyle, setIndicatorStyle] = useState({ left: 0, width: 0 });
+    const [indicatorReady, setIndicatorReady] = useState(false);
+    const updateIndicator = useCallback(() => {
+      const container = ref.current;
+      if (!container) return;
+      const selectedTab = container.querySelector('[aria-selected="true"]');
+      if (!selectedTab) return;
+      const containerRect = container.getBoundingClientRect();
+      const tabRect = selectedTab.getBoundingClientRect();
+      const newLeft = tabRect.left - containerRect.left + container.scrollLeft;
+      const newWidth = tabRect.width;
+      setIndicatorStyle((prev) => {
+        if (prev.left === newLeft && prev.width === newWidth) return prev;
+        return { left: newLeft, width: newWidth };
+      });
+      setIndicatorReady(true);
+    }, [ref]);
+    useLayoutEffect(() => {
+      updateIndicator();
+    }, [state.selectedKey, updateIndicator]);
+    const mergedTabListProps = { ...tabListProps, onKeyDown: handleKeyDown };
+    return /* @__PURE__ */ jsxs("div", { ...mergedTabListProps, ref, className: cn(tabListVariants({ layout }), className), children: [
+      children,
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-tab-indicator": true,
+          "aria-hidden": "true",
+          className: cn(
+            tabIndicatorVariants({ variant }),
+            // Hide until first position is calculated to avoid flash
+            !indicatorReady && "opacity-0"
+          ),
+          style: {
+            // Dynamic left/width values from DOM measurements
+            left: `${indicatorStyle.left}px`,
+            width: `${indicatorStyle.width}px`
+          }
+        }
+      )
+    ] });
+  }
+);
+TabList.displayName = "TabList";
+function resolveBadgeDisplay(badge) {
+  if (badge === void 0 || badge === false) return null;
+  if (badge === true) return "dot";
+  if (typeof badge === "number") {
+    if (badge === 0) return null;
+    return badge > 999 ? "999+" : String(badge);
+  }
+  return null;
+}
+var Tab = forwardRef(
+  ({ id, icon, label, badge, isDisabled = false, disableRipple = false, className, ...htmlProps }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("Tab");
+    const { variant, layout } = useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const {
+      tabProps,
+      isSelected,
+      isDisabled: ariaIsDisabled
+    } = useTab({ key: id, isDisabled }, state, ref);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    const finalIsDisabled = isDisabled || ariaIsDisabled;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: finalIsDisabled || disableRipple
+    });
+    const handleClick = useCallback(() => {
+      if (!finalIsDisabled) {
+        state.setSelectedKey(id);
+      }
+    }, [state, id, finalIsDisabled]);
+    const handleFocus = useCallback(() => {
+      if (!finalIsDisabled) {
+        state.selectionManager.setFocusedKey(id);
+      }
+    }, [state.selectionManager, id, finalIsDisabled]);
+    const mergedProps = mergeProps(tabProps, focusProps, {
+      onMouseDown: disableRipple ? void 0 : handleRipple,
+      onClick: handleClick,
+      onFocus: handleFocus
+    });
+    const badgeDisplay = resolveBadgeDisplay(badge);
+    const isDotBadge = badgeDisplay === "dot";
+    const hasIcon = Boolean(icon);
+    const hasLabel = Boolean(label);
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ...mergedProps,
+        ref,
+        type: "button",
+        "data-key": String(id),
+        tabIndex: finalIsDisabled ? -1 : isSelected ? 0 : -1,
+        className: cn(
+          tabVariants({
+            variant,
+            selected: isSelected,
+            disabled: finalIsDisabled,
+            layout
+          }),
+          isFocusVisible && "outline-primary outline-2 outline-offset-2",
+          hasLabel && hasIcon && "min-h-16",
+          className
+        ),
+        ...htmlProps,
+        children: [
+          !disableRipple && ripples,
+          hasIcon && /* @__PURE__ */ jsxs("span", { className: cn(tabIconVariants({ hasLabel })), children: [
+            icon,
+            badgeDisplay && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge-type": isDotBadge ? "dot" : "count",
+                "aria-hidden": "true",
+                className: cn(tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })),
+                children: !isDotBadge && badgeDisplay
+              }
+            )
+          ] }),
+          hasLabel && /* @__PURE__ */ jsxs("span", { className: "relative z-10 truncate", children: [
+            label,
+            !hasIcon && badgeDisplay && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge-type": isDotBadge ? "dot" : "count",
+                "aria-hidden": "true",
+                className: cn(
+                  "relative ml-1",
+                  tabBadgeVariants({ type: isDotBadge ? "dot" : "count" })
+                ),
+                children: !isDotBadge && badgeDisplay
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Tab.displayName = "Tab";
+var TabPanel = forwardRef(
+  ({ id, children, className }, forwardedRef) => {
+    const { state } = useHeadlessTabsContext("TabPanel");
+    useTabsContext();
+    const internalRef = useRef(null);
+    const ref = forwardedRef ?? internalRef;
+    const { tabPanelProps } = useTabPanel({}, state, ref);
+    if (state.selectedKey !== id) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx("div", { ...tabPanelProps, ref, className: cn(tabPanelVariants(), className), children });
+  }
+);
+TabPanel.displayName = "TabPanel";
+var NavigationBarContext = createContext(null);
+function useNavigationBarContext() {
+  const ctx = useContext(NavigationBarContext);
+  if (ctx === null) {
+    throw new Error("HeadlessNavigationBarItem must be rendered inside HeadlessNavigationBar.");
+  }
+  return ctx;
+}
+var HeadlessNavigationBar = forwardRef(
+  ({
+    items,
+    selectedKey,
+    defaultSelectedKey,
+    onSelectionChange,
+    "aria-label": ariaLabel,
+    className,
+    renderItem
+  }, ref) => {
+    const collectionChildren = items.map((item) => /* @__PURE__ */ jsx(Item, { textValue: item.label ?? item["aria-label"] ?? item.key, children: item.key }, item.key));
+    const disabledKeys = items.filter((item) => item.isDisabled).map((item) => item.key);
+    const state = useTabListState({
+      children: collectionChildren,
+      ...selectedKey !== void 0 ? { selectedKey } : {},
+      ...defaultSelectedKey !== void 0 ? { defaultSelectedKey } : {},
+      ...onSelectionChange ? { onSelectionChange } : {},
+      disabledKeys
+    });
+    const tabListRef = useRef(null);
+    const { tabListProps } = useTabList({ "aria-label": ariaLabel }, state, tabListRef);
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className,
+        children: /* @__PURE__ */ jsx(NavigationBarContext.Provider, { value: { state, hideLabels: false, disableRipple: false }, children: /* @__PURE__ */ jsx("div", { ...tabListProps, ref: tabListRef, className: "flex h-full w-full items-stretch", children: [...state.collection].map((collectionItem) => {
+          const itemConfig = items.find((i) => String(i.key) === String(collectionItem.key));
+          if (!itemConfig) return null;
+          return renderItem(itemConfig);
+        }) }) })
+      }
+    );
+  }
+);
+HeadlessNavigationBar.displayName = "HeadlessNavigationBar";
+var HeadlessNavigationBarItem = forwardRef(({ itemKey, children, className, "aria-label": ariaLabel }, ref) => {
+  const { state } = useNavigationBarContext();
+  const internalRef = useRef(null);
+  const resolvedRef = ref ?? internalRef;
+  const { tabProps, isSelected } = useTab({ key: itemKey }, state, resolvedRef);
+  const { "aria-controls": _controls, ...tabPropsWithoutControls } = tabProps;
+  const { focusProps, isFocusVisible } = useFocusRing();
+  const content = typeof children === "function" ? children({ isSelected, isFocusVisible }) : children;
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      ...mergeProps(tabPropsWithoutControls, focusProps),
+      ref: resolvedRef,
+      className,
+      "aria-label": ariaLabel,
+      "data-focus-visible": isFocusVisible || void 0,
+      "data-selected": isSelected,
+      children: content
+    }
+  );
+});
+HeadlessNavigationBarItem.displayName = "HeadlessNavigationBarItem";
+var navigationBarVariants = cva([
+  // Layout
+  "fixed bottom-0 left-0 right-0 z-10",
+  "w-full",
+  "flex flex-row items-stretch",
+  // MD3 surface
+  "bg-surface-container",
+  // MD3 height: 80dp
+  "h-20",
+  // Safe-area bottom (for mobile devices)
+  "pb-safe"
+]);
+var navigationBarItemVariants = cva(
+  [
+    // Layout
+    "relative flex flex-1 flex-col items-center justify-center",
+    "cursor-pointer select-none outline-none",
+    // State layer pseudo-element (covers the full item area)
+    "before:absolute before:inset-0 before:rounded-none before:transition-opacity before:duration-short2 before:ease-standard",
+    // Focus-visible ring
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+    // Transition for color changes
+    "transition-colors duration-short2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Whether this item is the currently selected destination.
+       * Controls icon and label colors per MD3 spec.
+       */
+      isActive: {
+        true: [
+          // Active icon color applied via text-color on the icon wrapper
+          "[&>[data-icon]]:text-on-secondary-container",
+          // Active label color
+          "[&>[data-label]]:text-on-surface",
+          // State layer color for active item
+          "before:bg-on-surface-variant"
+        ],
+        false: [
+          // Inactive icon color
+          "[&>[data-icon]]:text-on-surface-variant",
+          // Inactive label color
+          "[&>[data-label]]:text-on-surface-variant",
+          // State layer color for inactive item
+          "before:bg-on-surface-variant"
+        ]
+      },
+      /**
+       * Whether the item is disabled.
+       * Applies `opacity-38` per MD3 disabled state.
+       */
+      isDisabled: {
+        true: ["cursor-not-allowed opacity-38 pointer-events-none"],
+        false: []
+      },
+      /**
+       * Hover and press state layer opacities.
+       * Applied via compound variants on hover/active pseudo-classes.
+       */
+      isHovered: {
+        true: ["before:opacity-8"],
+        false: ["before:opacity-0"]
+      },
+      isPressed: {
+        true: ["before:opacity-12"],
+        false: []
+      }
+    },
+    compoundVariants: [
+      // When not hovered or pressed, state layer is invisible
+      {
+        isHovered: false,
+        isPressed: false,
+        className: "before:opacity-0"
+      }
+    ],
+    defaultVariants: {
+      isActive: false,
+      isDisabled: false,
+      isHovered: false,
+      isPressed: false
+    }
+  }
+);
+var indicatorPillVariants = cva(
+  [
+    "absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2",
+    "w-16 h-8",
+    "rounded-full bg-secondary-container",
+    "transition-[transform,opacity] duration-medium2 ease-emphasized",
+    "origin-center"
+  ],
+  {
+    variants: {
+      isActive: {
+        true: ["scale-x-100 opacity-100"],
+        false: ["scale-x-0 opacity-0"]
+      }
+    },
+    defaultVariants: {
+      isActive: false
+    }
+  }
+);
+var badgeVariants = cva(
+  [
+    "absolute",
+    "flex items-center justify-center",
+    "bg-error text-on-error",
+    "font-medium leading-none",
+    // MD3 label-small
+    "text-[0.6875rem]"
+  ],
+  {
+    variants: {
+      isDot: {
+        true: [
+          // Dot: 6dp diameter, top-right of icon
+          "top-0 right-0.5 z-10",
+          "w-1.5 h-1.5 min-w-0 rounded-full"
+        ],
+        false: [
+          // Numeric: pill shape, top-right of icon
+          "-top-1 left-3 z-10",
+          "min-w-[1rem] h-4 px-1 rounded-full"
+        ]
+      }
+    },
+    defaultVariants: {
+      isDot: false
+    }
+  }
+);
+var iconWrapperVariants = cva([
+  "relative z-10 flex items-center justify-center",
+  "w-6 h-6"
+]);
+var labelVariants = cva([
+  "mt-1 select-none",
+  "text-label-medium",
+  "transition-colors duration-short2 ease-standard",
+  "truncate max-w-full"
+]);
+var MIN_ITEMS = 3;
+var MAX_ITEMS = 5;
+function validateItemCount(count) {
+  if (process.env.NODE_ENV !== "production" && (count < MIN_ITEMS || count > MAX_ITEMS)) {
+    console.warn(
+      `[NavigationBar] MD3 Navigation Bar requires between ${MIN_ITEMS} and ${MAX_ITEMS} destination items. Received ${count}. See: https://m3.material.io/components/navigation-bar/overview`
+    );
+  }
+}
+function getBadgeText(badge) {
+  if (badge === void 0 || badge === 0) return null;
+  if (badge === true) return null;
+  if (badge > 999) return "999+";
+  return String(badge);
+}
+function isBadgeVisible(badge) {
+  if (badge === void 0) return false;
+  if (badge === 0) return false;
+  return true;
+}
+function ItemVisual({ config, isActive, hideLabels, disableRipple }) {
+  const isItemDisabled = config.isDisabled === true;
+  const { onMouseDown, ripples } = useRipple({
+    ...disableRipple || isItemDisabled ? { disabled: true } : {}
+  });
+  const showBadge = isBadgeVisible(config.badge);
+  const isDot = config.badge === true;
+  const badgeText = getBadgeText(config.badge);
+  return (
+    // Overflow-hidden wrapper required for ripple containment.
+    // pointer-events-none is intentional: the parent <button> handles all interaction.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    /* @__PURE__ */ jsxs(
+      "span",
+      {
+        onMouseDown,
+        className: "pointer-events-none relative flex h-full w-full flex-col items-center justify-center overflow-hidden",
+        children: [
+          ripples,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-indicator-pill": true,
+              "data-active": isActive,
+              "aria-hidden": "true",
+              className: cn(indicatorPillVariants({ isActive }), !hideLabels && "-mt-3.5")
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              "data-icon": true,
+              className: cn(
+                iconWrapperVariants(),
+                isActive ? "text-on-secondary-container" : "text-on-surface-variant"
+              ),
+              children: [
+                /* @__PURE__ */ jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center", children: config.icon }),
+                showBadge && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    "data-badge": true,
+                    "data-badge-dot": isDot || void 0,
+                    "aria-label": isDot ? "notification" : badgeText ? `${badgeText} notifications` : void 0,
+                    "aria-live": "polite",
+                    className: cn(badgeVariants({ isDot })),
+                    children: isDot ? null : badgeText
+                  }
+                )
+              ]
+            }
+          ),
+          !hideLabels && config.label && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-label": true,
+              className: cn(labelVariants(), isActive ? "text-on-surface" : "text-on-surface-variant"),
+              children: config.label
+            }
+          )
+        ]
+      }
+    )
+  );
+}
+var NavigationBar = forwardRef(
+  ({
+    items,
+    activeKey,
+    defaultActiveKey,
+    onActiveChange,
+    hideLabels = false,
+    "aria-label": ariaLabel,
+    disableRipple = false,
+    className
+  }, ref) => {
+    validateItemCount(items.length);
+    return /* @__PURE__ */ jsx(
+      HeadlessNavigationBar,
+      {
+        ref,
+        items,
+        ...activeKey !== void 0 ? { selectedKey: activeKey } : {},
+        ...defaultActiveKey !== void 0 ? { defaultSelectedKey: defaultActiveKey } : {},
+        ...onActiveChange ? { onSelectionChange: onActiveChange } : {},
+        "aria-label": ariaLabel,
+        className: cn(navigationBarVariants(), className),
+        renderItem: (config) => (
+          // HeadlessNavigationBarItem renders the <button role="tab"> with all
+          // ARIA semantics. ItemVisual renders the icon/pill/badge/label inside
+          // — no nested <button> elements.
+          /* @__PURE__ */ jsx(
+            HeadlessNavigationBarItem,
+            {
+              itemKey: config.key,
+              ...config["aria-label"] !== void 0 ? { "aria-label": config["aria-label"] } : {},
+              className: cn(
+                "relative flex flex-1 flex-col items-center justify-center",
+                "cursor-pointer outline-none select-none",
+                "duration-short2 ease-standard transition-colors",
+                // State layer pseudo-element
+                "before:absolute before:inset-0 before:rounded-none",
+                "before:bg-on-surface-variant before:opacity-0",
+                "before:duration-short2 before:ease-standard before:transition-opacity",
+                "hover:before:opacity-8",
+                "active:before:opacity-12",
+                // Focus ring
+                "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
+                // Disabled styling
+                config.isDisabled && "pointer-events-none cursor-not-allowed opacity-38"
+              ),
+              children: ({ isSelected }) => /* @__PURE__ */ jsx(
+                ItemVisual,
+                {
+                  config,
+                  isActive: isSelected,
+                  hideLabels,
+                  disableRipple
+                }
+              )
+            },
+            config.key
+          )
+        )
+      }
+    );
+  }
+);
+NavigationBar.displayName = "NavigationBar";
+function getBadgeContent(badge) {
+  if (badge === true) return null;
+  if (badge === 0) return "";
+  if (badge > 999) return "999+";
+  return String(badge);
+}
+function isBadgeVisible2(badge) {
+  if (badge === void 0) return false;
+  if (badge === 0) return false;
+  return true;
+}
+var NavigationBarItem = forwardRef(
+  ({
+    itemKey: _itemKey,
+    icon,
+    label,
+    badge,
+    isActive = false,
+    hideLabels = false,
+    isDisabled = false,
+    disableRipple = false,
+    className,
+    "aria-label": ariaLabel,
+    // Spread remaining props (e.g. tabProps from useTab)
+    ...rest
+  }, ref) => {
+    const { onMouseDown, ripples } = useRipple({
+      ...disableRipple || isDisabled ? { disabled: true } : {}
+    });
+    const showBadge = isBadgeVisible2(badge);
+    const isDot = badge === true;
+    const badgeContent = badge !== void 0 ? getBadgeContent(badge) : null;
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ref,
+        onMouseDown,
+        disabled: isDisabled,
+        "aria-label": ariaLabel,
+        className: cn(
+          navigationBarItemVariants({
+            isActive,
+            isDisabled
+          }),
+          className
+        ),
+        ...rest,
+        children: /* @__PURE__ */ jsxs("span", { className: "relative flex h-full w-full flex-col items-center justify-center overflow-hidden rounded-none", children: [
+          ripples,
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-indicator-pill": true,
+              "data-active": isActive,
+              className: cn(indicatorPillVariants({ isActive }), !hideLabels && "-mt-3.5"),
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { "data-icon": true, className: cn(iconWrapperVariants()), children: [
+            /* @__PURE__ */ jsx("span", { className: "relative z-10 flex h-6 w-6 items-center justify-center", children: icon }),
+            showBadge && /* @__PURE__ */ jsx(
+              "span",
+              {
+                "data-badge": true,
+                "data-badge-dot": isDot || void 0,
+                "aria-label": isDot ? "notification" : badgeContent ? `${badgeContent} notifications` : void 0,
+                "aria-live": "polite",
+                className: cn(badgeVariants({ isDot })),
+                children: isDot ? null : badgeContent
+              }
+            )
+          ] }),
+          !hideLabels && label && /* @__PURE__ */ jsx("span", { "data-label": true, className: cn(labelVariants()), children: label })
+        ] })
+      }
+    );
+  }
+);
+NavigationBarItem.displayName = "NavigationBarItem";
+var DrawerContext = createContext(null);
+var HeadlessDrawer = forwardRef(
+  ({
+    variant = "standard",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    scrimClassName,
+    disableRipple = false
+  }, ref) => {
+    const state = useOverlayTriggerState({
+      ...open !== void 0 ? { isOpen: open } : {},
+      ...defaultOpen !== void 0 ? { defaultOpen } : {},
+      ...onOpenChange !== void 0 ? { onOpenChange } : {}
+    });
+    const isOpen = state.isOpen;
+    const close = useCallback(() => {
+      state.close();
+    }, [state]);
+    const contextValue = {
+      isOpen,
+      close,
+      disableRipple
+    };
+    if (variant === "modal") {
+      return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("nav", { ref, role: "navigation", "aria-label": ariaLabel, children: isOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-testid": "drawer-scrim",
+            className: scrimClassName,
+            onClick: () => state.close(),
+            "aria-hidden": "true"
+          }
+        ),
+        /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsx(
+          ModalDrawerPanel,
+          {
+            ariaLabel,
+            onClose: () => state.close(),
+            className,
+            children
+          }
+        ) })
+      ] }) }) });
+    }
+    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        role: "navigation",
+        "aria-label": ariaLabel,
+        className,
+        children
+      }
+    ) });
+  }
+);
+HeadlessDrawer.displayName = "HeadlessDrawer";
+var ModalDrawerPanel = ({
+  ariaLabel,
+  onClose,
+  className,
+  children
+}) => {
+  const panelRef = useRef(null);
+  usePreventScroll();
+  const { dialogProps } = useDialog({ "aria-label": ariaLabel }, panelRef);
+  const { overlayProps } = useOverlay(
+    {
+      isOpen: true,
+      onClose,
+      isDismissable: true,
+      shouldCloseOnBlur: false
+    },
+    panelRef
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(overlayProps, dialogProps),
+      ref: panelRef,
+      className,
+      "aria-modal": "true",
+      children
+    }
+  );
+};
+ModalDrawerPanel.displayName = "ModalDrawerPanel";
+var HeadlessDrawerItem = forwardRef(
+  ({
+    href,
+    isActive = false,
+    children,
+    className,
+    isDisabled,
+    onMouseDown,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    ...restProps
+  }, forwardedRef) => {
+    const internalRef = useRef(null);
+    const { isFocusVisible, focusProps } = useFocusRing();
+    if (href) {
+      const linkRef = forwardedRef ?? internalRef;
+      const { linkProps } = useLink(
+        {
+          href,
+          ...isDisabled !== void 0 ? { isDisabled } : {},
+          ...onPress !== void 0 ? { onPress } : {}
+        },
+        linkRef
+      );
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          ...mergeProps(linkProps, focusProps, { onMouseDown }),
+          ref: linkRef,
+          href,
+          className,
+          "aria-current": isActive ? "page" : void 0,
+          "data-focus-visible": isFocusVisible || void 0,
+          "data-active": isActive || void 0,
+          children
+        }
+      );
+    }
+    const buttonRef = forwardedRef ?? internalRef;
+    const { buttonProps } = useButton(
+      {
+        ...restProps,
+        ...isDisabled !== void 0 ? { isDisabled } : {},
+        ...onPress !== void 0 ? { onPress } : {},
+        ...onPressStart !== void 0 ? { onPressStart } : {},
+        ...onPressEnd !== void 0 ? { onPressEnd } : {},
+        ...onPressChange !== void 0 ? { onPressChange } : {},
+        ...onPressUp !== void 0 ? { onPressUp } : {},
+        elementType: "button"
+      },
+      buttonRef
+    );
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        ...mergeProps(buttonProps, focusProps, { onMouseDown }),
+        ref: buttonRef,
+        className,
+        "aria-current": isActive ? "page" : void 0,
+        "data-focus-visible": isFocusVisible || void 0,
+        "data-active": isActive || void 0,
+        children
+      }
+    );
+  }
+);
+HeadlessDrawerItem.displayName = "HeadlessDrawerItem";
+var drawerVariants = cva(
+  [
+    // Layout
+    "fixed top-0 left-0 h-full w-drawer",
+    "flex flex-col overflow-y-auto",
+    // Stacking and shape
+    "z-50",
+    "rounded-r-xl",
+    // Slide animation (transition applies to all open/closed state changes)
+    "transition-transform duration-medium4 ease-emphasized-decelerate",
+    // Focus outline removal (focus management handled by FocusScope / React Aria)
+    "outline-none",
+    // Padding for content spacing
+    "px-3"
+  ],
+  {
+    variants: {
+      /**
+       * Structural variant — drives surface color and elevation.
+       * - `standard`: inline nav panel, lower-elevation surface
+       * - `modal`: overlay dialog with elevation shadow
+       */
+      variant: {
+        standard: ["bg-surface-container-low"],
+        modal: ["bg-surface-container", "shadow-elevation-1"]
+      },
+      /**
+       * Open/closed state — drives translation.
+       * - `true`:  drawer visible (`translate-x-0`)
+       * - `false`: drawer off-screen (`-translate-x-full`)
+       */
+      open: {
+        true: ["translate-x-0"],
+        false: ["-translate-x-full"]
+      }
+    },
+    defaultVariants: {
+      variant: "standard",
+      open: false
+    }
+  }
+);
+var drawerItemVariants = cva(
+  [
+    // Layout
+    "relative flex w-full items-center gap-3",
+    "h-14 px-4",
+    "rounded-full",
+    // Typography
+    "text-label-large",
+    // Interaction
+    "cursor-pointer select-none outline-none",
+    // State layer pseudo-element
+    "before:absolute before:inset-0 before:rounded-full",
+    "before:transition-opacity before:duration-short2 before:ease-standard",
+    "before:opacity-0",
+    // Hover and focus visible state layers
+    "hover:before:opacity-8",
+    "focus-visible:before:opacity-12",
+    // Active pressed state
+    "active:before:opacity-12",
+    // Transition for color changes
+    "transition-colors duration-short2 ease-standard"
+  ],
+  {
+    variants: {
+      /**
+       * Whether this item is the currently active destination.
+       * Controls background, text color, and icon color per MD3 spec.
+       */
+      isActive: {
+        true: [
+          "bg-secondary-container",
+          "text-on-secondary-container",
+          "before:bg-on-secondary-container"
+        ],
+        false: ["bg-transparent", "text-on-surface-variant", "before:bg-on-surface-variant"]
+      },
+      /**
+       * Whether the item is disabled.
+       * Applies `opacity-38` per MD3 disabled state spec.
+       */
+      isDisabled: {
+        true: ["opacity-38 cursor-not-allowed pointer-events-none"],
+        false: []
+      }
+    },
+    defaultVariants: {
+      isActive: false,
+      isDisabled: false
+    }
+  }
+);
+var scrimVariants = cva([
+  "fixed inset-0 z-40",
+  "bg-scrim opacity-32",
+  "transition-opacity duration-medium2 ease-standard"
+]);
+var drawerSectionVariants = cva(["flex flex-col w-full"]);
+var drawerSectionHeaderVariants = cva([
+  "px-4 pt-4 pb-2",
+  "text-title-small text-on-surface-variant",
+  "select-none"
+]);
+var drawerDividerVariants = cva(["border-t border-outline-variant", "mx-4 my-2"]);
+var Drawer = forwardRef(
+  ({
+    variant = "standard",
+    open,
+    defaultOpen = false,
+    onOpenChange,
+    "aria-label": ariaLabel,
+    children,
+    className,
+    disableRipple = false,
+    ...restProps
+  }, ref) => {
+    const isOpen = open ?? defaultOpen;
+    const drawerPanelClass = cn(
+      drawerVariants({
+        variant,
+        open: isOpen
+      }),
+      className
+    );
+    const scrimClass = scrimVariants();
+    return /* @__PURE__ */ jsx(
+      HeadlessDrawer,
+      {
+        ref,
+        variant,
+        ...open !== void 0 ? { open } : {},
+        ...defaultOpen !== void 0 ? { defaultOpen } : {},
+        ...onOpenChange !== void 0 ? { onOpenChange } : {},
+        "aria-label": ariaLabel,
+        className: drawerPanelClass,
+        scrimClassName: scrimClass,
+        disableRipple,
+        ...restProps,
+        children
+      }
+    );
+  }
+);
+Drawer.displayName = "Drawer";
+var DrawerItem = forwardRef(
+  ({
+    href,
+    icon,
+    label,
+    badge,
+    secondaryText,
+    isActive = false,
+    isDisabled = false,
+    disableRipple = false,
+    className,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    onPressChange,
+    onPressUp,
+    ...restProps
+  }, ref) => {
+    const isItemDisabled = isDisabled;
+    const { onMouseDown: handleRipple, ripples } = useRipple({
+      disabled: isItemDisabled || disableRipple
+    });
+    return /* @__PURE__ */ jsxs(
+      HeadlessDrawerItem,
+      {
+        ...restProps,
+        ref,
+        ...href !== void 0 ? { href } : {},
+        isActive,
+        ...isItemDisabled !== void 0 ? { isDisabled: isItemDisabled } : {},
+        ...onPress !== void 0 ? { onPress } : {},
+        ...onPressStart !== void 0 ? { onPressStart } : {},
+        ...onPressEnd !== void 0 ? { onPressEnd } : {},
+        ...onPressChange !== void 0 ? { onPressChange } : {},
+        ...onPressUp !== void 0 ? { onPressUp } : {},
+        onMouseDown: handleRipple,
+        className: cn(
+          drawerItemVariants({
+            isActive,
+            isDisabled: isItemDisabled
+          }),
+          className
+        ),
+        children: [
+          ripples,
+          icon && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative z-10 flex shrink-0 items-center justify-center",
+              "aria-hidden": "true",
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "relative z-10 flex min-w-0 flex-1 flex-col text-left", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
+            secondaryText && /* @__PURE__ */ jsx("span", { className: "text-body-small truncate opacity-70", children: secondaryText })
+          ] }),
+          badge && /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "relative z-10 ml-auto flex shrink-0 items-center pr-2",
+              "aria-hidden": "true",
+              children: badge
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+DrawerItem.displayName = "DrawerItem";
+var DrawerSection = forwardRef(
+  ({ header, children, showDivider = false, className }, ref) => {
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn(drawerSectionVariants(), className), children: [
+      showDivider && /* @__PURE__ */ jsx("hr", { role: "separator", "aria-hidden": "true", className: drawerDividerVariants() }),
+      header && /* @__PURE__ */ jsx("span", { className: drawerSectionHeaderVariants(), children: header }),
+      children
+    ] });
+  }
+);
+DrawerSection.displayName = "DrawerSection";
 
-export { Button, Checkbox, FAB, FABHeadless, IconButton, IconButtonHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
+export { AppBar, AppBarHeadless, Button, Checkbox, Drawer, DrawerItem, DrawerSection, FAB, FABHeadless, HeadlessDrawer, HeadlessDrawerItem, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, NavigationBar, NavigationBarItem, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, STATE_LAYER_OPACITY, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, applyStateLayer, cn, generateMD3Theme, getColorValue, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, pxToRem, remToPx, rgbToHex, truncateText, withOpacity };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map