@tinybigui/react 0.16.0 → 0.18.0

package/dist/index.cjs

@@ -3144,224 +3144,102 @@ var RadioGroupHeadless = React.forwardRef(
   }
 );
 RadioGroupHeadless.displayName = "RadioGroupHeadless";
+var radioRootVariants = classVarianceAuthority.cva([
+  "relative inline-flex items-center cursor-pointer select-none",
+  // Disabled state — self-targeting so children inherit via group
+  "data-[disabled]:cursor-not-allowed data-[disabled]:pointer-events-none",
+  "data-[disabled]:opacity-38"
+]);
+var radioControlVariants = classVarianceAuthority.cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "size-10"
+  // 40dp touch target (MD3 spec)
+]);
+var radioFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-0 rounded-full",
+  "outline outline-2 outline-offset-2 outline-secondary",
+  // Effects transition for opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/radio:opacity-100"
+]);
+var radioTargetVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-full overflow-hidden",
+  "flex items-center justify-center"
+]);
+var radioStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  // Base state-layer color (unselected)
+  "bg-on-surface",
+  // Effects transition for opacity + color
+  "transition-[opacity,background-color] duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected state-layer color
+  "group-data-[selected]/radio:bg-primary",
+  // Error state-layer color (overrides selected via cascade position)
+  "group-data-[invalid]/radio:bg-error",
+  // Interaction opacities (MD3: hover 8%, focus/pressed 10%)
+  "group-data-[hovered]/radio:opacity-8",
+  "group-data-[focus-visible]/radio:opacity-10",
+  "group-data-[pressed]/radio:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/radio:hidden"
+]);
+var radioRingVariants = classVarianceAuthority.cva([
+  "relative z-10 size-5 rounded-full border-2 flex items-center justify-center flex-shrink-0",
+  // Base (unselected, enabled)
+  "border-on-surface-variant",
+  // Effects transition for border-color
+  "transition-colors duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Selected — border becomes primary
+  "group-data-[selected]/radio:border-primary",
+  // Error — placed after selected so it overrides by cascade order
+  "group-data-[invalid]/radio:border-error",
+  // Disabled — on-surface/38 opacity value
+  "group-data-[disabled]/radio:border-on-surface/38"
+]);
+var radioDotVariants = classVarianceAuthority.cva([
+  "size-2.5 rounded-full origin-center",
+  // Spatial transition for scale — springs may overshoot (intentional)
+  "transition-transform duration-spring-standard-fast-spatial ease-spring-standard-fast-spatial",
+  // Base fill color (shown when selected)
+  "bg-primary",
+  // Hidden when unselected
+  "scale-0",
+  // Visible when selected
+  "group-data-[selected]/radio:scale-100",
+  // Error — error fill color (placed after selected by cascade)
+  "group-data-[invalid]/radio:bg-error",
+  // Disabled — use on-surface/38 opacity
+  "group-data-[disabled]/radio:bg-on-surface/38"
+]);
+var radioLabelVariants = classVarianceAuthority.cva(["text-body-medium text-on-surface select-none ml-4"]);
 var radioGroupVariants = classVarianceAuthority.cva(
-  [
-    // Base classes (always applied to group wrapper)
-    "flex",
-    "gap-4"
-    // 16px spacing between radios (MD3 standard)
-  ],
+  ["flex", "gap-1"],
+  // 4dp gap — padding around each 40dp control handles visual spacing
   {
     variants: {
       /**
        * Layout orientation
+       * @default "vertical"
        */
       orientation: {
         vertical: "flex-col",
         horizontal: "flex-row flex-wrap"
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      orientation: "vertical",
-      disabled: false
-    }
-  }
-);
-var radioGroupLabelVariants = classVarianceAuthority.cva(
-  [
-    "text-sm font-medium",
-    // MD3: Body Medium
-    "text-on-surface",
-    "mb-3"
-    // Spacing below label (12px)
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "opacity-38",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var radioVariants = classVarianceAuthority.cva(
-  [
-    // Base classes (always applied to label wrapper)
-    "relative inline-flex items-center cursor-pointer select-none",
-    "transition-opacity duration-200"
-  ],
-  {
-    variants: {
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "opacity-38 cursor-not-allowed pointer-events-none",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
-    }
-  }
-);
-var radioContainerVariants = classVarianceAuthority.cva(
-  [
-    // Base classes for radio visual container
-    "relative inline-flex items-center justify-center",
-    "w-10 h-10",
-    // 40x40dp touch target (MD3 spec)
-    "flex-shrink-0",
-    "transition-all duration-200",
-    "m-1",
-    // 4px margin around radio for spacing (total 8px gap between radios)
-    // State layer (hover, focus, active) - MD3 spec: 8%/12%/12% opacity
-    "before:absolute before:inset-0 before:rounded-full before:transition-opacity before:duration-200",
-    "before:bg-current before:opacity-0",
-    "hover:before:opacity-8",
-    "active:before:opacity-12"
-  ],
-  {
-    variants: {
-      /**
-       * Radio state (determines visual appearance)
-       */
-      state: {
-        unselected: "text-on-surface-variant",
-        selected: "text-primary"
-      },
-      /**
-       * Error/invalid state
-       */
-      isInvalid: {
-        true: "text-error",
-        false: ""
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: "text-on-surface pointer-events-none",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      // Error state overrides normal colors for all states
-      {
-        state: "unselected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      },
-      {
-        state: "selected",
-        isInvalid: true,
-        disabled: false,
-        className: "text-error"
-      }
-    ],
-    defaultVariants: {
-      state: "unselected",
-      isInvalid: false,
-      disabled: false
-    }
-  }
-);
-var radioIconOuterVariants = classVarianceAuthority.cva(
-  [
-    // Base classes for the radio outer circle
-    "transition-all duration-200 stroke-current stroke-2 fill-transparent"
-  ],
-  {
-    variants: {
-      /**
-       * Radio state
-       */
-      state: {
-        unselected: [],
-        selected: []
-      },
-      /**
-       * Disabled state
-       */
-      disabled: {
-        true: ["fill-transparent", "stroke-current", "stroke-2"],
-        false: ""
       }
     },
-    compoundVariants: [
-      // Disabled + selected state overrides fill
-      {
-        state: "selected",
-        disabled: true,
-        className: "fill-current stroke-none"
-      }
-    ],
     defaultVariants: {
-      state: "unselected",
-      disabled: false
-    }
-  }
-);
-var radioIconInnerVariants = classVarianceAuthority.cva(["transition-all origin-center duration-200"], {
-  variants: {
-    /**
-     * Visibility based on state
-     */
-    state: {
-      selected: ["fill-current"],
-      unselected: ["fill-transparent"]
-    },
-    visible: {
-      true: "opacity-100 scale-100 fill-current",
-      false: "opacity-0 scale-0"
-    }
-  },
-  defaultVariants: {
-    visible: false
-  }
-});
-var radioLabelVariants = classVarianceAuthority.cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
+      orientation: "vertical"
     }
   }
 );
+var radioGroupLabelVariants = classVarianceAuthority.cva([
+  "text-body-medium font-medium",
+  "text-on-surface",
+  "mb-3",
+  "data-[disabled]:opacity-38"
+]);
 var Radio = React.forwardRef(
-  ({
-    // Content props
-    children,
-    // State props
-    disableRipple = false,
-    isDisabled = false,
-    // Styling
-    className,
-    // Other props
-    ...props
-  }, forwardedRef) => {
+  ({ children, disableRipple = false, isDisabled = false, className, ...props }, forwardedRef) => {
     const state = React.useContext(RadioGroupContext);
     if (!state) {
       throw new Error("Radio must be used within a RadioGroup");
@@ -3376,127 +3254,57 @@ var Radio = React.forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
     const {
       inputProps,
       isSelected,
-      isDisabled: radioIsDisabled
+      isDisabled: radioIsDisabled,
+      isPressed
     } = reactAria.useRadio(
-      {
-        ...restPropsWithoutHtmlAttrs,
-        value: props.value
-      },
+      { ...ariaProps, value: props.value },
       state,
       ref
     );
     const { isFocusVisible, focusProps } = reactAria.useFocusRing();
     const finalIsDisabled = isDisabled || radioIsDisabled;
-    const visualState = isSelected ? "selected" : "unselected";
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled: finalIsDisabled });
+    const isInvalid = state.validationState === "invalid";
     const { onMouseDown: handleRipple, ripples } = useRipple({
       disabled: finalIsDisabled || disableRipple
     });
     if (process.env.NODE_ENV === "development") {
-      const ariaProps = restPropsWithoutHtmlAttrs;
-      if (!children && !ariaProps["aria-label"] && !ariaProps["aria-labelledby"]) {
-        console.warn(
-          "[Radio] Radio should have a label (children) or aria-label for accessibility."
-        );
+      const a = ariaProps;
+      if (!children && !a["aria-label"] && !a["aria-labelledby"]) {
+        console.warn("[Radio] Provide a label via children or aria-label for accessibility.");
       }
     }
-    const isInvalid = state.validationState === "invalid";
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "label",
       {
-        className: cn(
-          radioVariants({
-            disabled: finalIsDisabled
-          }),
-          className
-        ),
+        ...reactAria.mergeProps(hoverProps),
+        className: cn(radioRootVariants(), "group/radio", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled,
+          isInvalid
+        }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(reactAria.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx("input", { ...reactAria.mergeProps(inputProps, focusProps), ref, id: htmlId }) }),
-          /* @__PURE__ */ jsxRuntime.jsxs(
-            "div",
-            {
-              role: "presentation",
-              className: cn(
-                radioContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: finalIsDisabled
-                })
-              ),
-              onMouseDown: handleRipple,
-              children: [
-                ripples,
-                /* @__PURE__ */ jsxRuntime.jsxs(
-                  "svg",
-                  {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "9",
-                          className: cn(
-                            radioIconOuterVariants({
-                              state: visualState,
-                              disabled: finalIsDisabled
-                            })
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsxRuntime.jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "5",
-                          className: cn(
-                            radioIconInnerVariants({
-                              visible: isSelected
-                            })
-                          )
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsxRuntime.jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "13",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          children && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: cn(
-                radioLabelVariants({
-                  disabled: finalIsDisabled
-                })
-              ),
-              children
-            }
-          )
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "presentation", className: cn(radioControlVariants()), children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(radioFocusRingVariants()), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "presentation", className: cn(radioTargetVariants()), onMouseDown: handleRipple, children: [
+              ripples,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioStateLayerVariants()), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(radioRingVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(radioDotVariants()), "aria-hidden": "true" }) })
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(radioLabelVariants()), children })
         ]
       }
     );
