@a4ui/core 0.25.0 → 0.26.0

package/dist/lib/easing.d.ts

@@ -0,0 +1,42 @@
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export declare const EASE: {
+    /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+    readonly out: "cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Balanced ease-in-out for reversible state toggles. */
+    readonly inOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+    /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+    readonly emphasized: "cubic-bezier(0.2, 0, 0, 1)";
+    /** No easing. */
+    readonly linear: "linear";
+};
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE;
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export declare const SPRING: {
+    /** Soft, natural settle — good for panels and layout shifts. */
+    readonly gentle: {
+        readonly stiffness: 170;
+        readonly damping: 26;
+    };
+    /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+    readonly snappy: {
+        readonly stiffness: 320;
+        readonly damping: 30;
+    };
+    /** Playful overshoot — good for playful accents. Use sparingly. */
+    readonly bouncy: {
+        readonly stiffness: 420;
+        readonly damping: 18;
+    };
+};
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING;

package/dist/ui/CategoryStrip.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+/** A single selectable category: value, label, and optional leading icon. */
+export interface CategoryItem {
+    value: string;
+    label: string;
+    icon?: JSX.Element;
+}
+export interface CategoryStripProps {
+    items: CategoryItem[];
+    value: string;
+    onChange: (value: string) => void;
+    class?: string;
+}
+/**
+ * Horizontally-scrollable row of icon-over-label category tabs with a
+ * bottom-underline indicator on the active item. Left/Right arrow keys move
+ * the selection between items.
+ *
+ * @example
+ * ```tsx
+ * <CategoryStrip items={categories} value={category()} onChange={setCategory} />
+ * ```
+ */
+export declare function CategoryStrip(props: CategoryStripProps): JSX.Element;

package/dist/ui/CodeTabs.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+/** A single tab's content: label, source code, and optional language tag. */
+export interface CodeTab {
+    label: string;
+    code: string;
+    /** Language tag, e.g. `'tsx'`. Not used for highlighting; informational only. */
+    lang?: string;
+}
+export interface CodeTabsProps {
+    tabs: CodeTab[];
+    class?: string;
+}
+/**
+ * Card of tabbed code blocks with a copy button for the active tab, for
+ * showing several code samples or language variants side by side.
+ *
+ * @example
+ * ```tsx
+ * <CodeTabs
+ *   tabs={[
+ *     { label: 'npm', code: 'npm install @a4ui/core' },
+ *     { label: 'pnpm', code: 'pnpm add @a4ui/core' },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function CodeTabs(props: CodeTabsProps): JSX.Element;

package/dist/ui/MasterDetail.d.ts

@@ -0,0 +1,27 @@
+import { JSX } from 'solid-js';
+export interface MasterDetailItem {
+    id: string;
+    label: string;
+    meta?: JSX.Element;
+    detail: JSX.Element;
+}
+export interface MasterDetailProps {
+    items: MasterDetailItem[];
+    /** Controlled selection. Uncontrolled (internal signal, defaults to the first item) when omitted. */
+    selectedId?: string;
+    onSelect?: (id: string) => void;
+    class?: string;
+}
+/**
+ * List + detail-pane layout: a scrollable list of items on the left, the
+ * selected item's detail content on the right. Arrow keys (and Home/End)
+ * move the selection within the list.
+ *
+ * @example
+ * ```tsx
+ * <MasterDetail
+ *   items={messages.map((m) => ({ id: m.id, label: m.subject, meta: <Badge>{m.from}</Badge>, detail: <MessageBody message={m} /> }))}
+ * />
+ * ```
+ */
+export declare function MasterDetail(props: MasterDetailProps): JSX.Element;

package/dist/ui/PillSearch.d.ts

