@krizaka/ui 2.2.0 → 2.4.0

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/progress.d.ts

@@ -19,11 +19,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }, undefined, {
     variant: {
         bar: {
@@ -41,11 +55,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }, tailwind_variants.TVReturnTypeLike<{
     variant: {
         bar: {
@@ -63,11 +91,25 @@ declare const progress: tailwind_variants.TVReturnType<{
         md: {};
         lg: {};
     };
+    status: {
+        active: {};
+        paused: {
+            indicator: string;
+        };
+        error: {
+            indicator: string;
+        };
+    };
 }, {
     root: string;
     track: string;
     indicator: string;
     center: string;
+    buffer: string;
+    frame: string;
+    header: string;
+    caption: string;
+    figure: string;
 }>>;
 type ProgressVariants = VariantProps<typeof progress>;
 type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & ProgressVariants & {
@@ -85,8 +127,21 @@ type ProgressProps = Omit<React.ComponentProps<"div">, "children"> & ProgressVar
     valueText?: string;
     /** A ring's centre: an amount, a percentage, an icon. */
     children?: React.ReactNode;
+    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */
+    buffer?: number;
+    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */
+    segments?: number;
+    /**
+     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).
+     * @default "active"
+     */
+    status?: ProgressVariants["status"];
+    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */
+    showLabel?: boolean;
+    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */
+    eta?: string;
 };
 /** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */
-declare function Progress({ variant, size, value, max, label, valueText, className, children, ...props }: ProgressProps): React.JSX.Element;
+declare function Progress({ variant, size, value, max, label, valueText, className, children, buffer, segments, status, showLabel, eta, ...props }: ProgressProps): React.JSX.Element;
 
 export { Progress, type ProgressProps, type ProgressVariants, progress };

package/dist/progress.js

@@ -1,4 +1,5 @@
 // src/progress/progress.tsx
+import * as React from "react";
 import { tv } from "tailwind-variants";
 import { jsx, jsxs } from "react/jsx-runtime";
 var progress = tv({
@@ -6,12 +7,17 @@ var progress = tv({
     root: "relative",
     track: "",
     indicator: "",
-    center: "absolute inset-0 flex flex-col items-center justify-center text-center"
+    center: "absolute inset-0 flex flex-col items-center justify-center text-center",
+    buffer: "absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none",
+    frame: "flex w-full flex-col gap-1.5",
+    header: "flex items-baseline gap-2 text-xs",
+    caption: "min-w-0 flex-1 truncate font-medium text-fg",
+    figure: "shrink-0 tabular-nums text-fg-secondary"
   },
   variants: {
     variant: {
       bar: {
-        root: "w-full overflow-hidden rounded-full bg-surface-3",
+        root: "relative isolate w-full overflow-hidden rounded-full bg-surface-3",
         indicator: "kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none data-[state=indeterminate]:w-2/5"
       },
       ring: {
@@ -20,7 +26,14 @@ var progress = tv({
         indicator: "stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none"
       }
     },
-    size: { sm: {}, md: {}, lg: {} }
+    size: { sm: {}, md: {}, lg: {} },
+    status: {
+      active: {},
+      // Paused: the fill rests, striped — the task is waiting for someone, not broken.
+      paused: { indicator: "kz-progress-paused opacity-70" },
+      // Failed: the fill turns to the danger colour where it stopped.
+      error: { indicator: "from-danger to-danger stroke-danger" }
+    }
   },
   compoundVariants: [
     { variant: "bar", size: "sm", class: { root: "h-1" } },
@@ -30,11 +43,27 @@ var progress = tv({
     { variant: "ring", size: "md", class: { root: "h-20 w-20" } },
     { variant: "ring", size: "lg", class: { root: "h-36 w-36" } }
   ],
-  defaultVariants: { variant: "bar", size: "md" }
+  defaultVariants: { variant: "bar", size: "md", status: "active" }
 });
 var STROKE = { sm: 12, md: 9, lg: 7 };
-function Progress({ variant = "bar", size = "md", value, max = 100, label, valueText, className, children, ...props }) {
-  const s = progress({ variant, size });
+function Progress({
+  variant = "bar",
+  size = "md",
+  value,
+  max = 100,
+  label,
+  valueText,
+  className,
+  children,
+  buffer,
+  segments,
+  status = "active",
+  showLabel,
+  eta,
+  ...props
+}) {
+  const s = progress({ variant, size, status });
+  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
   const known = typeof value === "number" && Number.isFinite(value);
   const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;
   const percent = Math.round(ratio * 100);
@@ -45,8 +74,9 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     "aria-valuemin": known ? 0 : void 0,
     "aria-valuemax": known ? max : void 0,
     "aria-valuenow": known ? Math.min(max, Math.max(0, value)) : void 0,
-    "aria-valuetext": known ? valueText ?? `${percent}%` : valueText,
+    "aria-valuetext": [known ? valueText ?? `${percent}%` : valueText, eta].filter(Boolean).join(", ") || void 0,
     "data-state": state,
+    "data-status": status === "active" ? void 0 : status,
     "data-value": known ? value : void 0,
     "data-variant": variant
   };
@@ -55,28 +85,45 @@ function Progress({ variant = "bar", size = "md", value, max = 100, label, value
     const r = 50 - stroke / 2;
     return /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className }), ...props, children: [
       /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", "aria-hidden": true, children: [
-        /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
-        /* @__PURE__ */ jsx(
-          "circle",
-          {
-            cx: "50",
-            cy: "50",
-            r,
-            fill: "none",
-            strokeWidth: stroke,
-            strokeLinecap: "round",
-            pathLength: 100,
-            strokeDasharray: 100,
-            strokeDashoffset: known ? 100 - percent : 75,
-            "data-state": state,
-            className: s.indicator()
-          }
-        )
+        segments && segments > 1 && /* @__PURE__ */ jsx("mask", { id: maskId, children: /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", stroke: "white", strokeWidth: stroke + 2, pathLength: 100, strokeDasharray: `${100 / segments - 2} 2` }) }),
+        /* @__PURE__ */ jsxs("g", { mask: segments && segments > 1 ? `url(#${maskId})` : void 0, children: [
+          /* @__PURE__ */ jsx("circle", { cx: "50", cy: "50", r, fill: "none", strokeWidth: stroke, className: s.track() }),
+          /* @__PURE__ */ jsx(
+            "circle",
+            {
+              cx: "50",
+              cy: "50",
+              r,
+              fill: "none",
+              strokeWidth: stroke,
+              strokeLinecap: "round",
+              pathLength: 100,
+              strokeDasharray: 100,
+              strokeDashoffset: known ? 100 - percent : 75,
+              "data-state": state,
+              className: s.indicator()
+            }
+          )
+        ] })
       ] }),
       children !== void 0 && /* @__PURE__ */ jsx("div", { className: s.center(), children })
     ] });
   }
-  return /* @__PURE__ */ jsx("div", { ...aria, className: s.root({ className }), ...props, children: /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }) });
+  const segmented = segments && segments > 1 ? { "--kz-segments": segments } : void 0;
+  const bufferRatio = typeof buffer === "number" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;
+  const bar = /* @__PURE__ */ jsxs("div", { ...aria, className: s.root({ className: [segmented && "kz-progress-segmented", className].filter(Boolean).join(" ") || void 0 }), style: segmented, ...props, children: [
+    /* @__PURE__ */ jsx("div", { "data-state": state, className: s.indicator(), style: known ? { width: `${ratio * 100}%` } : void 0 }),
+    bufferRatio !== null && /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: s.buffer(), style: { width: `${bufferRatio * 100}%` } })
+  ] });
+  if (!showLabel) return bar;
+  const figure = [known ? valueText ?? `${percent} %` : valueText, eta].filter(Boolean).join(" \xB7 ");
+  return /* @__PURE__ */ jsxs("div", { className: s.frame(), children: [
+    /* @__PURE__ */ jsxs("div", { "aria-hidden": true, className: s.header(), children: [
+      /* @__PURE__ */ jsx("span", { className: s.caption(), children: label }),
+      figure && /* @__PURE__ */ jsx("span", { className: s.figure(), children: figure })
+    ] }),
+    bar
+  ] });
 }
 export {
   Progress,

package/dist/progress.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport type * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({ variant = \"bar\", size = \"md\", value, max = 100, label, valueText, className, children, ...props }: ProgressProps) {\n  const s = progress({ variant, size });\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": known ? (valueText ?? `${percent}%`) : valueText,\n    \"data-state\": state,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  return (\n    <div {...aria} className={s.root({ className })} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/progress/progress.tsx"],"sourcesContent":["// Server-safe: no hook, no context. role=\"progressbar\" with aria-valuenow / aria-valuemax (none when indeterminate),\n// named by `label`. A bar or a ring; the ring can hold content in its centre (an amount, a percentage).\nimport * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\n\nexport const progress = tv({\n  slots: {\n    root: \"relative\",\n    track: \"\",\n    indicator: \"\",\n    center: \"absolute inset-0 flex flex-col items-center justify-center text-center\",\n    buffer: \"absolute inset-y-0 left-0 -z-10 rounded-full bg-accent/25 transition-[width] duration-500 motion-reduce:transition-none\",\n    frame: \"flex w-full flex-col gap-1.5\",\n    header: \"flex items-baseline gap-2 text-xs\",\n    caption: \"min-w-0 flex-1 truncate font-medium text-fg\",\n    figure: \"shrink-0 tabular-nums text-fg-secondary\",\n  },\n  variants: {\n    variant: {\n      bar: {\n        root: \"relative isolate w-full overflow-hidden rounded-full bg-surface-3\",\n        indicator:\n          \"kz-progress h-full rounded-full bg-linear-to-r from-accent to-accent-2 transition-[width] duration-500 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:w-2/5\",\n      },\n      ring: {\n        root: \"inline-flex shrink-0 items-center justify-center\",\n        track: \"stroke-border-default\",\n        indicator:\n          \"stroke-accent transition-[stroke-dashoffset] duration-1000 motion-reduce:transition-none \" +\n          \"data-[state=indeterminate]:origin-center data-[state=indeterminate]:animate-spin motion-reduce:data-[state=indeterminate]:animate-none\",\n      },\n    },\n    size: { sm: {}, md: {}, lg: {} },\n    status: {\n      active: {},\n      // Paused: the fill rests, striped — the task is waiting for someone, not broken.\n      paused: { indicator: \"kz-progress-paused opacity-70\" },\n      // Failed: the fill turns to the danger colour where it stopped.\n      error: { indicator: \"from-danger to-danger stroke-danger\" },\n    },\n  },\n  compoundVariants: [\n    { variant: \"bar\", size: \"sm\", class: { root: \"h-1\" } },\n    { variant: \"bar\", size: \"md\", class: { root: \"h-2\" } },\n    { variant: \"bar\", size: \"lg\", class: { root: \"h-3\" } },\n    { variant: \"ring\", size: \"sm\", class: { root: \"h-10 w-10\" } },\n    { variant: \"ring\", size: \"md\", class: { root: \"h-20 w-20\" } },\n    { variant: \"ring\", size: \"lg\", class: { root: \"h-36 w-36\" } },\n  ],\n  defaultVariants: { variant: \"bar\", size: \"md\", status: \"active\" },\n});\n\nexport type ProgressVariants = VariantProps<typeof progress>;\n\nexport type ProgressProps = Omit<React.ComponentProps<\"div\">, \"children\"> &\n  ProgressVariants & {\n    /** bar · ring (a ring holds its `children` in the centre). */\n    variant?: ProgressVariants[\"variant\"];\n    /** sm · md · lg: the bar's thickness, the ring's diameter. */\n    size?: ProgressVariants[\"size\"];\n    /** How far, between 0 and `max`. `null` or absent: indeterminate (a wait of unknown length). */\n    value?: number | null;\n    /** The value that means complete. */\n    max?: number;\n    /** The accessible name — passed translated (\"Upload\", \"Raised towards the goal\"). */\n    label: string;\n    /** The value in words for assistive technology (\"$420 of $1,000\") — default: the percentage. */\n    valueText?: string;\n    /** A ring's centre: an amount, a percentage, an icon. */\n    children?: React.ReactNode;\n    /** How far is already available beyond the value (a video buffered ahead), between 0 and `max` — bar only. */\n    buffer?: number;\n    /** Splits the bar or the ring into this many segments: the steps of a task, the parts of a goal. */\n    segments?: number;\n    /**\n     * active · paused (the fill rests, striped: waiting for someone) · error (the fill turns to the danger colour where it stopped).\n     * @default \"active\"\n     */\n    status?: ProgressVariants[\"status\"];\n    /** Shows the label above the bar, with the percentage (or `valueText`) and `eta` — bar only. */\n    showLabel?: boolean;\n    /** The time left, in words (“About 2 min left”), shown with `showLabel` and read with the value — passed translated. */\n    eta?: string;\n  };\n\nconst STROKE = { sm: 12, md: 9, lg: 7 } as const;\n\n/** A progress bar or ring: `value` / `max`, indeterminate without a value. State: `data-state` (loading · complete · indeterminate). */\nexport function Progress({\n  variant = \"bar\",\n  size = \"md\",\n  value,\n  max = 100,\n  label,\n  valueText,\n  className,\n  children,\n  buffer,\n  segments,\n  status = \"active\",\n  showLabel,\n  eta,\n  ...props\n}: ProgressProps) {\n  const s = progress({ variant, size, status });\n  const maskId = `kz-seg-${React.useId().replace(/[^a-zA-Z0-9_-]/g, \"\")}`;\n  const known = typeof value === \"number\" && Number.isFinite(value);\n  const ratio = known ? Math.min(1, Math.max(0, value / (max || 1))) : 0;\n  const percent = Math.round(ratio * 100);\n  const state = !known ? \"indeterminate\" : ratio >= 1 ? \"complete\" : \"loading\";\n  const aria = {\n    role: \"progressbar\" as const,\n    \"aria-label\": label,\n    \"aria-valuemin\": known ? 0 : undefined,\n    \"aria-valuemax\": known ? max : undefined,\n    \"aria-valuenow\": known ? Math.min(max, Math.max(0, value)) : undefined,\n    \"aria-valuetext\": [known ? (valueText ?? `${percent}%`) : valueText, eta].filter(Boolean).join(\", \") || undefined,\n    \"data-state\": state,\n    \"data-status\": status === \"active\" ? undefined : status,\n    \"data-value\": known ? value : undefined,\n    \"data-variant\": variant,\n  };\n  if (variant === \"ring\") {\n    const stroke = STROKE[size];\n    const r = 50 - stroke / 2;\n    return (\n      <div {...aria} className={s.root({ className })} {...props}>\n        <svg viewBox=\"0 0 100 100\" className=\"h-full w-full -rotate-90\" aria-hidden>\n          {segments && segments > 1 && (\n            <mask id={maskId}>\n              <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" stroke=\"white\" strokeWidth={stroke + 2} pathLength={100} strokeDasharray={`${100 / segments - 2} 2`} />\n            </mask>\n          )}\n          <g mask={segments && segments > 1 ? `url(#${maskId})` : undefined}>\n          <circle cx=\"50\" cy=\"50\" r={r} fill=\"none\" strokeWidth={stroke} className={s.track()} />\n          <circle\n            cx=\"50\"\n            cy=\"50\"\n            r={r}\n            fill=\"none\"\n            strokeWidth={stroke}\n            strokeLinecap=\"round\"\n            pathLength={100}\n            strokeDasharray={100}\n            strokeDashoffset={known ? 100 - percent : 75}\n            data-state={state}\n            className={s.indicator()}\n          />\n          </g>\n        </svg>\n        {children !== undefined && <div className={s.center()}>{children}</div>}\n      </div>\n    );\n  }\n  const segmented = segments && segments > 1 ? ({ \"--kz-segments\": segments } as React.CSSProperties) : undefined;\n  const bufferRatio = typeof buffer === \"number\" && Number.isFinite(buffer) ? Math.min(1, Math.max(0, buffer / (max || 1))) : null;\n  const bar = (\n    <div {...aria} className={s.root({ className: [segmented && \"kz-progress-segmented\", className].filter(Boolean).join(\" \") || undefined })} style={segmented} {...props}>\n      <div data-state={state} className={s.indicator()} style={known ? { width: `${ratio * 100}%` } : undefined} />\n      {bufferRatio !== null && <div aria-hidden className={s.buffer()} style={{ width: `${bufferRatio * 100}%` }} />}\n    </div>\n  );\n  if (!showLabel) return bar;\n  const figure = [known ? (valueText ?? `${percent} %`) : valueText, eta].filter(Boolean).join(\" · \");\n  return (\n    <div className={s.frame()}>\n      <div aria-hidden className={s.header()}>\n        <span className={s.caption()}>{label}</span>\n        {figure && <span className={s.figure()}>{figure}</span>}\n      </div>\n      {bar}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

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 };