@dowel-ui/react 0.7.0 → 0.8.0

package/dist/components/file-upload/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;UAqCiB,wBAAwB,KAAK;;EAE5C;EACA,UAAU,OAAO;EACjB;EACA;EACA;;EAEA,OAAO;EACP,WAAW;;iBAGG,aACd,WACA,OACA,SACA,QACA,UACA,UACA,MACA,aACG,SACF,kCAAe,IAAA;UAsFD,4BAA4B;EAC3C,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;UAsBL,4BAA4B,KAAK;EAChD,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;;;;;;;iBA+FN,mBACd,WACA,UACG,SACF;EACD;IAAS;IAAe;IAAgB;IAAc;;oBACvD,IAAA"}
+{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;UA2DiB,wBAAwB,KAAK;;EAE5C;EACA,UAAU,OAAO;EACjB;EACA;EACA;;EAEA,OAAO;;;;;EAKP,OAAO;EACP,WAAW;;iBAGG,aACd,WACA,OACA,SACA,QACA,UACA,UACA,MACA,MACA,aACG,SACF,kCAAe,IAAA;UAoGD,4BAA4B;EAC3C,OAAO;;;;;;EAMP;EACA,YAAY;EACZ,WAAW;EACX,YAAY;;iBAQE,iBACd,WACA,OACA,UACA,SACA,UACA,gBACG,SACF,sCAAmB,IAAA;UAuFL,4BAA4B,KAAK;EAChD,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;;;;;;;iBAkGN,mBACd,WACA,UACG,SACF;EACD;IAAS;IAAe;IAAgB;IAAc;;oBACvD,IAAA"}

package/dist/components/file-upload/file-upload.js

@@ -3,7 +3,7 @@ import { disabledStyles, focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { formatBytes } from "./upload-queue.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 //#region src/components/file-upload/file-upload.tsx
 /**
 * The visible half of uploading. The queue is in `upload-queue.ts` and is the
@@ -17,6 +17,15 @@ import { useId, useRef, useState } from "react";
 * Space, and needs nothing added. Drag and drop is layered on top as a pointer
 * convenience, and every drop can also be done from the input.
 */
+const ITEM_KEYFRAMES = `
+@keyframes dowel-file-upload-in{from{opacity:0;transform:translateX(var(--dowel-file-upload-x)) scale(0.95)}}
+@keyframes dowel-file-upload-out{to{opacity:0;transform:translateX(calc(-1.5 * var(--dowel-file-upload-x))) scale(0.95)}}
+[data-slot="file-upload-item"]{--dowel-file-upload-x:-1rem;animation:dowel-file-upload-in var(--duration-normal) var(--ease-out-quint)}
+[data-slot="file-upload-item"]:dir(rtl){--dowel-file-upload-x:1rem}
+[data-slot="file-upload-item"][data-state="closed"]{animation:dowel-file-upload-out var(--duration-fast) var(--ease-in-quint) forwards}
+`;
+/** Clears departing rows whose animation never runs (hidden, unstyled). */
+const EXIT_FALLBACK_MS = 1e3;
 const STATUS_LABEL = {
 	queued: "Waiting",
 	uploading: "Uploading",
@@ -24,7 +33,7 @@ const STATUS_LABEL = {
 	failed: "Failed",
 	cancelled: "Cancelled"
 };
-function FileUpload({ className, label, onFiles, accept, multiple = true, disabled = false, hint, children, ...props }) {
+function FileUpload({ className, label, onFiles, accept, multiple = true, disabled = false, hint, icon, children, ...props }) {
 	const inputId = useId();
 	const hintId = useId();
 	const [dragging, setDragging] = useState(false);
@@ -57,53 +66,107 @@ function FileUpload({ className, label, onFiles, accept, multiple = true, disabl
 				event.preventDefault();
 			},
 			onDrop: handleDrop,
-			className: cn("rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center", "transition-colors duration-[var(--duration-fast)]", dragging && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-55"),
-			children: [/* @__PURE__ */ jsxs("label", {
-				htmlFor: inputId,
-				className: cn("inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm", "focus-within:ring-2 focus-within:ring-ring/55"),
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium",
-						children: label
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "text-xs text-muted-foreground",
-						children: [
-							"Drop ",
-							multiple ? "files" : "a file",
-							" here, or choose from your device"
-						]
-					}),
-					/* @__PURE__ */ jsx("input", {
-						id: inputId,
-						type: "file",
-						accept,
-						multiple,
-						disabled,
-						"aria-describedby": hint ? hintId : void 0,
-						onChange: (event) => {
-							const chosen = [...event.target.files ?? []];
-							if (chosen.length > 0) onFiles(chosen);
-							event.target.value = "";
-						},
-						className: "sr-only"
-					})
-				]
-			}), hint ? /* @__PURE__ */ jsx("p", {
-				id: hintId,
-				className: "mt-2 text-xs text-muted-foreground",
-				children: hint
-			}) : null]
+			className: cn("rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center", "transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", dragging && "scale-[1.02] border-primary bg-primary/5", disabled && "pointer-events-none opacity-55"),
+			children: [
+				icon ? /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					"data-slot": "file-upload-icon",
+					className: cn("mx-auto mb-2 flex w-fit text-muted-foreground [&_svg:not([class*='size-'])]:size-8", "transition-[color,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", dragging && "-translate-y-1 scale-115 text-foreground"),
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsxs("label", {
+					htmlFor: inputId,
+					className: cn("inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm", "focus-within:ring-2 focus-within:ring-ring/55"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: label
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								"Drop ",
+								multiple ? "files" : "a file",
+								" here, or choose from your device"
+							]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							id: inputId,
+							type: "file",
+							accept,
+							multiple,
+							disabled,
+							"aria-describedby": hint ? hintId : void 0,
+							onChange: (event) => {
+								const chosen = [...event.target.files ?? []];
+								if (chosen.length > 0) onFiles(chosen);
+								event.target.value = "";
+							},
+							className: "sr-only"
+						})
+					]
+				}),
+				hint ? /* @__PURE__ */ jsx("p", {
+					id: hintId,
+					className: "mt-2 text-xs text-muted-foreground",
+					children: hint
+				}) : null
+			]
 		}), children]
 	});
 }
