@tinybigui/react 0.23.0 → 0.24.0

package/dist/index.js

@@ -5,11 +5,11 @@ export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
 import React, { forwardRef, useRef, createContext, useState, useCallback, useId, useMemo, useEffect, useContext, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { cva } from 'class-variance-authority';
-import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
+import { useButton, useHover, useFocusRing, mergeProps as mergeProps$1, useTextField, useCheckbox, VisuallyHidden, useSwitch, useRadioGroup, useRadio, useTabList, useTab, useTabPanel, FocusScope, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, usePreventScroll, useOverlay, useSlider, useDatePicker, useDialog, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, usePress, useDateSegment, useCalendarGrid, useCalendarCell, useTooltipTrigger, useTooltip, useOverlayPosition } from 'react-aria';
 import { mergeProps, filterDOMProps } from '@react-aria/utils';
 import { useToggleState, useRadioGroupState, useTabListState, Item, useOverlayTriggerState, useListState, useSearchFieldState, useMenuTriggerState, useSliderState, useDatePickerState, useDateFieldState, useRangeCalendarState, useCalendarState, useTooltipTriggerState } from 'react-stately';
-import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
 import { createPortal } from 'react-dom';
+import { MenuItem as MenuItem$1, Menu as Menu$1, MenuTrigger as MenuTrigger$1, Popover, MenuSection as MenuSection$1, Separator, Header, useSlottedContext, ButtonContext } from 'react-aria-components';
 import { createCalendar, getWeeksInMonth, isSameDay, today, getLocalTimeZone } from '@internationalized/date';
 
 // src/utils/cn.ts
@@ -4414,7 +4414,51 @@ var NavigationBarItem = forwardRef(
 );
 NavigationBarItem.displayName = "NavigationBarItem";
 var DrawerContext = createContext(null);
-var DrawerIconOnlyContext = createContext(false);
+var ModalDrawerPanel = ({
+  ariaLabel,
+  onClose,
+  className,
+  animationState,
+  getAnimationClassName,
+  onTransitionEnd,
+  forwardedRef,
+  children
+}) => {
+  const panelRef = useRef(null);
+  usePreventScroll();
+  const { dialogProps } = useDialog(
+    { "aria-label": ariaLabel },
+    panelRef
+  );
+  const { overlayProps } = useOverlay(
+    { isOpen: true, onClose, isDismissable: true, shouldCloseOnBlur: false },
+    panelRef
+  );
+  const setRef = useCallback(
+    (node) => {
+      panelRef.current = node;
+      if (typeof forwardedRef === "function") {
+        forwardedRef(node);
+      } else if (forwardedRef !== null && forwardedRef !== void 0) {
+        forwardedRef.current = node;
+      }
+    },
+    [forwardedRef]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...mergeProps(overlayProps, dialogProps),
+      ref: setRef,
+      "aria-modal": "true",
+      className: cn(className, getAnimationClassName?.(animationState)),
+      "data-animation-state": animationState,
+      onTransitionEnd,
+      children
+    }
+  );
+};
+ModalDrawerPanel.displayName = "ModalDrawerPanel";
 var HeadlessDrawer = forwardRef(
   ({
     variant = "standard",
@@ -4425,8 +4469,9 @@ var HeadlessDrawer = forwardRef(
     children,
     className,
     scrimClassName,
-    disableRipple = false,
-    iconOnly = false
+    getAnimationClassName,
+    getScrimAnimationClassName,
+    disableRipple = false
   }, ref) => {
     const state = useOverlayTriggerState({
       ...open !== void 0 ? { isOpen: open } : {},
@@ -4437,77 +4482,99 @@ var HeadlessDrawer = forwardRef(
     const close = useCallback(() => {
       state.close();
     }, [state]);
+    const [animationState, setAnimationState] = useState("exited");
+    const closedRef = useRef(false);
+    const exitFallbackRef = useRef(null);
+    useEffect(() => {
+      if (!isOpen) return;
+      closedRef.current = false;
+      setAnimationState("entering");
+      const id = setTimeout(() => {
+        setAnimationState("visible");
+      }, 0);
+      return () => clearTimeout(id);
+    }, [isOpen]);
+    useEffect(() => {
+      if (isOpen) return;
+      if (animationState === "exited" || animationState === "entering") return;
+      if (animationState === "visible") {
+        setAnimationState("exiting");
+        exitFallbackRef.current = setTimeout(() => {
+          if (!closedRef.current) {
+            closedRef.current = true;
+            setAnimationState("exited");
+          }
+        }, 500);
+      }
+    }, [isOpen, animationState]);
+    useEffect(
+      () => () => {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+        }
+      },
+      []
+    );
+    const handleTransitionEnd = useCallback(() => {
+      if (animationState === "exiting" && !closedRef.current) {
+        if (exitFallbackRef.current !== null) {
+          clearTimeout(exitFallbackRef.current);
+          exitFallbackRef.current = null;
+        }
+        closedRef.current = true;
+        setAnimationState("exited");
+      }
+    }, [animationState]);
     const contextValue = {
       isOpen,
       close,
-      disableRipple,
-      iconOnly
+      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
-          }
-        ) })
-      ] }) }) });
+    if (variant === "standard") {
+      return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+        "nav",
+        {
+          ref,
+          role: "navigation",
+          "aria-label": ariaLabel,
+          className,
+          children
+        }
+      ) });
     }
