@tinybigui/react 0.17.0 → 0.18.0

package/dist/index.js

@@ -8611,6 +8611,30 @@ var InteractiveStyledListItem = forwardRef(
   }
 );
 InteractiveStyledListItem.displayName = "InteractiveStyledListItem";
+var ArrowBackIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("path", { d: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" })
+  }
+);
+var CloseIcon3 = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ 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 = forwardRef(
   ({
     value,
@@ -8626,7 +8650,9 @@ var SearchBarHeadless = forwardRef(
     "aria-label": ariaLabel,
     className,
     onFocus,
-    onBlur
+    onBlur,
+    inputClassName,
+    trailingActionsClassName
   }, forwardedRef) => {
     const inputRef = useRef(null);
     const internalFormRef = useRef(null);
@@ -8660,8 +8686,17 @@ var SearchBarHeadless = forwardRef(
     );
     return /* @__PURE__ */ jsxs("form", { ref: formRef, role: "search", className, onSubmit: handleFormSubmit, children: [
       leadingIcon && /* @__PURE__ */ jsx("span", { "data-slot": "leading-icon", children: leadingIcon }),
-      /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsx("span", { "data-slot": "trailing-action", children: action }, index)) }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ...inputProps,
+          ref: inputRef,
+          role: "searchbox",
+          "data-slot": "input",
+          className: inputClassName
+        }
+      ),
+      trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions }),
       avatar && /* @__PURE__ */ jsx("span", { "data-slot": "avatar", children: avatar })
     ] });
   }
@@ -8681,32 +8716,45 @@ var SearchViewHeadless = forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout = "fullscreen",
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     if (!isOpen) {
       return null;
     }
-    return createPortal(
-      /* @__PURE__ */ 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__ */ jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps });
+    }
+    return createPortal(/* @__PURE__ */ jsx(SearchViewPanel, { ref: forwardedRef, ...panelProps }), document.body);
   }
 );
 SearchViewHeadless.displayName = "SearchViewHeadless";
@@ -8723,12 +8771,21 @@ var SearchViewPanel = forwardRef(
     children,
     leadingIcon,
     trailingActions,
-    showDivider
+    showDivider,
+    layout,
+    headerClassName,
+    backButtonClassName,
+    clearButtonClassName,
+    inputClassName,
+    trailingActionsClassName,
+    dividerClassName,
+    contentClassName
   }, forwardedRef) => {
     const panelRef = useRef(null);
     const inputRef = useRef(null);
     const ref = forwardedRef ?? panelRef;
-    usePreventScroll();
+    const isFullscreen = layout === "fullscreen";
+    usePreventScroll({ isDisabled: !isFullscreen });
     const { overlayProps } = useOverlay(
       {
         isOpen: true,
@@ -8761,7 +8818,17 @@ var SearchViewPanel = forwardRef(
     const handleBackClick = useCallback(() => {
       onClose();
     }, [onClose]);
-    const defaultBackArrow = /* @__PURE__ */ jsx("button", { type: "button", "aria-label": "Back", onClick: handleBackClick, "data-slot": "back-button", children: "\u2190" });
+    const defaultBackButton = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        "aria-label": "Back",
+        onClick: handleBackClick,
+        "data-slot": "back-button",
+        className: backButtonClassName,
+        children: /* @__PURE__ */ jsx(ArrowBackIcon, {})
+      }
+    );
     const clearButton = state.value ? /* @__PURE__ */ jsx(
       "button",
       {
@@ -8770,66 +8837,109 @@ var SearchViewPanel = forwardRef(
         type: "button",
         "aria-label": "Clear search",
         "data-slot": "clear-button",
-        children: "\u2715"
+        className: clearButtonClassName,
+        children: /* @__PURE__ */ jsx(CloseIcon3, {})
       }
     ) : null;
-    return /* @__PURE__ */ jsx(FocusScope, { contain: true, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
-      /* @__PURE__ */ jsxs("div", { "data-slot": "header", children: [
-        /* @__PURE__ */ jsx("span", { "data-slot": "leading-icon", children: leadingIcon ?? defaultBackArrow }),
-        /* @__PURE__ */ jsx("input", { ...inputProps, ref: inputRef, role: "searchbox" }),
-        clearButton,
-        trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", children: trailingActions.map((action, index) => /* @__PURE__ */ jsx("span", { "data-slot": "trailing-action", children: action }, index)) })
-      ] }),
-      showDivider && /* @__PURE__ */ jsx("hr", { "data-slot": "divider" }),
-      /* @__PURE__ */ 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__ */ jsx(FocusScope, { contain: isFullscreen, restoreFocus: true, autoFocus: true, children: /* @__PURE__ */ jsxs("div", { ...overlayProps, ref, role: "search", "aria-label": ariaLabel, className, children: [
+        /* @__PURE__ */ jsxs("div", { "data-slot": "header", className: headerClassName, children: [
+          leadingIcon ?? defaultBackButton,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...inputProps,
+              ref: inputRef,
+              role: "searchbox",
+              "data-slot": "input",
+              className: inputClassName
+            }
+          ),
+          clearButton,
+          trailingActions && trailingActions.length > 0 && /* @__PURE__ */ jsx("span", { "data-slot": "trailing-actions", className: trailingActionsClassName, children: trailingActions })
+        ] }),
+        showDivider && /* @__PURE__ */ jsx("hr", { "data-slot": "divider", className: dividerClassName }),
+        /* @__PURE__ */ jsx("div", { "data-slot": "content", "aria-live": "polite", className: contentClassName, children })
+      ] }) })
+    );
   }
 );
 SearchViewPanel.displayName = "SearchViewPanel";
