@viax.io/uxm 4.36.0

package/dist/ui/field-error/index.d.ts

@@ -0,0 +1,2 @@
+export * from './field-error.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/field-error/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/field-error/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/ui/field-error/index.js

@@ -0,0 +1,2 @@
+export * from "./field-error.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/field-error/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/field-error/index.ts"],"sourcesContent":["export * from './field-error';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/file-upload/file-upload-preview.cjs

@@ -0,0 +1,157 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var file_upload_preview_exports = {};
+__export(file_upload_preview_exports, {
+  FileUploadPreview: () => FileUploadPreview
+});
+module.exports = __toCommonJS(file_upload_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_ui = require("../../ui/index.cjs");
+function buildVars(styles) {
+  return {
+    // Default surface
+    "--uxm-file-upload-bg": styles.backgroundColor,
+    "--uxm-file-upload-color": styles.color,
+    "--uxm-file-upload-border-color": styles.borderColor,
+    // Shared geometry
+    "--uxm-file-upload-border-radius": `${styles.borderRadius}px`,
+    "--uxm-file-upload-border-style": styles.borderStyle,
+    "--uxm-file-upload-border-width": `${styles.borderWidth}px`,
+    "--uxm-file-upload-padding-x": `${styles.paddingX}px`,
+    "--uxm-file-upload-padding-y": `${styles.paddingY}px`,
+    "--uxm-file-upload-min-height": `${styles.minHeight}px`,
+    "--uxm-file-upload-gap": `${styles.gap}px`,
+    // Hover
+    "--uxm-file-upload-hover-bg": styles.hoverBg,
+    "--uxm-file-upload-hover-border": styles.hoverBorder,
+    // Drag-over
+    "--uxm-file-upload-drag-bg": styles.dragBg,
+    "--uxm-file-upload-drag-border": styles.dragBorder,
+    "--uxm-file-upload-drag-accent": styles.dragAccent,
+    // Focus
+    "--uxm-file-upload-focus-border": styles.focusBorder,
+    "--uxm-file-upload-focus-ring": styles.focusRing,
+    // Page-level error
+    "--uxm-file-upload-error-bg": styles.errorBg,
+    "--uxm-file-upload-error-border": styles.errorBorder,
+    "--uxm-file-upload-error-color": styles.errorColor,
+    "--uxm-file-upload-error-message-size": `${styles.errorMessageSize}px`,
+    // Disabled
+    "--uxm-file-upload-disabled-bg": styles.disabledBg,
+    "--uxm-file-upload-disabled-border": styles.disabledBorder,
+    "--uxm-file-upload-disabled-color": styles.disabledColor,
+    "--uxm-file-upload-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    // Icon
+    "--uxm-file-upload-icon-size": `${styles.iconSize}px`,
+    "--uxm-file-upload-icon-color": styles.iconColor,
+    // Text
+    "--uxm-file-upload-title-size": `${styles.titleSize}px`,
+    "--uxm-file-upload-help-size": `${styles.helpSize}px`,
+    "--uxm-file-upload-help-color": styles.helpColor,
+    "--uxm-file-upload-allowed-types-size": `${styles.allowedTypesSize}px`,
+    "--uxm-file-upload-allowed-types-color": styles.allowedTypesColor,
+    // File list — base row knobs
+    "--uxm-file-upload-row-bg": styles.rowBg,
+    "--uxm-file-upload-row-border": styles.rowBorder,
+    "--uxm-file-upload-row-radius": `${styles.rowRadius}px`,
+    "--uxm-file-upload-row-gap": `${styles.rowGap}px`,
+    "--uxm-file-upload-row-padding-x": `${styles.rowPaddingX}px`,
+    "--uxm-file-upload-row-padding-y": `${styles.rowPaddingY}px`,
+    "--uxm-file-upload-row-name-color": styles.rowNameColor,
+    "--uxm-file-upload-row-meta-color": styles.rowMetaColor,
+    "--uxm-file-upload-row-icon-color": styles.rowIconColor,
+    "--uxm-file-upload-remove-icon-color": styles.removeIconColor,
+    "--uxm-file-upload-download-icon-color": styles.downloadIconColor,
+    // File list — progress strip (per-row, status="uploading")
+    "--uxm-file-upload-progress-fill": styles.progressFill,
+    "--uxm-file-upload-progress-height": `${styles.progressHeight}px`,
+    // File list — per-status overrides (done / error) — full state-card
+    // treatment: each gets its own bg + border + icon (+ meta for error).
+    "--uxm-file-upload-row-done-bg": styles.rowDoneBg,
+    "--uxm-file-upload-row-done-border-color": styles.rowDoneBorderColor,
+    "--uxm-file-upload-row-done-icon-color": styles.rowDoneIconColor,
+    "--uxm-file-upload-row-error-bg": styles.rowErrorBg,
+    "--uxm-file-upload-row-error-border-color": styles.rowErrorBorderColor,
+    "--uxm-file-upload-row-error-icon-color": styles.rowErrorIconColor,
+    "--uxm-file-upload-row-error-meta-color": styles.rowErrorMetaColor
+  };
+}
+const DEMO_FILES = [
+  { id: "demo-q", name: "Q4-roadmap.pdf", size: 482310, status: "queued" },
+  { id: "demo-u", name: "design-tokens.json", size: 12480, status: "uploading", progress: 0.6 },
+  // `href` on the settled row: without it the download control never renders,
+  // so the knob above would preview nothing. The three other rows exercise the
+  // reserved slot that keeps the column from jumping when an upload settles.
+  //
+  // A `data:` URL, NOT a `#fragment`: a fragment is same-origin, so `download`
+  // applies to it and clicking the control in the workbench would write the
+  // studio's own HTML to disk under the demo filename. This saves one harmless
+  // line instead, while still exercising the real `<a href download>` path.
+  {
+    id: "demo-d",
+    name: "brand-guidelines.pdf",
+    size: 2415628,
+    status: "done",
+    href: "data:text/plain,UXM%20FileUpload%20preview%20%E2%80%94%20demo%20download"
+  },
+  { id: "demo-e", name: "annual-report.docx", size: 853104, status: "error", errorMessage: "File exceeds 10 MB limit" }
+];
+function FileUploadPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const forcedAtomState = state === "drag-over" || state === "uploading" || state === "error" ? state : void 0;
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const [files] = (0, import_react.useState)(DEMO_FILES);
+  const cssVars = buildVars(styles);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { width: 460, ...cssVars }, children: [
+    (isHover || isFocus) && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `
+          .uxm-file-upload-preview-force-hover .uxm-file-upload {
+            background-color: var(--uxm-file-upload-hover-bg);
+            border-color: var(--uxm-file-upload-hover-border);
+          }
+          .uxm-file-upload-preview-force-focus .uxm-file-upload {
+            border-color: var(--uxm-file-upload-focus-border);
+            outline: 2px solid var(--uxm-file-upload-focus-ring);
+            outline-offset: 2px;
+          }
+        ` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: isHover ? "uxm-file-upload-preview-force-hover" : isFocus ? "uxm-file-upload-preview-force-focus" : void 0,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_ui.FileUpload,
+          {
+            state: forcedAtomState,
+            disabled: state === "disabled",
+            files,
+            error: state === "error" ? "Upload failed \u2014 please try again." : void 0,
+            allowedTypesText: "PDF, DOCX \xB7 up to 10 MB"
+          }
+        )
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FileUploadPreview
+});
+//# sourceMappingURL=file-upload-preview.cjs.map

