@krizaka/ui 3.3.0 → 3.5.0

package/dist/photo-grid.d.ts

@@ -0,0 +1,122 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const photoGrid: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            image?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            tools?: tailwind_variants.ClassValue;
+            tool?: tailwind_variants.ClassValue;
+            plus?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            image?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            tools?: tailwind_variants.ClassValue;
+            tool?: tailwind_variants.ClassValue;
+            plus?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    slot: string;
+    photo: string;
+    image: string;
+    main: string;
+    tools: string;
+    tool: string;
+    empty: string;
+    plus: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            slot?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            image?: tailwind_variants.ClassValue;
+            main?: tailwind_variants.ClassValue;
+            tools?: tailwind_variants.ClassValue;
+            tool?: tailwind_variants.ClassValue;
+            plus?: tailwind_variants.ClassValue;
+            empty?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    slot: string;
+    photo: string;
+    image: string;
+    main: string;
+    tools: string;
+    tool: string;
+    empty: string;
+    plus: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    slot: string;
+    photo: string;
+    image: string;
+    main: string;
+    tools: string;
+    tool: string;
+    empty: string;
+    plus: string;
+}>>;
+type GridPhoto = {
+    /** A stable id. */
+    id: string;
+    /** Its URL. */
+    src: string;
+    /** What it shows — its text alternative. */
+    alt?: string;
+};
+type PhotoGridLabels = {
+    /** An empty slot (“Add a photo”). */
+    add: string;
+    /** The first photo's badge (“Main”). */
+    main: string;
+    /** A photo's name: `(n) => "Photo " + n`. */
+    photo: (position: number) => string;
+    /** Move earlier. */
+    moveEarlier: string;
+    /** Move later. */
+    moveLater: string;
+    /** Remove. */
+    remove: string;
+    /** Announced after a move: `(n) => "Moved to place " + n`. */
+    moved: (position: number) => string;
+};
+type PhotoGridProps = {
+    /** The photos, in order: the first is the main one. */
+    value: readonly GridPhoto[];
+    /** Called with the new order, or without a removed photo. */
+    onValueChange: (photos: GridPhoto[]) => void;
+    /** Called by an empty slot: open the file picker, the camera, the editor. */
+    onAdd?: () => void;
+    /** How many slots. Default 6. */
+    slots?: number;
+    /** Fewest photos required: the empty slots up to it are marked. Default 1. */
+    required?: number;
+    /** Columns. Default 3. */
+    columns?: number;
+    /** The words, passed translated. */
+    labels: PhotoGridLabels;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A profile's photos in slots: drag to reorder, or each photo's buttons (earlier, later, remove), every move announced. */
+declare function PhotoGrid({ value, onValueChange, onAdd, slots, required, columns, labels, className }: PhotoGridProps): React.JSX.Element;
+
+export { type GridPhoto, PhotoGrid, type PhotoGridLabels, type PhotoGridProps, photoGrid };

package/dist/photo-grid.js

@@ -0,0 +1,94 @@
+"use client";
+import {
+  PlusGlyph
+} from "./chunk-CPA5CF35.js";
+
+// src/photo-grid/photo-grid.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { jsx, jsxs } from "react/jsx-runtime";
+var photoGrid = tv({
+  slots: {
+    root: "grid gap-2",
+    slot: "relative aspect-[3/4] overflow-hidden rounded-xl",
+    photo: "group h-full w-full cursor-grab bg-surface-3 outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[over]:ring-2 data-[over]:ring-accent active:cursor-grabbing",
+    image: "h-full w-full object-cover",
+    main: "absolute bottom-2 left-2 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent",
+    tools: "absolute right-1.5 top-1.5 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100 motion-reduce:transition-none",
+    tool: "inline-flex h-7 w-7 items-center justify-center rounded-full bg-scrim text-fg-on-media backdrop-blur-sm hover:bg-scrim-strong focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring",
+    empty: "flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed border-border-strong bg-surface-1 text-xs font-semibold text-fg-secondary hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 data-[required]:border-accent",
+    plus: "flex h-8 w-8 items-center justify-center rounded-full bg-surface-3 data-[next]:bg-accent data-[next]:text-on-accent [&>svg]:h-4 [&>svg]:w-4"
+  }
+});
+function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, columns = 3, labels, className }) {
+  const s = photoGrid();
+  const [dragged, setDragged] = React.useState(null);
+  const [over, setOver] = React.useState(null);
+  const [message, setMessage] = React.useState("");
+  const move = (from, to) => {
+    if (to < 0 || to >= value.length || from === to) return;
+    const next = [...value];
+    const [photo] = next.splice(from, 1);
+    next.splice(to, 0, photo);
+    onValueChange(next);
+    setMessage(labels.moved(to + 1));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }, children: [
+    /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", children: message }),
+    Array.from({ length: slots }, (_, i) => {
+      const photo = value[i];
+      if (!photo) {
+        return /* @__PURE__ */ jsx("div", { className: s.slot(), children: /* @__PURE__ */ jsxs("button", { type: "button", disabled: !onAdd || i > value.length, onClick: onAdd, "data-required": i < required || void 0, className: s.empty(), children: [
+          /* @__PURE__ */ jsx("span", { className: s.plus(), "data-next": i === value.length || void 0, children: /* @__PURE__ */ jsx(PlusGlyph, {}) }),
+          i === value.length ? labels.add : /* @__PURE__ */ jsx("span", { className: "sr-only", children: labels.add })
+        ] }) }, `empty-${i}`);
+      }
+      const name = [labels.photo(i + 1), photo.alt, i === 0 ? labels.main : null].filter(Boolean).join(", ");
+      return /* @__PURE__ */ jsx("div", { className: s.slot(), children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          role: "group",
+          "aria-label": name,
+          draggable: true,
+          tabIndex: 0,
+          "data-over": over === i || void 0,
+          className: s.photo(),
+          onDragStart: (e) => {
+            e.dataTransfer.effectAllowed = "move";
+            setDragged(i);
+          },
+          onDragOver: (e) => {
+            if (dragged === null) return;
+            e.preventDefault();
+            setOver(i);
+          },
+          onDragLeave: () => setOver(null),
+          onDrop: (e) => {
+            e.preventDefault();
+            if (dragged !== null) move(dragged, i);
+            setDragged(null);
+            setOver(null);
+          },
+          onDragEnd: () => {
+            setDragged(null);
+            setOver(null);
+          },
+          children: [
+            /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.alt ?? "", className: s.image(), draggable: false }),
+            i === 0 ? /* @__PURE__ */ jsx("span", { className: s.main(), "aria-hidden": true, children: labels.main }) : null,
+            /* @__PURE__ */ jsxs("div", { className: s.tools(), children: [
+              i > 0 ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `${labels.moveEarlier} \u2014 ${labels.photo(i + 1)}`, className: s.tool(), onClick: () => move(i, i - 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M15 5l-7 7 7 7" }) }) }) : null,
+              i < value.length - 1 ? /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `${labels.moveLater} \u2014 ${labels.photo(i + 1)}`, className: s.tool(), onClick: () => move(i, i + 1), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M9 5l7 7-7 7" }) }) }) : null,
+              /* @__PURE__ */ jsx("button", { type: "button", "aria-label": `${labels.remove} \u2014 ${labels.photo(i + 1)}`, className: s.tool(), onClick: () => onValueChange(value.filter((_2, j) => j !== i)), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M18 6 6 18M6 6l12 12" }) }) })
+            ] })
+          ]
+        }
+      ) }, photo.id);
+    })
+  ] });
+}
+export {
+  PhotoGrid,
+  photoGrid
+};
+//# sourceMappingURL=photo-grid.js.map