-function FileUploadList({ className, files, onCancel, onRetry, onRemove, ...props }) {
-	if (files.length === 0) return null;
+function FileUploadList({ className, files, onCancel, onRetry, onRemove, animateExit = false, ...props }) {
+	const [previous, setPrevious] = useState(files);
+	const [leaving, setLeaving] = useState([]);
+	if (previous !== files) {
+		setPrevious(files);
+		const present = new Set(files.map((entry) => entry.id));
+		const gone = animateExit ? previous.flatMap((entry, index) => present.has(entry.id) ? [] : [{
+			entry,
+			index
+		}]) : [];
+		setLeaving((current) => [...current.filter((item) => !present.has(item.entry.id) && !gone.some((g) => g.entry.id === item.entry.id)), ...gone]);
+	}
+	useEffect(() => {
+		if (leaving.length === 0) return;
+		const timer = setTimeout(() => {
+			setLeaving([]);
+		}, EXIT_FALLBACK_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [leaving]);
+	const listenForExitEnd = useCallback((id) => (element) => {
+		if (!element) return;
+		const onEnd = (event) => {
+			if (event.target !== element) return;
+			setLeaving((current) => current.filter((item) => item.entry.id !== id));
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => {
+			element.removeEventListener("animationend", onEnd);
+		};
+	}, []);
+	const rows = files.map((entry) => ({
+		entry,
+		gone: false
+	}));
+	for (const item of [...leaving].sort((a, b) => a.index - b.index)) rows.splice(Math.min(item.index, rows.length), 0, {
+		entry: item.entry,
+		gone: true
+	});
+	if (rows.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "file-upload-list",
 		className: cn("flex list-none flex-col gap-2", className),
 		...props,
-		children: files.map((entry) => /* @__PURE__ */ jsx(FileUploadItem, {
+		children: rows.map(({ entry, gone }) => gone ? /* @__PURE__ */ jsx(FileUploadItem, {
+			ref: listenForExitEnd(entry.id),
+			entry,
+			"data-state": "closed",
+			"aria-hidden": "true",
+			inert: true
+		}, `gone:${entry.id}`) : /* @__PURE__ */ jsx(FileUploadItem, {
 			entry,
 			onCancel,
 			onRetry,
@@ -119,59 +182,67 @@ function FileUploadItem({ className, entry, onCancel, onRetry, onRemove, ...prop
 		"data-status": status,
 		className: cn("flex items-center gap-3 rounded-lg border px-3 py-2 text-sm", status === "failed" ? "border-destructive/40 bg-destructive/5" : "border-border bg-card", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 flex-col gap-1",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-baseline justify-between gap-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate font-medium",
-						children: file.name
-					}), /* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-xs text-muted-foreground tabular-nums",
-						children: formatBytes(file.size)
-					})]
-				}),
-				/* @__PURE__ */ jsxs("p", {
-					className: cn("text-xs", status === "failed" ? "text-destructive" : "text-muted-foreground"),
-					children: [
-						STATUS_LABEL[status],
-						status === "uploading" && percent !== null ? ` · ${String(percent)}%` : null,
-						error ? ` · ${error}` : null
-					]
-				}),
-				status === "uploading" ? /* @__PURE__ */ jsx("div", {
-					role: "progressbar",
-					"aria-label": `Uploading ${file.name}`,
-					"aria-valuenow": percent ?? void 0,
-					"aria-valuemin": 0,
-					"aria-valuemax": 100,
-					className: "h-1 w-full overflow-hidden rounded-full bg-muted",
-					children: /* @__PURE__ */ jsx("div", {
-						"data-slot": "file-upload-progress",
-						className: "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
-						style: { width: `${String(percent ?? 0)}%` }
-					})
-				}) : null
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
-			children: [
-				status === "uploading" && onCancel ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onCancel(id),
-					children: "Cancel"
-				}) : null,
-				(status === "failed" || status === "cancelled") && onRetry ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onRetry(id),
-					children: "Retry"
-				}) : null,
-				onRemove ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onRemove(id),
-					"aria-label": `Remove ${file.name}`,
-					children: "Remove"
-				}) : null
-			]
-		})]
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-file-upload",
+				precedence: "dowel",
+				children: ITEM_KEYFRAMES
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: file.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+							children: formatBytes(file.size)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: cn("text-xs", status === "failed" ? "text-destructive" : "text-muted-foreground"),
+						children: [
+							STATUS_LABEL[status],
+							status === "uploading" && percent !== null ? ` · ${String(percent)}%` : null,
+							error ? ` · ${error}` : null
+						]
+					}),
+					status === "uploading" ? /* @__PURE__ */ jsx("div", {
+						role: "progressbar",
+						"aria-label": `Uploading ${file.name}`,
+						"aria-valuenow": percent ?? void 0,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						className: "h-1 w-full overflow-hidden rounded-full bg-muted",
+						children: /* @__PURE__ */ jsx("div", {
+							"data-slot": "file-upload-progress",
+							className: "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+							style: { width: `${String(percent ?? 0)}%` }
+						})
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					status === "uploading" && onCancel ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onCancel(id),
+						children: "Cancel"
+					}) : null,
+					(status === "failed" || status === "cancelled") && onRetry ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onRetry(id),
+						children: "Retry"
+					}) : null,
+					onRemove ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onRemove(id),
+						"aria-label": `Remove ${file.name}`,
+						children: "Remove"
+					}) : null
+				]
+			})
+		]
 	});
 }
 function ItemButton({ className, ...props }) {

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

@@ -1 +1 @@
-{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { formatBytes, type QueuedFile, type UploadStatus } from \"./upload-queue\";\n\n/**\n * The visible half of uploading. The queue is in `upload-queue.ts` and is the\n * part worth owning.\n *\n * There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the\n * usual failure: a `div` with `role=\"button\"`, a keydown handler, and a file\n * picker that keyboard users can never reach. So the control here is a real\n * `<input type=\"file\">` with a real `<label>`. That is already operable by\n * keyboard, already announces itself, already opens the picker on Enter and\n * Space, and needs nothing added. Drag and drop is layered on top as a pointer\n * convenience, and every drop can also be done from the input.\n */\n\nconst STATUS_LABEL: Record<UploadStatus, string> = {\n  queued: \"Waiting\",\n  uploading: \"Uploading\",\n  done: \"Uploaded\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface FileUploadProps extends Omit<ComponentPropsWithRef<\"div\">, \"onDrop\"> {\n  /** Names the control. */\n  label: string;\n  onFiles: (files: File[]) => void;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shown under the prompt: accepted types, size limit. */\n  hint?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  className,\n  label,\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  hint,\n  children,\n  ...props\n}: FileUploadProps) {\n  const inputId = useId();\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n  const depth = useRef(0);\n\n  function handleDrop(event: DragEvent<HTMLDivElement>) {\n    event.preventDefault();\n    depth.current = 0;\n    setDragging(false);\n    if (disabled) return;\n\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));\n  }\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {/* dragenter/dragleave fire for every child element, so a plain boolean\n          flickers as the pointer crosses the prompt text. Counting depth is\n          what makes the highlight steady. */}\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={dragging || undefined}\n        onDragEnter={(event) => {\n          event.preventDefault();\n          depth.current += 1;\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => {\n          depth.current -= 1;\n          if (depth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(event) => {\n          event.preventDefault();\n        }}\n        onDrop={handleDrop}\n        className={cn(\n          \"rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center\",\n          \"transition-colors duration-[var(--duration-fast)]\",\n          dragging && \"border-primary bg-primary/5\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {/* The label is the control. Clicking it opens the picker, Enter and\n            Space activate it, and assistive technology already describes it. */}\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm\",\n            \"focus-within:ring-2 focus-within:ring-ring/55\",\n          )}\n        >\n          <span className=\"font-medium\">{label}</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Drop {multiple ? \"files\" : \"a file\"} here, or choose from your device\n          </span>\n          <input\n            id={inputId}\n            type=\"file\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            aria-describedby={hint ? hintId : undefined}\n            onChange={(event) => {\n              const chosen = [...(event.target.files ?? [])];\n              if (chosen.length > 0) onFiles(chosen);\n              // Reset, so choosing the same file twice fires change twice.\n              event.target.value = \"\";\n            }}\n            className=\"sr-only\"\n          />\n        </label>\n\n        {hint ? (\n          <p id={hintId} className=\"mt-2 text-xs text-muted-foreground\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n\n      {children}\n    </div>\n  );\n}\n\nexport interface FileUploadListProps extends ComponentPropsWithRef<\"ul\"> {\n  files: QueuedFile[];\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadList({\n  className,\n  files,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadListProps) {\n  if (files.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"file-upload-list\"\n      className={cn(\"flex list-none flex-col gap-2\", className)}\n      {...props}\n    >\n      {files.map((entry) => (\n        <FileUploadItem\n          key={entry.id}\n          entry={entry}\n          onCancel={onCancel}\n          onRetry={onRetry}\n          onRemove={onRemove}\n        />\n      ))}\n    </ul>\n  );\n}\n\nexport interface FileUploadItemProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  entry: QueuedFile;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadItem({\n  className,\n  entry,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadItemProps) {\n  const { id, file, status, progress, error } = entry;\n  const percent = progress === null ? null : Math.round(progress * 100);\n\n  return (\n    <li\n      data-slot=\"file-upload-item\"\n      data-status={status}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border px-3 py-2 text-sm\",\n        status === \"failed\"\n          ? \"border-destructive/40 bg-destructive/5\"\n          : \"border-border bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"truncate font-medium\">{file.name}</span>\n          <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n            {formatBytes(file.size)}\n          </span>\n        </div>\n\n        {/* Status in words, always. A bar at 60% with a red tint does not say\n            whether it is uploading, stalled or failed. */}\n        <p\n          className={cn(\n            \"text-xs\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {STATUS_LABEL[status]}\n          {status === \"uploading\" && percent !== null ? ` · ${String(percent)}%` : null}\n          {error ? ` · ${error}` : null}\n        </p>\n\n        {status === \"uploading\" ? (\n          <div\n            role=\"progressbar\"\n            aria-label={`Uploading ${file.name}`}\n            aria-valuenow={percent ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"h-1 w-full overflow-hidden rounded-full bg-muted\"\n          >\n            <div\n              data-slot=\"file-upload-progress\"\n              className=\"h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n              style={{ width: `${String(percent ?? 0)}%` }}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {status === \"uploading\" && onCancel ? (\n          <ItemButton onClick={() => onCancel(id)}>Cancel</ItemButton>\n        ) : null}\n        {(status === \"failed\" || status === \"cancelled\") && onRetry ? (\n          <ItemButton onClick={() => onRetry(id)}>Retry</ItemButton>\n        ) : null}\n        {onRemove ? (\n          <ItemButton onClick={() => onRemove(id)} aria-label={`Remove ${file.name}`}>\n            Remove\n          </ItemButton>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nfunction ItemButton({ className, ...props }: ComponentPropsWithRef<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n        \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * One sentence covering the whole queue, announced politely.\n *\n * Per-file live regions would talk over each other the moment two uploads run\n * at once; one summary of the set is readable where six competing ones are not.\n */\nexport function FileUploadStatus({\n  className,\n  stats,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & {\n  stats: { total: number; active: number; done: number; failed: number };\n}) {\n  const { total, active, done, failed } = stats;\n\n  // Progress through the set, not a count of what happens to be in flight.\n  // \"3 of 5 uploading\" is wrong the moment a concurrency limit holds two back,\n  // and it never tells the reader how much of the job is left.\n  const message =\n    total === 0\n      ? \"\"\n      : active > 0\n        ? `${String(done)} of ${String(total)} uploaded`\n        : failed > 0\n          ? `${String(done)} uploaded, ${String(failed)} failed`\n          : `${String(done)} uploaded`;\n\n  return (\n    <p\n      data-slot=\"file-upload-status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"file-upload.js","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI AnimatedFileUpload (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\n\nimport {\n  useCallback,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type DragEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { disabledStyles, focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\nimport { formatBytes, type QueuedFile, type UploadStatus } from \"./upload-queue\";\n\n/**\n * The visible half of uploading. The queue is in `upload-queue.ts` and is the\n * part worth owning.\n *\n * There is no dropzone pattern in the WAI-ARIA APG, and inventing one is the\n * usual failure: a `div` with `role=\"button\"`, a keydown handler, and a file\n * picker that keyboard users can never reach. So the control here is a real\n * `<input type=\"file\">` with a real `<label>`. That is already operable by\n * keyboard, already announces itself, already opens the picker on Enter and\n * Space, and needs nothing added. Drag and drop is layered on top as a pointer\n * convenience, and every drop can also be done from the input.\n */\n\n/*\n * Motion (SmoothUI's AnimatedFileUpload): the dropzone swells slightly while a\n * drag is over it and an optional icon lifts; queued files slide in from the\n * inline start, and with `animateExit` slide out toward the inline end.\n * Keyframes ship with the component (ADR 0014) on duration tokens, so reduced\n * motion collapses them; the travel direction follows :dir().\n */\nconst ITEM_KEYFRAMES = `\n@keyframes dowel-file-upload-in{from{opacity:0;transform:translateX(var(--dowel-file-upload-x)) scale(0.95)}}\n@keyframes dowel-file-upload-out{to{opacity:0;transform:translateX(calc(-1.5 * var(--dowel-file-upload-x))) scale(0.95)}}\n[data-slot=\"file-upload-item\"]{--dowel-file-upload-x:-1rem;animation:dowel-file-upload-in var(--duration-normal) var(--ease-out-quint)}\n[data-slot=\"file-upload-item\"]:dir(rtl){--dowel-file-upload-x:1rem}\n[data-slot=\"file-upload-item\"][data-state=\"closed\"]{animation:dowel-file-upload-out var(--duration-fast) var(--ease-in-quint) forwards}\n`;\n\n/** Clears departing rows whose animation never runs (hidden, unstyled). */\nconst EXIT_FALLBACK_MS = 1000;\n\nconst STATUS_LABEL: Record<UploadStatus, string> = {\n  queued: \"Waiting\",\n  uploading: \"Uploading\",\n  done: \"Uploaded\",\n  failed: \"Failed\",\n  cancelled: \"Cancelled\",\n};\n\nexport interface FileUploadProps extends Omit<ComponentPropsWithRef<\"div\">, \"onDrop\"> {\n  /** Names the control. */\n  label: string;\n  onFiles: (files: File[]) => void;\n  accept?: string;\n  multiple?: boolean;\n  disabled?: boolean;\n  /** Shown under the prompt: accepted types, size limit. */\n  hint?: ReactNode;\n  /**\n   * A decorative icon above the prompt, hidden from assistive technology. It\n   * lifts while a drag is over the dropzone.\n   */\n  icon?: ReactNode;\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  className,\n  label,\n  onFiles,\n  accept,\n  multiple = true,\n  disabled = false,\n  hint,\n  icon,\n  children,\n  ...props\n}: FileUploadProps) {\n  const inputId = useId();\n  const hintId = useId();\n  const [dragging, setDragging] = useState(false);\n  const depth = useRef(0);\n\n  function handleDrop(event: DragEvent<HTMLDivElement>) {\n    event.preventDefault();\n    depth.current = 0;\n    setDragging(false);\n    if (disabled) return;\n\n    const dropped = [...event.dataTransfer.files];\n    if (dropped.length > 0) onFiles(multiple ? dropped : dropped.slice(0, 1));\n  }\n\n  return (\n    <div data-slot=\"file-upload\" className={cn(\"flex flex-col gap-3\", className)} {...props}>\n      {/* dragenter/dragleave fire for every child element, so a plain boolean\n          flickers as the pointer crosses the prompt text. Counting depth is\n          what makes the highlight steady. */}\n      <div\n        data-slot=\"file-upload-dropzone\"\n        data-dragging={dragging || undefined}\n        onDragEnter={(event) => {\n          event.preventDefault();\n          depth.current += 1;\n          if (!disabled) setDragging(true);\n        }}\n        onDragLeave={() => {\n          depth.current -= 1;\n          if (depth.current <= 0) setDragging(false);\n        }}\n        onDragOver={(event) => {\n          event.preventDefault();\n        }}\n        onDrop={handleDrop}\n        className={cn(\n          \"rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center\",\n          \"transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n          dragging && \"scale-[1.02] border-primary bg-primary/5\",\n          disabled && \"pointer-events-none opacity-55\",\n        )}\n      >\n        {icon ? (\n          <div\n            aria-hidden=\"true\"\n            data-slot=\"file-upload-icon\"\n            className={cn(\n              \"mx-auto mb-2 flex w-fit text-muted-foreground [&_svg:not([class*='size-'])]:size-8\",\n              \"transition-[color,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]\",\n              dragging && \"-translate-y-1 scale-115 text-foreground\",\n            )}\n          >\n            {icon}\n          </div>\n        ) : null}\n\n        {/* The label is the control. Clicking it opens the picker, Enter and\n            Space activate it, and assistive technology already describes it. */}\n        <label\n          htmlFor={inputId}\n          className={cn(\n            \"inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm\",\n            \"focus-within:ring-2 focus-within:ring-ring/55\",\n          )}\n        >\n          <span className=\"font-medium\">{label}</span>\n          <span className=\"text-xs text-muted-foreground\">\n            Drop {multiple ? \"files\" : \"a file\"} here, or choose from your device\n          </span>\n          <input\n            id={inputId}\n            type=\"file\"\n            accept={accept}\n            multiple={multiple}\n            disabled={disabled}\n            aria-describedby={hint ? hintId : undefined}\n            onChange={(event) => {\n              const chosen = [...(event.target.files ?? [])];\n              if (chosen.length > 0) onFiles(chosen);\n              // Reset, so choosing the same file twice fires change twice.\n              event.target.value = \"\";\n            }}\n            className=\"sr-only\"\n          />\n        </label>\n\n        {hint ? (\n          <p id={hintId} className=\"mt-2 text-xs text-muted-foreground\">\n            {hint}\n          </p>\n        ) : null}\n      </div>\n\n      {children}\n    </div>\n  );\n}\n\nexport interface FileUploadListProps extends ComponentPropsWithRef<\"ul\"> {\n  files: QueuedFile[];\n  /**\n   * Lets a removed file slide out before it leaves the DOM. The departing row\n   * is `aria-hidden`, inert and has no buttons. Off by default, because the old\n   * row briefly remains in the markup.\n   */\n  animateExit?: boolean;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\ninterface LeavingEntry {\n  entry: QueuedFile;\n  index: number;\n}\n\nexport function FileUploadList({\n  className,\n  files,\n  onCancel,\n  onRetry,\n  onRemove,\n  animateExit = false,\n  ...props\n}: FileUploadListProps) {\n  // Derived from the previous render rather than in an effect, so a departing\n  // row is in place on the same commit its live one leaves.\n  const [previous, setPrevious] = useState(files);\n  const [leaving, setLeaving] = useState<LeavingEntry[]>([]);\n  if (previous !== files) {\n    setPrevious(files);\n    const present = new Set(files.map((entry) => entry.id));\n    const gone = animateExit\n      ? previous.flatMap((entry, index) => (present.has(entry.id) ? [] : [{ entry, index }]))\n      : [];\n    setLeaving((current) => [\n      ...current.filter(\n        (item) =>\n          !present.has(item.entry.id) && !gone.some((g) => g.entry.id === item.entry.id),\n      ),\n      ...gone,\n    ]);\n  }\n\n  useEffect(() => {\n    if (leaving.length === 0) return;\n    const timer = setTimeout(() => {\n      setLeaving([]);\n    }, EXIT_FALLBACK_MS);\n    return () => {\n      clearTimeout(timer);\n    };\n  }, [leaving]);\n\n  // A native listener: React maps onAnimationEnd to a vendor-prefixed name\n  // wherever AnimationEvent is missing. React 19 runs the returned cleanup.\n  const listenForExitEnd = useCallback(\n    (id: string) => (element: HTMLLIElement | null) => {\n      if (!element) return;\n      const onEnd = (event: Event) => {\n        if (event.target !== element) return;\n        setLeaving((current) => current.filter((item) => item.entry.id !== id));\n      };\n      element.addEventListener(\"animationend\", onEnd);\n      return () => {\n        element.removeEventListener(\"animationend\", onEnd);\n      };\n    },\n    [],\n  );\n\n  const rows: { entry: QueuedFile; gone: boolean }[] = files.map((entry) => ({\n    entry,\n    gone: false,\n  }));\n  for (const item of [...leaving].sort((a, b) => a.index - b.index)) {\n    rows.splice(Math.min(item.index, rows.length), 0, { entry: item.entry, gone: true });\n  }\n\n  if (rows.length === 0) return null;\n\n  return (\n    <ul\n      data-slot=\"file-upload-list\"\n      className={cn(\"flex list-none flex-col gap-2\", className)}\n      {...props}\n    >\n      {rows.map(({ entry, gone }) =>\n        gone ? (\n          <FileUploadItem\n            key={`gone:${entry.id}`}\n            ref={listenForExitEnd(entry.id)}\n            entry={entry}\n            data-state=\"closed\"\n            aria-hidden=\"true\"\n            inert\n          />\n        ) : (\n          <FileUploadItem\n            key={entry.id}\n            entry={entry}\n            onCancel={onCancel}\n            onRetry={onRetry}\n            onRemove={onRemove}\n          />\n        ),\n      )}\n    </ul>\n  );\n}\n\nexport interface FileUploadItemProps extends Omit<ComponentPropsWithRef<\"li\">, \"children\"> {\n  entry: QueuedFile;\n  onCancel?: (id: string) => void;\n  onRetry?: (id: string) => void;\n  onRemove?: (id: string) => void;\n}\n\nexport function FileUploadItem({\n  className,\n  entry,\n  onCancel,\n  onRetry,\n  onRemove,\n  ...props\n}: FileUploadItemProps) {\n  const { id, file, status, progress, error } = entry;\n  const percent = progress === null ? null : Math.round(progress * 100);\n\n  return (\n    <li\n      data-slot=\"file-upload-item\"\n      data-status={status}\n      className={cn(\n        \"flex items-center gap-3 rounded-lg border px-3 py-2 text-sm\",\n        status === \"failed\"\n          ? \"border-destructive/40 bg-destructive/5\"\n          : \"border-border bg-card\",\n        className,\n      )}\n      {...props}\n    >\n      <style href=\"dowel-file-upload\" precedence=\"dowel\">\n        {ITEM_KEYFRAMES}\n      </style>\n      <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n        <div className=\"flex items-baseline justify-between gap-2\">\n          <span className=\"truncate font-medium\">{file.name}</span>\n          <span className=\"shrink-0 text-xs text-muted-foreground tabular-nums\">\n            {formatBytes(file.size)}\n          </span>\n        </div>\n\n        {/* Status in words, always. A bar at 60% with a red tint does not say\n            whether it is uploading, stalled or failed. */}\n        <p\n          className={cn(\n            \"text-xs\",\n            status === \"failed\" ? \"text-destructive\" : \"text-muted-foreground\",\n          )}\n        >\n          {STATUS_LABEL[status]}\n          {status === \"uploading\" && percent !== null ? ` · ${String(percent)}%` : null}\n          {error ? ` · ${error}` : null}\n        </p>\n\n        {status === \"uploading\" ? (\n          <div\n            role=\"progressbar\"\n            aria-label={`Uploading ${file.name}`}\n            aria-valuenow={percent ?? undefined}\n            aria-valuemin={0}\n            aria-valuemax={100}\n            className=\"h-1 w-full overflow-hidden rounded-full bg-muted\"\n          >\n            <div\n              data-slot=\"file-upload-progress\"\n              className=\"h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\"\n              style={{ width: `${String(percent ?? 0)}%` }}\n            />\n          </div>\n        ) : null}\n      </div>\n\n      <div className=\"flex shrink-0 items-center gap-1\">\n        {status === \"uploading\" && onCancel ? (\n          <ItemButton onClick={() => onCancel(id)}>Cancel</ItemButton>\n        ) : null}\n        {(status === \"failed\" || status === \"cancelled\") && onRetry ? (\n          <ItemButton onClick={() => onRetry(id)}>Retry</ItemButton>\n        ) : null}\n        {onRemove ? (\n          <ItemButton onClick={() => onRemove(id)} aria-label={`Remove ${file.name}`}>\n            Remove\n          </ItemButton>\n        ) : null}\n      </div>\n    </li>\n  );\n}\n\nfunction ItemButton({ className, ...props }: ComponentPropsWithRef<\"button\">) {\n  return (\n    <button\n      type=\"button\"\n      className={cn(\n        \"rounded-md border border-input bg-background px-2 py-0.5 text-xs font-medium\",\n        \"transition-colors hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        disabledStyles,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/**\n * One sentence covering the whole queue, announced politely.\n *\n * Per-file live regions would talk over each other the moment two uploads run\n * at once; one summary of the set is readable where six competing ones are not.\n */\nexport function FileUploadStatus({\n  className,\n  stats,\n  ...props\n}: ComponentPropsWithRef<\"p\"> & {\n  stats: { total: number; active: number; done: number; failed: number };\n}) {\n  const { total, active, done, failed } = stats;\n\n  // Progress through the set, not a count of what happens to be in flight.\n  // \"3 of 5 uploading\" is wrong the moment a concurrency limit holds two back,\n  // and it never tells the reader how much of the job is left.\n  const message =\n    total === 0\n      ? \"\"\n      : active > 0\n        ? `${String(done)} of ${String(total)} uploaded`\n        : failed > 0\n          ? `${String(done)} uploaded, ${String(failed)} failed`\n          : `${String(done)} uploaded`;\n\n  return (\n    <p\n      data-slot=\"file-upload-status\"\n      aria-live=\"polite\"\n      className={cn(\"text-xs text-muted-foreground\", className)}\n      {...props}\n    >\n      {message}\n    </p>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwCA,MAAM,iBAAiB;;;;;;;;AASvB,MAAM,mBAAmB;AAEzB,MAAM,eAA6C;CACjD,QAAQ;CACR,WAAW;CACX,MAAM;CACN,QAAQ;CACR,WAAW;AACb;AAmBA,SAAgB,WAAW,EACzB,WACA,OACA,SACA,QACA,WAAW,MACX,WAAW,OACX,MACA,MACA,UACA,GAAG,SACe;CAClB,MAAM,UAAU,MAAM;CACtB,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,QAAQ,OAAO,CAAC;CAEtB,SAAS,WAAW,OAAkC;EACpD,MAAM,eAAe;EACrB,MAAM,UAAU;EAChB,YAAY,KAAK;EACjB,IAAI,UAAU;EAEd,MAAM,UAAU,CAAC,GAAG,MAAM,aAAa,KAAK;EAC5C,IAAI,QAAQ,SAAS,GAAG,QAAQ,WAAW,UAAU,QAAQ,MAAM,GAAG,CAAC,CAAC;CAC1E;CAEA,OACE,qBAAC,OAAD;EAAK,aAAU;EAAc,WAAW,GAAG,uBAAuB,SAAS;EAAG,GAAI;EAAlF,UAAA,CAIE,qBAAC,OAAD;GACE,aAAU;GACV,iBAAe,YAAY,KAAA;GAC3B,cAAc,UAAU;IACtB,MAAM,eAAe;IACrB,MAAM,WAAW;IACjB,IAAI,CAAC,UAAU,YAAY,IAAI;GACjC;GACA,mBAAmB;IACjB,MAAM,WAAW;IACjB,IAAI,MAAM,WAAW,GAAG,YAAY,KAAK;GAC3C;GACA,aAAa,UAAU;IACrB,MAAM,eAAe;GACvB;GACA,QAAQ;GACR,WAAW,GACT,0FACA,uHACA,YAAY,4CACZ,YAAY,gCACd;GArBF,UAAA;IAuBG,OACC,oBAAC,OAAD;KACE,eAAY;KACZ,aAAU;KACV,WAAW,GACT,sFACA,qGACA,YAAY,0CACd;KAEC,UAAA;IACE,CAAA,IACH;IAIJ,qBAAC,SAAD;KACE,SAAS;KACT,WAAW,GACT,uFACA,+CACF;KALF,UAAA;MAOE,oBAAC,QAAD;OAAM,WAAU;OAAe,UAAA;MAAY,CAAA;MAC3C,qBAAC,QAAD;OAAM,WAAU;OAAhB,UAAA;QAAgD;QACxC,WAAW,UAAU;QAAS;OAChC;;MACN,oBAAC,SAAD;OACE,IAAI;OACJ,MAAK;OACG;OACE;OACA;OACV,oBAAkB,OAAO,SAAS,KAAA;OAClC,WAAW,UAAU;QACnB,MAAM,SAAS,CAAC,GAAI,MAAM,OAAO,SAAS,CAAC,CAAE;QAC7C,IAAI,OAAO,SAAS,GAAG,QAAQ,MAAM;QAErC,MAAM,OAAO,QAAQ;OACvB;OACA,WAAU;MACX,CAAA;KACI;;IAEN,OACC,oBAAC,KAAD;KAAG,IAAI;KAAQ,WAAU;KACtB,UAAA;IACA,CAAA,IACD;GACD;EAEJ,CAAA,GAAA,QACE;;AAET;AAoBA,SAAgB,eAAe,EAC7B,WACA,OACA,UACA,SACA,UACA,cAAc,OACd,GAAG,SACmB;CAGtB,MAAM,CAAC,UAAU,eAAe,SAAS,KAAK;CAC9C,MAAM,CAAC,SAAS,cAAc,SAAyB,CAAC,CAAC;CACzD,IAAI,aAAa,OAAO;EACtB,YAAY,KAAK;EACjB,MAAM,UAAU,IAAI,IAAI,MAAM,KAAK,UAAU,MAAM,EAAE,CAAC;EACtD,MAAM,OAAO,cACT,SAAS,SAAS,OAAO,UAAW,QAAQ,IAAI,MAAM,EAAE,IAAI,CAAC,IAAI,CAAC;GAAE;GAAO;EAAM,CAAC,CAAE,IACpF,CAAC;EACL,YAAY,YAAY,CACtB,GAAG,QAAQ,QACR,SACC,CAAC,QAAQ,IAAI,KAAK,MAAM,EAAE,KAAK,CAAC,KAAK,MAAM,MAAM,EAAE,MAAM,OAAO,KAAK,MAAM,EAAE,CACjF,GACA,GAAG,IACL,CAAC;CACH;CAEA,gBAAgB;EACd,IAAI,QAAQ,WAAW,GAAG;EAC1B,MAAM,QAAQ,iBAAiB;GAC7B,WAAW,CAAC,CAAC;EACf,GAAG,gBAAgB;EACnB,aAAa;GACX,aAAa,KAAK;EACpB;CACF,GAAG,CAAC,OAAO,CAAC;CAIZ,MAAM,mBAAmB,aACtB,QAAgB,YAAkC;EACjD,IAAI,CAAC,SAAS;EACd,MAAM,SAAS,UAAiB;GAC9B,IAAI,MAAM,WAAW,SAAS;GAC9B,YAAY,YAAY,QAAQ,QAAQ,SAAS,KAAK,MAAM,OAAO,EAAE,CAAC;EACxE;EACA,QAAQ,iBAAiB,gBAAgB,KAAK;EAC9C,aAAa;GACX,QAAQ,oBAAoB,gBAAgB,KAAK;EACnD;CACF,GACA,CAAC,CACH;CAEA,MAAM,OAA+C,MAAM,KAAK,WAAW;EACzE;EACA,MAAM;CACR,EAAE;CACF,KAAK,MAAM,QAAQ,CAAC,GAAG,OAAO,CAAC,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,KAAK,GAC9D,KAAK,OAAO,KAAK,IAAI,KAAK,OAAO,KAAK,MAAM,GAAG,GAAG;EAAE,OAAO,KAAK;EAAO,MAAM;CAAK,CAAC;CAGrF,IAAI,KAAK,WAAW,GAAG,OAAO;CAE9B,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;EAEH,UAAA,KAAK,KAAK,EAAE,OAAO,WAClB,OACE,oBAAC,gBAAD;GAEE,KAAK,iBAAiB,MAAM,EAAE;GACvB;GACP,cAAW;GACX,eAAY;GACZ,OAAA;EACD,GANM,QAAQ,MAAM,IAMpB,IAED,oBAAC,gBAAD;GAES;GACG;GACD;GACC;EACX,GALM,MAAM,EAKZ,CAEL;CACE,CAAA;AAER;AASA,SAAgB,eAAe,EAC7B,WACA,OACA,UACA,SACA,UACA,GAAG,SACmB;CACtB,MAAM,EAAE,IAAI,MAAM,QAAQ,UAAU,UAAU;CAC9C,MAAM,UAAU,aAAa,OAAO,OAAO,KAAK,MAAM,WAAW,GAAG;CAEpE,OACE,qBAAC,MAAD;EACE,aAAU;EACV,eAAa;EACb,WAAW,GACT,+DACA,WAAW,WACP,2CACA,yBACJ,SACF;EACA,GAAI;EAVN,UAAA;GAYE,oBAAC,SAAD;IAAO,MAAK;IAAoB,YAAW;IACxC,UAAA;GACI,CAAA;GACP,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACE,qBAAC,OAAD;MAAK,WAAU;MAAf,UAAA,CACE,oBAAC,QAAD;OAAM,WAAU;OAAwB,UAAA,KAAK;MAAW,CAAA,GACxD,oBAAC,QAAD;OAAM,WAAU;OACb,UAAA,YAAY,KAAK,IAAI;MAClB,CAAA,CACH;;KAIL,qBAAC,KAAD;MACE,WAAW,GACT,WACA,WAAW,WAAW,qBAAqB,uBAC7C;MAJF,UAAA;OAMG,aAAa;OACb,WAAW,eAAe,YAAY,OAAO,MAAM,OAAO,OAAO,EAAE,KAAK;OACxE,QAAQ,MAAM,UAAU;MACxB;;KAEF,WAAW,cACV,oBAAC,OAAD;MACE,MAAK;MACL,cAAY,aAAa,KAAK;MAC9B,iBAAe,WAAW,KAAA;MAC1B,iBAAe;MACf,iBAAe;MACf,WAAU;MAEV,UAAA,oBAAC,OAAD;OACE,aAAU;OACV,WAAU;OACV,OAAO,EAAE,OAAO,GAAG,OAAO,WAAW,CAAC,EAAE,GAAG;MAC5C,CAAA;KACE,CAAA,IACH;IACD;;GAEL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACG,WAAW,eAAe,WACzB,oBAAC,YAAD;MAAY,eAAe,SAAS,EAAE;MAAG,UAAA;KAAkB,CAAA,IACzD;MACF,WAAW,YAAY,WAAW,gBAAgB,UAClD,oBAAC,YAAD;MAAY,eAAe,QAAQ,EAAE;MAAG,UAAA;KAAiB,CAAA,IACvD;KACH,WACC,oBAAC,YAAD;MAAY,eAAe,SAAS,EAAE;MAAG,cAAY,UAAU,KAAK;MAAQ,UAAA;KAEhE,CAAA,IACV;IACD;;EACH;;AAER;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA0C;CAC5E,OACE,oBAAC,UAAD;EACE,MAAK;EACL,WAAW,GACT,gFACA,kEACA,WACA,gBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;;;;;;AAQA,SAAgB,iBAAiB,EAC/B,WACA,OACA,GAAG,SAGF;CACD,MAAM,EAAE,OAAO,QAAQ,MAAM,WAAW;CAKxC,MAAM,UACJ,UAAU,IACN,KACA,SAAS,IACP,GAAG,OAAO,IAAI,EAAE,MAAM,OAAO,KAAK,EAAE,aACpC,SAAS,IACP,GAAG,OAAO,IAAI,EAAE,aAAa,OAAO,MAAM,EAAE,WAC5C,GAAG,OAAO,IAAI,EAAE;CAE1B,OACE,oBAAC,KAAD;EACE,aAAU;EACV,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;EAEH,UAAA;CACA,CAAA;AAEP"}

package/dist/components/file-upload/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: [],
 	registryDependencies: [],
 	files: ["upload-queue.ts", "file-upload.tsx"],
-	a11y: "The APG has no dropzone pattern, and inventing one is the usual failure — a div with role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here is a real input[type=file] with a real label, which is already operable, already announced, and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer convenience layered on top; every drop can also be done from the input. Each uploading file gets a progressbar named after it, status is always stated in words as well as drawn, and one polite live region summarises the whole queue rather than six per-file regions talking over each other."
+	a11y: "The APG has no dropzone pattern, and inventing one is the usual failure — a div with role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here is a real input[type=file] with a real label, which is already operable, already announced, and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer convenience layered on top; every drop can also be done from the input. Each uploading file gets a progressbar named after it, status is always stated in words as well as drawn, and one polite live region summarises the whole queue rather than six per-file regions talking over each other. The optional dropzone icon is aria-hidden. With animateExit, a removed row lingers only as an aria-hidden, inert copy with no buttons while it animates out."
 });
 //#endregion
 export { meta };

package/dist/components/file-upload/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/file-upload/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"file-upload\",\n  title: \"File Upload\",\n  description: \"A dropzone over a real file input, plus the upload queue nobody ships.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"upload-queue.ts\", \"file-upload.tsx\"],\n  a11y:\n    \"The APG has no dropzone pattern, and inventing one is the usual failure — a div with \" +\n    'role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here ' +\n    \"is a real input[type=file] with a real label, which is already operable, already announced, \" +\n    \"and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer \" +\n    \"convenience layered on top; every drop can also be done from the input. Each uploading file \" +\n    \"gets a progressbar named after it, status is always stated in words as well as drawn, and \" +\n    \"one polite live region summarises the whole queue rather than six per-file regions talking \" +\n    \"over each other.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,iBAAiB;CAC5C,MACE;AAQJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/file-upload/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"file-upload\",\n  title: \"File Upload\",\n  description: \"A dropzone over a real file input, plus the upload queue nobody ships.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [],\n  registryDependencies: [],\n  files: [\"upload-queue.ts\", \"file-upload.tsx\"],\n  a11y:\n    \"The APG has no dropzone pattern, and inventing one is the usual failure — a div with \" +\n    'role=\"button\", a keydown handler, and a picker keyboard users never reach. The control here ' +\n    \"is a real input[type=file] with a real label, which is already operable, already announced, \" +\n    \"and opens the picker on Enter and Space with nothing added. Drag and drop is a pointer \" +\n    \"convenience layered on top; every drop can also be done from the input. Each uploading file \" +\n    \"gets a progressbar named after it, status is always stated in words as well as drawn, and \" +\n    \"one polite live region summarises the whole queue rather than six per-file regions talking \" +\n    \"over each other.\" +\n    \" The optional dropzone icon is aria-hidden. With animateExit, a removed row lingers only as an aria-hidden, inert copy with no buttons while it animates out.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC;CACf,sBAAsB,CAAC;CACvB,OAAO,CAAC,mBAAmB,iBAAiB;CAC5C,MACE;AASJ,CAAC"}

package/dist/components/focus-blur-links/focus-blur-links.d.ts

@@ -0,0 +1,25 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/focus-blur-links/focus-blur-links.d.ts
+declare const focusBlurLinksVariants: (props?: ({
+  size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface FocusBlurLinksProps extends ComponentPropsWithRef<"div">, VariantProps<typeof focusBlurLinksVariants> {
+  /** Blur applied to the other links, in pixels. */
+  blurAmount?: number;
+  /** Opacity of the other links, from 0 to 1. */
+  dimOpacity?: number;
+  /** Draws a dashed bracket around the emphasised link. */
+  showBrackets?: boolean;
+}
+/** A row of links that blurs every link but the one being pointed at or focused. */
+declare function FocusBlurLinks({ className, size, blurAmount, dimOpacity, showBrackets, style, children, ...props }: FocusBlurLinksProps): import("react").JSX.Element;
+interface FocusBlurLinkProps extends ComponentPropsWithRef<"a"> {
+  /** Renders the child element — a router `Link`, say — instead of an `<a>`. */
+  asChild?: boolean;
+}
+/** One link in a `FocusBlurLinks` row. */
+declare function FocusBlurLink({ className, asChild, children, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }: FocusBlurLinkProps): import("react").JSX.Element;
+//#endregion
+export { FocusBlurLink, FocusBlurLinkProps, FocusBlurLinks, FocusBlurLinksProps, focusBlurLinksVariants };
+//# sourceMappingURL=focus-blur-links.d.ts.map

package/dist/components/focus-blur-links/focus-blur-links.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-blur-links.d.ts","names":[],"sources":["../../../src/components/focus-blur-links/focus-blur-links.tsx"],"mappings":";;;cAgDM,yBAAsB;;6CAW1B;UAEe,4BACP,8BAA8B,oBAAoB;;EAE1D;;EAEA;;EAEA;;;iBAIc,iBACd,WACA,MACA,YACA,YACA,cACA,OACA,aACG,SACF,sCAAmB,IAAA;UA+BL,2BAA2B;;EAE1C;;;iBAIc,gBACd,WACA,SACA,UACA,gBACA,gBACA,eACA,SACA,WACG,SACF,qCAAkB,IAAA"}

package/dist/components/focus-blur-links/focus-blur-links.js

@@ -0,0 +1,92 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Slot } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { createContext, useContext, useId, useMemo, useRef, useState } from "react";
+//#region src/components/focus-blur-links/focus-blur-links.tsx
+const FocusBlurContext = createContext(null);
+function useFocusBlur() {
+	const context = useContext(FocusBlurContext);
+	if (!context) throw new Error("FocusBlurLink must be used inside FocusBlurLinks.");
+	return context;
+}
+const focusBlurLinksVariants = cva("flex flex-wrap items-center justify-center font-semibold", {
+	variants: { size: {
+		sm: "gap-4 text-sm",
+		md: "gap-6 text-lg",
+		lg: "gap-8 text-2xl"
+	} },
+	defaultVariants: { size: "md" }
+});
+/** A row of links that blurs every link but the one being pointed at or focused. */
+function FocusBlurLinks({ className, size, blurAmount = 4, dimOpacity = .4, showBrackets = true, style, children, ...props }) {
+	const [hovered, setHovered] = useState(null);
+	const [focused, setFocused] = useState(null);
+	const activeId = hovered ?? focused;
+	const value = useMemo(() => ({
+		activeId,
+		setHovered,
+		setFocused,
+		showBrackets
+	}), [activeId, showBrackets]);
+	return /* @__PURE__ */ jsx(FocusBlurContext, {
+		value,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "focus-blur-links",
+			"data-state": activeId ? "focused" : "idle",
+			className: cn(focusBlurLinksVariants({ size }), className),
+			style: {
+				"--focus-blur-amount": `${String(blurAmount)}px`,
+				"--focus-blur-opacity": String(dimOpacity),
+				...style
+			},
+			...props,
+			children
+		})
+	});
+}
+/** One link in a `FocusBlurLinks` row. */
+function FocusBlurLink({ className, asChild = false, children, onPointerEnter, onPointerLeave, onPointerDown, onFocus, onBlur, ...props }) {
+	const { activeId, setHovered, setFocused, showBrackets } = useFocusBlur();
+	const id = useId();
+	const pressing = useRef(false);
+	const Comp = asChild ? Slot.Root : "a";
+	return /* @__PURE__ */ jsxs(Comp, {
+		"data-slot": "focus-blur-link",
+		"data-state": activeId === id ? "active" : activeId ? "dimmed" : "idle",
+		className: cn("group/link relative rounded-sm no-underline select-none", "transition-[filter,opacity,color] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", "data-[state=active]:text-primary", "data-[state=dimmed]:opacity-[var(--focus-blur-opacity)] data-[state=dimmed]:blur-[var(--focus-blur-amount)]", focusRing, className),
+		onPointerEnter: (event) => {
+			onPointerEnter?.(event);
+			setHovered(id);
+		},
+		onPointerLeave: (event) => {
+			onPointerLeave?.(event);
+			setHovered(null);
+		},
+		onPointerDown: (event) => {
+			onPointerDown?.(event);
+			pressing.current = true;
+		},
+		onFocus: (event) => {
+			onFocus?.(event);
+			if (!pressing.current) setFocused(id);
+			pressing.current = false;
+		},
+		onBlur: (event) => {
+			onBlur?.(event);
+			setFocused(null);
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(Slot.Slottable, { children }), showBrackets ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			"data-slot": "focus-blur-bracket",
+			className: cn("pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg border-2 border-dashed border-border", "scale-130 opacity-0 transition-[opacity,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]", "group-data-[state=active]/link:scale-110 group-data-[state=active]/link:opacity-100")
+		}) : null]
+	});
+}
+//#endregion
+export { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants };
+
+//# sourceMappingURL=focus-blur-links.js.map

