@craftzbay/ui 0.10.0 → 0.11.1

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

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.js","sources":["../../../src/components/ui/FileUpload.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type DragEvent as ReactDragEvent,\n  type ReactNode,\n} from 'react';\nimport { File as FileIcon, Upload, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString } from '@/lib/strings';\n\nexport type FileRejectReason = 'size' | 'type';\n\nexport interface FileUploadProps {\n  /** Accepted file types, e.g. `image/*` or `.pdf,.docx`. */\n  accept?: string;\n  /** Allow multiple files. */\n  multiple?: boolean;\n  /** Max file size in bytes. Files larger than this are rejected. */\n  maxSize?: number;\n  /** Controlled file list. */\n  value?: File[];\n  /** Called when files are added or removed. */\n  onChange?: (files: File[]) => void;\n  /** Called with the files that were dropped because of `maxSize` or `accept`. */\n  onReject?: (files: File[], reason: FileRejectReason) => void;\n  /** Helper text inside the drop zone. */\n  hint?: ReactNode;\n  /** Disable the picker entirely. */\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction formatSize(bytes: number) {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  return `${(bytes / 1024 / 1024).toFixed(1)} MB`;\n}\n\n/** Mirror the browser's `accept` matching for dropped files (which skip the picker filter). */\nfunction matchesAccept(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const rules = accept\n    .split(',')\n    .map((r) => r.trim().toLowerCase())\n    .filter(Boolean);\n  if (!rules.length) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/**\n * Drag-and-drop file picker with an inline file list. Uncontrolled by default;\n * pass `value` + `onChange` to control externally.\n */\nexport const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function FileUpload(\n  { accept, multiple, maxSize, value, onChange, onReject, hint, disabled, className },\n  ref,\n) {\n  const strings = useStrings();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = useId();\n  const [internal, setInternal] = useState<File[]>([]);\n  const [over, setOver] = useState(false);\n  const files = value ?? internal;\n\n  const update = useCallback(\n    (next: File[]) => {\n      if (value === undefined) setInternal(next);\n      onChange?.(next);\n    },\n    [onChange, value],\n  );\n\n  const addFiles = useCallback(\n    (incoming: FileList | File[]) => {\n      const accepted: File[] = [];\n      const tooLarge: File[] = [];\n      const wrongType: File[] = [];\n      for (const f of Array.from(incoming)) {\n        if (!matchesAccept(f, accept)) wrongType.push(f);\n        else if (maxSize && f.size > maxSize) tooLarge.push(f);\n        else accepted.push(f);\n      }\n      if (wrongType.length) onReject?.(wrongType, 'type');\n      if (tooLarge.length) onReject?.(tooLarge, 'size');\n      if (!accepted.length) return;\n      update(multiple ? [...files, ...accepted] : accepted.slice(0, 1));\n    },\n    [accept, files, maxSize, multiple, onReject, update],\n  );\n\n  const remove = (idx: number) => update(files.filter((_, i) => i !== idx));\n\n  const onDrop = (e: ReactDragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    setOver(false);\n    if (disabled) return;\n    addFiles(e.dataTransfer.files);\n  };\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-3', className)}>\n      <label\n        htmlFor={inputId}\n        onDragOver={(e) => {\n          e.preventDefault();\n          if (!disabled) setOver(true);\n        }}\n        onDragLeave={() => setOver(false)}\n        onDrop={onDrop}\n        className={cn(\n          'group relative flex cursor-pointer flex-col items-center justify-center gap-2',\n          'border-border bg-background-subtle rounded-md border border-dashed px-6 py-8',\n          'text-center transition-colors',\n          'hover:border-border-strong hover:bg-background-muted',\n          'focus-within:ring-ring focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n          over && 'border-accent bg-accent-soft',\n          disabled && 'pointer-events-none opacity-50',\n        )}\n      >\n        <Upload className=\"text-foreground-muted size-5\" aria-hidden />\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium\">{strings.fileUpload.drop}</p>\n          {hint && <p className=\"text-foreground-muted text-xs\">{hint}</p>}\n        </div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"sr-only\"\n          onChange={(e) => {\n            if (e.target.files) addFiles(e.target.files);\n            // Allow re-selecting the same file after removing it.\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {files.map((file, idx) => (\n            <li\n              key={`${file.name}-${idx}`}\n              className=\"border-border bg-card flex items-center gap-3 rounded-md border px-3 py-2\"\n            >\n              <FileIcon className=\"text-foreground-muted size-4 shrink-0\" aria-hidden />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm\" title={file.name}>\n                  {file.name}\n                </p>\n                <p className=\"text-foreground-muted text-xs\">{formatSize(file.size)}</p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => remove(idx)}\n                className=\"text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring rounded-sm p-1 outline-none focus-visible:ring-2\"\n                aria-label={formatString(strings.fileUpload.remove, { name: file.name })}\n              >\n                <X className=\"size-4\" aria-hidden />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nFileUpload.displayName = 'FileUpload';\n"],"names":["formatSize","bytes","matchesAccept","file","accept","rules","name","type","rule","FileUpload","forwardRef","multiple","maxSize","value","onChange","onReject","hint","disabled","className","ref","strings","useStrings","inputRef","useRef","inputId","useId","internal","setInternal","useState","over","setOver","files","update","useCallback","next","addFiles","incoming","accepted","tooLarge","wrongType","f","remove","idx","_","i","onDrop","cn","jsxs","jsx","Upload","FileIcon","formatString","X"],"mappings":";;;;;;;AAsCA,SAASA,EAAWC,GAAe;AACjC,SAAIA,IAAQ,OAAa,GAAGA,CAAK,OAC7BA,IAAQ,OAAO,OAAa,IAAIA,IAAQ,MAAM,QAAQ,CAAC,CAAC,QACrD,IAAIA,IAAQ,OAAO,MAAM,QAAQ,CAAC,CAAC;AAC5C;AAGA,SAASC,EAAcC,GAAYC,GAA0B;AAC3D,MAAI,CAACA,EAAQ,QAAO;AACpB,QAAMC,IAAQD,EACX,MAAM,GAAG,EACT,IAAI,CAAC,MAAM,EAAE,OAAO,YAAA,CAAa,EACjC,OAAO,OAAO;AACjB,MAAI,CAACC,EAAM,OAAQ,QAAO;AAC1B,QAAMC,IAAOH,EAAK,KAAK,YAAA,GACjBI,IAAOJ,EAAK,KAAK,YAAA;AACvB,SAAOE,EAAM,KAAK,CAACG,MACbA,EAAK,WAAW,GAAG,IAAUF,EAAK,SAASE,CAAI,IAC/CA,EAAK,SAAS,IAAI,IAAUD,EAAK,WAAWC,EAAK,MAAM,GAAG,EAAE,CAAC,IAC1DD,MAASC,CACjB;AACH;AAMO,MAAMC,IAAaC,EAA4C,SACpE,EAAE,QAAAN,GAAQ,UAAAO,GAAU,SAAAC,GAAS,OAAAC,GAAO,UAAAC,GAAU,UAAAC,GAAU,MAAAC,GAAM,UAAAC,GAAU,WAAAC,EAAA,GACxEC,GACA;AACA,QAAMC,IAAUC,EAAA,GACVC,IAAWC,EAAyB,IAAI,GACxCC,IAAUC,EAAA,GACV,CAACC,GAAUC,CAAW,IAAIC,EAAiB,CAAA,CAAE,GAC7C,CAACC,GAAMC,CAAO,IAAIF,EAAS,EAAK,GAChCG,IAAQlB,KAASa,GAEjBM,IAASC;AAAA,IACb,CAACC,MAAiB;AAChB,MAAIrB,MAAU,UAAWc,EAAYO,CAAI,GACzCpB,KAAA,QAAAA,EAAWoB;AAAA,IACb;AAAA,IACA,CAACpB,GAAUD,CAAK;AAAA,EAAA,GAGZsB,IAAWF;AAAA,IACf,CAACG,MAAgC;AAC/B,YAAMC,IAAmB,CAAA,GACnBC,IAAmB,CAAA,GACnBC,IAAoB,CAAA;AAC1B,iBAAWC,KAAK,MAAM,KAAKJ,CAAQ;AACjC,QAAKlC,EAAcsC,GAAGpC,CAAM,IACnBQ,KAAW4B,EAAE,OAAO5B,IAAS0B,EAAS,KAAKE,CAAC,IAChDH,EAAS,KAAKG,CAAC,IAFWD,EAAU,KAAKC,CAAC;AAMjD,MAFID,EAAU,WAAQxB,KAAA,QAAAA,EAAWwB,GAAW,UACxCD,EAAS,WAAQvB,KAAA,QAAAA,EAAWuB,GAAU,UACrCD,EAAS,UACdL,EAAOrB,IAAW,CAAC,GAAGoB,GAAO,GAAGM,CAAQ,IAAIA,EAAS,MAAM,GAAG,CAAC,CAAC;AAAA,IAClE;AAAA,IACA,CAACjC,GAAQ2B,GAAOnB,GAASD,GAAUI,GAAUiB,CAAM;AAAA,EAAA,GAG/CS,IAAS,CAACC,MAAgBV,EAAOD,EAAM,OAAO,CAACY,GAAGC,MAAMA,MAAMF,CAAG,CAAC,GAElEG,IAAS,CAAC,MAAwC;AAGtD,IAFA,EAAE,eAAA,GACFf,EAAQ,EAAK,GACT,CAAAb,KACJkB,EAAS,EAAE,aAAa,KAAK;AAAA,EAC/B;AAEA,2BACG,OAAA,EAAI,KAAAhB,GAAU,WAAW2B,EAAG,uBAAuB5B,CAAS,GAC3D,UAAA;AAAA,IAAA,gBAAA6B;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAASvB;AAAA,QACT,YAAY,CAAC,MAAM;AACjB,YAAE,eAAA,GACGP,KAAUa,EAAQ,EAAI;AAAA,QAC7B;AAAA,QACA,aAAa,MAAMA,EAAQ,EAAK;AAAA,QAChC,QAAAe;AAAA,QACA,WAAWC;AAAA,UACT;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACA;AAAA,UACAjB,KAAQ;AAAA,UACRZ,KAAY;AAAA,QAAA;AAAA,QAGd,UAAA;AAAA,UAAA,gBAAA+B,EAACC,GAAA,EAAO,WAAU,gCAA+B,eAAW,IAAC;AAAA,UAC7D,gBAAAF,EAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,YAAA,gBAAAC,EAAC,KAAA,EAAE,WAAU,uBAAuB,UAAA5B,EAAQ,WAAW,MAAK;AAAA,YAC3DJ,KAAQ,gBAAAgC,EAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAhC,EAAA,CAAK;AAAA,UAAA,GAC9D;AAAA,UACA,gBAAAgC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK1B;AAAA,cACL,IAAIE;AAAA,cACJ,MAAK;AAAA,cACL,QAAApB;AAAA,cACA,UAAAO;AAAA,cACA,UAAAM;AAAA,cACA,WAAU;AAAA,cACV,UAAU,CAAC,MAAM;AACf,gBAAI,EAAE,OAAO,SAAOkB,EAAS,EAAE,OAAO,KAAK,GAE3C,EAAE,OAAO,QAAQ;AAAA,cACnB;AAAA,YAAA;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IAAA;AAAA,IAGDJ,EAAM,SAAS,KACd,gBAAAiB,EAAC,MAAA,EAAG,WAAU,uBACX,UAAAjB,EAAM,IAAI,CAAC5B,GAAMuC,MAChB,gBAAAK;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAC,EAACE,GAAA,EAAS,WAAU,yCAAwC,eAAW,IAAC;AAAA,UACxE,gBAAAH,EAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,YAAA,gBAAAC,EAAC,OAAE,WAAU,oBAAmB,OAAO7C,EAAK,MACzC,YAAK,KAAA,CACR;AAAA,8BACC,KAAA,EAAE,WAAU,iCAAiC,UAAAH,EAAWG,EAAK,IAAI,EAAA,CAAE;AAAA,UAAA,GACtE;AAAA,UACA,gBAAA6C;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAS,MAAMP,EAAOC,CAAG;AAAA,cACzB,WAAU;AAAA,cACV,cAAYS,EAAa/B,EAAQ,WAAW,QAAQ,EAAE,MAAMjB,EAAK,MAAM;AAAA,cAEvE,UAAA,gBAAA6C,EAACI,GAAA,EAAE,WAAU,UAAS,eAAW,GAAA,CAAC;AAAA,YAAA;AAAA,UAAA;AAAA,QACpC;AAAA,MAAA;AAAA,MAjBK,GAAGjD,EAAK,IAAI,IAAIuC,CAAG;AAAA,IAAA,CAmB3B,EAAA,CACH;AAAA,EAAA,GAEJ;AAEJ,CAAC;AACDjC,EAAW,cAAc;"}
+{"version":3,"file":"FileUpload.js","sources":["../../../src/components/ui/FileUpload.tsx"],"sourcesContent":["'use client';\n\nimport {\n  forwardRef,\n  useCallback,\n  useId,\n  useRef,\n  useState,\n  type DragEvent as ReactDragEvent,\n  type ReactNode,\n} from 'react';\nimport { File as FileIcon, Upload, X } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { useStrings } from '@/hooks/use-strings';\nimport { formatString, type UiStrings } from '@/lib/strings';\n\nexport type FileRejectReason = 'size' | 'type';\n\nexport interface FileUploadProps {\n  /** Accepted file types, e.g. `image/*` or `.pdf,.docx`. */\n  accept?: string;\n  /** Allow multiple files. */\n  multiple?: boolean;\n  /** Max file size in bytes. Files larger than this are rejected. */\n  maxSize?: number;\n  /** Controlled file list. */\n  value?: File[];\n  /** Called when files are added or removed. */\n  onChange?: (files: File[]) => void;\n  /** Called with the files that were dropped because of `maxSize` or `accept`. */\n  onReject?: (files: File[], reason: FileRejectReason) => void;\n  /** Helper text inside the drop zone. */\n  hint?: ReactNode;\n  /** Disable the picker entirely. */\n  disabled?: boolean;\n  className?: string;\n}\n\nfunction formatSize(bytes: number, s: UiStrings['fileUpload']) {\n  if (bytes < 1024) return formatString(s.bytes, { n: bytes });\n  if (bytes < 1024 * 1024) return formatString(s.kilobytes, { n: (bytes / 1024).toFixed(1) });\n  return formatString(s.megabytes, { n: (bytes / 1024 / 1024).toFixed(1) });\n}\n\n/** Mirror the browser's `accept` matching for dropped files (which skip the picker filter). */\nfunction matchesAccept(file: File, accept?: string): boolean {\n  if (!accept) return true;\n  const rules = accept\n    .split(',')\n    .map((r) => r.trim().toLowerCase())\n    .filter(Boolean);\n  if (!rules.length) return true;\n  const name = file.name.toLowerCase();\n  const type = file.type.toLowerCase();\n  return rules.some((rule) => {\n    if (rule.startsWith('.')) return name.endsWith(rule);\n    if (rule.endsWith('/*')) return type.startsWith(rule.slice(0, -1));\n    return type === rule;\n  });\n}\n\n/**\n * Drag-and-drop file picker with an inline file list. Uncontrolled by default;\n * pass `value` + `onChange` to control externally.\n */\nexport const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(function FileUpload(\n  { accept, multiple, maxSize, value, onChange, onReject, hint, disabled, className },\n  ref,\n) {\n  const strings = useStrings();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const inputId = useId();\n  const [internal, setInternal] = useState<File[]>([]);\n  const [over, setOver] = useState(false);\n  // dragenter/dragleave fire for every child element; count nesting depth so\n  // the highlight does not flicker while the pointer crosses the label's children.\n  const dragDepth = useRef(0);\n  const files = value ?? internal;\n\n  const update = useCallback(\n    (next: File[]) => {\n      if (value === undefined) setInternal(next);\n      onChange?.(next);\n    },\n    [onChange, value],\n  );\n\n  const addFiles = useCallback(\n    (incoming: FileList | File[]) => {\n      const accepted: File[] = [];\n      const tooLarge: File[] = [];\n      const wrongType: File[] = [];\n      for (const f of Array.from(incoming)) {\n        if (!matchesAccept(f, accept)) wrongType.push(f);\n        else if (maxSize && f.size > maxSize) tooLarge.push(f);\n        else accepted.push(f);\n      }\n      if (wrongType.length) onReject?.(wrongType, 'type');\n      if (tooLarge.length) onReject?.(tooLarge, 'size');\n      if (!accepted.length) return;\n      update(multiple ? [...files, ...accepted] : accepted.slice(0, 1));\n    },\n    [accept, files, maxSize, multiple, onReject, update],\n  );\n\n  const remove = (idx: number) => update(files.filter((_, i) => i !== idx));\n\n  const onDrop = (e: ReactDragEvent<HTMLLabelElement>) => {\n    e.preventDefault();\n    dragDepth.current = 0;\n    setOver(false);\n    if (disabled) return;\n    addFiles(e.dataTransfer.files);\n  };\n\n  return (\n    <div ref={ref} className={cn('flex flex-col gap-3', className)}>\n      <label\n        htmlFor={inputId}\n        onDragEnter={() => {\n          dragDepth.current += 1;\n          if (!disabled) setOver(true);\n        }}\n        onDragOver={(e) => e.preventDefault()}\n        onDragLeave={() => {\n          dragDepth.current = Math.max(0, dragDepth.current - 1);\n          if (dragDepth.current === 0) setOver(false);\n        }}\n        onDrop={onDrop}\n        className={cn(\n          'group relative flex cursor-pointer flex-col items-center justify-center gap-2',\n          'border-border-input bg-background-subtle rounded-md border border-dashed px-6 py-8',\n          'text-center transition-colors',\n          'hover:border-border-strong hover:bg-background-muted',\n          'focus-within:ring-ring focus-within:ring-offset-background focus-within:ring-2 focus-within:ring-offset-2',\n          over && 'border-accent bg-accent-soft',\n          disabled && 'pointer-events-none opacity-50',\n        )}\n      >\n        <Upload className=\"text-foreground-muted size-5\" aria-hidden />\n        <div className=\"space-y-1\">\n          <p className=\"text-sm font-medium\">{strings.fileUpload.drop}</p>\n          {hint && <p className=\"text-foreground-muted text-xs\">{hint}</p>}\n        </div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          className=\"sr-only\"\n          onChange={(e) => {\n            if (e.target.files) addFiles(e.target.files);\n            // Allow re-selecting the same file after removing it.\n            e.target.value = '';\n          }}\n        />\n      </label>\n\n      {files.length > 0 && (\n        <ul className=\"flex flex-col gap-2\">\n          {files.map((file, idx) => (\n            <li\n              key={`${file.name}-${file.size}-${file.lastModified}-${idx}`}\n              className=\"border-border bg-card flex items-center gap-3 rounded-md border px-3 py-2\"\n            >\n              <FileIcon className=\"text-foreground-muted size-4 shrink-0\" aria-hidden />\n              <div className=\"min-w-0 flex-1\">\n                <p className=\"truncate text-sm\" title={file.name}>\n                  {file.name}\n                </p>\n                <p className=\"text-foreground-muted text-xs\">\n                  {formatSize(file.size, strings.fileUpload)}\n                </p>\n              </div>\n              <button\n                type=\"button\"\n                onClick={() => remove(idx)}\n                className=\"text-foreground-muted hover:bg-background-muted hover:text-foreground focus-visible:ring-ring focus-visible:ring-offset-background rounded-sm p-1 outline-none focus-visible:ring-2 focus-visible:ring-offset-2\"\n                aria-label={formatString(strings.fileUpload.remove, { name: file.name })}\n              >\n                <X className=\"size-4\" aria-hidden />\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n});\nFileUpload.displayName = 'FileUpload';\n"],"names":["formatSize","bytes","s","formatString","matchesAccept","file","accept","rules","name","type","rule","FileUpload","forwardRef","multiple","maxSize","value","onChange","onReject","hint","disabled","className","ref","strings","useStrings","inputRef","useRef","inputId","useId","internal","setInternal","useState","over","setOver","dragDepth","files","update","useCallback","next","addFiles","incoming","accepted","tooLarge","wrongType","f","remove","idx","_","i","onDrop","cn","jsxs","jsx","Upload","FileIcon"],"mappings":"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"}

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