package/dist/photo-grid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/photo-grid/photo-grid.tsx"],"sourcesContent":["// Client. A profile's photos in a grid of slots: the first is the main one; drag a photo onto another to reorder, or use\n// its menu (make main, earlier, later, remove) — the keyboard way, every move announced.\nimport * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { PlusGlyph } from \"../glyphs\";\n\nexport const photoGrid = tv({\n  slots: {\n    root: \"grid gap-2\",\n    slot: \"relative aspect-[3/4] overflow-hidden rounded-xl\",\n    photo: \"group h-full w-full cursor-grab bg-surface-3 outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[over]:ring-2 data-[over]:ring-accent active:cursor-grabbing\",\n    image: \"h-full w-full object-cover\",\n    main: \"absolute bottom-2 left-2 rounded-full bg-accent px-2 py-0.5 text-[10px] font-extrabold uppercase tracking-wide text-on-accent\",\n    tools: \"absolute right-1.5 top-1.5 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100 focus-within:opacity-100 motion-reduce:transition-none\",\n    tool: \"inline-flex h-7 w-7 items-center justify-center rounded-full bg-scrim text-fg-on-media backdrop-blur-sm hover:bg-scrim-strong focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring\",\n    empty:\n      \"flex h-full w-full flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed border-border-strong bg-surface-1 text-xs font-semibold text-fg-secondary \" +\n      \"hover:bg-surface-2 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-50 data-[required]:border-accent\",\n    plus: \"flex h-8 w-8 items-center justify-center rounded-full bg-surface-3 data-[next]:bg-accent data-[next]:text-on-accent [&>svg]:h-4 [&>svg]:w-4\",\n  },\n});\n\nexport type GridPhoto = {\n  /** A stable id. */\n  id: string;\n  /** Its URL. */\n  src: string;\n  /** What it shows — its text alternative. */\n  alt?: string;\n};\n\nexport type PhotoGridLabels = {\n  /** An empty slot (“Add a photo”). */\n  add: string;\n  /** The first photo's badge (“Main”). */\n  main: string;\n  /** A photo's name: `(n) => \"Photo \" + n`. */\n  photo: (position: number) => string;\n  /** Move earlier. */\n  moveEarlier: string;\n  /** Move later. */\n  moveLater: string;\n  /** Remove. */\n  remove: string;\n  /** Announced after a move: `(n) => \"Moved to place \" + n`. */\n  moved: (position: number) => string;\n};\n\nexport type PhotoGridProps = {\n  /** The photos, in order: the first is the main one. */\n  value: readonly GridPhoto[];\n  /** Called with the new order, or without a removed photo. */\n  onValueChange: (photos: GridPhoto[]) => void;\n  /** Called by an empty slot: open the file picker, the camera, the editor. */\n  onAdd?: () => void;\n  /** How many slots. Default 6. */\n  slots?: number;\n  /** Fewest photos required: the empty slots up to it are marked. Default 1. */\n  required?: number;\n  /** Columns. Default 3. */\n  columns?: number;\n  /** The words, passed translated. */\n  labels: PhotoGridLabels;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** A profile's photos in slots: drag to reorder, or each photo's buttons (earlier, later, remove), every move announced. */\nexport function PhotoGrid({ value, onValueChange, onAdd, slots = 6, required = 1, columns = 3, labels, className }: PhotoGridProps) {\n  const s = photoGrid();\n  const [dragged, setDragged] = React.useState<number | null>(null);\n  const [over, setOver] = React.useState<number | null>(null);\n  const [message, setMessage] = React.useState(\"\");\n  const move = (from: number, to: number) => {\n    if (to < 0 || to >= value.length || from === to) return;\n    const next = [...value];\n    const [photo] = next.splice(from, 1);\n    next.splice(to, 0, photo!);\n    onValueChange(next);\n    setMessage(labels.moved(to + 1));\n  };\n  return (\n    <div className={s.root({ className })} style={{ gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` }}>\n      <p className=\"sr-only\" aria-live=\"polite\">\n        {message}\n      </p>\n      {Array.from({ length: slots }, (_, i) => {\n        const photo = value[i];\n        if (!photo) {\n          return (\n            <div key={`empty-${i}`} className={s.slot()}>\n              <button type=\"button\" disabled={!onAdd || i > value.length} onClick={onAdd} data-required={i < required || undefined} className={s.empty()}>\n                <span className={s.plus()} data-next={i === value.length || undefined}>\n                  <PlusGlyph />\n                </span>\n                {i === value.length ? labels.add : <span className=\"sr-only\">{labels.add}</span>}\n              </button>\n            </div>\n          );\n        }\n        const name = [labels.photo(i + 1), photo.alt, i === 0 ? labels.main : null].filter(Boolean).join(\", \");\n        return (\n          <div key={photo.id} className={s.slot()}>\n            <div\n              role=\"group\"\n              aria-label={name}\n              draggable\n              tabIndex={0}\n              data-over={over === i || undefined}\n              className={s.photo()}\n              onDragStart={(e) => {\n                e.dataTransfer.effectAllowed = \"move\";\n                setDragged(i);\n              }}\n              onDragOver={(e) => {\n                if (dragged === null) return;\n                e.preventDefault();\n                setOver(i);\n              }}\n              onDragLeave={() => setOver(null)}\n              onDrop={(e) => {\n                e.preventDefault();\n                if (dragged !== null) move(dragged, i);\n                setDragged(null);\n                setOver(null);\n              }}\n              onDragEnd={() => {\n                setDragged(null);\n                setOver(null);\n              }}\n            >\n              <img src={photo.src} alt={photo.alt ?? \"\"} className={s.image()} draggable={false} />\n              {i === 0 ? <span className={s.main()} aria-hidden>{labels.main}</span> : null}\n              <div className={s.tools()}>\n                {i > 0 ? (\n                  <button type=\"button\" aria-label={`${labels.moveEarlier} — ${labels.photo(i + 1)}`} className={s.tool()} onClick={() => move(i, i - 1)}>\n                    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" aria-hidden><path d=\"M15 5l-7 7 7 7\" /></svg>\n                  </button>\n                ) : null}\n                {i < value.length - 1 ? (\n                  <button type=\"button\" aria-label={`${labels.moveLater} — ${labels.photo(i + 1)}`} className={s.tool()} onClick={() => move(i, i + 1)}>\n                    <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" aria-hidden><path d=\"M9 5l7 7-7 7\" /></svg>\n                  </button>\n                ) : null}\n                <button type=\"button\" aria-label={`${labels.remove} — ${labels.photo(i + 1)}`} className={s.tool()} onClick={() => onValueChange(value.filter((_, j) => j !== i))}>\n                  <svg viewBox=\"0 0 24 24\" className=\"h-4 w-4\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.4\" strokeLinecap=\"round\" aria-hidden><path d=\"M18 6 6 18M6 6l12 12\" /></svg>\n                </button>\n              </div>\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

