@craftzbay/ui 0.9.0 → 0.11.0

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

@@ -0,0 +1,149 @@
+"use client";
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
+import { forwardRef as Y, useRef as Z, useState as P } from "react";
+import { X as $, EyeOff as ee, Eye as te, Search as re } from "../../icons/index.js";
+import { cn as s } from "../../lib/utils.js";
+import { useStrings as ne } from "../../hooks/use-strings.js";
+import { useFieldIds as se } from "../../hooks/use-field-ids.js";
+import { cva as j } from "class-variance-authority";
+const ie = j(
+  [
+    "group inline-flex items-center w-full",
+    "rounded-md border border-border-input bg-card text-sm",
+    "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+    "has-disabled:opacity-50 has-disabled:pointer-events-none",
+    "focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background",
+    // Invalid state comes from the input's aria-invalid so Form wiring needs no extra prop.
+    "has-aria-invalid:border-danger has-aria-invalid:focus-within:border-danger has-aria-invalid:focus-within:ring-danger"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 gap-1.5",
+        md: "h-9 px-3 gap-2",
+        lg: "h-10 px-3.5 gap-2"
+      },
+      tone: {
+        default: "focus-within:border-accent focus-within:ring-ring",
+        error: "border-danger focus-within:border-danger focus-within:ring-danger"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      tone: "default"
+    }
+  }
+), oe = j([
+  "flex-1 min-w-0 bg-transparent outline-none",
+  "placeholder:text-foreground-subtle",
+  "text-foreground",
+  // 16px below md so iOS Safari does not zoom the page on focus; --text-lg = 1rem.
+  "text-lg md:text-sm",
+  "disabled:cursor-not-allowed"
+]), S = s(
+  "text-foreground-subtle hover:text-foreground relative -m-1 flex size-6 shrink-0 items-center justify-center rounded-sm",
+  'before:absolute before:-inset-0.5 before:content-[""]',
+  "focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+  "disabled:pointer-events-none"
+), ae = Y(function({
+  className: R,
+  type: i = "text",
+  size: O,
+  tone: F,
+  label: v,
+  helperText: l,
+  error: o,
+  prefix: H,
+  suffix: w,
+  clearable: L,
+  onClear: u,
+  hideLabel: T,
+  id: _,
+  disabled: r,
+  value: N,
+  defaultValue: a,
+  onInput: f,
+  "aria-describedby": D,
+  "aria-invalid": m,
+  ...M
+}, c) {
+  const g = ne(), y = !!o || m === !0 || m === "true", { fieldId: z, helperId: V, errorId: X, describedBy: q } = se(_, {
+    hasHelper: !!l,
+    hasError: !!o,
+    extra: D
+  }), h = N === null ? "" : N, n = Z(null), A = (t) => {
+    n.current = t, typeof c == "function" ? c(t) : c && (c.current = t);
+  }, [d, C] = P(!1), G = i === "password" ? d ? "text" : "password" : i, J = y ? "error" : F, E = H ?? (i === "search" ? /* @__PURE__ */ e(re, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }) : null), p = h !== void 0, [K, I] = P(
+    a == null ? "" : String(a)
+  ), b = p ? h : K, Q = b !== void 0 && b !== "" && b !== null, U = (t) => {
+    p || I(t.currentTarget.value), f == null || f(t);
+  }, W = () => {
+    var t, k;
+    if (!p && n.current) {
+      const x = (t = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) == null ? void 0 : t.set;
+      x == null || x.call(n.current, ""), n.current.dispatchEvent(new Event("input", { bubbles: !0 })), I("");
+    }
+    u == null || u(), (k = n.current) == null || k.focus();
+  };
+  return /* @__PURE__ */ B("div", { className: s("flex flex-col gap-1.5", R), children: [
+    v && /* @__PURE__ */ e(
+      "label",
+      {
+        htmlFor: z,
+        className: s("text-foreground text-sm font-medium", T && "sr-only"),
+        children: v
+      }
+    ),
+    /* @__PURE__ */ B("div", { className: s(ie({ size: O, tone: J })), children: [
+      E && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: E }),
+      /* @__PURE__ */ e(
+        "input",
+        {
+          ref: A,
+          id: z,
+          type: G,
+          disabled: r,
+          value: h,
+          defaultValue: a,
+          onInput: U,
+          "aria-invalid": y ? !0 : m,
+          "aria-describedby": q,
+          className: s(oe()),
+          ...M
+        }
+      ),
+      L && Q && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: W,
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": g.input.clear,
+          className: S,
+          children: /* @__PURE__ */ e($, { className: "size-4", "aria-hidden": !0 })
+        }
+      ),
+      i === "password" && /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          onClick: () => C((t) => !t),
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": d ? g.input.hidePassword : g.input.showPassword,
+          "aria-pressed": d,
+          className: S,
+          children: d ? /* @__PURE__ */ e(ee, { className: "size-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(te, { className: "size-4", "aria-hidden": !0 })
+        }
+      ),
+      w && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: w })
+    ] }),
+    o ? /* @__PURE__ */ e("p", { id: X, className: "text-danger-text text-xs", children: o }) : l ? /* @__PURE__ */ e("p", { id: V, className: "text-foreground-subtle text-xs", children: l }) : null
+  ] });
+});
+ae.displayName = "Input";
+export {
+  ae as Input
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/ui/Input.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useRef,\n  useState,\n  type ComponentProps,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport { Eye, EyeOff, Search, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { cva, type VariantProps } from '@/lib/cva';\nimport { useFieldIds } from '@/hooks/use-field-ids';\n\n/* -----------------------------------------------------------------------------\n *  Field-shell variants. The inner <input> is unstyled background and gets all\n *  its visual treatment from this wrapper so prefix / suffix / clear slots\n *  share the same border + focus state with no double rings.\n * --------------------------------------------------------------------------- */\nconst field = cva(\n  [\n    'group inline-flex items-center w-full',\n    'rounded-md border border-border-input bg-card text-sm',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'has-disabled:opacity-50 has-disabled:pointer-events-none',\n    'focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-offset-background',\n    // Invalid state comes from the input's aria-invalid so Form wiring needs no extra prop.\n    'has-aria-invalid:border-danger has-aria-invalid:focus-within:border-danger has-aria-invalid:focus-within:ring-danger',\n  ],\n  {\n    variants: {\n      size: {\n        sm: 'h-8 px-2.5 gap-1.5',\n        md: 'h-9 px-3 gap-2',\n        lg: 'h-10 px-3.5 gap-2',\n      },\n      tone: {\n        default: 'focus-within:border-accent focus-within:ring-ring',\n        error: 'border-danger focus-within:border-danger focus-within:ring-danger',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n      tone: 'default',\n    },\n  },\n);\n\nconst innerInput = cva([\n  'flex-1 min-w-0 bg-transparent outline-none',\n  'placeholder:text-foreground-subtle',\n  'text-foreground',\n  // 16px below md so iOS Safari does not zoom the page on focus; --text-lg = 1rem.\n  'text-lg md:text-sm',\n  'disabled:cursor-not-allowed',\n]);\n\ntype InputType = NonNullable<InputHTMLAttributes<HTMLInputElement>['type']>;\n\n// Inline clear / password buttons: 24px box (WCAG 2.5.8 minimum) with a halo\n// that extends the hit area without growing the field.\nconst innerButton = cn(\n  'text-foreground-subtle hover:text-foreground relative -m-1 flex size-6 shrink-0 items-center justify-center rounded-sm',\n  'before:absolute before:-inset-0.5 before:content-[\"\"]',\n  'focus-visible:ring-ring focus-visible:ring-offset-background outline-none focus-visible:ring-2 focus-visible:ring-offset-2',\n  'disabled:pointer-events-none',\n);\n\nexport interface InputProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value'>,\n    VariantProps<typeof field> {\n  /** Controlled value. `null` is treated as an empty controlled value (no React warning). */\n  value?: InputHTMLAttributes<HTMLInputElement>['value'] | null;\n  /** Field type. `password` enables a show/hide toggle; `search` adds a clear button. */\n  type?: InputType;\n  /** Visible label rendered above the input. */\n  label?: ReactNode;\n  /** Hint below the input. Hidden while `error` is set. */\n  helperText?: ReactNode;\n  /** Validation message. Renders in `danger` colour and sets `aria-invalid`. */\n  error?: ReactNode;\n  /** Content rendered inside the field, before the input — icon or short text. */\n  prefix?: ReactNode;\n  /** Content rendered inside the field, after the input. */\n  suffix?: ReactNode;\n  /** Show an inline clear (×) button when the input has a value. */\n  clearable?: boolean;\n  /**\n   * Fires when the clear button is pressed. Controlled inputs own their state\n   * and should reset `value` here; uncontrolled inputs are cleared for you.\n   */\n  onClear?: () => void;\n  /** Visually conceal the label while keeping it for screen readers. */\n  hideLabel?: boolean;\n}\n\n/**\n * Text-style input with optional label, helper / error, prefix / suffix,\n * clear, and password show-hide. Wraps a single native `<input>` so it works\n * with `react-hook-form` and any controlled / uncontrolled pattern.\n *\n * @example Email with helper\n *   <Input type=\"email\" label=\"Work email\" helperText=\"We never share this.\" />\n *\n * @example Password with show/hide\n *   <Input type=\"password\" label=\"Password\" autoComplete=\"current-password\" />\n *\n * @example Search with clear\n *   <Input type=\"search\" placeholder=\"Search…\" value={q} onChange={…}\n *          clearable onClear={() => setQ('')} />\n *\n * @do Always pair an input with a visible label. If space forces hiding it,\n *      use `hideLabel` so the label stays in the accessibility tree.\n * @dont Use placeholder as the only label — placeholders disappear on input\n *       and fail accessibility.\n */\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    className,\n    type = 'text',\n    size,\n    tone,\n    label,\n    helperText,\n    error,\n    prefix,\n    suffix,\n    clearable,\n    onClear,\n    hideLabel,\n    id,\n    disabled,\n    value: valueProp,\n    defaultValue,\n    onInput,\n    'aria-describedby': ariaDescribedby,\n    'aria-invalid': ariaInvalid,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const isError = Boolean(error) || ariaInvalid === true || ariaInvalid === 'true';\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: Boolean(error),\n    extra: ariaDescribedby,\n  });\n  // `null` (nullable form state) is a controlled empty value, not \"uncontrolled\".\n  const value = valueProp === null ? '' : valueProp;\n  const innerRef = useRef<HTMLInputElement | null>(null);\n  const setRefs = (el: HTMLInputElement | null) => {\n    innerRef.current = el;\n    if (typeof ref === 'function') ref(el);\n    else if (ref) ref.current = el;\n  };\n\n  const [showPassword, setShowPassword] = useState(false);\n  const effectiveType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\n\n  const effectiveTone = isError ? 'error' : tone;\n\n  // Pre-fill prefix slot for search type.\n  const renderedPrefix =\n    prefix ??\n    (type === 'search' ? <Search className=\"text-foreground-subtle size-4\" aria-hidden /> : null);\n\n  // Track the value of uncontrolled inputs so `clearable` can show/hide the\n  // button without the consumer wiring state.\n  const isControlled = value !== undefined;\n  const [localValue, setLocalValue] = useState<string>(\n    defaultValue === undefined || defaultValue === null ? '' : String(defaultValue),\n  );\n  const current = isControlled ? value : localValue;\n  const hasValue = current !== undefined && current !== '' && current !== null;\n\n  // React 19 types `onInput` as `InputEventHandler`; `ComponentProps` keeps this portable.\n  const handleInput: NonNullable<ComponentProps<'input'>['onInput']> = (e) => {\n    if (!isControlled) setLocalValue(e.currentTarget.value);\n    onInput?.(e);\n  };\n\n  const handleClear = () => {\n    if (!isControlled && innerRef.current) {\n      // Use the native setter so React's onChange/onInput listeners fire.\n      const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, 'value')?.set;\n      setter?.call(innerRef.current, '');\n      innerRef.current.dispatchEvent(new Event('input', { bubbles: true }));\n      setLocalValue('');\n    }\n    onClear?.();\n    innerRef.current?.focus();\n  };\n\n  return (\n    <div className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label\n          htmlFor={fieldId}\n          className={cn('text-foreground text-sm font-medium', hideLabel && 'sr-only')}\n        >\n          {label}\n        </label>\n      )}\n\n      <div className={cn(field({ size, tone: effectiveTone }))}>\n        {renderedPrefix && (\n          <span className=\"text-foreground-subtle flex items-center [&_svg]:size-4\">\n            {renderedPrefix}\n          </span>\n        )}\n\n        <input\n          ref={setRefs}\n          id={fieldId}\n          type={effectiveType}\n          disabled={disabled}\n          value={value}\n          defaultValue={defaultValue}\n          onInput={handleInput}\n          aria-invalid={isError ? true : ariaInvalid}\n          aria-describedby={describedBy}\n          className={cn(innerInput())}\n          {...props}\n        />\n\n        {clearable && hasValue && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            disabled={disabled}\n            tabIndex={disabled ? -1 : undefined}\n            aria-label={strings.input.clear}\n            className={innerButton}\n          >\n            <X className=\"size-4\" aria-hidden />\n          </button>\n        )}\n\n        {type === 'password' && (\n          <button\n            type=\"button\"\n            onClick={() => setShowPassword((p) => !p)}\n            disabled={disabled}\n            tabIndex={disabled ? -1 : undefined}\n            aria-label={showPassword ? strings.input.hidePassword : strings.input.showPassword}\n            aria-pressed={showPassword}\n            className={innerButton}\n          >\n            {showPassword ? (\n              <EyeOff className=\"size-4\" aria-hidden />\n            ) : (\n              <Eye className=\"size-4\" aria-hidden />\n            )}\n          </button>\n        )}\n\n        {suffix && (\n          <span className=\"text-foreground-subtle flex items-center [&_svg]:size-4\">{suffix}</span>\n        )}\n      </div>\n\n      {error ? (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nInput.displayName = 'Input';\n"],"names":["field","cva","innerInput","innerButton","cn","Input","forwardRef","className","type","size","tone","label","helperText","error","prefix","suffix","clearable","onClear","hideLabel","id","disabled","valueProp","defaultValue","onInput","ariaDescribedby","ariaInvalid","props","ref","strings","useStrings","isError","fieldId","helperId","errorId","describedBy","useFieldIds","value","innerRef","useRef","setRefs","el","showPassword","setShowPassword","useState","effectiveType","effectiveTone","renderedPrefix","jsx","Search","isControlled","localValue","setLocalValue","current","hasValue","handleInput","e","handleClear","setter","_a","_b","jsxs","X","p","EyeOff","Eye"],"mappings":"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"}

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

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { cn as s } from "../../lib/utils.js";
+const d = m(function({ size: e = "sm", className: r, ...o }, t) {
+  return /* @__PURE__ */ n(
+    "kbd",
+    {
+      ref: t,
+      className: s(
+        "border-border bg-background-subtle inline-flex items-center justify-center rounded-sm border font-mono",
+        "text-foreground-muted shadow-xs",
+        e === "sm" ? "h-5 min-w-5 px-1 text-xs" : "h-6 min-w-6 px-1.5 text-xs",
+        r
+      ),
+      ...o
+    }
+  );
+});
+d.displayName = "Kbd";
+export {
+  d as Kbd
+};
+//# sourceMappingURL=Kbd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Kbd.js","sources":["../../../src/components/ui/Kbd.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type HTMLAttributes } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface KbdProps extends HTMLAttributes<HTMLElement> {\n  /** Visual size — match the surrounding text. */\n  size?: 'sm' | 'md';\n}\n\n/**\n * Stylised keyboard shortcut indicator. Compose multiple `<Kbd>` for chords.\n *\n * @example\n *   Press <Kbd>⌘</Kbd>+<Kbd>K</Kbd> to open the command palette.\n *\n * @do Use OS-conventional symbols (⌘ ⇧ ⌥ ⌃ ⏎) — keep visuals consistent\n *      across the app.\n * @dont Use Kbd for clickable buttons — it implies a real keyboard input.\n */\nexport const Kbd = forwardRef<HTMLElement, KbdProps>(function Kbd(\n  { size = 'sm', className, ...props },\n  ref,\n) {\n  return (\n    <kbd\n      ref={ref}\n      className={cn(\n        'border-border bg-background-subtle inline-flex items-center justify-center rounded-sm border font-mono',\n        'text-foreground-muted shadow-xs',\n        size === 'sm' ? 'h-5 min-w-5 px-1 text-xs' : 'h-6 min-w-6 px-1.5 text-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n});\nKbd.displayName = 'Kbd';\n"],"names":["Kbd","forwardRef","size","className","props","ref","jsx","cn"],"mappings":";;;;AAoBO,MAAMA,IAAMC,EAAkC,SACnD,EAAE,MAAAC,IAAO,MAAM,WAAAC,GAAW,GAAGC,EAAA,GAC7BC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWE;AAAA,QACT;AAAA,QACA;AAAA,QACAL,MAAS,OAAO,6BAA6B;AAAA,QAC7CC;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,IAAA;AAAA,EAAA;AAGV,CAAC;AACDJ,EAAI,cAAc;"}

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

@@ -32,6 +32,8 @@ export interface MultiSelectProps {
     clearable?: boolean;
     /** Disable the entire field. */
     disabled?: boolean;
+    /** Consumer-supplied id for the search input (label association). */
+    id?: string;
     className?: string;
 }
 /**
@@ -39,7 +41,7 @@ export interface MultiSelectProps {
  *
  * Keyboard:
  *   - Backspace on the input with empty query removes the last chip
- *   - Enter / Space toggles the highlighted option
+ *   - ArrowUp / ArrowDown move the highlight, Enter toggles the highlighted option
  *   - Escape closes the menu
  *
  * @example Tag picker

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

@@ -0,0 +1,210 @@
+"use client";
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as Y, useState as N, useRef as O, useCallback as k, useMemo as P } from "react";
+import * as g from "@radix-ui/react-popover";
+import { Command as b } from "cmdk";
+import { X as j, ChevronsUpDown as Z, Check as _ } from "../../icons/index.js";
+import { cn as a } from "../../lib/utils.js";
+import { useStrings as ee } from "../../hooks/use-strings.js";
+import { formatString as te } from "../../lib/strings.js";
+import { useFieldIds as re } from "../../hooks/use-field-ids.js";
+const oe = Y(function({
+  options: l,
+  value: r,
+  onChange: s,
+  label: d,
+  helperText: h,
+  error: x,
+  placeholder: B,
+  emptyText: L,
+  maxVisibleChips: M = 3,
+  clearable: E = !0,
+  disabled: c,
+  id: S,
+  className: K
+}, U) {
+  const i = ee(), z = B ?? i.multiSelect.placeholder, $ = L ?? i.multiSelect.empty, v = !!x, { fieldId: u, helperId: q, errorId: H, describedBy: Q } = re(S, {
+    hasHelper: !!h,
+    hasError: v
+  }), [f, m] = N(!1), [p, X] = N(""), C = O(null), I = O(null), [G, J] = N(void 0), T = k((e) => J(e == null ? void 0 : e.id), []), w = P(() => l.filter((e) => r.includes(e.value)), [l, r]), D = k(
+    (e) => {
+      r.includes(e) ? s(r.filter((o) => o !== e)) : s([...r, e]);
+    },
+    [r, s]
+  ), V = k(() => s([]), [s]), W = (e) => {
+    e.key === "Backspace" && p === "" && r.length > 0 ? s(r.slice(0, -1)) : (e.key === "ArrowDown" || e.key === "ArrowUp") && !f && m(!0);
+  }, R = P(
+    () => l.filter((e) => e.label.toLowerCase().includes(p.toLowerCase())),
+    [l, p]
+  ), y = w.slice(0, M), A = w.length - y.length;
+  return /* @__PURE__ */ n("div", { ref: U, className: a("flex flex-col gap-1.5", K), children: [
+    d && /* @__PURE__ */ t(
+      "label",
+      {
+        id: `${u}-label`,
+        htmlFor: u,
+        className: "text-foreground text-sm font-medium",
+        children: d
+      }
+    ),
+    /* @__PURE__ */ t(b, { shouldFilter: !1, className: "flex w-full flex-col", children: /* @__PURE__ */ n(g.Root, { open: f, onOpenChange: m, children: [
+      /* @__PURE__ */ t(g.Anchor, { asChild: !0, children: /* @__PURE__ */ n(
+        "div",
+        {
+          ref: I,
+          "aria-disabled": c || void 0,
+          className: a(
+            "bg-card flex h-9 w-full cursor-text items-center gap-1.5 overflow-hidden rounded-md border px-2 py-1 text-sm",
+            "transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]",
+            "focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2",
+            v ? "border-danger focus-within:border-danger focus-within:ring-danger" : "border-border-input focus-within:border-accent focus-within:ring-ring",
+            c && "pointer-events-none opacity-50"
+          ),
+          onClick: () => {
+            var e;
+            (e = C.current) == null || e.focus(), c || m(!0);
+          },
+          children: [
+            /* @__PURE__ */ n("div", { className: "flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden", children: [
+              y.map((e) => /* @__PURE__ */ n(
+                "span",
+                {
+                  className: "bg-accent-soft text-on-accent-soft inline-flex max-w-[10rem] shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium",
+                  children: [
+                    /* @__PURE__ */ t("span", { className: "truncate", title: e.label, children: e.label }),
+                    /* @__PURE__ */ t(
+                      "button",
+                      {
+                        type: "button",
+                        "aria-label": te(i.multiSelect.remove, { label: e.label }),
+                        className: "text-on-accent-soft hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex items-center rounded-sm outline-none before:absolute before:-inset-1.5 before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-1",
+                        onClick: (o) => {
+                          o.stopPropagation(), D(e.value);
+                        },
+                        children: /* @__PURE__ */ t(j, { className: "size-3", "aria-hidden": !0 })
+                      }
+                    )
+                  ]
+                },
+                e.value
+              )),
+              A > 0 && /* @__PURE__ */ n("span", { className: "bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium", children: [
+                "+",
+                A
+              ] }),
+              /* @__PURE__ */ t(
+                "input",
+                {
+                  ref: C,
+                  id: u,
+                  type: "text",
+                  autoComplete: "off",
+                  value: p,
+                  onChange: (e) => X(e.target.value),
+                  onFocus: () => m(!0),
+                  onKeyDown: W,
+                  placeholder: y.length === 0 ? z : void 0,
+                  role: "combobox",
+                  "aria-expanded": f,
+                  "aria-controls": f ? G : void 0,
+                  "aria-haspopup": "listbox",
+                  "aria-autocomplete": "list",
+                  "aria-labelledby": d ? `${u}-label` : void 0,
+                  "aria-label": d || S ? void 0 : z,
+                  "aria-invalid": v || void 0,
+                  "aria-describedby": Q,
+                  className: "placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-lg outline-none md:text-sm",
+                  disabled: c
+                }
+              )
+            ] }),
+            /* @__PURE__ */ n("span", { className: "flex shrink-0 items-center gap-1 pl-1", children: [
+              E && w.length > 0 && /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": i.multiSelect.clearAll,
+                  onClick: (e) => {
+                    e.stopPropagation(), V();
+                  },
+                  className: "text-foreground-subtle hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-6 shrink-0 items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+                  children: /* @__PURE__ */ t(j, { className: "size-4", "aria-hidden": !0 })
+                }
+              ),
+              /* @__PURE__ */ t(Z, { className: "text-foreground-subtle size-4", "aria-hidden": !0 })
+            ] })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ t(g.Portal, { children: /* @__PURE__ */ t(
+        g.Content,
+        {
+          align: "start",
+          sideOffset: 4,
+          "aria-label": i.command.suggestions,
+          className: a(
+            "border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md",
+            "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"
+          ),
+          onOpenAutoFocus: (e) => e.preventDefault(),
+          onInteractOutside: (e) => {
+            var F;
+            const o = e.target;
+            o && ((F = I.current) != null && F.contains(o)) && e.preventDefault();
+          },
+          children: /* @__PURE__ */ n(
+            b.List,
+            {
+              ref: T,
+              label: i.command.suggestions,
+              className: "max-h-64 overflow-y-auto p-1",
+              children: [
+                R.map((e) => {
+                  const o = r.includes(e.value);
+                  return /* @__PURE__ */ n(
+                    b.Item,
+                    {
+                      value: e.value,
+                      disabled: e.disabled,
+                      onSelect: () => D(e.value),
+                      className: a(
+                        "text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm",
+                        "data-[selected=true]:bg-background-muted",
+                        "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50"
+                      ),
+                      children: [
+                        /* @__PURE__ */ t(
+                          "span",
+                          {
+                            "aria-hidden": !0,
+                            className: a(
+                              "flex size-4 items-center justify-center rounded-sm border",
+                              o ? "border-accent bg-accent text-on-accent" : "border-border-input"
+                            ),
+                            children: o && /* @__PURE__ */ t(_, { className: "size-3", "aria-hidden": !0 })
+                          }
+                        ),
+                        /* @__PURE__ */ t("span", { className: "flex-1", children: e.label }),
+                        e.description && /* @__PURE__ */ t("span", { className: "text-foreground-subtle text-xs", children: e.description })
+                      ]
+                    },
+                    e.value
+                  );
+                }),
+                R.length === 0 && /* @__PURE__ */ t(b.Empty, { className: "text-foreground-subtle px-2 py-6 text-center text-sm", children: $ })
+              ]
+            }
+          )
+        }
+      ) })
+    ] }) }),
+    x ? /* @__PURE__ */ t("p", { id: H, className: "text-danger-text text-xs", children: x }) : h ? /* @__PURE__ */ t("p", { id: q, className: "text-foreground-subtle text-xs", children: h }) : null
+  ] });
+});
+oe.displayName = "MultiSelect";
+export {
+  oe as MultiSelect
+};
+//# sourceMappingURL=MultiSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MultiSelect.js","sources":["../../../src/components/ui/MultiSelect.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useRef,\n  useState,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport { Check, ChevronsUpDown, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\nimport { useFieldIds } from '@/hooks/use-field-ids';\n\nexport interface MultiSelectOption {\n  /** Stable, unique value submitted in `onChange`. */\n  value: string;\n  /** Visible label shown both in the menu and in the selected chip. */\n  label: string;\n  /** Optional secondary text shown after the label in the menu. */\n  description?: string;\n  /** Disable selecting this option. */\n  disabled?: boolean;\n}\n\nexport interface MultiSelectProps {\n  /** All possible options. */\n  options: MultiSelectOption[];\n  /** Currently selected values. Controlled. */\n  value: string[];\n  /** Called whenever the selection changes. */\n  onChange: (next: string[]) => void;\n  /** Visible label above the field. */\n  label?: ReactNode;\n  /** Hint below the field. Hidden when `error` is set. */\n  helperText?: ReactNode;\n  /** Validation message. */\n  error?: ReactNode;\n  /** Empty-state placeholder shown when nothing is selected. */\n  placeholder?: string;\n  /** Text shown when no options match the search. */\n  emptyText?: string;\n  /** Max number of chips rendered inline; remainder shown as \"+N more\". */\n  maxVisibleChips?: number;\n  /** Whether the user can clear all selections with a single click. */\n  clearable?: boolean;\n  /** Disable the entire field. */\n  disabled?: boolean;\n  /** Consumer-supplied id for the search input (label association). */\n  id?: string;\n  className?: string;\n}\n\n/**\n * Chip-based multi-select with a searchable menu (cmdk under the hood).\n *\n * Keyboard:\n *   - Backspace on the input with empty query removes the last chip\n *   - ArrowUp / ArrowDown move the highlight, Enter toggles the highlighted option\n *   - Escape closes the menu\n *\n * @example Tag picker\n *   <MultiSelect label=\"Tags\"\n *                options={tags}\n *                value={selected}\n *                onChange={setSelected}\n *                placeholder=\"Pick tags\" />\n *\n * @example Bounded with overflow chip\n *   <MultiSelect options={users}\n *                value={value}\n *                onChange={setValue}\n *                maxVisibleChips={3} />\n *\n * @do Cap `maxVisibleChips` (3–5) on narrow surfaces so the field doesn't\n *      reflow as the user adds selections.\n * @dont Use MultiSelect for fewer than ~6 options. CheckboxGroup is clearer.\n */\nexport const MultiSelect = forwardRef<HTMLDivElement, MultiSelectProps>(function MultiSelect(\n  {\n    options,\n    value,\n    onChange,\n    label,\n    helperText,\n    error,\n    placeholder: placeholderProp,\n    emptyText: emptyTextProp,\n    maxVisibleChips = 3,\n    clearable = true,\n    disabled,\n    id,\n    className,\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const placeholder = placeholderProp ?? strings.multiSelect.placeholder;\n  const emptyText = emptyTextProp ?? strings.multiSelect.empty;\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\n\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState('');\n  const inputRef = useRef<HTMLInputElement>(null);\n  const fieldRef = useRef<HTMLDivElement>(null);\n  // cmdk assigns its own id to the list (ours is ignored), so read it back\n  // from the node once the portal mounts to keep aria-controls truthful.\n  const [listId, setListId] = useState<string | undefined>(undefined);\n  const listRef = useCallback((el: HTMLDivElement | null) => setListId(el?.id), []);\n\n  const selected = useMemo(() => options.filter((o) => value.includes(o.value)), [options, value]);\n\n  const toggle = useCallback(\n    (v: string) => {\n      if (value.includes(v)) onChange(value.filter((x) => x !== v));\n      else onChange([...value, v]);\n    },\n    [value, onChange],\n  );\n\n  const clear = useCallback(() => onChange([]), [onChange]);\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Backspace' && query === '' && value.length > 0) {\n      onChange(value.slice(0, -1));\n    } else if ((e.key === 'ArrowDown' || e.key === 'ArrowUp') && !open) {\n      setOpen(true);\n    }\n  };\n\n  const filtered = useMemo(\n    () => options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())),\n    [options, query],\n  );\n\n  const visibleChips = selected.slice(0, maxVisibleChips);\n  const overflow = selected.length - visibleChips.length;\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-1.5', className)}>\n      {label && (\n        <label\n          id={`${fieldId}-label`}\n          htmlFor={fieldId}\n          className=\"text-foreground text-sm font-medium\"\n        >\n          {label}\n        </label>\n      )}\n\n      {/* The Command root wraps the whole field so cmdk's root keydown handler\n          (ArrowUp/Down/Enter) sees the input even though the list is portaled.\n          A plain <input> is used instead of Command.Input because cmdk forces\n          its own id / aria-* on that element, breaking the label association. */}\n      <CommandPrimitive shouldFilter={false} className=\"flex w-full flex-col\">\n        <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n          <PopoverPrimitive.Anchor asChild>\n            {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions -- click-to-focus wrapper; the <input role=\"combobox\"> inside owns keyboard handling */}\n            <div\n              ref={fieldRef}\n              aria-disabled={disabled || undefined}\n              className={cn(\n                'bg-card flex h-9 w-full cursor-text items-center gap-1.5 overflow-hidden rounded-md border px-2 py-1 text-sm',\n                'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n                'focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n                isError\n                  ? 'border-danger focus-within:border-danger focus-within:ring-danger'\n                  : 'border-border-input focus-within:border-accent focus-within:ring-ring',\n                disabled && 'pointer-events-none opacity-50',\n              )}\n              onClick={() => {\n                inputRef.current?.focus();\n                if (!disabled) setOpen(true);\n              }}\n            >\n              <div className=\"flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden\">\n                {visibleChips.map((opt) => (\n                  <span\n                    key={opt.value}\n                    className=\"bg-accent-soft text-on-accent-soft inline-flex max-w-[10rem] shrink-0 items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium\"\n                  >\n                    <span className=\"truncate\" title={opt.label}>\n                      {opt.label}\n                    </span>\n                    <button\n                      type=\"button\"\n                      aria-label={formatString(strings.multiSelect.remove, { label: opt.label })}\n                      className=\"text-on-accent-soft hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background relative inline-flex items-center rounded-sm outline-none before:absolute before:-inset-1.5 before:content-[''] focus-visible:ring-2 focus-visible:ring-offset-1\"\n                      onClick={(e) => {\n                        e.stopPropagation();\n                        toggle(opt.value);\n                      }}\n                    >\n                      <X className=\"size-3\" aria-hidden />\n                    </button>\n                  </span>\n                ))}\n                {overflow > 0 && (\n                  <span className=\"bg-background-muted text-foreground-muted shrink-0 rounded-md px-1.5 py-0.5 text-xs font-medium\">\n                    +{overflow}\n                  </span>\n                )}\n                <input\n                  ref={inputRef}\n                  id={fieldId}\n                  type=\"text\"\n                  autoComplete=\"off\"\n                  value={query}\n                  onChange={(e) => setQuery(e.target.value)}\n                  onFocus={() => setOpen(true)}\n                  onKeyDown={handleKeyDown}\n                  placeholder={visibleChips.length === 0 ? placeholder : undefined}\n                  role=\"combobox\"\n                  aria-expanded={open}\n                  aria-controls={open ? listId : undefined}\n                  aria-haspopup=\"listbox\"\n                  aria-autocomplete=\"list\"\n                  // Unlabelled field: name the input after the placeholder. A\n                  // consumer `id` implies an external <label htmlFor>.\n                  aria-labelledby={label ? `${fieldId}-label` : undefined}\n                  aria-label={label || id ? undefined : placeholder}\n                  aria-invalid={isError || undefined}\n                  aria-describedby={describedBy}\n                  className=\"placeholder:text-foreground-subtle min-w-[6ch] flex-1 bg-transparent text-lg outline-none md:text-sm\"\n                  disabled={disabled}\n                />\n              </div>\n              <span className=\"flex shrink-0 items-center gap-1 pl-1\">\n                {clearable && selected.length > 0 && (\n                  <button\n                    type=\"button\"\n                    aria-label={strings.multiSelect.clearAll}\n                    onClick={(e) => {\n                      e.stopPropagation();\n                      clear();\n                    }}\n                    className=\"text-foreground-subtle hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background inline-flex size-6 shrink-0 items-center justify-center rounded-sm outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n                  >\n                    <X className=\"size-4\" aria-hidden />\n                  </button>\n                )}\n                <ChevronsUpDown className=\"text-foreground-subtle size-4\" aria-hidden />\n              </span>\n            </div>\n          </PopoverPrimitive.Anchor>\n\n          <PopoverPrimitive.Portal>\n            <PopoverPrimitive.Content\n              align=\"start\"\n              sideOffset={4}\n              // Radix gives the content role=\"dialog\"; a dialog needs a name.\n              aria-label={strings.command.suggestions}\n              className={cn(\n                'border-border bg-popover text-popover-foreground z-[var(--z-popover)] w-[var(--radix-popover-trigger-width)] overflow-hidden rounded-lg border shadow-md',\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              )}\n              onOpenAutoFocus={(e) => e.preventDefault()}\n              onInteractOutside={(e) => {\n                // Clicks inside the anchor (chips, clear) must not close the menu.\n                const target = e.target as Node | null;\n                if (target && fieldRef.current?.contains(target)) e.preventDefault();\n              }}\n            >\n              <CommandPrimitive.List\n                ref={listRef}\n                label={strings.command.suggestions}\n                className=\"max-h-64 overflow-y-auto p-1\"\n              >\n                {filtered.map((opt) => {\n                  const isSelected = value.includes(opt.value);\n                  return (\n                    <CommandPrimitive.Item\n                      key={opt.value}\n                      value={opt.value}\n                      disabled={opt.disabled}\n                      onSelect={() => toggle(opt.value)}\n                      className={cn(\n                        'text-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm',\n                        'data-[selected=true]:bg-background-muted',\n                        'data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',\n                      )}\n                    >\n                      <span\n                        aria-hidden\n                        className={cn(\n                          'flex size-4 items-center justify-center rounded-sm border',\n                          isSelected\n                            ? 'border-accent bg-accent text-on-accent'\n                            : 'border-border-input',\n                        )}\n                      >\n                        {isSelected && <Check className=\"size-3\" aria-hidden />}\n                      </span>\n                      <span className=\"flex-1\">{opt.label}</span>\n                      {opt.description && (\n                        <span className=\"text-foreground-subtle text-xs\">{opt.description}</span>\n                      )}\n                    </CommandPrimitive.Item>\n                  );\n                })}\n                {filtered.length === 0 && (\n                  <CommandPrimitive.Empty className=\"text-foreground-subtle px-2 py-6 text-center text-sm\">\n                    {emptyText}\n                  </CommandPrimitive.Empty>\n                )}\n              </CommandPrimitive.List>\n            </PopoverPrimitive.Content>\n          </PopoverPrimitive.Portal>\n        </PopoverPrimitive.Root>\n      </CommandPrimitive>\n\n      {error ? (\n        <p id={errorId} className=\"text-danger-text text-xs\">\n          {error}\n        </p>\n      ) : helperText ? (\n        <p id={helperId} className=\"text-foreground-subtle text-xs\">\n          {helperText}\n        </p>\n      ) : null}\n    </div>\n  );\n});\n\nMultiSelect.displayName = 'MultiSelect';\n"],"names":["MultiSelect","forwardRef","options","value","onChange","label","helperText","error","placeholderProp","emptyTextProp","maxVisibleChips","clearable","disabled","id","className","ref","strings","useStrings","placeholder","emptyText","isError","fieldId","helperId","errorId","describedBy","useFieldIds","open","setOpen","useState","query","setQuery","inputRef","useRef","fieldRef","listId","setListId","listRef","useCallback","el","selected","useMemo","o","toggle","v","x","clear","handleKeyDown","filtered","visibleChips","overflow","cn","jsx","CommandPrimitive","jsxs","PopoverPrimitive","_a","opt","formatString","e","X","ChevronsUpDown","target","isSelected","Check"],"mappings":"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"}

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

@@ -1,4 +1,25 @@
 import { HTMLAttributes } from 'react';
+import { UiStrings } from '../../lib/strings.js';
+export interface PaginationLabels {
+    /** Summary line. Receives the computed range. */
+    showing: (from: number, to: number, total: number) => string;
+    /** sr-only label for the page-size select. */
+    rowsPerPage: string;
+    first: string;
+    last: string;
+    prev: string;
+    next: string;
+    /** aria-label for a numbered page button. */
+    page: (n: number) => string;
+    /** Suffix in the page-size options, e.g. "20 / page". */
+    perPage: (n: number) => string;
+    /** aria-label of the nav landmark. */
+    nav: string;
+}
+/** Build the label set from a strings object (context → functions). */
+export declare function paginationLabelsFromStrings(s: UiStrings['pagination']): PaginationLabels;
+/** English defaults — derived from `defaultStrings.pagination`. */
+export declare const defaultPaginationLabels: PaginationLabels;
 export interface PaginationProps extends HTMLAttributes<HTMLElement> {
     /** 1-indexed current page. */
     page: number;
@@ -16,6 +37,8 @@ export interface PaginationProps extends HTMLAttributes<HTMLElement> {
     onPageSizeChange?: (size: number) => void;
     /** Show first/last (« ») jump buttons. Default true. */
     showJump?: boolean;
+    /** Override any of the visible / accessible strings (i18n). */
+    labels?: Partial<PaginationLabels>;
 }
 /**
  * Numbered pagination with prev/next, first/last jumps, page-size selector,