@craftzbay/ui 0.9.0 → 0.11.0

package/dist-lib/components/ui/Pagination.js

@@ -0,0 +1,153 @@
+"use client";
+import { jsxs as d, jsx as i } from "react/jsx-runtime";
+import { forwardRef as A, useId as B, useMemo as E } from "react";
+import { ChevronsLeft as T, ChevronLeft as V, ChevronRight as _, ChevronsRight as $ } from "../../icons/index.js";
+import { cn as g } from "../../lib/utils.js";
+import { useStrings as q } from "../../hooks/use-strings.js";
+import { defaultStrings as z, formatString as h } from "../../lib/strings.js";
+import { Select as D, SelectTrigger as G, SelectContent as H, SelectItem as K } from "./Select.js";
+function y(r) {
+  return {
+    showing: (e, t, c) => h(r.showing, { from: e, to: t, total: c }),
+    rowsPerPage: r.rowsPerPage,
+    first: r.first,
+    last: r.last,
+    prev: r.prev,
+    next: r.next,
+    page: (e) => h(r.page, { n: e }),
+    perPage: (e) => h(r.perPage, { n: e }),
+    nav: r.nav
+  };
+}
+const ee = y(
+  z.pagination
+);
+function Q(r, e, t = 7) {
+  if (e <= t) return Array.from({ length: e }, (l, f) => f + 1);
+  const c = 1, s = [], a = Math.max(2, r - c), u = Math.min(e - 1, r + c);
+  s.push(1), a > 2 && s.push("gap");
+  for (let l = a; l <= u; l++) s.push(l);
+  return u < e - 1 && s.push("gap"), s.push(e), s;
+}
+const U = A(function({
+  page: e,
+  pageCount: t,
+  onPageChange: c,
+  totalItems: s,
+  pageSize: a,
+  pageSizeOptions: u,
+  onPageSizeChange: l,
+  showJump: f = !0,
+  labels: P,
+  className: j,
+  "aria-label": C,
+  ...L
+}, M) {
+  const R = q(), o = { ...y(R.pagination), ...P }, v = B(), S = E(() => Q(e, t), [e, t]), x = !s || t <= 0, N = a === void 0 ? void 0 : x ? 0 : (e - 1) * a + 1, p = a === void 0 || s === void 0 ? void 0 : x ? 0 : Math.min(e * a, s), k = e <= 1 || t <= 0, w = e >= t, m = (n) => {
+    n < 1 || n > t || n === e || c(n);
+  };
+  return /* @__PURE__ */ d(
+    "nav",
+    {
+      ref: M,
+      "aria-label": C ?? o.nav,
+      className: g("flex flex-wrap items-center justify-between gap-3", j),
+      ...L,
+      children: [
+        /* @__PURE__ */ d("div", { className: "text-foreground-muted flex items-center gap-3 text-sm", children: [
+          s !== void 0 && a !== void 0 && N !== void 0 && p !== void 0 && /* @__PURE__ */ i("span", { className: "tabular", children: o.showing(N, p, s) }),
+          u && l && a !== void 0 && /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ i("label", { htmlFor: v, className: "sr-only", children: o.rowsPerPage }),
+            /* @__PURE__ */ d(D, { value: String(a), onValueChange: (n) => l(Number(n)), children: [
+              /* @__PURE__ */ i(G, { id: v, size: "sm", className: "w-[7.5rem] whitespace-nowrap" }),
+              /* @__PURE__ */ i(H, { children: u.map((n) => /* @__PURE__ */ i(K, { value: String(n), children: o.perPage(n) }, n)) })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ d("ul", { className: "flex items-center gap-1", children: [
+          f && /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": o.first,
+              disabled: k,
+              onClick: () => m(1),
+              className: b,
+              children: /* @__PURE__ */ i(T, { className: "size-4", "aria-hidden": !0 })
+            }
+          ) }),
+          /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": o.prev,
+              disabled: k,
+              onClick: () => m(e - 1),
+              className: b,
+              children: /* @__PURE__ */ i(V, { className: "size-4", "aria-hidden": !0 })
+            }
+          ) }),
+          /* @__PURE__ */ d("li", { className: "tabular text-foreground-muted px-2 text-sm sm:hidden", "aria-current": "page", children: [
+            e,
+            " / ",
+            t
+          ] }),
+          S.map(
+            (n, F) => n === "gap" ? /* @__PURE__ */ i("li", { className: "text-foreground-subtle hidden px-2 sm:block", children: "…" }, `gap-${F}`) : /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
+              "button",
+              {
+                type: "button",
+                "aria-label": o.page(n),
+                "aria-current": n === e ? "page" : void 0,
+                onClick: () => m(n),
+                className: g(
+                  "tabular inline-flex size-8 items-center justify-center rounded-md text-sm outline-none",
+                  "transition-colors duration-[var(--duration-fast)]",
+                  "focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2",
+                  n === e ? "bg-accent text-on-accent font-medium" : "text-foreground-muted hover:bg-background-muted hover:text-foreground"
+                ),
+                children: n
+              }
+            ) }, n)
+          ),
+          /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": o.next,
+              disabled: w,
+              onClick: () => m(e + 1),
+              className: b,
+              children: /* @__PURE__ */ i(_, { className: "size-4", "aria-hidden": !0 })
+            }
+          ) }),
+          f && /* @__PURE__ */ i("li", { className: "hidden sm:block", children: /* @__PURE__ */ i(
+            "button",
+            {
+              type: "button",
+              "aria-label": o.last,
+              disabled: w,
+              onClick: () => m(t),
+              className: b,
+              children: /* @__PURE__ */ i($, { className: "size-4", "aria-hidden": !0 })
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+});
+U.displayName = "Pagination";
+const b = g(
+  "inline-flex size-8 items-center justify-center rounded-md text-foreground-muted",
+  "transition-colors duration-[var(--duration-fast)]",
+  "hover:bg-background-muted hover:text-foreground",
+  "disabled:opacity-50 disabled:pointer-events-none",
+  "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+);
+export {
+  U as Pagination,
+  ee as defaultPaginationLabels,
+  y as paginationLabelsFromStrings
+};
+//# sourceMappingURL=Pagination.js.map

package/dist-lib/components/ui/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","sources":["../../../src/components/ui/Pagination.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, useId, useMemo, type HTMLAttributes } from 'react';\nimport { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { defaultStrings, formatString, type UiStrings } from '@/lib/strings';\nimport { Select, SelectContent, SelectItem, SelectTrigger } from './Select';\n\nexport interface PaginationLabels {\n  /** Summary line. Receives the computed range. */\n  showing: (from: number, to: number, total: number) => string;\n  /** sr-only label for the page-size select. */\n  rowsPerPage: string;\n  first: string;\n  last: string;\n  prev: string;\n  next: string;\n  /** aria-label for a numbered page button. */\n  page: (n: number) => string;\n  /** Suffix in the page-size options, e.g. \"20 / page\". */\n  perPage: (n: number) => string;\n  /** aria-label of the nav landmark. */\n  nav: string;\n}\n\n/** Build the label set from a strings object (context → functions). */\nexport function paginationLabelsFromStrings(s: UiStrings['pagination']): PaginationLabels {\n  return {\n    showing: (from, to, total) => formatString(s.showing, { from, to, total }),\n    rowsPerPage: s.rowsPerPage,\n    first: s.first,\n    last: s.last,\n    prev: s.prev,\n    next: s.next,\n    page: (n) => formatString(s.page, { n }),\n    perPage: (n) => formatString(s.perPage, { n }),\n    nav: s.nav,\n  };\n}\n\n/** English defaults — derived from `defaultStrings.pagination`. */\nexport const defaultPaginationLabels: PaginationLabels = paginationLabelsFromStrings(\n  defaultStrings.pagination,\n);\n\nexport interface PaginationProps extends HTMLAttributes<HTMLElement> {\n  /** 1-indexed current page. */\n  page: number;\n  /** Total number of pages. Set to 0 to hide page numbers. */\n  pageCount: number;\n  /** Called with the new page when navigating. */\n  onPageChange: (page: number) => void;\n  /** Total item count, for the \"Showing 1-20 of 200\" hint. Omit to hide. */\n  totalItems?: number;\n  /** Items shown per page (controlled if `onPageSizeChange` is provided). */\n  pageSize?: number;\n  /** Options for the page-size select. */\n  pageSizeOptions?: number[];\n  /** Called when the user picks a new page size. */\n  onPageSizeChange?: (size: number) => void;\n  /** Show first/last (« ») jump buttons. Default true. */\n  showJump?: boolean;\n  /** Override any of the visible / accessible strings (i18n). */\n  labels?: Partial<PaginationLabels>;\n}\n\nfunction pageRange(current: number, total: number, max = 7): (number | 'gap')[] {\n  if (total <= max) return Array.from({ length: total }, (_, i) => i + 1);\n  const window = 1;\n  const result: (number | 'gap')[] = [];\n  const start = Math.max(2, current - window);\n  const end = Math.min(total - 1, current + window);\n\n  result.push(1);\n  if (start > 2) result.push('gap');\n  for (let i = start; i <= end; i++) result.push(i);\n  if (end < total - 1) result.push('gap');\n  result.push(total);\n  return result;\n}\n\n/**\n * Numbered pagination with prev/next, first/last jumps, page-size selector,\n * and item-count summary.\n *\n * @example\n *   <Pagination page={page} pageCount={20} onPageChange={setPage}\n *               totalItems={400} pageSize={20}\n *               pageSizeOptions={[10, 20, 50]} onPageSizeChange={setSize} />\n *\n * @do Place the count summary on the left and controls on the right.\n * @dont Show numbers when there are >100 pages — use a \"jump to\" input instead.\n */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    page,\n    pageCount,\n    onPageChange,\n    totalItems,\n    pageSize,\n    pageSizeOptions,\n    onPageSizeChange,\n    showJump = true,\n    labels: labelsProp,\n    className,\n    'aria-label': ariaLabel,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const labels = { ...paginationLabelsFromStrings(strings.pagination), ...labelsProp };\n  const pageSizeId = useId();\n  const pages = useMemo(() => pageRange(page, pageCount), [page, pageCount]);\n\n  const empty = !totalItems || pageCount <= 0;\n  const from = pageSize === undefined ? undefined : empty ? 0 : (page - 1) * pageSize + 1;\n  const to =\n    pageSize === undefined || totalItems === undefined\n      ? undefined\n      : empty\n        ? 0\n        : Math.min(page * pageSize, totalItems);\n  const atStart = page <= 1 || pageCount <= 0;\n  const atEnd = page >= pageCount;\n\n  const goto = (p: number) => {\n    if (p < 1 || p > pageCount || p === page) return;\n    onPageChange(p);\n  };\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel ?? labels.nav}\n      className={cn('flex flex-wrap items-center justify-between gap-3', className)}\n      {...props}\n    >\n      <div className=\"text-foreground-muted flex items-center gap-3 text-sm\">\n        {totalItems !== undefined &&\n          pageSize !== undefined &&\n          from !== undefined &&\n          to !== undefined && (\n            <span className=\"tabular\">{labels.showing(from, to, totalItems)}</span>\n          )}\n        {pageSizeOptions && onPageSizeChange && pageSize !== undefined && (\n          <div className=\"flex items-center gap-2\">\n            <label htmlFor={pageSizeId} className=\"sr-only\">\n              {labels.rowsPerPage}\n            </label>\n            <Select value={String(pageSize)} onValueChange={(v) => onPageSizeChange(Number(v))}>\n              <SelectTrigger id={pageSizeId} size=\"sm\" className=\"w-[7.5rem] whitespace-nowrap\" />\n              <SelectContent>\n                {pageSizeOptions.map((s) => (\n                  <SelectItem key={s} value={String(s)}>\n                    {labels.perPage(s)}\n                  </SelectItem>\n                ))}\n              </SelectContent>\n            </Select>\n          </div>\n        )}\n      </div>\n\n      <ul className=\"flex items-center gap-1\">\n        {showJump && (\n          <li className=\"hidden sm:block\">\n            <button\n              type=\"button\"\n              aria-label={labels.first}\n              disabled={atStart}\n              onClick={() => goto(1)}\n              className={navButtonClass}\n            >\n              <ChevronsLeft className=\"size-4\" aria-hidden />\n            </button>\n          </li>\n        )}\n        <li>\n          <button\n            type=\"button\"\n            aria-label={labels.prev}\n            disabled={atStart}\n            onClick={() => goto(page - 1)}\n            className={navButtonClass}\n          >\n            <ChevronLeft className=\"size-4\" aria-hidden />\n          </button>\n        </li>\n        {/* Below sm the page list collapses to \"current / total\". */}\n        <li className=\"tabular text-foreground-muted px-2 text-sm sm:hidden\" aria-current=\"page\">\n          {page} / {pageCount}\n        </li>\n        {pages.map((p, i) =>\n          p === 'gap' ? (\n            <li key={`gap-${i}`} className=\"text-foreground-subtle hidden px-2 sm:block\">\n              …\n            </li>\n          ) : (\n            <li key={p} className=\"hidden sm:block\">\n              <button\n                type=\"button\"\n                aria-label={labels.page(p)}\n                aria-current={p === page ? 'page' : undefined}\n                onClick={() => goto(p)}\n                className={cn(\n                  'tabular inline-flex size-8 items-center justify-center rounded-md text-sm outline-none',\n                  'transition-colors duration-[var(--duration-fast)]',\n                  'focus-visible:ring-ring focus-visible:ring-offset-background focus-visible:ring-2 focus-visible:ring-offset-2',\n                  p === page\n                    ? 'bg-accent text-on-accent font-medium'\n                    : 'text-foreground-muted hover:bg-background-muted hover:text-foreground',\n                )}\n              >\n                {p}\n              </button>\n            </li>\n          ),\n        )}\n        <li>\n          <button\n            type=\"button\"\n            aria-label={labels.next}\n            disabled={atEnd}\n            onClick={() => goto(page + 1)}\n            className={navButtonClass}\n          >\n            <ChevronRight className=\"size-4\" aria-hidden />\n          </button>\n        </li>\n        {showJump && (\n          <li className=\"hidden sm:block\">\n            <button\n              type=\"button\"\n              aria-label={labels.last}\n              disabled={atEnd}\n              onClick={() => goto(pageCount)}\n              className={navButtonClass}\n            >\n              <ChevronsRight className=\"size-4\" aria-hidden />\n            </button>\n          </li>\n        )}\n      </ul>\n    </nav>\n  );\n});\nPagination.displayName = 'Pagination';\n\nconst navButtonClass = cn(\n  'inline-flex size-8 items-center justify-center rounded-md text-foreground-muted',\n  'transition-colors duration-[var(--duration-fast)]',\n  'hover:bg-background-muted hover:text-foreground',\n  'disabled:opacity-50 disabled:pointer-events-none',\n  'outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background',\n);\n"],"names":["paginationLabelsFromStrings","s","from","to","total","formatString","n","defaultPaginationLabels","defaultStrings","pageRange","current","max","_","i","window","result","start","end","Pagination","forwardRef","page","pageCount","onPageChange","totalItems","pageSize","pageSizeOptions","onPageSizeChange","showJump","labelsProp","className","ariaLabel","props","ref","strings","useStrings","labels","pageSizeId","useId","pages","useMemo","empty","atStart","atEnd","goto","p","jsxs","cn","jsx","Select","v","SelectTrigger","SelectContent","SelectItem","navButtonClass","ChevronsLeft","ChevronLeft","ChevronRight","ChevronsRight"],"mappings":"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"}

