1c:I[55681,["/_next/static/immutable/chunks/32wiwqr_dmsge.js","/_next/static/immutable/chunks/0bukmq7w_c80m.js","/_next/static/immutable/chunks/3rxrzhpiav1f7.js","/_next/static/immutable/chunks/1qaj0fzi9d-s3.js","/_next/static/immutable/chunks/3g2b2lx2y2nyb.js","/_next/static/immutable/chunks/2a3g5k0ezze1g.js","/_next/static/immutable/chunks/06blemz8y8rbs.js"],"default"] 1d:T5664,"use client"; import { useEffect, useMemo, useRef, useState, type ReactNode } from "react"; import { AnimatePresence, motion, useIsPresent } from "motion/react"; import "./search-card.css"; /** * Search Card — a search bar that morphs open into a recent-searches card. * * At rest it is a small pill with a ⌘K hint, resting in the middle of its * space. Focus it — click, or ⌘K / Ctrl K from anywhere — and it rises to the * top as the same surface grows into a card, a panel of recent searches * unfolding under the search row, each with a * little drawn tile, and a row of category chips below that. One white sheet * glides between the rows under the pointer and a trash button slides in on * the row it rests on, with a tooltip. Typing filters the list; Clear all * empties it and Restore brings everything back. The chips' count rolls as * they are removed. Escape clears the query, then folds the card back into * the bar, as does a press anywhere outside it. * * The motion language is eased tweens, no springs: ease-in-out for things * that change size, ease-out for things that appear or follow the pointer. */ export type SearchCardProps = { theme?: "light" | "dark"; /** The card's corner radius; the inner panel follows it, 6px tighter. */ corner?: number; /** How many recent searches it starts with, up to four. */ rows?: number; /** Listen for ⌘K / Ctrl K anywhere on the page to open and close it. */ shortcut?: boolean; }; const ease = [0.23, 1, 0.32, 1] as const; /* strong ease-out */ const easeInOut = [0.65, 0, 0.35, 1] as const; /* the rise and the morph: a soft start so the bar lifts off rather than jumps, then a long settle */ const morph = { duration: 0.56, ease: [0.45, 0, 0.15, 1] as const }; const smooth = { duration: 0.32, ease: easeInOut }; const glide = { duration: 0.24, ease }; const fade = { duration: 0.18, ease }; /* the rows' heights, for the room the card keeps: the bar rests in its middle and rises to its top, so opening it never moves the page */ const BAR_H = 50; const HEAD_H = 40; const ROW_H = 68; const CHIPS_H = 64; /* the open card's shadow reaches ~36px below it; keep that inside the room so nothing clips it */ const SHADOW_ROOM = 40; /* ---------------------------------------------------------------- icons */ /* lucide: search, x, trash-2, rotate-ccw */ const Icon = ({ size, stroke = 2, children }: { size: number; stroke?: number; children: ReactNode }) => ( ); const SearchIcon = (p: { size: number; stroke?: number }) => ( ); const XIcon = (p: { size: number; stroke?: number }) => ( ); const TrashIcon = (p: { size: number; stroke?: number }) => ( ); const RestoreIcon = (p: { size: number; stroke?: number }) => ( ); /* ---------------------------------------------------------------- tiles */ /* each tile is drawn at 76px and shown at 44; the boxes are [left, top, width, height, radius, colour] */ type Box = [number, number, number, number, number | string, string]; const at = ([left, top, width, height, radius, background]: Box) => ({ left, top, width, height, borderRadius: radius, background, }); function Tile({ face, glow, children }: { face: string; glow: string; children: ReactNode }) { return (

{children}

); } function BrowseTile() { return ( ); } function GuideTile() { return ( ); } function SettingsTile() { return ( ); } function FeedbackTile() { return ( ); } type Item = { id: string; title: string; sub: string; Tile: () => ReactNode }; type Chip = { id: string; label: string; from: string; to: string }; const ALL_ITEMS: Item[] = [ { id: "browse", title: "Browse & Discover", sub: "Search features, filters, bookmarks.", Tile: BrowseTile }, { id: "guide", title: "Guided Tour & Tutorial", sub: "Account setup, onboarding, registration.", Tile: GuideTile }, { id: "settings", title: "Settings & Preferences", sub: "Profiles, settings, dark-mode switch.", Tile: SettingsTile }, { id: "feedback", title: "Feedback & Dialogs", sub: "Toasts, modals, confirmations.", Tile: FeedbackTile }, ]; const ALL_CHIPS: Chip[] = [ { id: "dialog", label: "Dialog", from: "#f7c76a", to: "#fbe0a4" }, { id: "glass", label: "Glass", from: "#e2a6f1", to: "#f1cdf7" }, { id: "components", label: "Components", from: "#a9e2a0", to: "#d4f2cd" }, ]; /* ---------------------------------------------------------------- a recent row */ function RecentRow({ item, index, active, hideDivider, onTrack, onRemove, }: { item: Item; index: number; active: boolean; hideDivider: boolean; onTrack: (id: string, el: HTMLElement) => void; onRemove: (id: string) => void; }) { const [tip, setTip] = useState(false); const isPresent = useIsPresent(); useEffect(() => { if (!active) setTip(false); }, [active]); const track = (e: { currentTarget: HTMLElement }) => onTrack(item.id, e.currentTarget); return (

{item.title}

{item.sub}

setTip(true)} onPointerLeave={() => setTip(false)} onFocus={() => setTip(true)} onBlur={() => setTip(false)} onClick={(e) => { e.stopPropagation(); onRemove(item.id); }} className={`psearch__remove${active ? "" : " psearch__remove--idle"}`} > {tip && ( )}
); } /* ---------------------------------------------------------------- the list, with one sheet that glides between rows */ type Hover = { id: string; top: number; height: number; shown: boolean; jump: boolean }; function RecentList({ items, visible, query, onRemove, }: { items: Item[]; visible: Item[]; query: string; onRemove: (id: string) => void; }) { /* jump = place the sheet without sliding, since it is invisible */ const [hover, setHover] = useState(null); const onTrack = (id: string, el: HTMLElement) => { const top = el.offsetTop; const height = el.offsetHeight; setHover((h) => h && h.shown && h.id === id && h.top === top && h.height === height ? h : { id, top, height, shown: true, jump: !h || !h.shown }, ); }; const hide = () => setHover((h) => (h && h.shown ? { ...h, shown: false, jump: false } : h)); const shownId = hover?.shown && visible.some((i) => i.id === hover.id) ? hover.id : null; const activeIndex = visible.findIndex((i) => i.id === shownId); const still = { duration: 0 }; return (
{visible.map((item, i) => ( { hide(); onRemove(id); }} /> ))} {visible.length === 0 && (
{items.length === 0 ? "No recent searches" : `No results for “${query.trim()}”`}
)}
); } /* ---------------------------------------------------------------- chips */ function CountBadge({ value }: { value: number }) { return ( {value} ); } function Chips({ chips, setChips }: { chips: Chip[]; setChips: (next: Chip[] | ((list: Chip[]) => Chip[])) => void }) { return (
setChips(ALL_CHIPS)} aria-label={`Categories, ${chips.length} selected. Restore all`} className="psearch__chip psearch__chip--lead" > Categories {chips.map((chip) => ( setChips((list) => list.filter((c) => c.id !== chip.id))} className="psearch__chip-x" > {chip.label} ))}
); } /* ---------------------------------------------------------------- the card: a search bar that morphs open */ export default function SearchCard({ theme = "light", corner = 26, rows = 3, shortcut = true }: SearchCardProps) { const count = Math.max(0, Math.min(ALL_ITEMS.length, Math.round(rows))); const startItems = useMemo(() => ALL_ITEMS.slice(0, count), [count]); const [open, setOpen] = useState(false); const [items, setItems] = useState(startItems); const [chips, setChips] = useState(ALL_CHIPS); const [query, setQuery] = useState(""); /* the hint is written for the platform once mounted, so the server and the first render agree */ const [mac, setMac] = useState(false); const inputRef = useRef(null); const rootRef = useRef(null); const radius = Math.max(0, Math.min(40, corner)); const inner = Math.max(0, radius - 6); const q = query.trim().toLowerCase(); const visible = q ? items.filter((i) => `${i.title} ${i.sub}`.toLowerCase().includes(q)) : items; useEffect(() => { setMac(/Mac|iPhone|iPad/.test(navigator.platform)); }, []); useEffect(() => { setItems(startItems); }, [startItems]); const close = () => { setOpen(false); setQuery(""); inputRef.current?.blur(); }; /* ⌘K / Ctrl K toggles from anywhere */ useEffect(() => { if (!shortcut) return; const onKey = (e: KeyboardEvent) => { if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); if (document.activeElement === inputRef.current) close(); else inputRef.current?.focus(); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, [shortcut]); /* a press outside folds it back into the bar */ useEffect(() => { if (!open) return; const onDown = (e: PointerEvent) => { const target = e.target as Element | null; if (rootRef.current?.contains(target) || target?.closest?.("[data-keep-open]")) return; close(); }; document.addEventListener("pointerdown", onDown); return () => document.removeEventListener("pointerdown", onDown); }, [open]); return (
{ if (!open) inputRef.current?.focus(); }} className={`psearch__card${open ? " psearch__card--open" : ""}`} style={{ borderRadius: radius }} > {/* the search row: the one piece both shapes share */} setOpen(true)} onChange={(e) => setQuery(e.target.value)} onKeyDown={(e) => { if (e.key !== "Escape") return; if (query) setQuery(""); else close(); }} placeholder={open ? "UI Elements, Flows..." : "Search"} aria-label="Search" aria-expanded={open} className="psearch__input" /> {open ? ( { e.stopPropagation(); if (query) { setQuery(""); inputRef.current?.focus(); } else close(); }} className="psearch__close" > ) : ( {mac ? "⌘K" : "Ctrl K"} )} {/* everything else unfolds below the bar */} {open && (

Recent { if (items.length) setItems([]); else { setItems(startItems); setChips(ALL_CHIPS); setQuery(""); } }} className="psearch__action" > {items.length ? ( "Clear all" ) : ( <> Restore )}
setItems((list) => list.filter((x) => x.id !== id))} />

)}
); } 1e:T2ee0,/* =========================================================================== Search Card. A 300-wide bar that grows into a 420-wide card. The component keeps the room the open card needs: the bar rests in its middle and rises to its top as the card opens, so opening it never pushes what sits around it. Every colour is a token, and the dark set swaps in on data-theme="dark"; the tiles and chips keep their own colours in both. =========================================================================== */ .psearch { --psearch-card: #f8f8f9; --psearch-card-ring: rgb(0 0 0 / 0.05); --psearch-card-shadow: 0 24px 60px -24px rgb(0 0 0 / 0.22), 0 2px 6px -2px rgb(0 0 0 / 0.06); --psearch-panel: rgb(255 255 255 / 0.8); --psearch-panel-border: rgb(0 0 0 / 0.06); --psearch-text: #1d1d1f; --psearch-muted: #6e6e73; --psearch-faint: #9a9aa0; --psearch-placeholder: #b0b0b6; --psearch-divider: rgb(0 0 0 / 0.065); --psearch-sheet: #ffffff; --psearch-sheet-shadow: 0 10px 26px -10px rgb(0 0 0 / 0.16), 0 1px 3px rgb(0 0 0 / 0.05); --psearch-btn: #e9e9eb; --psearch-btn-hover: #dfdfe2; --psearch-btn-fg: #55555b; --psearch-accent: #1a7fd4; --psearch-danger: #e46a2e; --psearch-tip-bg: #111113; --psearch-tip-fg: #ffffff; --psearch-kbd-bg: rgb(0 0 0 / 0.04); --psearch-kbd-border: rgb(0 0 0 / 0.08); display: flex; /* at rest the bar sits in the middle; open, the card rises to the top (Motion animates the move) */ align-items: center; justify-content: center; width: 100%; color: var(--psearch-text); font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .psearch--open { align-items: flex-start; } .psearch[data-theme="dark"] { --psearch-card: #161619; --psearch-card-ring: rgb(255 255 255 / 0.07); --psearch-card-shadow: 0 30px 70px -24px rgb(0 0 0 / 0.8), 0 2px 6px -2px rgb(0 0 0 / 0.5); --psearch-panel: #1d1d21; --psearch-panel-border: rgb(255 255 255 / 0.06); --psearch-text: #f2f2f4; --psearch-muted: #a1a1aa; --psearch-faint: #74747c; --psearch-placeholder: #5d5d65; --psearch-divider: rgb(255 255 255 / 0.06); --psearch-sheet: #29292e; --psearch-sheet-shadow: 0 12px 28px -10px rgb(0 0 0 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.05); --psearch-btn: #26262b; --psearch-btn-hover: #303036; --psearch-btn-fg: #c4c4ca; --psearch-accent: #4ea6ff; --psearch-danger: #f28a55; --psearch-tip-bg: #f2f2f4; --psearch-tip-fg: #111113; --psearch-kbd-bg: rgb(255 255 255 / 0.05); --psearch-kbd-border: rgb(255 255 255 / 0.1); } .psearch *, .psearch *::before, .psearch *::after { box-sizing: border-box; } .psearch :where(button) { margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; } /* ---------------------------------------------------------------- the morphing card */ /* the shadow lives here rather than being animated per frame, and the layer is promoted so the morph runs on the compositor */ .psearch__card { position: relative; width: min(300px, 100%); overflow: hidden; background: var(--psearch-card); box-shadow: var(--psearch-card-shadow), 0 0 0 1px var(--psearch-card-ring); cursor: text; will-change: transform; transition: background-color 0.3s ease, box-shadow 0.3s ease; } .psearch__card--open { width: min(420px, 100%); cursor: auto; } .psearch__bar { display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 10px 0 16px; } .psearch__glass { display: flex; flex-shrink: 0; color: var(--psearch-faint); transition: color 0.2s ease; } .psearch__card--open .psearch__glass { color: var(--psearch-text); } .psearch__input { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--psearch-text); caret-color: var(--psearch-accent); font: inherit; /* 16px would stop iOS zooming in; the design's 15 holds everywhere else */ font-size: 15px; outline: none; -webkit-appearance: none; appearance: none; } .psearch__input::placeholder { color: var(--psearch-placeholder); opacity: 1; } .psearch__input::-webkit-search-cancel-button { display: none; } .psearch__close { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; background: var(--psearch-btn); color: var(--psearch-btn-fg); outline: none; transition: background-color 0.2s ease; } .psearch__kbd { flex-shrink: 0; margin-right: 4px; padding: 2px 6px; border: 1px solid var(--psearch-kbd-border); border-radius: 6px; background: var(--psearch-kbd-bg); color: var(--psearch-faint); font-family: inherit; font-size: 11px; font-weight: 500; line-height: 16px; } /* ---------------------------------------------------------------- the body */ .psearch__body { width: 100%; } .psearch__panel { position: relative; margin: 0 6px; overflow: hidden; border: 1px solid var(--psearch-panel-border); background: var(--psearch-panel); } .psearch__head { display: flex; align-items: center; justify-content: space-between; height: 40px; padding: 0 16px; } .psearch__head-label { color: var(--psearch-faint); font-size: 12.5px; font-weight: 500; } .psearch__action { display: flex; align-items: center; gap: 4px; padding: 2px 6px; border-radius: 6px; color: var(--psearch-accent); font-size: 12.5px; font-weight: 500; outline: none; transition: opacity 0.2s ease; } .psearch__foot { height: 6px; } /* ---------------------------------------------------------------- the list */ .psearch__list { position: relative; margin: 0; padding: 0; list-style: none; } .psearch__sheet { position: absolute; top: 0; right: 0; left: 0; z-index: 2; background: var(--psearch-sheet); box-shadow: var(--psearch-sheet-shadow); pointer-events: none; } .psearch__row { position: relative; overflow: hidden; list-style: none; } .psearch__row--leaving { pointer-events: none; } .psearch__divider { position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--psearch-divider); pointer-events: none; transition: opacity 0.2s ease; } .psearch__row-body { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 16px; cursor: pointer; } .psearch__row-text { flex: 1; min-width: 0; } .psearch__row-title, .psearch__row-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .psearch__row-title { color: var(--psearch-text); font-size: 14.5px; font-weight: 500; line-height: 20px; letter-spacing: -0.01em; } .psearch__row-sub { margin-top: 2px; color: var(--psearch-muted); font-size: 13px; line-height: 18px; } .psearch__remove-slot { position: relative; flex-shrink: 0; width: 32px; height: 32px; } .psearch__remove { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--psearch-danger); outline: none; transition: background-color 0.2s ease; } .psearch__remove--idle { pointer-events: none; } .psearch__tip { position: absolute; top: 50%; right: calc(100% + 8px); z-index: 10; /* translate, not transform: Motion owns the transform for the tooltip's slide and scale */ translate: 0 -50%; padding: 4px 8px; border-radius: 6px; background: var(--psearch-tip-bg); color: var(--psearch-tip-fg); box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); font-size: 11.5px; font-weight: 500; line-height: 16px; white-space: nowrap; pointer-events: none; } .psearch__tip-arrow { position: absolute; top: 50%; left: 100%; width: 8px; height: 8px; border-radius: 1px; background: var(--psearch-tip-bg); transform: translate(-4px, -50%) rotate(45deg); } .psearch__empty { overflow: hidden; list-style: none; } .psearch__empty > div { padding: 28px 16px; border-top: 1px solid var(--psearch-divider); color: var(--psearch-faint); font-size: 13px; text-align: center; } /* ---------------------------------------------------------------- tiles: drawn at 76px, shown at 44 */ .psearch__tile { flex-shrink: 0; width: 44px; height: 44px; } .psearch__tile-art { position: relative; width: 76px; height: 76px; overflow: hidden; border-radius: 20px; transform: scale(0.5789); transform-origin: 0 0; } .psearch__tile-art > span { position: absolute; } .psearch__window { overflow: hidden; } .psearch__window-bar { display: flex; align-items: center; gap: 4px; height: 16px; padding-left: 7px; background: #7ec0fb; } .psearch__window-bar i { display: block; width: 6px; height: 6px; border-radius: 999px; background: #1f5fd6; } .psearch__window-line { display: block; width: 100%; height: 3px; background: #a8d2fb; } .psearch__switch { display: flex; align-items: center; } .psearch__switch--on { justify-content: flex-end; padding-right: 3px; } .psearch__switch--off { padding-left: 3px; } .psearch__switch i { display: block; width: 16px; height: 16px; border-radius: 999px; } .psearch__switch--on i { background: #2fa83f; box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); } .psearch__switch--off i { border: 3px solid #3fbf50; background: #ffffff; } /* ---------------------------------------------------------------- chips */ .psearch__chips { display: flex; gap: 8px; padding: 14px 16px 16px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent calc(100% - 12px)); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent calc(100% - 12px)); } .psearch__chips::-webkit-scrollbar { display: none; } .psearch__chip { display: flex; flex-shrink: 0; align-items: center; gap: 8px; height: 34px; padding: 0 14px 0 5px; border-radius: 999px; box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.6); color: #1d1d1f; font-size: 13.5px; font-weight: 500; outline: none; transition: filter 0.2s ease; } .psearch__chip--lead { background: linear-gradient(90deg, #f39a72 0%, #f7b48c 100%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.55); } .psearch__count, .psearch__chip-x { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 999px; box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.9), 0 1px 2px rgb(0 0 0 / 0.08); } .psearch__count { position: relative; overflow: hidden; background: rgb(255 255 255 / 0.8); color: #3a2a20; font-size: 12.5px; font-weight: 600; } .psearch__chip-x { background: rgb(255 255 255 / 0.75); color: #1d1d1f; outline: none; transition: background-color 0.2s ease; } /* ---------------------------------------------------------------- hover and focus */ @media (hover: hover) { .psearch__close:hover { background: var(--psearch-btn-hover); } .psearch__action:hover { opacity: 0.7; } .psearch__remove:hover { background: color-mix(in srgb, var(--psearch-danger) 12%, transparent); } .psearch__chip:hover { filter: brightness(1.04); } .psearch__chip-x:hover { background: #ffffff; } } .psearch__close:focus-visible, .psearch__action:focus-visible { box-shadow: 0 0 0 2px var(--psearch-accent); } .psearch__remove:focus-visible { box-shadow: 0 0 0 2px color-mix(in srgb, var(--psearch-danger) 40%, transparent); } .psearch__chip:focus-visible, .psearch__chip-x:focus-visible { box-shadow: 0 0 0 2px rgb(0 0 0 / 0.2); } @media (prefers-reduced-motion: reduce) { .psearch__card, .psearch__glass, .psearch__divider { transition: none; } } 14:[[["$","script","0",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"SoftwareSourceCode\",\"name\":\"Search Card — Pin UI\",\"description\":\"A centred search bar that rises and morphs open into a card of recent searches. A small search pill with a ⌘K hint, resting in the middle of the stage. Focus it and it rises as the same surface grows into a card: a panel of recent searches unfolds under it, each with its own drawn tile, and a row of\",\"url\":\"https://www.pinui.xyz/components/search-card\",\"codeRepository\":\"https://github.com/Rachit315/Pin-UI\",\"programmingLanguage\":\"TypeScript\",\"runtimePlatform\":\"React\",\"author\":{\"@id\":\"https://www.pinui.xyz/#organization\"},\"isPartOf\":{\"@id\":\"https://www.pinui.xyz/#software\"},\"license\":\"https://opensource.org/licenses/MIT\"}"}}],["$","script","1",{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"{\"@context\":\"https://schema.org\",\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://www.pinui.xyz\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Components\",\"item\":\"https://www.pinui.xyz/components\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Search Card\",\"item\":\"https://www.pinui.xyz/components/search-card\"}]}"}}]],["$","$L1c",null,{"entry":{"slug":"search-card","category":"controls","name":"Search Card","tagline":"A centred search bar that rises and morphs open into a card of recent searches.","blurb":"A small search pill with a ⌘K hint, resting in the middle of the stage. Focus it and it rises as the same surface grows into a card: a panel of recent searches unfolds under it, each with its own drawn tile, and a row of category chips below. One sheet glides between the rows under the pointer, a trash button slides in with a tooltip, and the chip count rolls as you remove them.","highlights":["Rises and morphs into a card","⌘K from anywhere","One gliding hover sheet","Rolling chip count"],"clip":"/clips/loop/search-card.mp4","poster":"/clips/loop/search-card.jpg","sound":false,"zoom":1,"stage":"#ececef","clipStage":"#ececef","stageDark":"#0b0b0d","usage":"import SearchCard from \"@/components/library/SearchCard\";\n\n","props":[{"name":"theme","type":"\"light\" | \"dark\"","fallback":"\"light\"","note":"A pale card on a soft grey, or a graphite one on near-black. The tiles and chips keep their own colours in both."},{"name":"corner","type":"number","fallback":"26","note":"The card's corner radius, 0–40. The panel inside follows it, 6px tighter."},{"name":"rows","type":"number","fallback":"3","note":"How many recent searches it starts with, up to four."},{"name":"shortcut","type":"boolean","fallback":"true","note":"Listen for ⌘K / Ctrl K anywhere on the page to open and close it."}],"files":[{"name":"SearchCard.tsx","lang":"tsx"},{"name":"search-card.css","lang":"css"}],"info":{"paragraphs":["The bar and the card are one surface with a Motion layout animation between a 300px pill and a 420px card, on an iOS sheet curve. At rest the bar sits in the middle of the room the open card needs; focused, it lifts off and rises to the top on a soft-start, long-settle curve while it widens, and everything below the search row unfolds and fades in a beat later. Closing folds it all back up and lowers it into the middle again, so the page around it never moves.","There is one hover sheet for the whole list rather than one per row: it glides to whichever row the pointer or focus is on, appears in place when it was hidden rather than sliding in from somewhere stale, and hides the dividers either side of it. The trash button slides in on that row with a delayed tooltip; removing a row collapses its height, and Clear all and Restore swap with a roll.","Typing filters the recent searches by title and description, with an empty state that names what was searched. Escape clears the query first, then closes; a press anywhere outside folds it back into the bar, and ⌘K / Ctrl K opens and closes it from anywhere on the page. The motion is eased tweens throughout — no springs — and it follows reduced motion."]},"origin":{"label":"Folder · search card"},"isNew":true},"panes":[{"name":"SearchCard.tsx","lang":"tsx","code":"$1d"},{"name":"search-card.css","lang":"css","code":"$1e"}],"registryUrl":"https://www.pinui.xyz/r/search-card.json"}]]

Search Card — Pin UI Component