@viax.io/uxm 4.36.0

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

@@ -0,0 +1,218 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  useCallback,
+  useId,
+  useState
+} from "react";
+import { cn } from "../../helpers/index.js";
+import { Icon } from "../icon/index.js";
+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 = useId();
+  const helpId = useId();
+  const listHasDownloads = !!onOpenFile || files.some((f) => !!f.href);
+  const [internalDrag, setInternalDrag] = 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 = 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 = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setInternalDrag(true);
+      onDragEnter?.(e);
+    },
+    [disabled, onDragEnter]
+  );
+  const handleDragOver = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+    },
+    [disabled]
+  );
+  const handleDragLeave = useCallback(
+    (e) => {
+      if (disabled) return;
+      e.preventDefault();
+      setInternalDrag(false);
+      onDragLeave?.(e);
+    },
+    [disabled, onDragLeave]
+  );
+  const handleDrop = 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__ */ jsxs("div", { className: cn("uxm-file-upload-wrapper", className), style, ...rest, children: [
+    /* @__PURE__ */ 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__ */ 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__ */ jsx("span", { className: "uxm-file-upload__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: iconGlyph, size: 40 }) }),
+          /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__title", children: resolvedTitle }),
+          /* @__PURE__ */ jsx("span", { id: helpId, className: "uxm-file-upload__help", children: resolvedHelp }),
+          allowedTypesText && !isUploading && /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__allowed-types", children: allowedTypesText })
+        ]
+      }
+    ),
+    pageError && /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__error", children: pageError }),
+    children,
+    files.length > 0 && /* @__PURE__ */ 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__ */ jsxs(
+        "li",
+        {
+          className: "uxm-file-upload__row",
+          "data-status": status,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__row-icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Icon, { glyph: iconForRow, size: 20 }) }),
+            /* @__PURE__ */ jsxs("span", { className: "uxm-file-upload__row-body", children: [
+              /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__row-name", children: file.name }),
+              /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__row-meta", children: metaText })
+            ] }),
+            listHasDownloads && (isDone && (onOpenFile || file.href) ? onOpenFile ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "uxm-file-upload__row-download",
+                "aria-label": `${downloadLabel} ${file.name}`,
+                disabled,
+                onClick: () => onOpenFile(file.id),
+                children: /* @__PURE__ */ jsx(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__ */ 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__ */ jsx(Icon, { glyph: downloadGlyph, size: 16 })
+                }
+              )
+            ) : (
+              // Inert placeholder keeping the column width stable across
+              // the uploading → done transition.
+              /* @__PURE__ */ jsx("span", { className: "uxm-file-upload__row-download-slot", "aria-hidden": "true" })
+            )),
+            /* @__PURE__ */ 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__ */ jsx(Icon, { glyph: "trash", size: 16 })
+              }
+            ),
+            isUploading2 && /* @__PURE__ */ 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`;
+}
+export {
+  FileUpload
+};
+//# sourceMappingURL=file-upload.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/file-upload/file-upload.tsx"],"sourcesContent":["import {\n  useCallback,\n  useId,\n  useState,\n  type ChangeEvent,\n  type CSSProperties,\n  type DragEvent,\n  type HTMLAttributes,\n  type ReactNode,\n} from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { Icon } from '../icon';\n\n/**\n * Visual states the FileUpload **drop area** can be forced into via the\n * `state` prop. These describe the drop area surface only — not per-file\n * lifecycle. Per-file states (queued / uploading / done / error) live on\n * each `FileUploadFileMeta.status` and render row-by-row independently.\n *\n * `uploading` is **caller-controlled** — the atom never sets it from per-\n * file statuses. Use it for page-level signals: a batch is being prepared\n * before per-file rows exist, a chunked upload with no per-file progress,\n * or any \"the system is busy with this dropzone\" state the caller wants\n * to surface. Per-row uploading rows remain the *primary* progress signal.\n *\n * `error` means a *page-level* error (e.g. \"Connection lost\", \"Server\n * rejected the batch\") — surfaced via the `errorMessage` prop and shown\n * below the drop area. Per-file errors don't change the drop area's state.\n */\nexport type FileUploadState = 'default' | 'drag-over' | 'uploading' | 'error';\n\n/**\n * Per-file lifecycle status. The atom paints each row based on its own\n * status independently of other rows.\n *\n * - `queued`: file is added but not yet sent. Neutral row appearance.\n * - `uploading`: file is in flight. Row shows a progress strip and a\n *   verbose meta line (\"Uploading · 61% of 471.0 KB\"). Caller drives\n *   `progress` (0–1).\n * - `done`: file completed. Document icon swaps to a success check.\n * - `error`: file failed. Border + icon + meta switch to danger styling;\n *   the per-file `errorMessage` replaces the size meta.\n */\nexport type FileStatus = 'queued' | 'uploading' | 'done' | 'error';\n\nexport interface FileUploadFileMeta {\n  /** Stable id for keying + removal callbacks. */\n  id: string;\n  /** Filename to display in the row. */\n  name: string;\n  /** Size in bytes. Formatted for display by the atom. */\n  size: number;\n  /**\n   * Per-file lifecycle status. Defaults to `\"queued\"` if omitted. Drives\n   * the row's icon, meta line, border, and progress strip.\n   */\n  status?: FileStatus;\n  /**\n   * 0–1 progress fraction. Used only when `status === \"uploading\"`.\n   * If omitted during uploading, the row shows an indeterminate state\n   * (\"Uploading…\") and no fraction.\n   */\n  progress?: number;\n  /**\n   * Per-file error message. Used only when `status === \"error\"`.\n   * Replaces the size meta on the row in danger styling.\n   */\n  errorMessage?: string;\n  /**\n   * Direct URL for a stored file. On a `done` row this renders a trailing\n   * control as a real `<a href download>` — which is why it exists alongside\n   * `onOpenFile` rather than being replaced by it: only an anchor gives the\n   * browser's own affordances (⌘/middle-click to a new tab, right-click →\n   * \"Save link as\", the native download UI).\n   *\n   * ⚠️ Use this ONLY when the browser can fetch the URL unauthenticated. A\n   * plain navigation carries no `Authorization` header, so a token-protected\n   * URL returns 401 — reach for `onOpenFile` there.\n   *\n   * ⚠️ The `download` attribute is ignored CROSS-ORIGIN: if the file is\n   * served from another origin the browser navigates to it instead of saving\n   * it. Pass `downloadGlyph=\"arrow-up-right\"` so the control does not promise\n   * a save it cannot perform, or route through `onOpenFile` and a blob.\n   */\n  href?: string;\n}\n\nexport interface FileUploadProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, 'onError' | 'onDragEnter' | 'onDragLeave'> {\n  /**\n   * Forced drop-area visual state — overrides internal drag detection.\n   * The workbench uses this to paint each state without real interaction.\n   * Omit in production: the atom flips to `drag-over` itself while\n   * dragging, and to `error` when `errorMessage` is set.\n   *\n   * Per-file states (uploading / done / per-file errors) are NOT atom-\n   * level — they live on each `FileUploadFileMeta.status`.\n   */\n  state?: FileUploadState;\n  /** Allow selecting more than one file. Defaults to `true`. */\n  multiple?: boolean;\n  /** Standard `<input type=\"file\" accept>` filter, e.g. `\"image/*\"` or `\".pdf,.docx\"`. */\n  accept?: string;\n  /** Disable interaction. Also disables drop and all per-row remove buttons. */\n  disabled?: boolean;\n  /** Heading text inside the drop area. */\n  titleText?: string;\n  /**\n   * Hint line below the title. Falls back to a `multiple`-aware default\n   * (\"Drop files here, or click to browse\" vs \"Drop a file here, or click\n   * to browse\"). When the caller sets `state=\"uploading\"`, the atom\n   * temporarily replaces this with \"Uploading…\" — caller's `helpText`\n   * value is restored once they flip back to default.\n   *\n   * Per-file uploading rows do NOT trigger this swap on their own — the\n   * drop-area copy reflects the caller's declared state, not aggregate\n   * row status. Rows carry their own \"Uploading · 60% of …\" indicators.\n   */\n  helpText?: string;\n  /**\n   * Optional constraint line below the help text — e.g. \"PDF, DOCX · up to\n   * 10 MB\". Caller-controlled copy describing what the page accepts, so it\n   * stays in sync with whatever `accept` filter and validation the page\n   * enforces in `onFiles`. The atom never invents this string — when\n   * omitted, no slot renders. The atom does not enforce anything in it.\n   */\n  allowedTypesText?: string;\n  /**\n   * Page-level error message to render below the drop area (e.g. \"Connection\n   * lost\", \"Server rejected the batch\"). When set, the atom paints the drop\n   * area in the `error` state automatically. Named `error` to match the rest\n   * of the input family's `error?: string`.\n   *\n   * Distinct from per-file errors — set `status: \"error\"` + `errorMessage`\n   * on a `FileUploadFileMeta` to surface a single-file failure inline on\n   * its row instead.\n   */\n  error?: string;\n  /**\n   * @deprecated Renamed to `error` (input-family convention). Still accepted\n   * as an alias for back-compat; `error` wins when both are set.\n   */\n  errorMessage?: string;\n  /**\n   * Files to display in the inline list under the drop area. Rendered\n   * automatically whenever `files.length > 0`. Each entry's `status`\n   * drives its row appearance independently. To render the list elsewhere\n   * on the page, omit `files` and manage that state yourself.\n   */\n  files?: FileUploadFileMeta[];\n  /** Fires with the selected `File[]` whether the user picked via dialog or dropped. */\n  onFiles?: (files: File[]) => void;\n  /**\n   * Fires when a row's remove button is clicked. The caller decides what\n   * \"remove\" means per status — cancel an in-flight upload, drop a queued\n   * file, delete a completed one server-side. The atom doesn't auto-disable\n   * the button during `uploading` so the user always has an escape hatch.\n   */\n  onRemove?: (id: string) => void;\n  /**\n   * Fires when a row's download control is activated. Set this when the\n   * stored file needs an auth header or a signed-URL round trip: the consumer\n   * fetches the bytes itself and saves them (typically `fetch` with the\n   * bearer, then `URL.createObjectURL` — remember to `revokeObjectURL`, and\n   * to pass the filename through, or the file lands named `blob`).\n   *\n   * Takes PRECEDENCE over `FileUploadFileMeta.href`: a consumer that supplied\n   * a handler wants control of what opening means. Set neither and no\n   * download control renders, which is how every existing consumer behaves.\n   */\n  onOpenFile?: (id: string) => void;\n  /**\n   * Glyph for the download control. Defaults to `\"arrow-down\"`. Override to\n   * `\"arrow-up-right\"` when the file opens in a tab rather than saving —\n   * cross-origin `href`, or an `onOpenFile` that previews in-app.\n   */\n  downloadGlyph?: string;\n  /**\n   * Verb in the download control's accessible name, rendered as\n   * `` `${downloadLabel} ${file.name}` ``. Defaults to `\"Download\"`.\n   *\n   * Change it together with `downloadGlyph` whenever the control opens rather\n   * than saves: the glyph alone corrects the promise for sighted users and\n   * leaves screen-reader users being told \"Download\" for a control that\n   * navigates. `downloadLabel=\"Open\"` keeps the two in step.\n   */\n  downloadLabel?: string;\n  /** Fires when a drag enters the drop area. */\n  onDragEnter?: (e: DragEvent<HTMLLabelElement>) => void;\n  /** Fires when a drag leaves the drop area. */\n  onDragLeave?: (e: DragEvent<HTMLLabelElement>) => void;\n  /** Fires when a drop is rejected (e.g. wrong type — for caller-driven validation). */\n  onError?: (reason: string) => void;\n  /** Optional override for the drop-area icon glyph. */\n  iconGlyph?: string;\n  /** Optional slot rendered above the file list (e.g. a summary line). */\n  children?: ReactNode;\n}\n\nexport function FileUpload({\n  state: forcedState,\n  multiple = true,\n  accept,\n  disabled = false,\n  titleText,\n  helpText,\n  allowedTypesText,\n  error,\n  errorMessage,\n  files = [],\n  onFiles,\n  onRemove,\n  onOpenFile,\n  downloadGlyph = 'arrow-down',\n  downloadLabel = 'Download',\n  onDragEnter,\n  onDragLeave,\n  onError: _onError,\n  className,\n  style,\n  iconGlyph = 'cloud-arrow-up',\n  children,\n  ...rest\n}: FileUploadProps) {\n  const inputId = useId();\n  const helpId = useId();\n\n  // Whether the list has a download COLUMN at all — a whole-list property, so\n  // it is computed once here rather than per row (inside the map it re-scanned\n  // `files` for every row, which is O(n²) on exactly the renders a list does\n  // most: one per progress tick during an upload).\n  //\n  // The column exists so the control can be `done`-only without the name column\n  // gaining 24px the moment an upload settles — a reflow of the row the user is\n  // watching. Rows with nothing to fetch render an inert placeholder instead.\n  const listHasDownloads = !!onOpenFile || files.some((f) => !!f.href);\n  const [internalDrag, setInternalDrag] = useState(false);\n\n  // The drop area is intentionally independent of per-file statuses. It\n  // doesn't change copy, busy-state, or cursor automatically based on\n  // whether any row is uploading — the rows speak for themselves via\n  // their own per-row meta + progress strip. The two state spaces stay\n  // orthogonal: caller declares drop-area state explicitly via the\n  // `state` prop, and sets per-file lifecycle via each `file.status`.\n  //\n  // `uploading` here is an explicit drop-area state for cases the rows\n  // can't carry: batch lockouts, pre-file validation, indeterminate\n  // chunked uploads without per-file callbacks. Caller drives it.\n  const isUploading = forcedState === 'uploading';\n\n  // Atom-level error: caller set `error` (or the deprecated `errorMessage`\n  // alias) OR forced state to \"error\". Per-file errors are NOT reflected here —\n  // they're each row's concern.\n  const pageError = error ?? errorMessage;\n  const isPageError = forcedState === 'error' || (!forcedState && !!pageError);\n\n  const dataState: FileUploadState = forcedState\n    ? forcedState\n    : internalDrag\n      ? 'drag-over'\n      : isPageError\n        ? 'error'\n        : 'default';\n\n  const handleChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      if (disabled) return;\n      const list = e.target.files;\n      if (!list || list.length === 0) return;\n      onFiles?.(Array.from(list));\n      // Clear so re-selecting the same file re-fires onChange.\n      e.target.value = '';\n    },\n    [disabled, onFiles],\n  );\n\n  const handleDragEnter = useCallback(\n    (e: DragEvent<HTMLLabelElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n      setInternalDrag(true);\n      onDragEnter?.(e);\n    },\n    [disabled, onDragEnter],\n  );\n\n  const handleDragOver = useCallback(\n    (e: DragEvent<HTMLLabelElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n    },\n    [disabled],\n  );\n\n  const handleDragLeave = useCallback(\n    (e: DragEvent<HTMLLabelElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n      setInternalDrag(false);\n      onDragLeave?.(e);\n    },\n    [disabled, onDragLeave],\n  );\n\n  const handleDrop = useCallback(\n    (e: DragEvent<HTMLLabelElement>) => {\n      if (disabled) return;\n      e.preventDefault();\n      setInternalDrag(false);\n      const list = e.dataTransfer?.files;\n      if (!list || list.length === 0) return;\n      onFiles?.(Array.from(list));\n    },\n    [disabled, onFiles],\n  );\n\n  const resolvedTitle = titleText ?? 'Upload a file';\n  const baseHelp =\n    helpText ??\n    (multiple\n      ? 'Drop files here, or click to browse'\n      : 'Drop a file here, or click to browse');\n  // The uploading state owns the help slot: it swaps to \"Uploading…\" so\n  // the drop area visibly reflects the caller-declared busy phase. Falls\n  // back to the normal copy in every other state.\n  const resolvedHelp = isUploading ? 'Uploading…' : baseHelp;\n\n  return (\n    <div className={cn('uxm-file-upload-wrapper', className)} style={style} {...rest}>\n      <label\n        className=\"uxm-file-upload\"\n        htmlFor={inputId}\n        data-state={dataState}\n        data-disabled={disabled ? 'true' : undefined}\n        aria-busy={isUploading || undefined}\n        onDragEnter={handleDragEnter}\n        onDragOver={handleDragOver}\n        onDragLeave={handleDragLeave}\n        onDrop={handleDrop}\n      >\n        <input\n          id={inputId}\n          className=\"uxm-file-upload__input\"\n          type=\"file\"\n          multiple={multiple}\n          accept={accept}\n          disabled={disabled}\n          aria-invalid={isPageError || undefined}\n          aria-describedby={helpId}\n          onChange={handleChange}\n        />\n        <span className=\"uxm-file-upload__icon\" aria-hidden=\"true\">\n          <Icon glyph={iconGlyph} size={40} />\n        </span>\n        <span className=\"uxm-file-upload__title\">{resolvedTitle}</span>\n        <span id={helpId} className=\"uxm-file-upload__help\">\n          {resolvedHelp}\n        </span>\n        {allowedTypesText && !isUploading && (\n          <span className=\"uxm-file-upload__allowed-types\">{allowedTypesText}</span>\n        )}\n      </label>\n      {pageError && <span className=\"uxm-file-upload__error\">{pageError}</span>}\n      {children}\n      {files.length > 0 && (\n        <ul className=\"uxm-file-upload__list\">\n          {files.map((file) => {\n            const status: FileStatus = file.status ?? 'queued';\n            const isUploading = status === 'uploading';\n            const isDone = status === 'done';\n            const isFileError = status === 'error';\n            const pctFraction =\n              file.progress != null\n                ? Math.max(0, Math.min(1, file.progress))\n                : undefined;\n            const pctLabel =\n              pctFraction != null ? `${Math.round(pctFraction * 100)}%` : undefined;\n            const pctWidth = pctFraction != null ? `${pctFraction * 100}%` : '0%';\n\n            // Icon glyph + color come from the row's status. Default knobs\n            // (rowIconColor etc.) cover queued/uploading; done + error\n            // route through dedicated vars the CSS reads via [data-status].\n            const iconForRow = isDone\n              ? 'check-circle'\n              : isFileError\n                ? 'exclamation-circle'\n                : 'document';\n\n            // Meta line content swaps with status:\n            //   queued / done  → file size\n            //   uploading      → \"Uploading · 61% of 471.0 KB\" (or \"Uploading…\" if no progress)\n            //   error          → per-file errorMessage (or generic fallback)\n            const sizeLabel = formatBytes(file.size);\n            const metaText = isUploading\n              ? pctLabel != null\n                ? `Uploading · ${pctLabel} of ${sizeLabel}`\n                : 'Uploading…'\n              : isFileError\n                ? file.errorMessage ?? 'Upload failed'\n                : sizeLabel;\n\n            return (\n              <li\n                key={file.id}\n                className=\"uxm-file-upload__row\"\n                data-status={status}\n              >\n                <span className=\"uxm-file-upload__row-icon\" aria-hidden=\"true\">\n                  <Icon glyph={iconForRow} size={20} />\n                </span>\n                <span className=\"uxm-file-upload__row-body\">\n                  <span className=\"uxm-file-upload__row-name\">{file.name}</span>\n                  <span className=\"uxm-file-upload__row-meta\">{metaText}</span>\n                </span>\n                {/* Download / open. `done` only — there is nothing stored to\n                    fetch until the upload settles. `onOpenFile` wins over\n                    `href` so a consumer that needs an auth header or a signed\n                    URL is never silently downgraded to a bare navigation. */}\n                {listHasDownloads &&\n                  (isDone && (onOpenFile || file.href) ? (\n                    onOpenFile ? (\n                      <button\n                        type=\"button\"\n                        className=\"uxm-file-upload__row-download\"\n                        aria-label={`${downloadLabel} ${file.name}`}\n                        disabled={disabled}\n                        onClick={() => onOpenFile(file.id)}\n                      >\n                        <Icon glyph={downloadGlyph} size={16} />\n                      </button>\n                    ) : (\n                      // 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.\n                      <a\n                        className=\"uxm-file-upload__row-download\"\n                        // DROPPED while disabled, not merely styled out. An\n                        // anchor keeps `href` in the tab order and Enter still\n                        // follows it, so `pointer-events: none` disables only\n                        // the mouse — a keyboard user could still download from\n                        // a form the consumer switched off. Without `href` the\n                        // element is neither focusable nor a link.\n                        href={disabled ? undefined : file.href}\n                        // Names the saved file: without this the browser uses\n                        // the URL's last segment, so a storage key lands on\n                        // disk as a UUID. Ignored cross-origin, along with the\n                        // download behaviour itself — see `href`'s docs.\n                        download={file.name}\n                        // Cross-origin, `download` is ignored and this becomes a\n                        // real navigation — into a NEW tab, so the user does not\n                        // lose the app and whatever is unsaved beside the list.\n                        // Same-origin the `download` attribute wins and no tab\n                        // opens, so this costs nothing there. It is also what\n                        // makes `rel=\"noopener\"` mean anything.\n                        target=\"_blank\"\n                        rel=\"noopener noreferrer\"\n                        aria-label={`${downloadLabel} ${file.name}`}\n                        aria-disabled={disabled || undefined}\n                      >\n                        <Icon glyph={downloadGlyph} size={16} />\n                      </a>\n                    )\n                  ) : (\n                    // Inert placeholder keeping the column width stable across\n                    // the uploading → done transition.\n                    <span className=\"uxm-file-upload__row-download-slot\" aria-hidden=\"true\" />\n                  ))}\n                <button\n                  type=\"button\"\n                  className=\"uxm-file-upload__row-remove\"\n                  aria-label={\n                    isUploading ? `Cancel ${file.name}` : `Remove ${file.name}`\n                  }\n                  disabled={disabled}\n                  onClick={() => onRemove?.(file.id)}\n                >\n                  <Icon glyph=\"trash\" size={16} />\n                </button>\n                {isUploading && (\n                  <span\n                    className=\"uxm-file-upload__row-progress\"\n                    style={\n                      { '--uxm-file-upload-row-progress': pctWidth } as CSSProperties\n                    }\n                    role=\"progressbar\"\n                    aria-valuenow={pctFraction != null ? Math.round(pctFraction * 100) : undefined}\n                    aria-valuemin={0}\n                    aria-valuemax={100}\n                  />\n                )}\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nfunction formatBytes(bytes: number): string {\n  if (bytes < 1024) return `${bytes} B`;\n  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MB`;\n  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GB`;\n}\n"],"mappings":"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","names":["isUploading"]}

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

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var file_upload_exports = {};
+module.exports = __toCommonJS(file_upload_exports);
+__reExport(file_upload_exports, require("./file-upload.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./file-upload.cjs")
+});
+//# sourceMappingURL=index.cjs.map

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

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

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

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

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

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

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

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

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

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

