banhaten 0.1.0 → 0.1.2

package/registry/components/expanded/FileUpload.tsx

@@ -1,53 +1,85 @@
-import { useRef, useState, type ChangeEvent, type DragEvent } from "react";
+import { useRef, useState, type CSSProperties, type ChangeEvent, type DragEvent, type MouseEvent, type ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+
 import "./fileUpload.css";
 
 export type FileUploadSize = "lg" | "sm";
-export type FileUploadItemStatus = "uploaded" | "uploading" | "error";
+export type FileUploadVariant = "default" | "button";
+export type FileUploadDropzoneState = "default" | "hover";
+export type FileUploadItemStatus = "uploaded" | "uploading" | "uploading-progress" | "error";
 
 export type FileUploadFile = {
   errorLabel?: string;
+  extensionLabel?: string;
   id: string;
   name: string;
+  progress?: number;
+  progressLabel?: string;
   sizeLabel: string;
   status: FileUploadItemStatus;
+  uploadedLabel?: string;
+  uploadLabel?: string;
   versionLabel?: string;
 };
 
 export type FileUploadProps = {
   accept?: string;
   browseLabel?: string;
+  cancelLabel?: string;
   dir?: "ltr" | "rtl" | "auto";
   disabled?: boolean;
+  dropzoneState?: FileUploadDropzoneState;
   files?: FileUploadFile[];
   helperText?: string;
+  moreLabel?: string;
   multiple?: boolean;
   onBrowse?: () => void;
   onCancel?: (fileId: string) => void;
   onDrop?: (files: FileList) => void;
+  onMore?: (fileId: string) => void;
   onRemove?: (fileId: string) => void;
   onRetry?: (fileId: string) => void;
   prompt?: string;
+  removeLabel?: string;
+  retryLabel?: string;
   size?: FileUploadSize;
+  title?: string;
+  variant?: FileUploadVariant;
 };
 
 export function FileUpload({
   accept,
   browseLabel,
+  cancelLabel = "Cancel upload",
   dir = "ltr",
   disabled = false,
+  dropzoneState = "default",
   files = [],
   helperText,
+  moreLabel = "More file actions",
   multiple = false,
   onBrowse,
   onCancel,
   onDrop,
+  onMore,
   onRemove,
   onRetry,
   prompt,
+  removeLabel = "Remove file",
+  retryLabel = "Try again",
   size = "lg",
+  title,
+  variant = "default",
 }: FileUploadProps) {
   const inputRef = useRef<HTMLInputElement | null>(null);
   const [isDragging, setIsDragging] = useState(false);
+  const isHover = dropzoneState === "hover" || isDragging;
+
+  const resolvedPrompt =
+    prompt ?? (variant === "button" ? "Drag and drop your files" : "Drop your files here, or");
+  const resolvedBrowseLabel = browseLabel ?? (variant === "button" ? "Or choose files" : "click to browse");
+  const resolvedHelperText = helperText ?? "Unlimited files, 5GB total limit";
 
   function browse() {
     if (disabled) return;
@@ -55,6 +87,11 @@ export function FileUpload({
     inputRef.current?.click();
   }
 
+  function handleDropzoneClick(event: MouseEvent<HTMLDivElement>) {
+    if (event.target instanceof HTMLElement && event.target.closest("button")) return;
+    browse();
+  }
+
   function handleInputChange(event: ChangeEvent<HTMLInputElement>) {
     const selectedFiles = event.currentTarget.files;
     if (selectedFiles?.length) {
@@ -79,10 +116,11 @@ export function FileUpload({
   }
 
   return (
-    <div className={`ds-file-upload ds-file-upload--${size}`} dir={dir}>
+    <div className={cx("ds-file-upload", `ds-file-upload--${size}`, `ds-file-upload--${variant}`)} dir={dir}>
       <div
         aria-disabled={disabled || undefined}
-        className={isDragging ? "ds-file-upload__dropzone is-dragging" : "ds-file-upload__dropzone"}
+        className={cx("ds-file-upload__dropzone", isHover && "is-hover")}
+        onClick={handleDropzoneClick}
         onDragLeave={() => setIsDragging(false)}
         onDragOver={handleDragOver}
         onDrop={handleDrop}
@@ -97,30 +135,50 @@ export function FileUpload({
           type="file"
         />
         <span className="ds-file-upload__icon" aria-hidden="true">
-          <UploadIcon />
+          <UploadCloudIcon />
         </span>
-        {(prompt || browseLabel) && (
-          <p>
-            {prompt}{" "}
-            {browseLabel && (
-              <button className="ds-file-upload__browse" disabled={disabled} onClick={browse} type="button">
-                {browseLabel}
-              </button>
+
+        {variant === "button" ? (
+          <>
+            <div className="ds-file-upload__copy">
+              <p className="ds-file-upload__title">{title ?? resolvedPrompt}</p>
+              {resolvedHelperText && <span className="ds-file-upload__helper">{resolvedHelperText}</span>}
+            </div>
+            <Button className="ds-file-upload__button" disabled={disabled} onClick={browse} type="button">
+              {resolvedBrowseLabel}
+            </Button>
+          </>
+        ) : (
+          <div className="ds-file-upload__copy">
+            {(resolvedPrompt || resolvedBrowseLabel) && (
+              <p className="ds-file-upload__title">
+                {resolvedPrompt}{" "}
+                {resolvedBrowseLabel && (
+                  <button className="ds-file-upload__browse" disabled={disabled} onClick={browse} type="button">
+                    {resolvedBrowseLabel}
+                  </button>
+                )}
+              </p>
             )}
-          </p>
+            {resolvedHelperText && <span className="ds-file-upload__helper">{resolvedHelperText}</span>}
+          </div>
         )}
-        {helperText && <span className="ds-file-upload__helper">{helperText}</span>}
       </div>
 
       {files.length > 0 && (
         <ul className="ds-file-upload__list" aria-label="Queued files">
           {files.map((file) => (
             <FileUploadRow
+              cancelLabel={cancelLabel}
               file={file}
               key={file.id}
+              moreLabel={moreLabel}
               onCancel={onCancel}
+              onMore={onMore}
               onRemove={onRemove}
               onRetry={onRetry}
+              removeLabel={removeLabel}
+              retryLabel={retryLabel}
               size={size}
             />
           ))}
@@ -131,101 +189,346 @@ export function FileUpload({
 }
 
 function FileUploadRow({
+  cancelLabel,
   file,
+  moreLabel,
   onCancel,
+  onMore,
   onRemove,
   onRetry,
+  removeLabel,
+  retryLabel,
   size,
 }: {
+  cancelLabel: string;
   file: FileUploadFile;
+  moreLabel: string;
   onCancel?: (fileId: string) => void;
+  onMore?: (fileId: string) => void;
   onRemove?: (fileId: string) => void;
   onRetry?: (fileId: string) => void;
+  removeLabel: string;
+  retryLabel: string;
   size: FileUploadSize;
 }) {
+  const isSmall = size === "sm";
+  const isProgress = file.status === "uploading-progress";
+  const progressValue = clampProgress(file.progress ?? 40);
+  const progressLabel = file.progressLabel ?? `${progressValue}%`;
+  const uploadedLabel = file.uploadedLabel ?? "Uploaded";
+  const uploadLabel = file.uploadLabel ?? "Uploading...";
+  const errorLabel = file.errorLabel ?? "Upload failed";
+
   return (
-    <li className={`ds-file-upload-row ds-file-upload-row--${file.status} ds-file-upload-row--${size}`}>
-      <span className="ds-file-upload-row__file-icon" aria-hidden="true">
-        <FileIcon />
-      </span>
-      <div className="ds-file-upload-row__copy">
-        <strong title={file.name}>{file.name}</strong>
-        <span>
-          {file.sizeLabel}
-          {file.versionLabel ? ` - ${file.versionLabel}` : ""}
-        </span>
-        {file.status === "error" && file.errorLabel && <em>{file.errorLabel}</em>}
+    <li className={cx("ds-file-upload-row", `ds-file-upload-row--${size}`, `ds-file-upload-row--${file.status}`)}>
+      <div className="ds-file-upload-row__content">
+        <FileTypeIcon label={file.extensionLabel ?? getExtensionLabel(file.name)} size={size} />
+
+        <div className="ds-file-upload-row__copy">
+          {isSmall || isProgress ? (
+            <div className="ds-file-upload-row__headline">
+              <strong title={file.name}>{file.name}</strong>
+              <span aria-hidden="true" className="ds-file-upload-row__dot">
+                {"\u00b7"}
+              </span>
+              <span>{file.sizeLabel}</span>
+            </div>
+          ) : (
+            <>
+              <strong title={file.name}>{file.name}</strong>
+              <div className="ds-file-upload-row__details">
+                <span>{getMetaLabel(file)}</span>
+                {(file.status === "uploaded" || file.status === "uploading" || file.status === "error") && (
+                  <span className="ds-file-upload-row__state">
+                    <StatusIcon status={file.status} />
+                    {file.status === "uploaded" && <span>{uploadedLabel}</span>}
+                    {file.status === "uploading" && <span>{uploadLabel}</span>}
+                    {file.status === "error" && <span>{errorLabel}</span>}
+                  </span>
+                )}
+              </div>
+            </>
+          )}
+
+          {isProgress && (
+            <div className="ds-file-upload-row__progress" aria-label={`Upload progress ${progressLabel}`}>
+              <span className="ds-file-upload-row__progress-track">
+                <span className="ds-file-upload-row__progress-fill" style={{ width: `${progressValue}%` }} />
+              </span>
+              <span className="ds-file-upload-row__progress-label">{progressLabel}</span>
+            </div>
+          )}
+
+          {!isSmall && file.status === "error" && (
+            <button className="ds-file-upload-row__retry" onClick={() => onRetry?.(file.id)} type="button">
+              {retryLabel}
+            </button>
+          )}
+        </div>
       </div>
-      <StatusIcon status={file.status} />
+
+      {isSmall && file.status !== "uploaded" && file.status !== "uploading-progress" && (
+        <StatusIcon status={file.status} standalone />
+      )}
+
       <div className="ds-file-upload-row__actions">
-        {file.status === "uploading" && (
-          <button aria-label={`Cancel upload for ${file.name}`} onClick={() => onCancel?.(file.id)} type="button">
-            Cancel
-          </button>
+        {file.status === "uploaded" && (
+          <IconAction ariaLabel={`${moreLabel}: ${file.name}`} icon={<MoreFillIcon />} onClick={() => onMore?.(file.id)} />
         )}
-        {file.status === "error" && (
-          <button aria-label={`Retry upload for ${file.name}`} onClick={() => onRetry?.(file.id)} type="button">
-            Retry
-          </button>
+        {file.status === "uploading" && (
+          <IconAction ariaLabel={`${cancelLabel}: ${file.name}`} icon={<CloseFillIcon />} onClick={() => onCancel?.(file.id)} />
         )}
         {file.status !== "uploading" && (
-          <button aria-label={`Remove ${file.name}`} onClick={() => onRemove?.(file.id)} type="button">
-            Remove
-          </button>
+          <IconAction ariaLabel={`${removeLabel}: ${file.name}`} icon={<DeleteBinLineIcon />} onClick={() => onRemove?.(file.id)} />
         )}
       </div>
     </li>
   );
 }
 
-function StatusIcon({ status }: { status: FileUploadItemStatus }) {
+function FileTypeIcon({ label, size }: { label: string; size: FileUploadSize }) {
+  const iconLabel = normalizeExtensionLabel(label);
+  const icon = resolveFileIconVariant(iconLabel);
+  const badgeX = icon.badgeX ?? getFileIconBadgeX(icon.badgeWidth);
+  const badgeTextX = badgeX + icon.badgeWidth / 2;
+  const badgeStyle = {
+    "--ds-file-upload-file-badge-bg": icon.badgeFill,
+  } as CSSProperties;
+
+  return (
+    <span className={cx("ds-file-upload-file-icon", `ds-file-upload-file-icon--${size}`)} style={badgeStyle} aria-hidden="true">
+      <svg className="ds-file-upload-file-icon__svg" viewBox="0 0 40 40" fill="none" focusable="false">
+        <path
+          className="ds-file-upload-file-icon__page"
+          d="M13 3.5H24.1719C24.5696 3.50008 24.9512 3.65822 25.2324 3.93945L34.0605 12.7676C34.3418 13.0488 34.4999 13.4304 34.5 13.8281V33C34.5 34.933 32.933 36.5 31 36.5H13C11.067 36.5 9.5 34.933 9.5 33V7C9.5 5.067 11.067 3.5 13 3.5Z"
+        />
+        <path
+          className="ds-file-upload-file-icon__fold"
+          d="M24.5 3.59117V9.21432C24.5 11.4235 26.2909 13.2143 28.5 13.2143H34.0414"
+        />
+        <rect className="ds-file-upload-file-icon__badge" x={badgeX} y="20" width={icon.badgeWidth} height="12" rx="3" />
+        <text className="ds-file-upload-file-icon__label" x={badgeTextX} y="26.55" textAnchor="middle" dominantBaseline="middle">
+          {iconLabel}
+        </text>
+      </svg>
+    </span>
+  );
+}
+
+type FileIconVariant = {
+  badgeFill: string;
+  badgeWidth: number;
+  badgeX?: number;
+};
+
+const FILE_ICON_VARIANTS = {
+  AI: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 20 },
+  AVI: { badgeFill: "var(--bh-bg-accent-lime-default)", badgeWidth: 21 },
+  BMP: { badgeFill: "var(--bh-bg-accent-lime-default)", badgeWidth: 24 },
+  CRD: { badgeFill: "var(--bh-bg-accent-green-default)", badgeWidth: 23 },
+  CSV: { badgeFill: "var(--bh-bg-accent-green-default)", badgeWidth: 23 },
+  DLL: { badgeFill: "var(--bh-bg-accent-purple-default)", badgeWidth: 21 },
+  DOC: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 24 },
+  DOCX: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 29 },
+  EPS: { badgeFill: "var(--bh-bg-accent-purple-default)", badgeWidth: 21 },
+  EXE: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 21 },
+  FIG: { badgeFill: "var(--bh-bg-accent-purple-default)", badgeWidth: 20 },
+  FLV: { badgeFill: "var(--bh-bg-accent-purple-default)", badgeWidth: 20 },
+  GIF: { badgeFill: "var(--bh-bg-accent-rose-default)", badgeWidth: 19 },
+  HTML: { badgeFill: "var(--bh-bg-accent-lime-default)", badgeWidth: 30, badgeX: 3 },
+  IMG: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 22 },
+  ISO: { badgeFill: "var(--bh-bg-neutral-default)", badgeWidth: 19 },
+  JAVA: { badgeFill: "var(--bh-bg-accent-red-default)", badgeWidth: 27 },
+  JPG: { badgeFill: "var(--bh-bg-accent-fuchsia-default)", badgeWidth: 22 },
+  JSON: { badgeFill: "var(--bh-bg-neutral-default)", badgeWidth: 28 },
+  MID: { badgeFill: "var(--bh-bg-accent-fuchsia-default)", badgeWidth: 23 },
+  MOV: { badgeFill: "var(--bh-bg-accent-red-default)", badgeWidth: 25 },
+  MP3: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 24 },
+  MP4: { badgeFill: "var(--bh-bg-accent-rose-default)", badgeWidth: 24 },
+  MPEG: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 30, badgeX: 3 },
+  PDF: { badgeFill: "var(--bh-bg-accent-red-default)", badgeWidth: 22 },
+  PNG: { badgeFill: "var(--bh-bg-accent-aqua-default)", badgeWidth: 23 },
+  PPT: { badgeFill: "var(--bh-bg-accent-red-default)", badgeWidth: 22 },
+  PPTX: { badgeFill: "var(--bh-bg-accent-red-default)", badgeWidth: 28 },
+  PSD: { badgeFill: "var(--bh-bg-accent-blue-default)", badgeWidth: 22 },
+  PUB: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 22 },
+  RAR: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 22 },
+  RAW: { badgeFill: "var(--bh-bg-accent-sky-base)", badgeWidth: 25 },
+  RSS: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 22 },
+  SVG: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 23 },
+  TIFF: { badgeFill: "var(--bh-bg-accent-fuchsia-default)", badgeWidth: 23 },
+  TXT: { badgeFill: "var(--bh-bg-neutral-default)", badgeWidth: 22 },
+  WAV: { badgeFill: "var(--bh-bg-accent-amber-default)", badgeWidth: 25 },
+  WMA: { badgeFill: "var(--bh-bg-accent-golden-default)", badgeWidth: 28 },
+  XML: { badgeFill: "var(--bh-bg-accent-purple-default)", badgeWidth: 23 },
+  XSL: { badgeFill: "var(--bh-bg-accent-green-default)", badgeWidth: 21 },
+  XSLX: { badgeFill: "var(--bh-bg-accent-green-default)", badgeWidth: 27 },
+  ZIP: { badgeFill: "var(--bh-bg-accent-aqua-default)", badgeWidth: 21 },
+} satisfies Record<string, FileIconVariant>;
+
+const FILE_ICON_ALIASES: Record<string, keyof typeof FILE_ICON_VARIANTS> = {
+  CDR: "CRD",
+  JPEG: "JPG",
+  XLS: "XSL",
+  XLSX: "XSLX",
+};
+
+function resolveFileIconVariant(label: string): FileIconVariant {
+  const directVariant = FILE_ICON_VARIANTS[label as keyof typeof FILE_ICON_VARIANTS];
+  if (directVariant) return directVariant;
+
+  const aliasedVariant = FILE_ICON_ALIASES[label];
+  if (aliasedVariant) return FILE_ICON_VARIANTS[aliasedVariant];
+
+  const badgeWidth = label.length <= 2 ? 20 : label.length >= 4 ? 30 : 23;
+  return { badgeFill: "var(--bh-bg-neutral-default)", badgeWidth, badgeX: getFileIconBadgeX(badgeWidth) };
+}
+
+function getFileIconBadgeX(badgeWidth: number) {
+  return badgeWidth >= 30 ? 3 : 5;
+}
+
+function StatusIcon({
+  standalone = false,
+  status,
+}: {
+  standalone?: boolean;
+  status: Exclude<FileUploadItemStatus, "uploading-progress">;
+}) {
   return (
-    <span className={`ds-file-upload-row__status ds-file-upload-row__status--${status}`} aria-label={status}>
-      {status === "uploaded" && <CheckIcon />}
-      {status === "uploading" && <SpinnerIcon />}
-      {status === "error" && <WarningIcon />}
+    <span
+      className={cx(
+        "ds-file-upload-row__status",
+        standalone && "ds-file-upload-row__status--standalone",
+        `ds-file-upload-row__status--${status}`
+      )}
+      aria-label={getStatusLabel(status)}
+    >
+      {status === "uploaded" && <CheckboxCircleFillIcon />}
+      {status === "uploading" && <Loader2LineIcon />}
+      {status === "error" && <ErrorWarningFillIcon />}
     </span>
   );
 }
 
-function UploadIcon() {
+function UploadCloudIcon() {
   return (
-    <svg viewBox="0 0 24 24">
-      <path d="M12 16V5m0 0 4 4m-4-4-4 4M5 16v2.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V16" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.8" />
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 24 24">
+      <path
+        d="M1 14.5C1 12.1716 2.22429 10.1291 4.06426 8.9812C4.56469 5.044 7.92686 2 12 2C16.0731 2 19.4353 5.044 19.9357 8.9812C21.7757 10.1291 23 12.1716 23 14.5C23 17.9216 20.3562 20.7257 17 20.9811L7 21C3.64378 20.7257 1 17.9216 1 14.5ZM16.8483 18.9868C19.1817 18.8093 21 16.8561 21 14.5C21 12.927 20.1884 11.4962 18.8771 10.6781L18.0714 10.1754L17.9517 9.23338C17.5735 6.25803 15.0288 4 12 4C8.97116 4 6.42647 6.25803 6.0483 9.23338L5.92856 10.1754L5.12288 10.6781C3.81156 11.4962 3 12.927 3 14.5C3 16.8561 4.81833 18.8093 7.1517 18.9868L7.325 19H16.675L16.8483 18.9868ZM13 13V17H11V13H8L12 8L16 13H13Z"
+        fill="currentColor"
+      />
     </svg>
   );
 }
 
-function FileIcon() {
+function CheckboxCircleFillIcon() {
   return (
-    <svg viewBox="0 0 24 24">
-      <path d="M7 3.5h6.8L18 7.7v12.8H7V3.5Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.8" />
-      <path d="M13.5 3.8v4.4h4.2" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.8" />
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 16 16">
+      <path
+        d="M8.00016 14.6667C11.682 14.6667 14.6668 11.6819 14.6668 8.00001C14.6668 4.31811 11.682 1.33334 8.00016 1.33334C4.31826 1.33334 1.3335 4.31811 1.3335 8.00001C1.3335 11.6819 4.31826 14.6667 8.00016 14.6667ZM11.6382 6.30475L7.3335 10.6095L4.52876 7.80474L5.47157 6.86194L7.3335 8.72388L10.6954 5.36194L11.6382 6.30475Z"
+        fill="currentColor"
+      />
     </svg>
   );
 }
 
-function CheckIcon() {
+function Loader2LineIcon() {
   return (
-    <svg viewBox="0 0 20 20">
-      <path d="m4.5 10 3.4 3.4 7.6-7.8" fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1.9" />
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 16 16">
+      <path
+        d="M8.00016 1.33333C8.36836 1.33333 8.66683 1.63181 8.66683 1.99999V3.99999C8.66683 4.36818 8.36836 4.66666 8.00016 4.66666C7.63196 4.66666 7.3335 4.36818 7.3335 3.99999V1.99999C7.3335 1.63181 7.63196 1.33333 8.00016 1.33333ZM8.00016 11.3333C8.36836 11.3333 8.66683 11.6318 8.66683 12V14C8.66683 14.3682 8.36836 14.6667 8.00016 14.6667C7.63196 14.6667 7.3335 14.3682 7.3335 14V12C7.3335 11.6318 7.63196 11.3333 8.00016 11.3333ZM14.6668 7.99999C14.6668 8.36819 14.3684 8.66666 14.0002 8.66666H12.0002C11.632 8.66666 11.3335 8.36819 11.3335 7.99999C11.3335 7.63179 11.632 7.33333 12.0002 7.33333H14.0002C14.3684 7.33333 14.6668 7.63179 14.6668 7.99999ZM4.66683 7.99999C4.66683 8.36819 4.36835 8.66666 4.00016 8.66666H2.00016C1.63198 8.66666 1.3335 8.36819 1.3335 7.99999C1.3335 7.63179 1.63198 7.33333 2.00016 7.33333H4.00016C4.36835 7.33333 4.66683 7.63179 4.66683 7.99999ZM12.7142 12.7141C12.4538 12.9744 12.0318 12.9744 11.7714 12.7141L10.3572 11.2998C10.0968 11.0395 10.0968 10.6174 10.3572 10.357C10.6176 10.0967 11.0396 10.0967 11.3 10.357L12.7142 11.7713C12.9746 12.0316 12.9746 12.4537 12.7142 12.7141ZM5.64314 5.64297C5.38279 5.90332 4.96068 5.90332 4.70033 5.64297L3.28612 4.22876C3.02577 3.96841 3.02577 3.5463 3.28612 3.28595C3.54647 3.0256 3.96858 3.0256 4.22893 3.28595L5.64314 4.70016C5.90349 4.96051 5.90349 5.38262 5.64314 5.64297ZM3.28612 12.7141C3.02577 12.4537 3.02577 12.0316 3.28612 11.7713L4.70033 10.357C4.96068 10.0967 5.38279 10.0967 5.64314 10.357C5.90349 10.6174 5.90349 11.0395 5.64314 11.2998L4.22893 12.7141C3.96858 12.9744 3.54647 12.9744 3.28612 12.7141ZM10.3572 5.64297C10.0968 5.38262 10.0968 4.96051 10.3572 4.70016L11.7714 3.28595C12.0318 3.0256 12.4538 3.0256 12.7142 3.28595C12.9746 3.5463 12.9746 3.96841 12.7142 4.22876L11.3 5.64297C11.0396 5.90332 10.6176 5.90332 10.3572 5.64297Z"
+        fill="currentColor"
+      />
     </svg>
   );
 }
 
-function SpinnerIcon() {
+function ErrorWarningFillIcon() {
   return (
-    <svg viewBox="0 0 20 20">
-      <path d="M10 3a7 7 0 1 1-6.2 3.8" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.8" />
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 16 16">
+      <path
+        d="M8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 8.00001C1.3335 4.31811 4.31826 1.33334 8.00016 1.33334C11.682 1.33334 14.6668 4.31811 14.6668 8.00001C14.6668 11.6819 11.682 14.6667 8.00016 14.6667ZM7.3335 10V11.3333H8.66683V10H7.3335ZM7.3335 4.66668V8.66668H8.66683V4.66668H7.3335Z"
+        fill="currentColor"
+      />
     </svg>
   );
 }
 
-function WarningIcon() {
+function MoreFillIcon() {
   return (
-    <svg viewBox="0 0 20 20">
-      <path d="M10 3.2 18 17H2l8-13.8Z" fill="none" stroke="currentColor" strokeLinejoin="round" strokeWidth="1.6" />
-      <path d="M10 8v4m0 2.5h.1" fill="none" stroke="currentColor" strokeLinecap="round" strokeWidth="1.9" />
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 20 20">
+      <path
+        d="M4.16667 8.33334C3.25 8.33334 2.5 9.08334 2.5 10C2.5 10.9167 3.25 11.6667 4.16667 11.6667C5.08333 11.6667 5.83333 10.9167 5.83333 10C5.83333 9.08334 5.08333 8.33334 4.16667 8.33334ZM15.8333 8.33334C14.9167 8.33334 14.1667 9.08334 14.1667 10C14.1667 10.9167 14.9167 11.6667 15.8333 11.6667C16.75 11.6667 17.5 10.9167 17.5 10C17.5 9.08334 16.75 8.33334 15.8333 8.33334ZM10 8.33334C9.08333 8.33334 8.33333 9.08334 8.33333 10C8.33333 10.9167 9.08333 11.6667 10 11.6667C10.9167 11.6667 11.6667 10.9167 11.6667 10C11.6667 9.08334 10.9167 8.33334 10 8.33334Z"
+        fill="currentColor"
+      />
     </svg>
   );
 }
+
+function CloseFillIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 20 20">
+      <path
+        d="M9.99959 8.82208L14.1244 4.69727L15.3029 5.87577L11.1781 10.0006L15.3029 14.1253L14.1244 15.3038L9.99959 11.1791L5.87481 15.3038L4.69629 14.1253L8.82109 10.0006L4.69629 5.87577L5.87481 4.69727L9.99959 8.82208Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function DeleteBinLineIcon() {
+  return (
+    <svg aria-hidden="true" fill="none" focusable="false" viewBox="0 0 20 20">
+      <path
+        d="M14.1665 4.99999H18.3332V6.66666H16.6665V17.5C16.6665 17.9602 16.2934 18.3333 15.8332 18.3333H4.1665C3.70627 18.3333 3.33317 17.9602 3.33317 17.5V6.66666H1.6665V4.99999H5.83317V2.49999C5.83317 2.03976 6.20627 1.66666 6.6665 1.66666H13.3332C13.7934 1.66666 14.1665 2.03976 14.1665 2.49999V4.99999ZM14.9998 6.66666H4.99984V16.6667H14.9998V6.66666ZM7.49984 9.16666H9.1665V14.1667H7.49984V9.16666ZM10.8332 9.16666H12.4998V14.1667H10.8332V9.16666ZM7.49984 3.33332V4.99999H12.4998V3.33332H7.49984Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+function IconAction({
+  ariaLabel,
+  icon,
+  onClick,
+}: {
+  ariaLabel: string;
+  icon: ReactNode;
+  onClick: () => void;
+}) {
+  return (
+    <Button aria-label={ariaLabel} className="ds-file-upload-row__action" onClick={onClick} size="icon-sm" type="button" variant="ghost">
+      {icon}
+    </Button>
+  );
+}
+
+function getExtensionLabel(name: string) {
+  const extension = name.split(".").pop();
+  if (!extension || extension === name) return "FILE";
+  return normalizeExtensionLabel(extension);
+}
+
+function normalizeExtensionLabel(label: string) {
+  const normalized = label.trim().replace(/^\./, "").toUpperCase().replace(/[^A-Z0-9]/g, "");
+  return normalized ? normalized.slice(0, 4) : "FILE";
+}
+
+function getMetaLabel(file: FileUploadFile) {
+  return [file.sizeLabel, file.versionLabel].filter(Boolean).join(" \u00b7 ");
+}
+
+function getStatusLabel(status: Exclude<FileUploadItemStatus, "uploading-progress">) {
+  if (status === "uploaded") return "Uploaded";
+  if (status === "uploading") return "Uploading";
+  return "Upload failed";
+}
+
+function clampProgress(value: number) {
+  return Math.min(100, Math.max(0, Math.round(value)));
+}
+
+function cx(...classes: Array<string | false | null | undefined>) {
+  return classes.filter(Boolean).join(" ");
+}

package/registry/components/expanded/OnboardingStepListItem.tsx

@@ -1,3 +1,5 @@
+import { CircleCheckIcon } from "lucide-react";
+
 import "./onboardingStepListItem.css";
 
 export type OnboardingStepState = "finished" | "active" | "inactive";
@@ -50,18 +52,12 @@ export function OnboardingStepListItem({
 
 function CheckCircleIcon() {
   return (
-    <svg
+    <CircleCheckIcon
+      aria-hidden="true"
       className="ds-onboarding-step__check"
-      fill="none"
       height="20"
-      viewBox="0 0 20 20"
+      strokeWidth={2.25}
       width="20"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path
-        d="M10 1.667A8.333 8.333 0 1 1 10 18.333 8.333 8.333 0 0 1 10 1.667Zm-.831 11.667 5.89-5.893-1.179-1.178-4.711 4.714-2.357-2.357-1.179 1.178 3.536 3.536Z"
-        fill="currentColor"
-      />
-    </svg>
+    />
   );
 }

package/registry/components/expanded/PageHeader.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from "react";
+import { HomeIcon as LucideHomeIcon } from "lucide-react";
 import { Tabs, type TabsProps } from "./Tabs";
 import "./pageHeader.css";
 
@@ -40,17 +41,7 @@ function classes(...names: Array<string | false | undefined>) {
 }
 
 function HomeIcon() {
-  return (
-    <svg aria-hidden="true" className="ds-page-header__home-icon" fill="none" viewBox="0 0 24 24">
-      <path
-        d="M3.75 10.5 12 3.75l8.25 6.75v8.25a1.5 1.5 0 0 1-1.5 1.5H15v-6h-6v6H5.25a1.5 1.5 0 0 1-1.5-1.5V10.5Z"
-        stroke="currentColor"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        strokeWidth="1.8"
-      />
-    </svg>
-  );
+  return <LucideHomeIcon aria-hidden="true" className="ds-page-header__home-icon" strokeWidth={1.9} />;
 }
 
 function Breadcrumbs({ items, label }: { items: PageHeaderBreadcrumb[]; label?: string }) {