xiod-ui 1.0.0

package/dist/components/drawer.js

@@ -0,0 +1,304 @@
+"use client";
+import { ScrollArea } from "./scroll-area.js";
+import { Button } from "./button.js";
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { Cancel } from "xiod-icons/icons/Cancel";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+import { ChevronRight } from "xiod-icons/icons/ChevronRight";
+import { Checkbox } from "@base-ui/react/checkbox";
+import { Drawer as DrawerPrimitive } from "@base-ui/react/drawer";
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
+//#region src/components/drawer.tsx
+const DrawerContext = createContext({ position: "bottom" });
+const directionMap = {
+	bottom: "down",
+	left: "left",
+	right: "right",
+	top: "up"
+};
+const DrawerCreateHandle = DrawerPrimitive.createHandle;
+function Drawer({ swipeDirection, position = "bottom", ...props }) {
+	const contextValue = useMemo(() => ({ position }), [position]);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(DrawerPrimitive.Root, {
+			swipeDirection: swipeDirection ?? directionMap[position],
+			...props
+		})
+	});
+}
+const DrawerPortal = DrawerPrimitive.Portal;
+function DrawerTrigger(props) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerClose(props) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerSwipeArea({ className, position: positionProp, ...props }) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+	return /* @__PURE__ */ jsx(DrawerPrimitive.SwipeArea, {
+		className: cn("fixed z-50 touch-none", position === "bottom" && "inset-x-0 bottom-0 h-8", position === "top" && "inset-x-0 top-0 h-8", position === "left" && "inset-y-0 left-0 w-8", position === "right" && "inset-y-0 right-0 w-8", className),
+		"data-slot": "drawer-swipe-area",
+		...props
+	});
+}
+function DrawerBackdrop({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Backdrop, {
+		className: cn("fixed inset-0 z-50 bg-black/32 opacity-[calc(1-var(--drawer-swipe-progress))] backdrop-blur-sm transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*0.4s)] data-swiping:duration-0 supports-[-webkit-touch-callout:none]:absolute", className),
+		"data-slot": "drawer-backdrop",
+		...props
+	});
+}
+function DrawerViewport({ className, position, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Viewport, {
+		className: cn("fixed inset-0 z-50 [--bleed:--spacing(12)] [--inset:--spacing(0)]", "touch-none", position === "bottom" && "grid grid-rows-[1fr_auto] pt-12", position === "top" && "grid grid-rows-[auto_1fr] pb-12", position === "left" && "flex justify-start", position === "right" && "flex justify-end", variant === "inset" && "px-(--inset) sm:[--inset:--spacing(4)]", variant === "inset" && position !== "bottom" && "pt-(--inset)", variant === "inset" && position !== "top" && "pb-(--inset)", className),
+		"data-slot": "drawer-viewport",
+		...props
+	});
+}
+function DrawerPopup({ className, children, showCloseButton = false, position: positionProp, variant = "default", showBar = false, ...props }) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerBackdrop, {}), /* @__PURE__ */ jsx(DrawerViewport, {
+		position,
+		variant,
+		children: /* @__PURE__ */ jsxs(DrawerPrimitive.Popup, {
+			className: cn("relative flex max-h-full min-h-0 w-full min-w-0 flex-col bg-popover not-dark:bg-clip-padding text-popover-foreground shadow-lg/5 outline-none transition-[transform,box-shadow,height,background-color] duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] will-change-transform [--peek:calc(--spacing(6)-1px)] [--scale-base:calc(max(0,1-(var(--nested-drawers)*var(--stack-step))))] [--scale:clamp(0,calc(var(--scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--shrink:calc(1-var(--scale))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-step:0.05] before:pointer-events-none before:absolute before:inset-0 before:shadow-[0_1px_--theme(--color-black/4%)] after:pointer-events-none after:absolute after:bg-popover data-swiping:select-none data-nested-drawer-open:overflow-hidden data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(2%*(var(--nested-drawers)-var(--stack-progress))))] data-ending-style:shadow-transparent data-starting-style:shadow-transparent data-ending-style:duration-[calc(var(--drawer-swipe-strength)*0.4s)] dark:data-nested-drawer-open:bg-[color-mix(in_srgb,var(--popover),var(--color-black)_calc(6%*(var(--nested-drawers)-var(--stack-progress))))] dark:before:shadow-[0_-1px_--theme(--color-white/6%)]", "touch-none", position === "bottom" && "transform-[translateY(calc(var(--drawer-snap-point-offset)+var(--drawer-swipe-movement-y)))] data-ending-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] data-starting-style:transform-[translateY(calc(100%+env(safe-area-inset-bottom,0px)+var(--inset)))] row-start-2 -mb-[max(0,calc(var(--drawer-snap-point-offset,0)+clamp(0,1,var(--drawer-snap-point-offset,0)/1px)*var(--drawer-swipe-movement-y,0)))] border-t pb-[max(0px,calc(env(safe-area-inset-bottom,0px)+var(--drawer-snap-point-offset,0px)+clamp(0,1,var(--drawer-snap-point-offset,0px)/1px)*var(--drawer-swipe-movement-y,0px)))] not-data-starting-style:not-data-ending-style:transition-[transform,box-shadow,height,background-color,margin,padding] after:inset-x-0 after:top-full after:h-(--bleed) has-data-[slot=drawer-bar]:pt-2 data-ending-style:mb-0 data-starting-style:mb-0 data-ending-style:pb-0 data-starting-style:pb-0", position === "top" && "data-starting-style:transform-[translateY(calc(-100%-var(--inset)))] data-ending-style:transform-[translateY(calc(-100%-var(--inset)))] transform-[translateY(var(--drawer-swipe-movement-y))] border-b after:inset-x-0 after:bottom-full after:h-(--bleed) has-data-[slot=drawer-bar]:pb-2", position === "left" && "data-starting-style:transform-[translateX(calc(-100%-var(--inset)))] data-ending-style:transform-[translateX(calc(-100%-var(--inset)))] transform-[translateX(var(--drawer-swipe-movement-x))] w-[calc(100%-(--spacing(12)))] max-w-md border-e after:inset-y-0 after:inset-e-full after:w-(--bleed) has-data-[slot=drawer-bar]:pe-2", position === "right" && "transform-[translateX(var(--drawer-swipe-movement-x))] data-ending-style:transform-[translateX(calc(100%+var(--inset)))] data-starting-style:transform-[translateX(calc(100%+var(--inset)))] col-start-2 w-[calc(100%-(--spacing(12)))] max-w-md border-s after:inset-y-0 after:inset-s-full after:w-(--bleed) has-data-[slot=drawer-bar]:ps-2", variant !== "straight" && cn(position === "bottom" && "rounded-t-2xl", position === "top" && "rounded-b-2xl **:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "rounded-e-2xl **:data-[slot=drawer-footer]:rounded-ee-[calc(var(--radius-2xl)-1px)]", position === "right" && "rounded-s-2xl **:data-[slot=drawer-footer]:rounded-es-[calc(var(--radius-2xl)-1px)]"), variant === "default" && cn(position === "bottom" && "before:rounded-t-[calc(var(--radius-2xl)-1px)]", position === "top" && "before:rounded-b-[calc(var(--radius-2xl)-1px)]", position === "left" && "before:rounded-e-[calc(var(--radius-2xl)-1px)]", position === "right" && "before:rounded-s-[calc(var(--radius-2xl)-1px)]"), variant === "inset" && "before:hidden sm:rounded-2xl sm:border sm:after:bg-transparent sm:before:rounded-[calc(var(--radius-2xl)-1px)] sm:**:data-[slot=drawer-footer]:rounded-b-[calc(var(--radius-2xl)-1px)]", variant === "straight" && "[--stack-step:0]", (position === "bottom" || position === "top") && "h-(--drawer-height,auto) [--height:max(0px,calc(var(--drawer-frontmost-height,var(--drawer-height))))] data-nested-drawer-open:h-(--height)", position === "bottom" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_calc(100%-var(--inset))]", position === "top" && "data-nested-drawer-open:transform-[translateY(calc(var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--shrink)*var(--height))))_scale(var(--scale))] origin-[50%_var(--inset)]", position === "left" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)))_scale(var(--scale))] origin-right", position === "right" && "data-nested-drawer-open:transform-[translateX(calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)))_scale(var(--scale))] origin-left", className),
+			"data-slot": "drawer-popup",
+			...props,
+			children: [
+				children,
+				showCloseButton && /* @__PURE__ */ jsx(DrawerPrimitive.Close, {
+					"aria-label": "Close",
+					className: "absolute inset-e-2 top-2",
+					render: /* @__PURE__ */ jsx(Button, {
+						size: "icon",
+						className: "rounded-xl",
+						variant: "outline"
+					}),
+					children: /* @__PURE__ */ jsx(Cancel, {})
+				}),
+				showBar && /* @__PURE__ */ jsx(DrawerBar, {})
+			]
+		})
+	})] });
+}
+function DrawerHeader({ className, allowSelection = false, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex flex-col gap-2 p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pb-3 max-sm:pb-4", !allowSelection && "cursor-default", className),
+		"data-slot": "drawer-header"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
+	});
+}
+function DrawerFooter({ className, variant = "default", allowSelection = true, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex flex-col-reverse gap-2 px-6 pb-(--safe-area-inset-bottom,0px) sm:flex-row sm:justify-end", !allowSelection && "cursor-default", variant === "default" && "border-t bg-muted/72 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(4))]", variant === "bare" && "in-[[data-slot=drawer-popup]:has([data-slot=drawer-panel])]:pt-3 pt-4 pb-[calc(env(safe-area-inset-bottom,0px)+--spacing(6))]", className),
+		"data-slot": "drawer-footer"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Title, {
+		className: cn("font-heading font-semibold text-xl leading-none", className),
+		"data-slot": "drawer-title",
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(DrawerPrimitive.Description, {
+		className: cn("text-muted-foreground text-sm", className),
+		"data-slot": "drawer-description",
+		...props
+	});
+}
+function DrawerPanel({ className, scrollFade = true, scrollable = true, allowSelection = true, render, ...props }) {
+	const defaultProps = {
+		className: cn("p-6 in-[[data-slot=drawer-popup]:has([data-slot=drawer-header])]:pt-1 in-[[data-slot=drawer-popup]:has([data-slot=drawer-footer]:not(.border-t))]:pb-1", !allowSelection && "cursor-default", className),
+		"data-slot": "drawer-panel"
+	};
+	const content = useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render: allowSelection ? /* @__PURE__ */ jsx(DrawerContent, { render }) : render
+	});
+	if (scrollable) return /* @__PURE__ */ jsx(ScrollArea, {
+		className: "touch-auto",
+		scrollFade,
+		children: content
+	});
+	return content;
+}
+function DrawerBar({ className, position: positionProp, render, ...props }) {
+	const { position: contextPosition } = useContext(DrawerContext);
+	const position = positionProp ?? contextPosition;
+	const defaultProps = {
+		"aria-hidden": true,
+		className: cn("absolute flex touch-none items-center justify-center p-3 before:rounded-full before:bg-input", position === "left" || position === "right" ? "inset-y-0 before:h-12 before:w-1" : "inset-x-0 before:h-1 before:w-12", position === "top" && "bottom-0", position === "bottom" && "top-0", position === "left" && "right-0", position === "right" && "left-0", className),
+		"data-slot": "drawer-bar"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+const DrawerContent = DrawerPrimitive.Content;
+function DrawerMenu({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("-m-2 flex flex-col", className),
+		"data-slot": "drawer-menu"
+	};
+	return useRender({
+		defaultTagName: "nav",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DrawerMenuItem({ className, variant = "default", render, disabled, ...props }) {
+	const defaultProps = {
+		className: cn("relative flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-64 data-[variant=destructive]:text-destructive-foreground sm:min-h-8 sm:text-sm [&>svg:not([class*='opacity-'])]:opacity-80 [&>svg:not([class*='size-'])]:size-4.5 sm:[&>svg:not([class*='size-'])]:size-4 [&>svg]:pointer-events-none [&>svg]:-mx-0.5 [&>svg]:shrink-0 pointer-coarse:after:absolute pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11", className),
+		"data-slot": "drawer-menu-item",
+		"data-variant": variant,
+		disabled,
+		type: "button"
+	};
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DrawerMenuSeparator({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("mx-2 my-1 h-px bg-border", className),
+		"data-slot": "drawer-menu-separator"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DrawerMenuGroup({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("flex flex-col", className),
+		"data-slot": "drawer-menu-group"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DrawerMenuGroupLabel({ className, render, ...props }) {
+	const defaultProps = {
+		className: cn("px-2 py-1.5 font-medium text-muted-foreground text-xs", className),
+		"data-slot": "drawer-menu-group-label"
+	};
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps(defaultProps, props),
+		render
+	});
+}
+function DrawerMenuTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsxs(DrawerTrigger, {
+		className: cn("flex min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground sm:min-h-8 sm:text-sm [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className),
+		"data-slot": "drawer-menu-trigger",
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "ms-auto -me-0.5 opacity-80" })]
+	});
+}
+function DrawerMenuCheckboxItem({ className, children, checked, defaultChecked, onCheckedChange, variant = "default", disabled, render, ...props }) {
+	return /* @__PURE__ */ jsx(Checkbox.Root, {
+		checked,
+		className: cn("grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0", variant === "switch" ? "grid-cols-[1fr_auto] gap-4 pe-1.5" : "grid-cols-[1rem_1fr] pe-4", className),
+		"data-slot": "drawer-menu-checkbox-item",
+		defaultChecked,
+		disabled,
+		onCheckedChange,
+		render,
+		...props,
+		children: variant === "switch" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: "col-start-1",
+			children
+		}), /* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "inset-shadow-[0_1px_--theme(--color-black/4%)] col-start-2 inline-flex h-[calc(var(--thumb-size)+2px)] w-[calc(var(--thumb-size)*2-2px)] shrink-0 items-center rounded-full p-px outline-none transition-[background-color,box-shadow] duration-200 [--thumb-size:--spacing(4)] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-checked:bg-primary data-unchecked:bg-input data-disabled:opacity-64 sm:[--thumb-size:--spacing(3)]",
+			keepMounted: true,
+			children: /* @__PURE__ */ jsx("span", { className: "pointer-events-none block aspect-square h-full in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:origin-[var(--thumb-size)_50%] origin-left in-[[data-slot=drawer-menu-checkbox-item][data-checked]]:translate-x-[calc(var(--thumb-size)-4px)] in-[[data-slot=drawer-menu-checkbox-item]:active]:not-data-disabled:scale-x-110 in-[[data-slot=drawer-menu-checkbox-item]:active]:rounded-[var(--thumb-size)/calc(var(--thumb-size)*1.10)] rounded-(--thumb-size) bg-background shadow-sm/5 will-change-transform [transition:translate_.15s,border-radius_.15s,scale_.1s_.1s,transform-origin_.15s]" })
+		})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Checkbox.Indicator, {
+			className: "col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})] })
+	});
+}
+function DrawerMenuRadioGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx(RadioGroup, {
+		className: cn("flex flex-col", className),
+		"data-slot": "drawer-menu-radio-group",
+		...props
+	});
+}
+function DrawerMenuRadioItem({ className, children, value, disabled, render, ...props }) {
+	return /* @__PURE__ */ jsxs(Radio.Root, {
+		className: cn("grid min-h-9 w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1 text-base text-foreground outline-none hover:bg-accent hover:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-64 sm:min-h-8 sm:text-sm [&_svg:not([class*='opacity-'])]:opacity-80 [&_svg:not([class*='size-'])]:size-4.5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:-mx-0.5 [&_svg]:shrink-0", "grid-cols-[1rem_1fr] items-center pe-4", className),
+		"data-slot": "drawer-menu-radio-item",
+		disabled,
+		render,
+		value,
+		...props,
+		children: [/* @__PURE__ */ jsx(Radio.Indicator, {
+			className: "col-start-1",
+			children: /* @__PURE__ */ jsx("svg", {
+				fill: "none",
+				height: "24",
+				stroke: "currentColor",
+				strokeLinecap: "round",
+				strokeLinejoin: "round",
+				strokeWidth: "2",
+				viewBox: "0 0 24 24",
+				width: "24",
+				xmlns: "http://www.w3.org/2000/svg",
+				children: /* @__PURE__ */ jsx("path", { d: "M5.252 12.7 10.2 18.63 18.748 5.37" })
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "col-start-2",
+			children
+		})]
+	});
+}
+//#endregion
+export { Drawer, DrawerBackdrop, DrawerBar, DrawerClose, DrawerContent, DrawerCreateHandle, DrawerDescription, DrawerFooter, DrawerHeader, DrawerMenu, DrawerMenuCheckboxItem, DrawerMenuGroup, DrawerMenuGroupLabel, DrawerMenuItem, DrawerMenuRadioGroup, DrawerMenuRadioItem, DrawerMenuSeparator, DrawerMenuTrigger, DrawerPanel, DrawerPopup, DrawerPortal, DrawerPrimitive, DrawerSwipeArea, DrawerTitle, DrawerTrigger, DrawerViewport };

package/dist/components/empty.d.ts

@@ -0,0 +1,14 @@
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+//#region src/components/empty.d.ts
+declare function Empty({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyHeader({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+export declare const emptyMediaVariants: (props?: ({
+  variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React$1.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): React$1.JSX.Element;
+declare function EmptyTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function EmptyDescription({ className, ...props }: React$1.ComponentProps<"p">): React$1.JSX.Element;
+declare function EmptyContent({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/empty.js

@@ -0,0 +1,75 @@
+import { cn } from "cn";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/components/empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance p-6 text-center md:p-12", className),
+		"data-slot": "empty",
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex max-w-sm flex-col items-center text-center", className),
+		"data-slot": "empty-header",
+		...props
+	});
+}
+const emptyMediaVariants = cva("flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	defaultVariants: { variant: "default" },
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "relative flex size-9 shrink-0 items-center justify-center rounded-md border bg-card not-dark:bg-clip-padding text-foreground shadow-sm/5 before:pointer-events-none before:absolute before:inset-0 before:rounded-[calc(var(--radius-md)-1px)] before:shadow-[0_1px_--theme(--color-black/4%)] dark:before:shadow-[0_-1px_--theme(--color-white/6%)] [&_svg:not([class*='size-'])]:size-4.5"
+	} }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative mb-6", className),
+		"data-slot": "empty-media",
+		"data-variant": variant,
+		...props,
+		children: [variant === "icon" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			}), "-translate-x-0.5 -rotate-10 pointer-events-none absolute bottom-px origin-bottom-left scale-84 shadow-none")
+		}), /* @__PURE__ */ jsx("div", {
+			"aria-hidden": "true",
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			}), "pointer-events-none absolute bottom-px origin-bottom-right translate-x-0.5 rotate-10 scale-84 shadow-none")
+		})] }), /* @__PURE__ */ jsx("div", {
+			className: cn(emptyMediaVariants({
+				className,
+				variant
+			})),
+			...props
+		})]
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("font-heading font-semibold text-xl", className),
+		"data-slot": "empty-title",
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("text-muted-foreground text-sm [&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4 [[data-slot=empty-title]+&]:mt-1", className),
+		"data-slot": "empty-description",
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", className),
+		"data-slot": "empty-content",
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle, emptyMediaVariants };