@@ -1,7 +1,15 @@
 import { HTMLAttributes } from 'react';
-import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import { ControllerProps, FieldPath, FieldValues, FormProviderProps } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
-export declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+/**
+ * Form context provider. Spread the `useForm()` return value into it, exactly
+ * like react-hook-form's `FormProvider` — plus one shared live region for
+ * validation announcements.
+ */
+export declare function Form<TFieldValues extends FieldValues = FieldValues, TContext = unknown, TTransformedValues = TFieldValues>({ children, ...form }: FormProviderProps<TFieldValues, TContext, TTransformedValues>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Form {
+    var displayName: string;
+}
 export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
 export declare function useFormField(): {
     invalid: boolean;
@@ -20,4 +28,9 @@ export declare const FormItem: import('react').ForwardRefExoticComponent<HTMLAtt
 export declare const FormLabel: import('react').ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
 export declare const FormControl: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
 export declare const FormDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+/**
+ * Field-level validation message. Not a live region on its own — it is
+ * referenced from the control via `aria-describedby`, and the form's single
+ * live region announces changes.
+ */
 export declare const FormError: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -1,105 +1,131 @@
 "use client";
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as a, useContext as f, useEffect as I, useId as g, useState as b, createContext as F } from "react";
-import * as h from "@radix-ui/react-label";
-import { FormProvider as v, Controller as D, useFormContext as N } from "react-hook-form";
-import { Slot as y } from "@radix-ui/react-slot";
-import { cn as c } from "../../lib/utils.js";
-const k = v, p = F(null);
-function q(n) {
-  return /* @__PURE__ */ m(p.Provider, { value: { name: n.name }, children: /* @__PURE__ */ m(D, { ...n }) });
+import { jsxs as b, jsx as i } from "react/jsx-runtime";
+import { forwardRef as a, useId as D, useContext as f, createContext as u, Children as N, isValidElement as h } from "react";
+import * as C from "@radix-ui/react-label";
+import { FormProvider as j, Controller as S, useFormContext as p } from "react-hook-form";
+import { Slot as E } from "@radix-ui/react-slot";
+import { cn as l } from "../../lib/utils.js";
+function F(o, e = []) {
+  if (!o) return e;
+  for (const r of Object.values(o)) {
+    if (!r || typeof r != "object") continue;
+    const t = r.message;
+    typeof t == "string" && t ? e.push(t) : "type" in r || F(r, e);
+  }
+  return e;
+}
+function L() {
+  const { formState: o } = p(), e = F(o.errors);
+  return /* @__PURE__ */ i("div", { role: "status", "aria-live": "polite", "aria-atomic": "true", className: "sr-only", children: e.join(". ") });
+}
+function M({ children: o, ...e }) {
+  return /* @__PURE__ */ b(j, { ...e, children: [
+    o,
+    /* @__PURE__ */ i(L, {})
+  ] });
+}
+M.displayName = "Form";
+const y = u(null);
+function q(o) {
+  return /* @__PURE__ */ i(y.Provider, { value: { name: o.name }, children: /* @__PURE__ */ i(S, { ...o }) });
 }
-const u = F(null);
+const x = u(null);
 function d() {
-  const n = f(p), o = f(u), { getFieldState: s, formState: e } = N();
-  if (!n)
+  const o = f(y), e = f(x), { getFieldState: r, formState: t } = p();
+  if (!o)
     throw new Error("useFormField must be used inside <FormField>");
-  const i = s(n.name, e), r = (o == null ? void 0 : o.id) ?? "";
+  const s = r(o.name, t), n = (e == null ? void 0 : e.id) ?? "";
   return {
-    id: r,
-    name: n.name,
-    formItemId: `${r}-item`,
-    formDescriptionId: `${r}-desc`,
-    formMessageId: `${r}-error`,
-    hasDescription: (o == null ? void 0 : o.hasDescription) ?? !1,
-    ...i
+    id: n,
+    name: o.name,
+    formItemId: `${n}-item`,
+    formDescriptionId: `${n}-desc`,
+    formMessageId: `${n}-error`,
+    hasDescription: (e == null ? void 0 : e.hasDescription) ?? !1,
+    ...s
   };
 }
-const C = a(
-  function({ className: o, ...s }, e) {
-    const i = g(), [r, t] = b(!1);
-    return /* @__PURE__ */ m(u.Provider, { value: { id: i, hasDescription: r, setHasDescription: t }, children: /* @__PURE__ */ m("div", { ref: e, className: c("flex flex-col gap-1.5", o), ...s }) });
+function g(o) {
+  return N.toArray(o).some((e) => {
+    if (!h(e)) return !1;
+    if (e.type === I) return !0;
+    const r = e.props.children;
+    return (typeof e.type == "string" || typeof e.type == "symbol") && r ? g(r) : !1;
+  });
+}
+const P = a(
+  function({ className: e, children: r, ...t }, s) {
+    const n = D(), m = g(r);
+    return /* @__PURE__ */ i(x.Provider, { value: { id: n, hasDescription: m }, children: /* @__PURE__ */ i("div", { ref: s, className: l("flex flex-col gap-1.5", e), ...t, children: r }) });
   }
 );
-C.displayName = "FormItem";
-const P = a(function({ className: o, ...s }, e) {
-  const { formItemId: i, error: r } = d();
-  return /* @__PURE__ */ m(
-    h.Root,
+P.displayName = "FormItem";
+const w = a(function({ className: e, ...r }, t) {
+  const { formItemId: s, error: n } = d();
+  return /* @__PURE__ */ i(
+    C.Root,
     {
-      ref: e,
-      htmlFor: i,
-      className: c("text-foreground text-sm font-medium", r && "text-danger-text", o),
-      ...s
+      ref: t,
+      htmlFor: s,
+      className: l("text-foreground text-sm font-medium", n && "text-danger-text", e),
+      ...r
     }
   );
 });
-P.displayName = "FormLabel";
-const S = a(
-  function(o, s) {
-    const { error: e, formItemId: i, formDescriptionId: r, formMessageId: t, hasDescription: l } = d(), x = [l ? r : null, e ? t : null].filter(Boolean).join(" ") || void 0;
-    return /* @__PURE__ */ m(
-      y,
+w.displayName = "FormLabel";
+const R = a(
+  function(e, r) {
+    const { error: t, formItemId: s, formDescriptionId: n, formMessageId: m, hasDescription: c } = d(), v = [c ? n : null, t ? m : null].filter(Boolean).join(" ") || void 0;
+    return /* @__PURE__ */ i(
+      E,
       {
-        ref: s,
-        id: i,
-        "aria-describedby": x,
-        "aria-invalid": !!e,
-        ...e ? { tone: "error" } : {},
-        ...o
+        ref: r,
+        id: s,
+        "aria-describedby": v,
+        "aria-invalid": !!t,
+        ...e
       }
     );
   }
 );
-S.displayName = "FormControl";
-const E = a(function({ className: o, ...s }, e) {
-  const { formDescriptionId: i } = d(), r = f(u), t = r == null ? void 0 : r.setHasDescription;
-  return I(() => (t == null || t(!0), () => t == null ? void 0 : t(!1)), [t]), /* @__PURE__ */ m(
+R.displayName = "FormControl";
+const I = a(function({ className: e, ...r }, t) {
+  const { formDescriptionId: s } = d();
+  return /* @__PURE__ */ i(
     "p",
     {
-      ref: e,
-      id: i,
-      className: c("text-foreground-subtle text-xs", o),
-      ...s
+      ref: t,
+      id: s,
+      className: l("text-foreground-subtle text-xs", e),
+      ...r
     }
   );
 });
-E.displayName = "FormDescription";
-const L = a(
-  function({ className: o, children: s, ...e }, i) {
-    const { error: r, formMessageId: t } = d(), l = r ? String((r == null ? void 0 : r.message) ?? "") : s;
-    return l ? /* @__PURE__ */ m(
+I.displayName = "FormDescription";
+const $ = a(
+  function({ className: e, children: r, ...t }, s) {
+    const { error: n, formMessageId: m } = d(), c = n ? String((n == null ? void 0 : n.message) ?? "") : r;
+    return c ? /* @__PURE__ */ i(
       "p",
       {
-        ref: i,
-        id: t,
-        role: "alert",
-        className: c("text-danger-text text-xs", o),
-        ...e,
-        children: l
+        ref: s,
+        id: m,
+        className: l("text-danger-text text-xs", e),
+        ...t,
+        children: c
       }
     ) : null;
   }
 );
-L.displayName = "FormError";
+$.displayName = "FormError";
 export {
-  k as Form,
-  S as FormControl,
-  E as FormDescription,
-  L as FormError,
+  M as Form,
+  R as FormControl,
+  I as FormDescription,
+  $ as FormError,
   q as FormField,
-  C as FormItem,
-  P as FormLabel,
+  P as FormItem,
+  w as FormLabel,
   d as useFormField
 };
 //# sourceMappingURL=Form.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../src/components/ui/Form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  createContext,\n  forwardRef,\n  useContext,\n  useEffect,\n  useId,\n  useState,\n  type HTMLAttributes,\n} from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldPath,\n  type FieldValues,\n} from 'react-hook-form';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  react-hook-form bindings + accessible label / description / error wiring.\n *\n *  Usage:\n *    const form = useForm<Values>(…);\n *    <Form {...form}>\n *      <FormField\n *        control={form.control}\n *        name=\"email\"\n *        render={({ field }) => (\n *          <FormItem>\n *            <FormLabel>Email</FormLabel>\n *            <FormControl><Input type=\"email\" {...field} /></FormControl>\n *            <FormDescription>We never share this.</FormDescription>\n *            <FormError />\n *          </FormItem>\n *        )}\n *      />\n *    </Form>\n * --------------------------------------------------------------------------- */\n\nexport const Form = FormProvider;\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name as string }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\ninterface FormItemContextValue {\n  id: string;\n  /** Whether a <FormDescription> is mounted — drives aria-describedby. */\n  hasDescription: boolean;\n  setHasDescription: (v: boolean) => void;\n}\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  if (!fieldContext) {\n    throw new Error('useFormField must be used inside <FormField>');\n  }\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const id = itemContext?.id ?? '';\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-item`,\n    formDescriptionId: `${id}-desc`,\n    formMessageId: `${id}-error`,\n    hasDescription: itemContext?.hasDescription ?? false,\n    ...fieldState,\n  };\n}\n\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, ...props }, ref) {\n    const id = useId();\n    const [hasDescription, setHasDescription] = useState(false);\n    return (\n      <FormItemContext.Provider value={{ id, hasDescription, setHasDescription }}>\n        <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props} />\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nexport const FormLabel = forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function FormLabel({ className, ...props }, ref) {\n  const { formItemId, error } = useFormField();\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn('text-foreground text-sm font-medium', error && 'text-danger-text', className)}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nexport const FormControl = forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(\n  function FormControl(props, ref) {\n    const { error, formItemId, formDescriptionId, formMessageId, hasDescription } = useFormField();\n    // Only reference ids that actually render: the description when mounted,\n    // the message only while there is an error (FormError returns null otherwise).\n    const describedBy =\n      [hasDescription ? formDescriptionId : null, error ? formMessageId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    // Input-style children read `tone=\"error\"` for the red border; plain\n    // elements ignore the unknown prop via Slot merging only when they accept it,\n    // so it is only set while there is an error.\n    const toneProps = error ? { tone: 'error' as const } : {};\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={describedBy}\n        aria-invalid={!!error}\n        {...toneProps}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\n  const itemContext = useContext(FormItemContext);\n  const setHasDescription = itemContext?.setHasDescription;\n  useEffect(() => {\n    setHasDescription?.(true);\n    return () => setHasDescription?.(false);\n  }, [setHasDescription]);\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-foreground-subtle text-xs', className)}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\nexport const FormError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormError({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        role=\"alert\"\n        className={cn('text-danger-text text-xs', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormError.displayName = 'FormError';\n"],"names":["Form","FormProvider","FormFieldContext","createContext","FormField","props","jsx","Controller","FormItemContext","useFormField","fieldContext","useContext","itemContext","getFieldState","formState","useFormContext","fieldState","id","FormItem","forwardRef","className","ref","useId","hasDescription","setHasDescription","useState","cn","FormLabel","formItemId","error","LabelPrimitive","FormControl","formDescriptionId","formMessageId","describedBy","Slot","FormDescription","useEffect","FormError","children","body"],"mappings":"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"}
+{"version":3,"file":"Form.js","sources":["../../../src/components/ui/Form.tsx"],"sourcesContent":["'use client';\n\nimport {\n  Children,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useContext,\n  useId,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\nimport * as LabelPrimitive from '@radix-ui/react-label';\nimport {\n  Controller,\n  FormProvider,\n  useFormContext,\n  type ControllerProps,\n  type FieldErrors,\n  type FieldPath,\n  type FieldValues,\n  type FormProviderProps,\n} from 'react-hook-form';\nimport { Slot } from '@radix-ui/react-slot';\nimport { cn } from '@/lib/utils';\n\n/* -----------------------------------------------------------------------------\n *  react-hook-form bindings + accessible label / description / error wiring.\n *\n *  Usage:\n *    const form = useForm<Values>(…);\n *    <Form {...form}>\n *      <FormField\n *        control={form.control}\n *        name=\"email\"\n *        render={({ field }) => (\n *          <FormItem>\n *            <FormLabel>Email</FormLabel>\n *            <FormControl><Input type=\"email\" {...field} /></FormControl>\n *            <FormDescription>We never share this.</FormDescription>\n *            <FormError />\n *          </FormItem>\n *        )}\n *      />\n *    </Form>\n *\n *  Ids: `<item>-item` (control), `<item>-desc`, `<item>-error` — the same\n *  `-desc` / `-error` suffixes the standalone fields use (useFieldIds).\n *  Invalid styling is driven purely by `aria-invalid` on the control; no\n *  `aria-invalid` is set on the control; style from `aria-invalid:` (no `tone` injection).\n * --------------------------------------------------------------------------- */\n\nfunction collectMessages(errors: FieldErrors | undefined, out: string[] = []): string[] {\n  if (!errors) return out;\n  for (const value of Object.values(errors)) {\n    if (!value || typeof value !== 'object') continue;\n    const message = (value as { message?: unknown }).message;\n    if (typeof message === 'string' && message) out.push(message);\n    else if (!('type' in value)) collectMessages(value as FieldErrors, out);\n  }\n  return out;\n}\n\n/**\n * Single polite live region per form. Field-level `FormError` elements are\n * plain text wired via `aria-describedby`; this region announces the current\n * error set once instead of one `role=\"alert\"` per field firing in parallel.\n */\nfunction FormLiveRegion() {\n  const { formState } = useFormContext();\n  const messages = collectMessages(formState.errors);\n  return (\n    <div role=\"status\" aria-live=\"polite\" aria-atomic=\"true\" className=\"sr-only\">\n      {messages.join('. ')}\n    </div>\n  );\n}\n\n/**\n * Form context provider. Spread the `useForm()` return value into it, exactly\n * like react-hook-form's `FormProvider` — plus one shared live region for\n * validation announcements.\n */\nexport function Form<\n  TFieldValues extends FieldValues = FieldValues,\n  TContext = unknown,\n  TTransformedValues = TFieldValues,\n>({ children, ...form }: FormProviderProps<TFieldValues, TContext, TTransformedValues>) {\n  return (\n    <FormProvider {...form}>\n      {children}\n      <FormLiveRegion />\n    </FormProvider>\n  );\n}\nForm.displayName = 'Form';\n\ninterface FormFieldContextValue<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> {\n  name: TName;\n}\n\nconst FormFieldContext = createContext<FormFieldContextValue | null>(null);\n\nexport function FormField<\n  TFieldValues extends FieldValues = FieldValues,\n  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>(props: ControllerProps<TFieldValues, TName>) {\n  return (\n    <FormFieldContext.Provider value={{ name: props.name as string }}>\n      <Controller {...props} />\n    </FormFieldContext.Provider>\n  );\n}\n\ninterface FormItemContextValue {\n  id: string;\n  /** Whether a <FormDescription> is rendered — drives aria-describedby. */\n  hasDescription: boolean;\n}\nconst FormItemContext = createContext<FormItemContextValue | null>(null);\n\nexport function useFormField() {\n  const fieldContext = useContext(FormFieldContext);\n  const itemContext = useContext(FormItemContext);\n  const { getFieldState, formState } = useFormContext();\n  if (!fieldContext) {\n    throw new Error('useFormField must be used inside <FormField>');\n  }\n  const fieldState = getFieldState(fieldContext.name, formState);\n  const id = itemContext?.id ?? '';\n  return {\n    id,\n    name: fieldContext.name,\n    formItemId: `${id}-item`,\n    formDescriptionId: `${id}-desc`,\n    formMessageId: `${id}-error`,\n    hasDescription: itemContext?.hasDescription ?? false,\n    ...fieldState,\n  };\n}\n\n/** Synchronous scan for a <FormDescription> among the item's children (through fragments / host elements). */\nfunction containsDescription(children: ReactNode): boolean {\n  return Children.toArray(children).some((child) => {\n    if (!isValidElement(child)) return false;\n    if (child.type === FormDescription) return true;\n    const nested = (child.props as { children?: ReactNode }).children;\n    // Only descend into host elements / fragments — custom components own their subtree.\n    return (typeof child.type === 'string' || typeof child.type === 'symbol') && nested\n      ? containsDescription(nested)\n      : false;\n  });\n}\n\nexport const FormItem = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(\n  function FormItem({ className, children, ...props }, ref) {\n    const id = useId();\n    // Derived during render (no effect → no second pass / hydration flip).\n    const hasDescription = containsDescription(children);\n    return (\n      <FormItemContext.Provider value={{ id, hasDescription }}>\n        <div ref={ref} className={cn('flex flex-col gap-1.5', className)} {...props}>\n          {children}\n        </div>\n      </FormItemContext.Provider>\n    );\n  },\n);\nFormItem.displayName = 'FormItem';\n\nexport const FormLabel = forwardRef<\n  React.ElementRef<typeof LabelPrimitive.Root>,\n  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>\n>(function FormLabel({ className, ...props }, ref) {\n  const { formItemId, error } = useFormField();\n  return (\n    <LabelPrimitive.Root\n      ref={ref}\n      htmlFor={formItemId}\n      className={cn('text-foreground text-sm font-medium', error && 'text-danger-text', className)}\n      {...props}\n    />\n  );\n});\nFormLabel.displayName = 'FormLabel';\n\nexport const FormControl = forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(\n  function FormControl(props, ref) {\n    const { error, formItemId, formDescriptionId, formMessageId, hasDescription } = useFormField();\n    // Only reference ids that actually render: the description when mounted,\n    // the message only while there is an error (FormError returns null otherwise).\n    const describedBy =\n      [hasDescription ? formDescriptionId : null, error ? formMessageId : null]\n        .filter(Boolean)\n        .join(' ') || undefined;\n    return (\n      <Slot\n        ref={ref}\n        id={formItemId}\n        aria-describedby={describedBy}\n        aria-invalid={!!error}\n        {...props}\n      />\n    );\n  },\n);\nFormControl.displayName = 'FormControl';\n\nexport const FormDescription = forwardRef<\n  HTMLParagraphElement,\n  HTMLAttributes<HTMLParagraphElement>\n>(function FormDescription({ className, ...props }, ref) {\n  const { formDescriptionId } = useFormField();\n  return (\n    <p\n      ref={ref}\n      id={formDescriptionId}\n      className={cn('text-foreground-subtle text-xs', className)}\n      {...props}\n    />\n  );\n});\nFormDescription.displayName = 'FormDescription';\n\n/**\n * Field-level validation message. Not a live region on its own — it is\n * referenced from the control via `aria-describedby`, and the form's single\n * live region announces changes.\n */\nexport const FormError = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(\n  function FormError({ className, children, ...props }, ref) {\n    const { error, formMessageId } = useFormField();\n    const body = error ? String(error?.message ?? '') : children;\n    if (!body) return null;\n    return (\n      <p\n        ref={ref}\n        id={formMessageId}\n        className={cn('text-danger-text text-xs', className)}\n        {...props}\n      >\n        {body}\n      </p>\n    );\n  },\n);\nFormError.displayName = 'FormError';\n"],"names":["collectMessages","errors","out","value","message","FormLiveRegion","formState","useFormContext","messages","jsx","Form","children","form","jsxs","FormProvider","FormFieldContext","createContext","FormField","props","Controller","FormItemContext","useFormField","fieldContext","useContext","itemContext","getFieldState","fieldState","id","containsDescription","Children","child","isValidElement","FormDescription","nested","FormItem","forwardRef","className","ref","useId","hasDescription","cn","FormLabel","formItemId","error","LabelPrimitive","FormControl","formDescriptionId","formMessageId","describedBy","Slot","FormError","body"],"mappings":"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"}

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

@@ -31,4 +31,4 @@ export interface IconProps extends Omit<LucideProps, 'ref'> {
  * @dont Reach for this in hot lists with hundreds of distinct icons on first
  *       paint — statically imported icons from `Icons` skip the lazy hop.
  */
-export declare function Icon({ name, fallback, ...props }: IconProps): import("react/jsx-runtime").JSX.Element;
+export declare function Icon({ name, fallback, ...props }: IconProps): import("react/jsx-runtime").JSX.Element | null;

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

@@ -1,26 +1,32 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
-import { useMemo as a, Suspense as l, lazy as d } from "react";
-import i from "lucide-react/dynamicIconImports";
-const p = Object.keys(i), o = /* @__PURE__ */ new Map();
-function u(e) {
-  const t = o.get(e);
+import { jsx as o } from "react/jsx-runtime";
+import { useMemo as l, Suspense as u, lazy as d } from "react";
+import s from "lucide-react/dynamicIconImports";
+const y = Object.keys(s), i = /* @__PURE__ */ new Map(), r = /* @__PURE__ */ new Set();
+function f(e) {
+  const t = i.get(e);
   if (t) return t;
-  const c = d(i[e]);
-  return o.set(e, c), c;
+  const n = s[e];
+  if (typeof n != "function")
+    return process.env.NODE_ENV !== "production" && !r.has(e) && (r.add(e), console.warn(
+      `[@craftzbay/ui] <Icon name="${e}"> is not a lucide icon; rendering nothing.`
+    )), null;
+  const c = d(n);
+  return i.set(e, c), c;
 }
-function y({ name: e, fallback: t, ...c }) {
-  const s = a(() => u(e), [e]), r = t ?? /* @__PURE__ */ n(
+function I({ name: e, fallback: t, ...n }) {
+  const c = l(() => f(e), [e]), a = t ?? /* @__PURE__ */ o(
     "span",
     {
       "aria-hidden": !0,
-      style: { display: "inline-block", width: c.size ?? "1em", height: c.size ?? "1em" }
+      className: n.className,
+      style: { display: "inline-block", width: n.size ?? "1em", height: n.size ?? "1em" }
     }
   );
-  return /* @__PURE__ */ n(l, { fallback: r, children: /* @__PURE__ */ n(s, { ...c }) });
+  return c ? /* @__PURE__ */ o(u, { fallback: a, children: /* @__PURE__ */ o(c, { ...n }) }) : null;
 }
 export {
-  y as Icon,
-  p as iconNames
+  I as Icon,
+  y as iconNames
 };
 //# sourceMappingURL=Icon.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../src/components/ui/Icon.tsx"],"sourcesContent":["'use client';\n\nimport {\n  lazy,\n  Suspense,\n  useMemo,\n  type LazyExoticComponent,\n  type ReactNode,\n} from 'react';\nimport dynamicIconImports from 'lucide-react/dynamicIconImports';\nimport type { LucideIcon, LucideProps } from 'lucide-react';\n\n/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */\nexport type IconName = keyof typeof dynamicIconImports;\n\n/** All available icon names (useful for pickers and docs). */\nexport const iconNames = Object.keys(dynamicIconImports) as IconName[];\n\n// lazy() must return a stable component per name or React remounts (and\n// re-suspends) on every render.\nconst cache = new Map<IconName, LazyExoticComponent<LucideIcon>>();\n\nfunction getIcon(name: IconName): LazyExoticComponent<LucideIcon> {\n  const cached = cache.get(name);\n  if (cached) return cached;\n  const created = lazy(dynamicIconImports[name]);\n  cache.set(name, created);\n  return created;\n}\n\nexport interface IconProps extends Omit<LucideProps, 'ref'> {\n  /** Lucide icon name in kebab-case, e.g. `name=\"calendar\"`. Autocompletes. */\n  name: IconName;\n  /**\n   * Shown while the icon chunk loads (first use only — icons are cached).\n   * Defaults to an invisible square so layout doesn't shift.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * Name-addressed lucide icon. Use when the icon is dynamic (data-driven\n * nav items, user-configurable dashboards) or when importing components for\n * every icon is friction.\n *\n * Each icon is code-split and loaded on first use, so referencing the full\n * lucide set costs nothing up front — `<Icon name=\"rocket\" />` ships only\n * the rocket.\n *\n * @example\n *   <Icon name=\"calendar\" className=\"size-4\" />\n *   <Icon name=\"chevrons-up-down\" size={16} strokeWidth={1.5} />\n *\n * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.\n * @dont Reach for this in hot lists with hundreds of distinct icons on first\n *       paint — statically imported icons from `Icons` skip the lazy hop.\n */\nexport function Icon({ name, fallback, ...props }: IconProps) {\n  const LucideIcon = useMemo(() => getIcon(name), [name]);\n\n  const placeholder = fallback ?? (\n    <span\n      aria-hidden\n      style={{ display: 'inline-block', width: props.size ?? '1em', height: props.size ?? '1em' }}\n    />\n  );\n\n  return (\n    <Suspense fallback={placeholder}>\n      <LucideIcon {...props} />\n    </Suspense>\n  );\n}\n"],"names":["iconNames","dynamicIconImports","cache","getIcon","name","cached","created","lazy","Icon","fallback","props","LucideIcon","useMemo","placeholder","jsx","Suspense"],"mappings":";;;;AAgBO,MAAMA,IAAY,OAAO,KAAKC,CAAkB,GAIjDC,wBAAY,IAAA;AAElB,SAASC,EAAQC,GAAiD;AAChE,QAAMC,IAASH,EAAM,IAAIE,CAAI;AAC7B,MAAIC,EAAQ,QAAOA;AACnB,QAAMC,IAAUC,EAAKN,EAAmBG,CAAI,CAAC;AAC7C,SAAAF,EAAM,IAAIE,GAAME,CAAO,GAChBA;AACT;AA6BO,SAASE,EAAK,EAAE,MAAAJ,GAAM,UAAAK,GAAU,GAAGC,KAAoB;AAC5D,QAAMC,IAAaC,EAAQ,MAAMT,EAAQC,CAAI,GAAG,CAACA,CAAI,CAAC,GAEhDS,IAAcJ,KAClB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,OAAO,EAAE,SAAS,gBAAgB,OAAOJ,EAAM,QAAQ,OAAO,QAAQA,EAAM,QAAQ,MAAA;AAAA,IAAM;AAAA,EAAA;AAI9F,SACE,gBAAAI,EAACC,KAAS,UAAUF,GAClB,4BAACF,GAAA,EAAY,GAAGD,GAAO,EAAA,CACzB;AAEJ;"}
+{"version":3,"file":"Icon.js","sources":["../../../src/components/ui/Icon.tsx"],"sourcesContent":["'use client';\n\nimport { lazy, Suspense, useMemo, type LazyExoticComponent, type ReactNode } from 'react';\nimport dynamicIconImports from 'lucide-react/dynamicIconImports';\nimport type { LucideIcon, LucideProps } from 'lucide-react';\n\n/** Every lucide icon name, kebab-case — e.g. `calendar`, `chevrons-up-down`. */\nexport type IconName = keyof typeof dynamicIconImports;\n\n/** All available icon names (useful for pickers and docs). */\nexport const iconNames = Object.keys(dynamicIconImports) as IconName[];\n\n// lazy() must return a stable component per name or React remounts (and\n// re-suspends) on every render.\nconst cache = new Map<IconName, LazyExoticComponent<LucideIcon>>();\nconst warned = new Set<string>();\n\nfunction getIcon(name: IconName): LazyExoticComponent<LucideIcon> | null {\n  const cached = cache.get(name);\n  if (cached) return cached;\n  const loader = dynamicIconImports[name];\n  if (typeof loader !== 'function') {\n    // Unknown name (data-driven input) → render nothing, warn once in dev.\n    if (process.env.NODE_ENV !== 'production' && !warned.has(name)) {\n      warned.add(name);\n      console.warn(\n        `[@craftzbay/ui] <Icon name=\"${name}\"> is not a lucide icon; rendering nothing.`,\n      );\n    }\n    return null;\n  }\n  const created = lazy(loader);\n  cache.set(name, created);\n  return created;\n}\n\nexport interface IconProps extends Omit<LucideProps, 'ref'> {\n  /** Lucide icon name in kebab-case, e.g. `name=\"calendar\"`. Autocompletes. */\n  name: IconName;\n  /**\n   * Shown while the icon chunk loads (first use only — icons are cached).\n   * Defaults to an invisible square so layout doesn't shift.\n   */\n  fallback?: ReactNode;\n}\n\n/**\n * Name-addressed lucide icon. Use when the icon is dynamic (data-driven\n * nav items, user-configurable dashboards) or when importing components for\n * every icon is friction.\n *\n * Each icon is code-split and loaded on first use, so referencing the full\n * lucide set costs nothing up front — `<Icon name=\"rocket\" />` ships only\n * the rocket.\n *\n * @example\n *   <Icon name=\"calendar\" className=\"size-4\" />\n *   <Icon name=\"chevrons-up-down\" size={16} strokeWidth={1.5} />\n *\n * @do Use `size-4` (16px) inline with text, `size-5` (20px) inside buttons.\n * @dont Reach for this in hot lists with hundreds of distinct icons on first\n *       paint — statically imported icons from `Icons` skip the lazy hop.\n */\nexport function Icon({ name, fallback, ...props }: IconProps) {\n  const LucideIcon = useMemo(() => getIcon(name), [name]);\n\n  const placeholder = fallback ?? (\n    <span\n      aria-hidden\n      className={props.className}\n      style={{ display: 'inline-block', width: props.size ?? '1em', height: props.size ?? '1em' }}\n    />\n  );\n\n  if (!LucideIcon) return null;\n\n  return (\n    <Suspense fallback={placeholder}>\n      <LucideIcon {...props} />\n    </Suspense>\n  );\n}\n"],"names":["iconNames","dynamicIconImports","cache","warned","getIcon","name","cached","loader","created","lazy","Icon","fallback","props","LucideIcon","useMemo","placeholder","jsx","Suspense"],"mappings":";;;;AAUO,MAAMA,IAAY,OAAO,KAAKC,CAAkB,GAIjDC,wBAAY,IAAA,GACZC,wBAAa,IAAA;AAEnB,SAASC,EAAQC,GAAwD;AACvE,QAAMC,IAASJ,EAAM,IAAIG,CAAI;AAC7B,MAAIC,EAAQ,QAAOA;AACnB,QAAMC,IAASN,EAAmBI,CAAI;AACtC,MAAI,OAAOE,KAAW;AAEpB,WAAI,QAAQ,IAAI,aAAa,gBAAgB,CAACJ,EAAO,IAAIE,CAAI,MAC3DF,EAAO,IAAIE,CAAI,GACf,QAAQ;AAAA,MACN,+BAA+BA,CAAI;AAAA,IAAA,IAGhC;AAET,QAAMG,IAAUC,EAAKF,CAAM;AAC3B,SAAAL,EAAM,IAAIG,GAAMG,CAAO,GAChBA;AACT;AA6BO,SAASE,EAAK,EAAE,MAAAL,GAAM,UAAAM,GAAU,GAAGC,KAAoB;AAC5D,QAAMC,IAAaC,EAAQ,MAAMV,EAAQC,CAAI,GAAG,CAACA,CAAI,CAAC,GAEhDU,IAAcJ,KAClB,gBAAAK;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,eAAW;AAAA,MACX,WAAWJ,EAAM;AAAA,MACjB,OAAO,EAAE,SAAS,gBAAgB,OAAOA,EAAM,QAAQ,OAAO,QAAQA,EAAM,QAAQ,MAAA;AAAA,IAAM;AAAA,EAAA;AAI9F,SAAKC,IAGH,gBAAAG,EAACC,KAAS,UAAUF,GAClB,4BAACF,GAAA,EAAY,GAAGD,GAAO,EAAA,CACzB,IALsB;AAO1B;"}

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

@@ -2,7 +2,7 @@ import { ButtonHTMLAttributes, ReactNode } from 'react';
 import { VariantProps } from '../../lib/cva.js';
 declare const iconButton: (props?: ({
     variant?: "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
-    size?: "md" | "sm" | "lg" | null | undefined;
+    size?: "md" | "sm" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {
     /**
@@ -12,7 +12,7 @@ export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>
     'aria-label': string;
     /** The Lucide icon to render. */
     icon: ReactNode;
-    /** Show a spinner instead of the icon. */
+    /** Show a spinner instead of the icon; blocks interaction but keeps focus (`aria-disabled`). */
     loading?: boolean;
 }
 /**

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

@@ -1,10 +1,10 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
 import { Loader2 as b } from "../../icons/index.js";
-import { cn as g } from "../../lib/utils.js";
-import { cva as v } from "class-variance-authority";
-const f = v(
+import { cn as f } from "../../lib/utils.js";
+import { cva as m } from "class-variance-authority";
+const l = m(
   [
     "inline-flex items-center justify-center shrink-0",
     "rounded-md",
@@ -13,21 +13,24 @@ const f = v(
     "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
     "focus-visible:ring-offset-background",
     "disabled:pointer-events-none disabled:opacity-50",
+    "aria-busy:pointer-events-none",
     "[&_svg]:pointer-events-none"
   ],
   {
     variants: {
       variant: {
         primary: "bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active",
-        secondary: "bg-background-muted text-foreground border border-border hover:bg-surface-hover active:bg-surface-active",
-        outline: "border border-border bg-transparent text-foreground hover:bg-background-muted",
+        secondary: "bg-background-muted text-foreground border border-border-input hover:bg-surface-hover active:bg-surface-active",
+        outline: "border border-border-input bg-transparent text-foreground hover:bg-background-muted",
         ghost: "bg-transparent text-foreground-muted hover:bg-background-muted hover:text-foreground",
         destructive: "bg-danger text-on-danger hover:bg-danger-hover active:bg-danger-active"
       },
       size: {
-        sm: "h-7 w-7 [&_svg]:size-3.5",
-        md: "h-8 w-8 [&_svg]:size-4",
-        lg: "h-10 w-10 [&_svg]:size-5"
+        // Matches Button heights: sm 32 / md 36 / lg 40 / xl 44 (touch / marketing).
+        sm: "h-8 w-8 [&_svg]:size-4",
+        md: "h-9 w-9 [&_svg]:size-4",
+        lg: "h-10 w-10 [&_svg]:size-5",
+        xl: "h-11 w-11 [&_svg]:size-5"
       }
     },
     defaultVariants: {
@@ -35,22 +38,27 @@ const f = v(
       size: "md"
     }
   }
-), m = u(function({ className: t, variant: o, size: n, icon: i, loading: e, disabled: a, type: s = "button", ...d }, c) {
-  return /* @__PURE__ */ r(
+), p = g(function({ className: o, variant: n, size: i, icon: a, loading: e, disabled: s, type: c = "button", onClick: d, ...u }, v) {
+  return /* @__PURE__ */ t(
     "button",
     {
-      ref: c,
-      type: s,
+      ref: v,
+      type: c,
       "aria-busy": e || void 0,
-      disabled: a || e,
-      className: g(f({ variant: o, size: n }), t),
-      ...d,
-      children: e ? /* @__PURE__ */ r(b, { className: "animate-spin", "aria-hidden": "true" }) : i
+      "aria-disabled": e || void 0,
+      disabled: s,
+      className: f(l({ variant: n, size: i }), o),
+      onClick: e ? h : d,
+      ...u,
+      children: e ? /* @__PURE__ */ t(b, { className: "animate-spin", "aria-hidden": "true" }) : a
     }
   );
 });
-m.displayName = "IconButton";
+p.displayName = "IconButton";
+function h(r) {
+  r.preventDefault(), r.stopPropagation();
+}
 export {
-  m as IconButton
+  p as IconButton
 };
 //# sourceMappingURL=IconButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../src/components/ui/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from 'react';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst iconButton = cva(\n  [\n    'inline-flex items-center justify-center shrink-0',\n    'rounded-md',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    '[&_svg]:pointer-events-none',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: 'bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active',\n        secondary:\n          'bg-background-muted text-foreground border border-border hover:bg-surface-hover active:bg-surface-active',\n        outline:\n          'border border-border bg-transparent text-foreground hover:bg-background-muted',\n        ghost: 'bg-transparent text-foreground-muted hover:bg-background-muted hover:text-foreground',\n        destructive: 'bg-danger text-on-danger hover:bg-danger-hover active:bg-danger-active',\n      },\n      size: {\n        sm: 'h-7 w-7 [&_svg]:size-3.5',\n        md: 'h-8 w-8 [&_svg]:size-4',\n        lg: 'h-10 w-10 [&_svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'ghost',\n      size: 'md',\n    },\n  },\n);\n\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>,\n    VariantProps<typeof iconButton> {\n  /**\n   * Accessible label for screen readers. **Required** — an icon-only button\n   * with no label is invisible to assistive tech.\n   */\n  'aria-label': string;\n  /** The Lucide icon to render. */\n  icon: ReactNode;\n  /** Show a spinner instead of the icon. */\n  loading?: boolean;\n}\n\n/**\n * Square, icon-only button. Default variant is `ghost` because most\n * IconButtons sit in dense toolbars or tables. Always pass `aria-label`.\n *\n * @example Toolbar action\n *   <IconButton aria-label=\"Edit row\" icon={<Edit2 />} onClick={onEdit} />\n *\n * @example Dismissible chip\n *   <IconButton aria-label=\"Remove tag\" size=\"sm\" icon={<X />} />\n *\n * @do Use `ghost` for in-row actions; `outline` when next to a label-less\n *      primary button you want users to consider as an alternative.\n * @dont Use IconButton when the action's meaning isn't universally\n *       recognised. If users need to learn the icon, ship a Button with text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { className, variant, size, icon, loading, disabled, type = 'button', ...props },\n  ref,\n) {\n  const isDisabled = disabled || loading;\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      disabled={isDisabled}\n      className={cn(iconButton({ variant, size }), className)}\n      {...props}\n    >\n      {loading ? <Loader2 className=\"animate-spin\" aria-hidden=\"true\" /> : icon}\n    </button>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n"],"names":["iconButton","cva","IconButton","forwardRef","className","variant","size","icon","loading","disabled","type","props","ref","jsx","cn","Loader2"],"mappings":";;;;;;AAOA,MAAMA,IAAaC;AAAA,EACjB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WACE;AAAA,QACF,SACE;AAAA,QACF,OAAO;AAAA,QACP,aAAa;AAAA,MAAA;AAAA,MAEf,MAAM;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GA+BaC,IAAaC,EAA+C,SACvE,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,UAAU,GAAGC,EAAA,GACzEC,GACA;AAEA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAF;AAAA,MACA,aAAWF,KAAW;AAAA,MACtB,UANeC,KAAYD;AAAA,MAO3B,WAAWM,EAAGd,EAAW,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,MACrD,GAAGO;AAAA,MAEH,cAAU,gBAAAE,EAACE,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAAKR;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC;AAEDL,EAAW,cAAc;"}
+{"version":3,"file":"IconButton.js","sources":["../../../src/components/ui/IconButton.tsx"],"sourcesContent":["'use client';\n\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';\nimport { Loader2 } from '@/icons';\nimport { cn } from '@/lib/utils';\nimport { cva, type VariantProps } from '@/lib/cva';\n\nconst iconButton = cva(\n  [\n    'inline-flex items-center justify-center shrink-0',\n    'rounded-md',\n    'transition-colors duration-[var(--duration-fast)] ease-[var(--ease-out)]',\n    'outline-none',\n    'focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',\n    'focus-visible:ring-offset-background',\n    'disabled:pointer-events-none disabled:opacity-50',\n    'aria-busy:pointer-events-none',\n    '[&_svg]:pointer-events-none',\n  ],\n  {\n    variants: {\n      variant: {\n        primary: 'bg-accent text-on-accent hover:bg-accent-hover active:bg-accent-active',\n        secondary:\n          'bg-background-muted text-foreground border border-border-input hover:bg-surface-hover active:bg-surface-active',\n        outline:\n          'border border-border-input bg-transparent text-foreground hover:bg-background-muted',\n        ghost:\n          'bg-transparent text-foreground-muted hover:bg-background-muted hover:text-foreground',\n        destructive: 'bg-danger text-on-danger hover:bg-danger-hover active:bg-danger-active',\n      },\n      size: {\n        // Matches Button heights: sm 32 / md 36 / lg 40 / xl 44 (touch / marketing).\n        sm: 'h-8 w-8 [&_svg]:size-4',\n        md: 'h-9 w-9 [&_svg]:size-4',\n        lg: 'h-10 w-10 [&_svg]:size-5',\n        xl: 'h-11 w-11 [&_svg]:size-5',\n      },\n    },\n    defaultVariants: {\n      variant: 'ghost',\n      size: 'md',\n    },\n  },\n);\n\nexport interface IconButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {\n  /**\n   * Accessible label for screen readers. **Required** — an icon-only button\n   * with no label is invisible to assistive tech.\n   */\n  'aria-label': string;\n  /** The Lucide icon to render. */\n  icon: ReactNode;\n  /** Show a spinner instead of the icon; blocks interaction but keeps focus (`aria-disabled`). */\n  loading?: boolean;\n}\n\n/**\n * Square, icon-only button. Default variant is `ghost` because most\n * IconButtons sit in dense toolbars or tables. Always pass `aria-label`.\n *\n * @example Toolbar action\n *   <IconButton aria-label=\"Edit row\" icon={<Edit2 />} onClick={onEdit} />\n *\n * @example Dismissible chip\n *   <IconButton aria-label=\"Remove tag\" size=\"sm\" icon={<X />} />\n *\n * @do Use `ghost` for in-row actions; `outline` when next to a label-less\n *      primary button you want users to consider as an alternative.\n * @dont Use IconButton when the action's meaning isn't universally\n *       recognised. If users need to learn the icon, ship a Button with text.\n */\nexport const IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(function IconButton(\n  { className, variant, size, icon, loading, disabled, type = 'button', onClick, ...props },\n  ref,\n) {\n  return (\n    <button\n      ref={ref}\n      type={type}\n      aria-busy={loading || undefined}\n      aria-disabled={loading || undefined}\n      disabled={disabled}\n      className={cn(iconButton({ variant, size }), className)}\n      onClick={loading ? blockEvent : onClick}\n      {...props}\n    >\n      {loading ? <Loader2 className=\"animate-spin\" aria-hidden=\"true\" /> : icon}\n    </button>\n  );\n});\n\nIconButton.displayName = 'IconButton';\n\nfunction blockEvent(e: SyntheticEvent) {\n  e.preventDefault();\n  e.stopPropagation();\n}\n"],"names":["iconButton","cva","IconButton","forwardRef","className","variant","size","icon","loading","disabled","type","onClick","props","ref","jsx","cn","blockEvent","Loader2","e"],"mappings":";;;;;;AAOA,MAAMA,IAAaC;AAAA,EACjB;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAAA,EAEF;AAAA,IACE,UAAU;AAAA,MACR,SAAS;AAAA,QACP,SAAS;AAAA,QACT,WACE;AAAA,QACF,SACE;AAAA,QACF,OACE;AAAA,QACF,aAAa;AAAA,MAAA;AAAA,MAEf,MAAM;AAAA;AAAA,QAEJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,MAAA;AAAA,IACN;AAAA,IAEF,iBAAiB;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,IAAA;AAAA,EACR;AAEJ,GA8BaC,IAAaC,EAA+C,SACvE,EAAE,WAAAC,GAAW,SAAAC,GAAS,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,UAAAC,GAAU,MAAAC,IAAO,UAAU,SAAAC,GAAS,GAAGC,EAAA,GAClFC,GACA;AACA,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,MAAAH;AAAA,MACA,aAAWF,KAAW;AAAA,MACtB,iBAAeA,KAAW;AAAA,MAC1B,UAAAC;AAAA,MACA,WAAWM,EAAGf,EAAW,EAAE,SAAAK,GAAS,MAAAC,EAAA,CAAM,GAAGF,CAAS;AAAA,MACtD,SAASI,IAAUQ,IAAaL;AAAA,MAC/B,GAAGC;AAAA,MAEH,cAAU,gBAAAE,EAACG,GAAA,EAAQ,WAAU,gBAAe,eAAY,QAAO,IAAKV;AAAA,IAAA;AAAA,EAAA;AAG3E,CAAC;AAEDL,EAAW,cAAc;AAEzB,SAASc,EAAWE,GAAmB;AACrC,EAAAA,EAAE,eAAA,GACFA,EAAE,gBAAA;AACJ;"}

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

@@ -5,7 +5,9 @@ declare const field: (props?: ({
     tone?: "default" | "error" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 type InputType = NonNullable<InputHTMLAttributes<HTMLInputElement>['type']>;
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, VariantProps<typeof field> {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'value'>, VariantProps<typeof field> {
+    /** Controlled value. `null` is treated as an empty controlled value (no React warning). */
+    value?: InputHTMLAttributes<HTMLInputElement>['value'] | null;
     /** Field type. `password` enables a show/hide toggle; `search` adds a clear button. */
     type?: InputType;
     /** Visible label rendered above the input. */