@cerberus-design/react 0.25.0-rc.7 → 0.25.1-rc.1

package/dist/components/file-upload/file-status.cjs

@@ -5,14 +5,16 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
 const React = require('react');
-const recipes = require('styled-system/recipes');
+const jsx = require('styled-system/jsx');
 const css = require('styled-system/css');
 const patterns = require('styled-system/patterns');
+const recipes = require('styled-system/recipes');
 const cerberus = require('../../context/cerberus.cjs');
-const progressBar = require('../progress/progress-bar.cjs');
 const avatar = require('../avatar/avatar.cjs');
 const field = require('../field/field.cjs');
 const primitives = require('../field/primitives.cjs');
+const progressBar = require('../progress/progress-bar.cjs');
+const text = require('../text/text.cjs');
 const button = require('../icon-button/button.cjs');
 
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
@@ -63,47 +65,28 @@ function FileStatus(props) {
             fallback: /* @__PURE__ */ jsxRuntime.jsx(MatchFileStatusIcon, { size: 24, status })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            className: patterns.vstack({
-              alignItems: "flex-start",
-              gap: "0.12rem",
-              w: "full"
-            }),
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "small",
-                {
-                  className: css.css({
-                    color: "page.text.initial",
-                    textStyle: "label-sm"
-                  }),
-                  children: file
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                progressBar.ProgressBar,
-                {
-                  id: props.id,
-                  label: "File upload status",
-                  now,
-                  size: "sm"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(field.Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsxRuntime.jsx(
-                primitives.FieldHelperText,
-                {
-                  className: css.css({
-                    color: "page.text.100"
-                  }),
-                  id: `help:${file}`,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(MatchFileStatusText, { status, now })
-                }
-              ) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(jsx.VStack, { alignItems: "flex-start", gap: "0.12rem", w: "full", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(text.Text, { as: "small", color: "page.text.initial", textStyle: "label-sm", children: file }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            progressBar.ProgressBar,
+            {
+              id: props.id,
+              label: "File upload status",
+              now,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(field.Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsxRuntime.jsx(
+            primitives.FieldHelperText,
+            {
+              className: css.css({
+                color: "page.text.100"
+              }),
+              id: `help:${file}`,
+              children: /* @__PURE__ */ jsxRuntime.jsx(MatchFileStatusText, { status, now })
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsxRuntime.jsx(
           button.IconButton,
           {

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

@@ -1,14 +1,16 @@
 'use client';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useMemo, useCallback } from 'react';
-import { fileStatus } from 'styled-system/recipes';
+import { VStack } from 'styled-system/jsx';
 import { cx, css } from 'styled-system/css';
-import { vstack, hstack } from 'styled-system/patterns';
+import { hstack } from 'styled-system/patterns';
+import { fileStatus } from 'styled-system/recipes';
 import { useCerberusContext } from '../../context/cerberus.js';
-import { ProgressBar } from '../progress/progress-bar.js';
 import { Avatar } from '../avatar/avatar.js';
 import { Field } from '../field/field.js';
 import { FieldHelperText } from '../field/primitives.js';
+import { ProgressBar } from '../progress/progress-bar.js';
+import { Text } from '../text/text.js';
 import { IconButton } from '../icon-button/button.js';
 
 var processStatus = /* @__PURE__ */ ((processStatus2) => {
@@ -59,47 +61,28 @@ function FileStatus(props) {
             fallback: /* @__PURE__ */ jsx(MatchFileStatusIcon, { size: 24, status })
           }
         ),
-        /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: vstack({
-              alignItems: "flex-start",
-              gap: "0.12rem",
-              w: "full"
-            }),
-            children: [
-              /* @__PURE__ */ jsx(
-                "small",
-                {
-                  className: css({
-                    color: "page.text.initial",
-                    textStyle: "label-sm"
-                  }),
-                  children: file
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                ProgressBar,
-                {
-                  id: props.id,
-                  label: "File upload status",
-                  now,
-                  size: "sm"
-                }
-              ),
-              /* @__PURE__ */ jsx(Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
-                FieldHelperText,
-                {
-                  className: css({
-                    color: "page.text.100"
-                  }),
-                  id: `help:${file}`,
-                  children: /* @__PURE__ */ jsx(MatchFileStatusText, { status, now })
-                }
-              ) })
-            ]
-          }
-        ),
+        /* @__PURE__ */ jsxs(VStack, { alignItems: "flex-start", gap: "0.12rem", w: "full", children: [
+          /* @__PURE__ */ jsx(Text, { as: "small", color: "page.text.initial", textStyle: "label-sm", children: file }),
+          /* @__PURE__ */ jsx(
+            ProgressBar,
+            {
+              id: props.id,
+              label: "File upload status",
+              now,
+              size: "sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(Field, { label: "", invalid: modalIconPalette === "hades-dark", children: /* @__PURE__ */ jsx(
+            FieldHelperText,
+            {
+              className: css({
+                color: "page.text.100"
+              }),
+              id: `help:${file}`,
+              children: /* @__PURE__ */ jsx(MatchFileStatusText, { status, now })
+            }
+          ) })
+        ] }),
         /* @__PURE__ */ jsx(
           IconButton,
           {

package/dist/components/file-upload/file-uploader.cjs

@@ -4,59 +4,33 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const css = require('styled-system/css');
-const patterns = require('styled-system/patterns');
-const recipes = require('styled-system/recipes');
-const show = require('../show/show.cjs');
 const cerberus = require('../../context/cerberus.cjs');
+const index = require('../../utils/index.cjs');
+const show = require('../show/show.cjs');
 const avatar = require('../avatar/avatar.cjs');
+const utils = require('./utils.cjs');
+const imgPreview = require('./img-preview.cjs');
+const parts = require('./parts.cjs');
 
 function FileUploader(props) {
+  const [elProps, rootProps] = index.splitProps(props, ["heading", "showPreview"]);
+  const { showPreview = true } = elProps;
   const { icons } = cerberus.useCerberusContext();
-  const styles = recipes.fileUploader();
   const { waitingFileUploader: Icon } = icons;
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ...props.disabled ? { "aria-disabled": true } : {},
-      className: css.cx(
-        patterns.vstack({
-          justify: "center"
-        }),
-        styles.container
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.icon, children: /* @__PURE__ */ jsxRuntime.jsx(avatar.Avatar, { gradient: "charon-light", fallback: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "label",
-          {
-            className: css.cx(
-              patterns.vstack({
-                justify: "center"
-              }),
-              styles.label
-            ),
-            htmlFor: props.name,
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: props.heading, children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.heading, children: props.heading }) }),
-              "Import ",
-              props.accept?.replace(",", ", "),
-              " files",
-              /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "input",
-                {
-                  ...props,
-                  className: css.cx(props.className, styles.input),
-                  type: "file"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(parts.FileUploadParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(parts.FileUploadParts.Dropzone, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.Icon, { children: /* @__PURE__ */ jsxRuntime.jsx(avatar.Avatar, { gradient: "charon-light", fallback: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(parts.FileUploadParts.Label, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: elProps.heading, children: /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.Heading, { children: elProps.heading }) }),
+        "Import ",
+        utils.formatFileTypes(rootProps.accept),
+        " files",
+        /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.Description, { children: "Drag and drop files or click to upload" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(show.Show, { when: showPreview, fallback: /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children }), children: () => /* @__PURE__ */ jsxRuntime.jsx(imgPreview.ImgPreview, {}) }),
+    /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.HiddenInput, {})
+  ] });
 }
 
 exports.FileUploader = FileUploader;

package/dist/components/file-upload/file-uploader.d.cts

@@ -1,20 +1,17 @@
-import { InputHTMLAttributes } from 'react';
-export interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement> {
+import { PropsWithChildren } from 'react';
+import { FileUploadRootProps } from './primitives';
+export interface FileUploaderProps extends FileUploadRootProps {
     /**
      * The optional heading to display in the FileUploader component.
      */
     heading?: string;
     /**
-     * The name of the file input element.
+     * Show a preview of the uploaded image.
      */
-    name: string;
-    /**
-     * Disable the FileUploader component. Good for single-use file uploads.
-     */
-    disabled?: boolean;
+    showPreview?: boolean;
 }
 /**
  * A component that allows the user to upload files.
- * @see https://cerberus.digitalu.design/react/file-uploader
+ * @see https://cerberus.digitalu.design/docs/components/file-uploader
  */
-export declare function FileUploader(props: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUploader(props: PropsWithChildren<FileUploaderProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,20 +1,17 @@
-import { InputHTMLAttributes } from 'react';
-export interface FileUploaderProps extends InputHTMLAttributes<HTMLInputElement> {
+import { PropsWithChildren } from 'react';
+import { FileUploadRootProps } from './primitives';
+export interface FileUploaderProps extends FileUploadRootProps {
     /**
      * The optional heading to display in the FileUploader component.
      */
     heading?: string;
     /**
-     * The name of the file input element.
+     * Show a preview of the uploaded image.
      */
-    name: string;
-    /**
-     * Disable the FileUploader component. Good for single-use file uploads.
-     */
-    disabled?: boolean;
+    showPreview?: boolean;
 }
 /**
  * A component that allows the user to upload files.
- * @see https://cerberus.digitalu.design/react/file-uploader
+ * @see https://cerberus.digitalu.design/docs/components/file-uploader
  */
-export declare function FileUploader(props: FileUploaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function FileUploader(props: PropsWithChildren<FileUploaderProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,58 +1,32 @@
 'use client';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { cx } from 'styled-system/css';
-import { vstack } from 'styled-system/patterns';
-import { fileUploader } from 'styled-system/recipes';
-import { Show } from '../show/show.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { useCerberusContext } from '../../context/cerberus.js';
+import { splitProps } from '../../utils/index.js';
+import { Show } from '../show/show.js';
 import { Avatar } from '../avatar/avatar.js';
+import { formatFileTypes } from './utils.js';
+import { ImgPreview } from './img-preview.js';
+import { FileUploadParts } from './parts.js';
 
 function FileUploader(props) {
+  const [elProps, rootProps] = splitProps(props, ["heading", "showPreview"]);
+  const { showPreview = true } = elProps;
   const { icons } = useCerberusContext();
-  const styles = fileUploader();
   const { waitingFileUploader: Icon } = icons;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ...props.disabled ? { "aria-disabled": true } : {},
-      className: cx(
-        vstack({
-          justify: "center"
-        }),
-        styles.container
-      ),
-      children: [
-        /* @__PURE__ */ jsx("div", { className: styles.icon, children: /* @__PURE__ */ jsx(Avatar, { gradient: "charon-light", fallback: /* @__PURE__ */ jsx(Icon, {}) }) }),
-        /* @__PURE__ */ jsxs(
-          "label",
-          {
-            className: cx(
-              vstack({
-                justify: "center"
-              }),
-              styles.label
-            ),
-            htmlFor: props.name,
-            children: [
-              /* @__PURE__ */ jsx(Show, { when: props.heading, children: /* @__PURE__ */ jsx("p", { className: styles.heading, children: props.heading }) }),
-              "Import ",
-              props.accept?.replace(",", ", "),
-              " files",
-              /* @__PURE__ */ jsx("p", { className: styles.description, children: "Click to select files" }),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  ...props,
-                  className: cx(props.className, styles.input),
-                  type: "file"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(FileUploadParts.Root, { ...rootProps, children: [
+    /* @__PURE__ */ jsxs(FileUploadParts.Dropzone, { children: [
+      /* @__PURE__ */ jsx(FileUploadParts.Icon, { children: /* @__PURE__ */ jsx(Avatar, { gradient: "charon-light", fallback: /* @__PURE__ */ jsx(Icon, {}) }) }),
+      /* @__PURE__ */ jsxs(FileUploadParts.Label, { children: [
+        /* @__PURE__ */ jsx(Show, { when: elProps.heading, children: /* @__PURE__ */ jsx(FileUploadParts.Heading, { children: elProps.heading }) }),
+        "Import ",
+        formatFileTypes(rootProps.accept),
+        " files",
+        /* @__PURE__ */ jsx(FileUploadParts.Description, { children: "Drag and drop files or click to upload" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Show, { when: showPreview, fallback: /* @__PURE__ */ jsx(Fragment, { children: props.children }), children: () => /* @__PURE__ */ jsx(ImgPreview, {}) }),
+    /* @__PURE__ */ jsx(FileUploadParts.HiddenInput, {})
+  ] });
 }
 
 export { FileUploader };

package/dist/components/file-upload/helpers.cjs

@@ -0,0 +1,17 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+function createErrorMessages(options) {
+  return {
+    TOO_MANY_FILES: options.tooMany || "📊 Too many files selected",
+    FILE_INVALID_TYPE: options.invalidType || "🚫 Invalid file type",
+    FILE_TOO_LARGE: options.tooLarge || "📏 File too large",
+    FILE_TOO_SMALL: options.tooSmall || "📐 File too small",
+    FILE_INVALID: options.invalid || "⚠️ Invalid file",
+    FILE_EXISTS: options.exists || "🔄 File already exists"
+  };
+}
+
+exports.createErrorMessages = createErrorMessages;

package/dist/components/file-upload/helpers.d.cts

@@ -0,0 +1,16 @@
+import { FileUploadFileError } from '@ark-ui/react/file-upload';
+type FileErrorTypes = {
+    tooMany?: string;
+    invalidType?: string;
+    tooLarge?: string;
+    tooSmall?: string;
+    invalid?: string;
+    exists?: string;
+};
+/**
+ * Helper function to create error messages for file upload errors. Returns a
+ * record of FileUploadFileError codes and their corresponding error messages.
+ * @returns Record<FileUploadFileError, string>
+ */
+export declare function createErrorMessages(options: FileErrorTypes): Record<FileUploadFileError, string>;
+export {};

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

@@ -0,0 +1,16 @@
+import { FileUploadFileError } from '@ark-ui/react/file-upload';
+type FileErrorTypes = {
+    tooMany?: string;
+    invalidType?: string;
+    tooLarge?: string;
+    tooSmall?: string;
+    invalid?: string;
+    exists?: string;
+};
+/**
+ * Helper function to create error messages for file upload errors. Returns a
+ * record of FileUploadFileError codes and their corresponding error messages.
+ * @returns Record<FileUploadFileError, string>
+ */
+export declare function createErrorMessages(options: FileErrorTypes): Record<FileUploadFileError, string>;
+export {};

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

@@ -0,0 +1,13 @@
+'use client';
+function createErrorMessages(options) {
+  return {
+    TOO_MANY_FILES: options.tooMany || "📊 Too many files selected",
+    FILE_INVALID_TYPE: options.invalidType || "🚫 Invalid file type",
+    FILE_TOO_LARGE: options.tooLarge || "📏 File too large",
+    FILE_TOO_SMALL: options.tooSmall || "📐 File too small",
+    FILE_INVALID: options.invalid || "⚠️ Invalid file",
+    FILE_EXISTS: options.exists || "🔄 File already exists"
+  };
+}
+
+export { createErrorMessages };

package/dist/components/file-upload/img-preview.cjs

@@ -0,0 +1,30 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const jsxRuntime = require('react/jsx-runtime');
+const cerberus = require('../../context/cerberus.cjs');
+const parts = require('./parts.cjs');
+const button = require('../icon-button/button.cjs');
+
+function ImgPreview(props) {
+  const { icons } = cerberus.useCerberusContext();
+  const { close: Icon } = icons;
+  return /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemGroup, { children: /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.Context, { ...props, children: (ctx) => ctx.acceptedFiles.map((file) => /* @__PURE__ */ jsxRuntime.jsxs(
+    parts.FileUploadParts.Item,
+    {
+      file,
+      className: "file-item",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemPreview, { type: "image/*", children: /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemPreviewImage, {}) }),
+        /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemName, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemSizeText, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(parts.FileUploadParts.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(button.IconButton, { clipboard: true, size: "sm", usage: "ghost", children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) })
+      ]
+    },
+    file.name
+  )) }) });
+}
+
+exports.ImgPreview = ImgPreview;

package/dist/components/file-upload/img-preview.d.cts

@@ -0,0 +1,2 @@
+import { FileUploadContextProps } from './primitives';
+export declare function ImgPreview(props: Omit<FileUploadContextProps, 'children'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/file-upload/img-preview.d.ts

@@ -0,0 +1,2 @@
+import { FileUploadContextProps } from './primitives';
+export declare function ImgPreview(props: Omit<FileUploadContextProps, 'children'>): import("react/jsx-runtime").JSX.Element;

package/dist/components/file-upload/img-preview.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCerberusContext } from '../../context/cerberus.js';
+import { FileUploadParts } from './parts.js';
+import { IconButton } from '../icon-button/button.js';
+
+function ImgPreview(props) {
+  const { icons } = useCerberusContext();
+  const { close: Icon } = icons;
+  return /* @__PURE__ */ jsx(FileUploadParts.ItemGroup, { children: /* @__PURE__ */ jsx(FileUploadParts.Context, { ...props, children: (ctx) => ctx.acceptedFiles.map((file) => /* @__PURE__ */ jsxs(
+    FileUploadParts.Item,
+    {
+      file,
+      className: "file-item",
+      children: [
+        /* @__PURE__ */ jsx(FileUploadParts.ItemPreview, { type: "image/*", children: /* @__PURE__ */ jsx(FileUploadParts.ItemPreviewImage, {}) }),
+        /* @__PURE__ */ jsx(FileUploadParts.ItemName, {}),
+        /* @__PURE__ */ jsx(FileUploadParts.ItemSizeText, {}),
+        /* @__PURE__ */ jsx(FileUploadParts.ItemDeleteTrigger, { asChild: true, children: /* @__PURE__ */ jsx(IconButton, { clipboard: true, size: "sm", usage: "ghost", children: /* @__PURE__ */ jsx(Icon, {}) }) })
+      ]
+    },
+    file.name
+  )) }) });
+}
+
+export { ImgPreview };

package/dist/components/file-upload/index.cjs

@@ -2,11 +2,35 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
+const primitives = require('./primitives.cjs');
+const parts = require('./parts.cjs');
 const fileStatus = require('./file-status.cjs');
 const fileUploader = require('./file-uploader.cjs');
+const imgPreview = require('./img-preview.cjs');
+const helpers = require('./helpers.cjs');
 
 
 
+exports.FileUploadClearTrigger = primitives.FileUploadClearTrigger;
+exports.FileUploadContext = primitives.FileUploadContext;
+exports.FileUploadDescription = primitives.FileUploadDescription;
+exports.FileUploadDropzone = primitives.FileUploadDropzone;
+exports.FileUploadHeading = primitives.FileUploadHeading;
+exports.FileUploadHiddenInput = primitives.FileUploadHiddenInput;
+exports.FileUploadIcon = primitives.FileUploadIcon;
+exports.FileUploadItem = primitives.FileUploadItem;
+exports.FileUploadItemDeleteTrigger = primitives.FileUploadItemDeleteTrigger;
+exports.FileUploadItemGroup = primitives.FileUploadItemGroup;
+exports.FileUploadItemName = primitives.FileUploadItemName;
+exports.FileUploadItemPreview = primitives.FileUploadItemPreview;
+exports.FileUploadItemPreviewImage = primitives.FileUploadItemPreviewImage;
+exports.FileUploadItemSizeText = primitives.FileUploadItemSizeText;
+exports.FileUploadLabel = primitives.FileUploadLabel;
+exports.FileUploadRoot = primitives.FileUploadRoot;
+exports.FileUploadTrigger = primitives.FileUploadTrigger;
+exports.FileUploadParts = parts.FileUploadParts;
 exports.FileStatus = fileStatus.FileStatus;
 exports.processStatus = fileStatus.processStatus;
 exports.FileUploader = fileUploader.FileUploader;
+exports.ImgPreview = imgPreview.ImgPreview;
+exports.createErrorMessages = helpers.createErrorMessages;

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

@@ -1,2 +1,6 @@
+export * from './primitives';
+export * from './parts';
 export * from './file-status';
 export * from './file-uploader';
+export * from './img-preview';
+export * from './helpers';

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

@@ -1,2 +1,6 @@
+export * from './primitives';
+export * from './parts';
 export * from './file-status';
 export * from './file-uploader';
+export * from './img-preview';
+export * from './helpers';

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

@@ -1,2 +1,6 @@
+export { FileUploadClearTrigger, FileUploadContext, FileUploadDescription, FileUploadDropzone, FileUploadHeading, FileUploadHiddenInput, FileUploadIcon, FileUploadItem, FileUploadItemDeleteTrigger, FileUploadItemGroup, FileUploadItemName, FileUploadItemPreview, FileUploadItemPreviewImage, FileUploadItemSizeText, FileUploadLabel, FileUploadRoot, FileUploadTrigger } from './primitives.js';
+export { FileUploadParts } from './parts.js';
 export { FileStatus, processStatus } from './file-status.js';
 export { FileUploader } from './file-uploader.js';
+export { ImgPreview } from './img-preview.js';
+export { createErrorMessages } from './helpers.js';

package/dist/components/file-upload/parts.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const primitives = require('./primitives.cjs');
+
+const FileUploadParts = {
+  Context: primitives.FileUploadContext,
+  Root: primitives.FileUploadRoot,
+  Label: primitives.FileUploadLabel,
+  Dropzone: primitives.FileUploadDropzone,
+  Trigger: primitives.FileUploadTrigger,
+  ClearTrigger: primitives.FileUploadClearTrigger,
+  ItemGroup: primitives.FileUploadItemGroup,
+  Item: primitives.FileUploadItem,
+  ItemPreview: primitives.FileUploadItemPreview,
+  ItemPreviewImage: primitives.FileUploadItemPreviewImage,
+  ItemName: primitives.FileUploadItemName,
+  ItemSizeText: primitives.FileUploadItemSizeText,
+  ItemDeleteTrigger: primitives.FileUploadItemDeleteTrigger,
+  HiddenInput: primitives.FileUploadHiddenInput,
+  // custom cerby primitives
+  Icon: primitives.FileUploadIcon,
+  Heading: primitives.FileUploadHeading,
+  Description: primitives.FileUploadDescription
+};
+
+exports.FileUploadParts = FileUploadParts;