@craftzbay/ui 0.10.0 → 0.11.1

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

@@ -1,18 +1,20 @@
 "use client";
-import { jsxs as E, jsx as e } from "react/jsx-runtime";
-import { forwardRef as K, useRef as Q, useState as I } from "react";
-import { X as U, EyeOff as W, Eye as Y, Search as Z } from "../../icons/index.js";
-import { cn as a } from "../../lib/utils.js";
-import { useStrings as $ } from "../../hooks/use-strings.js";
-import { useFieldIds as ee } from "../../hooks/use-field-ids.js";
-import { cva as P } from "class-variance-authority";
-const te = P(
+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-input bg-card text-sm",
+    "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"
+    "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: {
@@ -31,105 +33,126 @@ const te = P(
       tone: "default"
     }
   }
-), re = P([
+), oe = j([
   "flex-1 min-w-0 bg-transparent outline-none",
+  // Fill the field's height so the focusable target is the full control
+  // (32/36/40px), not the ~20px text box. Below 24px axe's target-size
+  // rule only passes while nothing sits close by, which is a trap for
+  // consumers packing a toolbar.
+  "self-stretch",
   "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"
-]), se = K(function({
-  className: S,
-  type: s = "text",
-  size: R,
-  tone: j,
-  label: x,
-  helperText: d,
-  error: c,
-  prefix: k,
-  suffix: v,
-  clearable: B,
-  onClear: l,
-  hideLabel: O,
-  id: F,
-  disabled: H,
-  value: u,
-  defaultValue: n,
+  "disabled:cursor-not-allowed",
+  // `type="search"` draws a native clear button in WebKit/Chromium. We render
+  // our own via `clearable`, so suppress the native one or both show at once.
+  "[&::-webkit-search-cancel-button]:appearance-none",
+  "[&::-webkit-search-decoration]:appearance-none"
+]), 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,
-  ...L
-}, o) {
-  const m = $(), p = !!c, { fieldId: w, helperId: T, errorId: _, describedBy: D } = ee(F, {
-    hasHelper: !!d,
-    hasError: p
-  }), r = Q(null), M = (t) => {
-    r.current = t, typeof o == "function" ? o(t) : o && (o.current = t);
-  }, [i, V] = I(!1), X = s === "password" ? i ? "text" : "password" : s, q = p ? "error" : j, N = k ?? (s === "search" ? /* @__PURE__ */ e(Z, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }) : null), g = u !== void 0, [A, y] = I(
-    n == null ? "" : String(n)
-  ), h = g ? u : A, C = h !== void 0 && h !== "" && h !== null, G = (t) => {
-    g || y(t.currentTarget.value), f == null || f(t);
-  }, J = () => {
-    var t, z;
-    if (!g && r.current) {
-      const b = (t = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")) == null ? void 0 : t.set;
-      b == null || b.call(r.current, ""), r.current.dispatchEvent(new Event("input", { bubbles: !0 })), y("");
+  "aria-describedby": D,
+  "aria-invalid": p,
+  ...M
+}, c) {
+  const h = ne(), y = !!o || p === !0 || p === "true", { fieldId: z, helperId: V, errorId: X, describedBy: q } = se(_, {
+    hasHelper: !!l,
+    hasError: !!o,
+    extra: D
+  }), m = 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, k = H ?? (i === "search" ? /* @__PURE__ */ e(re, { className: "text-foreground-subtle size-4", "aria-hidden": !0 }) : null), b = m !== void 0, [K, E] = P(
+    a == null ? "" : String(a)
+  ), g = b ? m : K, Q = g !== void 0 && g !== "" && g !== null, U = (t) => {
+    b || E(t.currentTarget.value), f == null || f(t);
+  }, W = () => {
+    var t, I;
+    if (!b && 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 })), E("");
     }
-    l == null || l(), (z = r.current) == null || z.focus();
+    u == null || u(), (I = n.current) == null || I.focus();
   };