package/dist/components/focus-blur-links/focus-blur-links.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-blur-links.js","names":[],"sources":["../../../src/components/focus-blur-links/focus-blur-links.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from amicro (MIT, © 2026 Syed Subhan Uddin). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Slot } from \"radix-ui\";\nimport {\n  createContext,\n  useContext,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A row of links where the one under the pointer — or under keyboard focus —\n * stays sharp and the rest blur and dim. The source tracked hover only; focus\n * drives the same state here, because a keyboard user deserves the same\n * emphasis. Pointer takes precedence while it is over a link, and keyboard\n * focus holds the effect once the pointer has gone.\n *\n * The blur is decoration: it never hides a link from assistive technology,\n * and the transition stops under reduced motion (the blur itself remains, as\n * it is a state, not movement).\n */\n\ninterface FocusBlurContextValue {\n  activeId: string | null;\n  setHovered: (id: string | null) => void;\n  setFocused: (id: string | null) => void;\n  showBrackets: boolean;\n}\n\nconst FocusBlurContext = createContext<FocusBlurContextValue | null>(null);\n\nfunction useFocusBlur(): FocusBlurContextValue {\n  const context = useContext(FocusBlurContext);\n  if (!context) throw new Error(\"FocusBlurLink must be used inside FocusBlurLinks.\");\n  return context;\n}\n\nconst focusBlurLinksVariants = cva(\"flex flex-wrap items-center justify-center font-semibold\", {\n  variants: {\n    size: {\n      sm: \"gap-4 text-sm\",\n      md: \"gap-6 text-lg\",\n      lg: \"gap-8 text-2xl\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface FocusBlurLinksProps\n  extends ComponentPropsWithRef<\"div\">, VariantProps<typeof focusBlurLinksVariants> {\n  /** Blur applied to the other links, in pixels. */\n  blurAmount?: number;\n  /** Opacity of the other links, from 0 to 1. */\n  dimOpacity?: number;\n  /** Draws a dashed bracket around the emphasised link. */\n  showBrackets?: boolean;\n}\n\n/** A row of links that blurs every link but the one being pointed at or focused. */\nexport function FocusBlurLinks({\n  className,\n  size,\n  blurAmount = 4,\n  dimOpacity = 0.4,\n  showBrackets = true,\n  style,\n  children,\n  ...props\n}: FocusBlurLinksProps) {\n  const [hovered, setHovered] = useState<string | null>(null);\n  const [focused, setFocused] = useState<string | null>(null);\n  const activeId = hovered ?? focused;\n\n  const value = useMemo(\n    () => ({ activeId, setHovered, setFocused, showBrackets }),\n    [activeId, showBrackets],\n  );\n\n  return (\n    <FocusBlurContext value={value}>\n      <div\n        data-slot=\"focus-blur-links\"\n        data-state={activeId ? \"focused\" : \"idle\"}\n        className={cn(focusBlurLinksVariants({ size }), className)}\n        style={\n          {\n            \"--focus-blur-amount\": `${String(blurAmount)}px`,\n            \"--focus-blur-opacity\": String(dimOpacity),\n            ...style,\n          } as CSSProperties\n        }\n        {...props}\n      >\n        {children}\n      </div>\n    </FocusBlurContext>\n  );\n}\n\nexport interface FocusBlurLinkProps extends ComponentPropsWithRef<\"a\"> {\n  /** Renders the child element — a router `Link`, say — instead of an `<a>`. */\n  asChild?: boolean;\n}\n\n/** One link in a `FocusBlurLinks` row. */\nexport function FocusBlurLink({\n  className,\n  asChild = false,\n  children,\n  onPointerEnter,\n  onPointerLeave,\n  onPointerDown,\n  onFocus,\n  onBlur,\n  ...props\n}: FocusBlurLinkProps) {\n  const { activeId, setHovered, setFocused, showBrackets } = useFocusBlur();\n  const id = useId();\n  // A click focuses the link too; only keyboard focus should hold the effect\n  // after the pointer leaves, so the origin of focus is tracked by hand.\n  const pressing = useRef(false);\n  const Comp = asChild ? Slot.Root : \"a\";\n  const state = activeId === id ? \"active\" : activeId ? \"dimmed\" : \"idle\";\n\n  return (\n    <Comp\n      data-slot=\"focus-blur-link\"\n      data-state={state}\n      className={cn(\n        \"group/link relative rounded-sm no-underline select-none\",\n        \"transition-[filter,opacity,color] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n        \"data-[state=active]:text-primary\",\n        \"data-[state=dimmed]:opacity-[var(--focus-blur-opacity)] data-[state=dimmed]:blur-[var(--focus-blur-amount)]\",\n        focusRing,\n        className,\n      )}\n      onPointerEnter={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerEnter?.(event);\n        setHovered(id);\n      }}\n      onPointerLeave={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerLeave?.(event);\n        setHovered(null);\n      }}\n      onPointerDown={(event: PointerEvent<HTMLAnchorElement>) => {\n        onPointerDown?.(event);\n        pressing.current = true;\n      }}\n      onFocus={(event: FocusEvent<HTMLAnchorElement>) => {\n        onFocus?.(event);\n        if (!pressing.current) setFocused(id);\n        pressing.current = false;\n      }}\n      onBlur={(event: FocusEvent<HTMLAnchorElement>) => {\n        onBlur?.(event);\n        setFocused(null);\n      }}\n      {...props}\n    >\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {showBrackets ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"focus-blur-bracket\"\n          className={cn(\n            \"pointer-events-none absolute -inset-x-2 -inset-y-1 rounded-lg border-2 border-dashed border-border\",\n            \"scale-130 opacity-0 transition-[opacity,scale] duration-[var(--duration-slow)] ease-[var(--ease-overshoot)]\",\n            \"group-data-[state=active]/link:scale-110 group-data-[state=active]/link:opacity-100\",\n          )}\n        />\n      ) : null}\n    </Comp>\n  );\n}\n\nexport { focusBlurLinksVariants };\n"],"mappings":";;;;;;;;AAwCA,MAAM,mBAAmB,cAA4C,IAAI;AAEzE,SAAS,eAAsC;CAC7C,MAAM,UAAU,WAAW,gBAAgB;CAC3C,IAAI,CAAC,SAAS,MAAM,IAAI,MAAM,mDAAmD;CACjF,OAAO;AACT;AAEA,MAAM,yBAAyB,IAAI,4DAA4D;CAC7F,UAAU,EACR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EACf,MAAM,KACR;AACF,CAAC;;AAaD,SAAgB,eAAe,EAC7B,WACA,MACA,aAAa,GACb,aAAa,IACb,eAAe,MACf,OACA,UACA,GAAG,SACmB;CACtB,MAAM,CAAC,SAAS,cAAc,SAAwB,IAAI;CAC1D,MAAM,CAAC,SAAS,cAAc,SAAwB,IAAI;CAC1D,MAAM,WAAW,WAAW;CAE5B,MAAM,QAAQ,eACL;EAAE;EAAU;EAAY;EAAY;CAAa,IACxD,CAAC,UAAU,YAAY,CACzB;CAEA,OACE,oBAAC,kBAAD;EAAyB;EACvB,UAAA,oBAAC,OAAD;GACE,aAAU;GACV,cAAY,WAAW,YAAY;GACnC,WAAW,GAAG,uBAAuB,EAAE,KAAK,CAAC,GAAG,SAAS;GACzD,OACE;IACE,uBAAuB,GAAG,OAAO,UAAU,EAAE;IAC7C,wBAAwB,OAAO,UAAU;IACzC,GAAG;GACL;GAEF,GAAI;GAEH;EACE,CAAA;CACW,CAAA;AAEtB;;AAQA,SAAgB,cAAc,EAC5B,WACA,UAAU,OACV,UACA,gBACA,gBACA,eACA,SACA,QACA,GAAG,SACkB;CACrB,MAAM,EAAE,UAAU,YAAY,YAAY,iBAAiB,aAAa;CACxE,MAAM,KAAK,MAAM;CAGjB,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,OAAO,UAAU,KAAK,OAAO;CAGnC,OACE,qBAAC,MAAD;EACE,aAAU;EACV,cALU,aAAa,KAAK,WAAW,WAAW,WAAW;EAM7D,WAAW,GACT,2DACA,kGACA,oCACA,+GACA,WACA,SACF;EACA,iBAAiB,UAA2C;GAC1D,iBAAiB,KAAK;GACtB,WAAW,EAAE;EACf;EACA,iBAAiB,UAA2C;GAC1D,iBAAiB,KAAK;GACtB,WAAW,IAAI;EACjB;EACA,gBAAgB,UAA2C;GACzD,gBAAgB,KAAK;GACrB,SAAS,UAAU;EACrB;EACA,UAAU,UAAyC;GACjD,UAAU,KAAK;GACf,IAAI,CAAC,SAAS,SAAS,WAAW,EAAE;GACpC,SAAS,UAAU;EACrB;EACA,SAAS,UAAyC;GAChD,SAAS,KAAK;GACd,WAAW,IAAI;EACjB;EACA,GAAI;EAhCN,UAAA,CAkCE,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,GACzC,eACC,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAW,GACT,sGACA,+GACA,qFACF;EACD,CAAA,IACC,IACA;;AAEV"}

