@cerberus-design/react 0.0.0-next-bd980a6d9bd07d60e8d7200bd4d56624754e936c

package/dist/components/fieldset/primitives.js

@@ -0,0 +1,15 @@
+import { createCerberusPrimitive } from "../../system/index.js";
+import { fieldset } from "styled-system/recipes";
+import { Fieldset } from "@ark-ui/react/fieldset";
+//#region src/components/fieldset/primitives.tsx
+/**
+* This module contains all the primitives of the Fieldset component.
+* @module 'react/fieldset'
+*/
+var { withSlotRecipe } = createCerberusPrimitive(fieldset);
+var FieldsetRoot = withSlotRecipe(Fieldset.Root, "root");
+var FieldsetLegend = withSlotRecipe(Fieldset.Legend, "legend");
+var FieldsetHelperText = withSlotRecipe(Fieldset.HelperText, "helperText");
+var FieldsetErrorText = withSlotRecipe(Fieldset.ErrorText, "errorText");
+//#endregion
+export { FieldsetErrorText, FieldsetHelperText, FieldsetLegend, FieldsetRoot };

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

@@ -0,0 +1,169 @@
+"use client";
+"use client";
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_avatar = require("../avatar/avatar.cjs");
+const require_text = require("../text/text.cjs");
+const require_button = require("../icon-button/button.cjs");
+const require_primitives = require("../field/primitives.cjs");
+const require_field = require("../field/field.cjs");
+const require_progress_bar = require("../progress/progress-bar.cjs");
+let styled_system_recipes = require("styled-system/recipes");
+let react = require("react");
+let styled_system_css = require("styled-system/css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let styled_system_jsx = require("styled-system/jsx");
+let styled_system_patterns = require("styled-system/patterns");
+//#region src/components/file-upload/file-status.tsx
+/**
+* A helper object to represent the status of a file.
+* @example
+* ```tsx
+* import { fileStatus } from '@cerberus/react'
+* processStatus.TODO // 'todo'
+* ```
+*/
+var processStatus = /* @__PURE__ */ function(processStatus) {
+	processStatus["TODO"] = "todo";
+	processStatus["PROCESSING"] = "processing";
+	processStatus["DONE"] = "done";
+	processStatus["ERROR"] = "error";
+	return processStatus;
+}({});
+/**
+* A component that displays the status of a file during file processing.
+* @see https://cerberus.digitalu.design/react/file-uploader
+* @example
+* ```tsx
+* <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+* ```
+*/
+function FileStatus(props) {
+	const { file, now, status, onClick, ...nativeProps } = props;
+	const actionLabel = (0, react.useMemo)(() => getStatusActionLabel(status), [status]);
+	const palette = (0, react.useMemo)(() => getPalette(status), [status]);
+	const modalIconPalette = (0, react.useMemo)(() => getModalIconPalette(status), [status]);
+	const styles = (0, react.useMemo)(() => {
+		switch (status) {
+			case "todo": return (0, styled_system_recipes.fileStatus)({ status: "todo" });
+			case "processing": return (0, styled_system_recipes.fileStatus)({ status: "processing" });
+			case "done": return (0, styled_system_recipes.fileStatus)({ status: "done" });
+			case "error": return (0, styled_system_recipes.fileStatus)({ status: "error" });
+			default: return (0, styled_system_recipes.fileStatus)();
+		}
+	}, [status]);
+	const handleClick = (0, react.useCallback)((e) => {
+		onClick(getStatusActionLabel(status).toLocaleLowerCase(), e);
+	}, [onClick, status]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...nativeProps,
+		className: (0, styled_system_css.cx)(nativeProps.className, styles.root, (0, styled_system_patterns.hstack)()),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+				gradient: modalIconPalette,
+				fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatchFileStatusIcon, {
+					size: 24,
+					status
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(styled_system_jsx.VStack, {
+				alignItems: "flex-start",
+				gap: "0.12rem",
+				w: "full",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+						as: "small",
+						color: "page.text.initial",
+						textStyle: "label-sm",
+						children: file
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_progress_bar.ProgressBar, {
+						id: props.id,
+						label: "File upload status",
+						now,
+						size: "sm"
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_field.Field, {
+						label: "",
+						invalid: modalIconPalette === "hades-dark",
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_primitives.FieldHelperText, {
+							className: (0, styled_system_css.css)({ color: "page.text.100" }),
+							id: `help:${file}`,
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatchFileStatusText, {
+								status,
+								now
+							})
+						})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.IconButton, {
+				ariaLabel: actionLabel,
+				onClick: handleClick,
+				palette,
+				size: "sm",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MatchStatusAction, { status })
+			})
+		]
+	});
+}
+function MatchFileStatusIcon(props) {
+	const { icons } = require_cerberus.useCerberusContext();
+	const { waitingFileUploader: TodoIcon, fileUploader: FileUploaderIcon, invalidAlt: InvalidIcon, successNotification: DoneIcon } = icons;
+	switch (props.status) {
+		case "todo": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TodoIcon, { size: props.size });
+		case "processing": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FileUploaderIcon, { size: props.size });
+		case "done": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DoneIcon, { size: props.size });
+		case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(InvalidIcon, { size: props.size });
+		default: throw new Error("Unknown status");
+	}
+}
+function MatchFileStatusText(props) {
+	switch (props.status) {
+		case "todo": return "Waiting to upload";
+		case "processing": return `${props.now}% Complete`;
+		case "done": return "File uploaded successfully";
+		case "error": return "There was an error uploading the file";
+		default: throw new Error("Invalid status");
+	}
+}
+function MatchStatusAction(props) {
+	const { icons } = require_cerberus.useCerberusContext();
+	const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons;
+	switch (props.status) {
+		case "todo":
+		case "processing": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CloseIcon, {});
+		case "error": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(RedoIcon, {});
+		case "done": return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TrashIcon, {});
+		default: throw new Error("Invalid status");
+	}
+}
+function getStatusActionLabel(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "Cancel";
+		case "error": return "Retry";
+		case "done": return "Delete";
+		default: return "";
+	}
+}
+function getPalette(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "danger";
+		case "error": return "action";
+		case "done": return "danger";
+		default: return "action";
+	}
+}
+function getModalIconPalette(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "charon-light";
+		case "error": return "hades-dark";
+		case "done": return "thanatos-dark";
+		default: return "charon-light";
+	}
+}
+//#endregion
+exports.FileStatus = FileStatus;
+exports.processStatus = processStatus;

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

