@designa8/vibedesign-stripe-deepseek-2-176b 0.2.3 → 0.2.4

package/README.md

@@ -1,6 +1,6 @@
 # @designa8/vibedesign-stripe-deepseek-2-176b
 
-Complete design system generated by Atoms Design, version **0.2.3**.
+Complete design system generated by Atoms Design, version **0.2.4**.
 Tokens, atoms, molecules, organisms, and templates — import from the package root;
 never hardcode visual values in consumer code.
 

package/dist/index.cjs

@@ -7274,15 +7274,30 @@ var React35 = __toESM(require("react"));
 var import_jsx_runtime35 = require("react/jsx-runtime");
 var cn29 = (...values) => values.filter(Boolean).join(" ");
 var tabular = { fontVariantNumeric: "tabular-nums" };
+var clampPct = (value) => Math.min(100, Math.max(0, value));
+var formatSize = (size) => {
+  if (size === void 0 || size === null) return void 0;
+  if (typeof size === "string") return size.trim() || void 0;
+  if (!Number.isFinite(size) || size < 0) return void 0;
+  if (size < 1024) return `${Math.round(size)} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = size / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`;
+};
 var FileUpload = React35.forwardRef(
   ({
     status = "idle",
     title = "Upload payouts file",
     hint = "CSV, up to 10 MB",
     accept = ".csv",
-    fileName = "payouts.csv",
-    fileSize = "42 KB",
-    progress = 0,
+    fileName,
+    fileSize,
+    progress,
     errorLabel = "Failed",
     actionLabel = "Upload CSV",
     onFileSelect,
@@ -7292,17 +7307,24 @@ var FileUpload = React35.forwardRef(
   }, ref) => {
     const inputRef = React35.useRef(null);
     const [dragActive, setDragActive] = React35.useState(false);
-    const resolved = status === "idle" && dragActive ? "dragging" : status;
-    const dragging = resolved === "dragging";
-    const pct = Math.min(100, Math.max(0, progress));
+    const name = typeof fileName === "string" ? fileName.trim() : "";
+    const hasFile = name.length > 0;
+    const sizeLabel = formatSize(fileSize);
+    const resolved = !hasFile && status === "idle" && dragActive ? "dragging" : status;
+    const dragging = !hasFile && resolved === "dragging";
+    const failed = resolved === "error";
+    const errorOnDropzone = failed && !hasFile;
+    const pct = progress === void 0 ? resolved === "complete" ? 100 : 0 : clampPct(progress);
+    const barPct = failed ? progress === void 0 ? 18 : Math.min(pct, 18) : pct;
     const openPicker = () => inputRef.current?.click();
-    const fileInput = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    const fileInput = /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "relative", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
       Input,
       {
         ref: inputRef,
         type: "file",
         accept,
         ariaLabel: title,
+        "aria-invalid": failed || void 0,
         chrome: "none",
         className: "sr-only",
         onChange: (event) => {
@@ -7310,8 +7332,8 @@ var FileUpload = React35.forwardRef(
           if (file) onFileSelect?.(file);
         }
       }
-    );
-    if (resolved === "idle" || dragging) {
+    ) });
+    if (!hasFile) {
       return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
         "div",
         {
@@ -7331,7 +7353,7 @@ var FileUpload = React35.forwardRef(
           className: cn29(
             "flex w-full flex-col items-center gap-md rounded-lg border border-dashed px-xl py-xl text-center",
             "transition duration-200 ease-out",
-            dragging ? "border-primary bg-primary-subdued/70" : "border-hairline-strong bg-canvas",
+            dragging ? "border-primary bg-primary-subdued/70" : errorOnDropzone ? "border-semantic-error bg-canvas" : "border-hairline-strong bg-canvas",
             className
           ),
           ...rest,
@@ -7351,7 +7373,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 1.25,
                       className: cn29(
                         "transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   ),
@@ -7363,7 +7385,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 2,
                       className: cn29(
                         "absolute left-1/2 top-[60%] -translate-x-1/2 -translate-y-1/2 transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   )
@@ -7383,12 +7405,12 @@ var FileUpload = React35.forwardRef(
               ),
               /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-caption text-muted", children: hint })
             ] }),
-            dragging ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel })
+            dragging ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel }),
+            errorOnDropzone ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { "aria-live": "polite", className: "text-caption text-semantic-error", children: errorLabel }) : null
           ]
         }
       );
     }