-  return /* @__PURE__ */ E("div", { className: a("flex flex-col gap-1.5", S), children: [
-    x && /* @__PURE__ */ e(
+  return /* @__PURE__ */ B("div", { className: s("flex flex-col gap-1.5", R), children: [
+    v && /* @__PURE__ */ e(
       "label",
       {
-        htmlFor: w,
-        className: a("text-foreground text-sm font-medium", O && "sr-only"),
-        children: x
+        htmlFor: z,
+        className: s("text-foreground text-sm font-medium", T && "sr-only"),
+        children: v
       }
     ),
-    /* @__PURE__ */ E("div", { className: a(te({ size: R, tone: q })), children: [
-      N && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: N }),
+    /* @__PURE__ */ B("div", { className: s(ie({ size: O, tone: J })), children: [
+      k && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: k }),
       /* @__PURE__ */ e(
         "input",
         {
-          ref: M,
-          id: w,
-          type: X,
-          disabled: H,
-          value: u,
-          defaultValue: n,
-          onInput: G,
-          "aria-invalid": p || void 0,
-          "aria-describedby": D,
-          className: a(re()),
-          ...L
+          ref: A,
+          id: z,
+          type: G,
+          disabled: r,
+          value: m,
+          defaultValue: a,
+          onInput: U,
+          "aria-invalid": y ? !0 : p,
+          "aria-describedby": q,
+          className: s(oe()),
+          ...M
         }
       ),
-      B && C && /* @__PURE__ */ e(
+      L && Q && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: J,
-          "aria-label": m.input.clear,
-          className: "text-foreground-subtle hover:text-foreground focus-visible:ring-ring flex items-center rounded-sm outline-none focus-visible:ring-2",
-          children: /* @__PURE__ */ e(U, { className: "size-4", "aria-hidden": !0 })
+          onClick: W,
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": h.input.clear,
+          className: S,
+          children: /* @__PURE__ */ e($, { className: "size-4", "aria-hidden": !0 })
         }
       ),
-      s === "password" && /* @__PURE__ */ e(
+      i === "password" && /* @__PURE__ */ e(
         "button",
         {
           type: "button",
-          onClick: () => V((t) => !t),
-          "aria-label": i ? m.input.hidePassword : m.input.showPassword,
-          "aria-pressed": i,
-          className: "text-foreground-subtle hover:text-foreground focus-visible:ring-ring flex items-center rounded-sm outline-none focus-visible:ring-2",
-          children: i ? /* @__PURE__ */ e(W, { className: "size-4", "aria-hidden": !0 }) : /* @__PURE__ */ e(Y, { className: "size-4", "aria-hidden": !0 })
+          onClick: () => C((t) => !t),
+          disabled: r,
+          tabIndex: r ? -1 : void 0,
+          "aria-label": d ? h.input.hidePassword : h.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 })
         }
       ),
-      v && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: v })
+      w && /* @__PURE__ */ e("span", { className: "text-foreground-subtle flex items-center [&_svg]:size-4", children: w })
     ] }),
-    c ? /* @__PURE__ */ e("p", { id: _, role: "alert", className: "text-danger-text text-xs", children: c }) : d ? /* @__PURE__ */ e("p", { id: T, className: "text-foreground-subtle text-xs", children: d }) : null
+    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
   ] });
 });
-se.displayName = "Input";
+ae.displayName = "Input";
 export {
-  se as Input
+  ae as Input
 };
 //# sourceMappingURL=Input.js.map

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

