@krizaka/ui 3.4.0 → 3.5.0

package/dist/page-hero.js

@@ -1,12 +1,12 @@
+import {
+  Page
+} from "./chunk-DGQMDJXK.js";
 import {
   BlockLink
 } from "./chunk-2AGSO3WH.js";
 import {
   ArrowGlyph
 } from "./chunk-XCBVFMNV.js";
-import {
-  Page
-} from "./chunk-DGQMDJXK.js";
 import {
   SectionBackdrop
 } from "./chunk-XVLWVTQA.js";

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

package/dist/swipe-deck.js

@@ -0,0 +1,144 @@
+"use client";
+import {
+  usePrefersReducedMotion
+} from "./chunk-BRKMQ6JV.js";
+
+// src/swipe-deck/swipe-deck.tsx
+import * as React from "react";
+import { tv } from "tailwind-variants";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var swipeDeck = tv({
+  slots: {
+    root: "flex w-full flex-col items-center gap-5",
+    stack: "relative aspect-[3/4] w-full max-w-sm outline-hidden focus-visible:rounded-2xl focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-4 focus-visible:ring-offset-surface-0",
+    layer: "absolute inset-0 touch-pan-y select-none",
+    stamp: "pointer-events-none absolute top-8 rounded-lg border-[3px] px-2.5 py-0.5 font-display text-2xl font-black uppercase tracking-wide",
+    buttons: "flex items-center gap-7",
+    button: "inline-flex h-16 w-16 items-center justify-center rounded-full border-2 bg-surface-1 shadow-md transition-transform active:scale-90 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-40 motion-reduce:transition-none [&>svg]:h-7 [&>svg]:w-7",
+    card: "relative h-full w-full overflow-hidden rounded-2xl bg-surface-3 shadow-lg",
+    photo: "absolute inset-0 h-full w-full object-cover",
+    bars: "absolute inset-x-2 top-2 flex gap-1",
+    bar: "h-[3px] flex-1 rounded-full bg-fg-on-media opacity-40 data-[on]:opacity-100",
+    half: "absolute top-0 bottom-2/5 w-2/5 cursor-pointer outline-hidden focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+    info: "absolute inset-x-0 bottom-0 flex flex-col gap-1.5 bg-gradient-to-t from-scrim-strong via-scrim-strong/80 to-transparent p-4 pt-24 text-fg-on-media",
+    name: "flex items-center gap-2 font-display text-3xl font-black",
+    age: "font-sans text-2xl font-normal",
+    bio: "line-clamp-2 text-sm",
+    footer: "mt-1 flex flex-wrap gap-1.5"
+  }
+});
+function PersonCard({ photos, name, age, badge, meta, bio, footer, photoLabels = { previous: "Previous photo", next: "Next photo" }, className }) {
+  const s = swipeDeck();
+  const [index, setIndex] = React.useState(0);
+  const photo = photos[index];
+  return /* @__PURE__ */ jsxs("article", { "aria-label": age !== void 0 ? `${name}, ${age}` : name, className: s.card({ className }), children: [
+    photo ? /* @__PURE__ */ jsx("img", { src: photo.src, alt: photo.alt ?? "", className: s.photo(), draggable: false }) : null,
+    photos.length > 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("div", { className: s.bars(), "aria-hidden": true, children: photos.map((_, i) => /* @__PURE__ */ jsx("span", { className: s.bar(), "data-on": i === index || void 0 }, i)) }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": photoLabels.previous, disabled: index === 0, className: s.half({ className: "left-0" }), onClick: () => setIndex((i) => Math.max(0, i - 1)) }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": photoLabels.next, disabled: index === photos.length - 1, className: s.half({ className: "right-0" }), onClick: () => setIndex((i) => Math.min(photos.length - 1, i + 1)) })
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: s.info(), children: [
+      /* @__PURE__ */ jsxs("h3", { className: s.name(), children: [
+        /* @__PURE__ */ jsxs("span", { className: "truncate", children: [
+          name,
+          age !== void 0 ? /* @__PURE__ */ jsx("span", { className: s.age(), children: `  ${age}` }) : null
+        ] }),
+        badge
+      ] }),
+      meta,
+      bio ? /* @__PURE__ */ jsx("p", { className: s.bio(), children: bio }) : null,
+      footer ? /* @__PURE__ */ jsx("div", { className: s.footer(), children: footer }) : null
+    ] })
+  ] });
+}
+function SwipeDeck({ items, getId, getName, renderCard, onSwipe, empty, labels, className }) {
+  const s = swipeDeck();
+  const reduce = usePrefersReducedMotion();
+  const [dx, setDx] = React.useState(0);
+  const [leaving, setLeaving] = React.useState(null);
+  const [message, setMessage] = React.useState("");
+  const start = React.useRef(null);
+  const [dragging, setDragging] = React.useState(false);
+  const top = items[0];
+  const decide = (direction) => {
+    if (!top || leaving) return;
+    const finish = () => {
+      setLeaving(null);
+      setDx(0);
+      setMessage(labels.decided ? labels.decided(getName(top), direction) : `${getName(top)}: ${direction === "like" ? labels.like : labels.pass}`);
+      onSwipe(top, direction);
+    };
+    if (reduce) return finish();
+    setLeaving(direction);
+    setTimeout(finish, 220);
+  };
+  const offset = leaving ? (leaving === "like" ? 1 : -1) * 900 : dx;
+  const stampOpacity = (dir) => Math.max(0, Math.min(1, dir * offset / 120));
+  return /* @__PURE__ */ jsxs("div", { className: s.root({ className }), children: [
+    /* @__PURE__ */ jsx("p", { className: "sr-only", "aria-live": "polite", children: message }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        role: "group",
+        "aria-label": labels.deck,
+        tabIndex: top ? 0 : -1,
+        className: s.stack(),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowRight") decide("like");
+          if (e.key === "ArrowLeft") decide("pass");
+        },
+        children: [
+          !top ? empty : null,
+          items.slice(0, 2).reverse().map((item) => {
+            const isTop = item === top;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "aria-hidden": !isTop || void 0,
+                inert: !isTop || void 0,
+                className: s.layer(),
+                style: isTop ? { transform: `translateX(${offset}px) rotate(${offset / 22}deg)`, transition: dragging && !leaving ? "none" : reduce ? "none" : "transform 220ms var(--kz-ease, ease-out)" } : { transform: "scale(0.96)", opacity: 0.9 },
+                onPointerDown: (e) => {
+                  if (!isTop || e.target.closest("button")) return;
+                  start.current = { x: e.clientX, width: e.currentTarget.offsetWidth };
+                  e.currentTarget.setPointerCapture(e.pointerId);
+                  setDragging(true);
+                },
+                onPointerMove: (e) => {
+                  if (start.current) setDx(e.clientX - start.current.x);
+                },
+                onPointerUp: () => {
+                  const width = start.current?.width ?? 300;
+                  start.current = null;
+                  setDragging(false);
+                  if (dx > width / 3) decide("like");
+                  else if (dx < -width / 3) decide("pass");
+                  else setDx(0);
+                },
+                children: [
+                  renderCard(item),
+                  isTop ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.stamp({ className: "left-6 -rotate-12 border-success text-fg-success" }), style: { opacity: stampOpacity(1) }, children: labels.likeStamp ?? labels.like }),
+                    /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: s.stamp({ className: "right-6 rotate-12 border-danger text-fg-danger" }), style: { opacity: stampOpacity(-1) }, children: labels.passStamp ?? labels.pass })
+                  ] }) : null
+                ]
+              },
+              getId(item)
+            );
+          })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: s.buttons(), children: [
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.pass, disabled: !top, onClick: () => decide("pass"), className: s.button({ className: "border-danger text-fg-danger" }), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6 6 18" }) }) }),
+      /* @__PURE__ */ jsx("button", { type: "button", "aria-label": labels.like, disabled: !top, onClick: () => decide("like"), className: s.button({ className: "border-success text-fg-success" }), children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: /* @__PURE__ */ jsx("path", { d: "M12 20s-7-4.4-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.6-7 10-7 10z" }) }) })
+    ] })
+  ] });
+}
+export {
+  PersonCard,
+  SwipeDeck,
+  swipeDeck
+};
+//# sourceMappingURL=swipe-deck.js.map