@tinybigui/react 0.4.1 → 0.4.2

package/dist/index.js

@@ -2,10 +2,10 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { argbFromHex, themeFromSourceColor } from '@material/material-color-utilities';
 export { argbFromHex, hexFromArgb } from '@material/material-color-utilities';
-import React, { forwardRef, useRef, createContext, useId, useState, useCallback, useEffect, useContext, useMemo, useLayoutEffect, Children, isValidElement, cloneElement } from 'react';
+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, useTextField, useFocusRing, useCheckbox, VisuallyHidden, mergeProps as mergeProps$1, useSwitch, useHover, 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, 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, usePreventScroll, useDialog, useOverlay, useLink, useSeparator, useProgressBar, useToggleButton, useListBox, useOption, useSearchField, useSlider, useDatePicker, useLocale, useDateField, useSliderThumb, useRangeCalendar, useCalendar, usePopover, DismissButton, 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';
@@ -421,218 +421,206 @@ var ButtonHeadless = forwardRef(
 ButtonHeadless.displayName = "ButtonHeadless";
 var buttonVariants = cva(
   [
-    // Base classes (always applied)
-    "relative inline-flex items-center justify-center cursor-pointer",
-    "overflow-hidden rounded-full font-medium",
-    // Split MD3 transition: spatial (border-radius) uses expressive spring with overshoot;
-    // effects (color/bg/shadow) use standard effects spring — no overshoot allowed on color.
+    // Layout + shape — NO overflow-hidden here (see note above)
+    "relative inline-flex items-center justify-center",
+    "rounded-full cursor-pointer select-none",
+    // Split MD3 transition: spatial (border-radius) → expressive spring;
+    // effects (color/bg/shadow) → standard effects spring.
     "btn-transition",
-    "tracking-[0.1px]",
-    // MD3 spec: +0.1px letter-spacing for label-large
-    "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2"
+    // Disabled — self-targeting data-[x]: selectors
+    "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none"
   ],
   {
     variants: {
       /**
-       * Button variant (MD3 specification)
+       * Button variant (MD3 specification — strict, no color override)
+       *
+       * Elevation per state follows _md-comp-*-button.scss tokens:
+       *   Filled/Tonal  hover→level-1, focus/pressed→level-0
+       *   Elevated      base→level-1, hover→level-2, focus/pressed→level-1
+       *   Outlined/Text no elevation
        */
       variant: {
-        filled: "shadow-none hover:shadow-elevation-1",
-        // MD3: gains elevation on hover
-        outlined: "bg-transparent border border-outline-variant",
-        tonal: "",
-        elevated: "shadow-elevation-1 hover:shadow-elevation-2",
-        // MD3: level 1 → level 2 on hover
-        text: "bg-transparent"
-      },
-      /**
-       * Color scheme (MD3 color roles)
-       */
-      color: {
-        primary: "",
-        secondary: "",
-        tertiary: "",
-        error: ""
+        /**
+         * Filled — highest emphasis.
+         * MD3: container=primary, label=on-primary, state-layer=on-primary
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
+         */
+        filled: [
+          "bg-primary text-on-primary shadow-none",
+          // Hover: gains level-1 elevation
+          "group-data-[hovered]/button:shadow-elevation-1",
+          // Focus/pressed: shadow must explicitly return to level-0
+          // (doubled attribute selector → higher specificity than hover)
+          "group-data-[focus-visible]/button:shadow-none",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Outlined — medium emphasis. Transparent with border.
+         * MD3: container=transparent, outline=outline, label=primary, state-layer=primary
+         * Elevation: always 0
+         */
+        outlined: [
+          "bg-transparent border border-outline text-primary",
+          // Disabled overrides
+          "group-data-[disabled]/button:border-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38"
+        ],
+        /**
+         * Tonal — secondary emphasis.
+         * MD3 name: "Filled tonal". container=secondary-container, label=on-secondary-container
+         * Elevation: 0 base → 1 hover → 0 focus → 0 pressed
+         */
+        tonal: [
+          "bg-secondary-container text-on-secondary-container shadow-none",
+          // Hover: gains level-1 elevation (same as filled)
+          "group-data-[hovered]/button:shadow-elevation-1",
+          // Focus/pressed: return to level-0
+          "group-data-[focus-visible]/button:shadow-none",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-none",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Elevated — separation via shadow.
+         * MD3: container=surface-container-low, label=primary
+         * Elevation: 1 base → 2 hover → 1 focus → 1 pressed
+         */
+        elevated: [
+          "bg-surface-container-low text-primary shadow-elevation-1",
+          // Hover: gains extra elevation
+          "group-data-[hovered]/button:shadow-elevation-2",
+          // Focus/pressed: return to base level-1
+          // (doubled selector wins over single hover selector at same cascade position)
+          "group-data-[focus-visible]/button:shadow-elevation-1",
+          "group-data-[pressed]/button:group-data-[pressed]/button:shadow-elevation-1",
+          // Disabled overrides
+          "group-data-[disabled]/button:bg-on-surface/12",
+          "group-data-[disabled]/button:text-on-surface/38",
+          "group-data-[disabled]/button:shadow-none"
+        ],
+        /**
+         * Text — lowest emphasis.
+         * MD3: container=transparent, label=primary, state-layer=primary
+         * Elevation: always 0
+         */
+        text: [
+          "bg-transparent text-primary",
+          // Disabled overrides
+          "group-data-[disabled]/button:text-on-surface/38"
+        ]
       },
       /**
        * Button size
+       * MD3 spec: small=32dp, medium=40dp, large=56dp
+       * Padding: small=16dp, medium=24dp, large=32dp
+       * Text variant uses reduced padding: small=12dp, medium=12dp
        */
       size: {
-        small: "h-8 px-4 text-sm gap-2",
-        medium: "h-10 px-6 text-sm gap-2",
-        large: "h-12 px-8 text-base gap-3"
+        small: "h-8 px-4 gap-1 text-label-medium tracking-[0.1px]",
+        medium: "h-10 px-6 gap-2 text-label-large tracking-[0.1px]",
+        large: "h-14 px-8 gap-2 text-title-medium"
       },
       /**
-       * Full width variant
+       * Full width button (spans container)
        */
       fullWidth: {
         true: "w-full",
         false: ""
-      },
-      /**
-       * Disabled state (MD3 spec: container 12% opacity, content 38% opacity)
-       */
-      disabled: {
-        true: [
-          "pointer-events-none cursor-not-allowed",
-          "bg-on-surface/12",
-          // MD3: disabled container uses on-surface at 12%
-          "text-on-surface/38",
-          // MD3: disabled text/icons use on-surface at 38%
-          "border-on-surface/12",
-          // For outlined variant
-          "shadow-none"
-          // Remove elevation when disabled
-        ],
-        false: ""
-      },
-      /**
-       * Loading state
-       */
-      loading: {
-        true: "cursor-wait",
-        false: ""
       }
     },
     /**
-     * Compound variants - combinations of variant + color
+     * Compound variants for text variant reduced padding per size
+     * MD3: text buttons use 12dp padding (px-3) instead of standard padding
      */
     compoundVariants: [
-      // ====================
-      // FILLED VARIANTS
-      // ====================
-      {
-        variant: "filled",
-        color: "primary",
-        className: "bg-primary text-on-primary"
-      },
-      {
-        variant: "filled",
-        color: "secondary",
-        className: "bg-secondary text-on-secondary"
-      },
-      {
-        variant: "filled",
-        color: "tertiary",
-        className: "bg-tertiary text-on-tertiary"
-      },
-      {
-        variant: "filled",
-        color: "error",
-        className: "bg-error text-on-error"
-      },
-      // ====================
-      // OUTLINED VARIANTS
-      // ====================
-      {
-        variant: "outlined",
-        color: "primary",
-        className: "text-primary"
-      },
-      {
-        variant: "outlined",
-        color: "secondary",
-        className: "text-secondary"
-      },
-      {
-        variant: "outlined",
-        color: "tertiary",
-        className: "text-tertiary"
-      },
-      {
-        variant: "outlined",
-        color: "error",
-        className: "text-error"
-      },
-      // ====================
-      // TONAL VARIANTS
-      // ====================
-      {
-        variant: "tonal",
-        color: "primary",
-        className: "bg-primary-container text-on-primary-container"
-      },
-      {
-        variant: "tonal",
-        color: "secondary",
-        className: "bg-secondary-container text-on-secondary-container"
-      },
-      {
-        variant: "tonal",
-        color: "tertiary",
-        className: "bg-tertiary-container text-on-tertiary-container"
-      },
-      {
-        variant: "tonal",
-        color: "error",
-        className: "bg-error-container text-on-error-container"
-      },
-      // ====================
-      // ELEVATED VARIANTS
-      // ====================
-      {
-        variant: "elevated",
-        color: "primary",
-        className: "bg-surface-container-low text-primary"
-      },
-      {
-        variant: "elevated",
-        color: "secondary",
-        className: "bg-surface-container-low text-secondary"
-      },
-      {
-        variant: "elevated",
-        color: "tertiary",
-        className: "bg-surface-container-low text-tertiary"
-      },
-      {
-        variant: "elevated",
-        color: "error",
-        className: "bg-surface-container-low text-error"
-      },
-      // ====================
-      // TEXT VARIANTS
-      // ====================
-      {
-        variant: "text",
-        color: "primary",
-        className: "text-primary hover:bg-primary/[0.08]"
-        // MD3: text buttons gain primary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "secondary",
-        className: "text-secondary hover:bg-secondary/[0.08]"
-        // MD3: text buttons gain secondary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "tertiary",
-        className: "text-tertiary hover:bg-tertiary/[0.08]"
-        // MD3: text buttons gain tertiary color at 8% opacity on hover
-      },
-      {
-        variant: "text",
-        color: "error",
-        className: "text-error hover:bg-error/[0.08]"
-        // MD3: text buttons gain error color at 8% opacity on hover
-      }
+      { variant: "text", size: "small", className: "px-3" },
+      { variant: "text", size: "medium", className: "px-3" },
+      { variant: "text", size: "large", className: "px-4" }
     ],
-    /**
-     * Default variants
-     */
     defaultVariants: {
       variant: "filled",
-      color: "primary",
       size: "medium",
-      fullWidth: false,
-      disabled: false,
-      loading: false
+      fullWidth: false
     }
   }
 );
+var buttonStateLayerVariants = cva(
+  [
+    "absolute inset-0 rounded-[inherit] overflow-hidden pointer-events-none opacity-0",
+    // Effects transition for opacity — standard spring, no overshoot
+    "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+    // Hover: 8%
+    "group-data-[hovered]/button:opacity-8",
+    // Focus: 10%
+    "group-data-[focus-visible]/button:opacity-10",
+    // Pressed: 10%, doubled selector wins over hover
+    "group-data-[pressed]/button:group-data-[pressed]/button:opacity-10",
+    // No state layer when disabled
+    "group-data-[disabled]/button:hidden"
+  ],
+  {
+    variants: {
+      variant: {
+        filled: "bg-on-primary",
+        outlined: "bg-primary",
+        tonal: "bg-on-secondary-container",
+        elevated: "bg-primary",
+        text: "bg-primary"
+      }
+    },
+    defaultVariants: { variant: "filled" }
+  }
+);
+var buttonFocusRingVariants = cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  // Effects transition — opacity change must not overshoot
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/button:opacity-100"
+]);
+var buttonIconVariants = cva(
+  [
+    "relative z-10 inline-flex shrink-0 items-center justify-center",
+    "size-[18px]",
+    // Color transition uses effects token (no spatial overshoot on color)
+    "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+  ],
+  {
+    variants: {
+      hidden: {
+        true: "invisible",
+        false: ""
+      }
+    },
+    defaultVariants: { hidden: false }
+  }
+);
+var buttonLabelVariants = cva(["relative z-10 inline-flex items-center"]);
+var QUERY = "(prefers-reduced-motion: reduce)";
+function useReducedMotion() {
+  const [reduced, setReduced] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  useEffect(() => {
+    const mql = window.matchMedia(QUERY);
+    const handler = (e) => setReduced(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return reduced;
+}
 function useRipple(options = {}) {
   const { disabled = false, color = "currentColor", duration = 450 } = options;
+  const prefersReducedMotion = useReducedMotion();
   const [ripples, setRipples] = useState([]);
   const rippleKeyCounter = useRef(0);
   const timersRef = useRef([]);
@@ -643,7 +631,7 @@ function useRipple(options = {}) {
   }, []);
   const onMouseDown = useCallback(
     (event) => {
-      if (disabled) return;
+      if (disabled || prefersReducedMotion) return;
       const element = event.currentTarget;
       const rect = element.getBoundingClientRect();
       const x = event.clientX - rect.left;
@@ -659,9 +647,9 @@ function useRipple(options = {}) {
       }, duration);
       timersRef.current.push(timer);
     },
-    [disabled, duration]
+    [disabled, duration, prefersReducedMotion]
   );
-  const rippleElements = disabled ? null : /* @__PURE__ */ jsx(
+  const rippleElements = disabled || prefersReducedMotion ? null : /* @__PURE__ */ jsx(
     "span",
     {
       "data-ripple-container": true,
@@ -669,7 +657,7 @@ function useRipple(options = {}) {
       children: ripples.map((ripple) => /* @__PURE__ */ jsx(
         "span",
         {
-          className: "animate-ripple absolute rounded-full opacity-12",
+          className: "animate-md-ripple absolute rounded-full opacity-12",
           style: {
             left: ripple.x,
             top: ripple.y,
@@ -761,7 +749,7 @@ var Spinner = () => /* @__PURE__ */ jsxs(
   {
     role: "progressbar",
     "aria-label": "Loading",
-    className: "h-4 w-4 animate-spin",
+    className: "relative z-10 h-[18px] w-[18px] animate-spin",
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -782,7 +770,6 @@ var Button = forwardRef(
   ({
     // Variant props (CVA)
     variant = "filled",
-    color = "primary",
     size = "medium",
     fullWidth = false,
     // Content props
@@ -795,64 +782,84 @@ var Button = forwardRef(
     isDisabled = false,
     // Styling
     className,
-    // Other props
+    // Other button props
     tabIndex = 0,
     type = "button",
-    onPress,
+    // Passed through to ButtonHeadless → useButton
     ...props
   }, ref) => {
+    const buttonRef = useRef(null);
+    const resolvedRef = ref ?? buttonRef;
     const groupCtx = useOptionalButtonGroup();
     const isConnected = groupCtx?.variant === "connected";
-    if (process.env.NODE_ENV === "development") {
-      if (!children) {
-        console.warn(
-          "[Button] Button should have text content. Use IconButton for icon-only buttons."
-        );
-      }
-      if (icon && trailingIcon) {
-        console.warn("[Button] Button should have either icon or trailingIcon, not both.");
-      }
-    }
     const isButtonDisabled = isDisabled || loading;
+    const [isPressed, setIsPressed] = useState(false);
+    const handlePressStart = useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = useHover({ isDisabled: isButtonDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing();
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: isButtonDisabled || disableRipple
     });
+    const buttonValue = props.value;
+    const isGroupSelected = isConnected && groupCtx && buttonValue ? groupCtx.selectedValues.has(buttonValue) : false;
     const connectedClasses = isConnected && groupCtx ? [
-      ...getConnectedRadiusClasses(groupCtx, props?.value),
+      ...getConnectedRadiusClasses(groupCtx, buttonValue),
       groupCtx.enforceMinWidth ? "min-w-12" : ""
     ] : [];
+    const hasIcon = !!icon || !!trailingIcon;
+    if (process.env.NODE_ENV === "development") {
+      if (!children) {
+        console.warn(
+          "[Button] Button should have text content. Use IconButton for icon-only buttons."
+        );
+      }
+    }
     return /* @__PURE__ */ jsxs(
       ButtonHeadless,
       {
-        ...props,
-        ref,
+        ...mergeProps$1(
+          hoverProps,
+          focusProps,
+          // Track pressed state via useButton's press lifecycle callbacks,
+          // rather than a separate usePress hook, to avoid event handler conflicts.
+          { onPressStart: handlePressStart, onPressEnd: handlePressEnd },
+          props
+        ),
+        ref: resolvedRef,
         type,
         isDisabled: isButtonDisabled,
-        ...onPress && { onPress },
         tabIndex,
         onMouseDown: handleRipple,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isDisabled: isButtonDisabled
+        }),
         "data-variant": variant,
-        "data-color": color,
+        "data-with-icon": hasIcon ? "" : void 0,
+        "data-loading": loading ? "" : void 0,
+        "data-group-selected": isGroupSelected ? "" : void 0,
         className: cn(
-          // Apply CVA variants (includes rounded-full base)
-          buttonVariants({
-            variant,
-            color,
-            size,
-            fullWidth,
-            disabled: isButtonDisabled,
-            loading
-          }),
+          buttonVariants({ variant, size, fullWidth }),
+          // group/button: enables group-data-[x]/button child selectors in all slots
+          // (added here, not in CVA, following the Switch pattern)
+          "group/button",
+          // Asymmetric border-radius easing: expressive when selected, decelerate when not
+          isGroupSelected ? "btn-transition-selected" : "",
           ...connectedClasses,
           // User custom classes
           className
         ),
         children: [
           ripples,
-          icon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
-          loading && /* @__PURE__ */ jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-          /* @__PURE__ */ jsx("span", { className: "relative z-10 inline-flex items-center", children }),
-          trailingIcon && /* @__PURE__ */ jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: trailingIcon })
+          /* @__PURE__ */ jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: icon }),
+          loading && /* @__PURE__ */ jsx(Spinner, {}),
+          /* @__PURE__ */ jsx("span", { className: cn(buttonLabelVariants()), children }),
+          trailingIcon && /* @__PURE__ */ jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: trailingIcon })
         ]
       }
     );
@@ -866,6 +873,7 @@ var ButtonGroupHeadless = forwardRef(
     size = "medium",
     shape = "round",
     selectionMode,
+    isDisabled = false,
     // Selection — controlled
     selectedValues: controlledValues,
     onSelectionChange: onControlledChange,
@@ -887,7 +895,7 @@ var ButtonGroupHeadless = forwardRef(
     const isControlled = controlledValues !== void 0;
     const selectedValues = isControlled ? controlledValues : uncontrolledValues;
     const handleSelectionChange = (value) => {
-      if (!selectionMode) return;
+      if (!selectionMode || isDisabled) return;
       let nextValues;
       if (selectionMode === "multi") {
         nextValues = new Set(selectedValues);
@@ -928,6 +936,7 @@ var ButtonGroupHeadless = forwardRef(
               selectionMode,
               selectedValues,
               onSelectionChange: handleSelectionChange,
+              isDisabled,
               connectedInnerRadius: getInnerRadius(size),
               connectedOuterRadius: getOuterRadius(shape, size),
               enforceMinWidth: variant === "connected" && (size === "extra-small" || size === "small")
@@ -940,9 +949,15 @@ var ButtonGroupHeadless = forwardRef(
   }
 );
 ButtonGroupHeadless.displayName = "ButtonGroupHeadless";
-var buttonGroupVariants = cva(
-  // Base classes applied to every ButtonGroup container
-  ["items-center"],
+var buttonGroupRootVariants = cva(
+  [
+    // Layout
+    "items-center",
+    // Spatial motion for gap changes — standard spring (calm, utility UI)
+    "transition-[gap] duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+    // Disabled state — self-targeting data-[x]: selector on root
+    "data-[disabled]:pointer-events-none data-[disabled]:opacity-38"
+  ],
   {
     variants: {
       /**
@@ -990,6 +1005,14 @@ var buttonGroupVariants = cva(
     }
   }
 );
+var buttonGroupFocusRingVariants = cva([
+  "pointer-events-none absolute inset-[-3px] rounded-[inherit]",
+  "outline outline-2 outline-offset-0 outline-secondary",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/button-group:opacity-100"
+]);
+var buttonGroupVariants = buttonGroupRootVariants;
 var ButtonGroup = forwardRef(
   ({
     variant = "standard",
@@ -999,6 +1022,7 @@ var ButtonGroup = forwardRef(
     selectedValues,
     onSelectionChange,
     defaultValue,
+    isDisabled = false,
     children,
     className,
     ...htmlProps
@@ -1015,6 +1039,13 @@ var ButtonGroup = forwardRef(
       },
       [ref]
     );
+    const hasSelection = useMemo(() => {
+      if (selectedValues) return selectedValues.size > 0;
+      if (defaultValue) {
+        return Array.isArray(defaultValue) ? defaultValue.length > 0 : true;
+      }
+      return false;
+    }, [selectedValues, defaultValue]);
     if (process.env.NODE_ENV === "development") {
       const childArray = Array.isArray(children) ? children : [children];
       for (const child of childArray) {
@@ -1063,7 +1094,12 @@ var ButtonGroup = forwardRef(
         selectedValues,
         onSelectionChange,
         defaultValue,
-        className: cn(buttonGroupVariants({ variant, size }), className),
+        isDisabled,
+        className: cn(buttonGroupRootVariants({ variant, size }), "group/button-group", className),
+        ...getInteractionDataAttributes({ isDisabled }),
+        "data-connected": variant === "connected" ? "" : void 0,
+        "data-has-selection": hasSelection ? "" : void 0,
+        "data-selection-mode": selectionMode ?? void 0,
         children
       }
     );
@@ -1123,10 +1159,12 @@ var iconButtonVariants = cva(
     "relative inline-flex items-center justify-center cursor-pointer",
     "overflow-hidden rounded-full",
     // Circular shape
-    // Spatial (border-radius, transform): expressive fast spring — 350ms, visible overshoot
-    "transition-all duration-expressive-fast-spatial ease-expressive-fast-spatial",
+    // Split MD3 transition: btn-transition handles spatial (border-radius) with asymmetric
+    // easing (decelerate by default, switched to expressive via btn-transition-selected when
+    // the button is group-selected) and effects (color/bg/shadow) with standard spring.
+    "btn-transition",
     "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-    // State layers — effects token: opacity only, no overshoot
+    // State layers — effects token: opacity only, no overshoot (separate ::before pseudo-element)
     "before:absolute before:inset-0 before:rounded-[inherit]",
     "before:transition-opacity before:duration-spring-standard-fast-effects before:ease-spring-standard-fast-effects",
     "before:bg-current before:opacity-0",
@@ -1363,6 +1401,7 @@ var IconButton = forwardRef(
       onMouseDown: mergedOnMouseDown,
       isDisabled
     });
+    const isGroupSelected = isConnected && groupCtx && value ? groupCtx.selectedValues.has(value) : false;
     const connectedClasses = isConnected && groupCtx ? [
       ...getConnectedRadiusClasses(groupCtx, value),
       groupCtx.enforceMinWidth ? "min-w-12" : ""
@@ -1372,22 +1411,13 @@ var IconButton = forwardRef(
       {
         ref,
         className: cn(
-          // Base classes
-          "relative inline-flex items-center justify-center",
-          "overflow-hidden rounded-full",
-          // Circular shape (overridden by connected group classes)
-          // Spatial (border-radius, transform): expressive fast spring — 350ms, visible overshoot
-          "duration-expressive-fast-spatial ease-expressive-fast-spatial transition-all",
-          "focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2",
-          // State layers (hover, focus, active) — effects token: opacity, no overshoot
-          "before:absolute before:inset-0 before:rounded-[inherit]",
-          "before:duration-spring-standard-fast-effects before:ease-spring-standard-fast-effects before:transition-opacity",
-          "before:bg-current before:opacity-0",
-          "hover:before:opacity-8",
-          "focus-visible:before:opacity-12",
-          "active:before:opacity-12",
-          // CVA variants
+          // CVA variants — includes btn-transition for asymmetric border-radius easing
           iconButtonVariants({ variant, color, size, selected: selected ?? false, isDisabled }),
+          // Asymmetric border-radius easing: expressive when selected, decelerate when not.
+          // btn-transition-selected overrides --_btn-radius-easing to the bouncy spring while
+          // the button is gaining the pill shape; removal restores decelerate for the return
+          // path, preventing the overshoot-to-0px sharp-corner flash.
+          isGroupSelected ? "btn-transition-selected" : "",
           ...connectedClasses,
           // User custom classes
           className
@@ -1395,6 +1425,7 @@ var IconButton = forwardRef(
         "aria-label": ariaLabel,
         "data-variant": variant,
         "data-color": color,
+        "data-group-selected": isGroupSelected ? "" : void 0,
         ...selected !== void 0 && { selected },
         ...title && { title },
         ...mergedPropsValue,
@@ -4786,20 +4817,6 @@ var BadgeContent = forwardRef(
   }
 );
 BadgeContent.displayName = "BadgeContent";
-var QUERY = "(prefers-reduced-motion: reduce)";
-function useReducedMotion() {
-  const [reduced, setReduced] = useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(QUERY).matches;
-  });
-  useEffect(() => {
-    const mql = window.matchMedia(QUERY);
-    const handler = (e) => setReduced(e.matches);
-    mql.addEventListener("change", handler);
-    return () => mql.removeEventListener("change", handler);
-  }, []);
-  return reduced;
-}
 var Badge = forwardRef(
   ({
     count,
@@ -14792,6 +14809,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, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, 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, 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, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, datePickerActionButtonVariants, datePickerActionVariants, datePickerContainerVariants, datePickerDividerVariants, datePickerHeaderVariants, datePickerHeadlineVariants, datePickerNavVariants, datePickerRangeIndicatorVariants, datePickerScrimVariants, datePickerSupportingTextVariants, datePickerWeekdayVariants, dividerVariants, fabMenuItemVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, hexToRgb, listItemVariants, listVariants, periodSelectorContainerVariants, periodSelectorItemVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, withOpacity, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map