-    return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
-      "nav",
-      {
-        ref,
-        role: "navigation",
-        "aria-label": ariaLabel,
-        className,
-        children
-      }
-    ) });
+    if (!isOpen && animationState === "exited") {
+      return null;
+    }
+    if (typeof document === "undefined") return null;
+    const content = /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "drawer-scrim",
+          className: cn(scrimClassName, getScrimAnimationClassName?.(animationState)),
+          "data-animation-state": animationState,
+          onClick: close,
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        ModalDrawerPanel,
+        {
+          ariaLabel,
+          onClose: close,
+          className,
+          animationState,
+          getAnimationClassName,
+          onTransitionEnd: handleTransitionEnd,
+          forwardedRef: ref,
+          children
+        }
+      )
+    ] }) });
+    return createPortal(content, document.body);
   }
 );
 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,
@@ -4525,7 +4592,6 @@ var HeadlessDrawerItem = forwardRef(
     ...restProps
   }, forwardedRef) => {
     const internalRef = useRef(null);
-    const { isFocusVisible, focusProps } = useFocusRing();
     if (href) {
       const linkRef = forwardedRef ?? internalRef;
       const { linkProps } = useLink(
@@ -4539,14 +4605,12 @@ var HeadlessDrawerItem = forwardRef(
       return /* @__PURE__ */ jsx(
         "a",
         {
-          ...mergeProps(linkProps, focusProps, { onMouseDown }),
+          ...mergeProps(linkProps, { onMouseDown }),
           ref: linkRef,
           href,
           className,
           title,
           "aria-current": isActive ? "page" : void 0,
-          "data-focus-visible": isFocusVisible || void 0,
-          "data-active": isActive || void 0,
           children
         }
       );
@@ -4569,13 +4633,11 @@ var HeadlessDrawerItem = forwardRef(
       "button",
       {
         type: "button",
-        ...mergeProps(buttonProps, focusProps, { onMouseDown }),
+        ...mergeProps(buttonProps, { onMouseDown }),
         ref: buttonRef,
         className,
         title,
         "aria-current": isActive ? "page" : void 0,
-        "data-focus-visible": isFocusVisible || void 0,
-        "data-active": isActive || void 0,
         children
       }
     );
@@ -4670,120 +4732,195 @@ var drawerVariants = cva(
     // Layout
     "fixed top-0 left-0 h-full",
     "flex flex-col overflow-y-auto",
-    // Stacking and shape
+    // Width — 360dp per MD3 spec
+    "w-drawer",
+    // Stacking
     "z-50",
-    "rounded-r-xl",
-    // Slide animation (transition applies to all open/closed state changes)
-    "transition-transform duration-medium4 ease-emphasized-decelerate",
+    // Container padding — 12dp per MD3 nav drawer spec
+    "px-3 py-3",
     // Focus outline removal (focus management handled by FocusScope / React Aria)
-    "outline-none",
-    // Padding for content spacing
-    "px-3"
+    "outline-none"
   ],
   {
     variants: {
       /**
-       * Structural variant — drives surface color and elevation.
-       * - `standard`: inline nav panel, lower-elevation surface
-       * - `modal`: overlay dialog with elevation shadow
+       * Structural variant — drives shape and elevation.
+       *
+       * - `standard`: flush left panel, square trailing edge, flat surface.
+       * - `modal`:    overlay dialog, 16dp trailing corner, shadow-elevation-1.
        */
       variant: {
-        standard: ["bg-surface-container-low"],
-        modal: ["bg-surface-container", "shadow-elevation-1"]
+        standard: ["bg-surface-container-low", "rounded-none"],
+        modal: ["bg-surface-container-low", "rounded-r-lg", "shadow-elevation-1"]
       },
       /**
-       * Open/closed state — drives translation.
-       * - `true`:  drawer visible (`translate-x-0`)
-       * - `false`: drawer off-screen (`-translate-x-full`)
+       * Open/closed state — drives translation for the STANDARD variant only.
+       *
+       * Standard slide: spatial on-screen property → spring-standard-default-spatial.
+       * Modal enter/exit is handled externally via drawerAnimationVariants + portal gate.
+       *
+       * - `true`:  translate-x-0 (visible)
+       * - `false`: -translate-x-full (off-screen to the left)
        */
       open: {
-        true: ["translate-x-0"],
-        false: ["-translate-x-full"]
-      },
-      /**
-       * Icon-only compact mode — 80dp rail instead of 360dp drawer.
-       * - `true`:  `w-20` (80dp), items centered
-       * - `false`: `w-drawer` (360dp), standard layout
-       */
-      iconOnly: {
-        true: ["w-20", "items-center"],
-        false: ["w-drawer"]
+        true: [
+          "translate-x-0",
+          "transition-transform",
+          "duration-spring-standard-default-spatial",
+          "ease-spring-standard-default-spatial"
+        ],
+        false: [
+          "-translate-x-full",
+          "transition-transform",
+          "duration-spring-standard-default-spatial",
+          "ease-spring-standard-default-spatial"
+        ]
       }
     },
     defaultVariants: {
       variant: "standard",
-      open: false,
-      iconOnly: false
+      open: false
     }
   }
 );
-var drawerItemVariants = cva(
+var drawerAnimationVariants = cva("", {
+  variants: {
+    animationState: {
+      // Mount frame: invisible until animation starts
+      entering: ["opacity-0"],
+      // Entry animation: slide in from the left edge
+      visible: ["animate-md-slide-in-left"],
+      // Exit animation: slide out to the left
+      exiting: ["animate-md-slide-out-left"],
+      // Portal gate removes element; classes below act as a safety net
+      exited: ["opacity-0", "pointer-events-none"]
+    }
+  },
+  defaultVariants: {
+    animationState: "entering"
+  }
+});
+var drawerScrimAnimationVariants = 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 (z-[1] above active indicator)
-    "before:absolute before:inset-0 before:rounded-full before:z-[1]",
-    "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"
+    "transition-opacity",
+    "duration-spring-standard-fast-effects",
+    "ease-spring-standard-fast-effects"
   ],
   {
     variants: {
-      /**
-       * Whether this item is the currently active destination.
-       *
-       * Active indicator is a 336dp pill rendered via `after:` pseudo-element
-       * per MD3 Navigation Drawer spec.
-       */
-      isActive: {
-        true: [
-          "text-on-secondary-container",
-          "before:bg-on-secondary-container",
-          // Active indicator — 336dp pill via after: pseudo
-          "after:absolute after:inset-0 after:mx-auto after:max-w-[336px]",
-          "after:rounded-full after:bg-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: []
+      animationState: {
+        entering: ["opacity-0"],
+        visible: ["opacity-32"],
+        exiting: ["opacity-0"],
+        exited: ["opacity-0", "pointer-events-none"]
       }
     },
     defaultVariants: {
-      isActive: false,
-      isDisabled: false
+      animationState: "entering"
     }
   }
 );
-var scrimVariants = cva([
+var drawerItemVariants = cva([
+  // Layout
+  "relative flex w-full items-center",
+  "h-14 pl-4 pr-6 gap-3",
+  // Shape
+  "rounded-full",
+  // Typography — Label Large per MD3 spec (size via text-label-large, weight + tracking explicit)
+  "text-label-large",
+  "font-medium",
+  "tracking-[0.1px]",
+  // Interaction
+  "cursor-pointer select-none outline-none",
+  // Color transition (effects — no overshoot)
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Inactive content color (icon/label/badge inherit this via currentColor)
+  "text-on-surface-variant",
+  // Active content color — self-targeting data-[active]: (root is the group host)
+  "data-[active]:text-on-secondary-container",
+  // Disabled — self-targeting
+  "data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed",
+  "data-[disabled]:text-on-surface/38"
+]);
+var drawerItemActiveIndicatorVariants = cva([
+  "absolute inset-0 rounded-[inherit] pointer-events-none",
+  "bg-secondary-container",
+  // Effects transition for opacity — no overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hidden when inactive; shown when active
+  "opacity-0",
+  "group-data-[active]/draweritem:opacity-100",
+  // z-0: below state layer (z-[1]) and content (z-10)
+  "z-0"
+]);
+var drawerItemStateLayerVariants = cva([
+  "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+  // Effects transition — opacity must NOT overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Color: inactive uses on-surface-variant; active switches to on-secondary-container
+  "bg-on-surface-variant",
+  "group-data-[active]/draweritem:bg-on-secondary-container",
+  // Hover: 8%
+  "group-data-[hovered]/draweritem:opacity-8",
+  // Focus-visible: 10% (MD3 focus state layer)
+  "group-data-[focus-visible]/draweritem:opacity-10",
+  // Pressed: 10%, doubled selector wins over hover at same cascade position
+  "group-data-[pressed]/draweritem:group-data-[pressed]/draweritem:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/draweritem:hidden",
+  // z-[1]: above active indicator (z-0), below focus ring and content
+  "z-[1]"
+]);
+var drawerItemFocusRingVariants = cva([
+  "pointer-events-none absolute inset-0 rounded-[inherit]",
+  "outline outline-2 -outline-offset-2 outline-secondary",
+  // Effects transition — opacity must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/draweritem:opacity-100",
+  // z-[2]: above state layer (z-[1]), below content (z-10)
+  "z-[2]"
+]);
+var drawerItemIconVariants = cva([
+  "relative z-10 flex shrink-0 items-center justify-center",
+  "h-6 w-6",
+  // Color and transition inherited via currentColor from root
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Explicit disabled override — mirrors Menu icon (on-surface/38)
+  "group-data-[disabled]/draweritem:text-on-surface/38"
+]);
+var drawerItemLabelVariants = cva(["relative z-10 flex-1 min-w-0 truncate"]);
+var drawerItemBadgeVariants = cva([
+  "relative z-10 shrink-0 ml-auto",
+  "text-label-large",
+  "font-medium",
+  "tracking-[0.1px]",
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+]);
+var drawerHeadlineVariants = cva([
+  "px-4 pt-4 pb-1",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
+  "select-none"
+]);
+var drawerScrimVariants = cva([
   "fixed inset-0 z-40",
-  "bg-scrim opacity-32",
-  "transition-opacity duration-short4 ease-standard"
+  // NOTE: opacity is intentionally absent here — it is controlled per
+  // animation state by drawerScrimAnimationVariants (opacity-0 / opacity-32)
+  // to avoid tailwind-merge collapsing the classes during cn() composition.
+  "bg-scrim"
 ]);
 var drawerSectionVariants = cva(["flex flex-col w-full"]);
 var drawerSectionHeaderVariants = cva([
   "px-4 pt-4 pb-2",
-  "text-title-small text-on-surface-variant",
+  "text-title-small",
+  "font-medium",
+  "tracking-[0.1px]",
+  "text-on-surface-variant",
   "select-none"
 ]);
-cva(["border-t border-outline-variant", "mx-4 my-2"]);
 var DrawerSection = forwardRef(
   ({ header, children, showDivider = true, _isFirstSection = false, className }, ref) => {
     const shouldShowDivider = showDivider && !_isFirstSection;
@@ -4805,19 +4942,19 @@ var Drawer = forwardRef(
     children,
     className,
     disableRipple = false,
-    iconOnly = false,
     ...restProps
   }, ref) => {
     const isOpen = open ?? defaultOpen;
+    const reducedMotion = useReducedMotion();
     const drawerPanelClass = cn(
-      drawerVariants({
-        variant,
-        open: isOpen,
-        iconOnly
-      }),
+      drawerVariants({ variant, open: isOpen }),
+      // Suppress spring transition when user has requested reduced motion
+      reducedMotion && "transition-none",
       className
     );
-    const scrimClass = scrimVariants();
+    const scrimClass = drawerScrimVariants();
+    const getAnimationClassName = reducedMotion ? (_state) => "" : (state) => drawerAnimationVariants({ animationState: state });
+    const getScrimAnimationClassName = reducedMotion ? (_state) => "" : (state) => drawerScrimAnimationVariants({ animationState: state });
     let foundFirstSection = false;
     const processedChildren = React.Children.map(children, (child) => {
       if (React.isValidElement(child) && child.type === DrawerSection) {
@@ -4830,7 +4967,7 @@ var Drawer = forwardRef(
       }
       return child;
     });
-    return /* @__PURE__ */ jsx(DrawerIconOnlyContext.Provider, { value: iconOnly, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(
       HeadlessDrawer,
       {
         ref,
@@ -4841,153 +4978,99 @@ var Drawer = forwardRef(
         "aria-label": ariaLabel,
         className: drawerPanelClass,
         scrimClassName: scrimClass,
+        getAnimationClassName,
+        getScrimAnimationClassName,
         disableRipple,
-        iconOnly,
         ...restProps,
         children: processedChildren
       }
-    ) });
+    );
   }
 );
 Drawer.displayName = "Drawer";
-var badgeAppearance = [
-  // ── Shape ─────────────────────────────────────────────────────────────────────
-  "flex items-center justify-center",
-  "rounded-full",
-  // ── Large (count) sizing — base defaults ──────────────────────────────────────
-  // Height 16dp, min-width 16dp, horizontal padding 4dp
-  "h-4 min-w-4 px-1",
-  // ── Color — error role (only MD3-spec role for badges) ────────────────────────
-  "bg-error text-on-error",
-  // ── Typography — label-small, tight leading, tabular numbers ──────────────────
-  "text-label-small leading-none tabular-nums",
-  // ── Visibility (runtime flag) ──────────────────────────────────────────────────
-  // Base: fully visible
-  "scale-100",
-  // data-invisible: scale to zero (visually hidden; aria-label still readable by SR)
-  "data-[invisible]:scale-0",
-  // ── Dot content flag overrides (placed last — cascade wins over base sizing) ───
-  // Clear out the count-pill sizing, set 6dp circle
-  "data-[dot]:size-1.5",
-  "data-[dot]:min-w-0",
-  "data-[dot]:p-0",
-  "data-[dot]:text-[0]"
-  // suppress any stray text rendering on dot
-];
-var badgeVariants2 = cva([
-  // ── Anchored placement — badge center on host's top-right corner ──────────────
-  // top-0 right-0 places the badge's own top-right at the host's top-right,
-  // then the 1/2-element translate moves the badge center onto that corner.
-  // Host-size-agnostic: works for any wrapped element (icon, avatar, nav chip).
-  "absolute top-0 right-0 -translate-y-1/2 translate-x-1/2",
-  ...badgeAppearance
-]);
-var badgeStaticVariants = cva(["inline-flex", ...badgeAppearance]);
-function isBadgeConfig(badge) {
-  return typeof badge === "object" && badge !== null && !isValidElement(badge) && "count" in badge;
-}
-function getBadgeDisplayValue(count, max) {
-  if (count === void 0) return "";
-  return count > max ? `${max}+` : count.toString();
-}
-function getBadgeAriaLabel(count) {
-  return count === void 0 ? "New" : `${count} notifications`;
-}
 var DrawerItem = forwardRef(
   ({
     href,
     icon,
     label,
     badge,
-    secondaryText,
     isActive = false,
     isDisabled = false,
     disableRipple = false,
     className,
-    onPress,
-    onPressStart,
-    onPressEnd,
-    onPressChange,
-    onPressUp,
+    // All remaining props (onPress, onPressStart, onPressEnd, etc.) stay in
+    // restProps and are passed into mergeProps — mirrors the Button pattern.
     ...restProps
   }, ref) => {
-    const isItemDisabled = isDisabled;
-    const isIconOnly = useContext(DrawerIconOnlyContext);
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isItemDisabled || disableRipple
+      disabled: isDisabled || disableRipple
     });
-    const renderBadge = () => {
-      if (!badge) return null;
-      if (isBadgeConfig(badge)) {
-        const max = 999;
-        const isDot = badge.count === void 0;
-        const displayValue = getBadgeDisplayValue(badge.count, max);
-        const ariaLabel = getBadgeAriaLabel(badge.count);
-        return /* @__PURE__ */ jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx(
-          "span",
-          {
-            role: "status",
-            "aria-label": ariaLabel,
-            "data-dot": isDot ? "" : void 0,
-            className: cn(badgeStaticVariants()),
-            children: displayValue
-          }
-        ) });
-      }
-      return /* @__PURE__ */ jsx("span", { className: "relative z-10 ml-auto flex shrink-0 items-center pr-2", "aria-hidden": "true", children: badge });
-    };
+    const mergedInteractionProps = mergeProps$1(
+      hoverProps,
+      focusProps,
+      { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+      restProps
+    );
     return /* @__PURE__ */ jsxs(
       HeadlessDrawerItem,
       {
-        ...restProps,
+        ...mergedInteractionProps,
         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 } : {},
+        ...isDisabled !== void 0 ? { isDisabled } : {},
         onMouseDown: handleRipple,
-        title: isIconOnly ? label : void 0,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled
+        }),
+        "data-active": isActive ? "" : void 0,
         className: cn(
-          drawerItemVariants({
-            isActive,
-            isDisabled: isItemDisabled
-          }),
+          drawerItemVariants(),
+          // group/draweritem: enables group-data-[x]/draweritem selectors in all slots
+          "group/draweritem",
           className
         ),
         children: [
-          ripples,
-          icon && /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemActiveIndicatorVariants() }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemStateLayerVariants() }),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemFocusRingVariants() }),
+          /* @__PURE__ */ jsx(
             "span",
             {
-              className: "relative z-10 flex shrink-0 items-center justify-center",
+              className: "pointer-events-none absolute inset-0 z-[3] overflow-hidden rounded-[inherit]",
               "aria-hidden": "true",
-              children: icon
+              children: ripples
             }
           ),
-          /* @__PURE__ */ jsxs(
+          icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: drawerItemIconVariants(), children: icon }),
+          /* @__PURE__ */ jsx("span", { className: drawerItemLabelVariants(), children: label }),
+          badge !== void 0 && badge !== null && /* @__PURE__ */ jsx(
             "span",
             {
-              className: cn(
-                "relative z-10 flex min-w-0 flex-1 flex-col text-left",
-                isIconOnly && "hidden"
-              ),
-              children: [
-                /* @__PURE__ */ jsx("span", { className: "truncate", children: label }),
-                secondaryText && /* @__PURE__ */ jsx("span", { className: "text-body-small truncate opacity-70", children: secondaryText })
-              ]
+              role: "status",
+              "aria-label": typeof badge === "number" ? `${badge} notifications` : String(badge),
+              className: drawerItemBadgeVariants(),
+              children: badge
             }
-          ),
-          !isIconOnly && renderBadge()
+          )
         ]
       }
     );
   }
 );
 DrawerItem.displayName = "DrawerItem";