@@ -3509,7 +3317,7 @@ var RadioGroup = React.forwardRef(
     children,
     // State props
     orientation = "vertical",
-    isInvalid: _isInvalid = false,
+    isInvalid = false,
     isDisabled = false,
     // Styling
     className,
@@ -3532,6 +3340,7 @@ var RadioGroup = React.forwardRef(
       {
         ...restPropsWithoutHtmlAttrs,
         isDisabled,
+        isInvalid,
         ref,
         className: cn("flex flex-col", className),
         "data-testid": dataTestId,
@@ -3539,11 +3348,8 @@ var RadioGroup = React.forwardRef(
           "div",
           {
             ...labelProps,
-            className: cn(
-              radioGroupLabelVariants({
-                disabled: isDisabled
-              })
-            ),
+            "data-disabled": isDisabled ? "" : void 0,
+            className: cn(radioGroupLabelVariants()),
             children: props.label
           }
         ),
@@ -3552,8 +3358,7 @@ var RadioGroup = React.forwardRef(
           {
             className: cn(
               radioGroupVariants({
-                orientation,
-                disabled: isDisabled
+                orientation
               })
             ),
             children
@@ -8811,6 +8616,30 @@ var InteractiveStyledListItem = React.forwardRef(
   }
 );
 InteractiveStyledListItem.displayName = "InteractiveStyledListItem";
+var ArrowBackIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  }
+);
+var CloseIcon3 = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" })
+  }
+);
 var SearchBarHeadless = React.forwardRef(
   ({
     value,
@@ -8826,7 +8655,9 @@ var SearchBarHeadless = React.forwardRef(
     "aria-label": ariaLabel,
     className,
     onFocus,
-    onBlur
+    onBlur,
+    inputClassName,
+    trailingActionsClassName
   }, forwardedRef) => {
     const inputRef = React.useRef(null);
     const internalFormRef = React.useRef(null);
@@ -8860,8 +8691,17 @@ var SearchBarHeadless = React.forwardRef(
     );
     return /* @__PURE__ */ jsxRuntime.jsxs("form", { ref: formRef, role: "search", className, onSubmit: handleFormSubmit, children: [
       leadingIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "leading-icon", children: leadingIcon }),
-      /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-action", children: action }, index)) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          ...inputProps,
+          ref: inputRef,
+          role: "searchbox",
+          "data-slot": "input",
+          className: inputClassName
+        }
+      ),
+      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions }),
       avatar && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "avatar", children: avatar })
     ] });
   }
