@krizaka/ui 2.3.0 → 2.4.0

package/dist/pagination.d.ts

@@ -0,0 +1,141 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const pagination: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            pages?: tailwind_variants.ClassValue;
+            compact?: tailwind_variants.ClassValue;
+            edge?: tailwind_variants.ClassValue;
+            ellipsis?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            size?: tailwind_variants.ClassValue;
+            select?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            pages?: tailwind_variants.ClassValue;
+            compact?: tailwind_variants.ClassValue;
+            edge?: tailwind_variants.ClassValue;
+            ellipsis?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            size?: tailwind_variants.ClassValue;
+            select?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    pages: string;
+    compact: string;
+    item: string;
+    edge: string;
+    ellipsis: string;
+    status: string;
+    size: string;
+    select: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            list?: tailwind_variants.ClassValue;
+            pages?: tailwind_variants.ClassValue;
+            compact?: tailwind_variants.ClassValue;
+            edge?: tailwind_variants.ClassValue;
+            ellipsis?: tailwind_variants.ClassValue;
+            status?: tailwind_variants.ClassValue;
+            size?: tailwind_variants.ClassValue;
+            select?: tailwind_variants.ClassValue;
+            item?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    list: string;
+    pages: string;
+    compact: string;
+    item: string;
+    edge: string;
+    ellipsis: string;
+    status: string;
+    size: string;
+    select: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    list: string;
+    pages: string;
+    compact: string;
+    item: string;
+    edge: string;
+    ellipsis: string;
+    status: string;
+    size: string;
+    select: string;
+}>>;
+type PaginationLabels = {
+    /** The accessible name of the navigation ("Pagination", "Pages of results"). */
+    nav: string;
+    /** The previous-page control. */
+    previous: string;
+    /** The next-page control. */
+    next: string;
+    /** The accessible name of a page number: `(3) => "Page 3"`. */
+    page: (page: number) => string;
+    /** The folded form, in a narrow container: `(3, 12) => "Page 3 of 12"`. */
+    compact: (page: number, pageCount: number) => string;
+    /** The label of the page-size select ("Rows per page"). */
+    pageSize: string;
+};
+/** The English words, for a quick start — pass your translations through `labels`. */
+declare const paginationLabels: PaginationLabels;
+/**
+ * The pages to show: the first and last `boundaries`, the current page and its `siblings`, and `"…"` where pages are
+ * skipped. A gap of a single page shows that page instead of an ellipsis; few pages are all shown.
+ */
+declare function pageRange(page: number, pageCount: number, siblings?: number, boundaries?: number): (number | "…")[];
+type PaginationProps = Omit<React.ComponentProps<"nav">, "children"> & {
+    /** Pages mode: the current page, from 1. */
+    page?: number;
+    /** Pages mode: how many pages there are. Without it, the pagination is in cursor mode. */
+    pageCount?: number;
+    /** Called with the page asked for (buttons). Ignored for the pages `getHref` turns into links. */
+    onPageChange?: (page: number) => void;
+    /** The address of a page: the pages become links (crawlable, shareable, the state in the URL). */
+    getHref?: (page: number) => string;
+    /** Cursor mode: whether there is a previous page. */
+    hasPrevious?: boolean;
+    /** Cursor mode: whether there is a next page. */
+    hasNext?: boolean;
+    /** Cursor mode: called by the previous control. */
+    onPrevious?: () => void;
+    /** Cursor mode: called by the next control. */
+    onNext?: () => void;
+    /** Pages shown on each side of the current one. Default 1. */
+    siblings?: number;
+    /** Pages always shown at each end. Default 1. */
+    boundaries?: number;
+    /** A text beside the controls, read as is: "41–60 of 1,284", "12 results". */
+    status?: React.ReactNode;
+    /** The page size, with `pageSizeOptions` and `onPageSizeChange`: a select of rows per page. */
+    pageSize?: number;
+    /** The sizes offered (`[10, 20, 50]`). */
+    pageSizeOptions?: readonly number[];
+    /** Called with the size chosen. */
+    onPageSizeChange?: (size: number) => void;
+    /** Disables every control (a page is loading). */
+    disabled?: boolean;
+    /** The words, passed translated; English by default. */
+    labels?: Partial<PaginationLabels>;
+};
+/** Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor. */
+declare function Pagination({ page, pageCount, onPageChange, getHref, hasPrevious, hasNext, onPrevious, onNext, siblings, boundaries, status, pageSize, pageSizeOptions, onPageSizeChange, disabled, labels: given, className, ...props }: PaginationProps): React.JSX.Element;
+
+export { Pagination, type PaginationLabels, type PaginationProps, pageRange, pagination, paginationLabels };

package/dist/pagination.js