-var searchBarVariants = cva(
+var searchBarRootVariants = 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 = 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 = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface"
+]);
+var searchBarTrailingActionVariants = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchBarAvatarVariants = cva(["flex size-12 shrink-0 items-center justify-center"]);
+var searchBarTrailingActionsVariants = cva(["flex items-center"]);
+var searchBarInputVariants = 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 = cva(["flex flex-col shadow-elevation-3 z-50 overflow-hidden"], {
   variants: {
     style: {
@@ -8842,31 +8952,32 @@ var searchViewVariants = cva(["flex flex-col shadow-elevation-3 z-50 overflow-hi
     }
   },
   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 = cva(
   ["flex items-center w-full bg-surface-container-high gap-1"],
@@ -8877,14 +8988,50 @@ var searchViewHeaderVariants = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center",
+  "text-on-surface rounded-full",
+  "cursor-pointer"
+]);
+var searchViewClearButtonVariants = 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 = cva([
+  "flex size-12 shrink-0 items-center justify-center text-on-surface-variant"
+]);
+var searchViewTrailingActionsVariants = cva(["flex items-center"]);
+var searchViewInputVariants = 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 = cva(["border-t border-outline w-full"]);
+var searchViewContentVariants = cva(["flex-1 overflow-y-auto"]);
+var DefaultSearchIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ 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 = forwardRef(
@@ -8905,7 +9052,7 @@ var SearchBar = 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] = useState(false);
     const handleFocusInternal = useCallback(() => {
@@ -8916,83 +9063,85 @@ var SearchBar = forwardRef(
       setIsFocused(false);
       onBlur?.();
     }, [onBlur]);
-    const { onMouseDown: handleRipple, ripples } = useRipple({
-      disabled: isDisabled
-    });
-    const styledLeadingIcon = leadingIcon ? /* @__PURE__ */ jsx("span", { className: "text-on-surface flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-6", children: leadingIcon }) }) : void 0;
-    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: "text-on-surface-variant flex size-12 shrink-0 items-center justify-center",
-        children: action
+    const { isHovered, hoverProps } = useHover({ isDisabled });
+    const { isFocusVisible, focusProps } = useFocusRing({ within: true });
+    const [isPressed, setIsPressed] = useState(false);
+    const { onMouseDown: handleRipple, ripples } = useRipple({ disabled: isDisabled });
+    const handleMouseDown = useCallback(
+      (e) => {
+        setIsPressed(true);
+        handleRipple(e);
       },
-      index
-    ));
-    const styledAvatar = avatar ? /* @__PURE__ */ jsx("span", { className: "flex size-12 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx("span", { className: "size-[30px] overflow-hidden rounded-full", children: avatar }) }) : void 0;
+      [handleRipple]
+    );
+    const handleMouseUp = useCallback(() => setIsPressed(false), []);
+    const styledLeadingIcon = /* @__PURE__ */ jsx("span", { className: cn(searchBarLeadingIconVariants()), children: /* @__PURE__ */ jsx("span", { className: "size-6", children: leadingIcon ?? /* @__PURE__ */ jsx(DefaultSearchIcon, {}) }) });
+    const styledTrailingActions = trailingActions?.map((action, index) => /* @__PURE__ */ jsx("span", { className: cn(searchBarTrailingActionVariants()), children: action }, index));
+    const styledAvatar = avatar ? /* @__PURE__ */ jsx("span", { className: cn(searchBarAvatarVariants()), children: /* @__PURE__ */ 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__ */ jsx(
       "div",
       {
-        className: cn(
-          reducedMotion ? "" : "duration-short4 ease-standard transition-[margin]",
-          isFocused ? "mx-3" : "mx-6"
-        ),
-        children: /* @__PURE__ */ 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",
+        ...mergeProps$1(hoverProps, focusProps),
+        className: cn(paneTransitionClass, paneMarginClass),
+        onMouseUp: handleMouseUp,
+        children: /* @__PURE__ */ jsxs("div", { role: "presentation", className: "relative", children: [
+          /* @__PURE__ */ jsx("span", { className: cn(searchBarFocusRingVariants()), "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              role: "presentation",
+              ...getInteractionDataAttributes({
+                isHovered,
+                isFocusVisible,
+                isPressed,
+                isDisabled
               }),
-              className
-            ),
-            onMouseDown: handleRipple,
-            children: [
-              /* @__PURE__ */ 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__ */ 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__ */ jsx(
+                  "span",
+                  {
+                    "data-slot": "state-layer",
+                    className: cn(searchBarStateLayerVariants()),
+                    "aria-hidden": "true"
+                  }
+                ),
+                ripples,
+                /* @__PURE__ */ 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())
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     );
   }
@@ -9017,21 +9166,29 @@ var SearchView = 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__ */ 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__ */ 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__ */ jsx("span", { className: trailingActionClass, children: action }, index));
     return /* @__PURE__ */ jsx(
       SearchViewHeadless,
       {
         ref,
         isOpen,
         onClose,
+        layout,
         ...value !== void 0 ? { value } : {},
         ...defaultValue !== void 0 ? { defaultValue } : {},
         ...onChange !== void 0 ? { onChange } : {},
@@ -9041,53 +9198,20 @@ var SearchView = 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 = forwardRef(
   ({
     isOpen: controlledIsOpen,
@@ -15911,6 +16035,6 @@ var DateField = forwardRef((props, forwardedRef) => {
 });
 DateField.displayName = "DateField";
 
-export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarVariants, searchViewHeaderVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
+export { AppBar, AppBarHeadless, Badge, BadgeContent, BadgeHeadless, BottomSheet, BottomSheetContext, BottomSheetHandle, BottomSheetHeadless, Button, ButtonGroup, ButtonGroupContext, ButtonGroupHeadless, CalendarCore, Card, CardActions, CardContent, CardHeader, CardHeadless, CardMedia, Checkbox, Chip, ChipHeadless, ChipSet, DateField, DatePicker, DatePickerDocked, DatePickerModal, DatePickerModalInput, Dialog, DialogActions, DialogContent, DialogContext, DialogHeadless, DialogHeadline, Divider, DividerHeadless, Drawer, DrawerIconOnlyContext, DrawerItem, DrawerSection, FAB, FABHeadless, FABMenu, FABMenuContext, FABMenuHeadless, FABMenuItem, HeadlessDrawer, HeadlessDrawerItem, HeadlessMenu, HeadlessMenuDivider, HeadlessMenuItem, HeadlessMenuSection, HeadlessMenuTrigger, HeadlessNavigationBar, HeadlessNavigationBarItem, HeadlessTab, HeadlessTabList, HeadlessTabPanel, IconButton, IconButtonHeadless, List, ListHeadless, ListItem, ListItemHeadless, ListItemLeading, ListItemText, ListItemTrailing, Menu, MenuContext, MenuDivider, MenuItem, MenuSection, MenuTrigger, NavigationBar, NavigationBarItem, Progress, ProgressHeadless, Radio, RadioGroup, RadioGroupHeadless, RadioHeadless, RichTooltip, STATE_LAYER_OPACITY, Search, SearchBar, SearchBarHeadless, SearchView, SearchViewHeadless, Slider, SliderHeadless, Snackbar, SnackbarContext, SnackbarHeadless, SnackbarProvider, SplitButton, SplitButtonHeadless, StyledActionButton, StyledCalendarCell, StyledCalendarTitle, StyledNavButton, StyledWeekday, StyledYearItem, Switch, TYPOGRAPHY_ELEMENT_MAP, TYPOGRAPHY_USAGE, Tab, TabList, TabPanel, Tabs, TextField, TimePicker, TimePickerDial, TimePickerInput, Tooltip, TooltipOverlayHeadless, TooltipTrigger, TooltipTriggerHeadless, actionButtonFocusRingVariants, actionButtonStateLayerVariants, actionButtonVariants, actionRowVariants, applyStateLayer, badgeVariants2 as badgeVariants, bottomSheetAnimationVariants, bottomSheetHandlePillVariants, bottomSheetHandleWrapperVariants, bottomSheetScrimVariants, bottomSheetVariants, buttonGroupFocusRingVariants, buttonGroupRootVariants, buttonGroupVariants, calendarCellFocusRingVariants, calendarCellStateLayerVariants, calendarCellVariants, calendarDividerVariants, calendarHeaderVariants, calendarTitleIconVariants, calendarTitleStateLayerVariants, calendarTitleTextVariants, calendarTitleVariants, cardVariants, chipVariants, clockDialContainerVariants, clockDialNumberVariants, clockHandCenterVariants, clockHandHandleVariants, clockHandTrackVariants, cn, dateFieldVariants, dateInputErrorVariants, dateInputFieldGroupVariants, dateInputFieldVariants, dateInputLabelVariants, datePickerContainerVariants, dateSegmentPlaceholderVariants, dividerVariants, dockedFieldGroupVariants, dockedLabelVariants, dockedTriggerStateLayerVariants, dockedTriggerVariants, fabMenuItemFocusRingVariants, fabMenuItemIconVariants, fabMenuItemLabelVariants, fabMenuItemStateLayerVariants, fabMenuItemVariants, fabMenuListVariants, fabMenuVariants, generateMD3Theme, getColorValue, getConnectedRadiusClasses, getFontFamily, getMD3Color, getResponsiveTypography, getTypographyClassName, getTypographyForElement, getTypographyStyle, getTypographyToken, headlineVariants, hexToRgb, listItemVariants, listVariants, modalDialogVariants, modalHeaderVariants, modeToggleStateLayerVariants, modeToggleVariants, navButtonFocusRingVariants, navButtonStateLayerVariants, navButtonVariants, periodSelectorContainerVariants, periodSelectorItemVariants, popoverVariants, pxToRem, remToPx, rgbToHex, richTooltipVariants, scrimVariants2 as scrimVariants, searchBarAvatarVariants, searchBarFocusRingVariants, searchBarInputVariants, searchBarLeadingIconVariants, searchBarRootVariants, searchBarStateLayerVariants, searchBarTrailingActionVariants, searchBarTrailingActionsVariants, searchViewBackButtonVariants, searchViewClearButtonVariants, searchViewContentVariants, searchViewDividerVariants, searchViewHeaderVariants, searchViewInputVariants, searchViewTrailingActionVariants, searchViewTrailingActionsVariants, searchViewVariants, sliderActiveTrackVariants, sliderContainerVariants, sliderHandleStateLayerVariants, sliderHandleVariants, sliderInactiveTrackVariants, sliderTrackLayoutVariants, splitButtonContainerVariants, splitButtonDropdownVariants, splitButtonPrimaryVariants, splitButtonVariants, supportingTextVariants, timeInputFieldVariants, timePickerActionButtonVariants, timePickerActionRowVariants, timePickerContainerVariants, timePickerHeadlineVariants, timePickerModeToggleVariants, timeSelectorContainerVariants, timeSeparatorVariants, tooltipVariants, truncateText, useBottomSheetContext, useBottomSheetDrag, useButtonGroup, useDialogContext, useFABMenuContext, useMenuContext, useOptionalButtonGroup, useSnackbar, weekdayVariants, withOpacity, yearGridVariants, yearItemFocusRingVariants, yearItemStateLayerVariants, yearItemVariants };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map