@@ -8881,32 +8721,45 @@ var SearchViewHeadless = React.forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout = "fullscreen",
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     if (!isOpen) {
       return null;
     }
-    return reactDom.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SearchViewPanel,
-        {
-          ref: forwardedRef,
-          onClose,
-          ariaLabel,
-          ...className !== void 0 ? { className } : {},
-          ...leadingIcon !== void 0 ? { leadingIcon } : {},
-          ...trailingActions !== void 0 ? { trailingActions } : {},
-          ...showDivider !== void 0 ? { showDivider } : {},
-          ...value !== void 0 ? { value } : {},
-          ...defaultValue !== void 0 ? { defaultValue } : {},
-          ...onChange !== void 0 ? { onChange } : {},
-          ...onSubmit !== void 0 ? { onSubmit } : {},
-          ...placeholder !== void 0 ? { placeholder } : {},
-          children
-        }
-      ),
-      document.body
-    );
+    const panelProps = {
+      onClose,
+      ariaLabel,
+      layout,
+      children,
+      ...className !== void 0 ? { className } : {},
+      ...leadingIcon !== void 0 ? { leadingIcon } : {},
+      ...trailingActions !== void 0 ? { trailingActions } : {},
+      ...showDivider !== void 0 ? { showDivider } : {},
+      ...value !== void 0 ? { value } : {},
+      ...defaultValue !== void 0 ? { defaultValue } : {},
+      ...onChange !== void 0 ? { onChange } : {},
+      ...onSubmit !== void 0 ? { onSubmit } : {},
+      ...placeholder !== void 0 ? { placeholder } : {},
+      headerClassName,
+      backButtonClassName,
+      clearButtonClassName,
+      inputClassName,
+      trailingActionsClassName,
+      dividerClassName,
+      contentClassName
+    };
+    if (layout === "docked") {
+      return /* @__PURE__ */ jsxRuntime.jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps });
+    }
+    return reactDom.createPortal(/* @__PURE__ */ jsxRuntime.jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps }), document.body);
   }
 );
 SearchViewHeadless.displayName = "SearchViewHeadless";