@@ -0,0 +1,165 @@
+// src/pagination/pagination.tsx
+import { tv } from "tailwind-variants";
+
+// src/glyphs.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function Glyph({ className = "h-4 w-4", fill, children }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      className,
+      fill: fill ? "currentColor" : "none",
+      stroke: fill ? "none" : "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      focusable: "false",
+      children
+    }
+  );
+}
+var ChevronGlyph = ({ direction = "down", ...p }) => /* @__PURE__ */ jsx(Glyph, { ...p, children: /* @__PURE__ */ jsx("path", { d: { left: "m15 6-6 6 6 6", right: "m9 6 6 6-6 6", up: "m6 15 6-6 6 6", down: "m6 9 6 6 6-6" }[direction] }) });
+
+// src/pagination/pagination.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var pagination = tv({
+  slots: {
+    root: "@container flex w-full flex-wrap items-center justify-between gap-3 text-sm",
+    list: "flex items-center gap-1",
+    pages: "hidden items-center gap-1 @md:flex",
+    compact: "px-2 text-xs font-semibold tabular-nums text-fg-secondary @md:hidden",
+    item: "inline-flex h-9 min-w-9 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold tabular-nums text-fg-secondary transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring aria-[current=page]:bg-accent aria-[current=page]:text-on-accent aria-[current=page]:hover:bg-accent aria-disabled:pointer-events-none aria-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40",
+    edge: "border border-border-default bg-surface-1 px-3",
+    ellipsis: "inline-flex h-9 min-w-6 items-end justify-center pb-2 text-fg-muted",
+    status: "text-xs text-fg-secondary tabular-nums",
+    size: "flex items-center gap-2 text-xs text-fg-secondary",
+    select: "h-9 rounded-lg border border-border-default bg-surface-2 px-2 text-sm text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring"
+  }
+});
+var paginationLabels = {
+  nav: "Pagination",
+  previous: "Previous",
+  next: "Next",
+  page: (page) => `Page ${page}`,
+  compact: (page, count) => `Page ${page} of ${count}`,
+  pageSize: "Rows per page"
+};
+function pageRange(page, pageCount, siblings = 1, boundaries = 1) {
+  if (pageCount <= 2 * boundaries + 2 * siblings + 3) return Array.from({ length: Math.max(0, pageCount) }, (_, i) => i + 1);
+  const pages = /* @__PURE__ */ new Set();
+  for (let i = 1; i <= Math.min(boundaries, pageCount); i += 1) pages.add(i);
+  for (let i = Math.max(1, pageCount - boundaries + 1); i <= pageCount; i += 1) pages.add(i);
+  for (let i = Math.max(1, page - siblings); i <= Math.min(pageCount, page + siblings); i += 1) pages.add(i);
+  const sorted = [...pages].sort((a, b) => a - b);
+  const out = [];
+  sorted.forEach((n, i) => {
+    const prev = sorted[i - 1];
+    if (prev !== void 0 && n - prev === 2) out.push(prev + 1);
+    else if (prev !== void 0 && n - prev > 2) out.push("\u2026");
+    out.push(n);
+  });
+  return out;
+}
+function Item({ href, onClick, disabled, current, label, className, children }) {
+  const common = { "aria-label": label, "aria-current": current ? "page" : void 0, className };
+  if (href && !disabled) {
+    return /* @__PURE__ */ jsx2("a", { href, onClick, ...common, children });
+  }
+  if (href) {
+    return /* @__PURE__ */ jsx2("a", { role: "link", "aria-disabled": true, ...common, children });
+  }
+  return /* @__PURE__ */ jsx2("button", { type: "button", onClick, disabled, ...common, children });
+}
+function Pagination({
+  page = 1,
+  pageCount,
+  onPageChange,
+  getHref,
+  hasPrevious,
+  hasNext,
+  onPrevious,
+  onNext,
+  siblings = 1,
+  boundaries = 1,
+  status,
+  pageSize,
+  pageSizeOptions,
+  onPageSizeChange,
+  disabled,
+  labels: given,
+  className,
+  ...props
+}) {
+  const s = pagination();
+  const labels = { ...paginationLabels, ...given };
+  const paged = pageCount !== void 0;
+  const count = Math.max(1, pageCount ?? 1);
+  const current = Math.min(Math.max(1, page), count);
+  const canPrevious = paged ? current > 1 : Boolean(hasPrevious);
+  const canNext = paged ? current < count : Boolean(hasNext);
+  const go = (target) => () => onPageChange?.(target);
+  const href = (target) => paged && getHref ? getHref(target) : void 0;
+  return /* @__PURE__ */ jsxs2("nav", { "aria-label": labels.nav, className: s.root({ className }), ...props, children: [
+    status !== void 0 || pageSizeOptions ? /* @__PURE__ */ jsxs2("div", { className: "flex flex-wrap items-center gap-4", children: [
+      status !== void 0 && /* @__PURE__ */ jsx2("p", { className: s.status(), children: status }),
+      pageSizeOptions && pageSize !== void 0 && /* @__PURE__ */ jsxs2("label", { className: s.size(), children: [
+        labels.pageSize,
+        /* @__PURE__ */ jsx2(
+          "select",
+          {
+            className: s.select(),
+            value: pageSize,
+            disabled,
+            onChange: (event) => onPageSizeChange?.(Number(event.target.value)),
+            children: pageSizeOptions.map((size) => /* @__PURE__ */ jsx2("option", { value: size, children: size }, size))
+          }
+        )
+      ] })
+    ] }) : null,
+    /* @__PURE__ */ jsxs2("ul", { className: s.list(), children: [
+      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+        Item,
+        {
+          href: href(current - 1),
+          onClick: paged ? go(current - 1) : onPrevious,
+          disabled: disabled || !canPrevious,
+          label: labels.previous,
+          className: s.item({ className: s.edge() }),
+          children: [
+            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "left" }),
+            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.previous })
+          ]
+        }
+      ) }),
+      paged && /* @__PURE__ */ jsxs2(Fragment, { children: [
+        /* @__PURE__ */ jsx2("li", { className: s.pages(), children: /* @__PURE__ */ jsx2("ul", { className: "contents", children: pageRange(current, count, siblings, boundaries).map(
+          (n, i) => n === "\u2026" ? /* @__PURE__ */ jsx2("li", { "aria-hidden": true, className: s.ellipsis(), children: "\u2026" }, `gap-${i}`) : /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsx2(Item, { href: href(n), onClick: go(n), disabled, current: n === current, label: labels.page(n), className: s.item(), children: n }) }, n)
+        ) }) }),
+        /* @__PURE__ */ jsx2("li", { className: s.compact(), children: labels.compact(current, count) })
+      ] }),
+      /* @__PURE__ */ jsx2("li", { children: /* @__PURE__ */ jsxs2(
+        Item,
+        {
+          href: href(current + 1),
+          onClick: paged ? go(current + 1) : onNext,
+          disabled: disabled || !canNext,
+          label: labels.next,
+          className: s.item({ className: s.edge() }),
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: "hidden @lg:inline", children: labels.next }),
+            /* @__PURE__ */ jsx2(ChevronGlyph, { direction: "right" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+}
+export {
+  Pagination,
+  pageRange,
+  pagination,
+  paginationLabels
+};
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pagination/pagination.tsx","../src/glyphs.tsx"],"sourcesContent":["// Server-safe: no hook, no context. A `<nav>` named by `labels.nav`; the current page is `aria-current=\"page\"`.\n// Two modes: pages (`page` + `pageCount`: numbers with ellipses, which fold into \"Page 3 of 12\" in a narrow container)\n// and cursor (`hasPrevious` / `hasNext`: an API that only knows the next and previous pages). Links (`getHref`) when\n// the page lives in the address — the right default for a list a search engine or a shared link should reach — or\n// buttons (`onPageChange`).\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { ChevronGlyph } from \"../glyphs\";\n\nexport const pagination = tv({\n  slots: {\n    root: \"@container flex w-full flex-wrap items-center justify-between gap-3 text-sm\",\n    list: \"flex items-center gap-1\",\n    pages: \"hidden items-center gap-1 @md:flex\",\n    compact: \"px-2 text-xs font-semibold tabular-nums text-fg-secondary @md:hidden\",\n    item:\n      \"inline-flex h-9 min-w-9 select-none items-center justify-center gap-1.5 rounded-lg px-2.5 text-sm font-semibold tabular-nums text-fg-secondary \" +\n      \"transition-colors hover:bg-surface-2 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring \" +\n      \"aria-[current=page]:bg-accent aria-[current=page]:text-on-accent aria-[current=page]:hover:bg-accent \" +\n      \"aria-disabled:pointer-events-none aria-disabled:opacity-40 disabled:pointer-events-none disabled:opacity-40\",\n    edge: \"border border-border-default bg-surface-1 px-3\",\n    ellipsis: \"inline-flex h-9 min-w-6 items-end justify-center pb-2 text-fg-muted\",\n    status: \"text-xs text-fg-secondary tabular-nums\",\n    size: \"flex items-center gap-2 text-xs text-fg-secondary\",\n    select:\n      \"h-9 rounded-lg border border-border-default bg-surface-2 px-2 text-sm text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n  },\n});\n\nexport type PaginationLabels = {\n  /** The accessible name of the navigation (\"Pagination\", \"Pages of results\"). */\n  nav: string;\n  /** The previous-page control. */\n  previous: string;\n  /** The next-page control. */\n  next: string;\n  /** The accessible name of a page number: `(3) => \"Page 3\"`. */\n  page: (page: number) => string;\n  /** The folded form, in a narrow container: `(3, 12) => \"Page 3 of 12\"`. */\n  compact: (page: number, pageCount: number) => string;\n  /** The label of the page-size select (\"Rows per page\"). */\n  pageSize: string;\n};\n\n/** The English words, for a quick start — pass your translations through `labels`. */\nexport const paginationLabels: PaginationLabels = {\n  nav: \"Pagination\",\n  previous: \"Previous\",\n  next: \"Next\",\n  page: (page) => `Page ${page}`,\n  compact: (page, count) => `Page ${page} of ${count}`,\n  pageSize: \"Rows per page\",\n};\n\n/**\n * The pages to show: the first and last `boundaries`, the current page and its `siblings`, and `\"…\"` where pages are\n * skipped. A gap of a single page shows that page instead of an ellipsis; few pages are all shown.\n */\nexport function pageRange(page: number, pageCount: number, siblings = 1, boundaries = 1): (number | \"…\")[] {\n  // Few enough pages to show them all in the room the folded form takes: no ellipsis.\n  if (pageCount <= 2 * boundaries + 2 * siblings + 3) return Array.from({ length: Math.max(0, pageCount) }, (_, i) => i + 1);\n  const pages = new Set<number>();\n  for (let i = 1; i <= Math.min(boundaries, pageCount); i += 1) pages.add(i);\n  for (let i = Math.max(1, pageCount - boundaries + 1); i <= pageCount; i += 1) pages.add(i);\n  for (let i = Math.max(1, page - siblings); i <= Math.min(pageCount, page + siblings); i += 1) pages.add(i);\n  const sorted = [...pages].sort((a, b) => a - b);\n  const out: (number | \"…\")[] = [];\n  sorted.forEach((n, i) => {\n    const prev = sorted[i - 1];\n    if (prev !== undefined && n - prev === 2) out.push(prev + 1);\n    else if (prev !== undefined && n - prev > 2) out.push(\"…\");\n    out.push(n);\n  });\n  return out;\n}\n\nexport type PaginationProps = Omit<React.ComponentProps<\"nav\">, \"children\"> & {\n  /** Pages mode: the current page, from 1. */\n  page?: number;\n  /** Pages mode: how many pages there are. Without it, the pagination is in cursor mode. */\n  pageCount?: number;\n  /** Called with the page asked for (buttons). Ignored for the pages `getHref` turns into links. */\n  onPageChange?: (page: number) => void;\n  /** The address of a page: the pages become links (crawlable, shareable, the state in the URL). */\n  getHref?: (page: number) => string;\n  /** Cursor mode: whether there is a previous page. */\n  hasPrevious?: boolean;\n  /** Cursor mode: whether there is a next page. */\n  hasNext?: boolean;\n  /** Cursor mode: called by the previous control. */\n  onPrevious?: () => void;\n  /** Cursor mode: called by the next control. */\n  onNext?: () => void;\n  /** Pages shown on each side of the current one. Default 1. */\n  siblings?: number;\n  /** Pages always shown at each end. Default 1. */\n  boundaries?: number;\n  /** A text beside the controls, read as is: \"41–60 of 1,284\", \"12 results\". */\n  status?: React.ReactNode;\n  /** The page size, with `pageSizeOptions` and `onPageSizeChange`: a select of rows per page. */\n  pageSize?: number;\n  /** The sizes offered (`[10, 20, 50]`). */\n  pageSizeOptions?: readonly number[];\n  /** Called with the size chosen. */\n  onPageSizeChange?: (size: number) => void;\n  /** Disables every control (a page is loading). */\n  disabled?: boolean;\n  /** The words, passed translated; English by default. */\n  labels?: Partial<PaginationLabels>;\n};\n\ntype ItemProps = {\n  href?: string;\n  onClick?: () => void;\n  disabled?: boolean;\n  current?: boolean;\n  label: string;\n  className: string;\n  children: React.ReactNode;\n};\n\nfunction Item({ href, onClick, disabled, current, label, className, children }: ItemProps) {\n  const common = { \"aria-label\": label, \"aria-current\": current ? (\"page\" as const) : undefined, className };\n  if (href && !disabled) {\n    return (\n      <a href={href} onClick={onClick} {...common}>\n        {children}\n      </a>\n    );\n  }\n  if (href) {\n    return (\n      <a role=\"link\" aria-disabled {...common}>\n        {children}\n      </a>\n    );\n  }\n  return (\n    <button type=\"button\" onClick={onClick} disabled={disabled} {...common}>\n      {children}\n    </button>\n  );\n}\n\n/** Moves through a long list: page numbers (folded on a narrow screen) or previous / next on a cursor. */\nexport function Pagination({\n  page = 1,\n  pageCount,\n  onPageChange,\n  getHref,\n  hasPrevious,\n  hasNext,\n  onPrevious,\n  onNext,\n  siblings = 1,\n  boundaries = 1,\n  status,\n  pageSize,\n  pageSizeOptions,\n  onPageSizeChange,\n  disabled,\n  labels: given,\n  className,\n  ...props\n}: PaginationProps) {\n  const s = pagination();\n  const labels = { ...paginationLabels, ...given };\n  const paged = pageCount !== undefined;\n  const count = Math.max(1, pageCount ?? 1);\n  const current = Math.min(Math.max(1, page), count);\n  const canPrevious = paged ? current > 1 : Boolean(hasPrevious);\n  const canNext = paged ? current < count : Boolean(hasNext);\n  const go = (target: number) => () => onPageChange?.(target);\n  const href = (target: number) => (paged && getHref ? getHref(target) : undefined);\n\n  return (\n    <nav aria-label={labels.nav} className={s.root({ className })} {...props}>\n      {status !== undefined || pageSizeOptions ? (\n        <div className=\"flex flex-wrap items-center gap-4\">\n          {status !== undefined && <p className={s.status()}>{status}</p>}\n          {pageSizeOptions && pageSize !== undefined && (\n            <label className={s.size()}>\n              {labels.pageSize}\n              <select\n                className={s.select()}\n                value={pageSize}\n                disabled={disabled}\n                onChange={(event) => onPageSizeChange?.(Number(event.target.value))}\n              >\n                {pageSizeOptions.map((size) => (\n                  <option key={size} value={size}>\n                    {size}\n                  </option>\n                ))}\n              </select>\n            </label>\n          )}\n        </div>\n      ) : null}\n      <ul className={s.list()}>\n        <li>\n          <Item\n            href={href(current - 1)}\n            onClick={paged ? go(current - 1) : onPrevious}\n            disabled={disabled || !canPrevious}\n            label={labels.previous}\n            className={s.item({ className: s.edge() })}\n          >\n            <ChevronGlyph direction=\"left\" />\n            <span className=\"hidden @lg:inline\">{labels.previous}</span>\n          </Item>\n        </li>\n        {paged && (\n          <>\n            <li className={s.pages()}>\n              <ul className=\"contents\">\n                {pageRange(current, count, siblings, boundaries).map((n, i) =>\n                  n === \"…\" ? (\n                    <li key={`gap-${i}`} aria-hidden className={s.ellipsis()}>\n                      …\n                    </li>\n                  ) : (\n                    <li key={n}>\n                      <Item href={href(n)} onClick={go(n)} disabled={disabled} current={n === current} label={labels.page(n)} className={s.item()}>\n                        {n}\n                      </Item>\n                    </li>\n                  ),\n                )}\n              </ul>\n            </li>\n            <li className={s.compact()}>\n              {labels.compact(current, count)}\n            </li>\n          </>\n        )}\n        <li>\n          <Item\n            href={href(current + 1)}\n            onClick={paged ? go(current + 1) : onNext}\n            disabled={disabled || !canNext}\n            label={labels.next}\n            className={s.item({ className: s.edge() })}\n          >\n            <span className=\"hidden @lg:inline\">{labels.next}</span>\n            <ChevronGlyph direction=\"right\" />\n          </Item>\n        </li>\n      </ul>\n    </nav>\n  );\n}\n","// The small line glyphs the data and media primitives draw (play, volume, search, chevrons…): decorative, 24-unit\n// box, `currentColor`, sized by the caller's class. Shared by the entries that need them; never exported on its own —\n// a product draws its own icons with @krizaka/icons.\nimport type * as React from \"react\";\n\ntype GlyphProps = { className?: string };\n\nfunction Glyph({ className = \"h-4 w-4\", fill, children }: GlyphProps & { fill?: boolean; children: React.ReactNode }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      className={className}\n      fill={fill ? \"currentColor\" : \"none\"}\n      stroke={fill ? \"none\" : \"currentColor\"}\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden\n      focusable=\"false\"\n    >\n      {children}\n    </svg>\n  );\n}\n\nexport const PlayGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <path d=\"M8 5.5v13a1 1 0 0 0 1.5.86l10.4-6.5a1 1 0 0 0 0-1.72L9.5 4.64A1 1 0 0 0 8 5.5Z\" />\n  </Glyph>\n);\nexport const PauseGlyph = (p: GlyphProps) => (\n  <Glyph {...p} fill>\n    <rect x=\"6\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n    <rect x=\"14\" y=\"5\" width=\"4\" height=\"14\" rx=\"1\" />\n  </Glyph>\n);\nexport const VolumeGlyph = ({ muted, ...p }: GlyphProps & { muted?: boolean }) => (\n  <Glyph {...p}>\n    <path d=\"M11 5 6 9H3v6h3l5 4V5Z\" />\n    {muted ? <path d=\"m22 9-6 6m0-6 6 6\" /> : <path d=\"M15.5 8.5a5 5 0 0 1 0 7M18.5 5.5a9 9 0 0 1 0 13\" />}\n  </Glyph>\n);\nexport const FullscreenGlyph = ({ exit, ...p }: GlyphProps & { exit?: boolean }) => (\n  <Glyph {...p}>\n    {exit ? <path d=\"M9 4v5H4m11-5v5h5M9 20v-5H4m11 5v-5h5\" /> : <path d=\"M4 9V4h5m6 0h5v5M4 15v5h5m11-5v5h-5\" />}\n  </Glyph>\n);\nexport const CaptionsGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <path d=\"M10 10.5a2 2 0 1 0 0 3M17 10.5a2 2 0 1 0 0 3\" />\n  </Glyph>\n);\nexport const PipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"2\" />\n    <rect x=\"12\" y=\"12\" width=\"6\" height=\"4\" rx=\"1\" />\n  </Glyph>\n);\nexport const SearchGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <circle cx=\"11\" cy=\"11\" r=\"7\" />\n    <path d=\"m20 20-3.5-3.5\" />\n  </Glyph>\n);\nexport const CloseGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M18 6 6 18M6 6l12 12\" />\n  </Glyph>\n);\nexport const ChevronGlyph = ({ direction = \"down\", ...p }: GlyphProps & { direction?: \"left\" | \"right\" | \"up\" | \"down\" }) => (\n  <Glyph {...p}>\n    <path d={{ left: \"m15 6-6 6 6 6\", right: \"m9 6 6 6-6 6\", up: \"m6 15 6-6 6 6\", down: \"m6 9 6 6 6-6\" }[direction]} />\n  </Glyph>\n);\nexport const CheckGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M20 6 9 17l-5-5\" />\n  </Glyph>\n);\nexport const PlusGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 5v14M5 12h14\" />\n  </Glyph>\n);\nexport const CalendarGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2\" />\n    <path d=\"M3 10h18M8 3v4M16 3v4\" />\n  </Glyph>\n);\nexport const UploadGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M12 16V4m0 0L7 9m5-5 5 5\" />\n    <path d=\"M4 16v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2\" />\n  </Glyph>\n);\nexport const FileGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8l-5-5Z\" />\n    <path d=\"M14 3v5h5\" />\n  </Glyph>\n);\nexport const CameraGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 8h3l2-3h6l2 3h3a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1Z\" />\n    <circle cx=\"12\" cy=\"13.5\" r=\"3.5\" />\n  </Glyph>\n);\nexport const FlipGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 0 1 14-5.3M20 12a8 8 0 0 1-14 5.3\" />\n    <path d=\"M18 3v4h-4M6 21v-4h4\" />\n  </Glyph>\n);\nexport const RetryGlyph = (p: GlyphProps) => (\n  <Glyph {...p}>\n    <path d=\"M4 12a8 8 0 1 0 2.3-5.7L4 8.5\" />\n    <path d=\"M4 4v4.5h4.5\" />\n  </Glyph>\n);\nexport const SortGlyph = ({ direction, ...p }: GlyphProps & { direction?: \"ascending\" | \"descending\" }) => (\n  <Glyph {...p}>\n    {direction === \"ascending\" ? <path d=\"m7 14 5-5 5 5\" /> : direction === \"descending\" ? <path d=\"m7 10 5 5 5-5\" /> : <path d=\"m8 9 4-4 4 4M8 15l4 4 4-4\" />}\n  </Glyph>\n);\n"],"mappings":"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","names":["jsx","jsxs"]}

package/dist/search-field.d.ts

@@ -0,0 +1,100 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const searchField: tailwind_variants.TVReturnType<{
+    size: {
+        md: {};
+        sm: {
+            control: string;
+            clear: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    icon: string;
+    input: string;
+    clear: string;
+    shortcut: string;
+    list: string;
+    option: string;
+    group: string;
+}, undefined, {
+    size: {
+        md: {};
+        sm: {
+            control: string;
+            clear: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    icon: string;
+    input: string;
+    clear: string;
+    shortcut: string;
+    list: string;
+    option: string;
+    group: string;
+}, tailwind_variants.TVReturnTypeLike<{
+    size: {
+        md: {};
+        sm: {
+            control: string;
+            clear: string;
+        };
+    };
+}, {
+    root: string;
+    control: string;
+    icon: string;
+    input: string;
+    clear: string;
+    shortcut: string;
+    list: string;
+    option: string;
+    group: string;
+}>>;
+type SearchSuggestion = {
+    /** What `onSuggestionSelect` receives. */
+    value: string;
+    /** What the person reads. */
+    label: string;
+    /** A small text on the right ("Creator", "12 videos"). */
+    meta?: string;
+};
+type SearchFieldProps = Omit<React.ComponentProps<"input">, "value" | "defaultValue" | "onChange" | "onSubmit" | "size" | "type"> & {
+    /** The accessible name of the input ("Search videos"), passed translated. */
+    label: string;
+    /** The query (controlled). */
+    value?: string;
+    /** The query at first, uncontrolled. */
+    defaultValue?: string;
+    /** Called on every key with the query. */
+    onValueChange?: (query: string) => void;
+    /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */
+    onSearch?: (query: string) => void;
+    /** The pause, in ms, before `onSearch`. Default 250. */
+    debounce?: number;
+    /** Called on Enter (no suggestion active) with the query: go to the results page. */
+    onSubmit?: (query: string) => void;
+    /** The global key that focuses the field with ⌘ / Ctrl (`"k"`), or `false` for none. Default `false`. */
+    shortcut?: string | false;
+    /** Suggestions under the field (recent searches, completions). */
+    suggestions?: readonly SearchSuggestion[];
+    /** A title above the suggestions ("Recent searches"). */
+    suggestionsLabel?: string;
+    /** Called with a suggestion picked (Enter on it, or a click). */
+    onSuggestionSelect?: (suggestion: SearchSuggestion) => void;
+    /** The clear button's name ("Clear search"), passed translated. */
+    clearLabel?: string;
+    /** Wraps the field in a `role="search"` landmark (default) — `false` inside a form that already is one. */
+    landmark?: boolean;
+    /** md (default) · sm. */
+    size?: "md" | "sm";
+};
+/** A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard. */
+declare function SearchField({ label, value: valueProp, defaultValue, onValueChange, onSearch, debounce, onSubmit, shortcut, suggestions, suggestionsLabel, onSuggestionSelect, clearLabel, landmark, size, className, placeholder, ...props }: SearchFieldProps): React.JSX.Element;
+
+export { SearchField, type SearchFieldProps, type SearchSuggestion, searchField };

package/dist/search-field.js

@@ -0,0 +1,167 @@
+"use client";
+import {
+  useListbox
+} from "./chunk-ZIXB33X7.js";
+import {
+  useControllable,
+  useDebouncedCallback
+} from "./chunk-EUPTXKH7.js";
+import {
+  CloseGlyph,
+  SearchGlyph
+} from "./chunk-YX6CNVJA.js";
+
+// src/search-field/search-field.tsx
+import * as React from "react";
+import { tv as tv2 } from "tailwind-variants";
+
+// src/kbd/kbd.tsx
+import { tv } from "tailwind-variants";
+import { jsx } from "react/jsx-runtime";
+var kbdVariants = tv({
+  base: "inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 font-mono font-semibold text-fg-secondary",
+  variants: { size: { sm: "h-5 min-w-5 px-1 text-[10px]", md: "h-6 min-w-6 px-1.5 text-xs" } },
+  defaultVariants: { size: "md" }
+});
+function Kbd({ size, className, ...props }) {
+  return /* @__PURE__ */ jsx("kbd", { className: kbdVariants({ size, className }), ...props });
+}
+
+// src/search-field/search-field.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var searchField = tv2({
+  slots: {
+    root: "relative w-full",
+    control: "flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring",
+    icon: "h-4 w-4 shrink-0 text-fg-secondary",
+    input: "h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted [&::-webkit-search-cancel-button]:appearance-none",
+    clear: "inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    shortcut: "hidden shrink-0 items-center gap-0.5 pr-1 sm:flex",
+    list: "absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg",
+    option: "flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3",
+    group: "px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted"
+  },
+  variants: {
+    size: { md: {}, sm: { control: "h-9", clear: "h-7 w-7" } }
+  },
+  defaultVariants: { size: "md" }
+});
+var isApple = () => typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);
+function SearchField({
+  label,
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  onSearch,
+  debounce = 250,
+  onSubmit,
+  shortcut = false,
+  suggestions,
+  suggestionsLabel,
+  onSuggestionSelect,
+  clearLabel = "Clear search",
+  landmark = true,
+  size,
+  className,
+  placeholder,
+  ...props
+}) {
+  const s = searchField({ size });
+  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);
+  const [open, setOpen] = React.useState(false);
+  const [apple, setApple] = React.useState(false);
+  const input = React.useRef(null);
+  const search = useDebouncedCallback((query) => onSearch?.(query), debounce);
+  const list = suggestions ?? [];
+  const pick = (i) => {
+    const suggestion = list[i];
+    if (!suggestion) return;
+    setOpen(false);
+    onSuggestionSelect?.(suggestion);
+  };
+  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });
+  React.useEffect(() => {
+    if (!shortcut) return;
+    setApple(isApple());
+    const onKey = (event) => {
+      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {
+        event.preventDefault();
+        input.current?.focus();
+        input.current?.select();
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [shortcut]);
+  const change = (query) => {
+    setValue(query);
+    search(query);
+    listbox.setActive(-1);
+    setOpen(true);
+  };
+  const field = /* @__PURE__ */ jsxs("div", { className: s.root({ className }), onBlur: (event) => !event.currentTarget.contains(event.relatedTarget) && setOpen(false), children: [
+    /* @__PURE__ */ jsxs("div", { className: s.control(), children: [
+      /* @__PURE__ */ jsx2(SearchGlyph, { className: s.icon() }),
+      /* @__PURE__ */ jsx2(
+        "input",
+        {
+          ref: input,
+          type: "search",
+          "aria-label": label,
+          enterKeyHint: "search",
+          autoComplete: "off",
+          ...list.length > 0 ? listbox.inputProps : {},
+          value,
+          placeholder,
+          className: s.input(),
+          onChange: (event) => change(event.target.value),
+          onFocus: () => setOpen(true),
+          onKeyDown: (event) => {
+            if (list.length > 0 && listbox.onKeyDown(event)) return;
+            if (event.key === "Enter") {
+              event.preventDefault();
+              search.cancel();
+              onSearch?.(value);
+              onSubmit?.(value);
+              setOpen(false);
+            } else if (event.key === "Escape" && value) {
+              event.preventDefault();
+              change("");
+            }
+          },
+          ...props
+        }
+      ),
+      value ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          "aria-label": clearLabel,
+          className: s.clear(),
+          onClick: () => {
+            change("");
+            input.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx2(CloseGlyph, { className: "h-4 w-4" })
+        }
+      ) : shortcut ? /* @__PURE__ */ jsxs("span", { className: s.shortcut(), "aria-hidden": true, children: [
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: apple ? "\u2318" : "Ctrl" }),
+        /* @__PURE__ */ jsx2(Kbd, { size: "sm", children: shortcut.toUpperCase() })
+      ] }) : null
+    ] }),
+    list.length > 0 && /* @__PURE__ */ jsxs("div", { hidden: !open, className: s.list(), children: [
+      suggestionsLabel ? /* @__PURE__ */ jsx2("div", { "aria-hidden": true, className: s.group(), children: suggestionsLabel }) : null,
+      /* @__PURE__ */ jsx2("div", { id: listbox.listId, role: "listbox", "aria-label": suggestionsLabel ?? label, children: list.map((suggestion, i) => /* @__PURE__ */ jsxs("div", { ...listbox.optionProps(i, false), className: s.option(), children: [
+        /* @__PURE__ */ jsx2(SearchGlyph, { className: "h-3.5 w-3.5 shrink-0 text-fg-muted" }),
+        /* @__PURE__ */ jsx2("span", { className: "min-w-0 flex-1 truncate", children: suggestion.label }),
+        suggestion.meta ? /* @__PURE__ */ jsx2("span", { className: "shrink-0 text-xs text-fg-secondary", children: suggestion.meta }) : null
+      ] }, suggestion.value)) })
+    ] })
+  ] });
+  return landmark ? /* @__PURE__ */ jsx2("div", { role: "search", children: field }) : field;
+}
+export {
+  SearchField,
+  searchField
+};
+//# sourceMappingURL=search-field.js.map

package/dist/search-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/search-field/search-field.tsx","../src/kbd/kbd.tsx"],"sourcesContent":["// Client. A search input (`type=\"search\"` inside a `role=\"search\"` landmark when it stands alone): a leading glyph,\n// a clear button, a global shortcut that focuses it (⌘K on Apple devices, Ctrl+K elsewhere, shown as `Kbd`), and\n// optional suggestions through the shared combobox engine. `onSearch` is debounced; Enter submits.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { CloseGlyph, SearchGlyph } from \"../glyphs\";\nimport { Kbd } from \"../kbd\";\nimport { useListbox } from \"../listbox\";\nimport { useControllable, useDebouncedCallback } from \"../media\";\n\nexport const searchField = tv({\n  slots: {\n    root: \"relative w-full\",\n    control:\n      \"flex h-11 w-full items-center gap-2 rounded-lg border border-border-default bg-surface-2 pl-3 pr-1.5 text-sm text-fg \" +\n      \"transition-[border-color,box-shadow] focus-within:border-accent focus-within:ring-2 focus-within:ring-ring\",\n    icon: \"h-4 w-4 shrink-0 text-fg-secondary\",\n    input:\n      \"h-full min-w-0 flex-1 bg-transparent text-sm text-fg outline-hidden placeholder:text-fg-muted \" +\n      \"[&::-webkit-search-cancel-button]:appearance-none\",\n    clear:\n      \"inline-flex h-8 w-8 shrink-0 items-center justify-center rounded-md text-fg-secondary hover:bg-surface-3 hover:text-fg \" +\n      \"focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    shortcut: \"hidden shrink-0 items-center gap-0.5 pr-1 sm:flex\",\n    list: \"absolute inset-x-0 top-full z-50 mt-1 max-h-72 overflow-y-auto rounded-lg border border-border-default bg-surface-2 p-1 shadow-lg\",\n    option: \"flex cursor-pointer select-none items-center gap-2.5 rounded-md px-2.5 py-2 text-sm text-fg data-[active]:bg-surface-3\",\n    group: \"px-2.5 pb-1 pt-2 text-[11px] font-semibold uppercase text-fg-muted\",\n  },\n  variants: {\n    size: { md: {}, sm: { control: \"h-9\", clear: \"h-7 w-7\" } },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type SearchSuggestion = {\n  /** What `onSuggestionSelect` receives. */\n  value: string;\n  /** What the person reads. */\n  label: string;\n  /** A small text on the right (\"Creator\", \"12 videos\"). */\n  meta?: string;\n};\n\nexport type SearchFieldProps = Omit<React.ComponentProps<\"input\">, \"value\" | \"defaultValue\" | \"onChange\" | \"onSubmit\" | \"size\" | \"type\"> & {\n  /** The accessible name of the input (\"Search videos\"), passed translated. */\n  label: string;\n  /** The query (controlled). */\n  value?: string;\n  /** The query at first, uncontrolled. */\n  defaultValue?: string;\n  /** Called on every key with the query. */\n  onValueChange?: (query: string) => void;\n  /** Called with the query once typing pauses (`debounce` ms): fetch the results here. */\n  onSearch?: (query: string) => void;\n  /** The pause, in ms, before `onSearch`. Default 250. */\n  debounce?: number;\n  /** Called on Enter (no suggestion active) with the query: go to the results page. */\n  onSubmit?: (query: string) => void;\n  /** The global key that focuses the field with ⌘ / Ctrl (`\"k\"`), or `false` for none. Default `false`. */\n  shortcut?: string | false;\n  /** Suggestions under the field (recent searches, completions). */\n  suggestions?: readonly SearchSuggestion[];\n  /** A title above the suggestions (\"Recent searches\"). */\n  suggestionsLabel?: string;\n  /** Called with a suggestion picked (Enter on it, or a click). */\n  onSuggestionSelect?: (suggestion: SearchSuggestion) => void;\n  /** The clear button's name (\"Clear search\"), passed translated. */\n  clearLabel?: string;\n  /** Wraps the field in a `role=\"search\"` landmark (default) — `false` inside a form that already is one. */\n  landmark?: boolean;\n  /** md (default) · sm. */\n  size?: \"md\" | \"sm\";\n};\n\nconst isApple = () => typeof navigator !== \"undefined\" && /Mac|iPhone|iPad/.test(navigator.platform || navigator.userAgent);\n\n/** A search box: clear, shortcut, debounced search, submit on Enter, suggestions with the keyboard. */\nexport function SearchField({\n  label,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  onSearch,\n  debounce = 250,\n  onSubmit,\n  shortcut = false,\n  suggestions,\n  suggestionsLabel,\n  onSuggestionSelect,\n  clearLabel = \"Clear search\",\n  landmark = true,\n  size,\n  className,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const s = searchField({ size });\n  const [value, setValue] = useControllable(valueProp, defaultValue, onValueChange);\n  const [open, setOpen] = React.useState(false);\n  const [apple, setApple] = React.useState(false);\n  const input = React.useRef<HTMLInputElement>(null);\n  const search = useDebouncedCallback((query: string) => onSearch?.(query), debounce);\n  const list = suggestions ?? [];\n\n  const pick = (i: number) => {\n    const suggestion = list[i];\n    if (!suggestion) return;\n    setOpen(false);\n    onSuggestionSelect?.(suggestion);\n  };\n  const listbox = useListbox({ count: list.length, onPick: pick, open: open && list.length > 0, setOpen });\n\n  React.useEffect(() => {\n    if (!shortcut) return;\n    // eslint-disable-next-line react-hooks/set-state-in-effect -- the platform is only known in the browser (no hydration mismatch)\n    setApple(isApple());\n    const onKey = (event: KeyboardEvent) => {\n      if (event.key.toLowerCase() === shortcut.toLowerCase() && (event.metaKey || event.ctrlKey) && !event.altKey) {\n        event.preventDefault();\n        input.current?.focus();\n        input.current?.select();\n      }\n    };\n    window.addEventListener(\"keydown\", onKey);\n    return () => window.removeEventListener(\"keydown\", onKey);\n  }, [shortcut]);\n\n  const change = (query: string) => {\n    setValue(query);\n    search(query);\n    listbox.setActive(-1);\n    setOpen(true);\n  };\n\n  const field = (\n    <div className={s.root({ className })} onBlur={(event) => !event.currentTarget.contains(event.relatedTarget as Node | null) && setOpen(false)}>\n      <div className={s.control()}>\n        <SearchGlyph className={s.icon()} />\n        <input\n          ref={input}\n          type=\"search\"\n          aria-label={label}\n          enterKeyHint=\"search\"\n          autoComplete=\"off\"\n          {...(list.length > 0 ? listbox.inputProps : {})}\n          value={value}\n          placeholder={placeholder}\n          className={s.input()}\n          onChange={(event) => change(event.target.value)}\n          onFocus={() => setOpen(true)}\n          onKeyDown={(event) => {\n            if (list.length > 0 && listbox.onKeyDown(event)) return;\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              search.cancel();\n              onSearch?.(value);\n              onSubmit?.(value);\n              setOpen(false);\n            } else if (event.key === \"Escape\" && value) {\n              event.preventDefault();\n              change(\"\");\n            }\n          }}\n          {...props}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            className={s.clear()}\n            onClick={() => {\n              change(\"\");\n              input.current?.focus();\n            }}\n          >\n            <CloseGlyph className=\"h-4 w-4\" />\n          </button>\n        ) : shortcut ? (\n          <span className={s.shortcut()} aria-hidden>\n            <Kbd size=\"sm\">{apple ? \"⌘\" : \"Ctrl\"}</Kbd>\n            <Kbd size=\"sm\">{shortcut.toUpperCase()}</Kbd>\n          </span>\n        ) : null}\n      </div>\n      {list.length > 0 && (\n        <div hidden={!open} className={s.list()}>\n          {suggestionsLabel ? (\n            <div aria-hidden className={s.group()}>\n              {suggestionsLabel}\n            </div>\n          ) : null}\n          <div id={listbox.listId} role=\"listbox\" aria-label={suggestionsLabel ?? label}>\n            {list.map((suggestion, i) => (\n              <div key={suggestion.value} {...listbox.optionProps(i, false)} className={s.option()}>\n                <SearchGlyph className=\"h-3.5 w-3.5 shrink-0 text-fg-muted\" />\n                <span className=\"min-w-0 flex-1 truncate\">{suggestion.label}</span>\n                {suggestion.meta ? <span className=\"shrink-0 text-xs text-fg-secondary\">{suggestion.meta}</span> : null}\n              </div>\n            ))}\n          </div>\n        </div>\n      )}\n    </div>\n  );\n  return landmark ? <div role=\"search\">{field}</div> : field;\n}\n","// Server-safe. A key, or a shortcut of several (`<Kbd>⌘</Kbd><Kbd>K</Kbd>`).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const kbdVariants = tv({\n  base:\n    \"inline-flex shrink-0 items-center justify-center rounded-md border border-border-default border-b-2 bg-surface-2 \" +\n    \"font-mono font-semibold text-fg-secondary\",\n  variants: { size: { sm: \"h-5 min-w-5 px-1 text-[10px]\", md: \"h-6 min-w-6 px-1.5 text-xs\" } },\n  defaultVariants: { size: \"md\" },\n});\n\nexport type KbdProps = React.ComponentProps<\"kbd\"> & {\n  /**\n   * sm · md.\n   * @default \"md\"\n   */\n  size?: VariantProps<typeof kbdVariants>[\"size\"];\n};\n\nexport function Kbd({ size, className, ...props }: KbdProps) {\n  return <kbd className={kbdVariants({ size, className })} {...props} />;\n}\n"],"mappings":"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","names":["tv","jsx","tv"]}