@@ -0,0 +1,38 @@
+import { JSX } from 'solid-js';
+export interface PillField {
+    /** Stable identifier passed back via {@link PillSearchProps.onFieldClick}. */
+    key: string;
+    /** Small label shown above the value, e.g. `"Where"`. */
+    label: string;
+    /** Current value shown below the label. Falls back to `placeholder` when unset. */
+    value?: string;
+    /** Muted hint shown when `value` is unset. */
+    placeholder?: string;
+}
+export interface PillSearchProps {
+    fields: PillField[];
+    /** Called with the clicked field's `key`. */
+    onFieldClick?: (key: string) => void;
+    /** Called when the round search button is pressed. */
+    onSearch?: () => void;
+    class?: string;
+}
+/**
+ * Rounded-full search bar that packs several fields into segments with a
+ * round primary search button — the classic "Where / When / Who" pattern
+ * compressed into one compact control.
+ *
+ * @example
+ * ```tsx
+ * <PillSearch
+ *   fields={[
+ *     { key: 'where', label: 'Where', value: 'Lisbon' },
+ *     { key: 'when', label: 'When', placeholder: 'Add dates' },
+ *     { key: 'who', label: 'Who', placeholder: 'Add guests' },
+ *   ]}
+ *   onFieldClick={(key) => console.log('open', key)}
+ *   onSearch={() => console.log('search')}
+ * />
+ * ```
+ */
+export declare function PillSearch(props: PillSearchProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/preset.js

@@ -28,6 +28,26 @@ const glass = plugin(({ addComponents, addVariant }) => {
   // and a darker one on light to keep WCAG AA in both.
   addVariant('light', "[data-theme='light'] &")
   addComponents({
+    // ---- Elevation scale ----
+    // A layered depth system: `.elevation-1..4` for raised surfaces (rising
+    // shadow), `.pressed` for an inset/recessed look. Uses the same `--shadow`
+    // token as the glass surfaces, so it recolors per theme.
+    '.elevation-1': {
+      boxShadow: '0 1px 2px hsl(var(--shadow) / 0.06), 0 1px 3px hsl(var(--shadow) / 0.1)',
+    },
+    '.elevation-2': {
+      boxShadow: '0 2px 4px hsl(var(--shadow) / 0.06), 0 4px 12px hsl(var(--shadow) / 0.12)',
+    },
+    '.elevation-3': {
+      boxShadow: '0 2px 6px hsl(var(--shadow) / 0.08), 0 8px 24px hsl(var(--shadow) / 0.14)',
+    },
+    '.elevation-4': {
+      boxShadow: '0 4px 12px hsl(var(--shadow) / 0.1), 0 16px 40px hsl(var(--shadow) / 0.18)',
+    },
+    '.pressed': {
+      boxShadow: 'inset 0 1px 2px hsl(var(--shadow) / 0.18)',
+    },
+
     // ---- Primary glass surface ----
     '.card': {
       position: 'relative',

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.25.0'
+export const A4UI_VERSION = '0.26.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -35,6 +35,7 @@ export { useMediaQuery } from './lib/media'
 export { remeasureAfterLayout } from './lib/virtual'
 export { createOptimistic } from './lib/createOptimistic'
 export { startViewTransition } from './lib/viewTransition'
+export { EASE, SPRING, type EaseName, type SpringName } from './lib/easing'
 
 // UI components (src/ui) — all 18 extracted. See CLAUDE.md.
 export { Accordion, type AccordionItem } from './ui/Accordion'
@@ -158,6 +159,12 @@ export { FloatingToolbar, type FloatingToolbarProps } from './ui/FloatingToolbar
 export { PageTransition, type PageTransitionProps } from './ui/PageTransition'
 export { InlineSelect, type InlineSelectProps, type InlineSelectOption } from './ui/InlineSelect'
 
+// Phase 2 — code, search, navigation, master-detail.
+export { CodeTabs, type CodeTabsProps, type CodeTab } from './ui/CodeTabs'
+export { PillSearch, type PillSearchProps, type PillField } from './ui/PillSearch'
+export { CategoryStrip, type CategoryStripProps, type CategoryItem } from './ui/CategoryStrip'
+export { MasterDetail, type MasterDetailProps, type MasterDetailItem } from './ui/MasterDetail'
+
 // Motion components (src/ui) — animation primitives built on the `motion` engine
 // (adapted from motion.dev examples). All tree-shakeable and reduced-motion aware;
 // `motion` is external, so importing one of these is the only thing that pulls it.

package/src/lib/easing.ts

@@ -0,0 +1,43 @@
+// Shared motion vocabulary — named easing curves and spring presets, so every
+// component transition can pull from one consistent set instead of hand-rolling
+// cubic-beziers. `EASE` values are plain CSS `transition-timing-function`
+// strings (drop into an inline style, a `transition-timing-function`, or a
+// Tailwind `ease-[…]` arbitrary value). `SPRING` values are option objects for
+// the `spring` helper re-exported from `@a4ui/core` (motion.dev).
+
+/** Named cubic-bezier easing curves, as CSS `transition-timing-function` strings. */
+export const EASE = {
+  /** Gentle ease-out — the sensible default for entrances and most UI motion. */
+  out: 'cubic-bezier(0.22, 1, 0.36, 1)',
+  /** Balanced ease-in-out for reversible state toggles. */
+  inOut: 'cubic-bezier(0.65, 0, 0.35, 1)',
+  /** Emphasized, decisive curve (fast start, long settle) for hero moments. */
+  emphasized: 'cubic-bezier(0.2, 0, 0, 1)',
+  /** No easing. */
+  linear: 'linear',
+} as const
+
+/** A key of {@link EASE}. */
+export type EaseName = keyof typeof EASE
+
+/**
+ * Spring option presets for the `spring` helper (motion.dev), re-exported from
+ * `@a4ui/core`. Pass one straight through:
+ *
+ * @example
+ * ```ts
+ * import { animate, spring, SPRING } from '@a4ui/core'
+ * animate(el, { y: 0 }, { type: spring, ...SPRING.snappy })
+ * ```
+ */
+export const SPRING = {
+  /** Soft, natural settle — good for panels and layout shifts. */
+  gentle: { stiffness: 170, damping: 26 },
+  /** Quick and tight, minimal overshoot — good for toggles and small controls. */
+  snappy: { stiffness: 320, damping: 30 },
+  /** Playful overshoot — good for playful accents. Use sparingly. */
+  bouncy: { stiffness: 420, damping: 18 },
+} as const
+
+/** A key of {@link SPRING}. */
+export type SpringName = keyof typeof SPRING

package/src/ui/CategoryStrip.tsx

@@ -0,0 +1,80 @@
+// Horizontally-scrollable strip of icon+label category filters, with an
+// active-underline indicator — e.g. a storefront category nav (All, Fresh,
+// Bakery, Dairy, …). Scrollbar is hidden; Left/Right arrows move selection.
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single selectable category: value, label, and optional leading icon. */
+export interface CategoryItem {
+  value: string
+  label: string
+  icon?: JSX.Element
+}
+
+export interface CategoryStripProps {
+  items: CategoryItem[]
+  value: string
+  onChange: (value: string) => void
+  class?: string
+}
+
+/**
+ * Horizontally-scrollable row of icon-over-label category tabs with a
+ * bottom-underline indicator on the active item. Left/Right arrow keys move
+ * the selection between items.
+ *
+ * @example
+ * ```tsx
+ * <CategoryStrip items={categories} value={category()} onChange={setCategory} />
+ * ```
+ */
+export function CategoryStrip(props: CategoryStripProps): JSX.Element {
+  const activeIndex = () => props.items.findIndex((item) => item.value === props.value)
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    event.preventDefault()
+    const count = props.items.length
+    if (count === 0) return
+    const current = activeIndex()
+    const delta = event.key === 'ArrowRight' ? 1 : -1
+    const next = ((current === -1 ? 0 : current) + delta + count) % count
+    props.onChange(props.items[next].value)
+  }
+
+  return (
+    <div
+      role="tablist"
+      class={cn(
+        'flex gap-6 overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden',
+        props.class,
+      )}
+      onKeyDown={onKeyDown}
+    >
+      <For each={props.items}>
+        {(item) => {
+          const isActive = () => item.value === props.value
+          return (
+            <button
+              type="button"
+              role="tab"
+              aria-selected={isActive()}
+              class={cn(
+                'flex shrink-0 flex-col items-center gap-1 border-b-2 px-1 pb-2 text-xs font-medium transition-colors',
+                isActive()
+                  ? 'border-primary text-foreground'
+                  : 'border-transparent text-muted-foreground hover:text-foreground',
+              )}
+              onClick={() => props.onChange(item.value)}
+            >
+              {item.icon}
+              <span>{item.label}</span>
+            </button>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/ui/CodeTabs.tsx

@@ -0,0 +1,100 @@
+// Tabbed code blocks with a per-tab copy button, for embedding several code
+// samples/languages (docs, marketing) in a single card. Plain monospace —
+// no syntax highlighting.
+import { Check, Copy } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single tab's content: label, source code, and optional language tag. */
+export interface CodeTab {
+  label: string
+  code: string
+  /** Language tag, e.g. `'tsx'`. Not used for highlighting; informational only. */
+  lang?: string
+}
+
+export interface CodeTabsProps {
+  tabs: CodeTab[]
+  class?: string
+}
+
+const COPIED_TIMEOUT_MS = 1500
+
+/**
+ * Card of tabbed code blocks with a copy button for the active tab, for
+ * showing several code samples or language variants side by side.
+ *
+ * @example
+ * ```tsx
+ * <CodeTabs
+ *   tabs={[
+ *     { label: 'npm', code: 'npm install @a4ui/core' },
+ *     { label: 'pnpm', code: 'pnpm add @a4ui/core' },
+ *   ]}
+ * />
+ * ```
+ */
+export function CodeTabs(props: CodeTabsProps): JSX.Element {
+  const [activeIndex, setActiveIndex] = createSignal(0)
+  const [copied, setCopied] = createSignal(false)
+
+  const active = () => props.tabs[activeIndex()]
+
+  const copy = () => {
+    if (!navigator.clipboard) return
+    navigator.clipboard.writeText(active().code).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), COPIED_TIMEOUT_MS)
+    })
+  }
+
+  return (
+    <div class={cn('overflow-hidden rounded-lg border border-border bg-card', props.class)}>
+      <div class="flex items-center justify-between border-b border-border pr-2">
+        <div class="flex" role="tablist">
+          <For each={props.tabs}>
+            {(tab, index) => (
+              <button
+                type="button"
+                role="tab"
+                aria-selected={activeIndex() === index()}
+                class={cn(
+                  'border-b-2 px-4 py-2 text-sm font-medium transition-colors',
+                  activeIndex() === index()
+                    ? 'border-foreground text-foreground'
+                    : 'border-transparent text-muted-foreground hover:text-foreground',
+                )}
+                onClick={() => setActiveIndex(index())}
+              >
+                {tab.label}
+              </button>
+            )}
+          </For>
+        </div>
+        <button
+          type="button"
+          class="inline-flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-muted-foreground hover:text-foreground"
+          onClick={copy}
+        >
+          <Show
+            when={copied()}
+            fallback={
+              <>
+                <Copy class="h-3.5 w-3.5" />
+                Copy
+              </>
+            }
+          >
+            <Check class="h-3.5 w-3.5" />
+            Copied
+          </Show>
+        </button>
+      </div>
+      <pre class="overflow-x-auto p-4 text-sm font-mono text-foreground">
+        <code>{active().code}</code>
+      </pre>
+    </div>
+  )
+}

package/src/ui/MasterDetail.tsx

@@ -0,0 +1,117 @@
+// List + detail-pane layout with keyboard navigation, e.g. an inbox or a
+// command-result view. The list is a `listbox`; Up/Down move the selection,
+// Home/End jump to the first/last item. Controlled (`selectedId`+`onSelect`)
+// or uncontrolled (internal signal, defaults to the first item).
+import type { JSX } from 'solid-js'
+import { createMemo, createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface MasterDetailItem {
+  id: string
+  label: string
+  meta?: JSX.Element
+  detail: JSX.Element
+}
+
+export interface MasterDetailProps {
+  items: MasterDetailItem[]
+  /** Controlled selection. Uncontrolled (internal signal, defaults to the first item) when omitted. */
+  selectedId?: string
+  onSelect?: (id: string) => void
+  class?: string
+}
+
+/**
+ * List + detail-pane layout: a scrollable list of items on the left, the
+ * selected item's detail content on the right. Arrow keys (and Home/End)
+ * move the selection within the list.
+ *
+ * @example
+ * ```tsx
+ * <MasterDetail
+ *   items={messages.map((m) => ({ id: m.id, label: m.subject, meta: <Badge>{m.from}</Badge>, detail: <MessageBody message={m} /> }))}
+ * />
+ * ```
+ */
+export function MasterDetail(props: MasterDetailProps): JSX.Element {
+  const [internalId, setInternalId] = createSignal<string | undefined>(props.items[0]?.id)
+
+  const selectedId = createMemo(() => props.selectedId ?? internalId())
+
+  const select = (id: string) => {
+    if (props.selectedId === undefined) setInternalId(id)
+    props.onSelect?.(id)
+  }
+
+  const selectedItem = createMemo(() => props.items.find((item) => item.id === selectedId()))
+
+  let listEl: HTMLDivElement | undefined
+
+  const onKeyDown = (event: KeyboardEvent) => {
+    const items = props.items
+    if (items.length === 0) return
+    const currentIndex = items.findIndex((item) => item.id === selectedId())
+
+    let nextIndex: number
+    if (event.key === 'ArrowDown')
+      nextIndex = currentIndex < 0 ? 0 : Math.min(currentIndex + 1, items.length - 1)
+    else if (event.key === 'ArrowUp') nextIndex = currentIndex < 0 ? 0 : Math.max(currentIndex - 1, 0)
+    else if (event.key === 'Home') nextIndex = 0
+    else if (event.key === 'End') nextIndex = items.length - 1
+    else return
+
+    event.preventDefault()
+    const next = items[nextIndex]
+    if (!next) return
+    select(next.id)
+    listEl?.querySelector<HTMLElement>(`[data-item-id="${next.id}"]`)?.focus()
+  }
+
+  return (
+    <div class={cn('grid grid-cols-1 gap-4 sm:grid-cols-[16rem_1fr]', props.class)}>
+      <div
+        ref={listEl}
+        role="listbox"
+        aria-label="Items"
+        tabindex={0}
+        onKeyDown={onKeyDown}
+        class="flex max-h-96 flex-col gap-1 overflow-y-auto rounded-xl border border-border bg-card p-1 text-card-foreground sm:max-h-[28rem]"
+      >
+        <For each={props.items}>
+          {(item) => {
+            const isSelected = () => item.id === selectedId()
+            return (
+              <button
+                type="button"
+                role="option"
+                aria-selected={isSelected()}
+                data-item-id={item.id}
+                tabindex={-1}
+                onClick={() => select(item.id)}
+                class={cn(
+                  'flex w-full items-center justify-between gap-2 rounded-lg px-3 py-2 text-left text-sm transition-colors',
+                  isSelected() ? 'bg-muted text-foreground' : 'text-muted-foreground hover:bg-muted/60',
+                )}
+              >
+                <span class="truncate">{item.label}</span>
+                <Show when={item.meta}>{item.meta}</Show>
+              </button>
+            )
+          }}
+        </For>
+      </div>
+      <div class="rounded-xl border border-border bg-card p-5 text-card-foreground">
+        {/* keyed: re-render the detail when the selected item changes (a plain
+            Show wouldn't re-run its child when `when` stays truthy across items). */}
+        <Show
+          when={selectedItem()}
+          keyed
+          fallback={<p class="text-sm text-muted-foreground">Select an item to see its details.</p>}
+        >
+          {(item) => item.detail}
+        </Show>
+      </div>
+    </div>
+  )
+}

package/src/ui/PillSearch.tsx

@@ -0,0 +1,86 @@
+// Compact multi-parameter search entry: a single rounded-full bar that
+// compresses several fields (e.g. Where / When / Who) into clickable
+// segments, ending in a round primary search button.
+import type { JSX } from 'solid-js'
+import { For } from 'solid-js'
+import { Search } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+
+export interface PillField {
+  /** Stable identifier passed back via {@link PillSearchProps.onFieldClick}. */
+  key: string
+  /** Small label shown above the value, e.g. `"Where"`. */
+  label: string
+  /** Current value shown below the label. Falls back to `placeholder` when unset. */
+  value?: string
+  /** Muted hint shown when `value` is unset. */
+  placeholder?: string
+}
+
+export interface PillSearchProps {
+  fields: PillField[]
+  /** Called with the clicked field's `key`. */
+  onFieldClick?: (key: string) => void
+  /** Called when the round search button is pressed. */
+  onSearch?: () => void
+  class?: string
+}
+
+/**
+ * Rounded-full search bar that packs several fields into segments with a
+ * round primary search button — the classic "Where / When / Who" pattern
+ * compressed into one compact control.
+ *
+ * @example
+ * ```tsx
+ * <PillSearch
+ *   fields={[
+ *     { key: 'where', label: 'Where', value: 'Lisbon' },
+ *     { key: 'when', label: 'When', placeholder: 'Add dates' },
+ *     { key: 'who', label: 'Who', placeholder: 'Add guests' },
+ *   ]}
+ *   onFieldClick={(key) => console.log('open', key)}
+ *   onSearch={() => console.log('search')}
+ * />
+ * ```
+ */
+export function PillSearch(props: PillSearchProps): JSX.Element {
+  return (
+    <div
+      class={cn(
+        'inline-flex max-w-full items-center overflow-x-auto rounded-full border border-border bg-card shadow-sm',
+        props.class,
+      )}
+    >
+      <For each={props.fields}>
+        {(field, index) => (
+          <button
+            type="button"
+            aria-label={field.label}
+            onClick={() => props.onFieldClick?.(field.key)}
+            class={cn(
+              'flex min-w-[6.5rem] shrink-0 flex-col items-start px-4 py-2 text-left transition-colors duration-150 hover:bg-muted focus:outline-none focus:ring-2 focus:ring-ring',
+              index() === 0 ? 'rounded-l-full' : 'border-l border-border',
+            )}
+          >
+            <span class="text-xs font-medium text-muted-foreground">{field.label}</span>
+            <span class={cn('text-sm', field.value ? 'text-foreground' : 'text-muted-foreground')}>
+              {field.value ?? field.placeholder}
+            </span>
+          </button>
+        )}
+      </For>
+      <div class="shrink-0 py-1.5 pl-1 pr-1.5">
+        <button
+          type="button"
+          aria-label="Search"
+          onClick={() => props.onSearch?.()}
+          class="inline-flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground transition-[color,background-color,transform] duration-150 hover:bg-primary/90 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring"
+        >
+          <Search class="h-4 w-4" aria-hidden="true" />
+        </button>
+      </div>
+    </div>
+  )
+}