package/dist/ui/file-upload/file-upload-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/file-upload/file-upload-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { FileUpload, type FileUploadFileMeta, type FileUploadState } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto the wrapper as a `--uxm-file-upload-*`\n * custom property. The real `<FileUpload>` reads them through the styles.css\n * `:hover` / `:focus-within` / `[data-state]` / `[data-status]` rules — so\n * panel edits paint immediately and real pointer / keyboard interaction\n * exercises the same production CSS that ships to consumers.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    // Default surface\n    '--uxm-file-upload-bg': styles.backgroundColor as string,\n    '--uxm-file-upload-color': styles.color as string,\n    '--uxm-file-upload-border-color': styles.borderColor as string,\n    // Shared geometry\n    '--uxm-file-upload-border-radius': `${styles.borderRadius}px`,\n    '--uxm-file-upload-border-style': styles.borderStyle as string,\n    '--uxm-file-upload-border-width': `${styles.borderWidth}px`,\n    '--uxm-file-upload-padding-x': `${styles.paddingX}px`,\n    '--uxm-file-upload-padding-y': `${styles.paddingY}px`,\n    '--uxm-file-upload-min-height': `${styles.minHeight}px`,\n    '--uxm-file-upload-gap': `${styles.gap}px`,\n    // Hover\n    '--uxm-file-upload-hover-bg': styles.hoverBg as string,\n    '--uxm-file-upload-hover-border': styles.hoverBorder as string,\n    // Drag-over\n    '--uxm-file-upload-drag-bg': styles.dragBg as string,\n    '--uxm-file-upload-drag-border': styles.dragBorder as string,\n    '--uxm-file-upload-drag-accent': styles.dragAccent as string,\n    // Focus\n    '--uxm-file-upload-focus-border': styles.focusBorder as string,\n    '--uxm-file-upload-focus-ring': styles.focusRing as string,\n    // Page-level error\n    '--uxm-file-upload-error-bg': styles.errorBg as string,\n    '--uxm-file-upload-error-border': styles.errorBorder as string,\n    '--uxm-file-upload-error-color': styles.errorColor as string,\n    '--uxm-file-upload-error-message-size': `${styles.errorMessageSize}px`,\n    // Disabled\n    '--uxm-file-upload-disabled-bg': styles.disabledBg as string,\n    '--uxm-file-upload-disabled-border': styles.disabledBorder as string,\n    '--uxm-file-upload-disabled-color': styles.disabledColor as string,\n    '--uxm-file-upload-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    // Icon\n    '--uxm-file-upload-icon-size': `${styles.iconSize}px`,\n    '--uxm-file-upload-icon-color': styles.iconColor as string,\n    // Text\n    '--uxm-file-upload-title-size': `${styles.titleSize}px`,\n    '--uxm-file-upload-help-size': `${styles.helpSize}px`,\n    '--uxm-file-upload-help-color': styles.helpColor as string,\n    '--uxm-file-upload-allowed-types-size': `${styles.allowedTypesSize}px`,\n    '--uxm-file-upload-allowed-types-color': styles.allowedTypesColor as string,\n    // File list — base row knobs\n    '--uxm-file-upload-row-bg': styles.rowBg as string,\n    '--uxm-file-upload-row-border': styles.rowBorder as string,\n    '--uxm-file-upload-row-radius': `${styles.rowRadius}px`,\n    '--uxm-file-upload-row-gap': `${styles.rowGap}px`,\n    '--uxm-file-upload-row-padding-x': `${styles.rowPaddingX}px`,\n    '--uxm-file-upload-row-padding-y': `${styles.rowPaddingY}px`,\n    '--uxm-file-upload-row-name-color': styles.rowNameColor as string,\n    '--uxm-file-upload-row-meta-color': styles.rowMetaColor as string,\n    '--uxm-file-upload-row-icon-color': styles.rowIconColor as string,\n    '--uxm-file-upload-remove-icon-color': styles.removeIconColor as string,\n    '--uxm-file-upload-download-icon-color': styles.downloadIconColor as string,\n    // File list — progress strip (per-row, status=\"uploading\")\n    '--uxm-file-upload-progress-fill': styles.progressFill as string,\n    '--uxm-file-upload-progress-height': `${styles.progressHeight}px`,\n    // File list — per-status overrides (done / error) — full state-card\n    // treatment: each gets its own bg + border + icon (+ meta for error).\n    '--uxm-file-upload-row-done-bg': styles.rowDoneBg as string,\n    '--uxm-file-upload-row-done-border-color': styles.rowDoneBorderColor as string,\n    '--uxm-file-upload-row-done-icon-color': styles.rowDoneIconColor as string,\n    '--uxm-file-upload-row-error-bg': styles.rowErrorBg as string,\n    '--uxm-file-upload-row-error-border-color': styles.rowErrorBorderColor as string,\n    '--uxm-file-upload-row-error-icon-color': styles.rowErrorIconColor as string,\n    '--uxm-file-upload-row-error-meta-color': styles.rowErrorMetaColor as string,\n  } as CSSProperties;\n}\n\n/**\n * Demo files — one per `status` value so the canvas shows all four row\n * lifecycle states at a glance. Designers see queued / uploading / done /\n * error stacked together, instead of needing to cycle a variant. Sizes\n * span small → medium so the size formatter exercises B / KB / MB\n * branches; the `progress` on the uploading row demonstrates the verbose\n * meta copy (\"Uploading · 60% of …\").\n */\nconst DEMO_FILES: FileUploadFileMeta[] = [\n  { id: 'demo-q', name: 'Q4-roadmap.pdf', size: 482_310, status: 'queued' },\n  { id: 'demo-u', name: 'design-tokens.json', size: 12_480, status: 'uploading', progress: 0.6 },\n  // `href` on the settled row: without it the download control never renders,\n  // so the knob above would preview nothing. The three other rows exercise the\n  // reserved slot that keeps the column from jumping when an upload settles.\n  //\n  // A `data:` URL, NOT a `#fragment`: a fragment is same-origin, so `download`\n  // applies to it and clicking the control in the workbench would write the\n  // studio's own HTML to disk under the demo filename. This saves one harmless\n  // line instead, while still exercising the real `<a href download>` path.\n  {\n    id: 'demo-d',\n    name: 'brand-guidelines.pdf',\n    size: 2_415_628,\n    status: 'done',\n    href: 'data:text/plain,UXM%20FileUpload%20preview%20%E2%80%94%20demo%20download',\n  },\n  { id: 'demo-e', name: 'annual-report.docx', size: 853_104, status: 'error', errorMessage: 'File exceeds 10 MB limit' },\n];\n\nexport function FileUploadPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n\n  // `drag-over`, `uploading`, and `error` are atom-level states the\n  // FileUpload accepts via the `state` prop. `hover` and `focus` are\n  // CSS-only in production (driven by :hover / :focus-within) — the\n  // workbench paints them via a wrapping div + inline style override\n  // below. `disabled` is a separate prop on the atom.\n  const forcedAtomState: FileUploadState | undefined =\n    state === 'drag-over' || state === 'uploading' || state === 'error'\n      ? (state as FileUploadState)\n      : undefined;\n\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n\n  // Demo state holder — remove buttons are no-ops so removing a row\n  // doesn't make the canvas jump.\n  const [files] = useState<FileUploadFileMeta[]>(DEMO_FILES);\n\n  const cssVars = buildVars(styles);\n\n  return (\n    <div style={{ width: 460, ...cssVars } as CSSProperties}>\n      {/*\n        Hover and Focus forced-state previews use a wrapping div whose\n        class name an inline <style> uses to push the right CSS variables\n        onto the inner `.uxm-file-upload`. Keeps the atom free of any\n        workbench-only state handling.\n      */}\n      {(isHover || isFocus) && (\n        <style>{`\n          .uxm-file-upload-preview-force-hover .uxm-file-upload {\n            background-color: var(--uxm-file-upload-hover-bg);\n            border-color: var(--uxm-file-upload-hover-border);\n          }\n          .uxm-file-upload-preview-force-focus .uxm-file-upload {\n            border-color: var(--uxm-file-upload-focus-border);\n            outline: 2px solid var(--uxm-file-upload-focus-ring);\n            outline-offset: 2px;\n          }\n        `}</style>\n      )}\n      <div\n        className={\n          isHover\n            ? 'uxm-file-upload-preview-force-hover'\n            : isFocus\n              ? 'uxm-file-upload-preview-force-focus'\n              : undefined\n        }\n      >\n        <FileUpload\n          state={forcedAtomState}\n          disabled={state === 'disabled'}\n          files={files}\n          error={state === 'error' ? 'Upload failed — please try again.' : undefined}\n          allowedTypesText=\"PDF, DOCX · up to 10 MB\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/ui/file-upload/file-upload-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function FileUploadPreview({ styles, variants }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=file-upload-preview.d.ts.map