package/dist/stat.d.ts

@@ -20,6 +20,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, undefined, {
     trend: {
         up: {
@@ -39,6 +40,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }, tailwind_variants.TVReturnTypeLike<{
     trend: {
         up: {
@@ -58,6 +60,7 @@ declare const stat: tailwind_variants.TVReturnType<{
     meta: string;
     trend: string;
     hint: string;
+    chart: string;
 }>>;
 type StatTrend = "up" | "down" | "flat";
 type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
@@ -71,7 +74,33 @@ type StatProps = Omit<React.ComponentProps<"div">, "children"> & {
     trend?: StatTrend;
     /** The change, in words, as read and shown (e.g. "+12 % vs last week") — the arrow alone says nothing. */
     trendLabel?: React.ReactNode;
+    /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */
+    chart?: React.ReactNode;
 };
-declare function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps): React.JSX.Element;
+declare function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps): React.JSX.Element;
+declare const statGrid: tailwind_variants.TVReturnType<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1", {
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined, tailwind_variants.TVReturnTypeLike<{
+    divided: {
+        true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5";
+        false: "gap-6 p-5";
+    };
+}, undefined>>;
+type StatGridProps = React.ComponentProps<"div"> & {
+    /** Hairlines between the stats (default) or space only. */
+    divided?: boolean;
+    /** The narrowest a stat may be before the row wraps, in rem. Default 11. */
+    minWidth?: number;
+};
+/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */
+declare function StatGrid({ divided, minWidth, className, style, ...props }: StatGridProps): React.JSX.Element;
 
-export { Stat, type StatProps, type StatTrend, stat };
+export { Stat, StatGrid, type StatGridProps, type StatProps, type StatTrend, stat, statGrid };

package/dist/stat.js

@@ -10,7 +10,8 @@ var stat = tv({
     // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries
     // the direction's colour.
     trend: "inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0",
-    hint: "text-fg-secondary"
+    hint: "text-fg-secondary",
+    chart: "mt-2 h-10 w-full min-w-0"
   },
   variants: {
     trend: {
@@ -21,7 +22,7 @@ var stat = tv({
   }
 });
 var ARROW = { up: "M7 17 17 7M8 7h9v9", down: "M7 7l10 10M17 8v9H8", flat: "M5 12h14M13 6l6 6-6 6" };
-function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
+function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }) {
   const s = stat({ trend });
   return /* @__PURE__ */ jsxs("div", { "data-trend": trend, className: s.root({ className }), ...props, children: [
     /* @__PURE__ */ jsx("p", { className: s.label(), children: label }),
@@ -32,11 +33,27 @@ function Stat({ label, value, hint, trend, trendLabel, className, ...props }) {
         trendLabel
       ] }),
       hint && /* @__PURE__ */ jsx("span", { className: s.hint(), children: hint })
-    ] })
+    ] }),
+    chart ? /* @__PURE__ */ jsx("div", { className: s.chart(), children: chart }) : null
   ] });
 }