@@ -1 +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 FormEvent,\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-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  ],\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\nexport interface InputProps\n  extends\n    Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>,\n    VariantProps<typeof field> {\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,\n    defaultValue,\n    onInput,\n    ...props\n  },\n  ref,\n) {\n  const strings = useStrings();\n  const isError = Boolean(error);\n  const { fieldId, helperId, errorId, describedBy } = useFieldIds(id, {\n    hasHelper: Boolean(helperText),\n    hasError: isError,\n  });\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  const handleInput = (e: FormEvent<HTMLInputElement>) => {\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 || undefined}\n          aria-describedby={describedBy}\n          className={cn(innerInput())}\n          {...props}\n        />\n\n        {clearable && hasValue && (\n          <button\n            type=\"button\"\n            onClick={handleClear}\n            aria-label={strings.input.clear}\n            className=\"text-foreground-subtle hover:text-foreground focus-visible:ring-ring flex items-center rounded-sm outline-none focus-visible:ring-2\"\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            aria-label={showPassword ? strings.input.hidePassword : strings.input.showPassword}\n            aria-pressed={showPassword}\n            className=\"text-foreground-subtle hover:text-foreground focus-visible:ring-ring flex items-center rounded-sm outline-none focus-visible:ring-2\"\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} role=\"alert\" 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","Input","forwardRef","className","type","size","tone","label","helperText","error","prefix","suffix","clearable","onClear","hideLabel","id","disabled","value","defaultValue","onInput","props","ref","strings","useStrings","isError","fieldId","helperId","errorId","describedBy","useFieldIds","innerRef","useRef","setRefs","el","showPassword","setShowPassword","useState","effectiveType","effectiveTone","renderedPrefix","jsx","Search","isControlled","localValue","setLocalValue","current","hasValue","handleInput","e","handleClear","setter","_a","_b","cn","jsxs","X","p","EyeOff","Eye"],"mappings":";;;;;;;;AAqBA,MAAMA,KAAQC;AAAA,EACZ;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,MAEN,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,IAEF,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GAEMC,KAAaD,EAAI;AAAA,EACrB;AAAA,EACA;AAAA,EACA;AAAA;AAAA,EAEA;AAAA,EACA;AACF,CAAC,GAmDYE,KAAQC,EAAyC,SAC5D;AAAA,EACE,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,MAAAC;AAAA,EACA,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAU,EAAQf,GAClB,EAAE,SAAAgB,GAAS,UAAAC,GAAU,SAAAC,GAAS,aAAAC,EAAA,IAAgBC,GAAYd,GAAI;AAAA,IAClE,WAAW,EAAQP;AAAA,IACnB,UAAUgB;AAAA,EAAA,CACX,GACKM,IAAWC,EAAgC,IAAI,GAC/CC,IAAU,CAACC,MAAgC;AAC/C,IAAAH,EAAS,UAAUG,GACf,OAAOZ,KAAQ,aAAYA,EAAIY,CAAE,IAC5BZ,QAAS,UAAUY;AAAA,EAC9B,GAEM,CAACC,GAAcC,CAAe,IAAIC,EAAS,EAAK,GAChDC,IAAgBjC,MAAS,aAAc8B,IAAe,SAAS,aAAc9B,GAE7EkC,IAAgBd,IAAU,UAAUlB,GAGpCiC,IACJ7B,MACCN,MAAS,WAAW,gBAAAoC,EAACC,KAAO,WAAU,iCAAgC,eAAW,GAAA,CAAC,IAAK,OAIpFC,IAAezB,MAAU,QACzB,CAAC0B,GAAYC,CAAa,IAAIR;AAAA,IACJlB,KAAiB,OAAO,KAAK,OAAOA,CAAY;AAAA,EAAA,GAE1E2B,IAAUH,IAAezB,IAAQ0B,GACjCG,IAAWD,MAAY,UAAaA,MAAY,MAAMA,MAAY,MAElEE,IAAc,CAACC,MAAmC;AACtD,IAAKN,KAAcE,EAAcI,EAAE,cAAc,KAAK,GACtD7B,KAAA,QAAAA,EAAU6B;AAAA,EACZ,GAEMC,IAAc,MAAM;;AACxB,QAAI,CAACP,KAAgBZ,EAAS,SAAS;AAErC,YAAMoB,KAASC,IAAA,OAAO,yBAAyB,iBAAiB,WAAW,OAAO,MAAnE,gBAAAA,EAAsE;AACrF,MAAAD,KAAA,QAAAA,EAAQ,KAAKpB,EAAS,SAAS,KAC/BA,EAAS,QAAQ,cAAc,IAAI,MAAM,SAAS,EAAE,SAAS,GAAA,CAAM,CAAC,GACpEc,EAAc,EAAE;AAAA,IAClB;AACA,IAAA/B,KAAA,QAAAA,MACAuC,IAAAtB,EAAS,YAAT,QAAAsB,EAAkB;AAAA,EACpB;AAEA,2BACG,OAAA,EAAI,WAAWC,EAAG,yBAAyBlD,CAAS,GAClD,UAAA;AAAA,IAAAI,KACC,gBAAAiC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASf;AAAA,QACT,WAAW4B,EAAG,uCAAuCvC,KAAa,SAAS;AAAA,QAE1E,UAAAP;AAAA,MAAA;AAAA,IAAA;AAAA,IAIL,gBAAA+C,EAAC,OAAA,EAAI,WAAWD,EAAGvD,GAAM,EAAE,MAAAO,GAAM,MAAMiC,GAAe,CAAC,GACpD,UAAA;AAAA,MAAAC,KACC,gBAAAC,EAAC,QAAA,EAAK,WAAU,2DACb,UAAAD,GACH;AAAA,MAGF,gBAAAC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAKR;AAAA,UACL,IAAIP;AAAA,UACJ,MAAMY;AAAA,UACN,UAAArB;AAAA,UACA,OAAAC;AAAA,UACA,cAAAC;AAAA,UACA,SAAS6B;AAAA,UACT,gBAAcvB,KAAW;AAAA,UACzB,oBAAkBI;AAAA,UAClB,WAAWyB,EAAGrD,IAAY;AAAA,UACzB,GAAGoB;AAAA,QAAA;AAAA,MAAA;AAAA,MAGLR,KAAakC,KACZ,gBAAAN;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAASS;AAAA,UACT,cAAY3B,EAAQ,MAAM;AAAA,UAC1B,WAAU;AAAA,UAEV,UAAA,gBAAAkB,EAACe,GAAA,EAAE,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAIrCnD,MAAS,cACR,gBAAAoC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS,MAAML,EAAgB,CAACqB,MAAM,CAACA,CAAC;AAAA,UACxC,cAAYtB,IAAeZ,EAAQ,MAAM,eAAeA,EAAQ,MAAM;AAAA,UACtE,gBAAcY;AAAA,UACd,WAAU;AAAA,UAET,UAAAA,IACC,gBAAAM,EAACiB,GAAA,EAAO,WAAU,UAAS,eAAW,GAAA,CAAC,IAEvC,gBAAAjB,EAACkB,GAAA,EAAI,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,QAAA;AAAA,MAAA;AAAA,MAKzC/C,KACC,gBAAA6B,EAAC,QAAA,EAAK,WAAU,2DAA2D,UAAA7B,EAAA,CAAO;AAAA,IAAA,GAEtF;AAAA,IAECF,IACC,gBAAA+B,EAAC,KAAA,EAAE,IAAIb,GAAS,MAAK,SAAQ,WAAU,4BACpC,aACH,IACEnB,sBACD,KAAA,EAAE,IAAIkB,GAAU,WAAU,kCACxB,aACH,IACE;AAAA,EAAA,GACN;AAEJ,CAAC;AAEDzB,GAAM,cAAc;"}
+{"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  // Fill the field's height so the focusable target is the full control\n  // (32/36/40px), not the ~20px text box. Below 24px axe's target-size\n  // rule only passes while nothing sits close by, which is a trap for\n  // consumers packing a toolbar.\n  'self-stretch',\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  // `type=\"search\"` draws a native clear button in WebKit/Chromium. We render\n  // our own via `clearable`, so suppress the native one or both show at once.\n  '[&::-webkit-search-cancel-button]:appearance-none',\n  '[&::-webkit-search-decoration]:appearance-none',\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

@@ -8,7 +8,7 @@ const d = m(function({ size: e = "sm", className: r, ...o }, t) {
     {
       ref: t,
       className: s(
-        "inline-flex items-center justify-center rounded-sm border border-border bg-background-subtle font-mono",
+        "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

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

@@ -1 +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        'inline-flex items-center justify-center rounded-sm border border-border bg-background-subtle 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;"}
+{"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;"}