@@ -0,0 +1,74 @@
+import { HTMLAttributes, MouseEvent } from 'react';
+import { FileStatusVariantProps } from 'styled-system/recipes';
+import { ProgressBarProps } from '../progress/index';
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+/**
+ * The available values of the fileStatus helper Object.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
+/**
+ * The actions that can be performed on a file.
+ */
+export type FileStatusActions = 'cancel' | 'retry' | 'delete';
+export interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * A unique identifier for the file status. Required for accessibility.
+     */
+    id: string;
+    /**
+     * The name of the file.
+     */
+    file: string;
+    /**
+     * The percentage of the file that has been processed.
+     */
+    now: ProgressBarProps['now'];
+    /**
+     * The status of the file.
+     */
+    status: processStatus;
+    /**
+     * The action to perform on the file when a user clicks the
+     * button located at the end of the status card.
+     * @param status - The status of the file.
+     * @param e - The event object.
+     * @example
+     * ```tsx
+     * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+     * ```
+     * @default () => {}
+     */
+    onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void;
+}
+export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export declare const enum processStatus {
+    TODO = "todo",
+    PROCESSING = "processing",
+    DONE = "done",
+    ERROR = "error"
+}
+/**
+ * A component that displays the status of a file during file processing.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+export declare function FileStatus(props: FileStatusProps): import("react").JSX.Element;

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

@@ -0,0 +1,74 @@
+import { HTMLAttributes, MouseEvent } from 'react';
+import { FileStatusVariantProps } from 'styled-system/recipes';
+import { ProgressBarProps } from '../progress/index';
+/**
+ * This module contains the FileStatus component.
+ * @module
+ */
+/**
+ * The available values of the fileStatus helper Object.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export type FileStatusKey = (typeof processStatus)[keyof typeof processStatus];
+/**
+ * The actions that can be performed on a file.
+ */
+export type FileStatusActions = 'cancel' | 'retry' | 'delete';
+export interface FileBaseStatusProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onClick'> {
+    /**
+     * A unique identifier for the file status. Required for accessibility.
+     */
+    id: string;
+    /**
+     * The name of the file.
+     */
+    file: string;
+    /**
+     * The percentage of the file that has been processed.
+     */
+    now: ProgressBarProps['now'];
+    /**
+     * The status of the file.
+     */
+    status: processStatus;
+    /**
+     * The action to perform on the file when a user clicks the
+     * button located at the end of the status card.
+     * @param status - The status of the file.
+     * @param e - The event object.
+     * @example
+     * ```tsx
+     * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+     * ```
+     * @default () => {}
+     */
+    onClick: (status: FileStatusActions, e: MouseEvent<HTMLButtonElement>) => void;
+}
+export type FileStatusProps = FileBaseStatusProps & FileStatusVariantProps;
+/**
+ * A helper object to represent the status of a file.
+ * @example
+ * ```tsx
+ * import { fileStatus } from '@cerberus/react'
+ * processStatus.TODO // 'todo'
+ * ```
+ */
+export declare const enum processStatus {
+    TODO = "todo",
+    PROCESSING = "processing",
+    DONE = "done",
+    ERROR = "error"
+}
+/**
+ * A component that displays the status of a file during file processing.
+ * @see https://cerberus.digitalu.design/react/file-uploader
+ * @example
+ * ```tsx
+ * <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+ * ```
+ */
+export declare function FileStatus(props: FileStatusProps): import("react").JSX.Element;

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