@@ -8923,12 +8776,21 @@ var SearchViewPanel = React.forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout,
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     const panelRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const ref = forwardedRef ?? panelRef;
-    reactAria.usePreventScroll();
+    const isFullscreen = layout === "fullscreen";
+    reactAria.usePreventScroll({ isDisabled: !isFullscreen });
     const { overlayProps } = reactAria.useOverlay(
       {
         isOpen: true,
@@ -8961,7 +8823,17 @@ var SearchViewPanel = React.forwardRef(
     const handleBackClick = React.useCallback(() => {
       onClose();
     }, [onClose]);
-    const defaultBackArrow = /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", "aria-label": "Back", onClick: handleBackClick, "data-slot": "back-button", children: "\u2190" });
+    const defaultBackButton = /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Back",
+        onClick: handleBackClick,
+        "data-slot": "back-button",
+        className: backButtonClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx(ArrowBackIcon, {})
+      }
+    );
     const clearButton = state.value ? /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -8970,66 +8842,109 @@ var SearchViewPanel = React.forwardRef(
         type: "button",
         "aria-label": "Clear search",
         "data-slot": "clear-button",
-        children: "\u2715"
+        className: clearButtonClassName,
+        children: /* @__PURE__ */ jsxRuntime.jsx(CloseIcon3, {})
       }
     ) : null;
-    return /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "header", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "leading-icon", children: leadingIcon ?? defaultBackArrow }),
-        /* @__PURE__ */ jsxRuntime.jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-        clearButton,
-        trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-action", children: action }, index)) })
-      ] }),
-      showDivider && /* @__PURE__ */ jsxRuntime.jsx("hr", { "data-slot": "divider" }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "content", "aria-live": "polite", children })
-    ] }) });
+    return (
+      // Focus containment only for fullscreen — docked uses restoreFocus + autoFocus only
+      // so tabbing can naturally leave the widget.
+      /* @__PURE__ */ jsxRuntime.jsx(reactAria.FocusScope, { contain: isFullscreen, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-slot": "header", className: headerClassName, children: [
+          leadingIcon ?? defaultBackButton,
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              ...inputProps,
+              ref: inputRef,
+              role: "searchbox",
+              "data-slot": "input",
+              className: inputClassName
+            }
+          ),
+          clearButton,
+          trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions })
+        ] }),
+        showDivider && /* @__PURE__ */ jsxRuntime.jsx("hr", { "data-slot": "divider", className: dividerClassName }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { "data-slot": "content", "aria-live": "polite", className: contentClassName, children })
+      ] }) })
+    );
   }
 );
 SearchViewPanel.displayName = "SearchViewPanel";