package/dist/ui/file-upload/file-upload-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-upload-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/file-upload/file-upload-preview.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAgHrD,wBAAgB,iBAAiB,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,YAAY,2CA8DnE"}

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

@@ -0,0 +1,133 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FileUpload } from "../../ui/index.js";
+function buildVars(styles) {
+  return {
+    // Default surface
+    "--uxm-file-upload-bg": styles.backgroundColor,
+    "--uxm-file-upload-color": styles.color,
+    "--uxm-file-upload-border-color": styles.borderColor,
+    // Shared geometry
+    "--uxm-file-upload-border-radius": `${styles.borderRadius}px`,
+    "--uxm-file-upload-border-style": styles.borderStyle,
+    "--uxm-file-upload-border-width": `${styles.borderWidth}px`,
+    "--uxm-file-upload-padding-x": `${styles.paddingX}px`,
+    "--uxm-file-upload-padding-y": `${styles.paddingY}px`,
+    "--uxm-file-upload-min-height": `${styles.minHeight}px`,
+    "--uxm-file-upload-gap": `${styles.gap}px`,
+    // Hover
+    "--uxm-file-upload-hover-bg": styles.hoverBg,
+    "--uxm-file-upload-hover-border": styles.hoverBorder,
+    // Drag-over
+    "--uxm-file-upload-drag-bg": styles.dragBg,
+    "--uxm-file-upload-drag-border": styles.dragBorder,
+    "--uxm-file-upload-drag-accent": styles.dragAccent,
+    // Focus
+    "--uxm-file-upload-focus-border": styles.focusBorder,
+    "--uxm-file-upload-focus-ring": styles.focusRing,
+    // Page-level error
+    "--uxm-file-upload-error-bg": styles.errorBg,
+    "--uxm-file-upload-error-border": styles.errorBorder,
+    "--uxm-file-upload-error-color": styles.errorColor,
+    "--uxm-file-upload-error-message-size": `${styles.errorMessageSize}px`,
+    // Disabled
+    "--uxm-file-upload-disabled-bg": styles.disabledBg,
+    "--uxm-file-upload-disabled-border": styles.disabledBorder,
+    "--uxm-file-upload-disabled-color": styles.disabledColor,
+    "--uxm-file-upload-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    // Icon
+    "--uxm-file-upload-icon-size": `${styles.iconSize}px`,
+    "--uxm-file-upload-icon-color": styles.iconColor,
+    // Text
+    "--uxm-file-upload-title-size": `${styles.titleSize}px`,
+    "--uxm-file-upload-help-size": `${styles.helpSize}px`,
+    "--uxm-file-upload-help-color": styles.helpColor,
+    "--uxm-file-upload-allowed-types-size": `${styles.allowedTypesSize}px`,
+    "--uxm-file-upload-allowed-types-color": styles.allowedTypesColor,
+    // File list — base row knobs
+    "--uxm-file-upload-row-bg": styles.rowBg,
+    "--uxm-file-upload-row-border": styles.rowBorder,
+    "--uxm-file-upload-row-radius": `${styles.rowRadius}px`,
+    "--uxm-file-upload-row-gap": `${styles.rowGap}px`,
+    "--uxm-file-upload-row-padding-x": `${styles.rowPaddingX}px`,
+    "--uxm-file-upload-row-padding-y": `${styles.rowPaddingY}px`,
+    "--uxm-file-upload-row-name-color": styles.rowNameColor,
+    "--uxm-file-upload-row-meta-color": styles.rowMetaColor,
+    "--uxm-file-upload-row-icon-color": styles.rowIconColor,
+    "--uxm-file-upload-remove-icon-color": styles.removeIconColor,
+    "--uxm-file-upload-download-icon-color": styles.downloadIconColor,
+    // File list — progress strip (per-row, status="uploading")
+    "--uxm-file-upload-progress-fill": styles.progressFill,
+    "--uxm-file-upload-progress-height": `${styles.progressHeight}px`,
+    // File list — per-status overrides (done / error) — full state-card
+    // treatment: each gets its own bg + border + icon (+ meta for error).
+    "--uxm-file-upload-row-done-bg": styles.rowDoneBg,
+    "--uxm-file-upload-row-done-border-color": styles.rowDoneBorderColor,
+    "--uxm-file-upload-row-done-icon-color": styles.rowDoneIconColor,
+    "--uxm-file-upload-row-error-bg": styles.rowErrorBg,
+    "--uxm-file-upload-row-error-border-color": styles.rowErrorBorderColor,
+    "--uxm-file-upload-row-error-icon-color": styles.rowErrorIconColor,
+    "--uxm-file-upload-row-error-meta-color": styles.rowErrorMetaColor
+  };
+}
+const DEMO_FILES = [
+  { id: "demo-q", name: "Q4-roadmap.pdf", size: 482310, status: "queued" },
+  { id: "demo-u", name: "design-tokens.json", size: 12480, status: "uploading", progress: 0.6 },
+  // `href` on the settled row: without it the download control never renders,
+  // so the knob above would preview nothing. The three other rows exercise the
+  // reserved slot that keeps the column from jumping when an upload settles.
+  //
+  // A `data:` URL, NOT a `#fragment`: a fragment is same-origin, so `download`
+  // applies to it and clicking the control in the workbench would write the
+  // studio's own HTML to disk under the demo filename. This saves one harmless
+  // line instead, while still exercising the real `<a href download>` path.
+  {
+    id: "demo-d",
+    name: "brand-guidelines.pdf",
+    size: 2415628,
+    status: "done",
+    href: "data:text/plain,UXM%20FileUpload%20preview%20%E2%80%94%20demo%20download"
+  },
+  { id: "demo-e", name: "annual-report.docx", size: 853104, status: "error", errorMessage: "File exceeds 10 MB limit" }
+];
+function FileUploadPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const forcedAtomState = state === "drag-over" || state === "uploading" || state === "error" ? state : void 0;
+  const isHover = state === "hover";
+  const isFocus = state === "focus";
+  const [files] = useState(DEMO_FILES);
+  const cssVars = buildVars(styles);
+  return /* @__PURE__ */ jsxs("div", { style: { width: 460, ...cssVars }, children: [
+    (isHover || isFocus) && /* @__PURE__ */ jsx("style", { children: `
+          .uxm-file-upload-preview-force-hover .uxm-file-upload {
+            background-color: var(--uxm-file-upload-hover-bg);
+            border-color: var(--uxm-file-upload-hover-border);
+          }
+          .uxm-file-upload-preview-force-focus .uxm-file-upload {
+            border-color: var(--uxm-file-upload-focus-border);
+            outline: 2px solid var(--uxm-file-upload-focus-ring);
+            outline-offset: 2px;
+          }
+        ` }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: isHover ? "uxm-file-upload-preview-force-hover" : isFocus ? "uxm-file-upload-preview-force-focus" : void 0,
+        children: /* @__PURE__ */ jsx(
+          FileUpload,
+          {
+            state: forcedAtomState,
+            disabled: state === "disabled",
+            files,
+            error: state === "error" ? "Upload failed \u2014 please try again." : void 0,
+            allowedTypesText: "PDF, DOCX \xB7 up to 10 MB"
+          }
+        )
+      }
+    )
+  ] });
+}
+export {
+  FileUploadPreview
+};
+//# sourceMappingURL=file-upload-preview.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/file-upload/file-upload-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport type { PreviewProps } from '@/previews/types';\nimport { FileUpload, type FileUploadFileMeta, type FileUploadState } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\n/**\n * Project every registry knob onto the wrapper as a `--uxm-file-upload-*`\n * custom property. The real `<FileUpload>` reads them through the styles.css\n * `:hover` / `:focus-within` / `[data-state]` / `[data-status]` rules — so\n * panel edits paint immediately and real pointer / keyboard interaction\n * exercises the same production CSS that ships to consumers.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    // Default surface\n    '--uxm-file-upload-bg': styles.backgroundColor as string,\n    '--uxm-file-upload-color': styles.color as string,\n    '--uxm-file-upload-border-color': styles.borderColor as string,\n    // Shared geometry\n    '--uxm-file-upload-border-radius': `${styles.borderRadius}px`,\n    '--uxm-file-upload-border-style': styles.borderStyle as string,\n    '--uxm-file-upload-border-width': `${styles.borderWidth}px`,\n    '--uxm-file-upload-padding-x': `${styles.paddingX}px`,\n    '--uxm-file-upload-padding-y': `${styles.paddingY}px`,\n    '--uxm-file-upload-min-height': `${styles.minHeight}px`,\n    '--uxm-file-upload-gap': `${styles.gap}px`,\n    // Hover\n    '--uxm-file-upload-hover-bg': styles.hoverBg as string,\n    '--uxm-file-upload-hover-border': styles.hoverBorder as string,\n    // Drag-over\n    '--uxm-file-upload-drag-bg': styles.dragBg as string,\n    '--uxm-file-upload-drag-border': styles.dragBorder as string,\n    '--uxm-file-upload-drag-accent': styles.dragAccent as string,\n    // Focus\n    '--uxm-file-upload-focus-border': styles.focusBorder as string,\n    '--uxm-file-upload-focus-ring': styles.focusRing as string,\n    // Page-level error\n    '--uxm-file-upload-error-bg': styles.errorBg as string,\n    '--uxm-file-upload-error-border': styles.errorBorder as string,\n    '--uxm-file-upload-error-color': styles.errorColor as string,\n    '--uxm-file-upload-error-message-size': `${styles.errorMessageSize}px`,\n    // Disabled\n    '--uxm-file-upload-disabled-bg': styles.disabledBg as string,\n    '--uxm-file-upload-disabled-border': styles.disabledBorder as string,\n    '--uxm-file-upload-disabled-color': styles.disabledColor as string,\n    '--uxm-file-upload-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    // Icon\n    '--uxm-file-upload-icon-size': `${styles.iconSize}px`,\n    '--uxm-file-upload-icon-color': styles.iconColor as string,\n    // Text\n    '--uxm-file-upload-title-size': `${styles.titleSize}px`,\n    '--uxm-file-upload-help-size': `${styles.helpSize}px`,\n    '--uxm-file-upload-help-color': styles.helpColor as string,\n    '--uxm-file-upload-allowed-types-size': `${styles.allowedTypesSize}px`,\n    '--uxm-file-upload-allowed-types-color': styles.allowedTypesColor as string,\n    // File list — base row knobs\n    '--uxm-file-upload-row-bg': styles.rowBg as string,\n    '--uxm-file-upload-row-border': styles.rowBorder as string,\n    '--uxm-file-upload-row-radius': `${styles.rowRadius}px`,\n    '--uxm-file-upload-row-gap': `${styles.rowGap}px`,\n    '--uxm-file-upload-row-padding-x': `${styles.rowPaddingX}px`,\n    '--uxm-file-upload-row-padding-y': `${styles.rowPaddingY}px`,\n    '--uxm-file-upload-row-name-color': styles.rowNameColor as string,\n    '--uxm-file-upload-row-meta-color': styles.rowMetaColor as string,\n    '--uxm-file-upload-row-icon-color': styles.rowIconColor as string,\n    '--uxm-file-upload-remove-icon-color': styles.removeIconColor as string,\n    '--uxm-file-upload-download-icon-color': styles.downloadIconColor as string,\n    // File list — progress strip (per-row, status=\"uploading\")\n    '--uxm-file-upload-progress-fill': styles.progressFill as string,\n    '--uxm-file-upload-progress-height': `${styles.progressHeight}px`,\n    // File list — per-status overrides (done / error) — full state-card\n    // treatment: each gets its own bg + border + icon (+ meta for error).\n    '--uxm-file-upload-row-done-bg': styles.rowDoneBg as string,\n    '--uxm-file-upload-row-done-border-color': styles.rowDoneBorderColor as string,\n    '--uxm-file-upload-row-done-icon-color': styles.rowDoneIconColor as string,\n    '--uxm-file-upload-row-error-bg': styles.rowErrorBg as string,\n    '--uxm-file-upload-row-error-border-color': styles.rowErrorBorderColor as string,\n    '--uxm-file-upload-row-error-icon-color': styles.rowErrorIconColor as string,\n    '--uxm-file-upload-row-error-meta-color': styles.rowErrorMetaColor as string,\n  } as CSSProperties;\n}\n\n/**\n * Demo files — one per `status` value so the canvas shows all four row\n * lifecycle states at a glance. Designers see queued / uploading / done /\n * error stacked together, instead of needing to cycle a variant. Sizes\n * span small → medium so the size formatter exercises B / KB / MB\n * branches; the `progress` on the uploading row demonstrates the verbose\n * meta copy (\"Uploading · 60% of …\").\n */\nconst DEMO_FILES: FileUploadFileMeta[] = [\n  { id: 'demo-q', name: 'Q4-roadmap.pdf', size: 482_310, status: 'queued' },\n  { id: 'demo-u', name: 'design-tokens.json', size: 12_480, status: 'uploading', progress: 0.6 },\n  // `href` on the settled row: without it the download control never renders,\n  // so the knob above would preview nothing. The three other rows exercise the\n  // reserved slot that keeps the column from jumping when an upload settles.\n  //\n  // A `data:` URL, NOT a `#fragment`: a fragment is same-origin, so `download`\n  // applies to it and clicking the control in the workbench would write the\n  // studio's own HTML to disk under the demo filename. This saves one harmless\n  // line instead, while still exercising the real `<a href download>` path.\n  {\n    id: 'demo-d',\n    name: 'brand-guidelines.pdf',\n    size: 2_415_628,\n    status: 'done',\n    href: 'data:text/plain,UXM%20FileUpload%20preview%20%E2%80%94%20demo%20download',\n  },\n  { id: 'demo-e', name: 'annual-report.docx', size: 853_104, status: 'error', errorMessage: 'File exceeds 10 MB limit' },\n];\n\nexport function FileUploadPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n\n  // `drag-over`, `uploading`, and `error` are atom-level states the\n  // FileUpload accepts via the `state` prop. `hover` and `focus` are\n  // CSS-only in production (driven by :hover / :focus-within) — the\n  // workbench paints them via a wrapping div + inline style override\n  // below. `disabled` is a separate prop on the atom.\n  const forcedAtomState: FileUploadState | undefined =\n    state === 'drag-over' || state === 'uploading' || state === 'error'\n      ? (state as FileUploadState)\n      : undefined;\n\n  const isHover = state === 'hover';\n  const isFocus = state === 'focus';\n\n  // Demo state holder — remove buttons are no-ops so removing a row\n  // doesn't make the canvas jump.\n  const [files] = useState<FileUploadFileMeta[]>(DEMO_FILES);\n\n  const cssVars = buildVars(styles);\n\n  return (\n    <div style={{ width: 460, ...cssVars } as CSSProperties}>\n      {/*\n        Hover and Focus forced-state previews use a wrapping div whose\n        class name an inline <style> uses to push the right CSS variables\n        onto the inner `.uxm-file-upload`. Keeps the atom free of any\n        workbench-only state handling.\n      */}\n      {(isHover || isFocus) && (\n        <style>{`\n          .uxm-file-upload-preview-force-hover .uxm-file-upload {\n            background-color: var(--uxm-file-upload-hover-bg);\n            border-color: var(--uxm-file-upload-hover-border);\n          }\n          .uxm-file-upload-preview-force-focus .uxm-file-upload {\n            border-color: var(--uxm-file-upload-focus-border);\n            outline: 2px solid var(--uxm-file-upload-focus-ring);\n            outline-offset: 2px;\n          }\n        `}</style>\n      )}\n      <div\n        className={\n          isHover\n            ? 'uxm-file-upload-preview-force-hover'\n            : isFocus\n              ? 'uxm-file-upload-preview-force-focus'\n              : undefined\n        }\n      >\n        <FileUpload\n          state={forcedAtomState}\n          disabled={state === 'disabled'}\n          files={files}\n          error={state === 'error' ? 'Upload failed — please try again.' : undefined}\n          allowedTypesText=\"PDF, DOCX · up to 10 MB\"\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AAyII,SAQI,KARJ;AAzIJ,SAAS,gBAAoC;AAG7C,SAAS,kBAAiE;AAW1E,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA;AAAA,IAEL,wBAAwB,OAAO;AAAA,IAC/B,2BAA2B,OAAO;AAAA,IAClC,kCAAkC,OAAO;AAAA;AAAA,IAEzC,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,yBAAyB,GAAG,OAAO,GAAG;AAAA;AAAA,IAEtC,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA;AAAA,IAEzC,6BAA6B,OAAO;AAAA,IACpC,iCAAiC,OAAO;AAAA,IACxC,iCAAiC,OAAO;AAAA;AAAA,IAExC,kCAAkC,OAAO;AAAA,IACzC,gCAAgC,OAAO;AAAA;AAAA,IAEvC,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,iCAAiC,OAAO;AAAA,IACxC,wCAAwC,GAAG,OAAO,gBAAgB;AAAA;AAAA,IAElE,iCAAiC,OAAO;AAAA,IACxC,qCAAqC,OAAO;AAAA,IAC5C,oCAAoC,OAAO;AAAA,IAC3C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA;AAAA,IAEpE,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,gCAAgC,OAAO;AAAA;AAAA,IAEvC,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,gCAAgC,OAAO;AAAA,IACvC,wCAAwC,GAAG,OAAO,gBAAgB;AAAA,IAClE,yCAAyC,OAAO;AAAA;AAAA,IAEhD,4BAA4B,OAAO;AAAA,IACnC,gCAAgC,OAAO;AAAA,IACvC,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,6BAA6B,GAAG,OAAO,MAAM;AAAA,IAC7C,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,mCAAmC,GAAG,OAAO,WAAW;AAAA,IACxD,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,OAAO;AAAA,IAC3C,oCAAoC,OAAO;AAAA,IAC3C,uCAAuC,OAAO;AAAA,IAC9C,yCAAyC,OAAO;AAAA;AAAA,IAEhD,mCAAmC,OAAO;AAAA,IAC1C,qCAAqC,GAAG,OAAO,cAAc;AAAA;AAAA;AAAA,IAG7D,iCAAiC,OAAO;AAAA,IACxC,2CAA2C,OAAO;AAAA,IAClD,yCAAyC,OAAO;AAAA,IAChD,kCAAkC,OAAO;AAAA,IACzC,4CAA4C,OAAO;AAAA,IACnD,0CAA0C,OAAO;AAAA,IACjD,0CAA0C,OAAO;AAAA,EACnD;AACF;AAUA,MAAM,aAAmC;AAAA,EACvC,EAAE,IAAI,UAAU,MAAM,kBAAkB,MAAM,QAAS,QAAQ,SAAS;AAAA,EACxE,EAAE,IAAI,UAAU,MAAM,sBAAsB,MAAM,OAAQ,QAAQ,aAAa,UAAU,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAS7F;AAAA,IACE,IAAI;AAAA,IACJ,MAAM;AAAA,IACN,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,MAAM;AAAA,EACR;AAAA,EACA,EAAE,IAAI,UAAU,MAAM,sBAAsB,MAAM,QAAS,QAAQ,SAAS,cAAc,2BAA2B;AACvH;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAO5C,QAAM,kBACJ,UAAU,eAAe,UAAU,eAAe,UAAU,UACvD,QACD;AAEN,QAAM,UAAU,UAAU;AAC1B,QAAM,UAAU,UAAU;AAI1B,QAAM,CAAC,KAAK,IAAI,SAA+B,UAAU;AAEzD,QAAM,UAAU,UAAU,MAAM;AAEhC,SACE,qBAAC,SAAI,OAAO,EAAE,OAAO,KAAK,GAAG,QAAQ,GAOjC;AAAA,gBAAW,YACX,oBAAC,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAUN;AAAA,IAEJ;AAAA,MAAC;AAAA;AAAA,QACC,WACE,UACI,wCACA,UACE,wCACA;AAAA,QAGR;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU,UAAU;AAAA,YACpB;AAAA,YACA,OAAO,UAAU,UAAU,2CAAsC;AAAA,YACjE,kBAAiB;AAAA;AAAA,QACnB;AAAA;AAAA,IACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/file-upload/file-upload.cjs