-    const failed = resolved === "error";
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "div",
       {
@@ -7401,18 +7423,27 @@ var FileUpload = React35.forwardRef(
         ),
         ...rest,
         children: [
+          fileInput,
           /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-start gap-md", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "file", size: 20, strokeWidth: 1.5, className: "mt-xxs text-ink" }),
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              Icon,
+              {
+                name: "file",
+                size: 20,
+                strokeWidth: 1.5,
+                className: "mt-xxs text-ink"
+              }
+            ),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "truncate text-body-md text-ink", children: fileName }),
-              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-xxs text-caption text-muted", children: fileSize })
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "truncate text-body-md text-ink", children: name }),
+              sizeLabel ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("p", { className: "mt-xxs text-caption text-muted", children: sizeLabel }) : null
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               Button,
               {
                 variant: "bare",
                 size: "inline",
-                "aria-label": `Remove ${fileName}`,
+                "aria-label": `Remove ${name}`,
                 onClick: onRemove,
                 className: "-mr-xs -mt-xs shrink-0 rounded-sm p-xs text-muted hover:text-ink",
                 children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "x", size: 16, strokeWidth: 1.75 })
@@ -7424,7 +7455,7 @@ var FileUpload = React35.forwardRef(
               "div",
               {
                 role: "progressbar",
-                "aria-label": `${fileName} upload progress`,
+                "aria-label": `${name} upload progress`,
                 "aria-valuemin": 0,
                 "aria-valuemax": 100,
                 "aria-valuenow": failed ? void 0 : pct,
@@ -7438,7 +7469,7 @@ var FileUpload = React35.forwardRef(
                       "block h-full rounded-full transition-[width,background-color] duration-200 ease-out",
                       failed ? "bg-semantic-error" : "bg-primary"
                     ),
-                    style: { width: `${failed ? Math.min(pct, 18) : pct}%` }
+                    style: { width: `${barPct}%` }
                   }
                 )
               }

package/dist/index.js

@@ -7144,15 +7144,30 @@ import * as React35 from "react";
 import { jsx as jsx35, jsxs as jsxs32 } from "react/jsx-runtime";
 var cn29 = (...values) => values.filter(Boolean).join(" ");
 var tabular = { fontVariantNumeric: "tabular-nums" };