-var searchBarVariants = classVarianceAuthority.cva(
+var searchBarRootVariants = classVarianceAuthority.cva(
   [
-    "relative flex items-center h-14 rounded-full bg-surface-container-high",
-    "shadow-elevation-3 w-full text-body-large cursor-text"
+    "relative flex items-center h-14 rounded-full",
+    "bg-surface-container-high shadow-elevation-3",
+    "w-full text-body-large cursor-text",
+    // Disabled — self-targeting; pointer-events lets ripple/hover stop cleanly
+    "data-[disabled]:opacity-38 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed"
   ],
   {
     variants: {
+      /**
+       * Visual style of the search bar.
+       * - contained: M3 Expressive — fills container, expressive motion, adjustable spacing
+       * - divided: Baseline — 16dp fixed spacing, no expressive motion
+       */
       style: {
-        contained: "",
+        /**
+         * Contained (Expressive): spacing governed by data-[with-actions] content flag.
+         *   With actions:    px-1 gap-1 (4dp each)
+         *   Without actions: px-4      (16dp each)
+         */
+        contained: [
+          "px-4",
+          // default: no-actions 16dp
+          "data-[with-actions]:px-1 data-[with-actions]:gap-1"
+          // with-actions: 4dp
+        ],
+        /**
+         * Divided (Baseline): fixed 16dp side padding, 16dp icon-label gap.
+         */
         divided: "px-4 gap-4"
-      },
-      noActions: {
-        true: "",
-        false: ""
-      },
-      focused: {
-        true: "",
-        false: ""
-      },
-      disabled: {
-        true: "opacity-38 pointer-events-none",
-        false: ""
       }
     },
-    compoundVariants: [
-      {
-        style: "contained",
-        noActions: false,
-        class: "px-1 gap-1"
-      },
-      {
-        style: "contained",
-        noActions: true,
-        class: "px-4"
-      }
-    ],
-    defaultVariants: {
-      style: "contained",
-      noActions: false,
-      focused: false,
-      disabled: false
-    }
+    defaultVariants: { style: "contained" }
   }
 );
+var searchBarStateLayerVariants = classVarianceAuthority.cva([
+  "absolute inset-0 rounded-full pointer-events-none opacity-0",
+  "bg-on-surface",
+  // Effects transition — no overshoot on opacity
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  // Hover: 8%
+  "group-data-[hovered]/search:opacity-8",
+  // Pressed: 10%, doubled selector wins over hover at equal cascade position
+  "group-data-[pressed]/search:group-data-[pressed]/search:opacity-10",
+  // No state layer when disabled
+  "group-data-[disabled]/search:hidden"
+]);
+var searchBarFocusRingVariants = classVarianceAuthority.cva([
+  "pointer-events-none absolute inset-[-3px] rounded-full",
+  "outline outline-[3px] outline-offset-0 outline-secondary",
+  // Effects transition
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects",
+  "opacity-0",
+  "group-data-[focus-visible]/search:opacity-100"
+]);
+var searchBarLeadingIconVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface"
+]);
+var searchBarTrailingActionVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchBarAvatarVariants = classVarianceAuthority.cva(["flex size-12 shrink-0 items-center justify-center"]);
+var searchBarTrailingActionsVariants = classVarianceAuthority.cva(["flex items-center"]);
+var searchBarInputVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  "text-body-large text-on-surface",
+  "placeholder:text-on-surface-variant",
+  "focus-visible:outline-none",
+  // Hide native browser search affordances — our MD3 clear button handles clearing
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]);
 var searchViewVariants = classVarianceAuthority.cva(["flex flex-col shadow-elevation-3 z-50 overflow-hidden"], {
   variants: {
     style: {
@@ -9042,31 +8957,32 @@ var searchViewVariants = classVarianceAuthority.cva(["flex flex-col shadow-eleva
     }
   },
   compoundVariants: [
+    // Contained + fullscreen: surface-container-low, square corners
     {
       style: "contained",
       layout: "fullscreen",
       class: "bg-surface-container-low rounded-none"
     },
+    // Contained + docked: surface-container-high, 12dp results rounding, 2dp gap
     {
       style: "contained",
       layout: "docked",
       class: "bg-surface-container-high rounded-xl gap-0.5"
     },
+    // Divided + fullscreen: surface-container-high, square corners
     {
       style: "divided",
       layout: "fullscreen",
       class: "bg-surface-container-high rounded-none"
     },
+    // Divided + docked: surface-container-high, extra-large rounding (28dp)
     {
       style: "divided",
       layout: "docked",
       class: "bg-surface-container-high rounded-[28px]"
     }
   ],
-  defaultVariants: {
-    style: "contained",
-    layout: "fullscreen"
-  }
+  defaultVariants: { style: "contained", layout: "fullscreen" }
 });
 var searchViewHeaderVariants = classVarianceAuthority.cva(
   ["flex items-center w-full bg-surface-container-high gap-1"],
@@ -9077,14 +8993,50 @@ var searchViewHeaderVariants = classVarianceAuthority.cva(
         divided: "h-[72px] px-4"
       },
       layout: {
+        // Docked overrides height to 56dp regardless of style
         docked: "h-14",
         fullscreen: ""
       }
     },
-    defaultVariants: {
-      style: "contained",
-      layout: "fullscreen"
-    }
+    defaultVariants: { style: "contained", layout: "fullscreen" }
+  }
+);
+var searchViewBackButtonVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface rounded-full",
+  "cursor-pointer"
+]);
+var searchViewClearButtonVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface-variant rounded-full",
+  "cursor-pointer",
+  "transition-opacity duration-spring-standard-fast-effects ease-spring-standard-fast-effects"
+]);
+var searchViewTrailingActionVariants = classVarianceAuthority.cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchViewTrailingActionsVariants = classVarianceAuthority.cva(["flex items-center"]);
+var searchViewInputVariants = classVarianceAuthority.cva([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  "text-body-large text-on-surface",
+  "placeholder:text-on-surface-variant",
+  "focus-visible:outline-none",
+  // Hide native browser search affordances
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]);
+var searchViewDividerVariants = classVarianceAuthority.cva(["border-t border-outline w-full"]);
+var searchViewContentVariants = classVarianceAuthority.cva(["flex-1 overflow-y-auto"]);
+var DefaultSearchIcon = () => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" })
   }
 );
 var SearchBar = React.forwardRef(
@@ -9105,7 +9057,7 @@ var SearchBar = React.forwardRef(
     onFocus,
     onBlur
   }, ref) => {
-    const hasNoActions = (!trailingActions || trailingActions.length === 0) && !avatar;
+    const hasActions = trailingActions != null && trailingActions.length > 0 || !!avatar;
     const reducedMotion = useReducedMotion();
     const [isFocused, setIsFocused] = React.useState(false);
     const handleFocusInternal = React.useCallback(() => {
@@ -9116,83 +9068,85 @@ var SearchBar = React.forwardRef(
       setIsFocused(false);
       onBlur?.();
     }, [onBlur]);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-6", children: leadingIcon }) }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
+    const { isHovered, hoverProps } = reactAria.useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = reactAria.useFocusRing({ within: true });
+    const [isPressed, setIsPressed] = React.useState(false);
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const handleMouseDown = React.useCallback(
+      (e) => {
+        setIsPressed(true);
+        handleRipple(e);
       },
-      index
-    ));
-    const styledAvatar = avatar ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+      [handleRipple]
+    );
+    const handleMouseUp = React.useCallback(() => setIsPressed(false), []);
+    const styledLeadingIcon = /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarLeadingIconVariants()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-6", children: leadingIcon ?? /* @__PURE__ */ jsxRuntime.jsx(DefaultSearchIcon, {}) }) });
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarTrailingActionVariants()), children: action }, index));
+    const styledAvatar = avatar ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarAvatarVariants()), children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+    const paneMarginClass = searchStyle === "contained" ? isFocused ? "mx-3" : "mx-6" : "";
+    const paneTransitionClass = searchStyle === "contained" && !reducedMotion ? "transition-[margin] duration-expressive-fast-spatial ease-expressive-fast-spatial" : "";
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: cn(
-          reducedMotion ? "" : "duration-short4 ease-standard transition-[margin]",
-          isFocused ? "mx-3" : "mx-6"
-        ),
-        children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            role: "presentation",
-            className: cn(
-              "group relative overflow-hidden rounded-full",
-              "has-[:focus-visible]:ring-secondary has-[:focus-visible]:ring-3",
-              searchBarVariants({
-                style: searchStyle,
-                noActions: hasNoActions,
-                disabled: isDisabled
+        role: "presentation",
+        ...reactAria.mergeProps(hoverProps, focusProps),
+        className: cn(paneTransitionClass, paneMarginClass),
+        onMouseUp: handleMouseUp,
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { role: "presentation", className: "relative", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn(searchBarFocusRingVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              role: "presentation",
+              ...getInteractionDataAttributes({
+                isHovered,
+                isFocusVisible,
+                isPressed,
+                isDisabled
               }),
-              className
-            ),
-            onMouseDown: handleRipple,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  "data-slot": "state-layer",
-                  className: cn(
-                    "bg-on-surface pointer-events-none absolute inset-0 rounded-full opacity-0",
-                    "group-hover:opacity-8 group-active:opacity-10",
-                    "duration-spring-standard-fast-effects ease-spring-standard-fast-effects transition-opacity"
-                  )
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SearchBarHeadless,
-                {
-                  ref,
-                  ...value !== void 0 ? { value } : {},
-                  ...defaultValue !== void 0 ? { defaultValue } : {},
-                  ...onChange !== void 0 ? { onChange } : {},
-                  ...onSubmit !== void 0 ? { onSubmit } : {},
-                  ...onClear !== void 0 ? { onClear } : {},
-                  ...placeholder !== void 0 ? { placeholder } : {},
-                  ...styledLeadingIcon !== void 0 ? { leadingIcon: styledLeadingIcon } : {},
-                  ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
-                  ...styledAvatar !== void 0 ? { avatar: styledAvatar } : {},
-                  ...isDisabled !== void 0 ? { isDisabled } : {},
-                  ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
-                  onFocus: handleFocusInternal,
-                  onBlur: handleBlurInternal,
-                  className: cn(
-                    "relative z-0 flex h-full w-full items-center",
-                    "[&_input]:flex-1 [&_input]:bg-transparent [&_input]:outline-none",
-                    "[&_input]:text-body-large [&_input]:text-on-surface",
-                    "[&_input]:placeholder:text-on-surface-variant",
-                    "[&_input]:focus-visible:outline-none"
-                  )
-                }
+              "data-with-actions": hasActions ? "" : void 0,
+              className: cn(
+                "group/search overflow-hidden",
+                searchBarRootVariants({ style: searchStyle }),
+                className
               ),
-              ripples
-            ]
-          }
-        )
+              onMouseDown: (e) => handleMouseDown(e),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    "data-slot": "state-layer",
+                    className: cn(searchBarStateLayerVariants()),
+                    "aria-hidden": "true"
+                  }
+                ),
+                ripples,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  SearchBarHeadless,
+                  {
+                    ref,
+                    ...value !== void 0 ? { value } : {},
+                    ...defaultValue !== void 0 ? { defaultValue } : {},
+                    ...onChange !== void 0 ? { onChange } : {},
+                    ...onSubmit !== void 0 ? { onSubmit } : {},
+                    ...onClear !== void 0 ? { onClear } : {},
+                    ...placeholder !== void 0 ? { placeholder } : {},
+                    leadingIcon: styledLeadingIcon,
+                    ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
+                    ...styledAvatar !== void 0 ? { avatar: styledAvatar } : {},
+                    isDisabled,
+                    ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+                    onFocus: handleFocusInternal,
+                    onBlur: handleBlurInternal,
+                    className: "relative z-0 flex h-full w-full items-center",
+                    inputClassName: cn(searchBarInputVariants()),
+                    trailingActionsClassName: cn(searchBarTrailingActionsVariants())
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     );
   }
