@moduix/react 1.1.1 → 2.1.0

package/dist/components/file-upload/FileUpload.css

@@ -61,8 +61,8 @@
 
   .dgDG7a_dropzoneIcon {
     box-sizing: border-box;
-    width: var(--file-upload-dropzone-icon-box-size, 2.5rem);
-    height: var(--file-upload-dropzone-icon-box-size, 2.5rem);
+    width: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
+    height: var(--file-upload-dropzone-icon-box-size, var(--spacing-10));
     border: var(--file-upload-dropzone-icon-border-width, var(--border-width-sm)) solid
       var(--file-upload-dropzone-icon-border-color, var(--color-border));
     border-radius: var(--file-upload-dropzone-icon-radius, var(--radius-full));
@@ -73,8 +73,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-dropzone-icon-size, 1rem);
-      height: var(--file-upload-dropzone-icon-size, 1rem);
+      width: var(--file-upload-dropzone-icon-size, var(--spacing-4));
+      height: var(--file-upload-dropzone-icon-size, var(--spacing-4));
     }
   }
 
@@ -83,12 +83,12 @@
     justify-content: center;
     align-items: center;
     gap: var(--file-upload-trigger-gap, var(--button-content-gap, var(--spacing-2)));
-    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-lg)));
+    min-height: var(--file-upload-trigger-height, var(--button-size-md, var(--size-md)));
     border: var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm)))
       solid
       var(--file-upload-trigger-border-color, var(--button-default-border-color, var(--color-primary)));
     border-radius: var(--file-upload-trigger-radius, var(--button-radius, var(--radius-md)));
-    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, 1rem));
+    padding-inline: var(--file-upload-trigger-padding-x, var(--button-padding-x-md, var(--spacing-4)));
     background-color: var(--file-upload-trigger-bg, var(--button-default-bg, var(--color-primary)));
     color: var(--file-upload-trigger-color, var(--button-default-color, var(--color-primary-foreground)));
     appearance: none;
@@ -114,7 +114,7 @@
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--border-width-md)))
+      outline: var(--file-upload-focus-ring-width, var(--button-focus-ring-width, var(--focus-ring-width, var(--border-width-md))))
         solid var(--file-upload-focus-ring-color, var(--button-focus-ring-color, var(--color-ring)));
       outline-offset: calc(var(--file-upload-trigger-border-width, var(--button-border-width, var(--border-width-sm))) *
           -1);
@@ -132,12 +132,14 @@
   }
 
   .dgDG7a_itemGroup {
+    align-items: flex-start;
     gap: var(--file-upload-item-group-gap, var(--spacing-2));
+    flex-wrap: wrap;
     width: 100%;
     margin: 0;
     padding: 0;
     list-style: none;
-    display: grid;
+    display: flex;
 
     &:empty {
       display: none;
@@ -149,7 +151,7 @@
     align-items: center;
     column-gap: var(--file-upload-item-gap, var(--spacing-3));
     row-gap: var(--file-upload-item-row-gap, var(--spacing-1));
-    min-height: var(--file-upload-item-min-height, 2.5rem);
+    min-height: var(--file-upload-item-min-height, var(--size-md));
     border: var(--file-upload-item-border-width, var(--border-width-sm)) solid
       var(--file-upload-item-border-color, var(--color-border));
     border-radius: var(--file-upload-item-radius, var(--radius-md));
@@ -157,6 +159,7 @@
       var(--file-upload-item-padding-x, var(--spacing-3));
     background-color: var(--file-upload-item-bg, var(--color-background));
     color: var(--file-upload-item-color, var(--color-foreground));
+    flex: 1 0 100%;
     grid-template-columns: minmax(0, 1fr) auto;
     display: grid;
 
@@ -169,15 +172,15 @@
     }
 
     &:has([data-slot="file-upload-item-preview"]) {
-      min-height: var(--file-upload-item-preview-min-height, 3rem);
+      min-height: var(--file-upload-item-preview-min-height, var(--size-xl));
       padding-block: var(--file-upload-item-preview-padding-y, var(--spacing-2));
       grid-template-columns: auto minmax(0, 1fr) auto;
     }
   }
 
   .dgDG7a_itemPreview {
-    width: var(--file-upload-item-preview-size, 2rem);
-    height: var(--file-upload-item-preview-size, 2rem);
+    width: var(--file-upload-item-preview-size, var(--spacing-10));
+    height: var(--file-upload-item-preview-size, var(--spacing-10));
     border-radius: var(--file-upload-item-preview-radius, var(--radius-sm));
     background-color: var(--file-upload-item-preview-bg, var(--color-muted));
     color: var(--file-upload-item-preview-color, var(--color-muted-foreground));
@@ -194,15 +197,37 @@
     height: 100%;
   }
 