package/dist/ui/filter-tabs/filter-tabs-preview.cjs

@@ -0,0 +1,116 @@
+"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 filter_tabs_preview_exports = {};
+__export(filter_tabs_preview_exports, {
+  FilterTabsPreview: () => FilterTabsPreview
+});
+module.exports = __toCommonJS(filter_tabs_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_helpers = require("../../helpers/index.cjs");
+var import_ui = require("../../ui/index.cjs");
+const INTERACTIVE_TABS = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-filter-tabs-track-bg": styles.trackBg,
+    "--uxm-filter-tabs-track-border": styles.trackBorder,
+    "--uxm-filter-tabs-track-radius": `${styles.trackRadius}px`,
+    "--uxm-filter-tabs-track-padding": `${styles.trackPadding}px`,
+    "--uxm-filter-tabs-gap": `${styles.gap}px`,
+    "--uxm-filter-tabs-inactive-text": styles.inactiveText,
+    "--uxm-filter-tabs-hover-bg": styles.hoverBg,
+    "--uxm-filter-tabs-hover-text": styles.hoverText,
+    "--uxm-filter-tabs-focus-text": styles.focusText,
+    "--uxm-filter-tabs-focus-ring": styles.focusRing,
+    "--uxm-filter-tabs-active-bg": styles.activeBg,
+    "--uxm-filter-tabs-active-text": styles.activeText,
+    "--uxm-filter-tabs-disabled-text": styles.disabledText,
+    "--uxm-filter-tabs-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-filter-tabs-tab-radius": `${styles.tabRadius}px`,
+    "--uxm-filter-tabs-padding-x": `${styles.paddingX}px`,
+    "--uxm-filter-tabs-padding-y": `${styles.paddingY}px`,
+    "--uxm-filter-tabs-font-size": `${styles.fontSize}px`,
+    "--uxm-filter-tabs-font-weight": styles.fontWeight
+  };
+}
+function StaticShowcase({ state }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "uxm-filter-tabs", role: "tablist", style: { pointerEvents: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": state === "active",
+      tabIndex: -1,
+      className: (0, import_helpers.cn)(
+        "uxm-filter-tabs__tab",
+        state === "active" && "uxm-filter-tabs__tab--active",
+        state === "hover" && "uxm-filter-tabs__tab--state-hover",
+        state === "focus" && "uxm-filter-tabs__tab--state-focus"
+      ),
+      disabled: state === "disabled",
+      children: "Active"
+    }
+  ) });
+}
+function FilterTabsPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const [active, setActive] = (0, import_react.useState)(INTERACTIVE_TABS[0].value);
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_ui.FilterTabs,
+        {
+          value: active,
+          onChange: setActive,
+          options: INTERACTIVE_TABS.map((t) => ({
+            value: t.value,
+            label: t.label,
+            disabled: state === "disabled"
+          }))
+        }
+      )
+    ] })
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FilterTabsPreview
+});
+//# sourceMappingURL=filter-tabs-preview.cjs.map

