@blurrow/ui 0.2.0 → 0.2.1

package/dist/NumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/NumberInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, useId, useRef, useState } from \"react\";\nimport { FieldKey, FieldLabel, FieldMessage } from \"./FieldMessage\";\n\ninterface NumberInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"value\" | \"defaultValue\" | \"onChange\" | \"type\" | \"size\" | \"prefix\"> {\n  value?: number | null;\n  defaultValue?: number | null;\n  onChange?: (value: number | null) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Digits after the decimal point; inferred from `step` when left out */\n  precision?: number;\n  label?: string;\n  hint?: string;\n  error?: string;\n  /** A unit shown before or after the number, like \"$\" or \"kg\" */\n  prefix?: React.ReactNode;\n  suffix?: React.ReactNode;\n  fullWidth?: boolean;\n}\n\nconst decimals = (n: number) => (String(n).split(\".\")[1] ?? \"\").length;\n\n/* A sunken field with two small raised keys at its right edge. The keys\n   repeat while held, arrow keys step (shift for ten at a time), and\n   whatever you type is clamped and rounded when you leave the field.  */\nexport function NumberInput({\n  value,\n  defaultValue = null,\n  onChange,\n  min = -Infinity,\n  max = Infinity,\n  step = 1,\n  precision,\n  label,\n  hint,\n  error,\n  prefix,\n  suffix,\n  fullWidth = false,\n  disabled,\n  className = \"\",\n  id,\n  onBlur,\n  onKeyDown,\n  ...rest\n}: NumberInputProps) {\n  const uid = useId();\n  const inputId = id ?? `${uid}-input`;\n  const messageId = error || hint ? `${inputId}-message` : undefined;\n  const digits = precision ?? decimals(step);\n\n  const [internal, setInternal] = useState<number | null>(defaultValue);\n  const current = value !== undefined ? value : internal;\n  const format = (n: number | null) => (n === null ? \"\" : n.toFixed(digits));\n  const [draft, setDraft] = useState(format(current));\n  const editing = useRef(false);\n\n  // Follow the controlled value unless someone is mid-way through typing\n  useEffect(() => {\n    if (!editing.current) setDraft(format(current));\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [current, digits]);\n\n  const clamp = (n: number) => Math.min(max, Math.max(min, Number(n.toFixed(digits))));\n\n  // The hold-to-repeat timer reads the newest value from here, not a stale render\n  const latest = useRef(current);\n  useEffect(() => {\n    latest.current = current;\n  }, [current]);\n\n  const commit = (n: number | null) => {\n    const next = n === null || Number.isNaN(n) ? null : clamp(n);\n    const prev = latest.current;\n    latest.current = next;\n    setInternal(next);\n    setDraft(format(next));\n    if (next !== prev) onChange?.(next);\n  };\n\n  // An empty field starts from zero, or from the nearest edge of the range\n  const nudge = (dir: 1 | -1, times = 1) => {\n    const base = latest.current;\n    commit(base === null ? clamp(0) : base + dir * step * times);\n  };\n\n  const hold = useRef<{ t?: ReturnType<typeof setTimeout>; i?: ReturnType<typeof setInterval> }>({});\n  const stopHold = () => {\n    clearTimeout(hold.current.t);\n    clearInterval(hold.current.i);\n  };\n  useEffect(() => stopHold, []);\n  const startHold = (dir: 1 | -1) => {\n    stopHold();\n    nudge(dir);\n    hold.current.t = setTimeout(() => {\n      hold.current.i = setInterval(() => nudge(dir), 60);\n    }, 400);\n  };\n\n  const atMin = current !== null && current <= min;\n  const atMax = current !== null && current >= max;\n\n  return (\n    <div className={[\"group/field flex flex-col gap-1.5\", fullWidth ? \"w-full\" : \"\"].join(\" \")}>\n      {label && <FieldLabel htmlFor={inputId}>{label}</FieldLabel>}\n      <div className={[\"relative isolate\", fullWidth ? \"w-full\" : \"w-40\", className].join(\" \")}>\n        {prefix && (\n          <span className=\"pointer-events-none absolute left-3.5 top-1/2 z-20 -translate-y-1/2 text-[13.5px] text-ink-faint transition-colors duration-200 group-focus-within/field:text-ink-label\">\n            {prefix}\n          </span>\n        )}\n        <input\n          {...rest}\n          id={inputId}\n          type=\"text\"\n          inputMode={digits > 0 || min < 0 ? \"decimal\" : \"numeric\"}\n          autoComplete=\"off\"\n          role=\"spinbutton\"\n          aria-valuenow={current ?? undefined}\n          aria-valuemin={Number.isFinite(min) ? min : undefined}\n          aria-valuemax={Number.isFinite(max) ? max : undefined}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          disabled={disabled}\n          value={draft}\n          onChange={(e) => {\n            editing.current = true;\n            setDraft(e.target.value.replace(/[^\\d.,\\-]/g, \"\"));\n          }}\n          onBlur={(e) => {\n            editing.current = false;\n            const raw = draft.replace(\",\", \".\").trim();\n            commit(raw === \"\" || raw === \"-\" ? null : parseFloat(raw));\n            onBlur?.(e);\n          }}\n          onKeyDown={(e) => {\n            onKeyDown?.(e);\n            if (e.defaultPrevented) return;\n            const big = e.shiftKey ? 10 : 1;\n            if (e.key === \"ArrowUp\") { e.preventDefault(); editing.current = false; nudge(1, big); }\n            else if (e.key === \"ArrowDown\") { e.preventDefault(); editing.current = false; nudge(-1, big); }\n            else if (e.key === \"PageUp\") { e.preventDefault(); nudge(1, 10); }\n            else if (e.key === \"PageDown\") { e.preventDefault(); nudge(-1, 10); }\n            else if (e.key === \"Home\" && Number.isFinite(min)) { e.preventDefault(); commit(min); }\n            else if (e.key === \"End\" && Number.isFinite(max)) { e.preventDefault(); commit(max); }\n            else if (e.key === \"Enter\") { (e.target as HTMLInputElement).blur(); (e.target as HTMLInputElement).focus(); }\n          }}\n          className={[\n            \"field relative z-10 w-full rounded-xl py-3 text-[13.5px] tabular-nums text-ink caret-ink\",\n            \"placeholder:text-ink-faint focus:placeholder:text-ink-ghost\",\n            \"disabled:opacity-40 disabled:cursor-not-allowed\",\n            prefix ? \"pl-8\" : \"pl-4\",\n            suffix ? \"pr-[92px]\" : \"pr-[64px]\",\n          ].join(\" \")}\n        />\n        {suffix && (\n          <span className=\"pointer-events-none absolute right-[64px] top-1/2 z-20 -translate-y-1/2 text-[12.5px] text-ink-faint\">\n            {suffix}\n          </span>\n        )}\n        <div\n          className={[\n            \"absolute right-1.5 top-1/2 z-20 flex -translate-y-1/2 gap-1\",\n            disabled ? \"opacity-40 pointer-events-none\" : \"\",\n          ].join(\" \")}\n        >\n          <FieldKey label=\"decrease\" focusable={false} disabled={atMin} onPress={() => startHold(-1)} onRelease={stopHold}>\n            <path d=\"M5 12h14\" />\n          </FieldKey>\n          <FieldKey label=\"increase\" focusable={false} disabled={atMax} onPress={() => startHold(1)} onRelease={stopHold}>\n            <path d=\"M12 5v14M5 12h14\" />\n          </FieldKey>\n        </div>\n      </div>\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/OtpInput.d.ts

