@px-ui/core 2.0.0 → 2.1.0

package/dist/index.js

@@ -1,6 +1,6 @@
 import { n as __reExport, t as __export } from "./chunk-CYeTv9WL.js";
 import * as React$1 from "react";
-import React, { useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
+import React, { useCallback, useEffect, useEffectEvent, useMemo, useRef, useState } from "react";
 import { Dialog } from "@base-ui-components/react";
 import classnames from "classnames";
 import { extendTailwindMerge } from "tailwind-merge";
@@ -133,11 +133,11 @@ var dialog_exports = /* @__PURE__ */ __export({
 	HeaderIcon: () => HeaderIcon,
 	Overlay: () => Overlay,
 	Portal: () => Portal$1,
-	Root: () => Root$9,
+	Root: () => Root$10,
 	Title: () => Title$3,
-	Trigger: () => Trigger$6
+	Trigger: () => Trigger$7
 });
-function Root$9({ ...props }) {
+function Root$10({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Root, {
 		"data-slot": "dialog",
 		...props
@@ -149,7 +149,7 @@ function Portal$1({ ...props }) {
 		...props
 	});
 }
-function Trigger$6({ ...props }) {
+function Trigger$7({ ...props }) {
 	return /* @__PURE__ */ jsx(Dialog.Trigger, {
 		"data-slot": "dialog-trigger",
 		...props
@@ -242,11 +242,11 @@ var popover_exports = /* @__PURE__ */ __export({
 	Description: () => Description$2,
 	Footer: () => Footer,
 	Header: () => Header$2,
-	Root: () => Root$8,
+	Root: () => Root$9,
 	Title: () => Title$2,
-	Trigger: () => Trigger$5
+	Trigger: () => Trigger$6
 });
-function Root$8(props) {
+function Root$9(props) {
 	return /* @__PURE__ */ jsx(Popover.Root, {
 		"data-slot": "popover",
 		...props
@@ -258,7 +258,7 @@ function Portal(props) {
 		...props
 	});
 }
-function Trigger$5(props) {
+function Trigger$6(props) {
 	return /* @__PURE__ */ jsx(Popover.Trigger, {
 		"data-slot": "popover-trigger",
 		...props
@@ -531,7 +531,7 @@ var input_group_exports = /* @__PURE__ */ __export({
 	Addon: () => Addon,
 	Button: () => Button$1,
 	Input: () => Input$1,
-	Root: () => Root$7,
+	Root: () => Root$8,
 	Text: () => Text
 });
 const inputGroupVariants = cva("group/input-group relative flex items-center border border-ppx-neutral-5 bg-ppx-neutral-1 outline-transparent has-[[data-slot=input-group-control]:focus-visible]:outline-2 has-[[data-slot=input-group-control]:focus-visible]:-outline-offset-1 has-[[data-slot=input-group-control]:focus-visible]:bg-ppx-background has-[[data-slot=input-group-control]:focus-visible]:outline-ppx-primary-focus has-[[data-slot][aria-invalid=true]]:outline-ppx-red-4 has-[[data-slot][aria-invalid=true]]:outline has-[[data-slot][aria-invalid=true]]:-outline-offset-1 has-[[data-slot][aria-invalid=true]]:bg-ppx-red-1 has-[[data-slot=input-group-control]:disabled]:*:cursor-not-allowed has-[[data-slot=input-group-control]:disabled]:border-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:bg-ppx-neutral-3 has-[[data-slot=input-group-control]:disabled]:text-ppx-neutral-11 has-[>[data-align=inline-start]]:[&>input]:pl-input has-[>[data-align=inline-end]]:[&>input]:pr-input", {
@@ -551,7 +551,7 @@ const inputGroupVariants = cva("group/input-group relative flex items-center bor
 		widthVariant: "full"
 	}
 });
-function Root$7({ className, size, disabled, widthVariant, ...props }) {
+function Root$8({ className, size, disabled, widthVariant, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "input-group",
 		role: "group",
@@ -688,22 +688,22 @@ var combobox_exports = /* @__PURE__ */ __export({
 	Chip: () => Chip,
 	ChipsTrigger: () => ChipsTrigger,
 	Content: () => Content$4,
-	Item: () => Item$6,
+	Item: () => Item$7,
 	List: () => List$2,
 	LoadingIndicator: () => LoadingIndicator,
 	MultiItem: () => MultiItem$1,
-	Root: () => Root$6,
+	Root: () => Root$7,
 	Search: () => Search,
 	SearchableTrigger: () => SearchableTrigger,
 	SearchableTriggerDropdownAddon: () => SearchableTriggerDropdownAddon,
-	Trigger: () => Trigger$4,
+	Trigger: () => Trigger$5,
 	Value: () => Value$2,
 	useComboboxContext: () => useComboboxContext
 });
 const SINGLE_TEXT_CONTENT_CN = "px-4 py-2 text-ppx-sm min-h-11 flex items-center justify-center text-ppx-muted-foreground";
 const List$2 = Combobox.List;
 const ComboboxContext = React$1.createContext({});
-function Root$6({ children, ...props }) {
+function Root$7({ children, ...props }) {
 	const chipsTriggerRef = React$1.useRef(null);
 	const searchableTriggerRef = React$1.useRef(null);
 	const [isOpen, setIsOpen] = React$1.useState(false);
@@ -783,7 +783,7 @@ function Content$4({ empty = "No options", portalProps, positionerProps, popupPr
 		})
 	});
 }
-function Item$6({ className, ...props }) {
+function Item$7({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Combobox.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -821,7 +821,7 @@ function LoadingIndicator(props) {
 }
 function SearchableTrigger(props) {
 	const { invalid, disabled, searchableTriggerRef } = useComboboxContext();
-	return /* @__PURE__ */ jsxs(Root$7, {
+	return /* @__PURE__ */ jsxs(Root$8, {
 		...props,
 		disabled,
 		ref: searchableTriggerRef,
@@ -860,7 +860,7 @@ function SearchableTriggerDropdownAddon() {
 		]
 	});
 }
-function Trigger$4({ size, widthVariant, children, className, ...props }) {
+function Trigger$5({ size, widthVariant, children, className, ...props }) {
 	const { isLoading, invalid } = useComboboxContext();
 	return /* @__PURE__ */ jsxs(Combobox.Trigger, {
 		"aria-label": "Open popup",
@@ -966,19 +966,19 @@ const BaseCombobox = Combobox;
 var select_exports = /* @__PURE__ */ __export({
 	BaseSelect: () => BaseSelect,
 	Content: () => Content$3,
-	Item: () => Item$5,
+	Item: () => Item$6,
 	List: () => List$1,
 	MultiItem: () => MultiItem,
 	MultiSelectedValue: () => MultiSelectedValue,
-	Root: () => Root$5,
-	Trigger: () => Trigger$3,
+	Root: () => Root$6,
+	Trigger: () => Trigger$4,
 	Value: () => Value$1
 });
 const SelectContext = React$1.createContext({});
 function useSelectContext() {
 	return React$1.useContext(SelectContext);
 }
-function Root$5({ children, invalid, ...props }) {
+function Root$6({ children, invalid, ...props }) {
 	const value = React$1.useMemo(() => ({ invalid }), [invalid]);
 	return /* @__PURE__ */ jsx(SelectContext.Provider, {
 		value,
@@ -1005,7 +1005,7 @@ function Content$3({ portalProps, positionerProps, popupProps, children, widthVa
 	});
 }
 const List$1 = Select.List;
-function Item$5({ className, ...props }) {
+function Item$6({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Select.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -1028,7 +1028,7 @@ function ItemIndicator(props) {
 		children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
 	});
 }
-function Trigger$3({ size, widthVariant, ...props }) {
+function Trigger$4({ size, widthVariant, ...props }) {
 	const { invalid } = useSelectContext();
 	return /* @__PURE__ */ jsxs(Select.Trigger, {
 		"aria-label": "Open popup",
@@ -1083,15 +1083,15 @@ var menu_exports = /* @__PURE__ */ __export({
 	DropdownIndicator: () => DropdownIndicator,
 	Group: () => Group$3,
 	GroupLabel: () => GroupLabel,
-	Item: () => Item$4,
+	Item: () => Item$5,
 	RadioGroup: () => RadioGroup$1,
 	RadioItem: () => RadioItem,
-	Root: () => Root$4,
+	Root: () => Root$5,
 	Separator: () => Separator$1,
-	Trigger: () => Trigger$2
+	Trigger: () => Trigger$3
 });
-const Root$4 = Menu.Root;
-function Trigger$2({ className, children, size, widthVariant = "fit", ...props }) {
+const Root$5 = Menu.Root;
+function Trigger$3({ className, children, size, widthVariant = "fit", ...props }) {
 	return /* @__PURE__ */ jsxs(Menu.Trigger, {
 		className: cn(triggerVariants({
 			size,
@@ -1120,7 +1120,7 @@ function Content$2({ portalProps, positionerProps, popupProps, children, widthVa
 function DropdownIndicator() {
 	return /* @__PURE__ */ jsx(ChevronDownIcon, { className: "data-popup-open:rotate-180" });
 }
-function Item$4({ className, children, ...props }) {
+function Item$5({ className, children, ...props }) {
 	return /* @__PURE__ */ jsx(Menu.Item, {
 		className: cn(DROPDOWN_ITEM_CN, className),
 		...props,
@@ -1157,7 +1157,7 @@ var progress_exports = /* @__PURE__ */ __export({
 	BaseProgress: () => BaseProgress,
 	Indicator: () => Indicator$1,
 	Label: () => Label$1,
-	Root: () => Root$3,
+	Root: () => Root$4,
 	Track: () => Track,
 	Value: () => Value
 });
@@ -1169,7 +1169,7 @@ const progressTrackVariants = cva("relative h-2 w-full overflow-hidden rounded-f
 	} },
 	defaultVariants: { size: "default" }
 });
-const Root$3 = Progress.Root;
+const Root$4 = Progress.Root;
 function Track({ className, size, children, ...props }) {
 	return /* @__PURE__ */ jsx(Progress.Track, {
 		className: cn(progressTrackVariants({ size }), className),
@@ -1200,8 +1200,8 @@ const BaseProgress = Progress;
 //#endregion
 //#region src/components/segmented-control.tsx
 var segmented_control_exports = /* @__PURE__ */ __export({
-	Item: () => Item$3,
-	Root: () => Root$2
+	Item: () => Item$4,
+	Root: () => Root$3
 });
 const segmentedControlItemVariants = cva("relative flex items-center justify-center px-4 py-2 text-sm font-medium transition-all duration-200 ease-in-out cursor-pointer rounded-full whitespace-nowrap outline-none focus-visible:ring-2 focus-visible:ring-ppx-primary-5 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", {
 	variants: {
@@ -1217,14 +1217,14 @@ const segmentedControlItemVariants = cva("relative flex items-center justify-cen
 		size: "default"
 	}
 });
-function Root$2({ className, ...props }) {
+function Root$3({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
 		"data-slot": "segmented-control",
 		className: cn("p-1 inline-flex items-center rounded-full bg-ppx-neutral-3", className),
 		...props
 	});
 }
-function Item$3({ children, className, variant, size, ...props }) {
+function Item$4({ children, className, variant, size, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "segmented-control-item",
 		className: cn(segmentedControlItemVariants({
@@ -1242,8 +1242,8 @@ function Item$3({ children, className, variant, size, ...props }) {
 var tabs_exports = /* @__PURE__ */ __export({
 	Content: () => Content$1,
 	List: () => List,
-	Root: () => Root$1,
-	Trigger: () => Trigger$1
+	Root: () => Root$2,
+	Trigger: () => Trigger$2
 });
 const TabsContext = React$1.createContext(null);
 const useTabs = () => {
@@ -1251,7 +1251,7 @@ const useTabs = () => {
 	if (!context) throw new Error("useTabs must be used within a Tabs");
 	return context;
 };
-function Root$1({ variant = "underline", className, ...props }) {
+function Root$2({ variant = "underline", className, ...props }) {
 	return /* @__PURE__ */ jsx(TabsContext.Provider, {
 		value: { variant },
 		children: /* @__PURE__ */ jsx(Tabs.Root, {
@@ -1273,7 +1273,7 @@ function List({ className, children, ...props }) {
 		]
 	});
 }
-function Trigger$1({ className, ...props }) {
+function Trigger$2({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Tab, {
 		"data-slot": "tabs-trigger",
 		className: cn("focus-visible:ring-ring/50 [&_svg:not([class*='size-'])] gap-1.5 px-2 py-1 text-sm font-medium z-[1] flex-1 items-center justify-center text-nowrap whitespace-nowrap text-ppx-neutral-18 not-data-selected:hover:text-ppx-neutral-12 focus-visible:ring-[3px] data-selected:text-ppx-primary-b-5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
@@ -1302,8 +1302,8 @@ var tooltip_exports = /* @__PURE__ */ __export({
 	BaseProvider: () => BaseProvider,
 	BaseRoot: () => BaseRoot,
 	Content: () => Content,
-	Root: () => Root,
-	Trigger: () => Trigger
+	Root: () => Root$1,
+	Trigger: () => Trigger$1
 });
 function TooltipProvider(props) {
 	return /* @__PURE__ */ jsx(Tooltip.Provider, {
@@ -1329,7 +1329,7 @@ function TooltipArrow({ ...props }) {
 		...props
 	});
 }
-function Root({ ...props }) {
+function Root$1({ ...props }) {
 	return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(Tooltip.Root, {
 		"data-slot": "tooltip",
 		...props
@@ -1337,7 +1337,7 @@ function Root({ ...props }) {
 }
 const BaseRoot = Tooltip.Root;
 const BaseProvider = Tooltip.Provider;
-function Trigger({ ...props }) {
+function Trigger$1({ ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Trigger, {
 		"data-slot": "tooltip-trigger",
 		...props
@@ -1434,7 +1434,7 @@ var block_checkbox_group_exports = /* @__PURE__ */ __export({
 	Description: () => Description$1,
 	Group: () => Group$2,
 	Header: () => Header$1,
-	Item: () => Item$2,
+	Item: () => Item$3,
 	Title: () => Title$1
 });
 function Group$2({ className, ...props }) {
@@ -1443,7 +1443,7 @@ function Group$2({ className, ...props }) {
 		...props
 	});
 }
-function Item$2({ className, invalid, children, ...rest }) {
+function Item$3({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("gap-2 p-5 flex min-h-[155px] justify-between rounded-ppx-s border-2 border-ppx-neutral-3 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5!", className),
 		children: [/* @__PURE__ */ jsx("div", {
@@ -1480,7 +1480,7 @@ function Description$1(props) {
 //#region src/components/radio-group.tsx
 var radio_group_exports = /* @__PURE__ */ __export({
 	Group: () => Group$1,
-	Item: () => Item
+	Item: () => Item$1
 });
 function Group$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(RadioGroup, {
@@ -1503,7 +1503,7 @@ const radioVariants = cva("bg-white aria-invalid:border-ppx-red-5 aspect-square
 		size: "default"
 	}
 });
-function Item({ className, variant, size, ...props }) {
+function Item$1({ className, variant, size, ...props }) {
 	return /* @__PURE__ */ jsx(Radio.Root, {
 		"data-slot": "radio-group-item",
 		className: cn(radioVariants({
@@ -1542,7 +1542,7 @@ var block_radio_group_exports = /* @__PURE__ */ __export({
 	Description: () => Description,
 	Group: () => Group,
 	Header: () => Header,
-	Item: () => Item$1,
+	Item: () => Item$2,
 	Title: () => Title
 });
 function Group({ className, ...props }) {
@@ -1552,13 +1552,13 @@ function Group({ className, ...props }) {
 		...props
 	});
 }
-function Item$1({ className, invalid, children, ...rest }) {
+function Item$2({ className, invalid, children, ...rest }) {
 	return /* @__PURE__ */ jsxs("label", {
 		className: cn("rounded-ppx-s border-ppx-neutral-3 has-not-disabled:hover:border-ppx-neutral-6 has-disabled:cursor-not-allowed has-disabled:opacity-60 has-disabled:hover:border-ppx-neutral-3 has-aria-invalid:shadow-ppx-red-2 has-data-checked:border-ppx-primary-5! flex min-h-[155px] justify-between gap-2 border-2 p-5 shadow-[0px_0px_12px_#0000001F] transition-colors duration-300", className),
 		children: [/* @__PURE__ */ jsx("div", {
 			className: "flex-1",
 			children
-		}), /* @__PURE__ */ jsx(Item, {
+		}), /* @__PURE__ */ jsx(Item$1, {
 			...rest,
 			className: "ml-auto shrink-0 self-start",
 			size: "lg",
@@ -1869,9 +1869,9 @@ const replaceSizeInUrl = (url, size) => {
 	return url.replace("/SIZE/", `/${newSize}/`);
 };
 function Avatar(props) {
-	return /* @__PURE__ */ jsxs(Root, {
+	return /* @__PURE__ */ jsxs(Root$1, {
 		disabled: props.hideTooltip,
-		children: [/* @__PURE__ */ jsx(Trigger, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
+		children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx(AvatarImpl, {
 			...props,
 			avatarRootProps: tooltipProps
 		}) }), /* @__PURE__ */ jsx(Content, { children: props.name })]
@@ -1916,7 +1916,7 @@ function AvatarGroup({ max = 4, avatars, className }) {
 	return /* @__PURE__ */ jsx(BaseProvider, { children: /* @__PURE__ */ jsxs("div", {
 		className: cn("flex items-center", className),
 		"data-slot": "avatar-group",
-		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
+		children: [avatars.map((avatar, index) => /* @__PURE__ */ jsx(React.Fragment, { children: /* @__PURE__ */ jsxs(BaseRoot, { children: [/* @__PURE__ */ jsx(Trigger$1, { render: (tooltipProps) => /* @__PURE__ */ jsx("div", {
 			className: "relative",
 			style: {
 				marginLeft: index > 0 ? `-${parseInt(avatar.size ?? "100px") * .25}px` : "0",
@@ -1933,9 +1933,9 @@ function AvatarGroup({ max = 4, avatars, className }) {
 				marginLeft: `-${parseInt(avatars[0].size ?? "100px") * .25}px`,
 				zIndex: 0
 			},
-			children: /* @__PURE__ */ jsxs(Root$8, {
+			children: /* @__PURE__ */ jsxs(Root$9, {
 				openOnHover: true,
-				children: [/* @__PURE__ */ jsx(Trigger$5, { children: /* @__PURE__ */ jsxs("div", {
+				children: [/* @__PURE__ */ jsx(Trigger$6, { children: /* @__PURE__ */ jsxs("div", {
 					className: cn("bg-ppx-neutral-3 text-ppx-neutral-18 hover:bg-ppx-neutral-4 flex cursor-pointer items-center justify-center font-medium transition-colors", avatars[0].variant === "rounded" ? "rounded-full" : "rounded-ppx-s"),
 					style: {
 						width: avatars[0].size ?? "100px",
@@ -2023,11 +2023,11 @@ function DatePicker({ triggerProps, placeholder = "Pick a date", format: format$
 		calendarProps.onSelect(...args);
 		!calendarProps.mode || calendarProps.mode === "single" && setOpen(false);
 	};
-	return /* @__PURE__ */ jsxs(Root$8, {
+	return /* @__PURE__ */ jsxs(Root$9, {
 		open,
 		onOpenChange: setOpen,
 		...popoverRootProps,
-		children: [/* @__PURE__ */ jsxs(Trigger$5, {
+		children: [/* @__PURE__ */ jsxs(Trigger$6, {
 			disabled: triggerProps?.disabled,
 			className: cn(triggerVariants({
 				size: triggerProps?.size,
@@ -2057,6 +2057,812 @@ function renderFormattedDate(calendarProps, format$1) {
 	return "";
 }
 
+//#endregion
+//#region src/icons/upload-cloud-icon.tsx
+function UploadCloudIcon({ size = 24, ...props }) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		width: size,
+		height: size,
+		viewBox: "0 0 24 24",
+		fill: "currentColor",
+		...props,
+		children: /* @__PURE__ */ jsx("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM8 13H10.55V16H13.45V13H16L12 9L8 13Z" })
+	});
+}
+
+//#endregion
+//#region src/icons/retry-icon.tsx
+function RetryIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 2v6h-6" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }),
+			/* @__PURE__ */ jsx("path", { d: "M3 22v-6h6" }),
+			/* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" })
+		]
+	});
+}
+
+//#endregion
+//#region src/icons/spinner-icon.tsx
+function SpinnerIcon(props) {
+	return /* @__PURE__ */ jsx("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: /* @__PURE__ */ jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+	});
+}
+
+//#endregion
+//#region src/icons/upload-icon.tsx
+function UploadIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+			/* @__PURE__ */ jsx("polyline", { points: "17 8 12 3 7 8" }),
+			/* @__PURE__ */ jsx("line", {
+				x1: "12",
+				y1: "3",
+				x2: "12",
+				y2: "15"
+			})
+		]
+	});
+}
+
+//#endregion
+//#region src/hooks/use-file-upload.ts
+const formatBytes = (bytes, decimals = 2) => {
+	if (bytes === 0) return "0 Bytes";
+	const k = 1024;
+	const dm = decimals < 0 ? 0 : decimals;
+	const sizes = [
+		"Bytes",
+		"KB",
+		"MB",
+		"GB",
+		"TB",
+		"PB",
+		"EB",
+		"ZB",
+		"YB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+	return Number.parseFloat((bytes / k ** i).toFixed(dm)) + sizes[i];
+};
+const useFileUpload = (options = {}) => {
+	const { upload, ...baseOptions } = options;
+	const autoUpload = upload?.autoUpload ?? true;
+	const [files, setFiles] = useState((baseOptions.initialFiles ?? []).map((file) => ({
+		file,
+		id: file.id,
+		preview: file.url,
+		progress: 100,
+		status: "success",
+		uploadedUrl: file.url
+	})));
+	const [isUploading, setIsUploading] = useState(false);
+	const [isDragging, setIsDragging] = useState(false);
+	const [errors, setErrors] = useState([]);
+	const inputRef = useRef(null);
+	const abortControllersRef = useRef(/* @__PURE__ */ new Map());
+	const { maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, accept = "*", multiple = false, onFilesChange, onFilesAdded } = baseOptions;
+	const validateFile = useCallback((file) => {
+		if (file.size > maxSize) return `File "${file.name}" exceeds the maximum size of ${formatBytes(maxSize)}.`;
+		if (accept !== "*") {
+			const acceptedTypes = accept.split(",").map((type) => type.trim());
+			const fileType = file.type || "";
+			const fileExtension = `.${file.name.split(".").pop()}`;
+			if (!acceptedTypes.some((type) => {
+				if (type.startsWith(".")) return fileExtension.toLowerCase() === type.toLowerCase();
+				if (type.endsWith("/*")) {
+					const baseType = type.split("/")[0];
+					return fileType.startsWith(`${baseType}/`);
+				}
+				return fileType === type;
+			})) return `File "${file.name}" is not an accepted file type.`;
+		}
+		return null;
+	}, [accept, maxSize]);
+	const createPreview = useCallback((file) => {
+		if (file.type.startsWith("image/")) return URL.createObjectURL(file);
+	}, []);
+	const generateUniqueId = useCallback((file) => {
+		return `${file.name}-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+	}, []);
+	const uploadSingleFile = useCallback(async (fileWithStatus) => {
+		if (!upload) return {
+			...fileWithStatus,
+			status: "error",
+			error: "No upload config provided"
+		};
+		const file = fileWithStatus.file;
+		if (!(file instanceof File)) return {
+			...fileWithStatus,
+			status: "success",
+			progress: 100
+		};
+		const abortController = new AbortController();
+		abortControllersRef.current.set(fileWithStatus.id, abortController);
+		try {
+			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+				...f,
+				status: "uploading",
+				progress: 0
+			} : f));
+			const { result: presignedResult, error: presignedError } = await upload.getPresignedUrl({
+				filename: file.name,
+				contentType: file.type,
+				size: file.size,
+				signal: abortController.signal
+			});
+			if (presignedError || !presignedResult) throw presignedError || /* @__PURE__ */ new Error("Failed to get presigned URL");
+			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+				...f,
+				progress: 10
+			} : f));
+			const { result: uploadResult, error: uploadError } = await upload.uploadFile(presignedResult.url, file, presignedResult, (progress) => {
+				const scaledProgress = 10 + progress * .9;
+				setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? {
+					...f,
+					progress: Math.round(scaledProgress)
+				} : f));
+			}, abortController.signal);
+			if (uploadError) throw uploadError;
+			const uploadedFile = {
+				...fileWithStatus,
+				status: "success",
+				progress: 100,
+				uploadedUrl: uploadResult?.url ?? presignedResult.fullPath
+			};
+			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? uploadedFile : f));
+			upload.onUploadComplete?.(uploadedFile);
+			return uploadedFile;
+		} catch (error) {
+			if (error instanceof Error && (error.name === "AbortError" || abortController.signal.aborted)) return {
+				...fileWithStatus,
+				status: "idle",
+				progress: 0
+			};
+			const errorMessage = error instanceof Error ? error.message : "Upload failed";
+			const failedFile = {
+				...fileWithStatus,
+				status: "error",
+				error: errorMessage
+			};
+			setFiles((prev) => prev.map((f) => f.id === fileWithStatus.id ? failedFile : f));
+			upload.onUploadError?.(failedFile, error);
+			return failedFile;
+		} finally {
+			abortControllersRef.current.delete(fileWithStatus.id);
+		}
+	}, [upload]);
+	const uploadFiles = useCallback(async (filesToUpload) => {
+		const targetFiles = filesToUpload ?? files.filter((f) => f.status === "idle");
+		if (targetFiles.length === 0) return [];
+		setIsUploading(true);
+		const results = [];
+		for (const file of targetFiles) {
+			const result = await uploadSingleFile(file);
+			results.push(result);
+		}
+		setIsUploading(false);
+		upload?.onAllUploadsComplete?.(results);
+		return results;
+	}, [
+		files,
+		uploadSingleFile,
+		upload
+	]);
+	const addFiles = useCallback((newFiles) => {
+		if (!newFiles || newFiles.length === 0) return;
+		const newFilesArray = Array.from(newFiles);
+		const newErrors = [];
+		setErrors([]);
+		if (!multiple) setFiles((prev) => {
+			for (const file of prev) if (file.preview && file.file instanceof File) URL.revokeObjectURL(file.preview);
+			return [];
+		});
+		if (multiple && maxFiles !== Number.POSITIVE_INFINITY && files.length + newFilesArray.length > maxFiles) {
+			newErrors.push(`You can only upload a maximum of ${maxFiles} files.`);
+			setErrors(newErrors);
+			return;
+		}
+		const validFiles = [];
+		for (const file of newFilesArray) {
+			if (multiple) {
+				if (files.some((existingFile) => existingFile.file.name === file.name && existingFile.file.size === file.size)) continue;
+			}
+			const error = validateFile(file);
+			if (error) {
+				newErrors.push(error);
+				continue;
+			}
+			validFiles.push({
+				file,
+				id: generateUniqueId(file),
+				preview: createPreview(file),
+				progress: 0,
+				status: "idle"
+			});
+		}
+		if (validFiles.length > 0) {
+			onFilesAdded?.(validFiles);
+			setFiles((prev) => {
+				const updatedFiles = !multiple ? validFiles : [...prev, ...validFiles];
+				onFilesChange?.(updatedFiles);
+				return updatedFiles;
+			});
+			if (autoUpload && upload) setTimeout(() => {
+				uploadFiles(validFiles);
+			}, 0);
+		}
+		if (newErrors.length > 0) setErrors(newErrors);
+		if (inputRef.current) inputRef.current.value = "";
+	}, [
+		files,
+		maxFiles,
+		multiple,
+		validateFile,
+		createPreview,
+		generateUniqueId,
+		onFilesChange,
+		onFilesAdded,
+		autoUpload,
+		upload,
+		uploadFiles
+	]);
+	const removeFile = useCallback((id) => {
+		const controller = abortControllersRef.current.get(id);
+		if (controller) {
+			controller.abort();
+			abortControllersRef.current.delete(id);
+		}
+		setFiles((prev) => {
+			const fileToRemove = prev.find((file) => file.id === id);
+			if (fileToRemove?.preview && fileToRemove.file instanceof File) URL.revokeObjectURL(fileToRemove.preview);
+			const newFiles = prev.filter((file) => file.id !== id);
+			onFilesChange?.(newFiles);
+			return newFiles;
+		});
+	}, [onFilesChange]);
+	const clearFiles = useCallback(() => {
+		for (const controller of abortControllersRef.current.values()) controller.abort();
+		abortControllersRef.current.clear();
+		setFiles((prev) => {
+			for (const file of prev) if (file.preview && file.file instanceof File) URL.revokeObjectURL(file.preview);
+			return [];
+		});
+		if (inputRef.current) inputRef.current.value = "";
+		setErrors([]);
+		onFilesChange?.([]);
+	}, [onFilesChange]);
+	const clearErrors = useCallback(() => {
+		setErrors([]);
+	}, []);
+	const retryUpload = useCallback(async (id) => {
+		const file = files.find((f) => f.id === id);
+		if (file && file.status === "error") {
+			setFiles((prev) => prev.map((f) => f.id === id ? {
+				...f,
+				status: "idle",
+				error: void 0
+			} : f));
+			await uploadSingleFile({
+				...file,
+				status: "idle",
+				error: void 0
+			});
+		}
+	}, [files, uploadSingleFile]);
+	const cancelUpload = useCallback((id) => {
+		const controller = abortControllersRef.current.get(id);
+		if (controller) {
+			controller.abort();
+			abortControllersRef.current.delete(id);
+		}
+		setFiles((prev) => prev.map((f) => f.id === id ? {
+			...f,
+			status: "idle",
+			progress: 0
+		} : f));
+	}, []);
+	const handleDragEnter = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(true);
+	}, []);
+	const handleDragLeave = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (e.currentTarget.contains(e.relatedTarget)) return;
+		setIsDragging(false);
+	}, []);
+	const handleDragOver = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+	}, []);
+	const handleDrop = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setIsDragging(false);
+		if (inputRef.current?.disabled) return;
+		if (e.dataTransfer.files?.length > 0) if (!multiple) addFiles([e.dataTransfer.files[0]]);
+		else addFiles(e.dataTransfer.files);
+	}, [addFiles, multiple]);
+	const handleFileChange = useCallback((e) => {
+		if (e.target.files?.length) addFiles(e.target.files);
+	}, [addFiles]);
+	const openFileDialog = useCallback(() => {
+		inputRef.current?.click();
+	}, []);
+	const getInputProps = useCallback((props = {}) => ({
+		...props,
+		accept: props.accept || accept,
+		multiple: props.multiple !== void 0 ? props.multiple : multiple,
+		onChange: handleFileChange,
+		ref: inputRef,
+		type: "file"
+	}), [
+		accept,
+		multiple,
+		handleFileChange
+	]);
+	return [{
+		files,
+		isDragging,
+		errors,
+		isUploading
+	}, {
+		addFiles,
+		removeFile,
+		clearFiles,
+		clearErrors,
+		handleDragEnter,
+		handleDragLeave,
+		handleDragOver,
+		handleDrop,
+		handleFileChange,
+		openFileDialog,
+		getInputProps,
+		uploadFiles,
+		retryUpload,
+		cancelUpload
+	}];
+};
+
+//#endregion
+//#region src/icons/file-icon.tsx
+function FileIcon(props) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		...props,
+		className: cn("shrink-0", props.className),
+		children: [/* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }), /* @__PURE__ */ jsx("polyline", { points: "14,2 14,8 20,8" })]
+	});
+}
+
+//#endregion
+//#region src/components/file-upload.tsx
+const FileUploadContext = React$1.createContext(null);
+function useFileUploadContext() {
+	const context = React$1.useContext(FileUploadContext);
+	if (!context) throw new Error("FileUpload components must be used within FileUpload.Root");
+	return context;
+}
+function Root({ children, files, addFiles, removeFile, clearFiles, retryUpload, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, isDragActive = false, isUploading = false, accept, multiple = false, disabled = false, className }) {
+	const contextValue = {
+		files,
+		addFiles,
+		removeFile,
+		clearFiles,
+		retryUpload,
+		accept,
+		multiple,
+		disabled,
+		isDragActive,
+		isUploading,
+		openFileDialog,
+		getInputProps,
+		handleDragEnter,
+		handleDragLeave,
+		handleDragOver,
+		handleDrop
+	};
+	return /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "file-upload",
+			className: cn("flex flex-col gap-4", className),
+			children
+		})
+	});
+}
+const dropzoneVariants = cva("flex flex-col items-center justify-center gap-4 rounded-ppx-m bg-ppx-neutral-2 transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ppx-neutral-17/30", {
+	variants: {
+		size: {
+			default: "p-8 min-h-[200px]",
+			sm: "p-6 min-h-[160px]",
+			lg: "p-10 min-h-[260px]"
+		},
+		isDragActive: {
+			true: "border-2 border-dashed border-ppx-primary-5 bg-ppx-primary-1",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		isDragActive: false
+	}
+});
+function Dropzone({ className, size, children, dropzoneText = "Paste Or Drag & Drop Files Here", browseText = "Browse for files", hideDefaultContent = false, ...props }) {
+	const { accept, multiple, disabled, isDragActive, isUploading, openFileDialog, getInputProps, handleDragEnter, handleDragLeave, handleDragOver, handleDrop, addFiles } = useFileUploadContext();
+	const descriptionId = React$1.useId();
+	const instructionsId = React$1.useId();
+	const [announcement, setAnnouncement] = React$1.useState("");
+	const inputProps = getInputProps();
+	const handleKeyDown = React$1.useCallback((e) => {
+		if (e.key === "Enter" || e.key === " ") {
+			e.preventDefault();
+			openFileDialog();
+		}
+	}, [openFileDialog]);
+	const handlePaste = React$1.useCallback((e) => {
+		if (disabled) return;
+		const files = e.clipboardData.files;
+		if (files.length > 0) {
+			e.preventDefault();
+			const filesArray = Array.from(files);
+			addFiles(filesArray);
+			setAnnouncement(`${filesArray.length} file${filesArray.length > 1 ? "s" : ""} pasted`);
+		}
+	}, [disabled, addFiles]);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload-dropzone",
+		className: cn(dropzoneVariants({
+			size,
+			isDragActive
+		}), disabled && "cursor-not-allowed opacity-60", className),
+		onDragEnter: handleDragEnter,
+		onDragLeave: handleDragLeave,
+		onDragOver: handleDragOver,
+		onDrop: handleDrop,
+		onPaste: handlePaste,
+		onKeyDown: handleKeyDown,
+		tabIndex: disabled ? -1 : 0,
+		role: "button",
+		"aria-disabled": disabled,
+		"aria-describedby": `${descriptionId} ${instructionsId}`,
+		"aria-label": "File upload dropzone",
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				className: "sr-only",
+				children: announcement
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "sr-only",
+				children: dropzoneText
+			}),
+			/* @__PURE__ */ jsx("div", {
+				id: instructionsId,
+				className: "sr-only",
+				children: "Press Enter or Space to browse files, or drag and drop files here."
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				className: "sr-only",
+				accept,
+				multiple,
+				disabled,
+				tabIndex: -1,
+				"aria-hidden": "true"
+			}),
+			children ? children : !hideDefaultContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: "text-ppx-neutral-10 flex items-center gap-3",
+					children: [/* @__PURE__ */ jsx(UploadCloudIcon, {
+						size: 40,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx("span", {
+						className: "text-ppx-base text-ppx-neutral-13 font-medium",
+						children: dropzoneText
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "flex w-full items-center gap-3",
+					"aria-hidden": "true",
+					children: [
+						/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" }),
+						/* @__PURE__ */ jsx("span", {
+							className: "text-ppx-sm text-ppx-neutral-10 font-medium",
+							children: "OR"
+						}),
+						/* @__PURE__ */ jsx("div", { className: "bg-ppx-neutral-5 h-px flex-1" })
+					]
+				}),
+				/* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "default",
+					onClick: openFileDialog,
+					disabled: disabled || isUploading,
+					children: isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin" }), "Uploading..."] }) : browseText
+				})
+			] }) : null
+		]
+	});
+}
+function Trigger({ children, uploadingText = "Uploading...", showUploadingState = true, ...props }) {
+	const { openFileDialog, disabled, isUploading } = useFileUploadContext();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		onClick: openFileDialog,
+		disabled: disabled || showUploadingState && isUploading,
+		"data-slot": "file-upload-trigger",
+		...props,
+		children: showUploadingState && isUploading ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SpinnerIcon, { className: "size-4 animate-spin" }), uploadingText] }) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(UploadIcon, { className: "size-4" }), "Select files"] })
+	});
+}
+function ItemList({ className, children, ...props }) {
+	const { files } = useFileUploadContext();
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-item-list",
+		className: cn("flex flex-col gap-2", className),
+		...props,
+		children: typeof children === "function" ? children(files) : children
+	});
+}
+const ItemContext = React$1.createContext(null);
+function useFileUploadItem() {
+	const context = React$1.useContext(ItemContext);
+	if (!context) throw new Error("FileUpload.Item* components must be used within FileUpload.Item");
+	return context;
+}
+function Item({ file, className, children, statusStyles = true, ...props }) {
+	return /* @__PURE__ */ jsx(ItemContext.Provider, {
+		value: file,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "file-upload-item",
+			"data-status": file.status,
+			className: cn("rounded-ppx-s border-ppx-neutral-4 bg-ppx-neutral-1 flex items-center gap-3 border p-3", statusStyles && file.status === "error" && "border-ppx-red-4 bg-ppx-red-1", className),
+			...props,
+			children
+		})
+	});
+}
+function ItemPreview({ className, fallback, ...props }) {
+	const file = useFileUploadItem();
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-item-preview",
+		className: cn("rounded-ppx-xs bg-ppx-neutral-3 flex size-10 shrink-0 items-center justify-center overflow-hidden", className),
+		...props,
+		children: file.preview ? /* @__PURE__ */ jsx("img", {
+			src: file.preview,
+			alt: file.file.name,
+			className: "size-full object-cover"
+		}) : fallback ?? /* @__PURE__ */ jsx(FileIcon, { className: "text-ppx-neutral-10 size-5" })
+	});
+}
+function ItemName({ className, ...props }) {
+	const file = useFileUploadItem();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-name",
+		className: cn("text-ppx-sm text-ppx-neutral-14 truncate font-medium", className),
+		...props,
+		children: file.file.name
+	});
+}
+function ItemSize({ className, ...props }) {
+	const file = useFileUploadItem();
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-size",
+		className: cn("text-ppx-xs text-ppx-neutral-10", className),
+		...props,
+		children: formatBytes(file.file.size)
+	});
+}
+function ItemRemove({ className, children, ...props }) {
+	const { removeFile } = useFileUploadContext();
+	const file = useFileUploadItem();
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		onClick: () => removeFile(file.id),
+		"data-slot": "file-upload-item-remove",
+		"aria-label": `Remove ${file.file.name}`,
+		className: cn("ml-auto shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(CloseIcon, { className: "size-4" })
+	});
+}
+function ItemProgress({ className, ...props }) {
+	const file = useFileUploadItem();
+	if (file.progress === void 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-item-progress",
+		className: cn("bg-ppx-neutral-3 h-1.5 w-full overflow-hidden rounded-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "bg-ppx-primary-5 h-full transition-all duration-300",
+			style: { width: `${file.progress}%` }
+		})
+	});
+}
+function ItemStatus({ className, successIcon, uploadingContent, errorContent, ...props }) {
+	const file = useFileUploadItem();
+	if (file.status === "uploading") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-status",
+		className: cn("text-ppx-xs text-ppx-neutral-10 shrink-0", className),
+		...props,
+		children: uploadingContent ?? `${file.progress ?? 0}%`
+	});
+	if (file.status === "success") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-status",
+		className: cn("text-ppx-green-5 shrink-0", className),
+		...props,
+		children: successIcon ?? /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" })
+	});
+	if (file.status === "error") return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-status",
+		className: cn("text-ppx-xs text-ppx-red-5 shrink-0", className),
+		...props,
+		children: errorContent ?? "Failed"
+	});
+	return null;
+}
+function ItemError({ className, ...props }) {
+	const file = useFileUploadItem();
+	if (!file.error) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "file-upload-item-error",
+		className: cn("text-ppx-xs text-ppx-red-5", className),
+		...props,
+		children: file.error
+	});
+}
+function ItemRetry({ className, children, ...props }) {
+	const { retryUpload } = useFileUploadContext();
+	const file = useFileUploadItem();
+	if (file.status !== "error" || !retryUpload) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		size: "icon-sm",
+		onClick: () => retryUpload(file.id),
+		"data-slot": "file-upload-item-retry",
+		"aria-label": `Retry uploading ${file.file.name}`,
+		className: cn("shrink-0", className),
+		...props,
+		children: children ?? /* @__PURE__ */ jsx(RetryIcon, { className: "size-4" })
+	});
+}
+function ClearButton({ children, ...props }) {
+	const { clearFiles, files } = useFileUploadContext();
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "ghost",
+		onClick: clearFiles,
+		"data-slot": "file-upload-clear",
+		...props,
+		children: children ?? "Remove all files"
+	});
+}
+function ImageGrid({ className, children, ...props }) {
+	const { files } = useFileUploadContext();
+	if (files.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "file-upload-image-grid",
+		className: cn("grid grid-cols-4 gap-2", className),
+		...props,
+		children: typeof children === "function" ? children(files) : children
+	});
+}
+function ImageGridItem({ file, className, showStatusOverlay = true, ...props }) {
+	const { removeFile, retryUpload } = useFileUploadContext();
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "file-upload-image-grid-item",
+		"data-status": file.status,
+		className: cn("rounded-ppx-s group relative aspect-square overflow-hidden", file.status === "error" && "ring-ppx-red-5 ring-2", className),
+		...props,
+		children: [
+			file.preview ? /* @__PURE__ */ jsx("img", {
+				src: file.preview,
+				alt: file.file.name,
+				className: "size-full object-cover"
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "bg-ppx-neutral-3 flex size-full items-center justify-center",
+				children: /* @__PURE__ */ jsx(FileIcon, { className: "text-ppx-neutral-10 size-8" })
+			}),
+			showStatusOverlay && file.status === "uploading" && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-black/40",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "text-sm font-medium text-white",
+					children: [file.progress, "%"]
+				})
+			}),
+			showStatusOverlay && file.status === "error" && retryUpload && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-0 flex items-center justify-center bg-black/40",
+				children: /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "ghost",
+					size: "icon-sm",
+					onClick: () => retryUpload(file.id),
+					className: "text-white hover:text-white",
+					children: /* @__PURE__ */ jsx(RetryIcon, { className: "size-5" })
+				})
+			}),
+			showStatusOverlay && file.status === "success" && /* @__PURE__ */ jsx("div", {
+				className: "bg-ppx-green-5 absolute bottom-1 right-1 rounded-full p-0.5",
+				children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-3 text-white" })
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: () => removeFile(file.id),
+				className: "absolute right-1 top-1 flex size-6 items-center justify-center rounded-full bg-black/60 text-white opacity-0 transition-opacity group-hover:opacity-100",
+				"aria-label": `Remove ${file.file.name}`,
+				children: /* @__PURE__ */ jsx(CloseIcon, { className: "size-3" })
+			})
+		]
+	});
+}
+const FileUpload = {
+	Root,
+	Dropzone,
+	Trigger,
+	ItemList,
+	Item,
+	ItemPreview,
+	ItemName,
+	ItemSize,
+	ItemRemove,
+	ItemProgress,
+	ItemStatus,
+	ItemError,
+	ItemRetry,
+	ClearButton,
+	ImageGrid,
+	ImageGridItem
+};
+
 //#endregion
 //#region src/index.ts
 var src_exports = /* @__PURE__ */ __export({
@@ -2072,6 +2878,8 @@ var src_exports = /* @__PURE__ */ __export({
 	Combobox: () => combobox_exports,
 	DatePicker: () => DatePicker,
 	Dialog: () => dialog_exports,
+	FileIcon: () => FileIcon,
+	FileUpload: () => FileUpload,
 	Input: () => Input,
 	InputGroup: () => input_group_exports,
 	Label: () => Label,
@@ -2087,13 +2895,16 @@ var src_exports = /* @__PURE__ */ __export({
 	Tabs: () => tabs_exports,
 	Textarea: () => Textarea,
 	Tooltip: () => tooltip_exports,
+	UploadIcon: () => UploadIcon,
 	buttonVariants: () => buttonVariants,
 	cn: () => cn,
 	defineLoadOptions: () => defineLoadOptions,
+	formatBytes: () => formatBytes,
 	useAsyncOptions: () => useAsyncOptions,
+	useFileUpload: () => useFileUpload,
 	useIntersectionObserver: () => useIntersectionObserver
 });
 
 //#endregion
-export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, buttonVariants, cn, defineLoadOptions, useAsyncOptions, useIntersectionObserver };
+export { Avatar, AvatarGroup, AvatarImpl, block_checkbox_group_exports as BlockCheckboxGroup, block_radio_group_exports as BlockRadioGroup, breadcrumbs_exports as Breadcrumbs, Button, Calendar, Checkbox, combobox_exports as Combobox, DatePicker, dialog_exports as Dialog, FileIcon, FileUpload, Input, input_group_exports as InputGroup, Label, menu_exports as Menu, popover_exports as Popover, progress_exports as Progress, radio_group_exports as RadioGroup, segmented_control_exports as SegmentedControl, select_exports as Select, Separator, Spinner, Switch, tabs_exports as Tabs, Textarea, tooltip_exports as Tooltip, UploadIcon, buttonVariants, cn, defineLoadOptions, formatBytes, useAsyncOptions, useFileUpload, useIntersectionObserver };
 //# sourceMappingURL=index.js.map