@tinybigui/react 0.16.0 → 0.18.0

package/dist/index.js

@@ -3139,224 +3139,102 @@ var RadioGroupHeadless = forwardRef(
   }
 );
 RadioGroupHeadless.displayName = "RadioGroupHeadless";
+var radioRootVariants = 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 = cva([
+  "relative flex items-center justify-center flex-shrink-0",
+  "size-10"
+  // 40dp touch target (MD3 spec)
+]);
+var radioFocusRingVariants = 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 = cva([
+  "absolute inset-0 rounded-full overflow-hidden",
+  "flex items-center justify-center"
+]);
+var radioStateLayerVariants = 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 = 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 = 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 = cva(["text-body-medium text-on-surface select-none ml-4"]);
 var radioGroupVariants = 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 = 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 = 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 = 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 = 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 = 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 = cva(
-  [
-    "text-sm",
-    // MD3: Body Medium (14px)
-    "text-on-surface",
-    "select-none"
-  ],
-  {
-    variants: {
-      disabled: {
-        true: "",
-        false: ""
-      }
-    },
-    defaultVariants: {
-      disabled: false
+      orientation: "vertical"
     }
   }
 );
+var radioGroupLabelVariants = cva([
+  "text-body-medium font-medium",
+  "text-on-surface",
+  "mb-3",
+  "data-[disabled]:opacity-38"
+]);
 var Radio = 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 = useContext(RadioGroupContext);
     if (!state) {
       throw new Error("Radio must be used within a RadioGroup");
@@ -3371,127 +3249,57 @@ var Radio = forwardRef(
       "data-testid": _dataTestId,
       id: _htmlId,
       title: _htmlTitle,
-      ...restPropsWithoutHtmlAttrs
+      ...ariaProps
     } = props;
     const {
       inputProps,
       isSelected,
-      isDisabled: radioIsDisabled
+      isDisabled: radioIsDisabled,
+      isPressed
     } = useRadio(
-      {
-        ...restPropsWithoutHtmlAttrs,
-        value: props.value
-      },
+      { ...ariaProps, value: props.value },
       state,
       ref
     );
     const { isFocusVisible, focusProps } = useFocusRing();
     const finalIsDisabled = isDisabled || radioIsDisabled;
-    const visualState = isSelected ? "selected" : "unselected";
+    const { isHovered, hoverProps } = 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__ */ jsxs(
       "label",
       {
-        className: cn(
-          radioVariants({
-            disabled: finalIsDisabled
-          }),
-          className
-        ),
+        ...mergeProps$1(hoverProps),
+        className: cn(radioRootVariants(), "group/radio", className),
         "data-testid": dataTestId,
         title: htmlTitle,
+        ...getInteractionDataAttributes({
+          isHovered,
+          isFocusVisible,
+          isPressed,
+          isSelected,
+          isDisabled: finalIsDisabled,
+          isInvalid
+        }),
         children: [
           /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("input", { ...mergeProps$1(inputProps, focusProps), ref, id: htmlId }) }),
-          /* @__PURE__ */ jsxs(
-            "div",
-            {
-              role: "presentation",
-              className: cn(
-                radioContainerVariants({
-                  state: visualState,
-                  isInvalid,
-                  disabled: finalIsDisabled
-                })
-              ),
-              onMouseDown: handleRipple,
-              children: [
-                ripples,
-                /* @__PURE__ */ jsxs(
-                  "svg",
-                  {
-                    width: "20",
-                    height: "20",
-                    viewBox: "0 0 20 20",
-                    "aria-hidden": "true",
-                    className: "relative z-10",
-                    children: [
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "9",
-                          className: cn(
-                            radioIconOuterVariants({
-                              state: visualState,
-                              disabled: finalIsDisabled
-                            })
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "5",
-                          className: cn(
-                            radioIconInnerVariants({
-                              visible: isSelected
-                            })
-                          )
-                        }
-                      ),
-                      isFocusVisible && /* @__PURE__ */ jsx(
-                        "circle",
-                        {
-                          cx: "10",
-                          cy: "10",
-                          r: "13",
-                          fill: "none",
-                          stroke: "currentColor",
-                          strokeWidth: "2",
-                          className: "animate-pulse"
-                        }
-                      )
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          children && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn(
-                radioLabelVariants({
-                  disabled: finalIsDisabled
-                })
-              ),
-              children
-            }
-          )
+          /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioControlVariants()), children: [
+            /* @__PURE__ */ jsx("div", { className: cn(radioFocusRingVariants()), "aria-hidden": "true" }),
+            /* @__PURE__ */ jsxs("div", { role: "presentation", className: cn(radioTargetVariants()), onMouseDown: handleRipple, children: [
+              ripples,
+              /* @__PURE__ */ jsx("span", { className: cn(radioStateLayerVariants()), "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("div", { className: cn(radioRingVariants()), "aria-hidden": "true", children: /* @__PURE__ */ jsx("div", { className: cn(radioDotVariants()), "aria-hidden": "true" }) })
+            ] })
+          ] }),
+          children && /* @__PURE__ */ jsx("span", { className: cn(radioLabelVariants()), children })
         ]
       }
     );
@@ -3504,7 +3312,7 @@ var RadioGroup = forwardRef(
     children,
     // State props
     orientation = "vertical",
-    isInvalid: _isInvalid = false,
+    isInvalid = false,
     isDisabled = false,
     // Styling
     className,
@@ -3527,6 +3335,7 @@ var RadioGroup = forwardRef(
       {
         ...restPropsWithoutHtmlAttrs,
         isDisabled,
+        isInvalid,
         ref,
         className: cn("flex flex-col", className),
         "data-testid": dataTestId,
@@ -3534,11 +3343,8 @@ var RadioGroup = forwardRef(
           "div",
           {
             ...labelProps,
-            className: cn(
-              radioGroupLabelVariants({
-                disabled: isDisabled
-              })
-            ),
+            "data-disabled": isDisabled ? "" : void 0,
+            className: cn(radioGroupLabelVariants()),
             children: props.label
           }
         ),
@@ -3547,8 +3353,7 @@ var RadioGroup = forwardRef(
           {
             className: cn(
               radioGroupVariants({
-                orientation,
-                disabled: isDisabled
+                orientation
               })
             ),
             children
@@ -8806,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,
@@ -8821,7 +8650,9 @@ var SearchBarHeadless = forwardRef(
     "aria-label": ariaLabel,
     className,
     onFocus,
-    onBlur
+    onBlur,
+    inputClassName,
+    trailingActionsClassName
   }, forwardedRef) => {
     const inputRef = useRef(null);
     const internalFormRef = useRef(null);
@@ -8855,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 })
     ] });
   }
@@ -8876,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";
@@ -8918,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,
@@ -8956,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",
       {
@@ -8965,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: {
@@ -9037,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"],
@@ -9072,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(
@@ -9100,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(() => {
@@ -9111,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())
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     );
   }
@@ -9212,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 } : {},
@@ -9236,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,
@@ -16106,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