+var statGrid = tv({
+  base: "grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1",
+  variants: {
+    divided: {
+      true: "gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5",
+      false: "gap-6 p-5"
+    }
+  },
+  defaultVariants: { divided: true }
+});
+function StatGrid({ divided, minWidth = 11, className, style, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: statGrid({ divided, className }), style: { ...style, ["--kz-stat-min"]: `${minWidth}rem` }, ...props });
+}
 export {
   Stat,
-  stat
+  StatGrid,
+  stat,
+  statGrid
 };
 //# sourceMappingURL=stat.js.map

package/dist/stat.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA2Cb,cAKM,YALN;AAzCC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,EACR;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAezH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,WAAW,GAAG,MAAM,GAAc;AAC9F,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,KAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../src/stat/stat.tsx"],"sourcesContent":["// Server-safe. A key figure: a label, the value in tabular digits, a hint, a trend. Every word is a prop.\nimport type * as React from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nexport const stat = tv({\n  slots: {\n    root: \"flex min-w-0 flex-col gap-1\",\n    label: \"text-xs font-semibold uppercase tracking-wider text-fg-secondary\",\n    value: \"font-display text-2xl font-black tabular-nums text-fg\",\n    meta: \"flex flex-wrap items-center gap-x-2 gap-y-1 text-xs\",\n    // The status tokens are too light for small text on a light surface: the words stay a text role, the arrow carries\n    // the direction's colour.\n    trend: \"inline-flex items-center gap-1 font-semibold text-fg [&>svg]:h-3.5 [&>svg]:w-3.5 [&>svg]:shrink-0\",\n    hint: \"text-fg-secondary\",\n    chart: \"mt-2 h-10 w-full min-w-0\",\n  },\n  variants: {\n    trend: {\n      up: { trend: \"[&>svg]:text-success\" },\n      down: { trend: \"[&>svg]:text-danger\" },\n      flat: { trend: \"[&>svg]:text-fg-secondary\" },\n    },\n  },\n});\n\nexport type StatTrend = \"up\" | \"down\" | \"flat\";\n\nconst ARROW: Record<StatTrend, string> = { up: \"M7 17 17 7M8 7h9v9\", down: \"M7 7l10 10M17 8v9H8\", flat: \"M5 12h14M13 6l6 6-6 6\" };\n\nexport type StatProps = Omit<React.ComponentProps<\"div\">, \"children\"> & {\n  /** What the figure is (\"Revenue\"), above it. */\n  label: React.ReactNode;\n  /** The figure, formatted by the app, in tabular digits. */\n  value: React.ReactNode;\n  /** A line under the value: the period, the comparison. */\n  hint?: React.ReactNode;\n  /** The direction of the change; its arrow is decorative. */\n  trend?: StatTrend;\n  /** The change, in words, as read and shown (e.g. \"+12 % vs last week\") — the arrow alone says nothing. */\n  trendLabel?: React.ReactNode;\n  /** Under the figure: a `Sparkline` of @krizaka/charts (its own accessible summary), a `Meter`. */\n  chart?: React.ReactNode;\n};\n\nexport function Stat({ label, value, hint, trend, trendLabel, chart, className, ...props }: StatProps) {\n  const s = stat({ trend });\n  return (\n    <div data-trend={trend} className={s.root({ className })} {...props}>\n      <p className={s.label()}>{label}</p>\n      <p className={s.value()}>{value}</p>\n      {(trendLabel || hint) && (\n        <p className={s.meta()}>\n          {trend && trendLabel && (\n            <span className={s.trend()}>\n              <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden>\n                <path d={ARROW[trend]} />\n              </svg>\n              {trendLabel}\n            </span>\n          )}\n          {hint && <span className={s.hint()}>{hint}</span>}\n        </p>\n      )}\n      {chart ? <div className={s.chart()}>{chart}</div> : null}\n    </div>\n  );\n}\n\nexport const statGrid = tv({\n  base: \"grid w-full grid-cols-[repeat(auto-fit,minmax(var(--kz-stat-min,11rem),1fr))] overflow-hidden rounded-xl border border-border-default bg-surface-1\",\n  variants: {\n    divided: {\n      true: \"gap-px bg-border-subtle [&>*]:bg-surface-1 [&>*]:p-5\",\n      false: \"gap-6 p-5\",\n    },\n  },\n  defaultVariants: { divided: true },\n});\n\nexport type StatGridProps = React.ComponentProps<\"div\"> & {\n  /** Hairlines between the stats (default) or space only. */\n  divided?: boolean;\n  /** The narrowest a stat may be before the row wraps, in rem. Default 11. */\n  minWidth?: number;\n};\n\n/** A row of key figures that wraps with the width: a dashboard's head. The stats are its children. */\nexport function StatGrid({ divided, minWidth = 11, className, style, ...props }: StatGridProps) {\n  return <div className={statGrid({ divided, className })} style={{ ...style, [\"--kz-stat-min\" as string]: `${minWidth}rem` }} {...props} />;\n}\n"],"mappings":";AAEA,SAAS,UAAU;AA8Cb,cAKM,YALN;AA5CC,IAAM,OAAO,GAAG;AAAA,EACrB,OAAO;AAAA,IACL,MAAM;AAAA,IACN,OAAO;AAAA,IACP,OAAO;AAAA,IACP,MAAM;AAAA;AAAA;AAAA,IAGN,OAAO;AAAA,IACP,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAAA,EACA,UAAU;AAAA,IACR,OAAO;AAAA,MACL,IAAI,EAAE,OAAO,uBAAuB;AAAA,MACpC,MAAM,EAAE,OAAO,sBAAsB;AAAA,MACrC,MAAM,EAAE,OAAO,4BAA4B;AAAA,IAC7C;AAAA,EACF;AACF,CAAC;AAID,IAAM,QAAmC,EAAE,IAAI,sBAAsB,MAAM,uBAAuB,MAAM,wBAAwB;AAiBzH,SAAS,KAAK,EAAE,OAAO,OAAO,MAAM,OAAO,YAAY,OAAO,WAAW,GAAG,MAAM,GAAc;AACrG,QAAM,IAAI,KAAK,EAAE,MAAM,CAAC;AACxB,SACE,qBAAC,SAAI,cAAY,OAAO,WAAW,EAAE,KAAK,EAAE,UAAU,CAAC,GAAI,GAAG,OAC5D;AAAA,wBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,IAChC,oBAAC,OAAE,WAAW,EAAE,MAAM,GAAI,iBAAM;AAAA,KAC9B,cAAc,SACd,qBAAC,OAAE,WAAW,EAAE,KAAK,GAClB;AAAA,eAAS,cACR,qBAAC,UAAK,WAAW,EAAE,MAAM,GACvB;AAAA,4BAAC,SAAI,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,OAAM,eAAc,SAAQ,gBAAe,SAAQ,eAAW,MACnI,8BAAC,UAAK,GAAG,MAAM,KAAK,GAAG,GACzB;AAAA,QACC;AAAA,SACH;AAAA,MAED,QAAQ,oBAAC,UAAK,WAAW,EAAE,KAAK,GAAI,gBAAK;AAAA,OAC5C;AAAA,IAED,QAAQ,oBAAC,SAAI,WAAW,EAAE,MAAM,GAAI,iBAAM,IAAS;AAAA,KACtD;AAEJ;AAEO,IAAM,WAAW,GAAG;AAAA,EACzB,MAAM;AAAA,EACN,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,iBAAiB,EAAE,SAAS,KAAK;AACnC,CAAC;AAUM,SAAS,SAAS,EAAE,SAAS,WAAW,IAAI,WAAW,OAAO,GAAG,MAAM,GAAkB;AAC9F,SAAO,oBAAC,SAAI,WAAW,SAAS,EAAE,SAAS,UAAU,CAAC,GAAG,OAAO,EAAE,GAAG,OAAO,CAAC,eAAyB,GAAG,GAAG,QAAQ,MAAM,GAAI,GAAG,OAAO;AAC1I;","names":[]}