@@ -9217,21 +9171,29 @@ var SearchView = React.forwardRef(
     showDivider
   }, ref) => {
     const resolvedShowDivider = showDivider ?? searchStyle === "divided";
+    const enterMotionClass = layout === "docked" ? "animate-md-scale-in" : "animate-md-fade-in";
+    const containerClass = cn(
+      searchViewVariants({ style: searchStyle, layout }),
+      enterMotionClass,
+      className
+    );
+    const headerClass = cn(searchViewHeaderVariants({ style: searchStyle, layout }));
+    const backButtonClass = cn(searchViewBackButtonVariants());
+    const clearButtonClass = cn(searchViewClearButtonVariants());
+    const trailingActionClass = cn(searchViewTrailingActionVariants());
+    const trailingActionsGroupClass = cn(searchViewTrailingActionsVariants());
+    const inputClass = cn(searchViewInputVariants());
+    const dividerClass = cn(searchViewDividerVariants());
+    const contentClass = cn(searchViewContentVariants());
     const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: leadingIcon }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
-      },
-      index
-    ));
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: trailingActionClass, children: action }, index));
     return /* @__PURE__ */ jsxRuntime.jsx(
       SearchViewHeadless,
       {
         ref,
         isOpen,
         onClose,
+        layout,
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChange !== void 0 ? { onChange } : {},
@@ -9241,53 +9203,20 @@ var SearchView = React.forwardRef(
         ...styledLeadingIcon !== void 0 ? { leadingIcon: styledLeadingIcon } : {},
         ...styledTrailingActions !== void 0 ? { trailingActions: styledTrailingActions } : {},
         showDivider: resolvedShowDivider,
-        className: cn(
-          searchViewVariants({ style: searchStyle, layout }),
-          "animate-md-scale-in",
-          getHeaderClasses(searchStyle, layout),
-          slotClasses,
-          className
-        ),
+        className: containerClass,
+        headerClassName: headerClass,
+        backButtonClassName: backButtonClass,
+        clearButtonClassName: clearButtonClass,
+        inputClassName: inputClass,
+        trailingActionsClassName: trailingActionsGroupClass,
+        dividerClassName: dividerClass,
+        contentClassName: contentClass,
         children
       }
     );
   }
 );
 SearchView.displayName = "SearchView";