@@ -0,0 +1,238 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var file_upload_exports = {};
+__export(file_upload_exports, {
+  FileUpload: () => FileUpload
+});
+module.exports = __toCommonJS(file_upload_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_icon = require("../icon/index.cjs");
+function FileUpload({
+  state: forcedState,
+  multiple = true,
+  accept,
+  disabled = false,
+  titleText,
+  helpText,
+  allowedTypesText,
+  error,
+  errorMessage,
+  files = [],
+  onFiles,
+  onRemove,
+  onOpenFile,
+  downloadGlyph = "arrow-down",
+  downloadLabel = "Download",
+  onDragEnter,
+  onDragLeave,
+  onError: _onError,
+  className,
+  style,
+  iconGlyph = "cloud-arrow-up",
+  children,
+  ...rest
+}) {
+  const inputId = (0, import_react.useId)();
+  const helpId = (0, import_react.useId)();
+  const listHasDownloads = !!onOpenFile || files.some((f) => !!f.href);
+  const [internalDrag, setInternalDrag] = (0, import_react.useState)(false);
+  const isUploading = forcedState === "uploading";
+  const pageError = error ?? errorMessage;
+  const isPageError = forcedState === "error" || !forcedState && !!pageError;
+  const dataState = forcedState ? forcedState : internalDrag ? "drag-over" : isPageError ? "error" : "default";
+  const handleChange = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      const list = e.target.files;
+      if (!list || list.length === 0) return;
+      onFiles?.(Array.from(list));
+      e.target.value = "";
+    },
+    [disabled, onFiles]
+  );
+  const handleDragEnter = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setInternalDrag(true);
+      onDragEnter?.(e);
+    },
+    [disabled, onDragEnter]
+  );
+  const handleDragOver = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+    },
+    [disabled]
+  );
+  const handleDragLeave = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setInternalDrag(false);
+      onDragLeave?.(e);
+    },
+    [disabled, onDragLeave]
+  );
+  const handleDrop = (0, import_react.useCallback)(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setInternalDrag(false);
+      const list = e.dataTransfer?.files;
+      if (!list || list.length === 0) return;
+      onFiles?.(Array.from(list));
+    },
+    [disabled, onFiles]
+  );
+  const resolvedTitle = titleText ?? "Upload a file";
+  const baseHelp = helpText ?? (multiple ? "Drop files here, or click to browse" : "Drop a file here, or click to browse");
+  const resolvedHelp = isUploading ? "Uploading\u2026" : baseHelp;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_helpers.cn)("uxm-file-upload-wrapper", className), style, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "label",
+      {
+        className: "uxm-file-upload",
+        htmlFor: inputId,
+        "data-state": dataState,
+        "data-disabled": disabled ? "true" : void 0,
+        "aria-busy": isUploading || void 0,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "input",
+            {
+              id: inputId,
+              className: "uxm-file-upload__input",
+              type: "file",
+              multiple,
+              accept,
+              disabled,
+              "aria-invalid": isPageError || void 0,
+              "aria-describedby": helpId,
+              onChange: handleChange
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: iconGlyph, size: 40 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__title", children: resolvedTitle }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { id: helpId, className: "uxm-file-upload__help", children: resolvedHelp }),
+          allowedTypesText && !isUploading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__allowed-types", children: allowedTypesText })
+        ]
+      }
+    ),
+    pageError && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__error", children: pageError }),
+    children,
+    files.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "uxm-file-upload__list", children: files.map((file) => {
+      const status = file.status ?? "queued";
+      const isUploading2 = status === "uploading";
+      const isDone = status === "done";
+      const isFileError = status === "error";
+      const pctFraction = file.progress != null ? Math.max(0, Math.min(1, file.progress)) : void 0;
+      const pctLabel = pctFraction != null ? `${Math.round(pctFraction * 100)}%` : void 0;
+      const pctWidth = pctFraction != null ? `${pctFraction * 100}%` : "0%";
+      const iconForRow = isDone ? "check-circle" : isFileError ? "exclamation-circle" : "document";
+      const sizeLabel = formatBytes(file.size);
+      const metaText = isUploading2 ? pctLabel != null ? `Uploading \xB7 ${pctLabel} of ${sizeLabel}` : "Uploading\u2026" : isFileError ? file.errorMessage ?? "Upload failed" : sizeLabel;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "li",
+        {
+          className: "uxm-file-upload__row",
+          "data-status": status,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__row-icon", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: iconForRow, size: 20 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "uxm-file-upload__row-body", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__row-name", children: file.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__row-meta", children: metaText })
+            ] }),
+            listHasDownloads && (isDone && (onOpenFile || file.href) ? onOpenFile ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uxm-file-upload__row-download",
+                "aria-label": `${downloadLabel} ${file.name}`,
+                disabled,
+                onClick: () => onOpenFile(file.id),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: downloadGlyph, size: 16 })
+              }
+            ) : (
+              // eslint-disable-next-line jsx-a11y/anchor-is-valid -- `href` is dropped ONLY while `disabled`, which is the point: an anchor that keeps its href stays focusable and Enter still follows it, so a disabled control would remain usable from the keyboard. The rule cannot model a conditionally-inert anchor; when enabled this always has a valid href.
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                "a",
+                {
+                  className: "uxm-file-upload__row-download",
+                  href: disabled ? void 0 : file.href,
+                  download: file.name,
+                  target: "_blank",
+                  rel: "noopener noreferrer",
+                  "aria-label": `${downloadLabel} ${file.name}`,
+                  "aria-disabled": disabled || void 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: downloadGlyph, size: 16 })
+                }
+              )
+            ) : (
+              // Inert placeholder keeping the column width stable across
+              // the uploading → done transition.
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "uxm-file-upload__row-download-slot", "aria-hidden": "true" })
+            )),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                type: "button",
+                className: "uxm-file-upload__row-remove",
+                "aria-label": isUploading2 ? `Cancel ${file.name}` : `Remove ${file.name}`,
+                disabled,
+                onClick: () => onRemove?.(file.id),
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_icon.Icon, { glyph: "trash", size: 16 })
+              }
+            ),
+            isUploading2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: "uxm-file-upload__row-progress",
+                style: { "--uxm-file-upload-row-progress": pctWidth },
+                role: "progressbar",
+                "aria-valuenow": pctFraction != null ? Math.round(pctFraction * 100) : void 0,
+                "aria-valuemin": 0,
+                "aria-valuemax": 100
+              }
+            )
+          ]
+        },
+        file.id
+      );
+    }) })
+  ] });
+}
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FileUpload
+});
+//# sourceMappingURL=file-upload.cjs.map