+  .dgDG7a_itemPreviewIcon {
+    width: var(--file-upload-item-preview-icon-size, var(--spacing-4));
+    height: var(--file-upload-item-preview-icon-size, var(--spacing-4));
+  }
+
+  .dgDG7a_itemMetadata {
+    align-items: center;
+    gap: var(--file-upload-item-row-gap, var(--spacing-1));
+    color: var(--file-upload-item-size-color, var(--color-muted-foreground));
+    font-size: var(--file-upload-item-size-font-size, var(--text-xs));
+    line-height: var(--file-upload-item-size-line-height, var(--line-height-text-xs));
+    grid-column: 1;
+    display: flex;
+
+    & > [data-slot="file-upload-item-size-text"]:before {
+      content: "·";
+      margin-inline-end: var(--file-upload-item-row-gap, var(--spacing-1));
+    }
+  }
+
   .dgDG7a_itemName {
     min-width: 0;
     color: var(--file-upload-item-name-color, currentColor);
     font-size: var(--file-upload-item-name-font-size, var(--text-sm));
     font-weight: var(--file-upload-item-name-font-weight, var(--weight-medium));
     line-height: var(--file-upload-item-name-line-height, var(--line-height-text-sm));
-    text-overflow: ellipsis;
-    white-space: nowrap;
+    -webkit-line-clamp: 1;
+    line-clamp: 1;
+    -webkit-box-orient: vertical;
     grid-column: 1;
+    display: -webkit-box;
     overflow: hidden;
   }
 
@@ -217,14 +242,14 @@
     grid-column: 1;
   }
 
-  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemSizeText {
+  .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemSizeText, .dgDG7a_item:has([data-slot="file-upload-item-preview"]) .dgDG7a_itemMetadata {
     grid-column: 2;
   }
 
-  .dgDG7a_itemDeleteTrigger, .dgDG7a_clearTrigger {
+  .dgDG7a_itemDeleteTrigger {
     box-sizing: border-box;
-    width: var(--file-upload-action-size, 2rem);
-    height: var(--file-upload-action-size, 2rem);
+    width: var(--file-upload-action-size, var(--size-sm));
+    height: var(--file-upload-action-size, var(--size-sm));
     border-radius: var(--file-upload-action-radius, var(--radius-sm));
     background-color: var(--file-upload-action-bg, transparent);
     color: var(--file-upload-action-color, var(--color-muted-foreground));
@@ -240,8 +265,8 @@
     display: inline-flex;
 
     & > svg {
-      width: var(--file-upload-action-icon-size, 1rem);
-      height: var(--file-upload-action-icon-size, 1rem);
+      width: var(--file-upload-action-icon-size, var(--spacing-4));
+      height: var(--file-upload-action-icon-size, var(--spacing-4));
     }
 
     @media (hover: hover) {
@@ -252,8 +277,8 @@
     }
 
     &:focus-visible {
-      outline: var(--file-upload-focus-ring-width, var(--border-width-md)) solid
-        var(--file-upload-focus-ring-color, var(--color-ring));
+      outline: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)))
+        solid var(--file-upload-focus-ring-color, var(--color-ring));
       outline-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
     }
 
