@dungle-scrubs/admin-ui-soft 0.0.0-stage → 0.1.0

package/dist/components/ui/dot-matrix.js

@@ -0,0 +1,248 @@
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/ui/dot-matrix.tsx
+const GRID = 5;
+const CENTER = 2;
+const DOT_INDEXES = Array.from({ length: 25 }, (_, i) => i);
+const hash = (n, salt, range) => {
+	let h = Math.imul(n, 374761393) + Math.imul(salt, 668265263) >>> 0;
+	h = Math.imul(h ^ h >>> 13, 1274126177) >>> 0;
+	return (h ^ h >>> 16) % range / 1e3;
+};
+const glyph = (dots) => new Set(dots.map(([row, col]) => row * GRID + col));
+const CHECK = glyph([
+	[1, 4],
+	[2, 3],
+	[3, 0],
+	[3, 2],
+	[4, 1]
+]);
+const CROSS = glyph([
+	[0, 0],
+	[0, 4],
+	[1, 1],
+	[1, 3],
+	[2, 2],
+	[3, 1],
+	[3, 3],
+	[4, 0],
+	[4, 4]
+]);
+const BANG = glyph([
+	[0, 2],
+	[1, 2],
+	[2, 2],
+	[4, 2]
+]);
+const INFO = glyph([
+	[0, 2],
+	[2, 2],
+	[3, 2],
+	[4, 2]
+]);
+const PAUSE = glyph([
+	[1, 1],
+	[2, 1],
+	[3, 1],
+	[1, 3],
+	[2, 3],
+	[3, 3]
+]);
+const STOP = glyph([
+	[1, 1],
+	[1, 2],
+	[1, 3],
+	[2, 1],
+	[2, 2],
+	[2, 3],
+	[3, 1],
+	[3, 2],
+	[3, 3]
+]);
+const RECORD = glyph([
+	[1, 2],
+	[2, 1],
+	[2, 2],
+	[2, 3],
+	[3, 2]
+]);
+const STATES = {
+	idle: {
+		color: "text-muted-foreground",
+		base: .3
+	},
+	loading: { blink: (i) => ({
+		duration: .9 + hash(i, 2, 700),
+		delay: -hash(i, 1, 1200),
+		lo: .15
+	}) },
+	thinking: { blink: (_i, row, col) => ({
+		duration: 1.2,
+		delay: -(row + col) * .09,
+		lo: .2
+	}) },
+	streaming: { blink: (_i, row, col) => ({
+		duration: .9,
+		delay: -(row * .12 + hash(col, 3, 900)),
+		lo: .15
+	}) },
+	searching: { blink: (_i, _row, col) => ({
+		duration: 1.1,
+		delay: -col * .12,
+		lo: .2
+	}) },
+	syncing: { blink: (_i, row, col) => {
+		return {
+			duration: 1.3,
+			delay: -((Math.atan2(row - CENTER, col - CENTER) + Math.PI) / (2 * Math.PI)) * 1.3,
+			lo: .2
+		};
+	} },
+	connecting: { blink: (_i, row, col) => ({
+		duration: 1.4,
+		delay: -Math.max(Math.abs(row - CENTER), Math.abs(col - CENTER)) * .18,
+		lo: .15
+	}) },
+	waiting: {
+		glyph: glyph([
+			[2, 0],
+			[2, 2],
+			[2, 4]
+		]),
+		blink: (_i, _row, col) => ({
+			duration: 1.2,
+			delay: -col * .09,
+			lo: .2
+		})
+	},
+	uploading: { blink: (_i, row) => ({
+		duration: 1,
+		delay: -(4 - row) * .12,
+		lo: .2
+	}) },
+	downloading: { blink: (_i, row) => ({
+		duration: 1,
+		delay: -row * .12,
+		lo: .2
+	}) },
+	listening: { blink: (_i, _row, col) => ({
+		duration: .7 + hash(col, 4, 500),
+		delay: -hash(col, 5, 900),
+		lo: .25
+	}) },
+	speaking: { blink: (_i, _row, col) => ({
+		duration: .4 + hash(col, 6, 350),
+		delay: -hash(col, 7, 700),
+		lo: .2
+	}) },
+	recording: {
+		color: "text-destructive",
+		glyph: RECORD,
+		dim: .12,
+		blink: () => ({
+			duration: 1.4,
+			delay: 0,
+			lo: .3
+		})
+	},
+	success: {
+		color: "text-success",
+		glyph: CHECK
+	},
+	error: {
+		color: "text-destructive",
+		glyph: CROSS,
+		blink: () => ({
+			duration: 1.1,
+			delay: 0,
+			lo: .4
+		})
+	},
+	warning: {
+		color: "text-warning",
+		glyph: BANG,
+		blink: () => ({
+			duration: 1.6,
+			delay: 0,
+			lo: .45
+		})
+	},
+	info: {
+		color: "text-info",
+		glyph: INFO
+	},
+	paused: {
+		color: "text-muted-foreground",
+		glyph: PAUSE
+	},
+	stopped: {
+		color: "text-muted-foreground",
+		glyph: STOP
+	},
+	offline: {
+		color: "text-muted-foreground",
+		base: .15
+	}
+};
+const dotMatrixStates = Object.keys(STATES);
+const DOT_MATRIX_CSS = "@property --aui-dot-matrix-hi{syntax:\"<number>\";inherits:false;initial-value:1}@property --aui-dot-matrix-lo{syntax:\"<number>\";inherits:false;initial-value:0.15}@keyframes aui-dot-matrix-blink{0%,100%{opacity:var(--aui-dot-matrix-hi,1)}50%{opacity:var(--aui-dot-matrix-lo,0.15)}}";
+const HOISTED_STYLE = {
+	href: "aui-dot-matrix",
+	precedence: "low"
+};
+/**
+* Tiny 5x5 dot-matrix status indicator with 20 built-in states. Dots inherit the text color and animate in state-specific patterns: twinkle, waves, ripples, sweeps, equalizer columns, and check/cross/bang glyphs. State changes cross-fade per dot.
+*
+* ```tsx
+* <DotMatrix state={isRunning ? "loading" : "success"} />
+* ```
+*/
+function DotMatrix({ className, state = "loading", label, ...props }) {
+	const config = STATES[state];
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "dot-matrix",
+		"data-state": state,
+		role: "status",
+		className: cn("inline-block size-4 shrink-0", config.color, className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: label ?? state
+			}),
+			/* @__PURE__ */ jsx("style", {
+				...HOISTED_STYLE,
+				children: DOT_MATRIX_CSS
+			}),
+			/* @__PURE__ */ jsx("svg", {
+				"aria-hidden": true,
+				viewBox: "0 0 20 20",
+				fill: "currentColor",
+				className: "size-full",
+				children: DOT_INDEXES.map((i) => {
+					const row = Math.floor(i / GRID);
+					const col = i % GRID;
+					const on = !config.glyph || config.glyph.has(i);
+					const hi = on ? config.base ?? 1 : config.dim ?? .15;
+					const blink = on ? config.blink?.(i, row, col) : void 0;
+					return /* @__PURE__ */ jsx("circle", {
+						"data-slot": "dot-matrix-dot",
+						cx: 2 + col * 4,
+						cy: 2 + row * 4,
+						r: 1.3,
+						className: "[transition-property:--aui-dot-matrix-hi,--aui-dot-matrix-lo,opacity] duration-300 [animation-iteration-count:infinite] [animation-name:aui-dot-matrix-blink] [animation-timing-function:ease-in-out] motion-reduce:[animation-name:none]",
+						style: {
+							opacity: hi,
+							animationDuration: `${blink?.duration ?? 1}s`,
+							animationDelay: `${blink?.delay ?? 0}s`,
+							"--aui-dot-matrix-hi": hi,
+							"--aui-dot-matrix-lo": blink?.lo ?? hi
+						}
+					}, i);
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { DotMatrix, dotMatrixStates };

package/dist/components/ui/drawer.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/ui/drawer.d.ts
+declare function Drawer$1({ modal, showSwipeHandle, snapPoints, swipeDirection, ...props }: Drawer.Root.Props & {
+  showSwipeHandle?: boolean;
+}): React.JSX.Element;
+declare function DrawerTrigger({ ...props }: Drawer.Trigger.Props): React.JSX.Element;
+declare function DrawerPortal({ ...props }: Drawer.Portal.Props): React.JSX.Element;
+declare function DrawerClose({ ...props }: Drawer.Close.Props): React.JSX.Element;
+declare function DrawerOverlay({ className, ...props }: Drawer.Backdrop.Props): React.JSX.Element;
+declare function DrawerSwipeHandle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerContent({ className, children, ...props }: Drawer.Popup.Props): React.JSX.Element;
+declare function DrawerHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function DrawerTitle({ className, ...props }: Drawer.Title.Props): React.JSX.Element;
+declare function DrawerDescription({ className, ...props }: Drawer.Description.Props): React.JSX.Element;
+//#endregion
+export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/components/ui/drawer.js

@@ -0,0 +1,123 @@
+"use client";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { Drawer } from "@base-ui/react/drawer";
+//#region src/components/ui/drawer.tsx
+const DrawerContext = React.createContext(null);
+function useDrawer() {
+	const context = React.useContext(DrawerContext);
+	if (!context) throw new Error("useDrawer must be used within a Drawer.");
+	return context;
+}
+function Drawer$1({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
+	const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+	const contextValue = React.useMemo(() => ({
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	}), [
+		hasSnapPoints,
+		modal,
+		showSwipeHandle,
+		swipeDirection
+	]);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Drawer.Root, {
+			"data-slot": "drawer",
+			modal,
+			snapPoints,
+			swipeDirection,
+			...props
+		})
+	});
+}
+function DrawerTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Trigger, {
+		"data-slot": "drawer-trigger",
+		...props
+	});
+}
+function DrawerPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Portal, {
+		"data-slot": "drawer-portal",
+		...props
+	});
+}
+function DrawerClose({ ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Close, {
+		"data-slot": "drawer-close",
+		...props
+	});
+}
+function DrawerOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Backdrop, {
+		"data-slot": "drawer-overlay",
+		className: cn("fixed inset-0 z-50 min-h-dvh bg-black/80 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className),
+		...props
+	});
+}
+function DrawerSwipeHandle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-swipe-handle",
+		"aria-hidden": "true",
+		className: cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-12 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-12 active:cursor-grabbing", className),
+		...props
+	});
+}
+function DrawerContent({ className, children, ...props }) {
+	const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+	const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+	return /* @__PURE__ */ jsxs(DrawerPortal, {
+		"data-slot": "drawer-portal",
+		children: [modal === true && /* @__PURE__ */ jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : void 0 }), /* @__PURE__ */ jsx(Drawer.Viewport, {
+			"data-slot": "drawer-viewport",
+			"data-modal": modal,
+			className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto",
+			children: /* @__PURE__ */ jsxs(Drawer.Popup, {
+				"data-slot": "drawer-popup",
+				"data-swipe-axis": swipeAxis,
+				"data-snap-points": hasSnapPoints ? "" : void 0,
+				className: cn("group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col rounded-xl border border-popover bg-popover text-xs/relaxed text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [--drawer-bleed-background:transparent] [--drawer-inset:--spacing(2)] [interpolate-size:allow-keywords] dark:border-border", "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className),
+				...props,
+				children: [showSwipeHandle && /* @__PURE__ */ jsx(DrawerSwipeHandle, {}), /* @__PURE__ */ jsx(Drawer.Content, {
+					"data-slot": "drawer-content",
+					className: cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"),
+					children
+				})]
+			})
+		})]
+	});
+}
+function DrawerHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-header",
+		className: cn("flex shrink-0 flex-col gap-1 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:text-left", className),
+		...props
+	});
+}
+function DrawerFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "drawer-footer",
+		className: cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className),
+		...props
+	});
+}
+function DrawerTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Title, {
+		"data-slot": "drawer-title",
+		className: cn("font-heading text-sm font-medium text-foreground", className),
+		...props
+	});
+}
+function DrawerDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Drawer.Description, {
+		"data-slot": "drawer-description",
+		className: cn("text-xs/relaxed text-balance text-muted-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { Drawer$1 as Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerSwipeHandle, DrawerTitle, DrawerTrigger };

package/dist/components/ui/dropdown-menu.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/ui/dropdown-menu.d.ts
+declare function DropdownMenu({ ...props }: Menu.Root.Props): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: Menu.Portal.Props): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: Menu.Trigger.Props): React.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: Menu.Group.Props): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: Menu.GroupLabel.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: Menu.Item.Props & {
+  inset?: boolean;
+  variant?: "default" | "destructive";
+}): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: Menu.SubmenuRoot.Props): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: Menu.SubmenuTrigger.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React.ComponentProps<typeof DropdownMenuContent>): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: Menu.RadioGroup.Props): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
+  inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/dropdown-menu.js