package/dist/step-progress.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+type StepProgressProps = {
+    /** The current step, from 1. */
+    step: number;
+    /** How many steps. */
+    total: number;
+    /** The position in words: `(n, total) => "Step " + n + " of " + total` — passed translated. */
+    label: (step: number, total: number) => string;
+    /** The back link or button (a `Button`), at the left. */
+    back?: React.ReactNode;
+    /** At the right: a Skip link. */
+    trailing?: React.ReactNode;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */
+declare function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps): React.JSX.Element;
+
+export { StepProgress, type StepProgressProps };

package/dist/step-progress.js

@@ -0,0 +1,17 @@
+// src/step-progress/step-progress.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+function StepProgress({ step, total, label, back, trailing, className }) {
+  const words = label(step, total);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-1.5", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-start", children: back }),
+      /* @__PURE__ */ jsx("div", { role: "progressbar", "aria-label": words, "aria-valuemin": 1, "aria-valuemax": total, "aria-valuenow": step, "aria-valuetext": words, className: "flex flex-1 gap-1", children: Array.from({ length: total }, (_, i) => /* @__PURE__ */ jsx("span", { className: ["h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none", i < step ? "bg-accent" : "bg-surface-3"].join(" ") }, i)) }),
+      /* @__PURE__ */ jsx("div", { className: "flex min-w-10 justify-end", children: trailing })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "m-0 text-center text-xs text-fg-secondary", "aria-hidden": true, children: words })
+  ] });
+}
+export {
+  StepProgress
+};
+//# sourceMappingURL=step-progress.js.map

