@tinybigui/react 0.4.1 → 0.4.2

package/dist/index.cjs

@@ -426,218 +426,206 @@ var ButtonHeadless = React.forwardRef(
 ButtonHeadless.displayName = "ButtonHeadless";
 var buttonVariants = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.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 = classVarianceAuthority.cva(["relative z-10 inline-flex items-center"]);
+var QUERY = "(prefers-reduced-motion: reduce)";
+function useReducedMotion() {
+  const [reduced, setReduced] = React.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  React.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] = React.useState([]);
   const rippleKeyCounter = React.useRef(0);
   const timersRef = React.useRef([]);
@@ -648,7 +636,7 @@ function useRipple(options = {}) {
   }, []);
   const onMouseDown = React.useCallback(
     (event) => {
-      if (disabled) return;
+      if (disabled || prefersReducedMotion) return;
       const element = event.currentTarget;
       const rect = element.getBoundingClientRect();
       const x = event.clientX - rect.left;
@@ -664,9 +652,9 @@ function useRipple(options = {}) {
       }, duration);
       timersRef.current.push(timer);
     },
-    [disabled, duration]
+    [disabled, duration, prefersReducedMotion]
   );
-  const rippleElements = disabled ? null : /* @__PURE__ */ jsxRuntime.jsx(
+  const rippleElements = disabled || prefersReducedMotion ? null : /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       "data-ripple-container": true,
@@ -674,7 +662,7 @@ function useRipple(options = {}) {
       children: ripples.map((ripple) => /* @__PURE__ */ jsxRuntime.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,
@@ -766,7 +754,7 @@ var Spinner = () => /* @__PURE__ */ jsxRuntime.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",
@@ -787,7 +775,6 @@ var Button = React.forwardRef(
   ({
     // Variant props (CVA)
     variant = "filled",
-    color = "primary",
     size = "medium",
     fullWidth = false,
     // Content props
@@ -800,64 +787,84 @@ var Button = React.forwardRef(
     isDisabled = false,
     // Styling
     className,
-    // Other props
+    // Other button props
     tabIndex = 0,
     type = "button",
-    onPress,
+    // Passed through to ButtonHeadless → useButton
     ...props
   }, ref) => {
+    const buttonRef = React.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] = React.useState(false);
+    const handlePressStart = React.useCallback(() => setIsPressed(true), []);
+    const handlePressEnd = React.useCallback(() => setIsPressed(false), []);
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: isButtonDisabled });
+    const { isFocusVisible, focusProps } = reactAria.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__ */ jsxRuntime.jsxs(
       ButtonHeadless,
       {
-        ...props,
-        ref,
+        ...reactAria.mergeProps(
+          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__ */ jsxRuntime.jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: icon }),
-          loading && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10", children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 inline-flex items-center", children }),
-          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative z-10 inline-flex shrink-0", loading && "invisible"), children: trailingIcon })
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonStateLayerVariants({ variant })), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonFocusRingVariants()), "aria-hidden": "true" }),
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: icon }),
+          loading && /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonLabelVariants()), children }),
+          trailingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(buttonIconVariants({ hidden: loading })), children: trailingIcon })
         ]
       }
     );
@@ -871,6 +878,7 @@ var ButtonGroupHeadless = React.forwardRef(
     size = "medium",
     shape = "round",
     selectionMode,
+    isDisabled = false,
     // Selection — controlled
     selectedValues: controlledValues,
     onSelectionChange: onControlledChange,
@@ -892,7 +900,7 @@ var ButtonGroupHeadless = React.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);
@@ -933,6 +941,7 @@ var ButtonGroupHeadless = React.forwardRef(
               selectionMode,
               selectedValues,
               onSelectionChange: handleSelectionChange,
+              isDisabled,
               connectedInnerRadius: getInnerRadius(size),
               connectedOuterRadius: getOuterRadius(shape, size),
               enforceMinWidth: variant === "connected" && (size === "extra-small" || size === "small")
@@ -945,9 +954,15 @@ var ButtonGroupHeadless = React.forwardRef(
   }
 );
 ButtonGroupHeadless.displayName = "ButtonGroupHeadless";
-var buttonGroupVariants = classVarianceAuthority.cva(
-  // Base classes applied to every ButtonGroup container
-  ["items-center"],
+var buttonGroupRootVariants = classVarianceAuthority.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: {
       /**
@@ -995,6 +1010,14 @@ var buttonGroupVariants = classVarianceAuthority.cva(
     }
   }
 );
+var buttonGroupFocusRingVariants = classVarianceAuthority.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 = React.forwardRef(
   ({
     variant = "standard",
@@ -1004,6 +1027,7 @@ var ButtonGroup = React.forwardRef(
     selectedValues,
     onSelectionChange,
     defaultValue,
+    isDisabled = false,
     children,
     className,
     ...htmlProps
@@ -1020,6 +1044,13 @@ var ButtonGroup = React.forwardRef(
       },
       [ref]
     );
+    const hasSelection = React.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) {
@@ -1068,7 +1099,12 @@ var ButtonGroup = React.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
       }
     );
@@ -1128,10 +1164,12 @@ var iconButtonVariants = classVarianceAuthority.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",
@@ -1368,6 +1406,7 @@ var IconButton = React.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" : ""
@@ -1377,22 +1416,13 @@ var IconButton = React.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
@@ -1400,6 +1430,7 @@ var IconButton = React.forwardRef(
         "aria-label": ariaLabel,
         "data-variant": variant,
         "data-color": color,
+        "data-group-selected": isGroupSelected ? "" : void 0,
         ...selected !== void 0 && { selected },
         ...title && { title },
         ...mergedPropsValue,
@@ -4791,20 +4822,6 @@ var BadgeContent = React.forwardRef(
   }
 );
 BadgeContent.displayName = "BadgeContent";
-var QUERY = "(prefers-reduced-motion: reduce)";
-function useReducedMotion() {
-  const [reduced, setReduced] = React.useState(() => {
-    if (typeof window === "undefined") return false;
-    return window.matchMedia(QUERY).matches;
-  });
-  React.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 = React.forwardRef(
   ({
     count,
@@ -14924,6 +14941,8 @@ exports.bottomSheetHandlePillVariants = bottomSheetHandlePillVariants;
 exports.bottomSheetHandleWrapperVariants = bottomSheetHandleWrapperVariants;
 exports.bottomSheetScrimVariants = bottomSheetScrimVariants;
 exports.bottomSheetVariants = bottomSheetVariants;
+exports.buttonGroupFocusRingVariants = buttonGroupFocusRingVariants;
+exports.buttonGroupRootVariants = buttonGroupRootVariants;
 exports.buttonGroupVariants = buttonGroupVariants;
 exports.calendarCellVariants = calendarCellVariants;
 exports.cardVariants = cardVariants;