@@ -0,0 +1,136 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { Menu } from "@base-ui/react/menu";
+//#region src/components/ui/dropdown-menu.tsx
+function DropdownMenu({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Root, {
+		"data-slot": "dropdown-menu",
+		...props
+	});
+}
+function DropdownMenuPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
+		"data-slot": "dropdown-menu-portal",
+		...props
+	});
+}
+function DropdownMenuTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
+		"data-slot": "dropdown-menu-trigger",
+		...props
+	});
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, {
+		className: "isolate z-50 outline-none",
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		children: /* @__PURE__ */ jsx(Menu.Popup, {
+			"data-slot": "dropdown-menu-content",
+			className: cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className),
+			...props
+		})
+	}) });
+}
+function DropdownMenuGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Group, {
+		"data-slot": "dropdown-menu-group",
+		...props
+	});
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
+		"data-slot": "dropdown-menu-label",
+		"data-inset": inset,
+		className: cn("px-2 py-1.5 text-xs text-muted-foreground data-inset:pl-7.5", className),
+		...props
+	});
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Item, {
+		"data-slot": "dropdown-menu-item",
+		"data-inset": inset,
+		"data-variant": variant,
+		className: cn("group/dropdown-menu-item relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs/relaxed outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive", className),
+		...props
+	});
+}
+function DropdownMenuSub({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
+		"data-slot": "dropdown-menu-sub",
+		...props
+	});
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
+		"data-slot": "dropdown-menu-sub-trigger",
+		"data-inset": inset,
+		className: cn("flex min-h-7 cursor-default items-center gap-2 rounded-md px-2 py-1 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "ml-auto" })]
+	});
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+	return /* @__PURE__ */ jsx(DropdownMenuContent, {
+		"data-slot": "dropdown-menu-sub-content",
+		className: cn("w-auto min-w-32 rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className),
+		align,
+		alignOffset,
+		side,
+		sideOffset,
+		...props
+	});
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
+		"data-slot": "dropdown-menu-checkbox-item",
+		"data-inset": inset,
+		className: cn("relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+		checked,
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-checkbox-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex min-h-7 cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+		}), children]
+	});
+}
+function DropdownMenuSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
+		"data-slot": "dropdown-menu-separator",
+		className: cn("-mx-1 my-1 h-px bg-border/50", className),
+		...props
+	});
+}
+function DropdownMenuShortcut({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "dropdown-menu-shortcut",
+		className: cn("ml-auto text-[0.625rem] tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className),
+		...props
+	});
+}
+//#endregion
+export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };

package/dist/components/ui/empty.d.ts

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

package/dist/components/ui/empty.js

@@ -0,0 +1,59 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/empty.tsx
+function Empty({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty",
+		className: cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className),
+		...props
+	});
+}
+function EmptyHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-header",
+		className: cn("flex max-w-sm flex-col items-center gap-1", className),
+		...props
+	});
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-icon",
+		"data-variant": variant,
+		className: cn(emptyMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function EmptyTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-title",
+		className: cn("font-heading text-sm font-medium tracking-tight", className),
+		...props
+	});
+}
+function EmptyDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-description",
+		className: cn("text-xs/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+function EmptyContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "empty-content",
+		className: cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2 text-xs/relaxed text-balance", className),
+		...props
+	});
+}
+//#endregion
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/field.d.ts

@@ -0,0 +1,26 @@
+import { Label } from "./label.js";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/field.d.ts
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+  variant?: "legend" | "label";
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const fieldVariants: (props?: ({
+  orientation?: "horizontal" | "responsive" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+  children?: React.ReactNode;
+}): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+  errors?: Array<{
+    message?: string;
+  } | undefined>;
+}): import("react").JSX.Element | null;
+//#endregion
+export { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle };