@optiaxiom/react 3.0.0-next.4 → 3.0.1

package/dist/esm/packages/react/src/file-upload/FileUpload.js

@@ -1,31 +1,36 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { upload } from './FileUpload-css.js';
-import { FileUploadProvider } from './FileUploadContext.js';
-
-const FileUpload = forwardRef(
-  ({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
-    const innerRef = useRef(null);
-    const ref = useComposedRefs(innerRef, outerRef);
-    const inputRef = useRef(null);
-    return /* @__PURE__ */ jsx(
-      FileUploadProvider,
-      {
-        accept: (accept ?? []).join(","),
-        disabled,
-        inputRef,
-        onFilesDrop,
-        rootRef: innerRef,
-        children: /* @__PURE__ */ jsx(Box, { ref, ...upload({}, className), ...props, children })
-      }
-    );
-  }
-);
+import { Box } from "../box/Box.js";
+import { upload } from "./FileUpload-css.js";
+import { FileUploadProvider } from "./FileUploadContext.js";
+import { forwardRef, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/file-upload/FileUpload.tsx
+/**
+* Capture file input from users with drag and drop.
+*
+* @category form
+* @since 1.6.0
+* @experimental
+*/
+const FileUpload = forwardRef(({ accept, children, className, disabled, onFilesDrop, ...props }, outerRef) => {
+	const innerRef = useRef(null);
+	const ref = useComposedRefs(innerRef, outerRef);
+	const inputRef = useRef(null);
+	return /* @__PURE__ */ jsx(FileUploadProvider, {
+		accept: (accept ?? []).join(","),
+		disabled,
+		inputRef,
+		onFilesDrop,
+		rootRef: innerRef,
+		children: /* @__PURE__ */ jsx(Box, {
+			ref,
+			...upload({}, className),
+			...props,
+			children
+		})
+	});
+});
 FileUpload.displayName = "@optiaxiom/react/FileUpload";
-
+//#endregion
 export { FileUpload };

package/dist/esm/packages/react/src/file-upload/FileUploadContext.js

@@ -1,6 +1,7 @@
 "use client";
-import { createContext } from '@radix-ui/react-context';
-
+"use client";
+import { createContext } from "@radix-ui/react-context";
+//#region src/file-upload/FileUploadContext.ts
 const [FileUploadProvider, useFileUploadContext] = createContext("@optiaxiom/react/FileUpload");
-
+//#endregion
 export { FileUploadProvider, useFileUploadContext };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone-css.js

@@ -1,8 +1,44 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-jt0DGGFf.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var dropzone = recipeRuntime({base:[{alignItems:'center',bg:'bg.secondary',flexDirection:'column',gap:'16',justifyContent:'center',p:'32',rounded:'md',textAlign:'center',transition:'colors'},'_3hr79l'],variants:{drag:{false:{},true:['_2b2wab']},hidden:{false:'_1p8pvmg',true:'mg97m5'},overlay:{false:{flex:'1'},true:[{z:'10'},'_132ozey']}}});
-var label = recipeRuntime({base:[{alignItems:'center',flexDirection:'column',gap:'8'}],variants:{disabled:{false:{},true:'trcvn'}}});
-
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/file-upload/FileUploadDropzone.css.ts.vanilla-gnx5hYjN.css";
+//#region src/file-upload/FileUploadDropzone.css.ts
+var dropzone = recipeRuntime({
+	base: [{
+		alignItems: "center",
+		bg: "bg.secondary",
+		flexDirection: "column",
+		gap: "16",
+		justifyContent: "center",
+		p: "32",
+		rounded: "md",
+		textAlign: "center",
+		transition: "colors"
+	}, "_1k35yei"],
+	variants: {
+		drag: {
+			false: {},
+			true: ["cepqr"]
+		},
+		hidden: {
+			false: "_1po9kxx",
+			true: "_1hs6ke0"
+		},
+		overlay: {
+			false: { flex: "1" },
+			true: [{ z: "10" }, "_1ws0uvo"]
+		}
+	}
+});
+var label = recipeRuntime({
+	base: [{
+		alignItems: "center",
+		flexDirection: "column",
+		gap: "8"
+	}],
+	variants: { disabled: {
+		false: {},
+		true: "_3fmsuk"
+	} }
+});
+//#endregion
 export { dropzone, label };

package/dist/esm/packages/react/src/file-upload/FileUploadDropzone.js

@@ -1,80 +1,77 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconUpload } from '@optiaxiom/icons';
-import { useComposedRefs } from '@radix-ui/react-compose-refs';
-import { forwardRef, useState, useRef } from 'react';
-import { Group } from '../group/Group.js';
-import { Icon } from '../icon/Icon.js';
-import { Text } from '../text/Text.js';
-import { VisuallyHidden } from '../visually-hidden/VisuallyHidden.js';
-import { useFileUploadContext } from './FileUploadContext.js';
-import { label, dropzone } from './FileUploadDropzone-css.js';
-import { FileUploadTrigger } from './FileUploadTrigger.js';
-import { useContainerSize } from './useContainerSize.js';
-import { useDraggingOverBody } from './useDraggingOverBody.js';
-import { useFileUploadDragging } from './useFileUploadDragging.js';
-import { useFileUploadDrop } from './useFileUploadDrop.js';
-import { useStickyPosition } from './useStickyPosition.js';
-
-const FileUploadDropzone = forwardRef(
-  ({
-    children,
-    className,
-    description,
-    label: label$1 = "Drag and drop files here",
-    overlay = false,
-    ...props
-  }, outerRef) => {
-    const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext(
-      "@optiaxiom/react/FileUploadDropzone"
-    );
-    const [isDragging, setIsDragging] = useState(false);
-    const isDraggingOverBody = useDraggingOverBody();
-    const innerRef = useRef(null);
-    useStickyPosition(innerRef, overlay && isDraggingOverBody);
-    const size = useContainerSize(innerRef) ?? 0;
-    return /* @__PURE__ */ jsxs(
-      Group,
-      {
-        fontSize: size > 448 ? "lg" : "md",
-        ref: useComposedRefs(innerRef, outerRef),
-        ...dropzone(
-          {
-            drag: isDragging,
-            hidden: overlay && !isDraggingOverBody,
-            overlay
-          },
-          className
-        ),
-        ...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
-        children: [
-          /* @__PURE__ */ jsx(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx(
-            "input",
-            {
-              accept,
-              "aria-description": description,
-              "aria-label": label$1,
-              disabled,
-              multiple: true,
-              onChange: (event) => {
-                onFilesDrop?.([...event.target.files || []]);
-                event.target.value = "";
-              },
-              ref: inputRef,
-              type: "file"
-            }
-          ) }),
-          /* @__PURE__ */ jsxs(Group, { ...label({ disabled }), children: [
-            /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.secondary", h: size > 448 ? "lg" : "sm", children: /* @__PURE__ */ jsx(IconUpload, {}) }),
-            /* @__PURE__ */ jsx(Text, { children: label$1 }),
-            description && /* @__PURE__ */ jsx(Text, { color: "fg.tertiary", children: description })
-          ] }),
-          !overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
-        ]
-      }
-    );
-  }
-);
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { VisuallyHidden } from "../visually-hidden/VisuallyHidden.js";
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { dropzone, label } from "./FileUploadDropzone-css.js";
+import { FileUploadTrigger } from "./FileUploadTrigger.js";
+import { useContainerSize } from "./useContainerSize.js";
+import { useDraggingOverBody } from "./useDraggingOverBody.js";
+import { useFileUploadDragging } from "./useFileUploadDragging.js";
+import { useFileUploadDrop } from "./useFileUploadDrop.js";
+import { useStickyPosition } from "./useStickyPosition.js";
+import { IconUpload } from "@optiaxiom/icons";
+import { forwardRef, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
+//#region src/file-upload/FileUploadDropzone.tsx
+/**
+* @group FileUpload
+*/
+const FileUploadDropzone = forwardRef(({ children, className, description, label: label$1 = "Drag and drop files here", overlay = false, ...props }, outerRef) => {
+	const { accept, disabled, inputRef, onFilesDrop } = useFileUploadContext("@optiaxiom/react/FileUploadDropzone");
+	const [isDragging, setIsDragging] = useState(false);
+	const isDraggingOverBody = useDraggingOverBody();
+	const innerRef = useRef(null);
+	useStickyPosition(innerRef, overlay && isDraggingOverBody);
+	const size = useContainerSize(innerRef) ?? 0;
+	return /* @__PURE__ */ jsxs(Group, {
+		fontSize: size > 448 ? "lg" : "md",
+		ref: useComposedRefs(innerRef, outerRef),
+		...dropzone({
+			drag: isDragging,
+			hidden: overlay && !isDraggingOverBody,
+			overlay
+		}, className),
+		...useFileUploadDrop(useFileUploadDragging(props, setIsDragging)),
+		children: [
+			/* @__PURE__ */ jsx(VisuallyHidden, {
+				asChild: true,
+				children: /* @__PURE__ */ jsx("input", {
+					accept,
+					"aria-description": description,
+					"aria-label": label$1,
+					disabled,
+					multiple: true,
+					onChange: (event) => {
+						onFilesDrop?.([...event.target.files || []]);
+						event.target.value = "";
+					},
+					ref: inputRef,
+					type: "file"
+				})
+			}),
+			/* @__PURE__ */ jsxs(Group, {
+				...label({ disabled }),
+				children: [
+					/* @__PURE__ */ jsx(Icon, {
+						asChild: true,
+						color: "fg.secondary",
+						h: size > 448 ? "lg" : "sm",
+						children: /* @__PURE__ */ jsx(IconUpload, {})
+					}),
+					/* @__PURE__ */ jsx(Text, { children: label$1 }),
+					description && /* @__PURE__ */ jsx(Text, {
+						color: "fg.tertiary",
+						children: description
+					})
+				]
+			}),
+			!overlay && (children ?? /* @__PURE__ */ jsx(FileUploadTrigger, {}))
+		]
+	});
+});
 FileUploadDropzone.displayName = "@optiaxiom/react/FileUploadDropzone";
-
+//#endregion
 export { FileUploadDropzone };

package/dist/esm/packages/react/src/file-upload/FileUploadList.js

@@ -1,21 +1,20 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
-import { Flex } from '../flex/Flex.js';
-import { FileUploadListItem } from './FileUploadListItem.js';
-
-const FileUploadList = forwardRef(
-  ({ items, onRemove, ...props }, ref) => {
-    return /* @__PURE__ */ jsx(Flex, { gap: "12", ref, ...props, children: items.map((item, idx) => /* @__PURE__ */ jsx(
-      FileUploadListItem,
-      {
-        item,
-        onRemove: onRemove ? () => onRemove(item) : void 0
-      },
-      idx
-    )) });
-  }
-);
+import { Flex } from "../flex/Flex.js";
+import { FileUploadListItem } from "./FileUploadListItem.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/file-upload/FileUploadList.tsx
+const FileUploadList = forwardRef(({ items, onRemove, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Flex, {
+		gap: "12",
+		ref,
+		...props,
+		children: items.map((item, idx) => /* @__PURE__ */ jsx(FileUploadListItem, {
+			item,
+			onRemove: onRemove ? () => onRemove(item) : void 0
+		}, idx))
+	});
+});
 FileUploadList.displayName = "@optiaxiom/react/FileUploadList";
-
+//#endregion
 export { FileUploadList };

package/dist/esm/packages/react/src/file-upload/FileUploadListItem-css.js

@@ -1,8 +1,19 @@
-import './../../../../assets/src/layers/layers.css.ts.vanilla-DqgdF9Uj.css';
-import './../../../../assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BQhty29-.css';
-import { recipeRuntime } from '../vanilla-extract/recipeRuntime.js';
-
-var item$1 = recipeRuntime({base:[{alignItems:'center',flexDirection:'row',fontSize:'md',gap:'6',p:'6',rounded:'md',transition:'colors'},'_10apkd5']});
-var name = recipeRuntime({base:[{rounded:'md',textAlign:'start'},'_1jujj1q']});
-
-export { item$1 as item, name };
+import { recipeRuntime } from "../vanilla-extract/recipeRuntime.js";
+import "./../../../../assets/src/layers/layers.css.ts.vanilla-mKFUr5lc.css";
+import "./../../../../assets/src/file-upload/FileUploadListItem.css.ts.vanilla-BLKHNiVE.css";
+//#region src/file-upload/FileUploadListItem.css.ts
+var item = recipeRuntime({ base: [{
+	alignItems: "center",
+	flexDirection: "row",
+	fontSize: "md",
+	gap: "6",
+	p: "6",
+	rounded: "md",
+	transition: "colors"
+}, "_1a23uhn"] });
+var name = recipeRuntime({ base: [{
+	rounded: "md",
+	textAlign: "start"
+}, "wavqwc"] });
+//#endregion
+export { item, name };

package/dist/esm/packages/react/src/file-upload/FileUploadListItem.js

@@ -1,84 +1,124 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { IconCircleExclamation, IconFile, IconTrashCan } from '@optiaxiom/icons';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import '../sprinkles/sprinkles.js';
-import '../sprinkles/sprinklesMerge.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { Cover } from '../cover/Cover.js';
-import { Flex } from '../flex/Flex.js';
-import { Group } from '../group/Group.js';
-import { Icon } from '../icon/Icon.js';
-import { Spinner } from '../spinner/Spinner.js';
-import { Text } from '../text/Text.js';
-import { name, item } from './FileUploadListItem-css.js';
-
+import { Box } from "../box/Box.js";
+import { Icon } from "../icon/Icon.js";
+import { Text } from "../text/Text.js";
+import { Group } from "../group/Group.js";
+import { Spinner } from "../spinner/Spinner.js";
+import { Button } from "../button/Button.js";
+import { Cover } from "../cover/Cover.js";
+import { Flex } from "../flex/Flex.js";
+import { item, name } from "./FileUploadListItem-css.js";
+import { IconCircleExclamation, IconFile, IconTrashCan } from "@optiaxiom/icons";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/file-upload/FileUploadListItem.tsx
 function downloadFile(file) {
-  const url = URL.createObjectURL(file);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = file.name;
-  a.click();
-  URL.revokeObjectURL(url);
+	const url = URL.createObjectURL(file);
+	const a = document.createElement("a");
+	a.href = url;
+	a.download = file.name;
+	a.click();
+	URL.revokeObjectURL(url);
 }
 function formatFileSize(bytes) {
-  if (bytes < 1024)
-    return `${bytes} B`;
-  if (bytes < 1024 * 1024)
-    return `${(bytes / 1024).toFixed(0)} KB`;
-  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(0)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
 }
 const mimeTypeLabels = [
-  [/^application\/pdf$/, "PDF"],
-  [/^image\//, "Image"],
-  [/^video\//, "Video"],
-  [/^audio\//, "Audio"],
-  [/csv/, "CSV"],
-  [/spreadsheet|excel/, "Excel"],
-  [/presentation|powerpoint/, "PowerPoint"],
-  [/document|msword|wordprocessing/, "Word"],
-  [/zip|compressed|archive/, "Archive"],
-  [/^text\//, "Text"]
+	[/^application\/pdf$/, "PDF"],
+	[/^image\//, "Image"],
+	[/^video\//, "Video"],
+	[/^audio\//, "Audio"],
+	[/csv/, "CSV"],
+	[/spreadsheet|excel/, "Excel"],
+	[/presentation|powerpoint/, "PowerPoint"],
+	[/document|msword|wordprocessing/, "Word"],
+	[/zip|compressed|archive/, "Archive"],
+	[/^text\//, "Text"]
 ];
 function formatFileType(file) {
-  if (file.type) {
-    for (const [pattern, label] of mimeTypeLabels) {
-      if (pattern.test(file.type)) {
-        return label;
-      }
-    }
-  }
-  return "File";
+	if (file.type) {
+		for (const [pattern, label] of mimeTypeLabels) if (pattern.test(file.type)) return label;
+	}
+	return "File";
 }
 const FileUploadListItem = forwardRef(({ className, item: item$1, onRemove, ...props }, ref) => {
-  const { file, status } = item$1;
-  return /* @__PURE__ */ jsxs(Flex, { ref, ...item({}, className), ...props, children: [
-    status === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.error", h: "auto", w: "24", children: /* @__PURE__ */ jsx(IconCircleExclamation, { filled: true }) }) : file.type.startsWith("image/") ? /* @__PURE__ */ jsx(Box, { overflow: "hidden", rounded: "sm", size: "24", children: /* @__PURE__ */ jsx(Box, { asChild: true, h: "full", objectFit: "cover", w: "full", children: /* @__PURE__ */ jsx("img", { alt: file.name, src: URL.createObjectURL(file) }) }) }) : /* @__PURE__ */ jsx(Icon, { asChild: true, color: "fg.tertiary", h: "auto", w: "24", children: /* @__PURE__ */ jsx(IconFile, { filled: true }) }),
-    /* @__PURE__ */ jsxs(Flex, { flex: "1", gap: "2", overflow: "hidden", children: [
-      /* @__PURE__ */ jsx(Cover, { asChild: true, children: /* @__PURE__ */ jsx(Text, { asChild: true, lineClamp: "2", ...name(), children: /* @__PURE__ */ jsx("button", { onClick: () => downloadFile(file), type: "button", children: file.name }) }) }),
-      /* @__PURE__ */ jsxs(Group, { fontSize: "sm", gap: "4", children: [
-        /* @__PURE__ */ jsxs(Text, { color: "fg.tertiary", children: [
-          formatFileType(file),
-          " \u2022 ",
-          formatFileSize(file.size)
-        ] }),
-        status === "error" && /* @__PURE__ */ jsx(Text, { color: "fg.error", children: "Upload failed" })
-      ] })
-    ] }),
-    onRemove && /* @__PURE__ */ jsx(
-      Button,
-      {
-        appearance: "subtle",
-        "aria-label": "Remove file",
-        disabled: status === "uploading",
-        icon: /* @__PURE__ */ jsx(IconTrashCan, {}),
-        onClick: onRemove
-      }
-    )
-  ] });
+	const { file, status } = item$1;
+	return /* @__PURE__ */ jsxs(Flex, {
+		ref,
+		...item({}, className),
+		...props,
+		children: [
+			status === "uploading" ? /* @__PURE__ */ jsx(Spinner, { size: "sm" }) : status === "error" ? /* @__PURE__ */ jsx(Icon, {
+				asChild: true,
+				color: "fg.error",
+				h: "auto",
+				w: "24",
+				children: /* @__PURE__ */ jsx(IconCircleExclamation, { filled: true })
+			}) : file.type.startsWith("image/") ? /* @__PURE__ */ jsx(Box, {
+				overflow: "hidden",
+				rounded: "sm",
+				size: "24",
+				children: /* @__PURE__ */ jsx(Box, {
+					asChild: true,
+					h: "full",
+					objectFit: "cover",
+					w: "full",
+					children: /* @__PURE__ */ jsx("img", {
+						alt: file.name,
+						src: URL.createObjectURL(file)
+					})
+				})
+			}) : /* @__PURE__ */ jsx(Icon, {
+				asChild: true,
+				color: "fg.tertiary",
+				h: "auto",
+				w: "24",
+				children: /* @__PURE__ */ jsx(IconFile, { filled: true })
+			}),
+			/* @__PURE__ */ jsxs(Flex, {
+				flex: "1",
+				gap: "2",
+				overflow: "hidden",
+				children: [/* @__PURE__ */ jsx(Cover, {
+					asChild: true,
+					children: /* @__PURE__ */ jsx(Text, {
+						asChild: true,
+						lineClamp: "2",
+						...name(),
+						children: /* @__PURE__ */ jsx("button", {
+							onClick: () => downloadFile(file),
+							type: "button",
+							children: file.name
+						})
+					})
+				}), /* @__PURE__ */ jsxs(Group, {
+					fontSize: "sm",
+					gap: "4",
+					children: [/* @__PURE__ */ jsxs(Text, {
+						color: "fg.tertiary",
+						children: [
+							formatFileType(file),
+							" • ",
+							formatFileSize(file.size)
+						]
+					}), status === "error" && /* @__PURE__ */ jsx(Text, {
+						color: "fg.error",
+						children: "Upload failed"
+					})]
+				})]
+			}),
+			onRemove && /* @__PURE__ */ jsx(Button, {
+				appearance: "subtle",
+				"aria-label": "Remove file",
+				disabled: status === "uploading",
+				icon: /* @__PURE__ */ jsx(IconTrashCan, {}),
+				onClick: onRemove
+			})
+		]
+	});
 });
 FileUploadListItem.displayName = "@optiaxiom/react/FileUploadListItem";
-
+//#endregion
 export { FileUploadListItem };

package/dist/esm/packages/react/src/file-upload/FileUploadTrigger.js

@@ -1,40 +1,40 @@
 "use client";
-import { jsx } from 'react/jsx-runtime';
-import { createSlot } from '@radix-ui/react-slot';
-import { forwardRef } from 'react';
-import { Box } from '../box/Box.js';
-import { extractBoxProps } from '../box/extractBoxProps.js';
-import { Button } from '../button/Button.js';
-import '../button/ButtonGroup.js';
-import { useFileUploadContext } from './FileUploadContext.js';
-import { useFileUploadTrigger } from './useFileUploadTrigger.js';
-
-const Slot$3 = createSlot("@optiaxiom/react/FileUploadTrigger");
+import { extractBoxProps } from "../box/extractBoxProps.js";
+import { Box } from "../box/Box.js";
+import { Button } from "../button/Button.js";
+import { useFileUploadContext } from "./FileUploadContext.js";
+import { useFileUploadTrigger } from "./useFileUploadTrigger.js";
+import { forwardRef } from "react";
+import { createSlot } from "@radix-ui/react-slot";
+import { jsx } from "react/jsx-runtime";
+//#region src/file-upload/FileUploadTrigger.tsx
+const Slot = createSlot("@optiaxiom/react/FileUploadTrigger");
+/**
+* @group FileUpload
+* @extends Button
+*/
 const FileUploadTrigger = forwardRef(({ asChild, children, onClick, ...props }, ref) => {
-  const { boxProps, restProps } = extractBoxProps(props);
-  const Comp = asChild ? Slot$3 : Button;
-  const { disabled } = useFileUploadContext(
-    "@optiaxiom/react/FileUploadTrigger"
-  );
-  const open = useFileUploadTrigger();
-  return /* @__PURE__ */ jsx(Box, { asChild: true, ...boxProps, children: /* @__PURE__ */ jsx(
-    Comp,
-    {
-      disabled,
-      onClick: (event) => {
-        onClick?.(event);
-        if (event.defaultPrevented) {
-          return;
-        }
-        open();
-      },
-      ref,
-      ...asChild ? {} : { type: "button" },
-      ...restProps,
-      children: children || "Select files"
-    }
-  ) });
+	const { boxProps, restProps } = extractBoxProps(props);
+	const Comp = asChild ? Slot : Button;
+	const { disabled } = useFileUploadContext("@optiaxiom/react/FileUploadTrigger");
+	const open = useFileUploadTrigger();
+	return /* @__PURE__ */ jsx(Box, {
+		asChild: true,
+		...boxProps,
+		children: /* @__PURE__ */ jsx(Comp, {
+			disabled,
+			onClick: (event) => {
+				onClick?.(event);
+				if (event.defaultPrevented) return;
+				open();
+			},
+			ref,
+			...asChild ? {} : { type: "button" },
+			...restProps,
+			children: children || "Select files"
+		})
+	});
 });
 FileUploadTrigger.displayName = "@optiaxiom/react/FileUploadTrigger";
-
+//#endregion
 export { FileUploadTrigger };