+var DrawerHeadline = forwardRef(
+  ({ children, className, ...restProps }, ref) => /* @__PURE__ */ jsx("span", { ref, className: cn(drawerHeadlineVariants(), className), ...restProps, children })
+);
+DrawerHeadline.displayName = "DrawerHeadline";
 var progressContainerVariants = cva(["inline-flex", "flex-col", "gap-1"], {
   variants: {
     type: {
@@ -10025,6 +10108,39 @@ var BadgeHeadless = forwardRef(
   }
 );
 BadgeHeadless.displayName = "BadgeHeadless";
+var badgeAppearance = [
+  // ── Shape ─────────────────────────────────────────────────────────────────────
+  "flex items-center justify-center",
+  "rounded-full",
+  // ── Large (count) sizing — base defaults ──────────────────────────────────────
+  // Height 16dp, min-width 16dp, horizontal padding 4dp
+  "h-4 min-w-4 px-1",
+  // ── Color — error role (only MD3-spec role for badges) ────────────────────────
+  "bg-error text-on-error",
+  // ── Typography — label-small, tight leading, tabular numbers ──────────────────
+  "text-label-small leading-none tabular-nums",
+  // ── Visibility (runtime flag) ──────────────────────────────────────────────────
+  // Base: fully visible
+  "scale-100",
+  // data-invisible: scale to zero (visually hidden; aria-label still readable by SR)
+  "data-[invisible]:scale-0",
+  // ── Dot content flag overrides (placed last — cascade wins over base sizing) ───
+  // Clear out the count-pill sizing, set 6dp circle
+  "data-[dot]:size-1.5",
+  "data-[dot]:min-w-0",
+  "data-[dot]:p-0",
+  "data-[dot]:text-[0]"
+  // suppress any stray text rendering on dot
+];
+var badgeVariants2 = cva([
+  // ── Anchored placement — badge center on host's top-right corner ──────────────
+  // top-0 right-0 places the badge's own top-right at the host's top-right,
+  // then the 1/2-element translate moves the badge center onto that corner.
+  // Host-size-agnostic: works for any wrapped element (icon, avatar, nav chip).
+  "absolute top-0 right-0 -translate-y-1/2 translate-x-1/2",
+  ...badgeAppearance
+]);
+cva(["inline-flex", ...badgeAppearance]);
 var getDisplayValue = (count, max) => {
   if (count === void 0) return "";
   return count > max ? `${max}+` : count.toString();
@@ -15572,7 +15688,7 @@ var modeToggleStateLayerVariants = cva([
   "group-data-[focus-visible]/mode-toggle:opacity-10",
   "group-data-[pressed]/mode-toggle:opacity-10"
 ]);
-var scrimVariants2 = cva([
+var scrimVariants = cva([
   "fixed inset-0 z-40",
   "bg-scrim opacity-32",
   "transition-opacity duration-medium2 ease-standard"
@@ -16315,7 +16431,7 @@ var DatePickerModalStyled = forwardRef(
           !reducedMotion && MODAL_DIALOG_MOTION,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         slots: {
           CellComponent: StyledCalendarCell,
           NavButtonComponent: StyledNavButton,
@@ -16765,7 +16881,7 @@ var DatePickerModalInputStyled = forwardRef(
           MODAL_INPUT_CONTENT_STRUCTURAL,
           className
         ),
-        scrimClassName: cn(scrimVariants2()),
+        scrimClassName: cn(scrimVariants()),
         ActionButtonComponent: StyledActionButton
       }
     );
@@ -16877,6 +16993,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerContext, DrawerHeadline, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, drawerAnimationVariants, drawerHeadlineVariants, drawerItemActiveIndicatorVariants, drawerItemBadgeVariants, drawerItemFocusRingVariants, drawerItemIconVariants, drawerItemLabelVariants, drawerItemStateLayerVariants, drawerItemVariants, drawerScrimAnimationVariants, drawerScrimVariants, drawerSectionHeaderVariants, drawerSectionVariants, drawerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonFocusRingVariants, splitButtonIconVariants, splitButtonLabelVariants, splitButtonLeadingVariants, splitButtonMenuItemVariants, splitButtonMenuVariants, splitButtonStateLayerVariants, splitButtonTrailingVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map