@@ -0,0 +1,168 @@
+"use client";
+"use client";
+import { useCerberusContext } from "../../context/cerberus.js";
+import { Avatar } from "../avatar/avatar.js";
+import { Text } from "../text/text.js";
+import { IconButton } from "../icon-button/button.js";
+import { FieldHelperText } from "../field/primitives.js";
+import { Field } from "../field/field.js";
+import { ProgressBar } from "../progress/progress-bar.js";
+import { fileStatus } from "styled-system/recipes";
+import { useCallback, useMemo } from "react";
+import { css, cx } from "styled-system/css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VStack } from "styled-system/jsx";
+import { hstack } from "styled-system/patterns";
+//#region src/components/file-upload/file-status.tsx
+/**
+* A helper object to represent the status of a file.
+* @example
+* ```tsx
+* import { fileStatus } from '@cerberus/react'
+* processStatus.TODO // 'todo'
+* ```
+*/
+var processStatus = /* @__PURE__ */ function(processStatus) {
+	processStatus["TODO"] = "todo";
+	processStatus["PROCESSING"] = "processing";
+	processStatus["DONE"] = "done";
+	processStatus["ERROR"] = "error";
+	return processStatus;
+}({});
+/**
+* A component that displays the status of a file during file processing.
+* @see https://cerberus.digitalu.design/react/file-uploader
+* @example
+* ```tsx
+* <FileStatus file="file.txt" now={0} status={processStatus.TODO} action={(status, e) => console.log(status, e)} />
+* ```
+*/
+function FileStatus(props) {
+	const { file, now, status, onClick, ...nativeProps } = props;
+	const actionLabel = useMemo(() => getStatusActionLabel(status), [status]);
+	const palette = useMemo(() => getPalette(status), [status]);
+	const modalIconPalette = useMemo(() => getModalIconPalette(status), [status]);
+	const styles = useMemo(() => {
+		switch (status) {
+			case "todo": return fileStatus({ status: "todo" });
+			case "processing": return fileStatus({ status: "processing" });
+			case "done": return fileStatus({ status: "done" });
+			case "error": return fileStatus({ status: "error" });
+			default: return fileStatus();
+		}
+	}, [status]);
+	const handleClick = useCallback((e) => {
+		onClick(getStatusActionLabel(status).toLocaleLowerCase(), e);
+	}, [onClick, status]);
+	return /* @__PURE__ */ jsxs("div", {
+		...nativeProps,
+		className: cx(nativeProps.className, styles.root, hstack()),
+		children: [
+			/* @__PURE__ */ jsx(Avatar, {
+				gradient: modalIconPalette,
+				fallback: /* @__PURE__ */ jsx(MatchFileStatusIcon, {
+					size: 24,
+					status
+				})
+			}),
+			/* @__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, {
+				ariaLabel: actionLabel,
+				onClick: handleClick,
+				palette,
+				size: "sm",
+				children: /* @__PURE__ */ jsx(MatchStatusAction, { status })
+			})
+		]
+	});
+}
+function MatchFileStatusIcon(props) {
+	const { icons } = useCerberusContext();
+	const { waitingFileUploader: TodoIcon, fileUploader: FileUploaderIcon, invalidAlt: InvalidIcon, successNotification: DoneIcon } = icons;
+	switch (props.status) {
+		case "todo": return /* @__PURE__ */ jsx(TodoIcon, { size: props.size });
+		case "processing": return /* @__PURE__ */ jsx(FileUploaderIcon, { size: props.size });
+		case "done": return /* @__PURE__ */ jsx(DoneIcon, { size: props.size });
+		case "error": return /* @__PURE__ */ jsx(InvalidIcon, { size: props.size });
+		default: throw new Error("Unknown status");
+	}
+}
+function MatchFileStatusText(props) {
+	switch (props.status) {
+		case "todo": return "Waiting to upload";
+		case "processing": return `${props.now}% Complete`;
+		case "done": return "File uploaded successfully";
+		case "error": return "There was an error uploading the file";
+		default: throw new Error("Invalid status");
+	}
+}
+function MatchStatusAction(props) {
+	const { icons } = useCerberusContext();
+	const { close: CloseIcon, redo: RedoIcon, delete: TrashIcon } = icons;
+	switch (props.status) {
+		case "todo":
+		case "processing": return /* @__PURE__ */ jsx(CloseIcon, {});
+		case "error": return /* @__PURE__ */ jsx(RedoIcon, {});
+		case "done": return /* @__PURE__ */ jsx(TrashIcon, {});
+		default: throw new Error("Invalid status");
+	}
+}
+function getStatusActionLabel(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "Cancel";
+		case "error": return "Retry";
+		case "done": return "Delete";
+		default: return "";
+	}
+}
+function getPalette(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "danger";
+		case "error": return "action";
+		case "done": return "danger";
+		default: return "action";
+	}
+}
+function getModalIconPalette(status) {
+	switch (status) {
+		case "todo":
+		case "processing": return "charon-light";
+		case "error": return "hades-dark";
+		case "done": return "thanatos-dark";
+		default: return "charon-light";
+	}
+}
+//#endregion
+export { FileStatus, processStatus };

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

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+const require_index = require("../../utils/index.cjs");
+const require_show = require("../show/show.cjs");
+const require_cerberus = require("../../context/cerberus.cjs");
+const require_avatar = require("../avatar/avatar.cjs");
+const require_parts = require("./parts.cjs");
+const require_utils = require("./utils.cjs");
+const require_img_preview = require("./img-preview.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/file-upload/file-uploader.tsx
+/**
+* A component that allows the user to upload files.
+* @see https://cerberus.digitalu.design/docs/components/file-uploader
+*/
+function FileUploader(props) {
+	const [elProps, rootProps] = require_index.splitProps(props, ["heading", "showPreview"]);
+	const { showPreview = true } = elProps;
+	const { icons } = require_cerberus.useCerberusContext();
+	const { waitingFileUploader: Icon } = icons;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.FileUploadParts.Root, {
+		...rootProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.FileUploadParts.Dropzone, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.FileUploadParts.Icon, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+				gradient: "charon-light",
+				fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {})
+			}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_parts.FileUploadParts.Content, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+					when: elProps.heading,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.FileUploadParts.Heading, { children: elProps.heading })
+				}),
+				"Import ",
+				require_utils.formatFileTypes(rootProps.accept),
+				" files",
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.FileUploadParts.Description, { children: "Drag and drop files or click to upload" })
+			] })] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_show.Show, {
+				when: showPreview,
+				fallback: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: props.children }),
+				children: () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_img_preview.ImgPreview, {})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_parts.FileUploadParts.HiddenInput, {})
+		]
+	});
+}
+//#endregion
+exports.FileUploader = FileUploader;

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

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

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

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

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

@@ -0,0 +1,47 @@
+"use client";
+"use client";
+import { splitProps } from "../../utils/index.js";
+import { Show } from "../show/show.js";
+import { useCerberusContext } from "../../context/cerberus.js";
+import { Avatar } from "../avatar/avatar.js";
+import { FileUploadParts } from "./parts.js";
+import { formatFileTypes } from "./utils.js";
+import { ImgPreview } from "./img-preview.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/file-upload/file-uploader.tsx
+/**
+* A component that allows the user to upload files.
+* @see https://cerberus.digitalu.design/docs/components/file-uploader
+*/
+function FileUploader(props) {
+	const [elProps, rootProps] = splitProps(props, ["heading", "showPreview"]);
+	const { showPreview = true } = elProps;
+	const { icons } = useCerberusContext();
+	const { waitingFileUploader: Icon } = icons;
+	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.Content, { 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, {})
+		]
+	});
+}
+//#endregion
+export { FileUploader };

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

@@ -0,0 +1,19 @@
+"use client";
+//#region src/components/file-upload/helpers.ts
+/**
+* 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>
+*/
+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"
+	};
+}
+//#endregion
+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 {};