package/dist/components/focus-blur-links/index.d.ts

@@ -0,0 +1,2 @@
+import { FocusBlurLink, FocusBlurLinkProps, FocusBlurLinks, FocusBlurLinksProps, focusBlurLinksVariants } from "./focus-blur-links.js";
+export { FocusBlurLink, type FocusBlurLinkProps, FocusBlurLinks, type FocusBlurLinksProps, focusBlurLinksVariants };

package/dist/components/focus-blur-links/index.js

@@ -0,0 +1,2 @@
+import { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants } from "./focus-blur-links.js";
+export { FocusBlurLink, FocusBlurLinks, focusBlurLinksVariants };

package/dist/components/focus-blur-links/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/focus-blur-links/meta.ts
+const meta = defineMeta({
+	name: "focus-blur-links",
+	title: "Focus Blur Links",
+	description: "A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.",
+	category: "navigation",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["focus-blur-links.tsx"],
+	a11y: "Every item is a real link (or your router's link via asChild). Keyboard focus triggers the same emphasis as hover and holds it after the pointer leaves; focus from a click does not. The blur is visual only — dimmed links stay in the accessibility tree and remain focusable. Wrap the row in a <nav aria-label> when it is site navigation."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/focus-blur-links/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/focus-blur-links/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"focus-blur-links\",\n  title: \"Focus Blur Links\",\n  description:\n    \"A row of links where hovering or focusing one blurs and dims the rest, with an optional dashed bracket.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"focus-blur-links.tsx\"],\n  a11y:\n    \"Every item is a real link (or your router's link via asChild). Keyboard focus triggers the same emphasis as \" +\n    \"hover and holds it after the pointer leaves; focus from a click does not. The blur is visual only — dimmed \" +\n    \"links stay in the accessibility tree and remain focusable. Wrap the row in a <nav aria-label> when it is \" +\n    \"site navigation.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAIJ,CAAC"}