@@ -0,0 +1,26 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface OtpInputProps {
+    /** How many characters */
+    length?: number;
+    value?: string;
+    defaultValue?: string;
+    onChange?: (code: string) => void;
+    /** Fires once every cell is filled, with the whole code */
+    onComplete?: (code: string) => void;
+    /** Digits only, or letters and digits */
+    type?: "numeric" | "alphanumeric";
+    /** Split the cells into wells of this many, like 123 456 */
+    groupSize?: number;
+    /** Show dots instead of the characters */
+    mask?: boolean;
+    label?: string;
+    hint?: string;
+    error?: string;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    name?: string;
+}
+declare function OtpInput({ length, value, defaultValue, onChange, onComplete, type, groupSize, mask, label, hint, error, disabled, autoFocus, name, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+
+export { OtpInput };

package/dist/OtpInput.js

@@ -0,0 +1,173 @@
+"use client";
+
+// ../../components/ui/OtpInput.tsx
+import React, { useId, useRef, useState } from "react";
+import { FieldLabel, FieldMessage } from "./FieldMessage.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CELL = 44;
+function OtpInput({
+  length = 6,
+  value,
+  defaultValue = "",
+  onChange,
+  onComplete,
+  type = "numeric",
+  groupSize,
+  mask = false,
+  label,
+  hint,
+  error,
+  disabled = false,
+  autoFocus = false,
+  name
+}) {
+  const uid = useId();
+  const inputRef = useRef(null);
+  const [internal, setInternal] = useState(defaultValue.slice(0, length));
+  const code = (value !== void 0 ? value : internal).slice(0, length);
+  const [focused, setFocused] = useState(false);
+  const [cursor, setCursor] = useState(0);
+  const messageId = error || hint ? `${uid}-message` : void 0;
+  const at = Math.min(cursor, code.length, length - 1);
+  const pattern = type === "numeric" ? /[^0-9]/g : /[^0-9a-z]/gi;
+  const selectCell = (i) => {
+    const el = inputRef.current;
+    if (!el) return;
+    const n = el.value.length;
+    const pos = Math.max(0, Math.min(i, n));
+    el.setSelectionRange(pos, pos < n ? pos + 1 : pos);
+    setCursor(pos);
+  };
+  const groups = groupSize && groupSize < length ? Math.ceil(length / groupSize) : 1;
+  const per = groups > 1 ? groupSize : length;
+  return /* @__PURE__ */ jsxs("div", { className: "group/field flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsx(FieldLabel, { id: `${uid}-label`, htmlFor: `${uid}-input`, children: label }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["relative flex w-fit items-center gap-3", disabled ? "opacity-40" : ""].join(" "),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: inputRef,
+              id: `${uid}-input`,
+              type: mask ? "password" : "text",
+              inputMode: type === "numeric" ? "numeric" : "text",
+              autoComplete: "one-time-code",
+              autoCapitalize: "characters",
+              autoFocus,
+              spellCheck: false,
+              maxLength: length,
+              disabled,
+              value: code,
+              "aria-invalid": error ? true : void 0,
+              "aria-describedby": messageId,
+              "aria-label": label ? void 0 : `${length}-character code`,
+              onClick: (e) => {
+                const cell = document.elementsFromPoint(e.clientX, e.clientY).find((el) => el instanceof HTMLElement && el.dataset.cell !== void 0);
+                selectCell(cell ? Number(cell.dataset.cell) : code.length);
+              },
+              onFocus: () => {
+                setFocused(true);
+                requestAnimationFrame(() => selectCell(code.length));
+              },
+              onBlur: () => setFocused(false),
+              onChange: (e) => {
+                const next = e.target.value.replace(pattern, "").toUpperCase().slice(0, length);
+                setInternal(next);
+                onChange?.(next);
+                if (next.length === length && next !== code) onComplete?.(next);
+                const pos = Math.min(e.target.selectionStart ?? next.length, next.length);
+                requestAnimationFrame(() => selectCell(pos));
+              },
+              onKeyDown: (e) => {
+                if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+                  e.preventDefault();
+                  selectCell(at + (e.key === "ArrowLeft" ? -1 : 1));
+                } else if (e.key === "Home" || e.key === "End") {
+                  e.preventDefault();
+                  selectCell(e.key === "Home" ? 0 : code.length);
+                }
+              },
+              onSelect: (e) => {
+                const el = e.currentTarget;
+                setCursor(Math.min(el.selectionStart ?? 0, length - 1));
+              },
+              className: "absolute inset-0 z-30 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed",
+              style: {
+                fontSize: 16
+                /* stops iOS zooming in on focus */
+              }
+            }
+          ),
+          Array.from({ length: groups }, (_, g) => {
+            const start = g * per;
+            const cells = Math.min(per, length - start);
+            const caretHere = focused && at >= start && at < start + cells;
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              g > 0 && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": true,
+                  className: "h-[2px] w-2.5 shrink-0 rounded-full",
+                  style: { background: "var(--groove)", boxShadow: "var(--groove-lip-below)" }
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  "aria-hidden": true,
+                  "data-open": caretHere || void 0,
+                  "data-invalid": error ? true : void 0,
+                  className: "field relative z-10 flex h-[52px] overflow-hidden rounded-xl",
+                  children: [
+                    Array.from({ length: cells }, (_2, k) => {
+                      const i = start + k;
+                      const ch = code[i];
+                      return /* @__PURE__ */ jsxs("div", { "data-cell": i, className: "relative grid place-items-center", style: { width: CELL }, children: [
+                        k > 0 && /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            className: "absolute inset-y-3 left-0 w-px",
+                            style: { background: "var(--groove)", boxShadow: "var(--groove-lip)" }
+                          }
+                        ),
+                        ch && (mask ? /* @__PURE__ */ jsx("span", { className: "animate-checkbox-in h-2.5 w-2.5 rounded-full bg-ink" }, ch + i) : /* @__PURE__ */ jsx("span", { className: "animate-checkbox-in text-[20px] font-semibold tabular-nums text-ink", children: ch }, ch + i)),
+                        caretHere && i === at && ch && /* @__PURE__ */ jsx("span", { className: "absolute inset-x-1.5 bottom-2 h-[2px] rounded-full bg-ink animate-otp-caret" })
+                      ] }, i);
+                    }),
+                    caretHere && !code[at] && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "pointer-events-none absolute top-1/2 h-[22px] w-[2px] -translate-y-1/2",
+                        style: {
+                          left: (at - start) * CELL + CELL / 2 - 1,
+                          transition: "left 260ms var(--ease-spring)"
+                        },
+                        children: /* @__PURE__ */ jsx("span", { className: "block h-full w-full animate-otp-caret rounded-full bg-ink" })
+                      }
+                    ),
+                    caretHere && /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: "pointer-events-none absolute inset-y-0 -left-[30%] block w-[30%] animate-input-shimmer",
+                        style: { background: "linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)" }
+                      }
+                    )
+                  ]
+                }
+              )
+            ] }, g);
+          })
+        ]
+      }
+    ),
+    name && /* @__PURE__ */ jsx("input", { type: "hidden", name, value: code }),
+    /* @__PURE__ */ jsx(FieldMessage, { id: messageId, error, hint })
+  ] });
+}
+export {
+  OtpInput
+};
+//# sourceMappingURL=OtpInput.js.map

