panelui-native 0.79.0 → 0.80.0

package/lib/module/components/panelside/index.js

@@ -78,7 +78,7 @@
  * accessibility setting on, every spring here resolves instantly to its target
  * rather than travelling.
  */
-import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Platform, Pressable, ScrollView, StyleSheet, TextInput, useWindowDimensions, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedProps, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring } from 'react-native-reanimated';
@@ -86,15 +86,19 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { tv } from 'tailwind-variants';
 import { useCSSVariable } from 'uniwind';
 import { LinearGradient } from 'expo-linear-gradient';
-import { EllipsisIcon, IconColorProvider, MenuIcon, SearchIcon } from "../../icons/index.js";
+import { EllipsisIcon, IconColorProvider, MenuIcon, SearchIcon, XIcon } from "../../icons/index.js";
+import { BottomSheet, bottomSheetDetentHeight } from "../bottom-sheet/index.js";
 import { Button } from "../button/index.js";
+import { Tabs } from "../tabs/index.js";
+import { getNativeUI } from "../../native/index.js";
 import { AnimatedPressable } from "../../primitives/animated-pressable.js";
+import { KeyboardAvoider } from "../../primitives/keyboard-avoider.js";
 import { Text, textChildren } from "../../primitives/text.js";
 import { useBackHandler } from "../../hooks/use-back-handler.js";
 import { useDirectionSign } from "../../hooks/use-direction.js";
 import { cn } from "../../utils/cn.js";
 import { selectionTick } from "../../utils/haptics.js";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SPRING = {
   damping: 24,
   stiffness: 300,
@@ -216,6 +220,20 @@ const DOCK_WIDTH_MAX = 320;
 /** How far above the floating footer the list starts dissolving into it. */
 const FOOTER_FADE = 28;
 
+/**
+ * What `BottomSheet.Content` leaves below its last child, maxed against the
+ * home indicator. Mirrored here so the search field can subtract the strip it
+ * already sits above before it travels with the keyboard.
+ */
+const SHEET_BOTTOM_PADDING = 16;
+
+/**
+ * The top padding the search surface asks `BottomSheet.Content` for, and takes
+ * back off the column's height. Smaller than the sheet's own default, because
+ * this surface leads with a round button rather than with a title.
+ */
+const SHEET_TOP_PADDING = 12;
+
 /** Progress past which a layer is treated as fully hidden for accessibility. */
 const HIDDEN_EPSILON = 0.05;
 const clamp = (value, min, max) => {
@@ -223,6 +241,16 @@ const clamp = (value, min, max) => {
 
   return Math.min(Math.max(value, min), max);
 };
+
+/**
+ * What a header or a footer paints behind itself.
+ *
+ * `transparent` paints nothing, and the list runs the full height of the panel
+ * underneath it. `fade` dissolves the list into the panel background over the
+ * strip above the controls. `solid` is a band with an edge on it, for a footer
+ * that is a row of the layout rather than something floating over one.
+ */
+
 const itemVariants = tv({
   // No width: in a group it stretches on its own, and pinning it to full width
   // would stop it sharing a footer row with anything else. `shrink` because
@@ -249,9 +277,14 @@ const itemVariants = tv({
 const ctaVariants = tv({
   // Taller and wider than a list row's control. It is the one thing in the
   // panel you are meant to reach for without reading, so it should not be the
-  // same size as the eight chat titles above it — but it shares its footer row
-  // with an account button, and a pill that stands a whole step above that row
-  // makes the footer taller than anything in the panel needs it to be.
+  // same size as the eight chat titles above it.
+  //
+  // It used to be 40pt, chosen to sit level with the account button beside it.
+  // That is the wrong thing to size it against: the account button is a target
+  // you find once, and the compose pill is the one pressed every session — at
+  // matching heights the two read as a pair of equals and the pill stopped
+  // being the thing the footer is for. Four points is enough to separate them
+  // without making the footer taller than the panel needs.
   base: 'shrink flex-row items-center justify-center rounded-full',
   variants: {
     variant: {
@@ -259,8 +292,8 @@ const ctaVariants = tv({
       secondary: 'bg-secondary'
     },
     size: {
-      default: 'h-10 gap-2 px-5',
-      lg: 'h-12 gap-2 px-6'
+      default: 'h-11 gap-2 px-6',
+      lg: 'h-13 gap-2.5 px-7'
     }
   },
   defaultVariants: {
@@ -287,14 +320,18 @@ export function usePanelside() {
     setOpen,
     toggle,
     progress,
-    docked
+    docked,
+    searchOpen,
+    setSearchOpen
   } = usePanelsideContext('usePanelside');
   return {
     open,
     setOpen,
     toggle,
     progress,
-    docked
+    docked,
+    searchOpen,
+    setSearchOpen
   };
 }
 
@@ -331,6 +368,7 @@ function PanelsideRoot({
   const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
   const controlled = controlledOpen !== undefined;
   const open = controlled ? controlledOpen : uncontrolledOpen;
+  const [searchOpen, setSearchOpen] = useState(false);
 
   /*
    * Measured rather than taken from the window, because Panelside does not
@@ -465,8 +503,10 @@ function PanelsideRoot({
     dismissible,
     scale,
     radius,
-    dim
-  }), [dim, dismissible, docked, mode, open, progress, radius, scale, setOpen, toggle, width]);
+    dim,
+    searchOpen,
+    setSearchOpen
+  }), [dim, dismissible, docked, mode, open, progress, radius, scale, searchOpen, setOpen, toggle, width]);
   return /*#__PURE__*/_jsx(PanelsideContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsx(View, {
@@ -551,11 +591,14 @@ function PanelsideHeader({
   className,
   title,
   action,
+  surface = 'transparent',
   children,
   style,
   ...props
 }) {
   const insets = useSafeAreaInsets();
+  const background = useCSSVariable('--color-background');
+  const solid = typeof background === 'string' ? background : '#000000';
   return /*#__PURE__*/_jsxs(View
   // The panel draws behind the status bar on purpose, so it reads as a
   // full-height surface rather than a card. That makes the inset the
@@ -569,9 +612,31 @@ function PanelsideHeader({
     // share one edge. A header inset further would leave the field floating
     // a few points inside the list it filters.
     ,
-    className: cn('gap-3 px-3 pb-3', className),
+    className: cn('gap-3 px-3 pb-3', surface === 'solid' && 'border-b border-border bg-background', className),
     ...props,
-    children: [(title || action) && /*#__PURE__*/_jsxs(View, {
+    children: [surface === 'fade' ? /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(View, {
+        pointerEvents: "none",
+        className: "absolute end-0 start-0 top-0 bg-background",
+        style: {
+          bottom: FOOTER_FADE
+        }
+      }), /*#__PURE__*/_jsx(LinearGradient, {
+        colors: [solid, `${solid}00`],
+        start: {
+          x: 0,
+          y: 0
+        },
+        end: {
+          x: 0,
+          y: 1
+        },
+        pointerEvents: "none",
+        style: [styles.rise, {
+          height: FOOTER_FADE
+        }]
+      })]
+    }) : null, (title || action) && /*#__PURE__*/_jsxs(View, {
       className: "h-9 flex-row items-center justify-between gap-2",
       children: [title ? /*#__PURE__*/_jsx(Text, {
         size: "xl",
@@ -880,15 +945,20 @@ function PanelsideAction({
 function PanelsideFooter({
   className,
   floating = true,
+  surface = 'transparent',
   children,
   style,
   ...props
 }) {
   const insets = useSafeAreaInsets();
-  const surface = useContext(PanelsideSurfaceContext);
-  const setFooterHeight = surface?.setFooterHeight;
+  const panel = useContext(PanelsideSurfaceContext);
+  const setFooterHeight = panel?.setFooterHeight;
   const background = useCSSVariable('--color-background');
   const solid = typeof background === 'string' ? background : '#000000';
+
+  // A footer in the flow has nothing to float over, so the only thing it can
+  // be is the band — whatever was asked for.
+  const paint = floating ? surface : 'solid';
   const onLayout = useCallback(event => {
     setFooterHeight?.(event.nativeEvent.layout.height);
   }, [setFooterHeight]);
@@ -897,7 +967,7 @@ function PanelsideFooter({
     style: [{
       paddingBottom: Math.max(insets.bottom, 12)
     }, floating ? {
-      paddingTop: FOOTER_FADE
+      paddingTop: paint === 'fade' ? FOOTER_FADE : 12
     } : null, style],
     className: cn(
     // `gap-3` and a wider inset: the compose control is the one thing in
@@ -906,7 +976,7 @@ function PanelsideFooter({
     // list uses.
     'flex-row items-center gap-3 px-4', floating ? 'absolute bottom-0 end-0 start-0' : 'border-t border-border bg-background pt-2', className),
     ...props,
-    children: [floating ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [paint === 'fade' ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(LinearGradient, {
         colors: [`${solid}00`, solid],
         start: {
@@ -928,6 +998,9 @@ function PanelsideFooter({
           top: FOOTER_FADE
         }
       })]
+    }) : null, paint === 'solid' && floating ? /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      className: "absolute bottom-0 end-0 start-0 top-0 border-t border-border bg-background"
     }) : null, textChildren(children)]
   });
 }
@@ -937,6 +1010,12 @@ const styles = StyleSheet.create({
     top: 0,
     left: 0,
     right: 0
+  },
+  rise: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0
   }
 });
 function PanelsideCta({
@@ -1172,6 +1251,421 @@ function PanelsideTrigger({
     })
   });
 }
+
+/* ------------------------------------------------------------------ *
+ * Search.
+ *
+ * A field in the header is the obvious way to put search in a navigation
+ * panel, and it is the wrong one on a phone. The panel is 80% of the screen
+ * and the field is 40 points of it, so a search that returns anything has to
+ * push the history down the screen it is already filling — and the field is at
+ * the top, which is the far end of the screen from the keyboard that has just
+ * opened under it.
+ *
+ * So search is a surface rather than a row. A round button in the header opens
+ * a sheet that is the whole screen; the tabs across the top narrow what is
+ * being searched; the results fill the middle; and the field is at the bottom,
+ * where the thumb already is, riding the keyboard rather than hiding behind
+ * it.
+ *
+ * `Panelside.Search` — the inline field — is still exported, and is still
+ * right for a docked panel on a tablet, where there is width for a field and
+ * no keyboard covering half the screen.
+ * ------------------------------------------------------------------ */
+
+/**
+ * The button that opens the search surface. Goes in `Panelside.Header`'s
+ * `action` slot.
+ *
+ * It toggles the root's `searchOpen`, which `Panelside.SearchSheet` reads —
+ * so the two need nothing wired between them.
+ */
+function PanelsideSearchTrigger({
+  className,
+  label = 'Search',
+  children,
+  native = false,
+  glass = false,
+  onPress,
+  ...props
+}) {
+  const {
+    setSearchOpen
+  } = usePanelsideContext('Panelside.SearchTrigger');
+  const tint = useCSSVariable('--color-foreground');
+  const color = typeof tint === 'string' ? tint : undefined;
+  const open = useCallback(event => {
+    onPress?.(event);
+    setSearchOpen(true);
+  }, [onPress, setSearchOpen]);
+  const glyph = children ?? /*#__PURE__*/_jsx(SearchIcon, {
+    size: 18,
+    color: native ? color : undefined
+  });
+  if (native) {
+    return /*#__PURE__*/_jsx(Button, {
+      native: true,
+      glass: glass,
+      size: "icon",
+      variant: "ghost",
+      accessibilityLabel: label,
+      onPress: open,
+      children: glyph
+    });
+  }
+  return /*#__PURE__*/_jsx(AnimatedPressable, {
+    ...props,
+    onPress: open,
+    className: cn(
+    // Filled rather than outlined. It sits on the panel's own surface with
+    // nothing else on that row, so an outline at this size reads as an
+    // empty circle before it reads as a control.
+    'h-10 w-10 items-center justify-center rounded-full bg-secondary', className),
+    accessibilityRole: "button",
+    accessibilityLabel: label,
+    children: /*#__PURE__*/_jsx(IconColorProvider, {
+      color: color,
+      children: glyph
+    })
+  });
+}
+const PanelsideSearchSheetContext = /*#__PURE__*/createContext(null);
+function usePanelsideSearchSheet(part) {
+  const value = useContext(PanelsideSearchSheetContext);
+  if (!value) throw new Error(`${part} must be used inside a <Panelside.SearchSheet>.`);
+  return value;
+}
+/**
+ * The search surface: tabs, results, and a field at the bottom.
+ *
+ * ```tsx
+ * <Panelside.SearchSheet value={query} onValueChange={setQuery} tab={tab} onTabChange={setTab}>
+ *   <Panelside.SearchTabs>
+ *     <Panelside.SearchTab value="all" icon={<SparklesIcon size={16} />}>All</Panelside.SearchTab>
+ *     <Panelside.SearchTab value="chats" icon={<MessageCircleIcon size={16} />}>Chats</Panelside.SearchTab>
+ *   </Panelside.SearchTabs>
+ *
+ *   <Panelside.SearchResults>
+ *     {hits.map((hit) => (
+ *       <Panelside.SearchResult key={hit.id} title={hit.title} description={hit.kind} />
+ *     ))}
+ *   </Panelside.SearchResults>
+ *
+ *   <Panelside.SearchField placeholder="Search chats" />
+ * </Panelside.SearchSheet>
+ * ```
+ *
+ * Put it under `<Panelside>` and outside `Panelside.Panel` — a sheet is
+ * presented over the whole app, and the panel is a layer that slides.
+ *
+ * It reports what was typed and which tab is selected. What counts as a match,
+ * and what a result is, are yours: a search that only read chat titles would
+ * be wrong for the first app that indexes message bodies.
+ */
+function PanelsideSearchSheet({
+  className,
+  open: openProp,
+  onOpenChange,
+  value,
+  defaultValue = '',
+  onValueChange,
+  tab,
+  defaultTab = '',
+  onTabChange,
+  native = true,
+  snapPoints,
+  keyboardGap = 10,
+  showClose = true,
+  closeLabel = 'Close search',
+  children
+}) {
+  const {
+    searchOpen,
+    setSearchOpen
+  } = usePanelsideContext('Panelside.SearchSheet');
+  const insets = useSafeAreaInsets();
+  const {
+    height: screenHeight
+  } = useWindowDimensions();
+  const tint = useCSSVariable('--color-foreground');
+  const glyph = typeof tint === 'string' ? tint : undefined;
+  const [uncontrolledQuery, setUncontrolledQuery] = useState(defaultValue);
+  const [uncontrolledTab, setUncontrolledTab] = useState(defaultTab);
+  const open = openProp ?? searchOpen;
+  const query = value ?? uncontrolledQuery;
+  const activeTab = tab ?? uncontrolledTab;
+  const setOpen = useCallback(next => {
+    if (openProp === undefined) setSearchOpen(next);
+    onOpenChange?.(next);
+  }, [onOpenChange, openProp, setSearchOpen]);
+  const setQuery = useCallback(next => {
+    if (value === undefined) setUncontrolledQuery(next);
+    onValueChange?.(next);
+  }, [onValueChange, value]);
+  const setTab = useCallback(next => {
+    if (tab === undefined) setUncontrolledTab(next);
+    onTabChange?.(next);
+  }, [onTabChange, tab]);
+  const close = useCallback(() => setOpen(false), [setOpen]);
+  const detents = snapPoints ?? ['full'];
+
+  /*
+   * What `BottomSheet.Content` pads the bottom of the sheet by. The field
+   * already sits that far above the screen edge, and docking travels by the
+   * keyboard's height less whatever the element has already cleared — so
+   * getting this wrong is a gap under the field, or the field over the
+   * keyboard's top row.
+   */
+  const bottomInset = Math.max(insets.bottom, SHEET_BOTTOM_PADDING) - keyboardGap;
+
+  /*
+   * A definite height for the column, not `flex-1` against the sheet's own.
+   *
+   * The platform sheet gives its hosted content a *minimum* height, and a
+   * minimum is not something `flex-1` can divide: the results list sizes to
+   * its own rows instead, grows past the sheet, and pushes the field off the
+   * bottom — which is a search surface with no way to type in it. So the
+   * column is told exactly how tall it is, and the list gets the room left
+   * between the tabs and the field.
+   *
+   * Only under the platform sheet. The styled one is laid out by us and has a
+   * real height already, so `flex-1` resolves there and a second opinion about
+   * how tall the sheet is would only be a chance to disagree with it.
+   */
+  const hosted = native && getNativeUI() !== null;
+  const columnHeight = hosted ? (bottomSheetDetentHeight(detents, screenHeight) ?? screenHeight * 0.9) - SHEET_TOP_PADDING - Math.max(insets.bottom, SHEET_BOTTOM_PADDING) : undefined;
+  const context = useMemo(() => ({
+    open,
+    query,
+    setQuery,
+    tab: activeTab,
+    setTab,
+    close,
+    bottomInset
+  }), [activeTab, bottomInset, close, open, query, setQuery, setTab]);
+  return /*#__PURE__*/_jsx(BottomSheet, {
+    native: native,
+    open: open,
+    onOpenChange: setOpen,
+    snapPoints: detents,
+    children: /*#__PURE__*/_jsx(BottomSheet.Content, {
+      size: "full",
+      showClose: false,
+      className: "gap-0 px-0 pt-3",
+      children: /*#__PURE__*/_jsx(PanelsideSearchSheetContext.Provider, {
+        value: context,
+        children: /*#__PURE__*/_jsxs(View, {
+          className: cn('gap-2', columnHeight === undefined && 'flex-1', className),
+          style: columnHeight === undefined ? undefined : {
+            height: columnHeight
+          },
+          children: [showClose ? /*#__PURE__*/_jsx(View, {
+            className: "flex-row px-4 pb-1",
+            children: /*#__PURE__*/_jsx(AnimatedPressable, {
+              onPress: close,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              className: "h-9 w-9 items-center justify-center rounded-full bg-secondary",
+              children: /*#__PURE__*/_jsx(XIcon, {
+                size: 17,
+                color: glyph
+              })
+            })
+          }) : null, children]
+        })
+      })
+    })
+  });
+}
+/**
+ * The row across the top of the search sheet, narrowing what is searched.
+ *
+ * The expanding variant: only the selected tab is open, and the rest are their
+ * icons. A row of four full labels takes the whole width to say four words
+ * nobody rereads, and this row has to leave the results the screen.
+ *
+ * Every `Panelside.SearchTab` therefore needs an `icon` — a closed tab has
+ * nothing else to be.
+ */
+function PanelsideSearchTabs({
+  className,
+  children
+}) {
+  const {
+    tab,
+    setTab
+  } = usePanelsideSearchSheet('Panelside.SearchTabs');
+  return /*#__PURE__*/_jsx(Tabs, {
+    variant: "expanding",
+    value: tab,
+    onValueChange: setTab,
+    defaultValue: tab,
+    className: cn('px-4 pt-1', className),
+    children: /*#__PURE__*/_jsx(Tabs.List, {
+      children: children
+    })
+  });
+}
+function PanelsideSearchTab({
+  className,
+  value,
+  icon,
+  children
+}) {
+  return /*#__PURE__*/_jsx(Tabs.Trigger, {
+    value: value,
+    icon: icon,
+    className: className,
+    children: children
+  });
+}
+/**
+ * The scrolling middle of the search sheet.
+ *
+ * `BottomSheet.Body` rather than a `ScrollView`, so the list's scroll and the
+ * sheet's dismiss drag agree on which of them a downward pull belongs to.
+ */
+function PanelsideSearchResults({
+  className,
+  contentContainerClassName,
+  children,
+  ...props
+}) {
+  usePanelsideSearchSheet('Panelside.SearchResults');
+  return /*#__PURE__*/_jsx(BottomSheet.Body, {
+    className: cn('flex-1', className),
+    contentContainerClassName: cn('gap-1 px-4 pb-4 pt-1', contentContainerClassName),
+    keyboardShouldPersistTaps: "handled",
+    keyboardDismissMode: "interactive",
+    ...props,
+    children: textChildren(children)
+  });
+}
+/**
+ * One hit. A leading thumbnail, a title, and a line saying what it is.
+ *
+ * Taller than a `Panelside.Item`, and deliberately: a navigation row is a
+ * place you already know the name of, and a result is a thing you are deciding
+ * about — the second line is what the decision is made on.
+ */
+function PanelsideSearchResult({
+  className,
+  media,
+  title,
+  description,
+  children,
+  ...props
+}) {
+  const tint = useCSSVariable('--color-muted-foreground');
+  const color = typeof tint === 'string' ? tint : undefined;
+  return /*#__PURE__*/_jsxs(AnimatedPressable, {
+    className: cn('flex-row items-center gap-3 rounded-xl px-2 py-2', className),
+    accessibilityRole: "button",
+    accessibilityLabel: title,
+    pressScale: 0.985,
+    ...props,
+    children: [media ? /*#__PURE__*/_jsx(View, {
+      className: "h-11 w-11 items-center justify-center overflow-hidden rounded-xl bg-secondary",
+      children: /*#__PURE__*/_jsx(IconColorProvider, {
+        color: color,
+        children: media
+      })
+    }) : null, title !== undefined || description !== undefined ? /*#__PURE__*/_jsxs(View, {
+      className: "flex-1 gap-0.5",
+      children: [title !== undefined ? /*#__PURE__*/_jsx(Text, {
+        size: "base",
+        weight: "medium",
+        numberOfLines: 1,
+        children: title
+      }) : null, description !== undefined ? /*#__PURE__*/_jsx(Text, {
+        size: "sm",
+        muted: true,
+        numberOfLines: 1,
+        children: description
+      }) : null]
+    }) : null, children]
+  });
+}
+/**
+ * The field, at the bottom of the sheet, riding the keyboard.
+ *
+ * At the bottom because that is where the thumb is and where the keyboard
+ * comes up: a field at the top of a full-height sheet is at the far end of the
+ * screen from both, and every character typed into it is read at the other
+ * end of a list that is moving.
+ *
+ * The way out of the surface is not here — `Panelside.SearchSheet` draws it at
+ * the leading edge of the top row, so the dismiss control does not move with
+ * the keyboard and is not one mis-tap away from the field.
+ */
+function PanelsideSearchField({
+  className,
+  containerClassName,
+  placeholder = 'Search',
+  value,
+  onChangeText,
+  ...props
+}) {
+  const {
+    open,
+    query,
+    setQuery,
+    bottomInset
+  } = usePanelsideSearchSheet('Panelside.SearchField');
+  const placeholderTint = useCSSVariable('--color-muted-foreground');
+  const textTint = useCSSVariable('--color-foreground');
+  const muted = typeof placeholderTint === 'string' ? placeholderTint : undefined;
+  const field = useRef(null);
+  const text = value ?? query;
+  const change = onChangeText ?? setQuery;
+
+  /*
+   * Focus on the transition rather than with `autoFocus`. Under `native` the
+   * sheet's content is mounted for the life of the screen and only
+   * `isPresented` changes, so `autoFocus` fires once — at startup, on a sheet
+   * that is not up — and the keyboard opens over whatever is.
+   */
+  useEffect(() => {
+    if (open) field.current?.focus();else field.current?.blur();
+  }, [open]);
+  return /*#__PURE__*/_jsx(KeyboardAvoider, {
+    mode: "dock",
+    active: open,
+    bottomInset: bottomInset,
+    className: "w-full px-4 pb-1",
+    children: /*#__PURE__*/_jsxs(View, {
+      className: cn('h-12 w-full flex-row items-center gap-2 rounded-full bg-secondary px-4', containerClassName),
+      children: [/*#__PURE__*/_jsx(SearchIcon, {
+        size: 17,
+        color: muted
+      }), /*#__PURE__*/_jsx(TextInput, {
+        ref: field,
+        value: text,
+        onChangeText: change,
+        placeholder: placeholder,
+        placeholderTextColor: muted
+        /* `text-[16px]` rather than a `text-*` step — see Panelside.Search. */,
+        className: cn('h-full flex-1 font-normal text-[16px] text-foreground', className),
+        style: typeof textTint === 'string' ? {
+          color: textTint
+        } : undefined,
+        accessibilityRole: "search",
+        returnKeyType: "search",
+        ...props
+      }), text.length > 0 ? /*#__PURE__*/_jsx(AnimatedPressable, {
+        onPress: () => change(''),
+        hitSlop: 8,
+        accessibilityRole: "button",
+        accessibilityLabel: "Clear search",
+        className: "h-5 w-5 items-center justify-center rounded-full bg-muted",
+        children: /*#__PURE__*/_jsx(XIcon, {
+          size: 12,
+          color: muted
+        })
+      }) : null]
+    })
+  });
+}
 PanelsidePanel.displayName = 'Panelside.Panel';
 PanelsideHeader.displayName = 'Panelside.Header';
 PanelsideSearch.displayName = 'Panelside.Search';
@@ -1187,6 +1681,13 @@ PanelsideFooter.displayName = 'Panelside.Footer';
 PanelsideCta.displayName = 'Panelside.Cta';
 PanelsideScene.displayName = 'Panelside.Scene';
 PanelsideTrigger.displayName = 'Panelside.Trigger';
+PanelsideSearchTrigger.displayName = 'Panelside.SearchTrigger';
+PanelsideSearchSheet.displayName = 'Panelside.SearchSheet';
+PanelsideSearchTabs.displayName = 'Panelside.SearchTabs';
+PanelsideSearchTab.displayName = 'Panelside.SearchTab';
+PanelsideSearchResults.displayName = 'Panelside.SearchResults';
+PanelsideSearchResult.displayName = 'Panelside.SearchResult';
+PanelsideSearchField.displayName = 'Panelside.SearchField';
 export const Panelside = Object.assign(PanelsideRoot, {
   Panel: PanelsidePanel,
   Header: PanelsideHeader,
@@ -1202,6 +1703,13 @@ export const Panelside = Object.assign(PanelsideRoot, {
   Footer: PanelsideFooter,
   Cta: PanelsideCta,
   Scene: PanelsideScene,
-  Trigger: PanelsideTrigger
+  Trigger: PanelsideTrigger,
+  SearchTrigger: PanelsideSearchTrigger,
+  SearchSheet: PanelsideSearchSheet,
+  SearchTabs: PanelsideSearchTabs,
+  SearchTab: PanelsideSearchTab,
+  SearchResults: PanelsideSearchResults,
+  SearchResult: PanelsideSearchResult,
+  SearchField: PanelsideSearchField
 });
 //# sourceMappingURL=index.js.map