package/dist/components/field.d.ts

@@ -0,0 +1,12 @@
+import * as React$1 from "react";
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/components/field.d.ts
+declare function Field({ className, ...props }: Field$1.Root.Props): React$1.JSX.Element;
+declare function FieldLabel({ className, ...props }: Field$1.Label.Props): React$1.JSX.Element;
+declare function FieldItem({ className, ...props }: Field$1.Item.Props): React$1.JSX.Element;
+declare function FieldDescription({ className, ...props }: Field$1.Description.Props): React$1.JSX.Element;
+declare function FieldError({ className, ...props }: Field$1.Error.Props): React$1.JSX.Element;
+declare const FieldControl: React$1.ForwardRefExoticComponent<Omit<import("@base-ui/react").FieldControlProps, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const FieldValidity: React$1.FC<import("@base-ui/react").FieldValidityProps>;
+//#endregion
+export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/field.js

@@ -0,0 +1,44 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Field as Field$1 } from "@base-ui/react/field";
+//#region src/components/field.tsx
+function Field({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Root, {
+		className: cn("flex flex-col items-start gap-2", className),
+		"data-slot": "field",
+		...props
+	});
+}
+function FieldLabel({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Label, {
+		className: cn("inline-flex items-center gap-2 font-medium text-base/4.5 text-foreground data-disabled:opacity-64 sm:text-sm/4", className),
+		"data-slot": "field-label",
+		...props
+	});
+}
+function FieldItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Item, {
+		className: cn("flex", className),
+		"data-slot": "field-item",
+		...props
+	});
+}
+function FieldDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Description, {
+		className: cn("text-muted-foreground text-xs data-disabled:opacity-64", className),
+		"data-slot": "field-description",
+		...props
+	});
+}
+function FieldError({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Field$1.Error, {
+		className: cn("text-destructive-foreground text-xs", className),
+		"data-slot": "field-error",
+		...props
+	});
+}
+const FieldControl = Field$1.Control;
+const FieldValidity = Field$1.Validity;
+//#endregion
+export { Field, FieldControl, FieldDescription, FieldError, FieldItem, FieldLabel, FieldValidity };