package/dist/step-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/step-progress/step-progress.tsx"],"sourcesContent":["// Server-safe. The head of a multi-step flow: back, segments that fill, the position in words — a `progressbar`.\nimport type * as React from \"react\";\n\nexport type StepProgressProps = {\n  /** The current step, from 1. */\n  step: number;\n  /** How many steps. */\n  total: number;\n  /** The position in words: `(n, total) => \"Step \" + n + \" of \" + total` — passed translated. */\n  label: (step: number, total: number) => string;\n  /** The back link or button (a `Button`), at the left. */\n  back?: React.ReactNode;\n  /** At the right: a Skip link. */\n  trailing?: React.ReactNode;\n  /** Classes merged on the root. */\n  className?: string;\n};\n\n/** The head of a sign-up or a profile to fill: back, segments that fill, the position in words. */\nexport function StepProgress({ step, total, label, back, trailing, className }: StepProgressProps) {\n  const words = label(step, total);\n  return (\n    <div className={[\"flex flex-col gap-1.5\", className].filter(Boolean).join(\" \")}>\n      <div className=\"flex items-center gap-3\">\n        <div className=\"flex min-w-10 justify-start\">{back}</div>\n        <div role=\"progressbar\" aria-label={words} aria-valuemin={1} aria-valuemax={total} aria-valuenow={step} aria-valuetext={words} className=\"flex flex-1 gap-1\">\n          {Array.from({ length: total }, (_, i) => (\n            <span key={i} className={[\"h-1 flex-1 rounded-full transition-colors motion-reduce:transition-none\", i < step ? \"bg-accent\" : \"bg-surface-3\"].join(\" \")} />\n          ))}\n        </div>\n        <div className=\"flex min-w-10 justify-end\">{trailing}</div>\n      </div>\n      <p className=\"m-0 text-center text-xs text-fg-secondary\" aria-hidden>\n        {words}\n      </p>\n    </div>\n  );\n}\n"],"mappings":";AAuBM,SACE,KADF;AAJC,SAAS,aAAa,EAAE,MAAM,OAAO,OAAO,MAAM,UAAU,UAAU,GAAsB;AACjG,QAAM,QAAQ,MAAM,MAAM,KAAK;AAC/B,SACE,qBAAC,SAAI,WAAW,CAAC,yBAAyB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC3E;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,+BAA+B,gBAAK;AAAA,MACnD,oBAAC,SAAI,MAAK,eAAc,cAAY,OAAO,iBAAe,GAAG,iBAAe,OAAO,iBAAe,MAAM,kBAAgB,OAAO,WAAU,qBACtI,gBAAM,KAAK,EAAE,QAAQ,MAAM,GAAG,CAAC,GAAG,MACjC,oBAAC,UAAa,WAAW,CAAC,2EAA2E,IAAI,OAAO,cAAc,cAAc,EAAE,KAAK,GAAG,KAA3I,CAA8I,CAC1J,GACH;AAAA,MACA,oBAAC,SAAI,WAAU,6BAA6B,oBAAS;AAAA,OACvD;AAAA,IACA,oBAAC,OAAE,WAAU,6CAA4C,eAAW,MACjE,iBACH;AAAA,KACF;AAEJ;","names":[]}

