@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/ui/file-upload.js

@@ -1,12 +1,12 @@
 "use client";
-import { a as e, c as t } from "../_chunks/framer.js";
-import { durations as n, springs as r, tweens as i } from "./lib/motion.js";
-import { cn as a } from "./lib/utils.js";
-import { Spinner as o } from "./spinner.js";
-import { Icon as s } from "./icon.js";
-import * as c from "react";
-import { jsx as l, jsxs as u } from "react/jsx-runtime";
-import { IconCheck as d, IconPaperclip as f, IconUpload as p } from "@tabler/icons-react";
+import { durations as e, springs as t, tweens as n } from "./lib/motion.js";
+import { cn as r } from "./lib/utils.js";
+import { Spinner as i } from "./spinner.js";
+import { Icon as a } from "./icon.js";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { IconCheck as l, IconPaperclip as u, IconUpload as d } from "@tabler/icons-react";
+import { AnimatePresence as f, motion as p } from "framer-motion";
 //#region src/ui/file-upload.tsx
 var m = 10 * 1024 * 1024;
 function h(e, t) {
@@ -15,10 +15,10 @@ function h(e, t) {
 function g(e) {
 	return e < 1024 ? `${e} B` : e < 1024 * 1024 ? `${(e / 1024).toFixed(1)} KB` : `${(e / (1024 * 1024)).toFixed(1)} MB`;
 }
-var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading: b = !1, progress: x = 0, onFiles: S, error: C, compact: w = !1, disabled: T = !1, className: E, label: D, sublabel: O, ...k }, A) => {
-	let j = c.useRef(null), [M, N] = c.useState(!1), [P, F] = c.useState(null), I = c.useRef(!1), L = c.useRef(!1), R = C || P, z = c.useCallback(() => {
+var _ = o.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading: b = !1, progress: x = 0, onFiles: S, error: C, compact: w = !1, disabled: T = !1, className: E, label: D, sublabel: O, ...k }, A) => {
+	let j = o.useRef(null), [M, N] = o.useState(!1), [P, F] = o.useState(null), I = o.useRef(!1), L = o.useRef(!1), R = C || P, z = o.useCallback(() => {
 		T || b || j.current?.click();
-	}, [T, b]), B = c.useCallback((e) => {
+	}, [T, b]), B = o.useCallback((e) => {
 		F(null);
 		for (let t of e) {
 			if (t.size > v) {
@@ -35,21 +35,21 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 		v,
 		_,
 		S
-	]), V = c.useCallback((e) => {
+	]), V = o.useCallback((e) => {
 		L.current = !0;
 		let t = e.target.files;
 		!t || t.length === 0 || (B(Array.from(t)), e.target.value = "");
-	}, [B]), H = c.useCallback(() => {
+	}, [B]), H = o.useCallback(() => {
 		I.current = !0, L.current = !1;
-	}, []), U = c.useCallback(() => {
+	}, []), U = o.useCallback(() => {
 		I.current && !L.current && _ && F("File type is not accepted"), I.current = !1;
-	}, [_]), W = c.useCallback((e) => {
+	}, [_]), W = o.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation(), !T && !b && N(!0);
-	}, [T, b]), G = c.useCallback((e) => {
+	}, [T, b]), G = o.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation(), !T && !b && N(!0);
-	}, [T, b]), K = c.useCallback((e) => {
+	}, [T, b]), K = o.useCallback((e) => {
 		e.preventDefault(), e.stopPropagation(), N(!1);
-	}, []), q = c.useCallback((e) => {
+	}, []), q = o.useCallback((e) => {
 		if (e.preventDefault(), e.stopPropagation(), N(!1), T || b) return;
 		let t = e.dataTransfer.files;
 		!t || t.length === 0 || B(Array.from(t));
@@ -57,23 +57,23 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 		T,
 		b,
 		B
-	]), J = D ?? "Drop files here or click to browse", Y = O ?? `Max file size: ${g(v)}`, X = c.useId();
-	return w ? /* @__PURE__ */ u("div", {
+	]), J = D ?? "Drop files here or click to browse", Y = O ?? `Max file size: ${g(v)}`, X = o.useId();
+	return w ? /* @__PURE__ */ c("div", {
 		ref: A,
-		className: a("inline-flex flex-col", E),
+		className: r("inline-flex flex-col", E),
 		...k,
 		children: [
-			/* @__PURE__ */ u("button", {
+			/* @__PURE__ */ c("button", {
 				type: "button",
 				onClick: z,
 				disabled: T,
-				className: a("inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
-				children: [b ? /* @__PURE__ */ l(o, { size: "sm" }) : /* @__PURE__ */ l(s, {
-					icon: f,
+				className: r("inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02", "text-ds-sm font-medium", "border border-surface-border-strong", "bg-surface-raised-hover text-surface-fg-muted", "hover:bg-accent-2", "disabled:opacity-action-disabled disabled:cursor-not-allowed", "transition-colors"),
+				children: [b ? /* @__PURE__ */ s(i, { size: "sm" }) : /* @__PURE__ */ s(a, {
+					icon: u,
 					size: "sm"
 				}), D ?? "Attach files"]
 			}),
-			/* @__PURE__ */ l("input", {
+			/* @__PURE__ */ s("input", {
 				ref: j,
 				id: X,
 				type: "file",
@@ -89,25 +89,25 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				onFocus: U,
 				tabIndex: -1
 			}),
-			R && /* @__PURE__ */ l("p", {
+			R && /* @__PURE__ */ s("p", {
 				role: "alert",
 				"aria-live": "polite",
 				className: "mt-ds-02 text-ds-xs text-error-11",
 				children: R
 			})
 		]
-	}) : /* @__PURE__ */ u("div", {
+	}) : /* @__PURE__ */ c("div", {
 		ref: A,
 		...k,
 		role: "presentation",
-		className: a("flex flex-col", E),
+		className: r("flex flex-col", E),
 		"data-drag-active": M ? "true" : void 0,
 		onDragEnter: W,
 		onDragOver: G,
 		onDragLeave: K,
 		onDrop: q,
 		children: [
-			/* @__PURE__ */ u(e.div, {
+			/* @__PURE__ */ c(p.div, {
 				role: "button",
 				tabIndex: 0,
 				"aria-disabled": T || void 0,
@@ -115,13 +115,13 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				onKeyDown: (e) => {
 					!T && (e.key === "Enter" || e.key === " ") && (e.preventDefault(), z());
 				},
-				className: a("flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", M && "border-accent-7 bg-accent-2", T && "opacity-action-disabled cursor-not-allowed"),
+				className: r("flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg", "border-2 border-dashed p-ds-08", "cursor-pointer", "border-surface-border-strong bg-surface-raised-hover", M && "border-accent-7 bg-accent-2", T && "opacity-action-disabled cursor-not-allowed"),
 				animate: { scale: M ? 1.02 : 1 },
-				transition: r.snappy,
+				transition: t.snappy,
 				children: [
-					/* @__PURE__ */ l(t, {
+					/* @__PURE__ */ s(f, {
 						mode: "wait",
-						children: b ? /* @__PURE__ */ l(e.div, {
+						children: b ? /* @__PURE__ */ s(p.div, {
 							initial: {
 								opacity: 0,
 								scale: .5
@@ -134,9 +134,9 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 								opacity: 0,
 								scale: .5
 							},
-							transition: i.fade,
-							children: /* @__PURE__ */ l(o, { size: "md" })
-						}, "spinner") : x === 100 && !C ? /* @__PURE__ */ l(e.div, {
+							transition: n.fade,
+							children: /* @__PURE__ */ s(i, { size: "md" })
+						}, "spinner") : x === 100 && !C ? /* @__PURE__ */ s(p.div, {
 							initial: {
 								opacity: 0,
 								scale: .5
@@ -149,50 +149,50 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 								opacity: 0,
 								scale: .5
 							},
-							transition: r.bouncy,
-							children: /* @__PURE__ */ l(s, {
-								icon: d,
+							transition: t.bouncy,
+							children: /* @__PURE__ */ s(a, {
+								icon: l,
 								size: "2xl",
 								className: "text-success-11"
 							})
-						}, "complete") : /* @__PURE__ */ l(e.div, {
+						}, "complete") : /* @__PURE__ */ s(p.div, {
 							initial: { opacity: 0 },
 							animate: { opacity: 1 },
 							exit: { opacity: 0 },
-							transition: i.fade,
-							children: /* @__PURE__ */ l(s, {
-								icon: p,
+							transition: n.fade,
+							children: /* @__PURE__ */ s(a, {
+								icon: d,
 								size: "2xl",
 								className: "text-surface-fg-subtle"
 							})
 						}, "upload")
 					}),
-					/* @__PURE__ */ l("span", {
+					/* @__PURE__ */ s("span", {
 						id: X + "-label",
 						className: "text-ds-sm text-surface-fg-muted",
 						children: J
 					}),
-					b ? /* @__PURE__ */ l("div", {
+					b ? /* @__PURE__ */ s("div", {
 						className: "w-full max-w-xs",
-						children: /* @__PURE__ */ l("div", {
+						children: /* @__PURE__ */ s("div", {
 							role: "progressbar",
 							"aria-valuenow": x,
 							"aria-valuemin": 0,
 							"aria-valuemax": 100,
 							className: "h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover",
-							children: /* @__PURE__ */ l(e.div, {
+							children: /* @__PURE__ */ s(p.div, {
 								className: "h-full rounded-ds-full bg-accent-9",
 								animate: { width: `${x}%` },
-								transition: r.smooth
+								transition: t.smooth
 							})
 						})
-					}) : /* @__PURE__ */ l("span", {
+					}) : /* @__PURE__ */ s("span", {
 						className: "text-ds-xs text-surface-fg-subtle",
 						children: Y
 					})
 				]
 			}),
-			/* @__PURE__ */ l("input", {
+			/* @__PURE__ */ s("input", {
 				ref: j,
 				id: X,
 				type: "file",
@@ -208,7 +208,7 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				onFocus: U,
 				tabIndex: -1
 			}),
-			/* @__PURE__ */ l(t, { children: R && /* @__PURE__ */ l(e.p, {
+			/* @__PURE__ */ s(f, { children: R && /* @__PURE__ */ s(p.p, {
 				role: "alert",
 				className: "mt-ds-02 text-ds-xs text-error-11",
 				initial: {
@@ -228,10 +228,10 @@ var _ = c.forwardRef(({ accept: _, maxSize: v = m, multiple: y = !1, uploading:
 				},
 				exit: { opacity: 0 },
 				transition: {
-					opacity: i.fade,
+					opacity: n.fade,
 					x: {
 						type: "tween",
-						duration: n.slow01,
+						duration: e.slow01,
 						ease: "easeOut"
 					}
 				},

package/dist/ui/file-upload.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { IconUpload, IconPaperclip, IconCheck } from '@tabler/icons-react'\nimport { cn } from './lib/utils'\nimport { springs, tweens, durations } from './lib/motion'\nimport { Spinner } from './spinner'\nimport { Icon } from './icon'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\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\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-ds-full bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../src/ui/file-upload.tsx"],"sourcesContent":["'use client'\n\nimport { IconCheck,IconPaperclip, IconUpload } from '@tabler/icons-react'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { durations,springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\nimport { Spinner } from './spinner'\n\n/**\n * Props for FileUpload — a drag-and-drop file picker with client-side validation (type + size),\n * an upload progress bar, and a compact inline mode.\n *\n * **Two modes:**\n * - Default: large drop zone with an upload icon, label, and sublabel — good for primary upload areas.\n * - `compact={true}`: a small inline button with an attachment icon — good for secondary/inline uploads.\n *\n * **Validation:** Pass `accept` (MIME or extension) and `maxSize` (bytes). Errors are shown inline.\n * The `onFiles` callback only fires with valid files — invalid files are rejected with an error message.\n *\n * **`onFiles` required:** This is the only required prop. Integrating with a real uploader means\n * calling your upload API from this callback and driving `uploading` + `progress` externally.\n *\n * @example\n * // Avatar upload with image-only restriction:\n * <FileUpload\n *   accept=\"image/*\"\n *   maxSize={2 * 1024 * 1024}\n *   onFiles={(files) => uploadAvatar(files[0])}\n *   label=\"Upload profile photo\"\n *   sublabel=\"PNG, JPG up to 2MB\"\n * />\n *\n * @example\n * // Document multi-upload with progress:\n * <FileUpload\n *   multiple\n *   accept=\".pdf,.doc,.docx\"\n *   uploading={isUploading}\n *   progress={uploadPercent}\n *   onFiles={handleFiles}\n * />\n *\n * @example\n * // Compact inline attachment button in a comment form:\n * <FileUpload compact onFiles={(files) => attachFiles(files)} label=\"Attach files\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface FileUploadProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onError'> {\n  /** Accepted file types (e.g., \"image/*\", \".pdf,.doc\") */\n  accept?: string\n  /** Max file size in bytes (default: 10MB) */\n  maxSize?: number\n  /** Allow multiple files */\n  multiple?: boolean\n  /** Currently uploading */\n  uploading?: boolean\n  /** Upload progress (0-100) */\n  progress?: number\n  /** Callback when files are selected/dropped */\n  onFiles: (files: File[]) => void\n  /** Error message to display */\n  error?: string\n  /** Compact mode (inline button instead of drop zone) */\n  compact?: boolean\n  /** Disabled */\n  disabled?: boolean\n  /** Custom label */\n  label?: string\n  /** Custom sublabel */\n  sublabel?: string\n}\n\nconst DEFAULT_MAX_SIZE = 10 * 1024 * 1024 // 10MB\n\nfunction fileMatchesAccept(file: File, accept: string): boolean {\n  return accept\n    .split(',')\n    .map((t) => t.trim())\n    .some((type) => {\n      if (type.startsWith('.'))\n        return file.name.toLowerCase().endsWith(type.toLowerCase())\n      if (type.endsWith('/*'))\n        return file.type.startsWith(type.slice(0, type.indexOf('/') + 1))\n      return file.type === type\n    })\n}\n\nfunction formatBytes(bytes: number): string {\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\nconst FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(\n  (\n    {\n      accept,\n      maxSize = DEFAULT_MAX_SIZE,\n      multiple = false,\n      uploading = false,\n      progress = 0,\n      onFiles,\n      error,\n      compact = false,\n      disabled = false,\n      className,\n      label,\n      sublabel,\n      ...props\n    },\n    ref,\n  ) => {\n    const inputRef = React.useRef<HTMLInputElement>(null)\n    const [isDragActive, setIsDragActive] = React.useState(false)\n    const [validationError, setValidationError] = React.useState<string | null>(\n      null,\n    )\n    // Track whether a file dialog was opened, so we can detect when the\n    // browser (or testing library) filters out all files via the accept attribute\n    const dialogOpenRef = React.useRef(false)\n    const filesAcceptedRef = React.useRef(false)\n\n    const displayError = error || validationError\n\n    const openPicker = React.useCallback(() => {\n      if (disabled || uploading) return\n      inputRef.current?.click()\n    }, [disabled, uploading])\n\n    const validateAndEmit = React.useCallback(\n      (files: File[]) => {\n        setValidationError(null)\n\n        for (const file of files) {\n          if (file.size > maxSize) {\n            setValidationError(\n              `File \"${file.name}\" exceeds the maximum size of ${formatBytes(maxSize)}`,\n            )\n            return\n          }\n          if (accept && !fileMatchesAccept(file, accept)) {\n            setValidationError(\n              `File \"${file.name}\" is not an accepted file type`,\n            )\n            return\n          }\n        }\n\n        onFiles(files)\n      },\n      [maxSize, accept, onFiles],\n    )\n\n    const handleInputChange = React.useCallback(\n      (e: React.ChangeEvent<HTMLInputElement>) => {\n        filesAcceptedRef.current = true\n        const fileList = e.target.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n        // Reset input value so the same file can be selected again\n        e.target.value = ''\n      },\n      [validateAndEmit],\n    )\n\n    // When the file input is clicked, the browser opens a dialog and blurs the input.\n    // We track this to detect when the dialog closes without selecting valid files.\n    const handleInputClick = React.useCallback(() => {\n      dialogOpenRef.current = true\n      filesAcceptedRef.current = false\n    }, [])\n\n    // After the file dialog closes, the browser re-focuses the input.\n    // If no files were accepted (e.g., the browser/test library filtered by accept),\n    // and the accept prop is set, show a validation error.\n    const handleInputFocus = React.useCallback(() => {\n      if (dialogOpenRef.current && !filesAcceptedRef.current && accept) {\n        setValidationError('File type is not accepted')\n      }\n      dialogOpenRef.current = false\n    }, [accept])\n\n    const handleDragEnter = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragOver = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        if (!disabled && !uploading) {\n          setIsDragActive(true)\n        }\n      },\n      [disabled, uploading],\n    )\n\n    const handleDragLeave = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n      },\n      [],\n    )\n\n    const handleDrop = React.useCallback(\n      (e: React.DragEvent<HTMLDivElement>) => {\n        e.preventDefault()\n        e.stopPropagation()\n        setIsDragActive(false)\n\n        if (disabled || uploading) return\n\n        const fileList = e.dataTransfer.files\n        if (!fileList || fileList.length === 0) return\n        validateAndEmit(Array.from(fileList))\n      },\n      [disabled, uploading, validateAndEmit],\n    )\n\n    const defaultLabel = label ?? 'Drop files here or click to browse'\n    const defaultSublabel = sublabel ?? `Max file size: ${formatBytes(maxSize)}`\n    const inputId = React.useId()\n\n    if (compact) {\n      return (\n        <div ref={ref} className={cn('inline-flex flex-col', className)} {...props}>\n          <button\n            type=\"button\"\n            onClick={openPicker}\n            disabled={disabled}\n            className={cn(\n              'inline-flex items-center gap-ds-02 rounded-ds-md px-ds-03 py-ds-02',\n              'text-ds-sm font-medium',\n              'border border-surface-border-strong',\n              'bg-surface-raised-hover text-surface-fg-muted',\n              'hover:bg-accent-2',\n              'disabled:opacity-action-disabled disabled:cursor-not-allowed',\n              'transition-colors',\n            )}\n          >\n            {uploading ? (\n              <Spinner size=\"sm\" />\n            ) : (\n              <Icon icon={IconPaperclip} size=\"sm\" />\n            )}\n            {label ?? 'Attach files'}\n          </button>\n          <input\n            ref={inputRef}\n            id={inputId}\n            type=\"file\"\n            className=\"sr-only\"\n            style={{ visibility: 'hidden' }}\n            aria-hidden=\"true\"\n            aria-label={label ?? 'Attach files'}\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            onChange={handleInputChange}\n            onClick={handleInputClick}\n            onFocus={handleInputFocus}\n            tabIndex={-1}\n          />\n          {displayError && (\n            <p\n              role=\"alert\"\n              aria-live=\"polite\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n            >\n              {displayError}\n            </p>\n          )}\n        </div>\n      )\n    }\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        role=\"presentation\"\n        className={cn('flex flex-col', className)}\n        data-drag-active={isDragActive ? 'true' : undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <motion.div\n          role=\"button\"\n          tabIndex={0}\n          aria-disabled={disabled || undefined}\n          onClick={disabled ? undefined : openPicker}\n          onKeyDown={(e: React.KeyboardEvent<HTMLDivElement>) => {\n            if (!disabled && (e.key === 'Enter' || e.key === ' ')) {\n              e.preventDefault()\n              openPicker()\n            }\n          }}\n          className={cn(\n            'flex flex-col items-center justify-center gap-ds-03 rounded-ds-lg',\n            'border-2 border-dashed p-ds-08',\n            'cursor-pointer',\n            'border-surface-border-strong bg-surface-raised-hover',\n            isDragActive &&\n              'border-accent-7 bg-accent-2',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          animate={{\n            scale: isDragActive ? 1.02 : 1,\n          }}\n          transition={springs.snappy}\n        >\n          {/* Icon — animates between upload ↔ spinner ↔ checkmark */}\n          <AnimatePresence mode=\"wait\">\n            {uploading ? (\n              <motion.div\n                key=\"spinner\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={tweens.fade}\n              >\n                <Spinner size=\"md\" />\n              </motion.div>\n            ) : progress === 100 && !error ? (\n              <motion.div\n                key=\"complete\"\n                initial={{ opacity: 0, scale: 0.5 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.5 }}\n                transition={springs.bouncy}\n              >\n                <Icon icon={IconCheck} size=\"2xl\" className=\"text-success-11\" />\n              </motion.div>\n            ) : (\n              <motion.div\n                key=\"upload\"\n                initial={{ opacity: 0 }}\n                animate={{ opacity: 1 }}\n                exit={{ opacity: 0 }}\n                transition={tweens.fade}\n              >\n                <Icon icon={IconUpload} size=\"2xl\" className=\"text-surface-fg-subtle\" />\n              </motion.div>\n            )}\n          </AnimatePresence>\n          <span id={inputId + '-label'} className=\"text-ds-sm text-surface-fg-muted\">\n            {defaultLabel}\n          </span>\n          {uploading ? (\n            <div className=\"w-full max-w-xs\">\n              <div\n                role=\"progressbar\"\n                aria-valuenow={progress}\n                aria-valuemin={0}\n                aria-valuemax={100}\n                className=\"h-2 w-full overflow-hidden rounded-ds-full bg-surface-raised-hover\"\n              >\n                <motion.div\n                  className=\"h-full rounded-ds-full bg-accent-9\"\n                  animate={{ width: `${progress}%` }}\n                  transition={springs.smooth}\n                />\n              </div>\n            </div>\n          ) : (\n            <span className=\"text-ds-xs text-surface-fg-subtle\">\n              {defaultSublabel}\n            </span>\n          )}\n        </motion.div>\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"file\"\n          className=\"sr-only\"\n          style={{ visibility: 'hidden' }}\n          aria-hidden=\"true\"\n          aria-label={defaultLabel}\n          accept={accept}\n          multiple={multiple}\n          disabled={disabled}\n          onChange={handleInputChange}\n          onClick={handleInputClick}\n          onFocus={handleInputFocus}\n          tabIndex={-1}\n        />\n        {/* Error message with shake animation */}\n        <AnimatePresence>\n          {displayError && (\n            <motion.p\n              role=\"alert\"\n              className=\"mt-ds-02 text-ds-xs text-error-11\"\n              initial={{ opacity: 0, x: 0 }}\n              animate={{ opacity: 1, x: [0, -4, 4, -4, 4, 0] }}\n              exit={{ opacity: 0 }}\n              transition={{ opacity: tweens.fade, x: { type: 'tween', duration: durations.slow01, ease: 'easeOut' } }}\n            >\n              {displayError}\n            </motion.p>\n          )}\n        </AnimatePresence>\n      </div>\n    )\n  },\n)\nFileUpload.displayName = 'FileUpload'\n\nexport { FileUpload }\n"],"mappings":"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"}

package/dist/ui/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAExE,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AACD,QAAA,MAAM,gBAAgB,sCAAiD,CAAA;AAEvE;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAsBd,CAAA;AAMD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACrF,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AASD,QAAA,MAAM,cAAc,kGAoBnB,CAAA;AAGD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,IAAI,qBAAqB,CAEpD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/ui/form.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,CAAA;AAExE,UAAU,qBAAqB;IAC7B,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,iFAAiF;IACjF,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AACD,QAAA,MAAM,gBAAgB,sCAAiD,CAAA;AAEvE;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,kFAAkF;IAClF,KAAK,CAAC,EAAE,eAAe,CAAA;IACvB,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB;AAED,QAAA,MAAM,SAAS,uFAsBd,CAAA;AAMD,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACrF,KAAK,CAAC,EAAE,eAAe,CAAA;CACxB;AASD,QAAA,MAAM,cAAc,kGAoBnB,CAAA;AAGD;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,YAAY,IAAI,qBAAqB,CAEpD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/form.js

@@ -1,12 +1,12 @@
 "use client";
-import { a as e } from "../_chunks/framer.js";
-import { motionProps as t, tweens as n } from "./lib/motion.js";
-import { cn as r } from "./lib/utils.js";
-import * as i from "react";
-import { jsx as a } from "react/jsx-runtime";
+import { motionProps as e, tweens as t } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { motion as a } from "framer-motion";
 //#region src/ui/form.tsx
-var o = i.createContext({}), s = i.forwardRef(({ className: e, helperTextId: t, inputId: n, state: s = "helper", required: c, children: l, ...u }, d) => {
-	let f = i.useId(), p = t || `${f}-helper`, m = n || `${f}-input`, h = i.useMemo(() => ({
+var o = r.createContext({}), s = r.forwardRef(({ className: e, helperTextId: t, inputId: a, state: s = "helper", required: c, children: l, ...u }, d) => {
+	let f = r.useId(), p = t || `${f}-helper`, m = a || `${f}-input`, h = r.useMemo(() => ({
 		state: s,
 		helperTextId: p,
 		inputId: m,
@@ -17,11 +17,11 @@ var o = i.createContext({}), s = i.forwardRef(({ className: e, helperTextId: t,
 		m,
 		c
 	]);
-	return /* @__PURE__ */ a(o.Provider, {
+	return /* @__PURE__ */ i(o.Provider, {
 		value: h,
-		children: /* @__PURE__ */ a("div", {
+		children: /* @__PURE__ */ i("div", {
 			ref: d,
-			className: r("flex flex-col gap-ds-02", e),
+			className: n("flex flex-col gap-ds-02", e),
 			...u,
 			children: l
 		})
@@ -33,13 +33,13 @@ var c = {
 	error: "text-error-11",
 	warning: "text-warning-11",
 	success: "text-success-11"
-}, l = i.forwardRef(({ className: s, id: l, state: u, ...d }, f) => {
-	let p = i.useContext(o), m = u ?? p.state ?? "helper", h = l ?? p.helperTextId;
-	return /* @__PURE__ */ a(e.p, {
+}, l = r.forwardRef(({ className: s, id: l, state: u, ...d }, f) => {
+	let p = r.useContext(o), m = u ?? p.state ?? "helper", h = l ?? p.helperTextId;
+	return /* @__PURE__ */ i(a.p, {
 		ref: f,
 		id: h,
 		role: m === "error" ? "alert" : void 0,
-		className: r("text-ds-sm", c[m], s),
+		className: n("text-ds-sm", c[m], s),
 		initial: {
 			opacity: 0,
 			y: -4
@@ -52,13 +52,13 @@ var c = {
 			opacity: 0,
 			y: -4
 		},
-		transition: n.fade,
-		...t(d)
+		transition: t.fade,
+		...e(d)
 	});
 });
 l.displayName = "FormHelperText";
 function u() {
-	return i.useContext(o);
+	return r.useContext(o);
 }
 //#endregion
 export { s as FormField, o as FormFieldContext, l as FormHelperText, u as useFormField };

package/dist/ui/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-ds-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAgBA,IAAM,IAAmB,EAAM,cAAqC,EAAE,CAAC,EAmCjE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,OAAO,EACtB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;EAAU,GACpF;EAAC;EAAO;EAAkB;EAAiB;EAAS,CACrD;AAED,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,EAAU;GACnD,GAAI;GAEH;GACG,CAAA;EACoB,CAAA;EAGjC;AACD,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;CACV,EAEK,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,EAAiB,EAC5C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;AAE7B,QACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,cAAc,EAAmB,IAAQ,EAAU;EACjE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAI;EAC9B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC3B,YAAY,EAAO;EACnB,GAAI,EAAY,EAAM;EACtB,CAAA;EAGP;AACD,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;AACpD,QAAO,EAAM,WAAW,EAAiB"}
+{"version":3,"file":"form.js","names":[],"sources":["../../src/ui/form.tsx"],"sourcesContent":["'use client'\n\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { motionProps, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nexport type FormHelperState = 'helper' | 'error' | 'warning' | 'success'\n\ninterface FormFieldContextValue {\n  state?: FormHelperState\n  helperTextId?: string\n  /** Auto-generated id shared between Label (htmlFor) and the field input (id). */\n  inputId?: string\n  required?: boolean\n}\nconst FormFieldContext = React.createContext<FormFieldContextValue>({})\n\n/**\n * FormField — vertical flex container that provides validation state and\n * aria-describedby wiring to children via React context.\n *\n * **Automatic a11y wiring:** FormField generates a stable ID (or uses a provided `helperTextId`)\n * and passes it to `FormHelperText` via context. Use the `useFormField()` hook in custom inputs\n * to read `{ state, helperTextId, required }` and spread onto your input element.\n *\n * @example\n * <FormField state=\"error\">\n *   <Label htmlFor=\"email\">Email</Label>\n *   <Input id=\"email\" state=\"error\" />\n *   <FormHelperText>Please enter a valid email address.</FormHelperText>\n * </FormField>\n */\nexport interface FormFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Custom ID for the helper text element. If omitted, an auto-generated ID is used.\n   * Pass this to `useFormField()` consumers that need to set `aria-describedby`.\n   */\n  helperTextId?: string\n  /**\n   * Custom ID for the field input element. If omitted, an auto-generated ID is used.\n   * Label (when inside FormField) reads this via `htmlFor`; Input reads it via `id`.\n   * Explicit `htmlFor` / `id` props on children always win.\n   */\n  inputId?: string\n  /** Current validation state — propagated to child `FormHelperText` via context */\n  state?: FormHelperState\n  /** Whether the field is required — available to children via `useFormField()` */\n  required?: boolean\n}\n\nconst FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  ({ className, helperTextId, inputId, state = 'helper', required, children, ...props }, ref) => {\n    const autoId = React.useId()\n    const resolvedHelperId = helperTextId || `${autoId}-helper`\n    const resolvedInputId = inputId || `${autoId}-input`\n    const contextValue = React.useMemo(\n      () => ({ state, helperTextId: resolvedHelperId, inputId: resolvedInputId, required }),\n      [state, resolvedHelperId, resolvedInputId, required],\n    )\n\n    return (\n      <FormFieldContext.Provider value={contextValue}>\n        <div\n          ref={ref}\n          className={cn('flex flex-col gap-ds-02', className)}\n          {...props}\n        >\n          {children}\n        </div>\n      </FormFieldContext.Provider>\n    )\n  },\n)\nFormField.displayName = 'FormField'\n\n// FormHelperText — small helper/error/warning/success message under a field\n//\n// When used for errors, set an `id` matching the input's `aria-describedby`.\nexport interface FormHelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  state?: FormHelperState\n}\n\nconst helperStateClasses: Record<FormHelperState, string> = {\n  helper:  'text-surface-fg-subtle',\n  error:   'text-error-11',\n  warning: 'text-warning-11',\n  success: 'text-success-11',\n}\n\nconst FormHelperText = React.forwardRef<HTMLParagraphElement, FormHelperTextProps>(\n  ({ className, id: idProp, state: stateProp, ...props }, ref) => {\n    const context = React.useContext(FormFieldContext)\n    const state = stateProp ?? context.state ?? 'helper'\n    const id = idProp ?? context.helperTextId\n\n    return (\n      <motion.p\n        ref={ref}\n        id={id}\n        role={state === 'error' ? 'alert' : undefined}\n        className={cn('text-ds-sm', helperStateClasses[state], className)}\n        initial={{ opacity: 0, y: -4 }}\n        animate={{ opacity: 1, y: 0 }}\n        exit={{ opacity: 0, y: -4 }}\n        transition={tweens.fade}\n        {...motionProps(props)}\n      />\n    )\n  },\n)\nFormHelperText.displayName = 'FormHelperText'\n\n/**\n * Hook to read FormField context — returns `{ state, helperTextId, required }`.\n * Use in custom input components to auto-wire `aria-describedby` and `aria-invalid`.\n *\n * @example\n * function MyCustomInput(props) {\n *   const { state, helperTextId, required } = useFormField()\n *   return (\n *     <input\n *       aria-describedby={helperTextId}\n *       aria-invalid={state === 'error' || undefined}\n *       aria-required={required}\n *       {...props}\n *     />\n *   )\n * }\n */\nexport function useFormField(): FormFieldContextValue {\n  return React.useContext(FormFieldContext)\n}\n\nexport { FormField, FormFieldContext, FormHelperText }\n"],"mappings":";;;;;;;AAiBA,IAAM,IAAmB,EAAM,cAAqC,EAAE,CAAC,EAmCjE,IAAY,EAAM,YACrB,EAAE,cAAW,iBAAc,YAAS,WAAQ,UAAU,aAAU,aAAU,GAAG,KAAS,MAAQ;CAC7F,IAAM,IAAS,EAAM,OAAO,EACtB,IAAmB,KAAgB,GAAG,EAAO,UAC7C,IAAkB,KAAW,GAAG,EAAO,SACvC,IAAe,EAAM,eAClB;EAAE;EAAO,cAAc;EAAkB,SAAS;EAAiB;EAAU,GACpF;EAAC;EAAO;EAAkB;EAAiB;EAAS,CACrD;AAED,QACE,kBAAC,EAAiB,UAAlB;EAA2B,OAAO;YAChC,kBAAC,OAAD;GACO;GACL,WAAW,EAAG,2BAA2B,EAAU;GACnD,GAAI;GAEH;GACG,CAAA;EACoB,CAAA;EAGjC;AACD,EAAU,cAAc;AASxB,IAAM,IAAsD;CAC1D,QAAS;CACT,OAAS;CACT,SAAS;CACT,SAAS;CACV,EAEK,IAAiB,EAAM,YAC1B,EAAE,cAAW,IAAI,GAAQ,OAAO,GAAW,GAAG,KAAS,MAAQ;CAC9D,IAAM,IAAU,EAAM,WAAW,EAAiB,EAC5C,IAAQ,KAAa,EAAQ,SAAS,UACtC,IAAK,KAAU,EAAQ;AAE7B,QACE,kBAAC,EAAO,GAAR;EACO;EACD;EACJ,MAAM,MAAU,UAAU,UAAU,KAAA;EACpC,WAAW,EAAG,cAAc,EAAmB,IAAQ,EAAU;EACjE,SAAS;GAAE,SAAS;GAAG,GAAG;GAAI;EAC9B,SAAS;GAAE,SAAS;GAAG,GAAG;GAAG;EAC7B,MAAM;GAAE,SAAS;GAAG,GAAG;GAAI;EAC3B,YAAY,EAAO;EACnB,GAAI,EAAY,EAAM;EACtB,CAAA;EAGP;AACD,EAAe,cAAc;AAmB7B,SAAgB,IAAsC;AACpD,QAAO,EAAM,WAAW,EAAiB"}

package/dist/ui/hover-card.d.ts

@@ -1,6 +1,6 @@
 "use client";
-import * as React from 'react';
 import * as HoverCardPrimitive from '../primitives/react-hover-card';
+import * as React from 'react';
 /**
  * HoverCard displays supplementary content on pointer hover.
  *
@@ -12,5 +12,5 @@ declare const HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCar
 declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
 declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>;
-export { HoverCard, HoverCardTrigger, HoverCardContent };
+export { HoverCard, HoverCardContent, HoverCardTrigger };
 //# sourceMappingURL=hover-card.d.ts.map

package/dist/ui/hover-card.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/ui/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,kBAAkB,MAAM,8BAA8B,CAAA;AAUlE;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAuBvF,CAAA;AAGD,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAmCpB,CAAA;AAGF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA"}
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../src/ui/hover-card.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,kBAAkB,MAAM,8BAA8B,CAAA;AAElE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAS9B;;;;;;GAMG;AACH,QAAA,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,CAuBvF,CAAA;AAGD,QAAA,MAAM,gBAAgB,oHAA6B,CAAA;AAEnD,QAAA,MAAM,gBAAgB,oKAmCpB,CAAA;AAGF,MAAM,MAAM,qBAAqB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,CAAA;AAErG,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAC,gBAAgB,EAAE,CAAA"}

package/dist/ui/hover-card.js

@@ -1,35 +1,35 @@
 "use client";
 import { dt as e, ft as t, mt as n, pt as r } from "../_chunks/primitives.js";
-import { a as i, c as a } from "../_chunks/framer.js";
-import { springs as o, tweens as s } from "./lib/motion.js";
-import { cn as c } from "./lib/utils.js";
-import * as l from "react";
-import { jsx as u } from "react/jsx-runtime";
+import { springs as i, tweens as a } from "./lib/motion.js";
+import { cn as o } from "./lib/utils.js";
+import * as s from "react";
+import { jsx as c } from "react/jsx-runtime";
+import { AnimatePresence as l, motion as u } from "framer-motion";
 //#region src/ui/hover-card.tsx
-var d = l.createContext(!1), f = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...i }) => {
-	let [a, o] = l.useState(t), s = e !== void 0, c = s ? e : a, f = l.useCallback((e) => {
-		s || o(e), n?.(e);
-	}, [s, n]);
-	return /* @__PURE__ */ u(d.Provider, {
-		value: c,
-		children: /* @__PURE__ */ u(r, {
-			open: c,
+var d = s.createContext(!1), f = ({ open: e, defaultOpen: t = !1, onOpenChange: n, ...i }) => {
+	let [a, o] = s.useState(t), l = e !== void 0, u = l ? e : a, f = s.useCallback((e) => {
+		l || o(e), n?.(e);
+	}, [l, n]);
+	return /* @__PURE__ */ c(d.Provider, {
+		value: u,
+		children: /* @__PURE__ */ c(r, {
+			open: u,
 			onOpenChange: f,
 			...i
 		})
 	});
 };
 f.displayName = "HoverCard";
-var p = n, m = l.forwardRef(({ className: n, align: r = "center", sideOffset: f = 4, children: p, ...m }, h) => /* @__PURE__ */ u(a, { children: l.useContext(d) && /* @__PURE__ */ u(t, {
+var p = n, m = s.forwardRef(({ className: n, align: r = "center", sideOffset: f = 4, children: p, ...m }, h) => /* @__PURE__ */ c(l, { children: s.useContext(d) && /* @__PURE__ */ c(t, {
 	forceMount: !0,
-	children: /* @__PURE__ */ u(e, {
+	children: /* @__PURE__ */ c(e, {
 		ref: h,
 		align: r,
 		sideOffset: f,
 		forceMount: !0,
 		asChild: !0,
 		...m,
-		children: /* @__PURE__ */ u(i.div, {
+		children: /* @__PURE__ */ c(u.div, {
 			initial: {
 				opacity: 0,
 				scale: .95
@@ -43,10 +43,10 @@ var p = n, m = l.forwardRef(({ className: n, align: r = "center", sideOffset: f
 				scale: .95
 			},
 			transition: {
-				...o.snappy,
-				opacity: s.fade
+				...i.snappy,
+				opacity: a.fade
 			},
-			className: c("z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden", n),
+			className: o("z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden", n),
 			children: p
 		})
 	})

package/dist/ui/hover-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { motion, AnimatePresence } from 'framer-motion'\n\nimport { cn } from './lib/utils'\nimport { springs, tweens } from './lib/motion'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardTrigger, HoverCardContent }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,GAAM,EASjD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAY,EACrE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;AAElB,EADK,KAAc,EAAoB,EAAM,EAC7C,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAa,CAC7B;AAED,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACpD,CAAA;;AAGpC,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,EAAqB,IAK7C,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;IAAM;GACvD,WAAW,EACT,8HACA,EACD;GAEA;GACU,CAAA;EACc,CAAA;CACH,CAAA,EAEd,CAAA,CAEpB;AACF,EAAiB,cAAA,EAAyC"}
+{"version":3,"file":"hover-card.js","names":[],"sources":["../../src/ui/hover-card.tsx"],"sourcesContent":["'use client'\n\nimport * as HoverCardPrimitive from '@primitives/react-hover-card'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\nconst HoverCardOpenContext = React.createContext(false)\n\n/**\n * HoverCard displays supplementary content on pointer hover.\n *\n * **Accessibility note:** HoverCard is pointer-only by design (WAI-ARIA HoverCard has no APG pattern).\n * Do NOT use for essential content that keyboard users must access.\n * For essential content, use {@link Popover} instead which supports keyboard activation.\n */\nconst HoverCard: React.FC<React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Root>> = ({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  ...props\n}) => {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (value: boolean) => {\n      if (!isControlled) setUncontrolledOpen(value)\n      onOpenChange?.(value)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  return (\n    <HoverCardOpenContext.Provider value={open}>\n      <HoverCardPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </HoverCardOpenContext.Provider>\n  )\n}\nHoverCard.displayName = 'HoverCard'\n\nconst HoverCardTrigger = HoverCardPrimitive.Trigger\n\nconst HoverCardContent = React.forwardRef<\n  React.ElementRef<typeof HoverCardPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n>(({ className, align = 'center', sideOffset = 4, children, ...props }, ref) => {\n  const open = React.useContext(HoverCardOpenContext)\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <HoverCardPrimitive.Portal forceMount>\n          <HoverCardPrimitive.Content\n            ref={ref}\n            align={align}\n            sideOffset={sideOffset}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={{ opacity: 0, scale: 0.95 }}\n              animate={{ opacity: 1, scale: 1 }}\n              exit={{ opacity: 0, scale: 0.95 }}\n              transition={{ ...springs.snappy, opacity: tweens.fade }}\n              className={cn(\n                'z-popover w-64 rounded-ds-lg border border-surface-border-strong bg-surface-overlay p-ds-05 shadow-floating outline-hidden',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </HoverCardPrimitive.Content>\n        </HoverCardPrimitive.Portal>\n      )}\n    </AnimatePresence>\n  )\n})\nHoverCardContent.displayName = HoverCardPrimitive.Content.displayName\n\nexport type HoverCardContentProps = React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>\n\nexport { HoverCard, HoverCardContent,HoverCardTrigger }\n"],"mappings":";;;;;;;;AAWA,IAAM,IAAuB,EAAM,cAAc,GAAM,EASjD,KAAuF,EAC3F,MAAM,GACN,iBAAc,IACd,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAkB,KAAuB,EAAM,SAAS,EAAY,EACrE,IAAe,MAAmB,KAAA,GAClC,IAAO,IAAe,IAAiB,GAEvC,IAAmB,EAAM,aAC5B,MAAmB;AAElB,EADK,KAAc,EAAoB,EAAM,EAC7C,IAAe,EAAM;IAEvB,CAAC,GAAc,EAAa,CAC7B;AAED,QACE,kBAAC,EAAqB,UAAtB;EAA+B,OAAO;YACpC,kBAAC,GAAD;GAA+B;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACpD,CAAA;;AAGpC,EAAU,cAAc;AAExB,IAAM,IAAmB,GAEnB,IAAmB,EAAM,YAG5B,EAAE,cAAW,WAAQ,UAAU,gBAAa,GAAG,aAAU,GAAG,KAAS,MAIpE,kBAAC,GAAD,EAAA,UAHW,EAAM,WAAW,EAAqB,IAK7C,kBAAC,GAAD;CAA2B,YAAA;WACzB,kBAAC,GAAD;EACO;EACE;EACK;EACZ,YAAA;EACA,SAAA;EACA,GAAI;YAEJ,kBAAC,EAAO,KAAR;GACE,SAAS;IAAE,SAAS;IAAG,OAAO;IAAM;GACpC,SAAS;IAAE,SAAS;IAAG,OAAO;IAAG;GACjC,MAAM;IAAE,SAAS;IAAG,OAAO;IAAM;GACjC,YAAY;IAAE,GAAG,EAAQ;IAAQ,SAAS,EAAO;IAAM;GACvD,WAAW,EACT,8HACA,EACD;GAEA;GACU,CAAA;EACc,CAAA;CACH,CAAA,EAEd,CAAA,CAEpB;AACF,EAAiB,cAAA,EAAyC"}

package/dist/ui/icon-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAUnD,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACpH,iEAAiE;IACjE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAA;IACxB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,QAAA,MAAM,UAAU,2FAef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}
+{"version":3,"file":"icon-button.d.ts","sourceRoot":"","sources":["../../src/ui/icon-button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAA;AAUnD,KAAK,cAAc,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAA;AAExC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,GAAG,SAAS,GAAG,WAAW,GAAG,iBAAiB,GAAG,UAAU,GAAG,MAAM,GAAG,OAAO,CAAC;IACpH,iEAAiE;IACjE,IAAI,EAAE,KAAK,CAAC,YAAY,CAAA;IACxB,kEAAkE;IAClE,YAAY,EAAE,MAAM,CAAA;IACpB,sCAAsC;IACtC,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,iCAAiC;IACjC,IAAI,CAAC,EAAE,cAAc,CAAA;CACtB;AAED,QAAA,MAAM,UAAU,2FAef,CAAA;AAGD,OAAO,EAAE,UAAU,EAAE,CAAA"}

package/dist/ui/icon-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Button, type ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /** The icon element to render — must be `<Icon icon={...} />` */\n  icon: React.ReactElement\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-ds-full', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {icon}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;AAOA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA8CK,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,mBAAmB,EAAU;CACxD;CACT,iBAAgB;CAChB,GAAI;WAEH;CACM,CAAA,CAGd;AACD,EAAW,cAAc"}
+{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/ui/icon-button.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\n\nimport { Button, type ButtonProps } from './button'\nimport { cn } from './lib/utils'\n\n/** Map friendly sizes to icon-* sizes for the underlying Button */\nconst sizeMap = {\n  sm: 'icon-sm',\n  md: 'icon-md',\n  lg: 'icon-lg',\n} as const\n\ntype IconButtonSize = 'sm' | 'md' | 'lg'\n\n/**\n * Props for IconButton — a square or circular icon-only button built on top of `<Button>`,\n * with `aria-label` required for WCAG AA compliance.\n *\n * **`aria-label` is required** — icon-only buttons have no visible text, so a descriptive label\n * is mandatory for screen readers. TypeScript enforces this.\n *\n * **Shape:** `'square'` (default, rounded corners) | `'circle'` (fully round, great for avatar-adjacent actions)\n *\n * **Size:** `'sm'` | `'md'` (default) | `'lg'` — maps to `icon-sm/md/lg` sizes internally.\n *\n * **All `Button` variants** are supported: `solid`, `outline`, `ghost`, `link` x `default`, `error`.\n *\n * @example\n * // Ghost toolbar icon button:\n * <IconButton icon={<Icon icon={IconEdit} />} variant=\"ghost\" aria-label=\"Edit item\" />\n *\n * @example\n * // Circular close button (e.g. in a modal header):\n * <IconButton icon={<Icon icon={IconX} />} shape=\"circle\" variant=\"ghost\" size=\"sm\" aria-label=\"Close dialog\" />\n *\n * @example\n * // Solid floating action button:\n * <IconButton icon={<Icon icon={IconPlus} />} variant=\"solid\" size=\"lg\" aria-label=\"Create new project\" />\n *\n * @example\n * // Error icon button with loading state (e.g. confirm delete):\n * <IconButton icon={<Icon icon={IconTrash} />} variant=\"solid\" color=\"error\" loading={isDeleting} aria-label=\"Delete\" />\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface IconButtonProps\n  extends Omit<ButtonProps, 'startIcon' | 'endIcon' | 'fullWidth' | 'loadingPosition' | 'children' | 'size' | 'shape'> {\n  /** The icon element to render — must be `<Icon icon={...} />` */\n  icon: React.ReactElement\n  /** Accessible label — required for icon-only buttons (WCAG AA) */\n  'aria-label': string\n  /** Button shape. Default: 'square' */\n  shape?: 'square' | 'circle'\n  /** Button size. Default: 'md' */\n  size?: IconButtonSize\n}\n\nconst IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(\n  ({ icon, shape = 'square', size = 'md', className, loading, ...props }, ref) => {\n    return (\n      <Button\n        ref={ref}\n        size={sizeMap[size]}\n        className={cn(shape === 'circle' && 'rounded-ds-full', className)}\n        loading={loading}\n        loadingPosition=\"center\"\n        {...props}\n      >\n        {icon}\n      </Button>\n    )\n  },\n)\nIconButton.displayName = 'IconButton'\n\nexport { IconButton }\n"],"mappings":";;;;;;AAQA,IAAM,IAAU;CACd,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EA8CK,IAAa,EAAM,YACtB,EAAE,SAAM,WAAQ,UAAU,UAAO,MAAM,cAAW,YAAS,GAAG,KAAS,MAEpE,kBAAC,GAAD;CACO;CACL,MAAM,EAAQ;CACd,WAAW,EAAG,MAAU,YAAY,mBAAmB,EAAU;CACxD;CACT,iBAAgB;CAChB,GAAI;WAEH;CACM,CAAA,CAGd;AACD,EAAW,cAAc"}

package/dist/ui/icon-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon-group.d.ts","sourceRoot":"","sources":["../../src/ui/icon-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgB,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAQ7E,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAqBb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA"}
+{"version":3,"file":"icon-group.d.ts","sourceRoot":"","sources":["../../src/ui/icon-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAgB,KAAK,QAAQ,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAS7E,MAAM,WAAW,cAAc;IAC7B,iCAAiC;IACjC,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,qCAAqC;IACrC,MAAM,CAAC,EAAE,UAAU,CAAA;IACnB,kDAAkD;IAClD,GAAG,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAA;IACnC,yDAAyD;IACzD,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,kEAAkE;IAClE,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,QAAA,MAAM,SAAS,uFAqBb,CAAA;AAGF,OAAO,EAAE,SAAS,EAAE,CAAA"}