@spark-ui/components 11.3.1 → 11.4.0

package/dist/docgen.json

@@ -31996,6 +31996,207 @@
     "methods": [],
     "props": {}
   },
+  "getFileIcon": {
+    "tags": {
+      "param": "file - The file to get the icon for",
+      "returns": "React element representing the icon component"
+    },
+    "description": "Returns the appropriate icon component based on the file type",
+    "displayName": "getFileIcon",
+    "methods": [],
+    "props": {
+      "lastModified": {
+        "defaultValue": null,
+        "description": "The **`lastModified`** read-only property of the File interface provides the last modified date of the file as the number of milliseconds since the Unix epoch (January 1, 1970 at midnight).\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/lastModified)",
+        "name": "lastModified",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "File"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "File"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "number"
+        }
+      },
+      "name": {
+        "defaultValue": null,
+        "description": "The **`name`** read-only property of the File interface returns the name of the file represented by a File object.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/name)",
+        "name": "name",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "File"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "File"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "webkitRelativePath": {
+        "defaultValue": null,
+        "description": "The **`webkitRelativePath`** read-only property of the File interface contains a string which specifies the file's path relative to the directory selected by the user in an input element with its `webkitdirectory` attribute set.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/File/webkitRelativePath)",
+        "name": "webkitRelativePath",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "File"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "File"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "size": {
+        "defaultValue": null,
+        "description": "The **`size`** read-only property of the Blob interface returns the size of the Blob or File in bytes.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/size)",
+        "name": "size",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "number"
+        }
+      },
+      "type": {
+        "defaultValue": null,
+        "description": "The **`type`** read-only property of the Blob interface returns the MIME type of the file.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/type)",
+        "name": "type",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "string"
+        }
+      },
+      "arrayBuffer": {
+        "defaultValue": null,
+        "description": "The **`arrayBuffer()`** method of the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/arrayBuffer)",
+        "name": "arrayBuffer",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "() => Promise<ArrayBuffer>"
+        }
+      },
+      "bytes": {
+        "defaultValue": null,
+        "description": "The **`bytes()`** method of the Blob interface returns a Promise that resolves with a Uint8Array containing the contents of the blob as an array of bytes.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/bytes)",
+        "name": "bytes",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "() => Promise<Uint8Array<ArrayBuffer>>"
+        }
+      },
+      "slice": {
+        "defaultValue": null,
+        "description": "The **`slice()`** method of the Blob interface creates and returns a new `Blob` object which contains data from a subset of the blob on which it's called.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/slice)",
+        "name": "slice",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "(start?: number, end?: number, contentType?: string) => Blob"
+        }
+      },
+      "stream": {
+        "defaultValue": null,
+        "description": "The **`stream()`** method of the Blob interface returns a ReadableStream which upon reading returns the data contained within the `Blob`.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/stream)",
+        "name": "stream",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "() => ReadableStream<Uint8Array<ArrayBuffer>>"
+        }
+      },
+      "text": {
+        "defaultValue": null,
+        "description": "The **`text()`** method of the string containing the contents of the blob, interpreted as UTF-8.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Blob/text)",
+        "name": "text",
+        "parent": {
+          "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+          "name": "Blob"
+        },
+        "declarations": [
+          {
+            "fileName": "spark-web/node_modules/typescript/lib/lib.dom.d.ts",
+            "name": "Blob"
+          }
+        ],
+        "required": true,
+        "type": {
+          "name": "() => Promise<string>"
+        }
+      }
+    }
+  },
   "FormField": {
     "tags": {},
     "description": "",

package/dist/file-upload/index.js

@@ -26,9 +26,14 @@ module.exports = __toCommonJS(file_upload_exports);
 
 // src/file-upload/FileUpload.tsx
 var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/file-upload/utils.ts
+var import_CvOutline = require("@spark-ui/icons/CvOutline");
+var import_FilePdfOutline = require("@spark-ui/icons/FilePdfOutline");
+var import_ImageOutline = require("@spark-ui/icons/ImageOutline");
+var import_PlayOutline = require("@spark-ui/icons/PlayOutline");
+var import_react = require("react");
 function validateFileAccept(file, accept) {
   if (!accept) {
     return true;
@@ -107,10 +112,24 @@ function formatFileSize(bytes, locale) {
   });
   return formatter.format(size);
 }
+function getFileIcon(file) {
+  const fileType = file.type.toLowerCase();
+  const fileName = file.name.toLowerCase();
+  if (fileType.startsWith("image/") || /\.(jpg|jpeg|png|gif|bmp|webp|svg|ico)$/i.test(fileName)) {
+    return (0, import_react.createElement)(import_ImageOutline.ImageOutline);
+  }
+  if (fileType === "application/pdf" || fileName.endsWith(".pdf")) {
+    return (0, import_react.createElement)(import_FilePdfOutline.FilePdfOutline);
+  }
+  if (fileType.startsWith("video/") || /\.(mp4|avi|mov|wmv|flv|webm|mkv)$/i.test(fileName)) {
+    return (0, import_react.createElement)(import_PlayOutline.PlayOutline);
+  }
+  return (0, import_react.createElement)(import_CvOutline.CvOutline);
+}
 
 // src/file-upload/FileUpload.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var FileUploadContext = (0, import_react.createContext)(null);
+var FileUploadContext = (0, import_react2.createContext)(null);
 var FileUpload = ({
   asChild: _asChild = false,
   children,
@@ -129,10 +148,10 @@ var FileUpload = ({
   locale
 }) => {
   const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
-  const inputRef = (0, import_react.useRef)(null);
-  const triggerRef = (0, import_react.useRef)(null);
-  const dropzoneRef = (0, import_react.useRef)(null);
-  const deleteButtonRefs = (0, import_react.useRef)([]);
+  const inputRef = (0, import_react2.useRef)(null);
+  const triggerRef = (0, import_react2.useRef)(null);
+  const dropzoneRef = (0, import_react2.useRef)(null);
+  const deleteButtonRefs = (0, import_react2.useRef)([]);
   const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(
     controlledValue,
     defaultValue,
@@ -140,7 +159,7 @@ var FileUpload = ({
   );
   const files = filesState ?? [];
   const setFiles = setFilesState;
-  const [rejectedFiles, setRejectedFiles] = (0, import_react.useState)([]);
+  const [rejectedFiles, setRejectedFiles] = (0, import_react2.useState)([]);
   const addFiles = (newFiles) => {
     if (disabled || readOnly) {
       return;
@@ -335,22 +354,19 @@ var FileUpload = ({
 };
 FileUpload.displayName = "FileUpload";
 var useFileUploadContext = () => {
-  const context = (0, import_react.useContext)(FileUploadContext);
+  const context = (0, import_react2.useContext)(FileUploadContext);
   if (!context) {
     throw Error("useFileUploadContext must be used within a FileUpload provider");
   }
   return context;
 };
 
-// src/file-upload/FileUploadAcceptedFile.tsx
-var import_CvOutline = require("@spark-ui/icons/CvOutline");
-
 // src/icon/Icon.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -358,7 +374,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react2.isValidElement)(children) ? (0, import_react2.cloneElement)(
+  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -436,9 +452,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react3.Children.only(children);
+  const child = import_react4.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    (0, import_react3.cloneElement)(child, {
+    (0, import_react4.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -453,7 +469,7 @@ Icon.displayName = "Icon";
 // src/progress/Progress.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_radix_ui3 = require("radix-ui");
-var import_react5 = require("react");
+var import_react6 = require("react");
 
 // src/progress/ProgressBar.styles.ts
 var import_class_variance_authority2 = require("class-variance-authority");
@@ -470,11 +486,11 @@ var progressBarStyles = (0, import_class_variance_authority2.cva)(
 );
 
 // src/progress/ProgressContext.tsx
-var import_react4 = require("react");
-var ProgressContext = (0, import_react4.createContext)(null);
+var import_react5 = require("react");
+var ProgressContext = (0, import_react5.createContext)(null);
 var ID_PREFIX = ":progress";
 var useProgress = () => {
-  const context = (0, import_react4.useContext)(ProgressContext);
+  const context = (0, import_react5.useContext)(ProgressContext);
   if (!context) {
     throw new Error("useProgress must be used within a Progress provider");
   }
@@ -577,8 +593,8 @@ var Progress = ({
   ref,
   ...others
 }) => {
-  const [labelId, setLabelId] = (0, import_react5.useState)();
-  const value = (0, import_react5.useMemo)(() => {
+  const [labelId, setLabelId] = (0, import_react6.useState)();
+  const value = (0, import_react6.useMemo)(() => {
     return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
   }, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -600,7 +616,7 @@ Progress.displayName = "Progress";
 
 // src/progress/ProgressLabel.tsx
 var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressLabel = ({
   id: idProp,
@@ -608,10 +624,10 @@ var ProgressLabel = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const internalID = `${ID_PREFIX}-label-${(0, import_react6.useId)()}`;
+  const internalID = `${ID_PREFIX}-label-${(0, import_react7.useId)()}`;
   const id = idProp || internalID;
   const { onLabelId } = useProgress();
-  const rootRef = (0, import_react6.useCallback)(
+  const rootRef = (0, import_react7.useCallback)(
     (el) => {
       onLabelId(el ? id : void 0);
     },
@@ -672,11 +688,11 @@ Item.displayName = "FileUpload.Item";
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/button/Button.tsx
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -1481,7 +1497,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react7.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react8.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1588,7 +1604,7 @@ var ItemDeleteTrigger = ({
   ...props
 }) => {
   const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly } = useFileUploadContext();
-  const buttonRef = (0, import_react8.useRef)(null);
+  const buttonRef = (0, import_react9.useRef)(null);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
@@ -1696,7 +1712,7 @@ var AcceptedFile = ({
 }) => {
   const { locale } = useFileUploadContext();
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Item, { className, ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { size: "md", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_CvOutline.CvOutline, {}) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "min-w-0 flex-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
         /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ItemFileName, { children: file.name }),
@@ -1731,7 +1747,7 @@ Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
 var import_class_variance_authority13 = require("class-variance-authority");
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 function Dropzone({
   children,
@@ -1740,7 +1756,7 @@ function Dropzone({
   unstyled = false
 }) {
   const ctx = useFileUploadContext();
-  const dropzoneRef = (0, import_react9.useRef)(null);
+  const dropzoneRef = (0, import_react10.useRef)(null);
   if (!ctx) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
   const handleDrop = (e) => {
     e.preventDefault();
@@ -1820,7 +1836,7 @@ Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
 var import_class_variance_authority14 = require("class-variance-authority");
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var PreviewImage = ({
   asChild: _asChild = false,
@@ -1829,11 +1845,11 @@ var PreviewImage = ({
   fallback = "\u{1F4C4}",
   ...props
 }) => {
-  const [imageError, setImageError] = (0, import_react10.useState)(false);
-  const [imageLoaded, setImageLoaded] = (0, import_react10.useState)(false);
+  const [imageError, setImageError] = (0, import_react11.useState)(false);
+  const [imageLoaded, setImageLoaded] = (0, import_react11.useState)(false);
   const isImage = file.type.startsWith("image/");
   const imageUrl = isImage ? URL.createObjectURL(file) : null;
-  (0, import_react10.useEffect)(() => {
+  (0, import_react11.useEffect)(() => {
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
@@ -1885,7 +1901,7 @@ var import_class_variance_authority16 = require("class-variance-authority");
 // src/file-upload/FileUploadRejectedFileDeleteTrigger.tsx
 var import_Close2 = require("@spark-ui/icons/Close");
 var import_class_variance_authority15 = require("class-variance-authority");
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var RejectedFileDeleteTrigger = ({
   className,
@@ -1894,7 +1910,7 @@ var RejectedFileDeleteTrigger = ({
   ...props
 }) => {
   const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly } = useFileUploadContext();
-  const buttonRef = (0, import_react11.useRef)(null);
+  const buttonRef = (0, import_react12.useRef)(null);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;