package/dist/components/fieldset.d.ts

@@ -0,0 +1,7 @@
+import * as React$1 from "react";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+//#region src/components/fieldset.d.ts
+declare function Fieldset({ className, ...props }: Fieldset$1.Root.Props): React$1.JSX.Element;
+declare function FieldsetLegend({ className, ...props }: Fieldset$1.Legend.Props): React$1.JSX.Element;
+//#endregion
+export { Fieldset, FieldsetLegend };

package/dist/components/fieldset.js

@@ -0,0 +1,21 @@
+"use client";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Fieldset as Fieldset$1 } from "@base-ui/react/fieldset";
+//#region src/components/fieldset.tsx
+function Fieldset({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset$1.Root, {
+		className: cn("flex w-full max-w-64 flex-col gap-6", className),
+		"data-slot": "fieldset",
+		...props
+	});
+}
+function FieldsetLegend({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Fieldset$1.Legend, {
+		className: cn("font-semibold text-foreground", className),
+		"data-slot": "fieldset-legend",
+		...props
+	});
+}
+//#endregion
+export { Fieldset, FieldsetLegend };

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

@@ -0,0 +1,61 @@
+import { Button } from "./button.js";
+import { VariantProps } from "class-variance-authority";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/file-upload.d.ts
+export type FileStatus = "idle" | "uploading" | "success" | "error";
+export interface FileItem {
+  id: string;
+  file: File;
+  progress: number;
+  status: FileStatus;
+  errorMessage?: string;
+}
+export interface FileUploadProps extends React$1.HTMLAttributes<HTMLDivElement> {
+  files?: FileItem[];
+  onFilesChange?: (files: FileItem[]) => void;
+  onFilesAdded?: (files: File[]) => void;
+  onFileRemove?: (id: string) => void;
+  maxFiles?: number;
+  maxSizeMB?: number;
+  accept?: string;
+  disabled?: boolean;
+  children?: React$1.ReactNode;
+}
+export declare function formatFileSize(bytes: number): string;
+export declare function FileUpload({ files: filesProp, onFilesChange, onFilesAdded, onFileRemove, maxFiles, maxSizeMB, accept, disabled, children, ...props }: FileUploadProps): React$1.JSX.Element;
+export declare function FileUploadTrigger({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+export declare function FileUploadInput({ className, ...props }: React$1.ComponentPropsWithoutRef<"input">): React$1.JSX.Element;
+export declare function FileUploadList({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+interface FileUploadItemProps extends useRender.ComponentProps<"div"> {
+  fileItem: FileItem;
+}
+export declare function FileUploadItem({ className, render, fileItem, ...props }: FileUploadItemProps): React$1.JSX.Element;
+export declare function FileUploadItemIcon({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement;
+export declare function FileUploadItemName({ className, render, ...props }: useRender.ComponentProps<"p">): React$1.ReactElement;
+export declare function FileUploadItemSize({ className, render, ...props }: useRender.ComponentProps<"span">): React$1.ReactElement;
+export declare function FileUploadItemProgress({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement | null;
+export declare function FileUploadItemStatus({ className, render, ...props }: useRender.ComponentProps<"div">): React$1.ReactElement | null;
+export declare function FileUploadItemRemove({ className, render, ...props }: useRender.ComponentProps<"button">): React$1.ReactElement;
+export type AttachmentState = "idle" | "uploading" | "processing" | "error" | "done";
+export declare const attachmentVariants: (props?: ({
+  size?: "sm" | "xs" | "default" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AttachmentProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof attachmentVariants> {
+  state?: AttachmentState;
+}
+export declare function Attachment({ className, state, size, orientation, ...props }: AttachmentProps): React$1.JSX.Element;
+export declare const attachmentMediaVariants: (props?: ({
+  variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface AttachmentMediaProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof attachmentMediaVariants> {}
+export declare function AttachmentMedia({ className, variant, ...props }: AttachmentMediaProps): React$1.JSX.Element;
+export declare function AttachmentContent({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+export declare function AttachmentTitle({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
+export declare function AttachmentDescription({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): React$1.JSX.Element;
+export declare function AttachmentActions({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+export declare function AttachmentAction({ className, variant, size, ...props }: React$1.ComponentProps<typeof Button>): React$1.JSX.Element;
+export declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React$1.ReactElement;
+export declare function AttachmentGroup({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): React$1.JSX.Element;
+//#endregion