+var clampPct = (value) => Math.min(100, Math.max(0, value));
+var formatSize = (size) => {
+  if (size === void 0 || size === null) return void 0;
+  if (typeof size === "string") return size.trim() || void 0;
+  if (!Number.isFinite(size) || size < 0) return void 0;
+  if (size < 1024) return `${Math.round(size)} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = size / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`;
+};
 var FileUpload = React35.forwardRef(
   ({
     status = "idle",
     title = "Upload payouts file",
     hint = "CSV, up to 10 MB",
     accept = ".csv",
-    fileName = "payouts.csv",
-    fileSize = "42 KB",
-    progress = 0,
+    fileName,
+    fileSize,
+    progress,
     errorLabel = "Failed",
     actionLabel = "Upload CSV",
     onFileSelect,
@@ -7162,17 +7177,24 @@ var FileUpload = React35.forwardRef(
   }, ref) => {
     const inputRef = React35.useRef(null);
     const [dragActive, setDragActive] = React35.useState(false);
-    const resolved = status === "idle" && dragActive ? "dragging" : status;
-    const dragging = resolved === "dragging";
-    const pct = Math.min(100, Math.max(0, progress));
+    const name = typeof fileName === "string" ? fileName.trim() : "";
+    const hasFile = name.length > 0;
+    const sizeLabel = formatSize(fileSize);
+    const resolved = !hasFile && status === "idle" && dragActive ? "dragging" : status;
+    const dragging = !hasFile && resolved === "dragging";
+    const failed = resolved === "error";
+    const errorOnDropzone = failed && !hasFile;
+    const pct = progress === void 0 ? resolved === "complete" ? 100 : 0 : clampPct(progress);
+    const barPct = failed ? progress === void 0 ? 18 : Math.min(pct, 18) : pct;
     const openPicker = () => inputRef.current?.click();
-    const fileInput = /* @__PURE__ */ jsx35(
+    const fileInput = /* @__PURE__ */ jsx35("div", { className: "relative", children: /* @__PURE__ */ jsx35(
       Input,
       {
         ref: inputRef,
         type: "file",
         accept,
         ariaLabel: title,
+        "aria-invalid": failed || void 0,
         chrome: "none",
         className: "sr-only",
         onChange: (event) => {
@@ -7180,8 +7202,8 @@ var FileUpload = React35.forwardRef(
           if (file) onFileSelect?.(file);
         }
       }
-    );
-    if (resolved === "idle" || dragging) {
+    ) });
+    if (!hasFile) {
       return /* @__PURE__ */ jsxs32(
         "div",
         {
@@ -7201,7 +7223,7 @@ var FileUpload = React35.forwardRef(
           className: cn29(
             "flex w-full flex-col items-center gap-md rounded-lg border border-dashed px-xl py-xl text-center",
             "transition duration-200 ease-out",
-            dragging ? "border-primary bg-primary-subdued/70" : "border-hairline-strong bg-canvas",
+            dragging ? "border-primary bg-primary-subdued/70" : errorOnDropzone ? "border-semantic-error bg-canvas" : "border-hairline-strong bg-canvas",
             className
           ),
           ...rest,
@@ -7221,7 +7243,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 1.25,
                       className: cn29(
                         "transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   ),
@@ -7233,7 +7255,7 @@ var FileUpload = React35.forwardRef(
                       strokeWidth: 2,
                       className: cn29(
                         "absolute left-1/2 top-[60%] -translate-x-1/2 -translate-y-1/2 transition-colors duration-200 ease-out",
-                        dragging ? "text-primary" : "text-ink"
+                        dragging ? "text-primary" : errorOnDropzone ? "text-semantic-error" : "text-ink"
                       )
                     }
                   )
@@ -7253,12 +7275,12 @@ var FileUpload = React35.forwardRef(
               ),
               /* @__PURE__ */ jsx35("span", { className: "text-caption text-muted", children: hint })
             ] }),
-            dragging ? null : /* @__PURE__ */ jsx35(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel })
+            dragging ? null : /* @__PURE__ */ jsx35(Button, { variant: "secondary", size: "sm", onClick: openPicker, children: actionLabel }),
+            errorOnDropzone ? /* @__PURE__ */ jsx35("p", { "aria-live": "polite", className: "text-caption text-semantic-error", children: errorLabel }) : null
           ]
         }
       );
     }
-    const failed = resolved === "error";
     return /* @__PURE__ */ jsxs32(
       "div",
       {
@@ -7271,18 +7293,27 @@ var FileUpload = React35.forwardRef(
         ),
         ...rest,
         children: [
+          fileInput,
           /* @__PURE__ */ jsxs32("div", { className: "flex items-start gap-md", children: [
-            /* @__PURE__ */ jsx35(Icon, { name: "file", size: 20, strokeWidth: 1.5, className: "mt-xxs text-ink" }),
+            /* @__PURE__ */ jsx35(
+              Icon,
+              {
+                name: "file",
+                size: 20,
+                strokeWidth: 1.5,
+                className: "mt-xxs text-ink"
+              }
+            ),
             /* @__PURE__ */ jsxs32("div", { className: "min-w-0 flex-1", children: [
-              /* @__PURE__ */ jsx35("p", { className: "truncate text-body-md text-ink", children: fileName }),
-              /* @__PURE__ */ jsx35("p", { className: "mt-xxs text-caption text-muted", children: fileSize })
+              /* @__PURE__ */ jsx35("p", { className: "truncate text-body-md text-ink", children: name }),
+              sizeLabel ? /* @__PURE__ */ jsx35("p", { className: "mt-xxs text-caption text-muted", children: sizeLabel }) : null
             ] }),
             /* @__PURE__ */ jsx35(
               Button,
               {
                 variant: "bare",
                 size: "inline",
-                "aria-label": `Remove ${fileName}`,
+                "aria-label": `Remove ${name}`,
                 onClick: onRemove,
                 className: "-mr-xs -mt-xs shrink-0 rounded-sm p-xs text-muted hover:text-ink",
                 children: /* @__PURE__ */ jsx35(Icon, { name: "x", size: 16, strokeWidth: 1.75 })
@@ -7294,7 +7325,7 @@ var FileUpload = React35.forwardRef(
               "div",
               {
                 role: "progressbar",
-                "aria-label": `${fileName} upload progress`,
+                "aria-label": `${name} upload progress`,
                 "aria-valuemin": 0,
                 "aria-valuemax": 100,
                 "aria-valuenow": failed ? void 0 : pct,
@@ -7308,7 +7339,7 @@ var FileUpload = React35.forwardRef(
                       "block h-full rounded-full transition-[width,background-color] duration-200 ease-out",
                       failed ? "bg-semantic-error" : "bg-primary"
                     ),
-                    style: { width: `${failed ? Math.min(pct, 18) : pct}%` }
+                    style: { width: `${barPct}%` }
                   }
                 )
               }

package/dist/styles.css

@@ -3701,11 +3701,6 @@
       display: inline-flex;
     }
   }
-  .xl\:grid-cols-3 {
-    @media (width >= 1280px) {
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
-  }
   .dark\:opacity-40 {
     &:where([data-theme="dark"], [data-theme="dark"] *) {
       opacity: 40%;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designa8/vibedesign-stripe-deepseek-2-176b",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Complete design system \"My Project stripe-deepseek\" generated by Atoms Design.",
   "main": "dist/index.cjs",
   "module": "dist/index.js",

package/src/atoms/FileUpload/FileUpload.tsx

@@ -8,8 +8,10 @@ const cn = (...values: Array<string | false | null | undefined>) =>
   values.filter(Boolean).join(" ");
 
 /**
- * `idle` and `dragging` share the dashed drop region; `uploading`, `complete`,
- * and `error` share the single-file card with its progress readout.
+ * `idle` and `dragging` share the dashed drop region; `uploading` and
+ * `complete` share the single-file card with its progress readout. `error`
+ * renders the card when a file is tracked, otherwise the drop region carrying
+ * the error tint and message so the user can still pick a file.
  */
 export type FileUploadStatus =
   | "idle"
@@ -28,13 +30,16 @@ export interface FileUploadProps
   hint?: string;
   /** Comma separated accept list handed to the file input, e.g. `.csv`. */
   accept?: string;
-  /** Name of the file being tracked by the card states. */
+  /**
+   * Name of the file being tracked. When omitted (or empty) no file row is
+   * rendered in any status — the drop region is shown instead.
+   */
   fileName?: string;
-  /** Human readable size of that file. */
-  fileSize?: string;
-  /** Upload completion, 0–100. */
+  /** Size of that file, either a readable label or a raw byte count. */
+  fileSize?: string | number;
+  /** Upload completion, 0–100. Defaults to full when `status` is `complete`. */
   progress?: number;
-  /** Readout used instead of the percentage when `status` is `error`. */
+  /** Message shown under the control when `status` is `error`. */
   errorLabel?: string;
   /** Label of the picker button inside the drop region. */
   actionLabel?: string;
@@ -46,6 +51,24 @@ export interface FileUploadProps
 
 const tabular = { fontVariantNumeric: "tabular-nums" as const };
 
+const clampPct = (value: number) => Math.min(100, Math.max(0, value));
+
+/** Reads a raw byte count as `1.2 MB`, leaving string labels untouched. */
+const formatSize = (size: string | number | undefined): string | undefined => {
+  if (size === undefined || size === null) return undefined;
+  if (typeof size === "string") return size.trim() || undefined;
+  if (!Number.isFinite(size) || size < 0) return undefined;
+  if (size < 1024) return `${Math.round(size)} B`;
+  const units = ["KB", "MB", "GB"];
+  let value = size / 1024;
+  let unit = 0;
+  while (value >= 1024 && unit < units.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  return `${value >= 10 ? Math.round(value) : Math.round(value * 10) / 10} ${units[unit]}`;
+};
+
 export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
   (
     {
@@ -53,9 +76,9 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
       title = "Upload payouts file",
       hint = "CSV, up to 10 MB",
       accept = ".csv",
-      fileName = "payouts.csv",
-      fileSize = "42 KB",
-      progress = 0,
+      fileName,
+      fileSize,
+      progress,
       errorLabel = "Failed",
       actionLabel = "Upload CSV",
       onFileSelect,
@@ -68,30 +91,51 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
     const inputRef = React.useRef<HTMLInputElement>(null);
     const [dragActive, setDragActive] = React.useState(false);
 
+    const name = typeof fileName === "string" ? fileName.trim() : "";
+    const hasFile = name.length > 0;
+    const sizeLabel = formatSize(fileSize);
+
     // A live drag outranks an idle parent, but any explicit card state wins.
     const resolved: FileUploadStatus =
-      status === "idle" && dragActive ? "dragging" : status;
-    const dragging = resolved === "dragging";
-    const pct = Math.min(100, Math.max(0, progress));
+      !hasFile && status === "idle" && dragActive ? "dragging" : status;
+    const dragging = !hasFile && resolved === "dragging";
+    const failed = resolved === "error";
+    // An error with no file keeps the drop region usable, only tinted.
+    const errorOnDropzone = failed && !hasFile;
+
+    const pct =
+      progress === undefined
+        ? resolved === "complete"
+          ? 100
+          : 0
+        : clampPct(progress);
+    const barPct = failed
+      ? progress === undefined
+        ? 18
+        : Math.min(pct, 18)
+      : pct;
 
     const openPicker = () => inputRef.current?.click();
 
     const fileInput = (
-      <Input
-        ref={inputRef}
-        type="file"
-        accept={accept}
-        ariaLabel={title}
-        chrome="none"
-        className="sr-only"
-        onChange={(event) => {
-          const file = event.target.files?.[0];
-          if (file) onFileSelect?.(file);
-        }}
-      />
+      <div className="relative">
+        <Input
+          ref={inputRef}
+          type="file"
+          accept={accept}
+          ariaLabel={title}
+          aria-invalid={failed || undefined}
+          chrome="none"
+          className="sr-only"
+          onChange={(event) => {
+            const file = event.target.files?.[0];
+            if (file) onFileSelect?.(file);
+          }}
+        />
+      </div>
     );
 
-    if (resolved === "idle" || dragging) {
+    if (!hasFile) {
       return (
         <div
           ref={ref}
@@ -112,7 +156,9 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
             "transition duration-200 ease-out",
             dragging
               ? "border-primary bg-primary-subdued/70"
-              : "border-hairline-strong bg-canvas",
+              : errorOnDropzone
+                ? "border-semantic-error bg-canvas"
+                : "border-hairline-strong bg-canvas",
             className,
           )}
           {...rest}
@@ -129,7 +175,11 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
               strokeWidth={1.25}
               className={cn(
                 "transition-colors duration-200 ease-out",
-                dragging ? "text-primary" : "text-ink",
+                dragging
+                  ? "text-primary"
+                  : errorOnDropzone
+                    ? "text-semantic-error"
+                    : "text-ink",
               )}
             />
             <Icon
@@ -138,7 +188,11 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
               strokeWidth={2}
               className={cn(
                 "absolute left-1/2 top-[60%] -translate-x-1/2 -translate-y-1/2 transition-colors duration-200 ease-out",
-                dragging ? "text-primary" : "text-ink",
+                dragging
+                  ? "text-primary"
+                  : errorOnDropzone
+                    ? "text-semantic-error"
+                    : "text-ink",
               )}
             />
           </span>
@@ -160,12 +214,16 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
               {actionLabel}
             </Button>
           )}
+
+          {errorOnDropzone ? (
+            <p aria-live="polite" className="text-caption text-semantic-error">
+              {errorLabel}
+            </p>
+          ) : null}
         </div>
       );
     }
 
-    const failed = resolved === "error";
-
     return (
       <div
         ref={ref}
@@ -177,16 +235,25 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
         )}
         {...rest}
       >
+        {fileInput}
+
         <div className="flex items-start gap-md">
-          <Icon name="file" size={20} strokeWidth={1.5} className="mt-xxs text-ink" />
+          <Icon
+            name="file"
+            size={20}
+            strokeWidth={1.5}
+            className="mt-xxs text-ink"
+          />
           <div className="min-w-0 flex-1">
-            <p className="truncate text-body-md text-ink">{fileName}</p>
-            <p className="mt-xxs text-caption text-muted">{fileSize}</p>
+            <p className="truncate text-body-md text-ink">{name}</p>
+            {sizeLabel ? (
+              <p className="mt-xxs text-caption text-muted">{sizeLabel}</p>
+            ) : null}
           </div>
           <Button
             variant="bare"
             size="inline"
-            aria-label={`Remove ${fileName}`}
+            aria-label={`Remove ${name}`}
             onClick={onRemove}
             className="-mr-xs -mt-xs shrink-0 rounded-sm p-xs text-muted hover:text-ink"
           >
@@ -197,7 +264,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
         <div className="mt-md flex items-center gap-md">
           <div
             role="progressbar"
-            aria-label={`${fileName} upload progress`}
+            aria-label={`${name} upload progress`}
             aria-valuemin={0}
             aria-valuemax={100}
             aria-valuenow={failed ? undefined : pct}
@@ -210,7 +277,7 @@ export const FileUpload = React.forwardRef<HTMLDivElement, FileUploadProps>(
                 "block h-full rounded-full transition-[width,background-color] duration-200 ease-out",
                 failed ? "bg-semantic-error" : "bg-primary",
               )}
-              style={{ width: `${failed ? Math.min(pct, 18) : pct}%` }}
+              style={{ width: `${barPct}%` }}
             />
           </div>
           <span

package/src/atoms/FileUpload/preview.tsx

@@ -1,128 +1,78 @@
 import * as React from "react";
 
-import { FileUpload, type FileUploadStatus } from "./FileUpload";
 import { Button } from "../Button";
+import { FileUpload, type FileUploadStatus } from "./FileUpload";
 
-const StateCell: React.FC<{
-  label: string;
-  children: React.ReactNode;
-}> = ({ label, children }) => (
-  <div className="flex flex-col gap-md">
-    <span className="text-micro-cap text-muted">{label}</span>
-    {children}
-  </div>
-);
+const demoFile = { name: "receipt-july.pdf", size: 1245184 } as unknown as File;
 
 export default function FileUploadPreview() {
-  const [status, setStatus] = React.useState<FileUploadStatus>("idle");
-  const [progress, setProgress] = React.useState(0);
-  const [fileName, setFileName] = React.useState("payouts.csv");
-  const timer = React.useRef<number | null>(null);
-
-  const stop = React.useCallback(() => {
-    if (timer.current !== null) {
-      window.clearInterval(timer.current);
-      timer.current = null;
-    }
-  }, []);
-
-  React.useEffect(() => stop, [stop]);
-
-  const startUpload = React.useCallback(
-    (name: string) => {
-      stop();
-      setFileName(name);
-      setProgress(0);
-      setStatus("uploading");
-      timer.current = window.setInterval(() => {
-        setProgress((value) => {
-          const next = value + 6;
-          if (next >= 100) {
-            stop();
-            setStatus("complete");
-            return 100;
-          }
-          return next;
-        });
-      }, 160);
-    },
-    [stop],
-  );
-
-  const failUpload = React.useCallback(() => {
-    stop();
-    setStatus("uploading");
-    window.setTimeout(() => setStatus("error"), 420);
-  }, [stop]);
+  const [file, setFile] = React.useState<File | null>(null);
+  const [errorMode, setErrorMode] = React.useState(true);
 
-  const reset = React.useCallback(() => {
-    stop();
-    setProgress(0);
-    setStatus("idle");
-  }, [stop]);
+  const status: FileUploadStatus = file
+    ? "complete"
+    : errorMode
+      ? "error"
+      : "idle";
 
   return (
-    <div className="mx-auto w-full max-w-3xl space-y-xxl bg-canvas p-lg">
-      <section className="flex flex-col gap-lg">
-        <div className="flex flex-col gap-xxs">
-          <h2 className="text-body-md text-ink">File upload control</h2>
-          <p className="text-caption text-muted">
-            Drop region, live drag, and the tracked-file card.
-          </p>
+    <div className="mx-auto w-full max-w-3xl space-y-lg bg-canvas p-lg">
+      <div className="space-y-sm">
+        <div className="flex flex-wrap items-center gap-sm">
+          <Button variant="secondary" size="sm" onClick={() => setErrorMode(false)}>
+            Idle
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => setErrorMode(true)}>
+            Trigger error
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => setFile(demoFile)}>
+            Attach demo file
+          </Button>
+          <Button variant="secondary" size="sm" onClick={() => setFile(null)}>
+            Clear file
+          </Button>
         </div>
 
-        <div className="grid gap-xl sm:grid-cols-2 xl:grid-cols-3">
-          <StateCell label="Default (dropzone)">
-            <FileUpload status="idle" />
-          </StateCell>
-          <StateCell label="Drag over">
-            <FileUpload status="dragging" />
-          </StateCell>
-          <StateCell label="Uploading">
-            <FileUpload status="uploading" progress={62} />
-          </StateCell>
-          <StateCell label="Complete">
-            <FileUpload status="complete" progress={100} />
-          </StateCell>
-          <StateCell label="Error">
-            <FileUpload status="error" progress={18} />
-          </StateCell>
-        </div>
-      </section>
+        <FileUpload
+          status={status}
+          title="Upload receipts, tracking or photos"
+          hint="PDF, PNG or JPG, up to 4.5 MB"
+          accept=".pdf,.png,.jpg"
+          fileName={file?.name}
+          fileSize={file?.size}
+          errorLabel={
+            status === "error" ? "Attach at least one document." : undefined
+          }
+          onFileSelect={setFile}
+          onRemove={() => setFile(null)}
+        />
+      </div>
 
-      <section className="flex flex-col gap-lg">
-        <div className="flex flex-col gap-xxs">
-          <h2 className="text-body-md text-ink">Interactive</h2>
-          <p className="text-caption text-muted">
-            Pick or drop a file to run the upload, or force the failure state.
-          </p>
-        </div>
+      <div className="space-y-sm">
+        <p className="text-caption text-muted">Mid-upload with a tracked file</p>
+        <FileUpload
+          status="uploading"
+          title="Upload receipts"
+          hint="PDF, PNG or JPG"
+          fileName="invoice-0448.png"
+          fileSize={684032}
+          progress={42}
+          onRemove={() => undefined}
+        />
+      </div>
 
-        <div className="flex flex-col gap-md">
-          <FileUpload
-            status={status}
-            progress={progress}
-            fileName={fileName}
-            onFileSelect={(file) => startUpload(file.name)}
-            onRemove={reset}
-          />
-          <div className="flex flex-wrap items-center gap-sm">
-            <Button
-              variant="secondary"
-              size="sm"
-              onClick={() => startUpload("payouts-q3.csv")}
-            >
-              Simulate upload
-            </Button>
-            <Button variant="ghost" size="sm" onClick={failUpload}>
-              Simulate failure
-            </Button>
-            <Button variant="ghost" size="sm" onClick={reset}>
-              Reset
-            </Button>
-          </div>
-        </div>
-      </section>
+      <div className="space-y-sm">
+        <p className="text-caption text-muted">Error with a tracked file</p>
+        <FileUpload
+          status="error"
+          title="Upload receipts"
+          hint="PDF, PNG or JPG"
+          fileName="statement.pdf"
+          fileSize="3.1 MB"
+          errorLabel="Upload failed — try again."
+          onRemove={() => undefined}
+        />
+      </div>
     </div>
   );
 }