package/dist-lib/components/ui/Popover.js

@@ -0,0 +1,35 @@
+"use client";
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import * as o from "@radix-ui/react-popover";
+import { cn as d } from "../../lib/utils.js";
+const v = o.Root, g = o.Trigger, u = o.Anchor, b = o.Close, p = s(function({ className: t, align: r = "center", sideOffset: i = 4, ...n }, a) {
+  return /* @__PURE__ */ e(o.Portal, { children: /* @__PURE__ */ e(
+    o.Content,
+    {
+      ref: a,
+      align: r,
+      sideOffset: i,
+      className: d(
+        "border-border bg-popover text-popover-foreground z-[var(--z-popover)] max-w-sm min-w-72 rounded-lg border p-4 shadow-md",
+        "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+        "data-[state=open]:animate-in data-[state=closed]:animate-out",
+        "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+        "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
+        "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
+        t
+      ),
+      ...n
+    }
+  ) });
+});
+p.displayName = "PopoverContent";
+export {
+  v as Popover,
+  u as PopoverAnchor,
+  b as PopoverClose,
+  p as PopoverContent,
+  g as PopoverTrigger
+};
+//# sourceMappingURL=Popover.js.map

package/dist-lib/components/ui/Popover.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.js","sources":["../../../src/components/ui/Popover.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '@/lib/utils';\n\nexport const Popover = PopoverPrimitive.Root;\nexport const PopoverTrigger = PopoverPrimitive.Trigger;\nexport const PopoverAnchor = PopoverPrimitive.Anchor;\nexport const PopoverClose = PopoverPrimitive.Close;\n\nexport const PopoverContent = forwardRef<\n  ElementRef<typeof PopoverPrimitive.Content>,\n  ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>\n>(function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }, ref) {\n  return (\n    <PopoverPrimitive.Portal>\n      <PopoverPrimitive.Content\n        ref={ref}\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(\n          'border-border bg-popover text-popover-foreground z-[var(--z-popover)] max-w-sm min-w-72 rounded-lg border p-4 shadow-md',\n          'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          'data-[state=open]:animate-in data-[state=closed]:animate-out',\n          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',\n          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',\n          'data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1',\n          'data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1',\n          className,\n        )}\n        {...props}\n      />\n    </PopoverPrimitive.Portal>\n  );\n});\nPopoverContent.displayName = 'PopoverContent';\n\n/**\n * @example\n *   <Popover>\n *     <PopoverTrigger asChild><Button variant=\"outline\">Options</Button></PopoverTrigger>\n *     <PopoverContent>…</PopoverContent>\n *   </Popover>\n *\n * @do Reserve Popover for low-stakes, transient UI — pickers, mini-forms.\n * @dont Use Popover for navigation menus — that's DropdownMenu.\n */\n"],"names":["Popover","PopoverPrimitive","PopoverTrigger","PopoverAnchor","PopoverClose","PopoverContent","forwardRef","className","align","sideOffset","props","ref","jsx","cn"],"mappings":";;;;;AAMO,MAAMA,IAAUC,EAAiB,MAC3BC,IAAiBD,EAAiB,SAClCE,IAAgBF,EAAiB,QACjCG,IAAeH,EAAiB,OAEhCI,IAAiBC,EAG5B,SAAwB,EAAE,WAAAC,GAAW,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGC,EAAA,GAASC,GAAK;AACxF,SACE,gBAAAC,EAACX,EAAiB,QAAjB,EACC,UAAA,gBAAAW;AAAA,IAACX,EAAiB;AAAA,IAAjB;AAAA,MACC,KAAAU;AAAA,MACA,OAAAH;AAAA,MACA,YAAAC;AAAA,MACA,WAAWI;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AACDL,EAAe,cAAc;"}

package/dist-lib/components/ui/Progress.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, SVGProps } from 'react';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 export interface ProgressProps extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
-    /** 0–100. Omit for indeterminate. */
+    /** 0–`max` (default 100). Clamped. Omit for indeterminate. */
     value?: number | null;
     /** Bar height. */
     size?: 'sm' | 'md' | 'lg';
@@ -22,8 +22,8 @@ export declare const Progress: import('react').ForwardRefExoticComponent<Progres
 export interface ProgressCircleProps extends SVGProps<SVGSVGElement> {
     /** 0–100. Omit for indeterminate. */
     value?: number;
-    /** Pixel size of the SVG. */
-    size?: number;
+    /** `sm` 24 / `md` 36 / `lg` 48, or an explicit pixel size. */
+    size?: 'sm' | 'md' | 'lg' | number;
     /** Stroke thickness. */
     thickness?: number;
     /** Visible label for screen readers. */

package/dist-lib/components/ui/Progress.js

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as c, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import * as u from "@radix-ui/react-progress";
+import { cn as m } from "../../lib/utils.js";
+const b = { sm: "h-1", md: "h-1.5", lg: "h-2" }, v = {
+  accent: "bg-accent",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger"
+}, w = h(
+  function({ className: o, value: s, max: t = 100, size: l = "md", tone: d = "accent", ...f }, g) {
+    const e = s == null || Number.isNaN(s), r = t > 0 ? t : 100, n = e ? 0 : Math.min(r, Math.max(0, s)), a = n / r * 100;
+    return /* @__PURE__ */ c(
+      u.Root,
+      {
+        ref: g,
+        value: e ? void 0 : n,
+        max: r,
+        className: m(
+          "bg-background-muted relative w-full overflow-hidden rounded-full",
+          b[l],
+          o
+        ),
+        ...f,
+        children: /* @__PURE__ */ c(
+          u.Indicator,
+          {
+            className: m(
+              "h-full w-full flex-1 transition-transform",
+              v[d],
+              e && "animate-progress-indeterminate origin-left"
+            ),
+            "data-motion-keep": e ? "" : void 0,
+            style: e ? void 0 : { transform: `translateX(-${100 - a}%)` }
+          }
+        )
+      }
+    );
+  }
+);
+w.displayName = "Progress";
+const x = { sm: 24, md: 36, lg: 48 }, y = {
+  accent: "stroke-accent",
+  success: "stroke-success",
+  warning: "stroke-warning",
+  danger: "stroke-danger"
+}, M = h(
+  function({ value: o, size: s = "md", thickness: t = 3, className: l, tone: d = "accent", ...f }, g) {
+    const e = typeof s == "number" ? s : x[s], r = o === void 0 || Number.isNaN(o), n = r ? 0 : Math.min(100, Math.max(0, o)), a = (e - t) / 2, i = 2 * Math.PI * a, k = r ? 0 : i - n / 100 * i;
+    return /* @__PURE__ */ N(
+      "svg",
+      {
+        ref: g,
+        width: e,
+        height: e,
+        viewBox: `0 0 ${e} ${e}`,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": r ? void 0 : n,
+        "data-motion-keep": r ? "" : void 0,
+        className: m("shrink-0", r && "animate-spin", l),
+        ...f,
+        children: [
+          /* @__PURE__ */ c(
+            "circle",
+            {
+              cx: e / 2,
+              cy: e / 2,
+              r: a,
+              strokeWidth: t,
+              className: "stroke-background-muted fill-none"
+            }
+          ),
+          /* @__PURE__ */ c(
+            "circle",
+            {
+              cx: e / 2,
+              cy: e / 2,
+              r: a,
+              strokeWidth: t,
+              strokeLinecap: "round",
+              strokeDasharray: i,
+              strokeDashoffset: r ? i * 0.7 : k,
+              className: m(y[d], "fill-none transition-[stroke-dashoffset]"),
+              transform: `rotate(-90 ${e / 2} ${e / 2})`
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+M.displayName = "ProgressCircle";
+export {
+  w as Progress,
+  M as ProgressCircle
+};
+//# sourceMappingURL=Progress.js.map

package/dist-lib/components/ui/Progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Progress.js","sources":["../../../src/components/ui/Progress.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef, type SVGProps } from 'react';\nimport * as ProgressPrimitive from '@radix-ui/react-progress';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  Linear — bar that fills left-to-right.\n *  Circular — SVG ring. Both support determinate (value 0..100) and\n *  indeterminate (`value` omitted) states.\n * --------------------------------------------------------------------------- */\n\nexport interface ProgressProps extends Omit<\n  ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>,\n  'value'\n> {\n  /** 0–`max` (default 100). Clamped. Omit for indeterminate. */\n  value?: number | null;\n  /** Bar height. */\n  size?: 'sm' | 'md' | 'lg';\n  /** Visual tone. Use `success`/`danger` to colour-code completion state. */\n  tone?: 'accent' | 'success' | 'warning' | 'danger';\n}\n\nconst heightMap = { sm: 'h-1', md: 'h-1.5', lg: 'h-2' } as const;\nconst fillTone = {\n  accent: 'bg-accent',\n  success: 'bg-success',\n  warning: 'bg-warning',\n  danger: 'bg-danger',\n} as const;\n\n/**\n * Linear progress bar.\n *\n * @example\n *   <Progress value={uploadPct} aria-label=\"Upload progress\" />\n *   <Progress aria-label=\"Loading\" /> // indeterminate\n *\n * @do Always pair Progress with an `aria-label` describing what is progressing.\n * @dont Use a Progress for an unknown-completion task — use a Spinner.\n */\nexport const Progress = forwardRef<ElementRef<typeof ProgressPrimitive.Root>, ProgressProps>(\n  function Progress({ className, value, max = 100, size = 'md', tone = 'accent', ...props }, ref) {\n    const indeterminate = value === undefined || value === null || Number.isNaN(value);\n    const safeMax = max > 0 ? max : 100;\n    const clamped = indeterminate ? 0 : Math.min(safeMax, Math.max(0, value as number));\n    const pct = (clamped / safeMax) * 100;\n    return (\n      <ProgressPrimitive.Root\n        ref={ref}\n        value={indeterminate ? undefined : clamped}\n        max={safeMax}\n        className={cn(\n          'bg-background-muted relative w-full overflow-hidden rounded-full',\n          heightMap[size],\n          className,\n        )}\n        {...props}\n      >\n        <ProgressPrimitive.Indicator\n          className={cn(\n            'h-full w-full flex-1 transition-transform',\n            fillTone[tone],\n            indeterminate && 'animate-progress-indeterminate origin-left',\n          )}\n          data-motion-keep={indeterminate ? '' : undefined}\n          style={indeterminate ? undefined : { transform: `translateX(-${100 - pct}%)` }}\n        />\n      </ProgressPrimitive.Root>\n    );\n  },\n);\nProgress.displayName = 'Progress';\n\nexport interface ProgressCircleProps extends SVGProps<SVGSVGElement> {\n  /** 0–100. Omit for indeterminate. */\n  value?: number;\n  /** `sm` 24 / `md` 36 / `lg` 48, or an explicit pixel size. */\n  size?: 'sm' | 'md' | 'lg' | number;\n  /** Stroke thickness. */\n  thickness?: number;\n  /** Visible label for screen readers. */\n  'aria-label': string;\n  tone?: 'accent' | 'success' | 'warning' | 'danger';\n}\n\nconst circleSize = { sm: 24, md: 36, lg: 48 } as const;\n\nconst circleTone = {\n  accent: 'stroke-accent',\n  success: 'stroke-success',\n  warning: 'stroke-warning',\n  danger: 'stroke-danger',\n} as const;\n\n/**\n * Circular progress ring. Pairs with a numeric label for percentage-style\n * indicators.\n *\n * @example\n *   <ProgressCircle value={72} aria-label=\"Storage used\" />\n */\nexport const ProgressCircle = forwardRef<SVGSVGElement, ProgressCircleProps>(\n  function ProgressCircle(\n    { value, size: sizeProp = 'md', thickness = 3, className, tone = 'accent', ...props },\n    ref,\n  ) {\n    const size = typeof sizeProp === 'number' ? sizeProp : circleSize[sizeProp];\n    const isIndeterminate = value === undefined || Number.isNaN(value);\n    const clamped = isIndeterminate ? 0 : Math.min(100, Math.max(0, value as number));\n    const radius = (size - thickness) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = isIndeterminate ? 0 : circumference - (clamped / 100) * circumference;\n\n    return (\n      <svg\n        ref={ref}\n        width={size}\n        height={size}\n        viewBox={`0 0 ${size} ${size}`}\n        role=\"progressbar\"\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-valuenow={isIndeterminate ? undefined : clamped}\n        data-motion-keep={isIndeterminate ? '' : undefined}\n        className={cn('shrink-0', isIndeterminate && 'animate-spin', className)}\n        {...props}\n      >\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={thickness}\n          className=\"stroke-background-muted fill-none\"\n        />\n        <circle\n          cx={size / 2}\n          cy={size / 2}\n          r={radius}\n          strokeWidth={thickness}\n          strokeLinecap=\"round\"\n          strokeDasharray={circumference}\n          strokeDashoffset={isIndeterminate ? circumference * 0.7 : offset}\n          className={cn(circleTone[tone], 'fill-none transition-[stroke-dashoffset]')}\n          transform={`rotate(-90 ${size / 2} ${size / 2})`}\n        />\n      </svg>\n    );\n  },\n);\nProgressCircle.displayName = 'ProgressCircle';\n"],"names":["heightMap","fillTone","Progress","forwardRef","className","value","max","size","tone","props","ref","indeterminate","safeMax","clamped","pct","jsx","ProgressPrimitive","cn","circleSize","circleTone","ProgressCircle","sizeProp","thickness","isIndeterminate","radius","circumference","offset","jsxs"],"mappings":"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"}

package/dist-lib/components/ui/RadioGroup.d.ts

@@ -1,7 +1,7 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 export interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
-    /** Lay out the radios horizontally (default) or vertically. */
+    /** Lay out the radios vertically (default) or horizontally. Also drives arrow-key navigation. */
     orientation?: 'horizontal' | 'vertical';
 }
 export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/RadioGroup.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as f, useId as h } from "react";
+import * as d from "@radix-ui/react-radio-group";
+import { cn as i } from "../../lib/utils.js";
+const y = f(
+  function({ className: a, orientation: r = "vertical", ...o }, t) {
+    return /* @__PURE__ */ e(
+      d.Root,
+      {
+        ref: t,
+        orientation: r,
+        className: i(
+          "flex gap-3",
+          r === "vertical" ? "flex-col" : "flex-row flex-wrap",
+          a
+        ),
+        ...o
+      }
+    );
+  }
+);
+y.displayName = "RadioGroup";
+const N = f(
+  function({
+    className: a,
+    label: r,
+    description: o,
+    hideLabel: t,
+    id: m,
+    disabled: l,
+    "aria-describedby": b,
+    ...p
+  }, x) {
+    const v = h(), s = m ?? v, n = o ? `${s}-desc` : void 0, g = [n, b].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ c("div", { className: i("flex items-start gap-2.5", a), children: [
+      /* @__PURE__ */ e(
+        d.Item,
+        {
+          ref: x,
+          id: s,
+          disabled: l,
+          "aria-describedby": g,
+          className: i(
+            "bg-card relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
+            // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.
+            'before:absolute before:-inset-1.5 before:rounded-full before:content-[""]',
+            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+            "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+            "data-[state=checked]:border-accent",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            "border-border-input aria-invalid:border-danger"
+          ),
+          ...p,
+          children: /* @__PURE__ */ e(d.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ e("span", { className: "bg-accent size-2 rounded-full", "aria-hidden": !0 }) })
+        }
+      ),
+      r && /* @__PURE__ */ c("div", { className: "flex flex-col gap-0.5", children: [
+        /* @__PURE__ */ e(
+          "label",
+          {
+            htmlFor: s,
+            className: i(
+              "text-foreground text-sm select-none",
+              l && "cursor-not-allowed opacity-50",
+              t && "sr-only"
+            ),
+            children: r
+          }
+        ),
+        o && /* @__PURE__ */ e("p", { id: n, className: "text-foreground-subtle text-xs", children: o })
+      ] })
+    ] });
+  }
+);
+N.displayName = "RadioItem";
+export {
+  y as RadioGroup,
+  N as RadioItem
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist-lib/components/ui/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../src/components/ui/RadioGroup.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ElementRef,\n  type ReactNode,\n} from 'react';\nimport * as RadioGroupPrimitive from '@radix-ui/react-radio-group';\nimport { cn } from '@/lib/utils';\n\nexport interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {\n  /** Lay out the radios vertically (default) or horizontally. Also drives arrow-key navigation. */\n  orientation?: 'horizontal' | 'vertical';\n}\n\nexport const RadioGroup = forwardRef<ElementRef<typeof RadioGroupPrimitive.Root>, RadioGroupProps>(\n  function RadioGroup({ className, orientation = 'vertical', ...props }, ref) {\n    return (\n      <RadioGroupPrimitive.Root\n        ref={ref}\n        orientation={orientation}\n        className={cn(\n          'flex gap-3',\n          orientation === 'vertical' ? 'flex-col' : 'flex-row flex-wrap',\n          className,\n        )}\n        {...props}\n      />\n    );\n  },\n);\nRadioGroup.displayName = 'RadioGroup';\n\nexport interface RadioItemProps extends Omit<\n  ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>,\n  'asChild'\n> {\n  label?: ReactNode;\n  description?: ReactNode;\n  hideLabel?: boolean;\n}\n\n/**\n * One radio option with inline label + description.\n *\n * @example\n *   <RadioGroup defaultValue=\"weekly\">\n *     <RadioItem value=\"daily\" label=\"Daily\" description=\"Every morning at 9am\" />\n *     <RadioItem value=\"weekly\" label=\"Weekly\" description=\"Monday mornings\" />\n *     <RadioItem value=\"never\" label=\"Never\" />\n *   </RadioGroup>\n *\n * @do Pair every RadioItem with a label — naked radios are unreachable for\n *      screen reader users.\n * @dont Use RadioGroup for binary choices — use Switch.\n */\nexport const RadioItem = forwardRef<ElementRef<typeof RadioGroupPrimitive.Item>, RadioItemProps>(\n  function RadioItem(\n    {\n      className,\n      label,\n      description,\n      hideLabel,\n      id,\n      disabled,\n      'aria-describedby': ariaDescribedby,\n      ...props\n    },\n    ref,\n  ) {\n    const autoId = useId();\n    const fieldId = id ?? autoId;\n    const descId = description ? `${fieldId}-desc` : undefined;\n    const describedBy = [descId, ariaDescribedby].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <div className={cn('flex items-start gap-2.5', className)}>\n        <RadioGroupPrimitive.Item\n          ref={ref}\n          id={fieldId}\n          disabled={disabled}\n          aria-describedby={describedBy}\n          className={cn(\n            'bg-card relative mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border',\n            // WCAG 2.5.8: 16px visual box, ≥24px hit area via an invisible inset halo.\n            'before:absolute before:-inset-1.5 before:rounded-full before:content-[\"\"]',\n            'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n            'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n            'data-[state=checked]:border-accent',\n            'disabled:cursor-not-allowed disabled:opacity-50',\n            'border-border-input aria-invalid:border-danger',\n          )}\n          {...props}\n        >\n          <RadioGroupPrimitive.Indicator className=\"flex items-center justify-center\">\n            <span className=\"bg-accent size-2 rounded-full\" aria-hidden />\n          </RadioGroupPrimitive.Indicator>\n        </RadioGroupPrimitive.Item>\n\n        {label && (\n          <div className=\"flex flex-col gap-0.5\">\n            <label\n              htmlFor={fieldId}\n              className={cn(\n                'text-foreground text-sm select-none',\n                disabled && 'cursor-not-allowed opacity-50',\n                hideLabel && 'sr-only',\n              )}\n            >\n              {label}\n            </label>\n            {description && (\n              <p id={descId} className=\"text-foreground-subtle text-xs\">\n                {description}\n              </p>\n            )}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\nRadioItem.displayName = 'RadioItem';\n"],"names":["RadioGroup","forwardRef","className","orientation","props","ref","jsx","RadioGroupPrimitive","cn","RadioItem","label","description","hideLabel","id","disabled","ariaDescribedby","autoId","useId","fieldId","descId","describedBy","jsxs"],"mappings":";;;;;AAiBO,MAAMA,IAAaC;AAAA,EACxB,SAAoB,EAAE,WAAAC,GAAW,aAAAC,IAAc,YAAY,GAAGC,EAAA,GAASC,GAAK;AAC1E,WACE,gBAAAC;AAAA,MAACC,EAAoB;AAAA,MAApB;AAAA,QACC,KAAAF;AAAA,QACA,aAAAF;AAAA,QACA,WAAWK;AAAA,UACT;AAAA,UACAL,MAAgB,aAAa,aAAa;AAAA,UAC1CD;AAAA,QAAA;AAAA,QAED,GAAGE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AACAJ,EAAW,cAAc;AAyBlB,MAAMS,IAAYR;AAAA,EACvB,SACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAQ;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAoBC;AAAA,IACpB,GAAGX;AAAA,EAAA,GAELC,GACA;AACA,UAAMW,IAASC,EAAA,GACTC,IAAUL,KAAMG,GAChBG,IAASR,IAAc,GAAGO,CAAO,UAAU,QAC3CE,IAAc,CAACD,GAAQJ,CAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,KAAK;AAE3E,6BACG,OAAA,EAAI,WAAWP,EAAG,4BAA4BN,CAAS,GACtD,UAAA;AAAA,MAAA,gBAAAI;AAAA,QAACC,EAAoB;AAAA,QAApB;AAAA,UACC,KAAAF;AAAA,UACA,IAAIa;AAAA,UACJ,UAAAJ;AAAA,UACA,oBAAkBM;AAAA,UAClB,WAAWZ;AAAA,YACT;AAAA;AAAA,YAEA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAED,GAAGJ;AAAA,UAEJ,UAAA,gBAAAE,EAACC,EAAoB,WAApB,EAA8B,WAAU,oCACvC,UAAA,gBAAAD,EAAC,QAAA,EAAK,WAAU,iCAAgC,eAAW,GAAA,CAAC,EAAA,CAC9D;AAAA,QAAA;AAAA,MAAA;AAAA,MAGDI,KACC,gBAAAW,EAAC,OAAA,EAAI,WAAU,yBACb,UAAA;AAAA,QAAA,gBAAAf;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,SAASY;AAAA,YACT,WAAWV;AAAA,cACT;AAAA,cACAM,KAAY;AAAA,cACZF,KAAa;AAAA,YAAA;AAAA,YAGd,UAAAF;AAAA,UAAA;AAAA,QAAA;AAAA,QAEFC,KACC,gBAAAL,EAAC,KAAA,EAAE,IAAIa,GAAQ,WAAU,kCACtB,UAAAR,EAAA,CACH;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA,GAEJ;AAAA,EAEJ;AACF;AACAF,EAAU,cAAc;"}

package/dist-lib/components/ui/RelativeTime.d.ts

@@ -0,0 +1,19 @@
+import { TimeHTMLAttributes } from 'react';
+import { FormatDateOptions } from '../../lib/format.js';
+export interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {
+    /** The instant to describe. */
+    date: Date | number | string;
+    /** Reference "now". Default `Date.now()` at render — pass one for stable SSR/tests. */
+    now?: Date | number;
+    /** Options for the absolute `title` (tooltip). */
+    absolute?: FormatDateOptions;
+}
+/**
+ * `<time>` showing "5 min ago" with the absolute timestamp as `title` and a
+ * machine-readable `dateTime`. Strings come from `UiStrings.relativeTime`.
+ * Beyond 30 days it falls back to the absolute date so text never goes stale.
+ *
+ * @example
+ *   <RelativeTime date={post.createdAt} />
+ */
+export declare const RelativeTime: import('react').ForwardRefExoticComponent<RelativeTimeProps & import('react').RefAttributes<HTMLTimeElement>>;

package/dist-lib/components/ui/RelativeTime.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as N } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { formatDate as v } from "../../lib/format.js";
+import { formatString as a } from "../../lib/strings.js";
+import { useStrings as M } from "../../hooks/use-strings.js";
+import { cn as b } from "../../lib/utils.js";
+const f = 6e4, c = 60 * f, m = 24 * c, R = h(function({ date: n, now: o, absolute: d, className: g, ...p }, T) {
+  const t = M().relativeTime, s = n instanceof Date ? n : new Date(n), D = o === void 0 ? Date.now() : o instanceof Date ? o.getTime() : o, l = s.getTime() - D, e = Math.abs(l), r = l > 0, u = v(s, d);
+  let i;
+  return e < f ? i = t.justNow : e < c ? i = a(r ? t.inMinutes : t.minutesAgo, {
+    n: Math.round(e / f)
+  }) : e < m ? i = a(r ? t.inHours : t.hoursAgo, {
+    n: Math.round(e / c)
+  }) : e < 30 * m ? i = a(r ? t.inDays : t.daysAgo, { n: Math.round(e / m) }) : i = u, /* @__PURE__ */ N(
+    "time",
+    {
+      ref: T,
+      dateTime: Number.isNaN(s.getTime()) ? void 0 : s.toISOString(),
+      title: u,
+      className: b("tabular", g),
+      ...p,
+      children: i
+    }
+  );
+});
+R.displayName = "RelativeTime";
+export {
+  R as RelativeTime
+};
+//# sourceMappingURL=RelativeTime.js.map

package/dist-lib/components/ui/RelativeTime.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RelativeTime.js","sources":["../../../src/components/ui/RelativeTime.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type TimeHTMLAttributes } from 'react';\nimport { formatDate, type FormatDateOptions } from '@/lib/format';\nimport { formatString } from '@/lib/strings';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cn } from '@/lib/utils';\n\nexport interface RelativeTimeProps extends Omit<TimeHTMLAttributes<HTMLTimeElement>, 'dateTime'> {\n  /** The instant to describe. */\n  date: Date | number | string;\n  /** Reference \"now\". Default `Date.now()` at render — pass one for stable SSR/tests. */\n  now?: Date | number;\n  /** Options for the absolute `title` (tooltip). */\n  absolute?: FormatDateOptions;\n}\n\nconst MIN = 60_000;\nconst HOUR = 60 * MIN;\nconst DAY = 24 * HOUR;\n\n/**\n * `<time>` showing \"5 min ago\" with the absolute timestamp as `title` and a\n * machine-readable `dateTime`. Strings come from `UiStrings.relativeTime`.\n * Beyond 30 days it falls back to the absolute date so text never goes stale.\n *\n * @example\n *   <RelativeTime date={post.createdAt} />\n */\nexport const RelativeTime = forwardRef<HTMLTimeElement, RelativeTimeProps>(function RelativeTime(\n  { date, now, absolute, className, ...props },\n  ref,\n) {\n  const strings = useStrings().relativeTime;\n  const d = date instanceof Date ? date : new Date(date);\n  const ref_ = now === undefined ? Date.now() : now instanceof Date ? now.getTime() : now;\n  const diff = d.getTime() - ref_;\n  const abs = Math.abs(diff);\n  const future = diff > 0;\n  const title = formatDate(d, absolute);\n\n  let label: string;\n  if (abs < MIN) label = strings.justNow;\n  else if (abs < HOUR)\n    label = formatString(future ? strings.inMinutes : strings.minutesAgo, {\n      n: Math.round(abs / MIN),\n    });\n  else if (abs < DAY)\n    label = formatString(future ? strings.inHours : strings.hoursAgo, {\n      n: Math.round(abs / HOUR),\n    });\n  else if (abs < 30 * DAY)\n    label = formatString(future ? strings.inDays : strings.daysAgo, { n: Math.round(abs / DAY) });\n  else label = title;\n\n  return (\n    <time\n      ref={ref}\n      dateTime={Number.isNaN(d.getTime()) ? undefined : d.toISOString()}\n      title={title}\n      className={cn('tabular', className)}\n      {...props}\n    >\n      {label}\n    </time>\n  );\n});\nRelativeTime.displayName = 'RelativeTime';\n"],"names":["MIN","HOUR","DAY","RelativeTime","forwardRef","date","now","absolute","className","props","ref","strings","useStrings","d","ref_","diff","abs","future","title","formatDate","label","formatString","jsx","cn"],"mappings":";;;;;;;AAiBA,MAAMA,IAAM,KACNC,IAAO,KAAKD,GACZE,IAAM,KAAKD,GAUJE,IAAeC,EAA+C,SACzE,EAAE,MAAAC,GAAM,KAAAC,GAAK,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GACrCC,GACA;AACA,QAAMC,IAAUC,IAAa,cACvBC,IAAIR,aAAgB,OAAOA,IAAO,IAAI,KAAKA,CAAI,GAC/CS,IAAOR,MAAQ,SAAY,KAAK,QAAQA,aAAe,OAAOA,EAAI,QAAA,IAAYA,GAC9ES,IAAOF,EAAE,QAAA,IAAYC,GACrBE,IAAM,KAAK,IAAID,CAAI,GACnBE,IAASF,IAAO,GAChBG,IAAQC,EAAWN,GAAGN,CAAQ;AAEpC,MAAIa;AACJ,SAAIJ,IAAMhB,IAAKoB,IAAQT,EAAQ,UACtBK,IAAMf,IACbmB,IAAQC,EAAaJ,IAASN,EAAQ,YAAYA,EAAQ,YAAY;AAAA,IACpE,GAAG,KAAK,MAAMK,IAAMhB,CAAG;AAAA,EAAA,CACxB,IACMgB,IAAMd,IACbkB,IAAQC,EAAaJ,IAASN,EAAQ,UAAUA,EAAQ,UAAU;AAAA,IAChE,GAAG,KAAK,MAAMK,IAAMf,CAAI;AAAA,EAAA,CACzB,IACMe,IAAM,KAAKd,IAClBkB,IAAQC,EAAaJ,IAASN,EAAQ,SAASA,EAAQ,SAAS,EAAE,GAAG,KAAK,MAAMK,IAAMd,CAAG,GAAG,IACzFkB,IAAQF,GAGX,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAZ;AAAA,MACA,UAAU,OAAO,MAAMG,EAAE,SAAS,IAAI,SAAYA,EAAE,YAAA;AAAA,MACpD,OAAAK;AAAA,MACA,WAAWK,EAAG,WAAWf,CAAS;AAAA,MACjC,GAAGC;AAAA,MAEH,UAAAW;AAAA,IAAA;AAAA,EAAA;AAGP,CAAC;AACDjB,EAAa,cAAc;"}

package/dist-lib/components/ui/ScrollArea.d.ts

@@ -1,3 +1,4 @@
+import { ComponentPropsWithoutRef } from 'react';
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 /**
  * Custom scroll container with consistent styled scrollbars across OS / browsers.
@@ -9,5 +10,12 @@ import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
  *     <div className="p-3">…long content…</div>
  *   </ScrollArea>
  */
-export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {
+    /**
+     * Accessible name of the viewport (a focusable `group` so keyboard users
+     * can scroll it). Defaults to `strings.scrollArea.region`.
+     */
+    viewportLabel?: string;
+}
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>>;
 export declare const ScrollBar: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/ScrollArea.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsxs as d, jsx as l } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import * as o from "@radix-ui/react-scroll-area";
+import { cn as n } from "../../lib/utils.js";
+import { useStrings as m } from "../../hooks/use-strings.js";
+const p = s(
+  function({ className: e, children: r, viewportLabel: a, ...i }, f) {
+    const u = m();
+    return /* @__PURE__ */ d(
+      o.Root,
+      {
+        ref: f,
+        className: n("relative overflow-hidden", e),
+        ...i,
+        children: [
+          /* @__PURE__ */ l(
+            o.Viewport,
+            {
+              role: "group",
+              "aria-label": a ?? u.scrollArea.region,
+              tabIndex: 0,
+              className: n(
+                "h-full w-full rounded-[inherit]",
+                "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2"
+              ),
+              children: r
+            }
+          ),
+          /* @__PURE__ */ l(t, {}),
+          /* @__PURE__ */ l(o.Corner, {})
+        ]
+      }
+    );
+  }
+);
+p.displayName = "ScrollArea";
+const t = s(function({ className: e, orientation: r = "vertical", ...a }, i) {
+  return /* @__PURE__ */ l(
+    o.ScrollAreaScrollbar,
+    {
+      ref: i,
+      orientation: r,
+      className: n(
+        "flex touch-none transition-colors duration-[var(--duration-fast)] select-none",
+        r === "vertical" && "h-full w-2 border-l border-l-transparent p-px",
+        r === "horizontal" && "h-2 flex-col border-t border-t-transparent p-px",
+        e
+      ),
+      ...a,
+      children: /* @__PURE__ */ l(o.ScrollAreaThumb, { className: "bg-border-strong relative flex-1 rounded-full" })
+    }
+  );
+});
+t.displayName = "ScrollBar";
+export {
+  p as ScrollArea,
+  t as ScrollBar
+};
+//# sourceMappingURL=ScrollArea.js.map

package/dist-lib/components/ui/ScrollArea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.js","sources":["../../../src/components/ui/ScrollArea.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\n\n/**\n * Custom scroll container with consistent styled scrollbars across OS / browsers.\n * Use when the default OS scrollbar would visually clash (sidebars, command\n * palettes, code panes). Falls back to native scroll inside the viewport.\n *\n * @example\n *   <ScrollArea className=\"h-64 rounded-md border border-border\">\n *     <div className=\"p-3\">…long content…</div>\n *   </ScrollArea>\n */\nexport interface ScrollAreaProps extends ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {\n  /**\n   * Accessible name of the viewport (a focusable `group` so keyboard users\n   * can scroll it). Defaults to `strings.scrollArea.region`.\n   */\n  viewportLabel?: string;\n}\n\nexport const ScrollArea = forwardRef<ElementRef<typeof ScrollAreaPrimitive.Root>, ScrollAreaProps>(\n  function ScrollArea({ className, children, viewportLabel, ...props }, ref) {\n    const strings = useStrings();\n    return (\n      <ScrollAreaPrimitive.Root\n        ref={ref}\n        className={cn('relative overflow-hidden', className)}\n        {...props}\n      >\n        <ScrollAreaPrimitive.Viewport\n          role=\"group\"\n          aria-label={viewportLabel ?? strings.scrollArea.region}\n          tabIndex={0}\n          className={cn(\n            'h-full w-full rounded-[inherit]',\n            'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n          )}\n        >\n          {children}\n        </ScrollAreaPrimitive.Viewport>\n        <ScrollBar />\n        <ScrollAreaPrimitive.Corner />\n      </ScrollAreaPrimitive.Root>\n    );\n  },\n);\nScrollArea.displayName = 'ScrollArea';\n\nexport const ScrollBar = forwardRef<\n  ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>\n>(function ScrollBar({ className, orientation = 'vertical', ...props }, ref) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      ref={ref}\n      orientation={orientation}\n      className={cn(\n        'flex touch-none transition-colors duration-[var(--duration-fast)] select-none',\n        orientation === 'vertical' && 'h-full w-2 border-l border-l-transparent p-px',\n        orientation === 'horizontal' && 'h-2 flex-col border-t border-t-transparent p-px',\n        className,\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb className=\"bg-border-strong relative flex-1 rounded-full\" />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n});\nScrollBar.displayName = 'ScrollBar';\n"],"names":["ScrollArea","forwardRef","className","children","viewportLabel","props","ref","strings","useStrings","jsxs","ScrollAreaPrimitive","cn","jsx","ScrollBar","orientation"],"mappings":";;;;;;AAyBO,MAAMA,IAAaC;AAAA,EACxB,SAAoB,EAAE,WAAAC,GAAW,UAAAC,GAAU,eAAAC,GAAe,GAAGC,EAAA,GAASC,GAAK;AACzE,UAAMC,IAAUC,EAAA;AAChB,WACE,gBAAAC;AAAA,MAACC,EAAoB;AAAA,MAApB;AAAA,QACC,KAAAJ;AAAA,QACA,WAAWK,EAAG,4BAA4BT,CAAS;AAAA,QAClD,GAAGG;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAO;AAAA,YAACF,EAAoB;AAAA,YAApB;AAAA,cACC,MAAK;AAAA,cACL,cAAYN,KAAiBG,EAAQ,WAAW;AAAA,cAChD,UAAU;AAAA,cACV,WAAWI;AAAA,gBACT;AAAA,gBACA;AAAA,cAAA;AAAA,cAGD,UAAAR;AAAA,YAAA;AAAA,UAAA;AAAA,4BAEFU,GAAA,EAAU;AAAA,UACX,gBAAAD,EAACF,EAAoB,QAApB,CAAA,CAA2B;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGlC;AACF;AACAV,EAAW,cAAc;AAElB,MAAMa,IAAYZ,EAGvB,SAAmB,EAAE,WAAAC,GAAW,aAAAY,IAAc,YAAY,GAAGT,EAAA,GAASC,GAAK;AAC3E,SACE,gBAAAM;AAAA,IAACF,EAAoB;AAAA,IAApB;AAAA,MACC,KAAAJ;AAAA,MACA,aAAAQ;AAAA,MACA,WAAWH;AAAA,QACT;AAAA,QACAG,MAAgB,cAAc;AAAA,QAC9BA,MAAgB,gBAAgB;AAAA,QAChCZ;AAAA,MAAA;AAAA,MAED,GAAGG;AAAA,MAEJ,UAAA,gBAAAO,EAACF,EAAoB,iBAApB,EAAoC,WAAU,gDAAA,CAAgD;AAAA,IAAA;AAAA,EAAA;AAGrG,CAAC;AACDG,EAAU,cAAc;"}