@bug-on/md3-react 2.0.2 → 2.0.3

package/dist/index.mjs

@@ -1,6 +1,6 @@
 "use client";
 import * as React31 from 'react';
-import { createContext, forwardRef, useMemo, useState, useEffect, useRef, useCallback, useContext, useId, cloneElement, useLayoutEffect, createElement } from 'react';
+import { createContext, forwardRef, useMemo, useRef, useEffect, useState, useCallback, useContext, useId, cloneElement, useLayoutEffect, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { argbFromHex, themeFromSourceColor, hexFromArgb } from '@material/material-color-utilities';
 import { clsx } from 'clsx';
@@ -212,7 +212,7 @@ function generateM3Theme(sourceColorHex, mode = "light") {
 function applyTheme(sourceColorHex, mode = "light", root = document.documentElement) {
   const colors = generateM3Theme(sourceColorHex, mode);
   for (const [key, value] of Object.entries(colors)) {
-    const kebabKey = key.replace(/[A-Z]/g, (m38) => `-${m38.toLowerCase()}`);
+    const kebabKey = key.replace(/[A-Z]/g, (m43) => `-${m43.toLowerCase()}`);
     root.style.setProperty(`--md-sys-color-${kebabKey}`, value);
     root.style.setProperty(`--color-m3-${kebabKey}`, value);
   }
@@ -6696,6 +6696,825 @@ var RadioGroupComponent = React31.forwardRef(
 );
 RadioGroupComponent.displayName = "RadioGroup";
 var RadioGroup2 = React31.memo(RadioGroupComponent);
+function useSearchKeyboard({
+  active,
+  onActiveChange,
+  onSearch,
+  query,
+  itemCount,
+  onSelectSuggestion
+}) {
+  const [activeIndex, setActiveIndex] = React31.useState(-1);
+  const resetKeyRef = React31.useRef(`${active}:${query}`);
+  const currentKey = `${active}:${query}`;
+  if (resetKeyRef.current !== currentKey) {
+    resetKeyRef.current = currentKey;
+    setActiveIndex(-1);
+  }
+  const handleKeyDown = React31.useCallback(
+    (e) => {
+      if (!active) return;
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          setActiveIndex((i) => i < itemCount - 1 ? i + 1 : i);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          setActiveIndex((i) => i > -1 ? i - 1 : -1);
+          break;
+        }
+        case "Enter": {
+          e.preventDefault();
+          if (activeIndex >= 0 && onSelectSuggestion) {
+            onSelectSuggestion(activeIndex);
+          } else {
+            onSearch(query);
+          }
+          break;
+        }
+        case "Escape": {
+          e.preventDefault();
+          onActiveChange(false);
+          break;
+        }
+      }
+    },
+    [
+      active,
+      activeIndex,
+      itemCount,
+      onActiveChange,
+      onSearch,
+      onSelectSuggestion,
+      query
+    ]
+  );
+  const resetActiveIndex = React31.useCallback(() => {
+    setActiveIndex(-1);
+  }, []);
+  return { activeIndex, handleKeyDown, resetActiveIndex };
+}
+
+// src/ui/search/search.tokens.ts
+var SearchTokens = {
+  // ── Heights ─────────────────────────────────────────────────────────────
+  heights: {
+    /** SearchBarTokens.ContainerHeight = 56dp */
+    bar: 56,
+    /** SearchViewTokens.DockedHeaderContainerHeight = 56dp */
+    dockedHeader: 56,
+    /** SearchViewTokens.FullScreenHeaderContainerHeight = 72dp */
+    fullScreenHeader: 72
+  },
+  // ── Avatar ────────────────────────────────────────────────────────────
+  /** SearchBarTokens.AvatarSize = 30dp */
+  avatarSize: 30,
+  // ── Icon ───────────────────────────────────────────────────────────────
+  /** Standard icon size for leading/trailing icons. */
+  iconSize: 20,
+  /** Touch target for interactive icons per MD3 a11y spec. */
+  iconTouchTarget: 48,
+  // ── Gap ────────────────────────────────────────────────────────────────
+  /** Gap between SearchBar and results list when hasGap=true. */
+  dropdownGap: 2
+};
+var SEARCH_COLORS = {
+  /** SearchBarTokens.ContainerColor → surface-container-high */
+  container: "var(--md-sys-color-surface-container-high)",
+  /** SearchBarTokens.LeadingIconColor → on-surface */
+  leadingIcon: "var(--md-sys-color-on-surface)",
+  /** SearchBarTokens.TrailingIconColor → on-surface-variant */
+  trailingIcon: "var(--md-sys-color-on-surface-variant)",
+  /** SearchBarTokens.InputTextColor → on-surface */
+  inputText: "var(--md-sys-color-on-surface)",
+  /** SearchBarTokens.SupportingTextColor → on-surface-variant (placeholder) */
+  supportingText: "var(--md-sys-color-on-surface-variant)",
+  /** SearchViewTokens.DividerColor → outline */
+  divider: "var(--md-sys-color-outline)",
+  /** Focus indicator → secondary */
+  focusIndicator: "var(--md-sys-color-secondary)"
+};
+var SEARCH_TYPOGRAPHY = {
+  /** BodyLarge — used for input text and placeholder. */
+  bodyLarge: "text-[16px] leading-6 font-normal tracking-[0.5px]"
+};
+var SEARCH_BAR_EXPAND_SPRING = {
+  type: "spring",
+  stiffness: 380,
+  damping: 38,
+  mass: 1
+};
+var SEARCH_DOCKED_REVEAL_SPRING = {
+  type: "spring",
+  stiffness: 400,
+  damping: 35,
+  mass: 0.8
+};
+var SEARCH_FULLSCREEN_SPRING = {
+  type: "spring",
+  stiffness: 300,
+  damping: 30,
+  mass: 0.9
+};
+var SEARCH_BAR_EXIT_SPRING = {
+  type: "spring",
+  stiffness: 500,
+  damping: 40,
+  mass: 0.6
+};
+var PLACEHOLDER_SPRING = {
+  type: "spring",
+  stiffness: 350,
+  damping: 30,
+  mass: 0.8
+};
+function AnimatedPlaceholder({
+  text,
+  textAlign,
+  visible,
+  focused,
+  children,
+  className
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const containerRef = React31.useRef(null);
+  const spanRef = React31.useRef(null);
+  const [xOffset, setXOffset] = React31.useState(0);
+  const recalculate = React31.useCallback(() => {
+    const container = containerRef.current;
+    const span = spanRef.current;
+    if (!container || !span || textAlign === "left") {
+      setXOffset(0);
+      return;
+    }
+    const containerWidth = container.offsetWidth;
+    const textWidth = span.offsetWidth;
+    if (textAlign === "center") {
+      setXOffset(Math.max(0, (containerWidth - textWidth) / 2));
+    } else {
+      setXOffset(Math.max(0, containerWidth - textWidth));
+    }
+  }, [textAlign]);
+  React31.useLayoutEffect(() => {
+    recalculate();
+  }, [recalculate]);
+  React31.useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const observer = new ResizeObserver(recalculate);
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [recalculate]);
+  const targetX = focused || !visible ? 0 : xOffset;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      className: cn("relative flex-1 min-w-0", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          m.span,
+          {
+            ref: (el) => {
+              spanRef.current = el;
+            },
+            "aria-hidden": "true",
+            className: cn(
+              "pointer-events-none absolute inset-y-0 left-0",
+              "flex items-center whitespace-nowrap select-none",
+              SEARCH_TYPOGRAPHY.bodyLarge
+            ),
+            style: { color: SEARCH_COLORS.supportingText },
+            animate: {
+              x: targetX,
+              opacity: visible ? 1 : 0
+            },
+            transition: shouldReduceMotion ? { duration: 0 } : PLACEHOLDER_SPRING,
+            children: text
+          }
+        )
+      ]
+    }
+  );
+}
+function DefaultSearchIcon() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: SearchTokens.iconSize },
+      "aria-hidden": "true",
+      children: "search"
+    }
+  );
+}
+function SearchBar({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  className,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const inputRef = React31.useRef(null);
+  const prevActiveRef = React31.useRef(active);
+  const isRestoringFocusRef = React31.useRef(false);
+  React31.useEffect(() => {
+    var _a;
+    let rafId;
+    if (prevActiveRef.current === true && active === false) {
+      isRestoringFocusRef.current = true;
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+      rafId = requestAnimationFrame(() => {
+        isRestoringFocusRef.current = false;
+      });
+    }
+    prevActiveRef.current = active;
+    return () => {
+      if (rafId) cancelAnimationFrame(rafId);
+    };
+  }, [active]);
+  const handleFocus = () => {
+    if (!active && !isRestoringFocusRef.current) {
+      onActiveChange(true);
+    }
+  };
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  return (
+    /*
+     * AnimatePresence mode="popLayout":
+     * When SearchView opens (active=true), SearchBar plays its exit animation
+     * first, then unmounts — releasing the shared layoutId for SearchView to
+     * claim and morph from the pill shape.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: !active && /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layout: !shouldReduceMotion,
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        transition: shouldReduceMotion ? void 0 : SEARCH_BAR_EXPAND_SPRING,
+        className: cn("relative", className),
+        style: { height: SearchTokens.heights.bar },
+        initial: shouldReduceMotion ? false : { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, scale: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, scale: 0.95, transition: SEARCH_BAR_EXIT_SPRING },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "absolute inset-0 rounded-full",
+              style: { backgroundColor: SEARCH_COLORS.container },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "relative flex h-full items-center gap-2 rounded-full px-4",
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-hidden": "true",
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsx(DefaultSearchIcon, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: searchId,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": active,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onFocus: handleFocus,
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                trailingIcon && /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.trailingIcon },
+                    "aria-hidden": "true",
+                    children: trailingIcon
+                  }
+                )
+              ] })
+            }
+          )
+        ]
+      },
+      searchId
+    ) })
+  );
+}
+var SearchContext = React31.createContext(null);
+function SearchProvider({
+  children,
+  value
+}) {
+  return /* @__PURE__ */ jsx(SearchContext.Provider, { value, children });
+}
+function useSearch() {
+  const context = React31.useContext(SearchContext);
+  if (!context) {
+    return { listboxId: "", activeIndex: -1 };
+  }
+  return context;
+}
+function useClickOutside(handler, enabled = true) {
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!enabled) return;
+    const listener = (event) => {
+      const el = ref.current;
+      if (!el || el.contains(event.target)) {
+        return;
+      }
+      handler();
+    };
+    document.addEventListener("mousedown", listener);
+    document.addEventListener("touchstart", listener);
+    return () => {
+      document.removeEventListener("mousedown", listener);
+      document.removeEventListener("touchstart", listener);
+    };
+  }, [handler, enabled]);
+  return ref;
+}
+function useSearchViewFocus(inputRef, active) {
+  React31.useEffect(() => {
+    if (!active) return;
+    let raf2;
+    const raf1 = requestAnimationFrame(() => {
+      raf2 = requestAnimationFrame(() => {
+        var _a;
+        (_a = inputRef.current) == null ? void 0 : _a.focus();
+      });
+    });
+    return () => {
+      cancelAnimationFrame(raf1);
+      if (raf2) cancelAnimationFrame(raf2);
+    };
+  }, [active, inputRef]);
+}
+function TrailingAction({
+  query,
+  trailingIcon,
+  onClear
+}) {
+  if (query) {
+    return /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        size: "sm",
+        style: { color: SEARCH_COLORS.trailingIcon },
+        "aria-label": "Clear search",
+        onClick: onClear,
+        children: /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "material-symbols-rounded select-none leading-none",
+            style: { fontSize: 20 },
+            "aria-hidden": "true",
+            children: "close"
+          }
+        )
+      }
+    );
+  }
+  if (trailingIcon) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "flex shrink-0 items-center justify-center",
+        style: { color: SEARCH_COLORS.trailingIcon },
+        "aria-hidden": "true",
+        children: trailingIcon
+      }
+    );
+  }
+  return null;
+}
+function SearchViewDocked({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  styleType = "contained",
+  hasGap = false,
+  children,
+  viewClassName,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const inputRef = React31.useRef(null);
+  useSearchViewFocus(inputRef, active);
+  const dropdownRef = useClickOutside(() => {
+    onActiveChange(false);
+  }, active);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  return (
+    /*
+     * mode="popLayout": when SearchView exits, it plays exit animation first,
+     * then unmounts — freeing the layoutId for SearchBar to re-enter and morph back.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: active && /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        ref: dropdownRef,
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        className: cn(
+          // DockedContainerShape = CornerExtraLarge = 28dp radius
+          "rounded-[28px] overflow-hidden",
+          viewClassName
+        ),
+        style: { backgroundColor: SEARCH_COLORS.container },
+        initial: shouldReduceMotion ? {} : { opacity: 0, y: -8 },
+        animate: { opacity: 1, y: 0 },
+        exit: shouldReduceMotion ? {} : { opacity: 0, y: -8 },
+        transition: shouldReduceMotion ? { duration: 0 } : SEARCH_DOCKED_REVEAL_SPRING,
+        children: [
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "flex items-center gap-2 px-4",
+              style: { height: SearchTokens.heights.dockedHeader },
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: "flex shrink-0 items-center justify-center",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-hidden": "true",
+                    children: leadingIcon
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: `${searchId}-view`,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": true,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TrailingAction,
+                  {
+                    query,
+                    trailingIcon,
+                    onClear: () => onQueryChange("")
+                  }
+                )
+              ] })
+            }
+          ),
+          hasGap && children && /* @__PURE__ */ jsx("div", { className: "h-0.5", "aria-hidden": "true" }),
+          styleType === "divided" && children && /* @__PURE__ */ jsx(
+            "hr",
+            {
+              className: "border-0 border-t",
+              style: { borderColor: SEARCH_COLORS.divider }
+            }
+          ),
+          children && /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              "aria-label": `${ariaLabel} results`,
+              className: "min-h-30",
+              children
+            }
+          )
+        ]
+      },
+      `${searchId}-view`
+    ) })
+  );
+}
+function ArrowBackIcon2() {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "material-symbols-rounded select-none leading-none",
+      style: { fontSize: 24 },
+      "aria-hidden": "true",
+      children: "arrow_back"
+    }
+  );
+}
+function SearchViewFullScreen({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  styleType = "contained",
+  children,
+  viewClassName,
+  "aria-label": ariaLabel = "Search",
+  searchId,
+  listboxId,
+  onKeyDown,
+  activeIndex
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  const inputRef = React31.useRef(null);
+  useSearchViewFocus(inputRef, active);
+  const [mounted, setMounted] = React31.useState(false);
+  React31.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const handleFormSubmit = (e) => {
+    e.preventDefault();
+    onSearch(query);
+  };
+  const handleEscape = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      onActiveChange(false);
+    }
+  };
+  const activeDescendant = activeIndex >= 0 ? `${listboxId}-option-${activeIndex}` : void 0;
+  if (!mounted) return null;
+  const content = (
+    /*
+     * mode="popLayout": when FullScreen exits, it plays exit animation first,
+     * then unmounts — freeing the layoutId for SearchBar to re-enter and morph back
+     * to the pill shape.
+     */
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", children: active && /* @__PURE__ */ jsxs(
+      m.div,
+      {
+        layoutId: shouldReduceMotion ? void 0 : searchId,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": ariaLabel,
+        className: cn(
+          "fixed inset-0 z-50 flex flex-col overflow-hidden",
+          // CornerNone — shape is resolved by Framer Motion layout animation
+          "rounded-none",
+          viewClassName
+        ),
+        style: { backgroundColor: SEARCH_COLORS.container },
+        initial: shouldReduceMotion ? {} : { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: shouldReduceMotion ? {} : { opacity: 0 },
+        transition: shouldReduceMotion ? { duration: 0 } : SEARCH_FULLSCREEN_SPRING,
+        onKeyDown: handleEscape,
+        children: [
+          /* @__PURE__ */ jsx(
+            "search",
+            {
+              "aria-label": ariaLabel,
+              className: "flex shrink-0 items-center gap-2 px-4",
+              style: { height: SearchTokens.heights.fullScreenHeader },
+              children: /* @__PURE__ */ jsxs("form", { className: "contents", onSubmit: handleFormSubmit, children: [
+                /* @__PURE__ */ jsx(
+                  IconButton,
+                  {
+                    size: "sm",
+                    style: { color: SEARCH_COLORS.leadingIcon },
+                    "aria-label": "Close search",
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      onActiveChange(false);
+                    },
+                    children: leadingIcon != null ? leadingIcon : /* @__PURE__ */ jsx(ArrowBackIcon2, {})
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  AnimatedPlaceholder,
+                  {
+                    text: placeholder,
+                    textAlign,
+                    visible: !query,
+                    focused: active,
+                    children: /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: inputRef,
+                        id: `${searchId}-fs`,
+                        type: "search",
+                        role: "combobox",
+                        "aria-expanded": true,
+                        "aria-controls": listboxId,
+                        "aria-autocomplete": "list",
+                        "aria-activedescendant": activeDescendant,
+                        "aria-label": placeholder,
+                        value: query,
+                        placeholder,
+                        className: cn(
+                          "w-full bg-transparent border-none outline-none",
+                          "text-[16px] leading-6 font-normal tracking-[0.5px]",
+                          "placeholder:text-transparent"
+                        ),
+                        style: { color: SEARCH_COLORS.inputText },
+                        onChange: (e) => onQueryChange(e.target.value),
+                        onKeyDown
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  TrailingAction,
+                  {
+                    query,
+                    trailingIcon,
+                    onClear: () => onQueryChange("")
+                  }
+                )
+              ] })
+            }
+          ),
+          styleType === "divided" && /* @__PURE__ */ jsx(
+            "hr",
+            {
+              className: "border-0 border-t shrink-0",
+              style: { borderColor: SEARCH_COLORS.divider }
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              id: listboxId,
+              role: "listbox",
+              tabIndex: 0,
+              "aria-label": `${ariaLabel} results`,
+              className: "flex-1 overflow-y-auto outline-none",
+              onClick: (e) => {
+                if (e.target === e.currentTarget) onActiveChange(false);
+              },
+              onKeyDown: (e) => {
+                if (e.target === e.currentTarget && (e.key === "Enter" || e.key === " ")) {
+                  e.preventDefault();
+                  onActiveChange(false);
+                }
+              },
+              children
+            }
+          )
+        ]
+      },
+      `${searchId}-fs`
+    ) })
+  );
+  return createPortal(content, document.body);
+}
+function SearchComponent({
+  query,
+  onQueryChange,
+  onSearch,
+  active,
+  onActiveChange,
+  variant = "docked",
+  styleType = "contained",
+  hasGap = false,
+  leadingIcon,
+  trailingIcon,
+  placeholder = "Search",
+  textAlign = "left",
+  children,
+  id,
+  "aria-label": ariaLabel = "Search",
+  className,
+  viewClassName
+}) {
+  const generatedId = React31.useId();
+  const searchId = id != null ? id : generatedId;
+  const listboxId = `${searchId}-listbox`;
+  const itemCount = React31.Children.count(children);
+  const { activeIndex, handleKeyDown } = useSearchKeyboard({
+    active,
+    onActiveChange,
+    onSearch,
+    query,
+    itemCount
+  });
+  const sharedProps = {
+    query,
+    onQueryChange,
+    onSearch,
+    active,
+    onActiveChange,
+    leadingIcon,
+    trailingIcon,
+    placeholder,
+    textAlign,
+    "aria-label": ariaLabel,
+    searchId,
+    listboxId,
+    onKeyDown: handleKeyDown,
+    activeIndex
+  };
+  return /* @__PURE__ */ jsx(SearchProvider, { value: { activeIndex, listboxId }, children: /* @__PURE__ */ jsxs(m.div, { className, style: { minHeight: 56 }, children: [
+    /* @__PURE__ */ jsx(SearchBar, __spreadValues({}, sharedProps)),
+    variant === "fullscreen" ? /* @__PURE__ */ jsx(
+      SearchViewFullScreen,
+      __spreadProps(__spreadValues({}, sharedProps), {
+        styleType,
+        viewClassName,
+        children
+      })
+    ) : /* @__PURE__ */ jsx(
+      SearchViewDocked,
+      __spreadProps(__spreadValues({}, sharedProps), {
+        styleType,
+        hasGap,
+        viewClassName,
+        children
+      })
+    )
+  ] }) });
+}
+var Search = Object.assign(SearchComponent, { useSearch });
 function coerceValue(value, min, max) {
   return Math.max(min, Math.min(max, value));
 }