package/dist/ui/filter-tabs/filter-tabs-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/filter-tabs/filter-tabs-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { FilterTabs } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst INTERACTIVE_TABS = [\n  { value: 'all', label: 'All' },\n  { value: 'active', label: 'Active' },\n  { value: 'draft', label: 'Draft' },\n  { value: 'archived', label: 'Archived' },\n];\n\n/**\n * Project every registry knob as a `--uxm-filter-tabs-*` custom property\n * on the wrapper. Both the static showcase and the interactive instance\n * below read from the same vars; the showcase is inert (`pointer-events:\n * none` + `tabIndex={-1}`) so the forced state isn't overridden by real\n * input, and the interactive instance exercises the production `:hover`\n * / `:focus-visible` / `:disabled` rules on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-filter-tabs-track-bg': styles.trackBg as string,\n    '--uxm-filter-tabs-track-border': styles.trackBorder as string,\n    '--uxm-filter-tabs-track-radius': `${styles.trackRadius}px`,\n    '--uxm-filter-tabs-track-padding': `${styles.trackPadding}px`,\n    '--uxm-filter-tabs-gap': `${styles.gap}px`,\n    '--uxm-filter-tabs-inactive-text': styles.inactiveText as string,\n    '--uxm-filter-tabs-hover-bg': styles.hoverBg as string,\n    '--uxm-filter-tabs-hover-text': styles.hoverText as string,\n    '--uxm-filter-tabs-focus-text': styles.focusText as string,\n    '--uxm-filter-tabs-focus-ring': styles.focusRing as string,\n    '--uxm-filter-tabs-active-bg': styles.activeBg as string,\n    '--uxm-filter-tabs-active-text': styles.activeText as string,\n    '--uxm-filter-tabs-disabled-text': styles.disabledText as string,\n    '--uxm-filter-tabs-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-filter-tabs-tab-radius': `${styles.tabRadius}px`,\n    '--uxm-filter-tabs-padding-x': `${styles.paddingX}px`,\n    '--uxm-filter-tabs-padding-y': `${styles.paddingY}px`,\n    '--uxm-filter-tabs-font-size': `${styles.fontSize}px`,\n    '--uxm-filter-tabs-font-weight': styles.fontWeight as string,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE filter chip wrapped in the track surface so the\n * full styling context reads (track bg/border + chip interior). Inert:\n * `pointer-events: none` blocks the production `:hover` from firing on\n * mouse-over, and `tabIndex={-1}` keeps the button out of the focus\n * order so `:focus-visible` can't fire from a real Tab press.\n *\n * Hand-rendered (not the real `<FilterTabs>` atom) because the atom\n * doesn't expose per-option `className` for the forced-state class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  return (\n    <div className=\"uxm-filter-tabs\" role=\"tablist\" style={{ pointerEvents: 'none' }}>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={state === 'active'}\n        tabIndex={-1}\n        className={cn(\n          'uxm-filter-tabs__tab',\n          state === 'active' && 'uxm-filter-tabs__tab--active',\n          state === 'hover' && 'uxm-filter-tabs__tab--state-hover',\n          state === 'focus' && 'uxm-filter-tabs__tab--state-focus',\n        )}\n        disabled={state === 'disabled'}\n      >\n        Active\n      </button>\n    </div>\n  );\n}\n\nexport function FilterTabsPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const [active, setActive] = useState(INTERACTIVE_TABS[0].value);\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — full <FilterTabs> atom with four options.\n          Real `:hover` / `:focus-visible` / selection toggles exercise\n          the production CSS via the projected vars above. The State\n          dropdown only carries through to `disabled` here; the rest are\n          exercised by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <FilterTabs\n          value={active}\n          onChange={setActive}\n          options={INTERACTIVE_TABS.map((t) => ({\n            value: t.value,\n            label: t.label,\n            disabled: state === 'disabled',\n          }))}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA6DM;AA7DN,mBAA6C;AAE7C,qBAAmB;AAEnB,gBAA2B;AAI3B,MAAM,mBAAmB;AAAA,EACvB,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,EAC7B,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,EACnC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AACzC;AAUA,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,8BAA8B,OAAO;AAAA,IACrC,gCAAgC,OAAO;AAAA,IACvC,gCAAgC,OAAO;AAAA,IACvC,gCAAgC,OAAO;AAAA,IACvC,+BAA+B,OAAO;AAAA,IACtC,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAYA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,SACE,4CAAC,SAAI,WAAU,mBAAkB,MAAK,WAAU,OAAO,EAAE,eAAe,OAAO,GAC7E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe,UAAU;AAAA,MACzB,UAAU;AAAA,MACV,eAAW;AAAA,QACT;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,UAAU,UAAU;AAAA,MACrB;AAAA;AAAA,EAED,GACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,CAAC,QAAQ,SAAS,QAAI,uBAAS,iBAAiB,CAAC,EAAE,KAAK;AAC9D,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,6CAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E;AAAA,iDAAC,SACC;AAAA,mDAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,4CAAC,kBAAe,OAAc;AAAA,OAChC;AAAA,IAOA,6CAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,kDAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,SAAS,iBAAiB,IAAI,CAAC,OAAO;AAAA,YACpC,OAAO,EAAE;AAAA,YACT,OAAO,EAAE;AAAA,YACT,UAAU,UAAU;AAAA,UACtB,EAAE;AAAA;AAAA,MACJ;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/ui/filter-tabs/filter-tabs-preview.d.ts

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

package/dist/ui/filter-tabs/filter-tabs-preview.d.ts.map

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

package/dist/ui/filter-tabs/filter-tabs-preview.js

@@ -0,0 +1,92 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { FilterTabs } from "../../ui/index.js";
+const INTERACTIVE_TABS = [
+  { value: "all", label: "All" },
+  { value: "active", label: "Active" },
+  { value: "draft", label: "Draft" },
+  { value: "archived", label: "Archived" }
+];
+function buildVars(styles) {
+  return {
+    "--uxm-filter-tabs-track-bg": styles.trackBg,
+    "--uxm-filter-tabs-track-border": styles.trackBorder,
+    "--uxm-filter-tabs-track-radius": `${styles.trackRadius}px`,
+    "--uxm-filter-tabs-track-padding": `${styles.trackPadding}px`,
+    "--uxm-filter-tabs-gap": `${styles.gap}px`,
+    "--uxm-filter-tabs-inactive-text": styles.inactiveText,
+    "--uxm-filter-tabs-hover-bg": styles.hoverBg,
+    "--uxm-filter-tabs-hover-text": styles.hoverText,
+    "--uxm-filter-tabs-focus-text": styles.focusText,
+    "--uxm-filter-tabs-focus-ring": styles.focusRing,
+    "--uxm-filter-tabs-active-bg": styles.activeBg,
+    "--uxm-filter-tabs-active-text": styles.activeText,
+    "--uxm-filter-tabs-disabled-text": styles.disabledText,
+    "--uxm-filter-tabs-disabled-opacity": styles.disabledOpacity != null ? String(styles.disabledOpacity) : void 0,
+    "--uxm-filter-tabs-tab-radius": `${styles.tabRadius}px`,
+    "--uxm-filter-tabs-padding-x": `${styles.paddingX}px`,
+    "--uxm-filter-tabs-padding-y": `${styles.paddingY}px`,
+    "--uxm-filter-tabs-font-size": `${styles.fontSize}px`,
+    "--uxm-filter-tabs-font-weight": styles.fontWeight
+  };
+}
+function StaticShowcase({ state }) {
+  return /* @__PURE__ */ jsx("div", { className: "uxm-filter-tabs", role: "tablist", style: { pointerEvents: "none" }, children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": state === "active",
+      tabIndex: -1,
+      className: cn(
+        "uxm-filter-tabs__tab",
+        state === "active" && "uxm-filter-tabs__tab--active",
+        state === "hover" && "uxm-filter-tabs__tab--state-hover",
+        state === "focus" && "uxm-filter-tabs__tab--state-focus"
+      ),
+      disabled: state === "disabled",
+      children: "Active"
+    }
+  ) });
+}
+function FilterTabsPreview({ styles, variants }) {
+  const state = variants.state ?? "default";
+  const [active, setActive] = useState(INTERACTIVE_TABS[0].value);
+  const cssVars = buildVars(styles);
+  const sectionLabel = {
+    fontSize: 11,
+    color: "var(--color-text-muted)",
+    marginBottom: 12,
+    letterSpacing: 0.5,
+    textTransform: "uppercase"
+  };
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 32, ...cssVars }, children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("div", { style: sectionLabel, children: [
+        state,
+        " state"
+      ] }),
+      /* @__PURE__ */ jsx(StaticShowcase, { state })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid var(--color-border)", paddingTop: 16 }, children: [
+      /* @__PURE__ */ jsx("div", { style: sectionLabel, children: "Interactive" }),
+      /* @__PURE__ */ jsx(
+        FilterTabs,
+        {
+          value: active,
+          onChange: setActive,
+          options: INTERACTIVE_TABS.map((t) => ({
+            value: t.value,
+            label: t.label,
+            disabled: state === "disabled"
+          }))
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  FilterTabsPreview
+};
+//# sourceMappingURL=filter-tabs-preview.js.map

package/dist/ui/filter-tabs/filter-tabs-preview.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/filter-tabs/filter-tabs-preview.tsx"],"sourcesContent":["import { useState, type CSSProperties } from 'react';\n\nimport { cn } from '@/helpers';\nimport type { PreviewProps } from '@/previews/types';\nimport { FilterTabs } from '@/ui';\n\ntype Styles = PreviewProps['styles'];\n\nconst INTERACTIVE_TABS = [\n  { value: 'all', label: 'All' },\n  { value: 'active', label: 'Active' },\n  { value: 'draft', label: 'Draft' },\n  { value: 'archived', label: 'Archived' },\n];\n\n/**\n * Project every registry knob as a `--uxm-filter-tabs-*` custom property\n * on the wrapper. Both the static showcase and the interactive instance\n * below read from the same vars; the showcase is inert (`pointer-events:\n * none` + `tabIndex={-1}`) so the forced state isn't overridden by real\n * input, and the interactive instance exercises the production `:hover`\n * / `:focus-visible` / `:disabled` rules on real pointer + keyboard.\n */\nfunction buildVars(styles: Styles): CSSProperties {\n  return {\n    '--uxm-filter-tabs-track-bg': styles.trackBg as string,\n    '--uxm-filter-tabs-track-border': styles.trackBorder as string,\n    '--uxm-filter-tabs-track-radius': `${styles.trackRadius}px`,\n    '--uxm-filter-tabs-track-padding': `${styles.trackPadding}px`,\n    '--uxm-filter-tabs-gap': `${styles.gap}px`,\n    '--uxm-filter-tabs-inactive-text': styles.inactiveText as string,\n    '--uxm-filter-tabs-hover-bg': styles.hoverBg as string,\n    '--uxm-filter-tabs-hover-text': styles.hoverText as string,\n    '--uxm-filter-tabs-focus-text': styles.focusText as string,\n    '--uxm-filter-tabs-focus-ring': styles.focusRing as string,\n    '--uxm-filter-tabs-active-bg': styles.activeBg as string,\n    '--uxm-filter-tabs-active-text': styles.activeText as string,\n    '--uxm-filter-tabs-disabled-text': styles.disabledText as string,\n    '--uxm-filter-tabs-disabled-opacity':\n      styles.disabledOpacity != null ? String(styles.disabledOpacity) : undefined,\n    '--uxm-filter-tabs-tab-radius': `${styles.tabRadius}px`,\n    '--uxm-filter-tabs-padding-x': `${styles.paddingX}px`,\n    '--uxm-filter-tabs-padding-y': `${styles.paddingY}px`,\n    '--uxm-filter-tabs-font-size': `${styles.fontSize}px`,\n    '--uxm-filter-tabs-font-weight': styles.fontWeight as string,\n  } as CSSProperties;\n}\n\n/**\n * Static showcase — ONE filter chip wrapped in the track surface so the\n * full styling context reads (track bg/border + chip interior). Inert:\n * `pointer-events: none` blocks the production `:hover` from firing on\n * mouse-over, and `tabIndex={-1}` keeps the button out of the focus\n * order so `:focus-visible` can't fire from a real Tab press.\n *\n * Hand-rendered (not the real `<FilterTabs>` atom) because the atom\n * doesn't expose per-option `className` for the forced-state class.\n */\nfunction StaticShowcase({ state }: { state: string }) {\n  return (\n    <div className=\"uxm-filter-tabs\" role=\"tablist\" style={{ pointerEvents: 'none' }}>\n      <button\n        type=\"button\"\n        role=\"tab\"\n        aria-selected={state === 'active'}\n        tabIndex={-1}\n        className={cn(\n          'uxm-filter-tabs__tab',\n          state === 'active' && 'uxm-filter-tabs__tab--active',\n          state === 'hover' && 'uxm-filter-tabs__tab--state-hover',\n          state === 'focus' && 'uxm-filter-tabs__tab--state-focus',\n        )}\n        disabled={state === 'disabled'}\n      >\n        Active\n      </button>\n    </div>\n  );\n}\n\nexport function FilterTabsPreview({ styles, variants }: PreviewProps) {\n  const state = (variants.state as string) ?? 'default';\n  const [active, setActive] = useState(INTERACTIVE_TABS[0].value);\n  const cssVars = buildVars(styles);\n\n  const sectionLabel = {\n    fontSize: 11,\n    color: 'var(--color-text-muted)',\n    marginBottom: 12,\n    letterSpacing: 0.5,\n    textTransform: 'uppercase' as const,\n  };\n\n  return (\n    <div style={{ display: 'flex', flexDirection: 'column', gap: 32, ...cssVars } as CSSProperties}>\n      <div>\n        <div style={sectionLabel}>{state} state</div>\n        <StaticShowcase state={state} />\n      </div>\n\n      {/* Interactive instance — full <FilterTabs> atom with four options.\n          Real `:hover` / `:focus-visible` / selection toggles exercise\n          the production CSS via the projected vars above. The State\n          dropdown only carries through to `disabled` here; the rest are\n          exercised by real pointer + keyboard. */}\n      <div style={{ borderTop: '1px solid var(--color-border)', paddingTop: 16 }}>\n        <div style={sectionLabel}>Interactive</div>\n        <FilterTabs\n          value={active}\n          onChange={setActive}\n          options={INTERACTIVE_TABS.map((t) => ({\n            value: t.value,\n            label: t.label,\n            disabled: state === 'disabled',\n          }))}\n        />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"AA6DM,cAmCE,YAnCF;AA7DN,SAAS,gBAAoC;AAE7C,SAAS,UAAU;AAEnB,SAAS,kBAAkB;AAI3B,MAAM,mBAAmB;AAAA,EACvB,EAAE,OAAO,OAAO,OAAO,MAAM;AAAA,EAC7B,EAAE,OAAO,UAAU,OAAO,SAAS;AAAA,EACnC,EAAE,OAAO,SAAS,OAAO,QAAQ;AAAA,EACjC,EAAE,OAAO,YAAY,OAAO,WAAW;AACzC;AAUA,SAAS,UAAU,QAA+B;AAChD,SAAO;AAAA,IACL,8BAA8B,OAAO;AAAA,IACrC,kCAAkC,OAAO;AAAA,IACzC,kCAAkC,GAAG,OAAO,WAAW;AAAA,IACvD,mCAAmC,GAAG,OAAO,YAAY;AAAA,IACzD,yBAAyB,GAAG,OAAO,GAAG;AAAA,IACtC,mCAAmC,OAAO;AAAA,IAC1C,8BAA8B,OAAO;AAAA,IACrC,gCAAgC,OAAO;AAAA,IACvC,gCAAgC,OAAO;AAAA,IACvC,gCAAgC,OAAO;AAAA,IACvC,+BAA+B,OAAO;AAAA,IACtC,iCAAiC,OAAO;AAAA,IACxC,mCAAmC,OAAO;AAAA,IAC1C,sCACE,OAAO,mBAAmB,OAAO,OAAO,OAAO,eAAe,IAAI;AAAA,IACpE,gCAAgC,GAAG,OAAO,SAAS;AAAA,IACnD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,+BAA+B,GAAG,OAAO,QAAQ;AAAA,IACjD,iCAAiC,OAAO;AAAA,EAC1C;AACF;AAYA,SAAS,eAAe,EAAE,MAAM,GAAsB;AACpD,SACE,oBAAC,SAAI,WAAU,mBAAkB,MAAK,WAAU,OAAO,EAAE,eAAe,OAAO,GAC7E;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL,MAAK;AAAA,MACL,iBAAe,UAAU;AAAA,MACzB,UAAU;AAAA,MACV,WAAW;AAAA,QACT;AAAA,QACA,UAAU,YAAY;AAAA,QACtB,UAAU,WAAW;AAAA,QACrB,UAAU,WAAW;AAAA,MACvB;AAAA,MACA,UAAU,UAAU;AAAA,MACrB;AAAA;AAAA,EAED,GACF;AAEJ;AAEO,SAAS,kBAAkB,EAAE,QAAQ,SAAS,GAAiB;AACpE,QAAM,QAAS,SAAS,SAAoB;AAC5C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,iBAAiB,CAAC,EAAE,KAAK;AAC9D,QAAM,UAAU,UAAU,MAAM;AAEhC,QAAM,eAAe;AAAA,IACnB,UAAU;AAAA,IACV,OAAO;AAAA,IACP,cAAc;AAAA,IACd,eAAe;AAAA,IACf,eAAe;AAAA,EACjB;AAEA,SACE,qBAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,eAAe,UAAU,KAAK,IAAI,GAAG,QAAQ,GAC1E;AAAA,yBAAC,SACC;AAAA,2BAAC,SAAI,OAAO,cAAe;AAAA;AAAA,QAAM;AAAA,SAAM;AAAA,MACvC,oBAAC,kBAAe,OAAc;AAAA,OAChC;AAAA,IAOA,qBAAC,SAAI,OAAO,EAAE,WAAW,iCAAiC,YAAY,GAAG,GACvE;AAAA,0BAAC,SAAI,OAAO,cAAc,yBAAW;AAAA,MACrC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV,SAAS,iBAAiB,IAAI,CAAC,OAAO;AAAA,YACpC,OAAO,EAAE;AAAA,YACT,OAAO,EAAE;AAAA,YACT,UAAU,UAAU;AAAA,UACtB,EAAE;AAAA;AAAA,MACJ;AAAA,OACF;AAAA,KACF;AAEJ;","names":[]}