@@ -277,14 +302,62 @@
     grid-column: 3;
   }
 
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) {
+    flex: 0 1 min(100%, var(--file-upload-image-item-max-width, 10rem));
+    grid-template-rows: auto auto auto;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: start;
+    min-height: 0;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemPreview {
+    aspect-ratio: 1;
+    grid-area: 1 / 1 / auto / -1;
+    width: 100%;
+    height: auto;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemName {
+    grid-area: 2 / 1;
+    align-self: end;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemMetadata {
+    grid-area: 3 / 1;
+  }
+
+  .dgDG7a_item:has([data-slot="file-upload-item-preview-image"]) .dgDG7a_itemDeleteTrigger {
+    grid-area: 2 / 2 / span 2;
+    align-self: center;
+  }
+
   .dgDG7a_clearTrigger {
+    --close-button-size: var(--file-upload-action-size, var(--size-sm));
+    --close-button-radius: var(--file-upload-action-radius, var(--radius-sm));
+    --close-button-bg: var(--file-upload-action-bg, transparent);
+    --close-button-bg-hover: var(--file-upload-action-bg-hover, var(--color-muted));
+    --close-button-color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
+    --close-button-color-hover: var(--file-upload-action-color-hover, var(--color-foreground));
+    --close-button-icon-size: var(--file-upload-action-icon-size, var(--spacing-4));
+    --close-button-transition: var(--file-upload-transition, var(--transition-default));
+    --close-button-focus-ring-width: var(--file-upload-focus-ring-width, var(--focus-ring-width, var(--border-width-md)));
+    --close-button-focus-ring-color: var(--file-upload-focus-ring-color, var(--color-ring));
+    --close-button-focus-ring-offset: var(--file-upload-focus-ring-offset, var(--border-width-sm));
+    --close-button-disabled-opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
     align-self: flex-start;
+  }
+
+  .dgDG7a_clearTriggerWithContent {
     gap: var(--file-upload-clear-trigger-gap, var(--spacing-2));
     width: auto;
     padding-inline: var(--file-upload-clear-trigger-padding-x, var(--spacing-2));
-    color: var(--file-upload-clear-trigger-color, var(--color-muted-foreground));
     font: inherit;
     font-size: var(--file-upload-clear-trigger-font-size, var(--text-sm));
     line-height: var(--file-upload-clear-trigger-line-height, var(--line-height-text-sm));
   }
+
+  .dgDG7a_clearTrigger[data-readonly] {
+    pointer-events: none;
+    opacity: var(--file-upload-disabled-opacity, var(--opacity-disabled));
+  }
 }

package/dist/components/file-upload/FileUpload.d.ts

@@ -1,28 +1,45 @@
-import { ComponentProps } from "react";
-import { FileUpload } from "@ark-ui/react/file-upload";
+import { FileIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { HTMLArkProps } from "@ark-ui/react/factory";
+import { ComponentProps, ReactNode } from "react";
+import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/react/file-upload";
 
 //#region src/components/file-upload/FileUpload.d.ts
 declare function FileUploadDropzoneIcon({
   className,
   children,
   ...props
-}: ComponentProps<'span'>): import("react").JSX.Element;
+}: HTMLArkProps<'span'>): import("react").JSX.Element;
+declare function FileUploadItemPreviewIcon({
+  className,
+  ...props
+}: ComponentProps<typeof FileIcon>): import("react").JSX.Element;
+declare function FileUploadItemMetadata({
+  file,
+  className,
+  ...props
+}: HTMLArkProps<'div'> & {
+  file: File;
+}): import("react").JSX.Element;
+declare function FileUploadItems(): import("react").JSX.Element[];
 declare const FileUpload$1: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
   Root: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   RootProvider: import("react").ForwardRefExoticComponent<Omit<FileUpload.RootProviderProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Context: (props: FileUpload.ContextProps) => ReactNode;
   Label: import("react").ForwardRefExoticComponent<Omit<FileUpload.LabelProps & import("react").RefAttributes<HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
   Dropzone: import("react").ForwardRefExoticComponent<Omit<FileUpload.DropzoneProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   DropzoneIcon: typeof FileUploadDropzoneIcon;
   Trigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.TriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
-  HiddenInput: import("react").ForwardRefExoticComponent<Omit<FileUpload.HiddenInputProps & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
   ItemGroup: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemGroupProps & import("react").RefAttributes<HTMLUListElement>, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
   Item: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemProps & import("react").RefAttributes<HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+  Items: typeof FileUploadItems;
   ItemPreview: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
   ItemPreviewImage: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemPreviewImageProps & import("react").RefAttributes<HTMLImageElement>, "ref"> & import("react").RefAttributes<HTMLImageElement>>;
+  ItemPreviewIcon: typeof FileUploadItemPreviewIcon;
   ItemName: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemNameProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  ItemMetadata: typeof FileUploadItemMetadata;
   ItemSizeText: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemSizeTextProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
   ItemDeleteTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ItemDeleteTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
   ClearTrigger: import("react").ForwardRefExoticComponent<Omit<FileUpload.ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
 };
 //#endregion