package/dist/swipe-deck.d.ts

@@ -0,0 +1,183 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as React from 'react';
+
+declare const swipeDeck: tailwind_variants.TVReturnType<{
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            stack?: tailwind_variants.ClassValue;
+            layer?: tailwind_variants.ClassValue;
+            stamp?: tailwind_variants.ClassValue;
+            buttons?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            bars?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            half?: tailwind_variants.ClassValue;
+            info?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            age?: tailwind_variants.ClassValue;
+            bio?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            stack?: tailwind_variants.ClassValue;
+            layer?: tailwind_variants.ClassValue;
+            stamp?: tailwind_variants.ClassValue;
+            buttons?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            bars?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            half?: tailwind_variants.ClassValue;
+            info?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            age?: tailwind_variants.ClassValue;
+            bio?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    stack: string;
+    layer: string;
+    stamp: string;
+    buttons: string;
+    button: string;
+    card: string;
+    photo: string;
+    bars: string;
+    bar: string;
+    half: string;
+    info: string;
+    name: string;
+    age: string;
+    bio: string;
+    footer: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: tailwind_variants.ClassValue | {
+            root?: tailwind_variants.ClassValue;
+            stack?: tailwind_variants.ClassValue;
+            layer?: tailwind_variants.ClassValue;
+            stamp?: tailwind_variants.ClassValue;
+            buttons?: tailwind_variants.ClassValue;
+            card?: tailwind_variants.ClassValue;
+            photo?: tailwind_variants.ClassValue;
+            bars?: tailwind_variants.ClassValue;
+            bar?: tailwind_variants.ClassValue;
+            half?: tailwind_variants.ClassValue;
+            info?: tailwind_variants.ClassValue;
+            name?: tailwind_variants.ClassValue;
+            age?: tailwind_variants.ClassValue;
+            bio?: tailwind_variants.ClassValue;
+            footer?: tailwind_variants.ClassValue;
+            button?: tailwind_variants.ClassValue;
+        };
+    };
+} | {}, {
+    root: string;
+    stack: string;
+    layer: string;
+    stamp: string;
+    buttons: string;
+    button: string;
+    card: string;
+    photo: string;
+    bars: string;
+    bar: string;
+    half: string;
+    info: string;
+    name: string;
+    age: string;
+    bio: string;
+    footer: string;
+}, tailwind_variants.TVReturnTypeLike<unknown, {
+    root: string;
+    stack: string;
+    layer: string;
+    stamp: string;
+    buttons: string;
+    button: string;
+    card: string;
+    photo: string;
+    bars: string;
+    bar: string;
+    half: string;
+    info: string;
+    name: string;
+    age: string;
+    bio: string;
+    footer: string;
+}>>;
+type PersonCardProps = {
+    /** The person's photos (URLs), the first shown first; click a side, or its buttons, to move between them. */
+    photos: readonly {
+        src: string;
+        alt?: string;
+    }[];
+    /** The name. */
+    name: string;
+    /** The age, written after the name. */
+    age?: number;
+    /** Beside the name: a `VerifiedBadge`. */
+    badge?: React.ReactNode;
+    /** A line under the name: a distance, a job. */
+    meta?: React.ReactNode;
+    /** A sentence about the person. */
+    bio?: string;
+    /** At the bottom: the interests as chips. */
+    footer?: React.ReactNode;
+    /** The photo buttons' words: `{ previous: "Previous photo", next: "Next photo" }` — passed translated. */
+    photoLabels?: {
+        previous: string;
+        next: string;
+    };
+    /** Classes merged on the card. */
+    className?: string;
+};
+/** A person on a card: photos full bleed (a side to change), name and age over a scrim, a line, a bio, chips. */
+declare function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels, className }: PersonCardProps): React.JSX.Element;
+type SwipeDirection = "like" | "pass";
+type SwipeDeckLabels = {
+    /** The like button (“Like”). */
+    like: string;
+    /** The pass button (“Pass”). */
+    pass: string;
+    /** The deck's name and its keyboard hint (“Profiles. Right arrow to like, left arrow to pass.”). */
+    deck: string;
+    /** The stamp while dragging right (“LIKE”). */
+    likeStamp?: string;
+    /** The stamp while dragging left (“NOPE”). */
+    passStamp?: string;
+    /** Announced after a decision: `(name, direction) => …`. */
+    decided?: (name: string, direction: SwipeDirection) => string;
+};
+type SwipeDeckProps<T> = {
+    /** The cards still to decide, the first on top. */
+    items: readonly T[];
+    /** A card's id. */
+    getId: (item: T) => string;
+    /** A card's name, for the announcements. */
+    getName: (item: T) => string;
+    /** A card (usually a `PersonCard`). */
+    renderCard: (item: T) => React.ReactNode;
+    /** Called with the card decided and the decision; remove it from `items`. */
+    onSwipe: (item: T, direction: SwipeDirection) => void;
+    /** Shown when there is no card left (an `EmptyState`). */
+    empty?: React.ReactNode;
+    /** The words, passed translated. */
+    labels: SwipeDeckLabels;
+    /** Classes merged on the root. */
+    className?: string;
+};
+/** A deck of cards decided one by one: drag, the buttons, or ← → — each decision announced. */
+declare function SwipeDeck<T>({ items, getId, getName, renderCard, onSwipe, empty, labels, className }: SwipeDeckProps<T>): React.JSX.Element;
+
+export { PersonCard, type PersonCardProps, SwipeDeck, type SwipeDeckLabels, type SwipeDeckProps, type SwipeDirection, swipeDeck };