silver-ui 0.1.0

package/dist/chunk-VVYUCQHP.js

@@ -0,0 +1,328 @@
+import { Field, inputRecipe } from './chunk-NGWNIMMX.js';
+import { getStatusMessageID, getDescribedBy, getStatusIcon } from './chunk-3L3M7SJ3.js';
+import { Spinner } from './chunk-RGPL6EDK.js';
+import { Text } from './chunk-PZO5MZ46.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { Icon } from './chunk-4W7L63LH.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { css } from './chunk-UHQRL4OA.js';
+import { Upload, X } from 'lucide-react';
+import { useId, useRef, useState } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/internal/formatFileSize.ts
+function formatFileSize(bytes) {
+  if (bytes < 1024) {
+    return `${bytes} B`;
+  }
+  if (bytes < 1024 * 1024) {
+    return `${(bytes / 1024).toFixed(1)} KB`;
+  }
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+var styles = {
+  surface: css({
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    gap: "2",
+    px: "3",
+    borderWidth: "default",
+    borderStyle: "solid",
+    borderColor: "border.emphasized",
+    borderRadius: "md",
+    bg: "bg",
+    cursor: "pointer",
+    _hover: { borderColor: "fg.muted" },
+    _focusVisible: {
+      outlineWidth: "focus",
+      outlineStyle: "solid",
+      outlineColor: "primary",
+      outlineOffset: "focusOffset"
+    }
+  }),
+  dropzone: css({
+    minH: "32",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    borderStyle: "dashed",
+    textAlign: "center",
+    "& > *": {
+      flex: "none"
+    }
+  }),
+  disabled: css({
+    cursor: "not-allowed",
+    opacity: 0.55
+  }),
+  active: css({
+    borderColor: "primary",
+    bg: "bg.selected"
+  }),
+  hiddenInput: css({
+    position: "absolute",
+    w: "1px",
+    h: "1px",
+    p: 0,
+    m: "-1px",
+    overflow: "hidden",
+    clipPath: "inset(50%)",
+    whiteSpace: "nowrap",
+    borderWidth: 0
+  }),
+  fileName: css({
+    flex: 1,
+    minW: 0,
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    whiteSpace: "nowrap"
+  }),
+  icon: css({
+    display: "inline-flex",
+    color: "fg.muted"
+  }),
+  clearButton: css({
+    display: "inline-flex",
+    p: 0,
+    borderWidth: 0,
+    bg: "transparent",
+    color: "fg.muted",
+    cursor: "pointer"
+  })
+};
+function validateFiles(files, options) {
+  let validFiles = files;
+  if (options.accept != null) {
+    const acceptedTypes = options.accept.split(",").map((type) => type.trim().toLowerCase());
+    validFiles = validFiles.filter(
+      (file) => acceptedTypes.some((type) => {
+        if (type.startsWith(".")) {
+          return file.name.toLowerCase().endsWith(type);
+        }
+        if (type.endsWith("/*")) {
+          return file.type.startsWith(type.slice(0, -1));
+        }
+        return file.type.toLowerCase() === type;
+      })
+    );
+    if (validFiles.length !== files.length) {
+      return {
+        files: validFiles,
+        error: "One or more files are not an accepted type."
+      };
+    }
+  }
+  if (options.maxSize != null) {
+    const maxSize = options.maxSize;
+    const oversized = validFiles.find((file) => file.size > maxSize);
+    if (oversized != null) {
+      return {
+        error: `"${oversized.name}" exceeds ${formatFileSize(maxSize)}.`,
+        files: validFiles.filter((file) => file.size <= maxSize)
+      };
+    }
+  }
+  if (options.isMultiple && options.maxFiles != null && validFiles.length > options.maxFiles) {
+    return {
+      files: validFiles.slice(0, options.maxFiles),
+      error: `Maximum ${options.maxFiles} files allowed.`
+    };
+  }
+  return { files: validFiles, error: null };
+}
+function getFileNames(value) {
+  if (value == null) {
+    return null;
+  }
+  if (Array.isArray(value)) {
+    return value.length === 0 ? null : value.map((file) => file.name).join(", ");
+  }
+  return value.name;
+}
+function FileInput({
+  label,
+  value,
+  onChange,
+  accept,
+  isMultiple = false,
+  maxSize,
+  maxFiles,
+  mode = "input",
+  placeholder,
+  description,
+  isLabelHidden = false,
+  isOptional,
+  isRequired,
+  isDisabled = false,
+  isLoading = false,
+  size = "md",
+  status: statusFromProps,
+  labelIcon,
+  labelTooltip,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const inputId = useId();
+  const inputRef = useRef(null);
+  const [isDragOver, setIsDragOver] = useState(false);
+  const [validationError, setValidationError] = useState(null);
+  const status = statusFromProps ?? (validationError == null ? void 0 : { type: "error", message: validationError });
+  const descriptionID = description != null ? `${inputId}-description` : void 0;
+  const statusMessageID = getStatusMessageID(inputId, status);
+  const describedBy = getDescribedBy(descriptionID, statusMessageID);
+  const fileNames = getFileNames(value);
+  const displayText = fileNames ?? placeholder ?? (isMultiple ? "Choose files" : "Choose file");
+  const isDropzone = mode === "dropzone";
+  const handleFiles = (files) => {
+    if (isDisabled) {
+      return;
+    }
+    const result = validateFiles(files, {
+      accept,
+      isMultiple,
+      maxFiles,
+      maxSize
+    });
+    setValidationError(result.error);
+    if (isMultiple) {
+      onChange(result.files);
+    } else if (result.files.length === 0) {
+      onChange(null);
+    } else {
+      onChange(result.files[0]);
+    }
+  };
+  const handleClear = () => {
+    setValidationError(null);
+    if (isMultiple) {
+      onChange([]);
+    } else {
+      onChange(null);
+    }
+  };
+  const dragProps = isDropzone ? {
+    onDragEnter: (event) => {
+      event.preventDefault();
+      if (!isDisabled) {
+        setIsDragOver(true);
+      }
+    },
+    onDragLeave: (event) => {
+      event.preventDefault();
+      setIsDragOver(false);
+    },
+    onDragOver: (event) => {
+      event.preventDefault();
+      if (!isDisabled) {
+        setIsDragOver(true);
+      }
+    },
+    onDrop: (event) => {
+      event.preventDefault();
+      setIsDragOver(false);
+      if (!isDisabled) {
+        handleFiles(Array.from(event.dataTransfer.files));
+      }
+    }
+  } : {};
+  const necessity = { isOptional, isRequired };
+  return /* @__PURE__ */ jsx(
+    Field,
+    {
+      description,
+      descriptionID,
+      inputId,
+      isDisabled,
+      isLabelHidden,
+      ...necessity,
+      label,
+      labelIcon,
+      labelTooltip,
+      status: status == null ? void 0 : { ...status, messageID: statusMessageID },
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          "aria-busy": isLoading || void 0,
+          "aria-describedby": describedBy,
+          "aria-disabled": isDisabled || void 0,
+          className: cx(
+            styles.surface,
+            isDropzone ? styles.dropzone : inputRecipe({ size, status: status?.type, isDisabled }),
+            isDisabled ? styles.disabled : void 0,
+            isDragOver ? styles.active : void 0,
+            className
+          ),
+          onClick: () => {
+            if (!isDisabled) {
+              inputRef.current?.click();
+            }
+          },
+          onKeyDown: (event) => {
+            if (!isDisabled && (event.key === "Enter" || event.key === " ")) {
+              event.preventDefault();
+              inputRef.current?.click();
+            }
+          },
+          role: "button",
+          style,
+          tabIndex: isDisabled ? -1 : 0,
+          ...dragProps,
+          children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                accept,
+                "aria-describedby": describedBy,
+                "aria-invalid": status?.type === "error" || void 0,
+                className: styles.hiddenInput,
+                "data-testid": dataTestId,
+                disabled: isDisabled,
+                id: inputId,
+                multiple: isMultiple,
+                onChange: (event) => {
+                  handleFiles(Array.from(event.target.files ?? []));
+                  event.currentTarget.value = "";
+                },
+                ref: mergeRefs(ref, inputRef),
+                required: isRequired,
+                type: "file"
+              }
+            ),
+            isLoading ? /* @__PURE__ */ jsx(Spinner, { size: isDropzone ? "md" : "sm" }) : /* @__PURE__ */ jsx("span", { className: styles.icon, children: /* @__PURE__ */ jsx(Icon, { icon: Upload, size: isDropzone ? "md" : "sm" }) }),
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                className: styles.fileName,
+                color: fileNames == null ? "secondary" : "primary",
+                children: isDragOver ? "Drop files here" : displayText
+              }
+            ),
+            fileNames != null ? /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-label": `Clear ${label}`,
+                className: styles.clearButton,
+                onClick: (event) => {
+                  event.stopPropagation();
+                  handleClear();
+                },
+                type: "button",
+                children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+              }
+            ) : null,
+            status != null && !isDropzone ? /* @__PURE__ */ jsx("span", { className: styles.icon, children: getStatusIcon(status.type) }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+FileInput.displayName = "FileInput";
+
+export { FileInput };
+//# sourceMappingURL=chunk-VVYUCQHP.js.map
+//# sourceMappingURL=chunk-VVYUCQHP.js.map

package/dist/chunk-VVYUCQHP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/formatFileSize.ts","../src/components/FileInput/FileInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;;AAAO,SAAS,eAAe,KAAA,EAAuB;AACpD,EAAA,IAAI,QAAQ,IAAA,EAAM;AAChB,IAAA,OAAO,GAAG,KAAK,CAAA,EAAA,CAAA;AAAA,EACjB;AAEA,EAAA,IAAI,KAAA,GAAQ,OAAO,IAAA,EAAM;AACvB,IAAA,OAAO,CAAA,EAAA,CAAI,KAAA,GAAQ,IAAA,EAAM,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA,CAAA;AAAA,EACrC;AAEA,EAAA,OAAO,IAAI,KAAA,IAAS,IAAA,GAAO,IAAA,CAAA,EAAO,OAAA,CAAQ,CAAC,CAAC,CAAA,GAAA,CAAA;AAC9C;AC2IA,IAAM,MAAA,GAAS;AAAA,EACb,SAAS,GAAA,CAAI;AAAA,IACX,SAAA,EAAW,YAAA;AAAA,IACX,OAAA,EAAS,MAAA;AAAA,IACT,UAAA,EAAY,QAAA;AAAA,IACZ,GAAA,EAAK,GAAA;AAAA,IACL,EAAA,EAAI,GAAA;AAAA,IACJ,WAAA,EAAa,SAAA;AAAA,IACb,WAAA,EAAa,OAAA;AAAA,IACb,WAAA,EAAa,mBAAA;AAAA,IACb,YAAA,EAAc,IAAA;AAAA,IACd,EAAA,EAAI,IAAA;AAAA,IACJ,MAAA,EAAQ,SAAA;AAAA,IACR,MAAA,EAAQ,EAAC,WAAA,EAAa,UAAA,EAAU;AAAA,IAChC,aAAA,EAAe;AAAA,MACb,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,OAAA;AAAA,MACd,YAAA,EAAc,SAAA;AAAA,MACd,aAAA,EAAe;AAAA;AACjB,GACD,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,IAAA,EAAM,IAAA;AAAA,IACN,aAAA,EAAe,QAAA;AAAA,IACf,cAAA,EAAgB,QAAA;AAAA,IAChB,UAAA,EAAY,QAAA;AAAA,IACZ,WAAA,EAAa,QAAA;AAAA,IACb,SAAA,EAAW,QAAA;AAAA,IACX,OAAA,EAAS;AAAA,MACP,IAAA,EAAM;AAAA;AACR,GACD,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,MAAA,EAAQ,aAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACV,CAAA;AAAA,EACD,QAAQ,GAAA,CAAI;AAAA,IACV,WAAA,EAAa,SAAA;AAAA,IACb,EAAA,EAAI;AAAA,GACL,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,QAAA,EAAU,UAAA;AAAA,IACV,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG,KAAA;AAAA,IACH,CAAA,EAAG,CAAA;AAAA,IACH,CAAA,EAAG,MAAA;AAAA,IACH,QAAA,EAAU,QAAA;AAAA,IACV,QAAA,EAAU,YAAA;AAAA,IACV,UAAA,EAAY,QAAA;AAAA,IACZ,WAAA,EAAa;AAAA,GACd,CAAA;AAAA,EACD,UAAU,GAAA,CAAI;AAAA,IACZ,IAAA,EAAM,CAAA;AAAA,IACN,IAAA,EAAM,CAAA;AAAA,IACN,QAAA,EAAU,QAAA;AAAA,IACV,YAAA,EAAc,UAAA;AAAA,IACd,UAAA,EAAY;AAAA,GACb,CAAA;AAAA,EACD,MAAM,GAAA,CAAI;AAAA,IACR,OAAA,EAAS,aAAA;AAAA,IACT,KAAA,EAAO;AAAA,GACR,CAAA;AAAA,EACD,aAAa,GAAA,CAAI;AAAA,IACf,OAAA,EAAS,aAAA;AAAA,IACT,CAAA,EAAG,CAAA;AAAA,IACH,WAAA,EAAa,CAAA;AAAA,IACb,EAAA,EAAI,aAAA;AAAA,IACJ,KAAA,EAAO,UAAA;AAAA,IACP,MAAA,EAAQ;AAAA,GACT;AACH,CAAA;AAEA,SAAS,aAAA,CACP,OACA,OAAA,EAMuC;AACvC,EAAA,IAAI,UAAA,GAAa,KAAA;AACjB,EAAA,IAAI,OAAA,CAAQ,UAAU,IAAA,EAAM;AAC1B,IAAA,MAAM,aAAA,GAAgB,OAAA,CAAQ,MAAA,CAC3B,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,IAAA,EAAK,CAAE,WAAA,EAAa,CAAA;AACxC,IAAA,UAAA,GAAa,UAAA,CAAW,MAAA;AAAA,MAAO,CAAA,IAAA,KAC7B,aAAA,CAAc,IAAA,CAAK,CAAA,IAAA,KAAQ;AACzB,QAAA,IAAI,IAAA,CAAK,UAAA,CAAW,GAAG,CAAA,EAAG;AACxB,UAAA,OAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY,CAAE,SAAS,IAAI,CAAA;AAAA,QAC9C;AACA,QAAA,IAAI,IAAA,CAAK,QAAA,CAAS,IAAI,CAAA,EAAG;AACvB,UAAA,OAAO,KAAK,IAAA,CAAK,UAAA,CAAW,KAAK,KAAA,CAAM,CAAA,EAAG,EAAE,CAAC,CAAA;AAAA,QAC/C;AACA,QAAA,OAAO,IAAA,CAAK,IAAA,CAAK,WAAA,EAAY,KAAM,IAAA;AAAA,MACrC,CAAC;AAAA,KACH;AACA,IAAA,IAAI,UAAA,CAAW,MAAA,KAAW,KAAA,CAAM,MAAA,EAAQ;AACtC,MAAA,OAAO;AAAA,QACL,KAAA,EAAO,UAAA;AAAA,QACP,KAAA,EAAO;AAAA,OACT;AAAA,IACF;AAAA,EACF;AACA,EAAA,IAAI,OAAA,CAAQ,WAAW,IAAA,EAAM;AAC3B,IAAA,MAAM,UAAU,OAAA,CAAQ,OAAA;AACxB,IAAA,MAAM,YAAY,UAAA,CAAW,IAAA,CAAK,CAAA,IAAA,KAAQ,IAAA,CAAK,OAAO,OAAO,CAAA;AAC7D,IAAA,IAAI,aAAa,IAAA,EAAM;AACrB,MAAA,OAAO;AAAA,QACL,OAAO,CAAA,CAAA,EAAI,SAAA,CAAU,IAAI,CAAA,UAAA,EAAa,cAAA,CAAe,OAAO,CAAC,CAAA,CAAA,CAAA;AAAA,QAC7D,OAAO,UAAA,CAAW,MAAA,CAAO,CAAA,IAAA,KAAQ,IAAA,CAAK,QAAQ,OAAO;AAAA,OACvD;AAAA,IACF;AAAA,EACF;AACA,EAAA,IACE,OAAA,CAAQ,cACR,OAAA,CAAQ,QAAA,IAAY,QACpB,UAAA,CAAW,MAAA,GAAS,QAAQ,QAAA,EAC5B;AACA,IAAA,OAAO;AAAA,MACL,KAAA,EAAO,UAAA,CAAW,KAAA,CAAM,CAAA,EAAG,QAAQ,QAAQ,CAAA;AAAA,MAC3C,KAAA,EAAO,CAAA,QAAA,EAAW,OAAA,CAAQ,QAAQ,CAAA,eAAA;AAAA,KACpC;AAAA,EACF;AACA,EAAA,OAAO,EAAC,KAAA,EAAO,UAAA,EAAY,KAAA,EAAO,IAAA,EAAI;AACxC;AAEA,SAAS,aAAa,KAAA,EAA4C;AAChE,EAAA,IAAI,SAAS,IAAA,EAAM;AACjB,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACxB,IAAA,OAAO,KAAA,CAAM,MAAA,KAAW,CAAA,GAAI,IAAA,GAAO,KAAA,CAAM,GAAA,CAAI,CAAA,IAAA,KAAQ,IAAA,CAAK,IAAI,CAAA,CAAE,IAAA,CAAK,IAAI,CAAA;AAAA,EAC3E;AACA,EAAA,OAAO,KAAA,CAAM,IAAA;AACf;AAKO,SAAS,SAAA,CAAU;AAAA,EACxB,KAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,OAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,OAAA;AAAA,EACP,WAAA;AAAA,EACA,WAAA;AAAA,EACA,aAAA,GAAgB,KAAA;AAAA,EAChB,UAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAA,GAAa,KAAA;AAAA,EACb,SAAA,GAAY,KAAA;AAAA,EACZ,IAAA,GAAO,IAAA;AAAA,EACP,MAAA,EAAQ,eAAA;AAAA,EACR,SAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,KAAA;AAAA,EACA;AACF,CAAA,EAAsC;AACpC,EAAA,MAAM,UAAU,KAAA,EAAM;AACtB,EAAA,MAAM,QAAA,GAAW,OAAyB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAwB,IAAI,CAAA;AAC1E,EAAA,MAAM,MAAA,GACJ,oBACC,eAAA,IAAmB,IAAA,GAChB,SACA,EAAC,IAAA,EAAM,OAAA,EAAkB,OAAA,EAAS,eAAA,EAAe,CAAA;AACvD,EAAA,MAAM,aAAA,GACJ,WAAA,IAAe,IAAA,GAAO,CAAA,EAAG,OAAO,CAAA,YAAA,CAAA,GAAiB,MAAA;AACnD,EAAA,MAAM,eAAA,GAAkB,kBAAA,CAAmB,OAAA,EAAS,MAAM,CAAA;AAC1D,EAAA,MAAM,WAAA,GAAc,cAAA,CAAe,aAAA,EAAe,eAAe,CAAA;AACjE,EAAA,MAAM,SAAA,GAAY,aAAa,KAAK,CAAA;AACpC,EAAA,MAAM,WAAA,GACJ,SAAA,IAAa,WAAA,KAAgB,UAAA,GAAa,cAAA,GAAiB,aAAA,CAAA;AAC7D,EAAA,MAAM,aAAa,IAAA,KAAS,UAAA;AAE5B,EAAA,MAAM,WAAA,GAAc,CAAC,KAAA,KAAkB;AACrC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA;AAAA,IACF;AACA,IAAA,MAAM,MAAA,GAAS,cAAc,KAAA,EAAO;AAAA,MAClC,MAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA;AAAA,KACD,CAAA;AACD,IAAA,kBAAA,CAAmB,OAAO,KAAK,CAAA;AAC/B,IAAA,IAAI,UAAA,EAAY;AACd,MAAC,QAAA,CAAqC,OAAO,KAAK,CAAA;AAAA,IACpD,CAAA,MAAA,IAAW,MAAA,CAAO,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG;AACpC,MAAC,SAAyC,IAAI,CAAA;AAAA,IAChD,CAAA,MAAO;AACL,MAAC,QAAA,CAAyC,MAAA,CAAO,KAAA,CAAM,CAAC,CAAC,CAAA;AAAA,IAC3D;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,cAAc,MAAM;AACxB,IAAA,kBAAA,CAAmB,IAAI,CAAA;AACvB,IAAA,IAAI,UAAA,EAAY;AACd,MAAC,QAAA,CAAqC,EAAE,CAAA;AAAA,IAC1C,CAAA,MAAO;AACL,MAAC,SAAyC,IAAI,CAAA;AAAA,IAChD;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,YAAY,UAAA,GACd;AAAA,IACE,WAAA,EAAa,CAAC,KAAA,KAAqC;AACjD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,aAAA,CAAc,IAAI,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,WAAA,EAAa,CAAC,KAAA,KAAqC;AACjD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,KAAK,CAAA;AAAA,IACrB,CAAA;AAAA,IACA,UAAA,EAAY,CAAC,KAAA,KAAqC;AAChD,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,aAAA,CAAc,IAAI,CAAA;AAAA,MACpB;AAAA,IACF,CAAA;AAAA,IACA,MAAA,EAAQ,CAAC,KAAA,KAAqC;AAC5C,MAAA,KAAA,CAAM,cAAA,EAAe;AACrB,MAAA,aAAA,CAAc,KAAK,CAAA;AACnB,MAAA,IAAI,CAAC,UAAA,EAAY;AACf,QAAA,WAAA,CAAY,KAAA,CAAM,IAAA,CAAK,KAAA,CAAM,YAAA,CAAa,KAAK,CAAC,CAAA;AAAA,MAClD;AAAA,IACF;AAAA,MAEF,EAAC;AAEL,EAAA,MAAM,SAAA,GAA4B,EAAC,UAAA,EAAY,UAAA,EAAU;AAEzD,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,aAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACJ,KAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,MAAA,EACE,UAAU,IAAA,GAAO,MAAA,GAAY,EAAC,GAAG,MAAA,EAAQ,WAAW,eAAA,EAAe;AAAA,MAErE,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAW,SAAA,IAAa,MAAA;AAAA,UACxB,kBAAA,EAAkB,WAAA;AAAA,UAClB,iBAAe,UAAA,IAAc,MAAA;AAAA,UAC7B,SAAA,EAAW,EAAA;AAAA,YACT,MAAA,CAAO,OAAA;AAAA,YACP,UAAA,GACI,MAAA,CAAO,QAAA,GACP,WAAA,CAAY,EAAC,MAAM,MAAA,EAAQ,MAAA,EAAQ,IAAA,EAAM,UAAA,EAAW,CAAA;AAAA,YACxD,UAAA,GAAa,OAAO,QAAA,GAAW,MAAA;AAAA,YAC/B,UAAA,GAAa,OAAO,MAAA,GAAS,MAAA;AAAA,YAC7B;AAAA,WACF;AAAA,UACA,SAAS,MAAM;AACb,YAAA,IAAI,CAAC,UAAA,EAAY;AACf,cAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,YAC1B;AAAA,UACF,CAAA;AAAA,UACA,WAAW,CAAA,KAAA,KAAS;AAClB,YAAA,IAAI,CAAC,UAAA,KAAe,KAAA,CAAM,QAAQ,OAAA,IAAW,KAAA,CAAM,QAAQ,GAAA,CAAA,EAAM;AAC/D,cAAA,KAAA,CAAM,cAAA,EAAe;AACrB,cAAA,QAAA,CAAS,SAAS,KAAA,EAAM;AAAA,YAC1B;AAAA,UACF,CAAA;AAAA,UACA,IAAA,EAAK,QAAA;AAAA,UACL,KAAA;AAAA,UACA,QAAA,EAAU,aAAa,EAAA,GAAK,CAAA;AAAA,UAC3B,GAAG,SAAA;AAAA,UACJ,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,OAAA;AAAA,cAAA;AAAA,gBACC,MAAA;AAAA,gBACA,kBAAA,EAAkB,WAAA;AAAA,gBAClB,cAAA,EAAc,MAAA,EAAQ,IAAA,KAAS,OAAA,IAAW,MAAA;AAAA,gBAC1C,WAAW,MAAA,CAAO,WAAA;AAAA,gBAClB,aAAA,EAAa,UAAA;AAAA,gBACb,QAAA,EAAU,UAAA;AAAA,gBACV,EAAA,EAAI,OAAA;AAAA,gBACJ,QAAA,EAAU,UAAA;AAAA,gBACV,UAAU,CAAA,KAAA,KAAS;AACjB,kBAAA,WAAA,CAAY,MAAM,IAAA,CAAK,KAAA,CAAM,OAAO,KAAA,IAAS,EAAE,CAAC,CAAA;AAChD,kBAAA,KAAA,CAAM,cAAc,KAAA,GAAQ,EAAA;AAAA,gBAC9B,CAAA;AAAA,gBACA,GAAA,EAAK,SAAA,CAAU,GAAA,EAAK,QAAQ,CAAA;AAAA,gBAC5B,QAAA,EAAU,UAAA;AAAA,gBACV,IAAA,EAAK;AAAA;AAAA,aACP;AAAA,YACC,SAAA,uBACE,OAAA,EAAA,EAAQ,IAAA,EAAM,aAAa,IAAA,GAAO,IAAA,EAAM,oBAEzC,GAAA,CAAC,MAAA,EAAA,EAAK,WAAW,MAAA,CAAO,IAAA,EACtB,8BAAC,IAAA,EAAA,EAAK,IAAA,EAAM,QAAQ,IAAA,EAAM,UAAA,GAAa,IAAA,GAAO,IAAA,EAAM,CAAA,EACtD,CAAA;AAAA,4BAEF,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBACC,EAAA,EAAG,MAAA;AAAA,gBACH,WAAW,MAAA,CAAO,QAAA;AAAA,gBAClB,KAAA,EAAO,SAAA,IAAa,IAAA,GAAO,WAAA,GAAc,SAAA;AAAA,gBACxC,uBAAa,iBAAA,GAAoB;AAAA;AAAA,aACpC;AAAA,YACC,aAAa,IAAA,mBACZ,GAAA;AAAA,cAAC,QAAA;AAAA,cAAA;AAAA,gBACC,YAAA,EAAY,SAAS,KAAK,CAAA,CAAA;AAAA,gBAC1B,WAAW,MAAA,CAAO,WAAA;AAAA,gBAClB,SAAS,CAAA,KAAA,KAAS;AAChB,kBAAA,KAAA,CAAM,eAAA,EAAgB;AACtB,kBAAA,WAAA,EAAY;AAAA,gBACd,CAAA;AAAA,gBACA,IAAA,EAAK,QAAA;AAAA,gBACL,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAM,CAAA,EAAG,MAAK,IAAA,EAAK;AAAA;AAAA,aAC3B,GACE,IAAA;AAAA,YACH,MAAA,IAAU,IAAA,IAAQ,CAAC,UAAA,mBAClB,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,IAAA,EAAO,QAAA,EAAA,aAAA,CAAc,MAAA,CAAO,IAAI,GAAE,CAAA,GACxD;AAAA;AAAA;AAAA;AACN;AAAA,GACF;AAEJ;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-VVYUCQHP.js","sourcesContent":["export function formatFileSize(bytes: number): string {\n  if (bytes < 1024) {\n    return `${bytes} B`;\n  }\n\n  if (bytes < 1024 * 1024) {\n    return `${(bytes / 1024).toFixed(1)} KB`;\n  }\n\n  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n","import {Upload, X} from 'lucide-react';\nimport {\n  useId,\n  useRef,\n  useState,\n  type CSSProperties,\n  type DragEvent,\n  type ReactNode,\n  type Ref,\n} from 'react';\nimport {css} from 'styled-system/css';\nimport {cx} from '../../internal/cx';\nimport {formatFileSize} from '../../internal/formatFileSize';\nimport {mergeRefs} from '../../internal/mergeRefs';\nimport {\n  Field,\n  inputRecipe,\n  type FieldNecessity,\n  type InputSize,\n  type InputStatus,\n} from '../Field';\nimport {\n  getDescribedBy,\n  getStatusIcon,\n  getStatusMessageID,\n} from '../Field/inputUtils';\nimport {Icon, type IconComponent} from '../Icon';\nimport {Spinner} from '../Spinner';\nimport {Text} from '../Text';\n\nexport type FileInputMode = 'dropzone' | 'input';\n\ninterface FileInputBaseProps {\n  /**\n   * Comma-separated MIME types or file extensions the input accepts.\n   */\n  accept?: string;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the hidden file input.\n   */\n  'data-testid'?: string;\n  /**\n   * Supporting text rendered below the label.\n   */\n  description?: ReactNode;\n  /**\n   * Whether the input is disabled.\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Whether to visually hide the label.\n   * @default false\n   */\n  isLabelHidden?: boolean;\n  /**\n   * Whether the input is in a loading state.\n   * @default false\n   */\n  isLoading?: boolean;\n  /**\n   * Field label text.\n   */\n  label: string;\n  /**\n   * Icon shown before the label.\n   */\n  labelIcon?: IconComponent;\n  /**\n   * Tooltip content shown next to the label.\n   */\n  labelTooltip?: ReactNode;\n  /**\n   * Maximum file size in bytes.\n   */\n  maxSize?: number;\n  /**\n   * Display mode: inline input or drag-and-drop dropzone.\n   * @default 'input'\n   */\n  mode?: FileInputMode;\n  /**\n   * Placeholder text shown when no file is selected.\n   */\n  placeholder?: string;\n  /**\n   * Ref forwarded to the hidden file input element.\n   */\n  ref?: Ref<HTMLInputElement>;\n  /**\n   * Visual size of the input.\n   * @default 'md'\n   */\n  size?: InputSize;\n  /**\n   * Validation status displayed below the input.\n   */\n  status?: InputStatus;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\ninterface FileInputSingleProps extends FileInputBaseProps {\n  /**\n   * Whether multiple files can be selected.\n   */\n  isMultiple?: false;\n  /**\n   * Maximum number of files allowed. Only applicable when isMultiple is true.\n   */\n  maxFiles?: undefined;\n  /**\n   * Called when the selected file changes.\n   */\n  onChange: (file: File | null) => void;\n  /**\n   * Currently selected file.\n   */\n  value: File | null;\n}\n\ninterface FileInputMultipleProps extends FileInputBaseProps {\n  /**\n   * Whether multiple files can be selected.\n   */\n  isMultiple: true;\n  /**\n   * Maximum number of files allowed.\n   */\n  maxFiles?: number;\n  /**\n   * Called when the selected files change.\n   */\n  onChange: (files: File[]) => void;\n  /**\n   * Currently selected files.\n   */\n  value: File[];\n}\n\nexport type FileInputProps = (FileInputMultipleProps | FileInputSingleProps) &\n  FieldNecessity;\n\nconst styles = {\n  surface: css({\n    boxSizing: 'border-box',\n    display: 'flex',\n    alignItems: 'center',\n    gap: '2',\n    px: '3',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border.emphasized',\n    borderRadius: 'md',\n    bg: 'bg',\n    cursor: 'pointer',\n    _hover: {borderColor: 'fg.muted'},\n    _focusVisible: {\n      outlineWidth: 'focus',\n      outlineStyle: 'solid',\n      outlineColor: 'primary',\n      outlineOffset: 'focusOffset',\n    },\n  }),\n  dropzone: css({\n    minH: '32',\n    flexDirection: 'column',\n    justifyContent: 'center',\n    alignItems: 'center',\n    borderStyle: 'dashed',\n    textAlign: 'center',\n    '& > *': {\n      flex: 'none',\n    },\n  }),\n  disabled: css({\n    cursor: 'not-allowed',\n    opacity: 0.55,\n  }),\n  active: css({\n    borderColor: 'primary',\n    bg: 'bg.selected',\n  }),\n  hiddenInput: css({\n    position: 'absolute',\n    w: '1px',\n    h: '1px',\n    p: 0,\n    m: '-1px',\n    overflow: 'hidden',\n    clipPath: 'inset(50%)',\n    whiteSpace: 'nowrap',\n    borderWidth: 0,\n  }),\n  fileName: css({\n    flex: 1,\n    minW: 0,\n    overflow: 'hidden',\n    textOverflow: 'ellipsis',\n    whiteSpace: 'nowrap',\n  }),\n  icon: css({\n    display: 'inline-flex',\n    color: 'fg.muted',\n  }),\n  clearButton: css({\n    display: 'inline-flex',\n    p: 0,\n    borderWidth: 0,\n    bg: 'transparent',\n    color: 'fg.muted',\n    cursor: 'pointer',\n  }),\n} as const;\n\nfunction validateFiles(\n  files: File[],\n  options: {\n    accept?: string;\n    isMultiple: boolean;\n    maxFiles?: number;\n    maxSize?: number;\n  },\n): {error: string | null; files: File[]} {\n  let validFiles = files;\n  if (options.accept != null) {\n    const acceptedTypes = options.accept\n      .split(',')\n      .map(type => type.trim().toLowerCase());\n    validFiles = validFiles.filter(file =>\n      acceptedTypes.some(type => {\n        if (type.startsWith('.')) {\n          return file.name.toLowerCase().endsWith(type);\n        }\n        if (type.endsWith('/*')) {\n          return file.type.startsWith(type.slice(0, -1));\n        }\n        return file.type.toLowerCase() === type;\n      }),\n    );\n    if (validFiles.length !== files.length) {\n      return {\n        files: validFiles,\n        error: 'One or more files are not an accepted type.',\n      };\n    }\n  }\n  if (options.maxSize != null) {\n    const maxSize = options.maxSize;\n    const oversized = validFiles.find(file => file.size > maxSize);\n    if (oversized != null) {\n      return {\n        error: `\"${oversized.name}\" exceeds ${formatFileSize(maxSize)}.`,\n        files: validFiles.filter(file => file.size <= maxSize),\n      };\n    }\n  }\n  if (\n    options.isMultiple &&\n    options.maxFiles != null &&\n    validFiles.length > options.maxFiles\n  ) {\n    return {\n      files: validFiles.slice(0, options.maxFiles),\n      error: `Maximum ${options.maxFiles} files allowed.`,\n    };\n  }\n  return {files: validFiles, error: null};\n}\n\nfunction getFileNames(value: File | File[] | null): string | null {\n  if (value == null) {\n    return null;\n  }\n  if (Array.isArray(value)) {\n    return value.length === 0 ? null : value.map(file => file.name).join(', ');\n  }\n  return value.name;\n}\n\n/**\n * A file input supporting both inline and drag-and-drop dropzone modes.\n */\nexport function FileInput({\n  label,\n  value,\n  onChange,\n  accept,\n  isMultiple = false,\n  maxSize,\n  maxFiles,\n  mode = 'input',\n  placeholder,\n  description,\n  isLabelHidden = false,\n  isOptional,\n  isRequired,\n  isDisabled = false,\n  isLoading = false,\n  size = 'md',\n  status: statusFromProps,\n  labelIcon,\n  labelTooltip,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: FileInputProps): React.JSX.Element {\n  const inputId = useId();\n  const inputRef = useRef<HTMLInputElement>(null);\n  const [isDragOver, setIsDragOver] = useState(false);\n  const [validationError, setValidationError] = useState<string | null>(null);\n  const status =\n    statusFromProps ??\n    (validationError == null\n      ? undefined\n      : {type: 'error' as const, message: validationError});\n  const descriptionID =\n    description != null ? `${inputId}-description` : undefined;\n  const statusMessageID = getStatusMessageID(inputId, status);\n  const describedBy = getDescribedBy(descriptionID, statusMessageID);\n  const fileNames = getFileNames(value);\n  const displayText =\n    fileNames ?? placeholder ?? (isMultiple ? 'Choose files' : 'Choose file');\n  const isDropzone = mode === 'dropzone';\n\n  const handleFiles = (files: File[]) => {\n    if (isDisabled) {\n      return;\n    }\n    const result = validateFiles(files, {\n      accept,\n      isMultiple,\n      maxFiles,\n      maxSize,\n    });\n    setValidationError(result.error);\n    if (isMultiple) {\n      (onChange as (files: File[]) => void)(result.files);\n    } else if (result.files.length === 0) {\n      (onChange as (file: File | null) => void)(null);\n    } else {\n      (onChange as (file: File | null) => void)(result.files[0]);\n    }\n  };\n\n  const handleClear = () => {\n    setValidationError(null);\n    if (isMultiple) {\n      (onChange as (files: File[]) => void)([]);\n    } else {\n      (onChange as (file: File | null) => void)(null);\n    }\n  };\n\n  const dragProps = isDropzone\n    ? {\n        onDragEnter: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          if (!isDisabled) {\n            setIsDragOver(true);\n          }\n        },\n        onDragLeave: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          setIsDragOver(false);\n        },\n        onDragOver: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          if (!isDisabled) {\n            setIsDragOver(true);\n          }\n        },\n        onDrop: (event: DragEvent<HTMLDivElement>) => {\n          event.preventDefault();\n          setIsDragOver(false);\n          if (!isDisabled) {\n            handleFiles(Array.from(event.dataTransfer.files));\n          }\n        },\n      }\n    : {};\n\n  const necessity: FieldNecessity = {isOptional, isRequired};\n\n  return (\n    <Field\n      description={description}\n      descriptionID={descriptionID}\n      inputId={inputId}\n      isDisabled={isDisabled}\n      isLabelHidden={isLabelHidden}\n      {...necessity}\n      label={label}\n      labelIcon={labelIcon}\n      labelTooltip={labelTooltip}\n      status={\n        status == null ? undefined : {...status, messageID: statusMessageID}\n      }>\n      <div\n        aria-busy={isLoading || undefined}\n        aria-describedby={describedBy}\n        aria-disabled={isDisabled || undefined}\n        className={cx(\n          styles.surface,\n          isDropzone\n            ? styles.dropzone\n            : inputRecipe({size, status: status?.type, isDisabled}),\n          isDisabled ? styles.disabled : undefined,\n          isDragOver ? styles.active : undefined,\n          className,\n        )}\n        onClick={() => {\n          if (!isDisabled) {\n            inputRef.current?.click();\n          }\n        }}\n        onKeyDown={event => {\n          if (!isDisabled && (event.key === 'Enter' || event.key === ' ')) {\n            event.preventDefault();\n            inputRef.current?.click();\n          }\n        }}\n        role=\"button\"\n        style={style}\n        tabIndex={isDisabled ? -1 : 0}\n        {...dragProps}>\n        <input\n          accept={accept}\n          aria-describedby={describedBy}\n          aria-invalid={status?.type === 'error' || undefined}\n          className={styles.hiddenInput}\n          data-testid={dataTestId}\n          disabled={isDisabled}\n          id={inputId}\n          multiple={isMultiple}\n          onChange={event => {\n            handleFiles(Array.from(event.target.files ?? []));\n            event.currentTarget.value = '';\n          }}\n          ref={mergeRefs(ref, inputRef)}\n          required={isRequired}\n          type=\"file\"\n        />\n        {isLoading ? (\n          <Spinner size={isDropzone ? 'md' : 'sm'} />\n        ) : (\n          <span className={styles.icon}>\n            <Icon icon={Upload} size={isDropzone ? 'md' : 'sm'} />\n          </span>\n        )}\n        <Text\n          as=\"span\"\n          className={styles.fileName}\n          color={fileNames == null ? 'secondary' : 'primary'}>\n          {isDragOver ? 'Drop files here' : displayText}\n        </Text>\n        {fileNames != null ? (\n          <button\n            aria-label={`Clear ${label}`}\n            className={styles.clearButton}\n            onClick={event => {\n              event.stopPropagation();\n              handleClear();\n            }}\n            type=\"button\">\n            <Icon icon={X} size=\"sm\" />\n          </button>\n        ) : null}\n        {status != null && !isDropzone ? (\n          <span className={styles.icon}>{getStatusIcon(status.type)}</span>\n        ) : null}\n      </div>\n    </Field>\n  );\n}\n\nFileInput.displayName = 'FileInput';\n"]}