-export { FileUpload$1 as FileUpload };
+export { FileUpload$1 as FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/file-upload/FileUpload.js

@@ -1,25 +1,31 @@
-import { CloseIcon, TrashIcon, UploadIcon } from "../../lib/moduix/icons/ui/Icons.js";
 import { normalizeClassName } from "../../lib/moduix/normalizeClassName.js";
+import { CloseIcon, FileIcon, TrashIcon, UploadIcon } from "../../lib/moduix/icons/ui/Icons.js";
+import { CloseButton } from "../close-button/CloseButton.js";
 import FileUpload_module_default from "./FileUpload.module.js";
-import { jsx } from "react/jsx-runtime";
+import { ark } from "@ark-ui/react/factory";
 import { clsx } from "clsx";
-import { forwardRef } from "react";
-import { FileUpload } from "@ark-ui/react/file-upload";
+import { Children, cloneElement, forwardRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { FileUpload, useFileUpload, useFileUploadContext } from "@ark-ui/react/file-upload";
 //#region src/components/file-upload/FileUpload.tsx
-const FileUploadRoot = forwardRef(function FileUploadRoot({ className, ...props }, ref) {
+const FileUploadRoot = forwardRef(function FileUploadRoot({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.Root, {
 		ref,
+		asChild,
 		"data-slot": "file-upload-root",
 		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
-const FileUploadRootProvider = forwardRef(function FileUploadRootProvider({ className, ...props }, ref) {
+const FileUploadRootProvider = forwardRef(function FileUploadRootProvider({ asChild, children, className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.RootProvider, {
 		ref,
+		asChild,
 		"data-slot": "file-upload-root-provider",
 		className: clsx(FileUpload_module_default.root, normalizeClassName(className)),
-		...props
+		...props,
+		children: withHiddenInput(children, asChild)
 	});
 });
 const FileUploadLabel = forwardRef(function FileUploadLabel({ className, ...props }, ref) {
@@ -39,7 +45,7 @@ const FileUploadDropzone = forwardRef(function FileUploadDropzone({ className, .
 	});
 });
 function FileUploadDropzoneIcon({ className, children, ...props }) {
-	return /* @__PURE__ */ jsx("span", {
+	return /* @__PURE__ */ jsx(ark.span, {
 		"aria-hidden": "true",
 		"data-slot": "file-upload-dropzone-icon",
 		className: clsx(FileUpload_module_default.dropzoneIcon, normalizeClassName(className)),
@@ -55,13 +61,12 @@ const FileUploadTrigger = forwardRef(function FileUploadTrigger({ className, ...
 		...props
 	});
 });
-const FileUploadHiddenInput = forwardRef(function FileUploadHiddenInput(props, ref) {
-	return /* @__PURE__ */ jsx(FileUpload.HiddenInput, {
-		ref,
-		"data-slot": "file-upload-hidden-input",
-		...props
-	});
-});
+function withHiddenInput(children, asChild) {
+	const hiddenInput = /* @__PURE__ */ jsx(FileUpload.HiddenInput, { "data-slot": "file-upload-hidden-input" });
+	if (!asChild) return /* @__PURE__ */ jsxs(Fragment$1, { children: [children, hiddenInput] });
+	const child = Children.only(children);
+	return cloneElement(child, {}, child.props.children, hiddenInput);
+}
 const FileUploadItemGroup = forwardRef(function FileUploadItemGroup({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemGroup, {
 		ref,
@@ -94,6 +99,20 @@ const FileUploadItemPreviewImage = forwardRef(function FileUploadItemPreviewImag
 		...props
 	});
 });
+function FileUploadItemPreviewIcon({ className, ...props }) {
+	return /* @__PURE__ */ jsx(FileIcon, {
+		"data-slot": "file-upload-item-preview-icon",
+		className: clsx(FileUpload_module_default.itemPreviewIcon, normalizeClassName(className)),
+		...props
+	});
+}
+function getFileTypeLabel(file) {
+	const extension = file.name.split(".").pop();
+	return extension ? extension.toUpperCase() : file.type || "FILE";
+}
+function isImageFile(file) {
+	return file.type.startsWith("image/") || /\.(avif|bmp|gif|jpe?g|png|svg|webp)$/i.test(file.name);
+}
 const FileUploadItemName = forwardRef(function FileUploadItemName({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemName, {
 		ref,
@@ -110,6 +129,14 @@ const FileUploadItemSizeText = forwardRef(function FileUploadItemSizeText({ clas
 		...props
 	});
 });
+function FileUploadItemMetadata({ file, className, ...props }) {
+	return /* @__PURE__ */ jsxs(ark.div, {
+		"data-slot": "file-upload-item-metadata",
+		className: clsx(FileUpload_module_default.itemMetadata, normalizeClassName(className)),
+		...props,
+		children: [/* @__PURE__ */ jsx(ark.span, { children: getFileTypeLabel(file) }), /* @__PURE__ */ jsx(FileUploadItemSizeText, {})]
+	});
+}
 const FileUploadItemDeleteTrigger = forwardRef(function FileUploadItemDeleteTrigger({ className, children, ...props }, ref) {
 	return /* @__PURE__ */ jsx(FileUpload.ItemDeleteTrigger, {
 		ref,
@@ -119,31 +146,62 @@ const FileUploadItemDeleteTrigger = forwardRef(function FileUploadItemDeleteTrig
 		children: children ?? /* @__PURE__ */ jsx(TrashIcon, {})
 	});
 });
-const FileUploadClearTrigger = forwardRef(function FileUploadClearTrigger({ className, children, ...props }, ref) {
+function FileUploadItems() {
+	const { acceptedFiles } = useFileUploadContext();
+	return acceptedFiles.map((file) => /* @__PURE__ */ jsxs(FileUploadItem, {
+		file,
+		children: [
+			isImageFile(file) ? /* @__PURE__ */ jsx(FileUploadItemPreview, { children: /* @__PURE__ */ jsx(FileUploadItemPreviewImage, {}) }) : /* @__PURE__ */ jsx(FileUploadItemPreview, { children: /* @__PURE__ */ jsx(FileUploadItemPreviewIcon, {}) }),
+			/* @__PURE__ */ jsx(FileUploadItemName, {}),
+			/* @__PURE__ */ jsx(FileUploadItemMetadata, { file }),
+			/* @__PURE__ */ jsx(FileUploadItemDeleteTrigger, { "aria-label": `Remove ${file.name}` })
+		]
+	}, `${file.name}-${file.size}`));
+}
+const FileUploadClearTrigger = forwardRef(function FileUploadClearTrigger({ asChild, className, children, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }, ref) {
+	const triggerClassName = clsx(FileUpload_module_default.clearTrigger, children != null && FileUpload_module_default.clearTriggerWithContent, normalizeClassName(className));
+	if (asChild) return /* @__PURE__ */ jsx(FileUpload.ClearTrigger, {
+		ref,
+		asChild: true,
+		"data-slot": "file-upload-clear-trigger",
+		className: triggerClassName,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		...props,
+		children
+	});
 	return /* @__PURE__ */ jsx(FileUpload.ClearTrigger, {
 		ref,
+		asChild: true,
 		"data-slot": "file-upload-clear-trigger",
-		className: clsx(FileUpload_module_default.clearTrigger, normalizeClassName(className)),
+		className: triggerClassName,
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		children: /* @__PURE__ */ jsx(CloseButton.Root, {
+			"aria-label": ariaLabel,
+			"aria-labelledby": ariaLabelledBy,
+			children: children ?? /* @__PURE__ */ jsx(CloseIcon, {})
+		})
 	});
 });
 const FileUpload$1 = Object.assign(FileUploadRoot, {
 	Root: FileUploadRoot,
 	RootProvider: FileUploadRootProvider,
+	Context: FileUpload.Context,
 	Label: FileUploadLabel,
 	Dropzone: FileUploadDropzone,
 	DropzoneIcon: FileUploadDropzoneIcon,
 	Trigger: FileUploadTrigger,
-	HiddenInput: FileUploadHiddenInput,
 	ItemGroup: FileUploadItemGroup,
 	Item: FileUploadItem,
+	Items: FileUploadItems,
 	ItemPreview: FileUploadItemPreview,
 	ItemPreviewImage: FileUploadItemPreviewImage,
+	ItemPreviewIcon: FileUploadItemPreviewIcon,
 	ItemName: FileUploadItemName,
+	ItemMetadata: FileUploadItemMetadata,
 	ItemSizeText: FileUploadItemSizeText,
 	ItemDeleteTrigger: FileUploadItemDeleteTrigger,
 	ClearTrigger: FileUploadClearTrigger
 });
 //#endregion
-export { FileUpload$1 as FileUpload };
+export { FileUpload$1 as FileUpload, useFileUpload, useFileUploadContext };

package/dist/components/file-upload/FileUpload.module.js

@@ -2,13 +2,16 @@ import './FileUpload.css';
 //#region src/components/file-upload/FileUpload.module.css
 var FileUpload_module_default = {
 	"clearTrigger": "dgDG7a_clearTrigger",
+	"clearTriggerWithContent": "dgDG7a_clearTriggerWithContent",
 	"dropzone": "dgDG7a_dropzone",
 	"dropzoneIcon": "dgDG7a_dropzoneIcon",
 	"item": "dgDG7a_item",
 	"itemDeleteTrigger": "dgDG7a_itemDeleteTrigger",
 	"itemGroup": "dgDG7a_itemGroup",
+	"itemMetadata": "dgDG7a_itemMetadata",
 	"itemName": "dgDG7a_itemName",
 	"itemPreview": "dgDG7a_itemPreview",
+	"itemPreviewIcon": "dgDG7a_itemPreviewIcon",
 	"itemPreviewImage": "dgDG7a_itemPreviewImage",
 	"itemSizeText": "dgDG7a_itemSizeText",
 	"label": "dgDG7a_label",

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

@@ -1,2 +1,2 @@
-import { FileUpload } from "./FileUpload.js";
-export { FileUpload };
+import { FileUpload, useFileUpload, useFileUploadContext } from "./FileUpload.js";
+export { FileUpload, useFileUpload, useFileUploadContext };