@@ -8629,7 +9448,9 @@ function SnackbarHost({ state, className }) {
   ) });
 }
 SnackbarHost.displayName = "SnackbarHost";
-var SnackbarContext = React31.createContext(null);
+var SnackbarContext = React31.createContext(
+  null
+);
 function SnackbarProvider({ children }) {
   const state = useSnackbarState();
   const contextValue = React31.useMemo(
@@ -11920,6 +12741,6 @@ function TooltipBox({
   ] });
 }
 
-export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, Card, Checkbox, Chip, CodeBlock, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FAB, FABMenu, FABMenuItem, FABPosition, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MaterialSymbolsPreconnect, MediumFlexibleAppBar, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup2 as RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_VIEW_SPRING, ScrollArea, ScrollAreaScrollbar, SearchAppBar, SearchView, SearchViewContainer, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
+export { APP_BAR_BOTTOM_SPRING, APP_BAR_COLORS, APP_BAR_COLOR_TRANSITION, APP_BAR_ENTER_ALWAYS_SPRING, APP_BAR_TITLE_FADE, AppBarColumn, AppBarOverflowIndicator, AppBarRow, AppBarTokens, Badge, BadgedBox, BottomAppBar, Button, ButtonGroup, Card, Checkbox, Chip, CodeBlock, Dialog, DialogBody, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogFullScreenContent, DialogHeader, DialogIcon, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Divider, DockedToolbar, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FAB, FABMenu, FABMenuItem, FABPosition, Icon, IconButton, LargeFlexibleAppBar, LoadingIndicator, MD3ThemeProvider, MD3_EXPRESSIVE_FONT_VARIATION, MaterialSymbolsPreconnect, MediumFlexibleAppBar, NavigationRail, NavigationRailItem, PlainTooltip, ProgressIndicator, RadioButton, RadioGroup2 as RadioGroup, RangeSlider, RichTooltip, Ripple, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SEARCH_VIEW_SPRING, ScrollArea, ScrollAreaScrollbar, Search, SearchAppBar, SearchBar, SearchTokens, SearchView, SearchViewContainer, SearchViewDocked, SearchViewFullScreen, Slider, SliderColors, SliderTokens, SmallAppBar, Snackbar, SnackbarHost, SnackbarProvider, Switch, SwitchColors, SwitchTokens, Tab, TableOfContents, Tabs, TabsColors, TabsContent, TabsList, TabsTokens, TextField, ToggleFAB, TooltipBox, TooltipCaretShape, TooltipTokens, TriStateCheckbox, TypeScaleTokens, Typography, TypographyContext, TypographyKeyTokens, TypographyProvider, TypographyTokens, appBarTypography, applyTheme, buildWavePath, cn, generateM3Theme, useAppBarScroll, useRipple as useDOMRipple, useMediaQuery, useRipple2 as useRipple, useRippleState, useSearchKeyboard, useSnackbar, useSnackbarState, useTheme, useThemeMode, useTooltipPosition, useTooltipState, useTypography };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map