package/dist/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/OtpInput.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useId, useRef, useState } from \"react\";\nimport { FieldLabel, FieldMessage } from \"./FieldMessage\";\n\ninterface OtpInputProps {\n  /** How many characters */\n  length?: number;\n  value?: string;\n  defaultValue?: string;\n  onChange?: (code: string) => void;\n  /** Fires once every cell is filled, with the whole code */\n  onComplete?: (code: string) => void;\n  /** Digits only, or letters and digits */\n  type?: \"numeric\" | \"alphanumeric\";\n  /** Split the cells into wells of this many, like 123 456 */\n  groupSize?: number;\n  /** Show dots instead of the characters */\n  mask?: boolean;\n  label?: string;\n  hint?: string;\n  error?: string;\n  disabled?: boolean;\n  autoFocus?: boolean;\n  name?: string;\n}\n\nconst CELL = 44;\n\n/* One real input sits underneath, so typing, backspace, paste and the\n   phone filling the code from a text all behave natively. What you see\n   is drawn over it: each group is a single sunken field, cut into cells\n   by scored grooves, that lifts flush and draws its border while you're\n   in it, exactly like Input. A caret glides from cell to cell on a\n   spring as you type, and characters press into place.             */\nexport function OtpInput({\n  length = 6,\n  value,\n  defaultValue = \"\",\n  onChange,\n  onComplete,\n  type = \"numeric\",\n  groupSize,\n  mask = false,\n  label,\n  hint,\n  error,\n  disabled = false,\n  autoFocus = false,\n  name,\n}: OtpInputProps) {\n  const uid = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [internal, setInternal] = useState(defaultValue.slice(0, length));\n  const code = (value !== undefined ? value : internal).slice(0, length);\n  const [focused, setFocused] = useState(false);\n  // The cell the caret is in: the selection start, kept within the code\n  const [cursor, setCursor] = useState(0);\n  const messageId = error || hint ? `${uid}-message` : undefined;\n  const at = Math.min(cursor, code.length, length - 1);\n\n  const pattern = type === \"numeric\" ? /[^0-9]/g : /[^0-9a-z]/gi;\n\n  /* A filled cell is selected rather than sitting behind a caret, so\n     typing over it replaces it in place                              */\n  const selectCell = (i: number) => {\n    const el = inputRef.current;\n    if (!el) return;\n    const n = el.value.length;\n    const pos = Math.max(0, Math.min(i, n));\n    el.setSelectionRange(pos, pos < n ? pos + 1 : pos);\n    setCursor(pos);\n  };\n\n  const groups = groupSize && groupSize < length ? Math.ceil(length / groupSize) : 1;\n  const per = groups > 1 ? groupSize! : length;\n\n  return (\n    <div className=\"group/field flex flex-col gap-1.5\">\n      {label && (\n        <FieldLabel id={`${uid}-label`} htmlFor={`${uid}-input`}>\n          {label}\n        </FieldLabel>\n      )}\n\n      <div\n        className={[\"relative flex w-fit items-center gap-3\", disabled ? \"opacity-40\" : \"\"].join(\" \")}\n      >\n        <input\n          ref={inputRef}\n          id={`${uid}-input`}\n          type={mask ? \"password\" : \"text\"}\n          inputMode={type === \"numeric\" ? \"numeric\" : \"text\"}\n          autoComplete=\"one-time-code\"\n          autoCapitalize=\"characters\"\n          autoFocus={autoFocus}\n          spellCheck={false}\n          maxLength={length}\n          disabled={disabled}\n          value={code}\n          aria-invalid={error ? true : undefined}\n          aria-describedby={messageId}\n          aria-label={label ? undefined : `${length}-character code`}\n          // The input lies over the cells; send the caret to whichever was clicked\n          onClick={(e) => {\n            const cell = document\n              .elementsFromPoint(e.clientX, e.clientY)\n              .find((el): el is HTMLElement => el instanceof HTMLElement && el.dataset.cell !== undefined);\n            selectCell(cell ? Number(cell.dataset.cell) : code.length);\n          }}\n          onFocus={() => {\n            setFocused(true);\n            requestAnimationFrame(() => selectCell(code.length));\n          }}\n          onBlur={() => setFocused(false)}\n          onChange={(e) => {\n            const next = e.target.value.replace(pattern, \"\").toUpperCase().slice(0, length);\n            setInternal(next);\n            onChange?.(next);\n            if (next.length === length && next !== code) onComplete?.(next);\n            const pos = Math.min(e.target.selectionStart ?? next.length, next.length);\n            requestAnimationFrame(() => selectCell(pos));\n          }}\n          onKeyDown={(e) => {\n            if (e.key === \"ArrowLeft\" || e.key === \"ArrowRight\") {\n              e.preventDefault();\n              selectCell(at + (e.key === \"ArrowLeft\" ? -1 : 1));\n            } else if (e.key === \"Home\" || e.key === \"End\") {\n              e.preventDefault();\n              selectCell(e.key === \"Home\" ? 0 : code.length);\n            }\n          }}\n          onSelect={(e) => {\n            const el = e.currentTarget;\n            setCursor(Math.min(el.selectionStart ?? 0, length - 1));\n          }}\n          // Invisible, but it's what a tap lands on, so phones raise their keyboard\n          className=\"absolute inset-0 z-30 h-full w-full cursor-text opacity-0 disabled:cursor-not-allowed\"\n          style={{ fontSize: 16 /* stops iOS zooming in on focus */ }}\n        />\n\n        {Array.from({ length: groups }, (_, g) => {\n          const start = g * per;\n          const cells = Math.min(per, length - start);\n          const caretHere = focused && at >= start && at < start + cells;\n          return (\n            <React.Fragment key={g}>\n              {g > 0 && (\n                <span\n                  aria-hidden\n                  className=\"h-[2px] w-2.5 shrink-0 rounded-full\"\n                  style={{ background: \"var(--groove)\", boxShadow: \"var(--groove-lip-below)\" }}\n                />\n              )}\n              {/* One field per group: data-open gives it the focused well */}\n              <div\n                aria-hidden\n                data-open={caretHere || undefined}\n                data-invalid={error ? true : undefined}\n                className=\"field relative z-10 flex h-[52px] overflow-hidden rounded-xl\"\n              >\n                {Array.from({ length: cells }, (_, k) => {\n                  const i = start + k;\n                  const ch = code[i];\n                  return (\n                    <div key={i} data-cell={i} className=\"relative grid place-items-center\" style={{ width: CELL }}>\n                      {k > 0 && (\n                        <span\n                          className=\"absolute inset-y-3 left-0 w-px\"\n                          style={{ background: \"var(--groove)\", boxShadow: \"var(--groove-lip)\" }}\n                        />\n                      )}\n                      {ch &&\n                        (mask ? (\n                          <span key={ch + i} className=\"animate-checkbox-in h-2.5 w-2.5 rounded-full bg-ink\" />\n                        ) : (\n                          <span key={ch + i} className=\"animate-checkbox-in text-[20px] font-semibold tabular-nums text-ink\">\n                            {ch}\n                          </span>\n                        ))}\n                      {/* A filled cell under the caret is picked out, ready to be typed over */}\n                      {caretHere && i === at && ch && (\n                        <span className=\"absolute inset-x-1.5 bottom-2 h-[2px] rounded-full bg-ink animate-otp-caret\" />\n                      )}\n                    </div>\n                  );\n                })}\n\n                {/* The caret glides between the empty cells of this group */}\n                {caretHere && !code[at] && (\n                  <span\n                    className=\"pointer-events-none absolute top-1/2 h-[22px] w-[2px] -translate-y-1/2\"\n                    style={{\n                      left: (at - start) * CELL + CELL / 2 - 1,\n                      transition: \"left 260ms var(--ease-spring)\",\n                    }}\n                  >\n                    <span className=\"block h-full w-full animate-otp-caret rounded-full bg-ink\" />\n                  </span>\n                )}\n\n                {/* Input's sweep of light as the well comes up */}\n                {caretHere && (\n                  <span\n                    className=\"pointer-events-none absolute inset-y-0 -left-[30%] block w-[30%] animate-input-shimmer\"\n                    style={{ background: \"linear-gradient(90deg, transparent 0%, var(--shimmer) 50%, transparent 100%)\" }}\n                  />\n                )}\n              </div>\n            </React.Fragment>\n          );\n        })}\n      </div>\n\n      {name && <input type=\"hidden\" name={name} value={code} />}\n      <FieldMessage id={messageId} error={error} hint={hint} />\n    </div>\n  );\n}\n"],"mappings":"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","names":["_"]}