-var slotClasses = cn(
-  // Input styling
-  "[&_input]:flex-1 [&_input]:bg-transparent [&_input]:outline-none",
-  "[&_input]:text-body-large [&_input]:text-on-surface",
-  "[&_input]:placeholder:text-on-surface-variant",
-  // Divider
-  "[&>[data-slot=divider]]:border-outline",
-  // Content area
-  "[&>[data-slot=content]]:flex-1 [&>[data-slot=content]]:overflow-y-auto",
-  // Clear button
-  "[&_[data-slot=clear-button]]:size-12 [&_[data-slot=clear-button]]:flex",
-  "[&_[data-slot=clear-button]]:items-center [&_[data-slot=clear-button]]:justify-center",
-  "[&_[data-slot=clear-button]]:text-on-surface-variant",
-  "[&_[data-slot=clear-button]]:transition-opacity [&_[data-slot=clear-button]]:duration-short4",
-  "[&_[data-slot=clear-button]]:ease-standard",
-  // Back button
-  "[&_[data-slot=back-button]]:size-12 [&_[data-slot=back-button]]:flex",
-  "[&_[data-slot=back-button]]:items-center [&_[data-slot=back-button]]:justify-center",
-  "[&_[data-slot=back-button]]:text-on-surface"
-);
-function getHeaderClasses(style, layout) {
-  const base = "[&>[data-slot=header]]:flex [&>[data-slot=header]]:items-center [&>[data-slot=header]]:w-full [&>[data-slot=header]]:bg-surface-container-high [&>[data-slot=header]]:gap-1";
-  if (layout === "docked") {
-    return cn(
-      base,
-      "[&>[data-slot=header]]:h-14",
-      style === "contained" ? "[&>[data-slot=header]]:px-3" : "[&>[data-slot=header]]:px-4"
-    );
-  }
-  if (style === "contained") {
-    return cn(base, "[&>[data-slot=header]]:h-14 [&>[data-slot=header]]:px-3");
-  }
-  return cn(base, "[&>[data-slot=header]]:h-[72px] [&>[data-slot=header]]:px-4");
-}
 var Search = React.forwardRef(
   ({
     isOpen: controlledIsOpen,
@@ -16316,8 +16245,22 @@ exports.remToPx = remToPx;
 exports.rgbToHex = rgbToHex;
 exports.richTooltipVariants = richTooltipVariants;
 exports.scrimVariants = scrimVariants2;
-exports.searchBarVariants = searchBarVariants;
+exports.searchBarAvatarVariants = searchBarAvatarVariants;
+exports.searchBarFocusRingVariants = searchBarFocusRingVariants;
+exports.searchBarInputVariants = searchBarInputVariants;
+exports.searchBarLeadingIconVariants = searchBarLeadingIconVariants;
+exports.searchBarRootVariants = searchBarRootVariants;
+exports.searchBarStateLayerVariants = searchBarStateLayerVariants;
+exports.searchBarTrailingActionVariants = searchBarTrailingActionVariants;
+exports.searchBarTrailingActionsVariants = searchBarTrailingActionsVariants;
+exports.searchViewBackButtonVariants = searchViewBackButtonVariants;
+exports.searchViewClearButtonVariants = searchViewClearButtonVariants;
+exports.searchViewContentVariants = searchViewContentVariants;
+exports.searchViewDividerVariants = searchViewDividerVariants;
 exports.searchViewHeaderVariants = searchViewHeaderVariants;
+exports.searchViewInputVariants = searchViewInputVariants;
+exports.searchViewTrailingActionVariants = searchViewTrailingActionVariants;
+exports.searchViewTrailingActionsVariants = searchViewTrailingActionsVariants;
 exports.searchViewVariants = searchViewVariants;
 exports.sliderActiveTrackVariants = sliderActiveTrackVariants;
 exports.sliderContainerVariants = sliderContainerVariants;