package/dist/Pagination.d.ts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    className?: string;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+export { Pagination };

package/dist/Pagination.js

@@ -0,0 +1,148 @@
+"use client";
+
+// ../../components/ui/Pagination.tsx
+import { useRef, useState, useEffect, useLayoutEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  className = ""
+}) {
+  const slots = buildSlots(currentPage, totalPages);
+  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });
+  const containerRef = useRef(null);
+  const btnRefs = useRef({});
+  const measurePill = (page) => {
+    const btn = btnRefs.current[String(page)];
+    const container = containerRef.current;
+    if (!btn || !container) return;
+    const cr = container.getBoundingClientRect();
+    const br = btn.getBoundingClientRect();
+    setPill({ left: br.left - cr.left, width: br.width, ready: true });
+  };
+  useLayoutEffect(() => {
+    measurePill(currentPage);
+  }, [currentPage]);
+  useEffect(() => {
+    const ro = new ResizeObserver(() => measurePill(currentPage));
+    if (containerRef.current) ro.observe(containerRef.current);
+    return () => ro.disconnect();
+  }, [currentPage]);
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Pagination",
+      className: [
+        "inline-flex items-center gap-0.5 rounded-[13px] p-1",
+        className
+      ].join(" "),
+      style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onPageChange(currentPage - 1),
+            disabled: currentPage <= 1,
+            "aria-label": "Previous page",
+            className: "group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]" }),
+              /* @__PURE__ */ jsx("svg", { className: "relative z-10", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" }) }),
+              /* @__PURE__ */ jsx("span", { className: "relative z-10 hidden sm:inline", children: "prev" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { ref: containerRef, className: "relative flex items-center", children: [
+          pill.ready && /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": true,
+              className: "absolute top-0 bottom-0 rounded-[9px] pointer-events-none z-0",
+              style: {
+                left: pill.left,
+                width: pill.width,
+                background: "var(--face)",
+                boxShadow: "var(--thumb-shadow)",
+                transition: "left 340ms var(--ease-out-soft), width 340ms var(--ease-out-soft)"
+              }
+            }
+          ),
+          slots.map(
+            (slot, i) => slot === "..." ? /* @__PURE__ */ jsx(
+              "span",
+              {
+                "aria-hidden": true,
+                className: "w-8 h-8 flex items-center justify-center text-[11px] text-ink-faint select-none relative z-10",
+                children: "\xB7\xB7\xB7"
+              },
+              `dot-${i}`
+            ) : /* @__PURE__ */ jsx(
+              "button",
+              {
+                ref: (el) => {
+                  btnRefs.current[String(slot)] = el;
+                },
+                onClick: () => slot !== currentPage && onPageChange(slot),
+                "aria-label": `Page ${slot}`,
+                "aria-current": slot === currentPage ? "page" : void 0,
+                className: [
+                  "relative z-10 min-w-8 h-8 px-1 rounded-[9px] flex items-center justify-center text-[13px] font-medium transition-colors duration-200 cursor-pointer tabular-nums",
+                  slot === currentPage ? "text-ink" : "text-ink-muted hover:text-ink"
+                ].join(" "),
+                children: slot
+              },
+              `slot-${i}`
+            )
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => onPageChange(currentPage + 1),
+            disabled: currentPage >= totalPages,
+            "aria-label": "Next page",
+            className: "group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none",
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]" }),
+              /* @__PURE__ */ jsx("span", { className: "relative z-10 hidden sm:inline", children: "next" }),
+              /* @__PURE__ */ jsx("svg", { className: "relative z-10", width: "12", height: "12", fill: "none", stroke: "currentColor", strokeWidth: "2", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function buildSlots(current, total) {
+  if (total <= 7) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+  const slots = new Array(7);
+  slots[0] = 1;
+  slots[6] = total;
+  if (current <= 3) {
+    slots[1] = 2;
+    slots[2] = 3;
+    slots[3] = 4;
+    slots[4] = 5;
+    slots[5] = "...";
+  } else if (current >= total - 2) {
+    slots[1] = "...";
+    slots[2] = total - 4;
+    slots[3] = total - 3;
+    slots[4] = total - 2;
+    slots[5] = total - 1;
+  } else {
+    slots[1] = "...";
+    slots[2] = current - 1;
+    slots[3] = current;
+    slots[4] = current + 1;
+    slots[5] = "...";
+  }
+  return slots;
+}
+export {
+  Pagination
+};
+//# sourceMappingURL=Pagination.js.map

package/dist/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Pagination.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useRef, useState, useEffect, useLayoutEffect } from \"react\";\n\ninterface PaginationProps {\n  currentPage: number;\n  totalPages: number;\n  onPageChange: (page: number) => void;\n  className?: string;\n}\n\nexport function Pagination({\n  currentPage,\n  totalPages,\n  onPageChange,\n  className = \"\",\n}: PaginationProps) {\n  const slots = buildSlots(currentPage, totalPages);\n  const [pill, setPill] = useState({ left: 0, width: 0, ready: false });\n  const containerRef = useRef<HTMLDivElement>(null);\n  const btnRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n  const measurePill = (page: number) => {\n    const btn = btnRefs.current[String(page)];\n    const container = containerRef.current;\n    if (!btn || !container) return;\n    const cr = container.getBoundingClientRect();\n    const br = btn.getBoundingClientRect();\n    setPill({ left: br.left - cr.left, width: br.width, ready: true });\n  };\n\n  /* Only the thumb moves: it glides to the new page without overshoot,\n     and the numbers themselves stay still. Measured before paint, so it\n     is never seen out of place.                                        */\n  useLayoutEffect(() => {\n    measurePill(currentPage);\n  }, [currentPage]);\n\n  useEffect(() => {\n    const ro = new ResizeObserver(() => measurePill(currentPage));\n    if (containerRef.current) ro.observe(containerRef.current);\n    return () => ro.disconnect();\n  }, [currentPage]);\n\n  return (\n    <nav\n      aria-label=\"Pagination\"\n      className={[\n        \"inline-flex items-center gap-0.5 rounded-[13px] p-1\",\n        className,\n      ].join(\" \")}\n      style={{ background: \"var(--well)\", boxShadow: \"var(--well-shadow)\" }}\n    >\n      <button\n        onClick={() => onPageChange(currentPage - 1)}\n        disabled={currentPage <= 1}\n        aria-label=\"Previous page\"\n        className=\"group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none\"\n      >\n        <span className=\"pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]\" />\n        <svg className=\"relative z-10\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n        </svg>\n        <span className=\"relative z-10 hidden sm:inline\">prev</span>\n      </button>\n\n      <div ref={containerRef} className=\"relative flex items-center\">\n        {pill.ready && (\n          <span\n            aria-hidden\n            className=\"absolute top-0 bottom-0 rounded-[9px] pointer-events-none z-0\"\n            style={{\n              left: pill.left,\n              width: pill.width,\n              background: \"var(--face)\",\n              boxShadow: \"var(--thumb-shadow)\",\n              transition: \"left 340ms var(--ease-out-soft), width 340ms var(--ease-out-soft)\",\n            }}\n          />\n        )}\n\n        {slots.map((slot, i) =>\n          slot === \"...\" ? (\n            <span\n              key={`dot-${i}`}\n              aria-hidden\n              className=\"w-8 h-8 flex items-center justify-center text-[11px] text-ink-faint select-none relative z-10\"\n            >\n              ···\n            </span>\n          ) : (\n            <button\n              key={`slot-${i}`}\n              ref={(el) => {\n                btnRefs.current[String(slot)] = el;\n              }}\n              onClick={() => slot !== currentPage && onPageChange(slot as number)}\n              aria-label={`Page ${slot}`}\n              aria-current={slot === currentPage ? \"page\" : undefined}\n              className={[\n                \"relative z-10 min-w-8 h-8 px-1 rounded-[9px] flex items-center justify-center text-[13px] font-medium transition-colors duration-200 cursor-pointer tabular-nums\",\n                slot === currentPage\n                  ? \"text-ink\"\n                  : \"text-ink-muted hover:text-ink\",\n              ].join(\" \")}\n            >\n              {slot}\n            </button>\n          ),\n        )}\n      </div>\n\n      <button\n        onClick={() => onPageChange(currentPage + 1)}\n        disabled={currentPage >= totalPages}\n        aria-label=\"Next page\"\n        className=\"group/nav relative overflow-hidden h-8 px-3 rounded-[9px] flex items-center gap-1.5 text-[13px] font-medium text-ink-body hover:text-ink transition-colors cursor-pointer disabled:opacity-30 disabled:pointer-events-none\"\n      >\n        <span className=\"pointer-events-none absolute inset-0 rounded-[9px] opacity-0 group-hover/nav:opacity-100 transition-opacity duration-200 [background:var(--face)] [box-shadow:var(--thumb-shadow)]\" />\n        <span className=\"relative z-10 hidden sm:inline\">next</span>\n        <svg className=\"relative z-10\" width=\"12\" height=\"12\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" viewBox=\"0 0 24 24\">\n          <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n        </svg>\n      </button>\n    </nav>\n  );\n}\n\nfunction buildSlots(current: number, total: number): (number | \"...\")[] {\n  if (total <= 7) {\n    return Array.from({ length: total }, (_, i) => i + 1);\n  }\n\n  const slots: (number | \"...\")[] = new Array(7);\n\n  slots[0] = 1;\n  slots[6] = total;\n\n  if (current <= 3) {\n    slots[1] = 2;\n    slots[2] = 3;\n    slots[3] = 4;\n    slots[4] = 5;\n    slots[5] = \"...\";\n  } else if (current >= total - 2) {\n    slots[1] = \"...\";\n    slots[2] = total - 4;\n    slots[3] = total - 3;\n    slots[4] = total - 2;\n    slots[5] = total - 1;\n  } else {\n    slots[1] = \"...\";\n    slots[2] = current - 1;\n    slots[3] = current;\n    slots[4] = current + 1;\n    slots[5] = \"...\";\n  }\n\n  return slots;\n}\n"],"mappings":"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","names":[]}

package/dist/Popover.d.ts

@@ -0,0 +1,13 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+type PopoverPosition = "top" | "bottom" | "left" | "right";
+interface PopoverProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    position?: PopoverPosition;
+    className?: string;
+}
+declare function Popover({ trigger, children, position, className, }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+export { Popover };

package/dist/Popover.js

@@ -0,0 +1,98 @@
+"use client";
+
+// ../../components/ui/Popover.tsx
+import React, { useState, useRef, useEffect, useId } from "react";
+import { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from "./Floating.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Popover({
+  trigger,
+  children,
+  position = "bottom",
+  className = ""
+}) {
+  const [open, setOpen] = useState(false);
+  const [visible, setVisible] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const ref = useRef(null);
+  const uid = useId();
+  const { setFloating, floatingRef, side } = useAnchoredPosition(ref, { open: mounted, side: position, align: "center" });
+  if (open && !mounted) setMounted(true);
+  if (!open && visible) setVisible(false);
+  useEffect(() => {
+    if (open) {
+      requestAnimationFrame(
+        () => requestAnimationFrame(() => {
+          setVisible(true);
+          const panel = floatingRef.current;
+          const first = panel?.querySelector(
+            'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex="-1"])'
+          );
+          (first ?? panel)?.focus({ preventScroll: true });
+        })
+      );
+    } else {
+      const t = setTimeout(() => setMounted(false), 180);
+      return () => clearTimeout(t);
+    }
+  }, [open, floatingRef]);
+  useEffect(() => {
+    function onOutside(e) {
+      const t = e.target;
+      if (ref.current?.contains(t) || floatingRef.current?.contains(t)) return;
+      setOpen(false);
+    }
+    document.addEventListener("mousedown", onOutside);
+    return () => document.removeEventListener("mousedown", onOutside);
+  }, [floatingRef]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+        ref.current?.querySelector("[data-popover-trigger] button, [data-popover-trigger] a")?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open]);
+  return /* @__PURE__ */ jsxs("div", { ref, className: ["relative inline-flex", className].join(" "), children: [
+    /* @__PURE__ */ jsx("div", { "data-popover-trigger": true, onClick: () => setOpen((v) => !v), className: "inline-flex cursor-pointer", children: React.isValidElement(trigger) ? React.cloneElement(trigger, {
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? `${uid}-popover` : void 0
+    }) : trigger }),
+    mounted && /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: setFloating,
+        id: `${uid}-popover`,
+        role: "dialog",
+        tabIndex: -1,
+        className: "outline-none min-w-[220px] max-w-[calc(100vw-16px)] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]",
+        style: {
+          position: "fixed",
+          top: 0,
+          left: 0,
+          zIndex: LAYER.floating,
+          transformOrigin: ORIGIN[side],
+          opacity: visible ? 1 : 0,
+          transform: visible ? "none" : `${ENTER_FROM[side]} scale(0.96)`,
+          background: "var(--panel-bezel)",
+          boxShadow: "var(--overlay-shadow)"
+        },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "bg-panel-face rounded-[11px] p-3.5 text-[13px] text-ink-body leading-relaxed",
+            style: { boxShadow: "var(--panel-face-shadow)" },
+            children
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  Popover
+};
+//# sourceMappingURL=Popover.js.map

package/dist/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../components/ui/Popover.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useRef, useEffect, useId } from \"react\";\nimport { ENTER_FROM, LAYER, ORIGIN, Portal, useAnchoredPosition } from \"./Floating\";\n\ntype PopoverPosition = \"top\" | \"bottom\" | \"left\" | \"right\";\n\ninterface PopoverProps {\n  trigger: React.ReactNode;\n  children: React.ReactNode;\n  position?: PopoverPosition;\n  className?: string;\n}\n\nexport function Popover({\n  trigger,\n  children,\n  position = \"bottom\",\n  className = \"\",\n}: PopoverProps) {\n  const [open, setOpen] = useState(false);\n  const [visible, setVisible] = useState(false);\n  const [mounted, setMounted] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n  const uid = useId();\n  // Portalled and pinned beside the trigger, flipping if there's no room\n  const { setFloating, floatingRef, side } = useAnchoredPosition(ref, { open: mounted, side: position, align: \"center\" });\n\n  /* Mounted and faded out during render; the effect only times the rest */\n  if (open && !mounted) setMounted(true);\n  if (!open && visible) setVisible(false);\n\n  useEffect(() => {\n    if (open) {\n      requestAnimationFrame(() =>\n        requestAnimationFrame(() => {\n          setVisible(true);\n          // The panel lives at the end of <body>; bring focus to it so Tab reaches its contents\n          const panel = floatingRef.current;\n          const first = panel?.querySelector<HTMLElement>(\n            'button:not([disabled]), [href], input:not([disabled]), select, textarea, [tabindex]:not([tabindex=\"-1\"])',\n          );\n          (first ?? panel)?.focus({ preventScroll: true });\n        }),\n      );\n    } else {\n      const t = setTimeout(() => setMounted(false), 180);\n      return () => clearTimeout(t);\n    }\n  }, [open, floatingRef]);\n\n  useEffect(() => {\n    function onOutside(e: MouseEvent) {\n      const t = e.target as Node;\n      if (ref.current?.contains(t) || floatingRef.current?.contains(t)) return;\n      setOpen(false);\n    }\n    document.addEventListener(\"mousedown\", onOutside);\n    return () => document.removeEventListener(\"mousedown\", onOutside);\n  }, [floatingRef]);\n\n  useEffect(() => {\n    if (!open) return;\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") {\n        setOpen(false);\n        ref.current?.querySelector<HTMLElement>(\"[data-popover-trigger] button, [data-popover-trigger] a\")?.focus();\n      }\n    };\n    document.addEventListener(\"keydown\", onKey);\n    return () => document.removeEventListener(\"keydown\", onKey);\n  }, [open]);\n\n  return (\n    <div ref={ref} className={[\"relative inline-flex\", className].join(\" \")}>\n      <div data-popover-trigger onClick={() => setOpen((v) => !v)} className=\"inline-flex cursor-pointer\">\n        {React.isValidElement(trigger)\n          ? React.cloneElement(trigger as React.ReactElement<Record<string, unknown>>, {\n              \"aria-haspopup\": \"dialog\",\n              \"aria-expanded\": open,\n              \"aria-controls\": open ? `${uid}-popover` : undefined,\n            })\n          : trigger}\n      </div>\n      {mounted && (\n        <Portal>\n          <div\n            ref={setFloating}\n            id={`${uid}-popover`}\n            role=\"dialog\"\n            tabIndex={-1}\n            className=\"outline-none min-w-[220px] max-w-[calc(100vw-16px)] rounded-[16px] p-1.5 transition-[opacity,transform] duration-200 ease-[var(--ease-spring)]\"\n            style={{\n              position: \"fixed\",\n              top: 0,\n              left: 0,\n              zIndex: LAYER.floating,\n              transformOrigin: ORIGIN[side],\n              opacity: visible ? 1 : 0,\n              transform: visible ? \"none\" : `${ENTER_FROM[side]} scale(0.96)`,\n              background: \"var(--panel-bezel)\",\n              boxShadow: \"var(--overlay-shadow)\",\n            }}\n          >\n            <div\n              className=\"bg-panel-face rounded-[11px] p-3.5 text-[13px] text-ink-body leading-relaxed\"\n              style={{ boxShadow: \"var(--panel-face-shadow)\" }}\n            >\n              {children}\n            </div>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/Progress.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface ProgressProps {
+    value: number;
+    max?: number;
+    label?: string;
+    showValue?: boolean;
+    className?: string;
+}
+declare function Progress({ value, max, label, showValue, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+export { Progress };

package/dist/Progress.js

@@ -0,0 +1,61 @@
+"use client";
+
+// ../../components/ui/Progress.tsx
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = false,
+  className = ""
+}) {
+  const pct = Math.min(Math.max(value / max * 100, 0), 100);
+  const [displayed, setDisplayed] = useState(0);
+  const t = useRef(null);
+  useEffect(() => {
+    t.current = setTimeout(() => setDisplayed(pct), 80);
+    return () => {
+      if (t.current) clearTimeout(t.current);
+    };
+  }, [pct]);
+  return /* @__PURE__ */ jsxs("div", { className: ["flex flex-col gap-2", className].join(" "), children: [
+    (label || showValue) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+      label && /* @__PURE__ */ jsx("span", { className: "text-[13px] font-medium text-ink-label truncate", children: label }),
+      showValue && /* @__PURE__ */ jsxs("span", { "aria-hidden": true, className: "text-[12px] tabular-nums text-ink-muted shrink-0", children: [
+        Math.round(pct),
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "w-full h-2 rounded-full p-px overflow-hidden",
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        style: { background: "var(--well)", boxShadow: "var(--well-shadow)" },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full relative overflow-hidden",
+            style: {
+              width: `${displayed}%`,
+              /* Never collapses below a pill, so 1% still reads as started */
+              minWidth: displayed > 0 ? 6 : 0,
+              background: "var(--face-inverse)",
+              boxShadow: "var(--fill-shadow)",
+              transition: "width 700ms var(--ease-out-soft)"
+            }
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  Progress
+};
+//# sourceMappingURL=Progress.js.map