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

package/dist/components/assistant-ui/utils/task.js

@@ -0,0 +1,75 @@
+"use client";
+import { __exportAll } from "../../../_virtual/_rolldown/runtime.js";
+import { useEffect, useState } from "react";
+//#region src/components/assistant-ui/utils/task.ts
+var task_exports = /* @__PURE__ */ __exportAll({
+	TASK_PAGE_SIZE: () => 4,
+	formatElapsed: () => formatElapsed,
+	taskLabel: () => taskLabel,
+	taskMeta: () => taskMeta,
+	taskStateOf: () => taskStateOf,
+	useTaskElapsed: () => useTaskElapsed
+});
+const LABEL_KEYS = [
+	"description",
+	"task",
+	"title",
+	"name",
+	"prompt",
+	"query",
+	"instructions"
+];
+const META_KEYS = [
+	"subagent_type",
+	"subagentType",
+	"agent",
+	"model"
+];
+function firstString(args, keys) {
+	if (typeof args !== "object" || args === null) return void 0;
+	const record = args;
+	for (const key of keys) {
+		const value = record[key];
+		if (typeof value === "string" && value.trim() !== "") return value.trim();
+	}
+}
+function taskStateOf(status, isError) {
+	if (status.type === "running") return "working";
+	if (status.type === "requires-action") return "waiting";
+	if (status.type === "incomplete") return status.reason === "cancelled" ? "cancelled" : "failed";
+	if (isError) return "failed";
+	return "done";
+}
+function taskLabel(toolName, args) {
+	return firstString(args, LABEL_KEYS) ?? toolName;
+}
+function taskMeta(args) {
+	return firstString(args, META_KEYS);
+}
+function formatElapsed(ms) {
+	if (ms < 1e3) return "<1s";
+	const seconds = ms / 1e3;
+	if (seconds < 10) return `${(Math.floor(seconds * 10) / 10).toFixed(1)}s`;
+	if (seconds < 60) return `${Math.floor(seconds)}s`;
+	return `${Math.floor(seconds / 60)}m ${Math.floor(seconds % 60)}s`;
+}
+function useTaskElapsed(timing, running) {
+	const ticking = timing !== void 0 && timing.completedAt === void 0 && running;
+	const [now, setNow] = useState(() => Date.now());
+	const [wasTicking, setWasTicking] = useState(ticking);
+	if (wasTicking !== ticking) {
+		setWasTicking(ticking);
+		if (ticking) setNow(Date.now());
+	}
+	useEffect(() => {
+		if (!ticking) return void 0;
+		const id = setInterval(() => setNow(Date.now()), 1e3);
+		return () => clearInterval(id);
+	}, [ticking]);
+	if (timing === void 0) return void 0;
+	if (timing.completedAt !== void 0) return Math.max(0, timing.completedAt - timing.startedAt);
+	if (!ticking) return void 0;
+	return Math.max(0, now - timing.startedAt);
+}
+//#endregion
+export { formatElapsed, taskLabel, taskMeta, taskStateOf, task_exports, useTaskElapsed };

package/dist/components/icons/github.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+//#region src/components/icons/github.tsx
+function GitHubIcon({ className }) {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 24 24",
+		className,
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" })
+	});
+}
+//#endregion
+export { GitHubIcon };

package/dist/components/theme-provider.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+//#region src/components/theme-provider.d.ts
+type Theme = "dark" | "light" | "system";
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+  disableTransitionOnChange?: boolean;
+};
+type ThemeProviderState = {
+  theme: Theme;
+  setTheme: (theme: Theme) => void;
+};
+export declare function ThemeProvider({ children, defaultTheme, storageKey, disableTransitionOnChange, ...props }: ThemeProviderProps): React.JSX.Element;
+export declare const useTheme: () => ThemeProviderState;
+//#endregion

package/dist/components/theme-provider.js

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/theme-provider.tsx
+const COLOR_SCHEME_QUERY = "(prefers-color-scheme: dark)";
+const THEME_VALUES = [
+	"dark",
+	"light",
+	"system"
+];
+const ThemeProviderContext = React.createContext(void 0);
+function isTheme(value) {
+	if (value === null) return false;
+	return THEME_VALUES.includes(value);
+}
+function getSystemTheme() {
+	if (window.matchMedia(COLOR_SCHEME_QUERY).matches) return "dark";
+	return "light";
+}
+function disableTransitionsTemporarily() {
+	const style = document.createElement("style");
+	style.appendChild(document.createTextNode("*,*::before,*::after{-webkit-transition:none!important;transition:none!important}"));
+	document.head.appendChild(style);
+	return () => {
+		window.getComputedStyle(document.body);
+		requestAnimationFrame(() => {
+			requestAnimationFrame(() => {
+				style.remove();
+			});
+		});
+	};
+}
+function isEditableTarget(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	if (target.isContentEditable) return true;
+	if (target.closest("input, textarea, select, [contenteditable='true']")) return true;
+	return false;
+}
+function ThemeProvider({ children, defaultTheme = "system", storageKey = "theme", disableTransitionOnChange = true, ...props }) {
+	const [theme, setThemeState] = React.useState(() => {
+		const storedTheme = localStorage.getItem(storageKey);
+		if (isTheme(storedTheme)) return storedTheme;
+		return defaultTheme;
+	});
+	const setTheme = React.useCallback((nextTheme) => {
+		localStorage.setItem(storageKey, nextTheme);
+		setThemeState(nextTheme);
+	}, [storageKey]);
+	const applyTheme = React.useCallback((nextTheme) => {
+		const root = document.documentElement;
+		const resolvedTheme = nextTheme === "system" ? getSystemTheme() : nextTheme;
+		const restoreTransitions = disableTransitionOnChange ? disableTransitionsTemporarily() : null;
+		root.classList.remove("light", "dark");
+		root.classList.add(resolvedTheme);
+		if (restoreTransitions) restoreTransitions();
+	}, [disableTransitionOnChange]);
+	React.useEffect(() => {
+		applyTheme(theme);
+		if (theme !== "system") return;
+		const mediaQuery = window.matchMedia(COLOR_SCHEME_QUERY);
+		const handleChange = () => {
+			applyTheme("system");
+		};
+		mediaQuery.addEventListener("change", handleChange);
+		return () => {
+			mediaQuery.removeEventListener("change", handleChange);
+		};
+	}, [theme, applyTheme]);
+	React.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.repeat) return;
+			if (event.metaKey || event.ctrlKey || event.altKey) return;
+			if (isEditableTarget(event.target)) return;
+			if (event.key.toLowerCase() !== "d") return;
+			setThemeState((currentTheme) => {
+				const nextTheme = currentTheme === "dark" ? "light" : currentTheme === "light" ? "dark" : getSystemTheme() === "dark" ? "light" : "dark";
+				localStorage.setItem(storageKey, nextTheme);
+				return nextTheme;
+			});
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => {
+			window.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [storageKey]);
+	React.useEffect(() => {
+		const handleStorageChange = (event) => {
+			if (event.storageArea !== localStorage) return;
+			if (event.key !== storageKey) return;
+			if (isTheme(event.newValue)) {
+				setThemeState(event.newValue);
+				return;
+			}
+			setThemeState(defaultTheme);
+		};
+		window.addEventListener("storage", handleStorageChange);
+		return () => {
+			window.removeEventListener("storage", handleStorageChange);
+		};
+	}, [defaultTheme, storageKey]);
+	const value = React.useMemo(() => ({
+		theme,
+		setTheme
+	}), [theme, setTheme]);
+	return /* @__PURE__ */ jsx(ThemeProviderContext.Provider, {
+		...props,
+		value,
+		children
+	});
+}
+const useTheme = () => {
+	const context = React.useContext(ThemeProviderContext);
+	if (context === void 0) throw new Error("useTheme must be used within a ThemeProvider");
+	return context;
+};
+//#endregion
+export { ThemeProvider, useTheme };

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

@@ -0,0 +1,8 @@
+import { Accordion } from "@base-ui/react/accordion";
+//#region src/components/ui/accordion.d.ts
+declare function Accordion$1({ className, ...props }: Accordion.Root.Props): import("react").JSX.Element;
+declare function AccordionItem({ className, ...props }: Accordion.Item.Props): import("react").JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: Accordion.Trigger.Props): import("react").JSX.Element;
+declare function AccordionContent({ className, children, ...props }: Accordion.Panel.Props): import("react").JSX.Element;
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,53 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Accordion } from "@base-ui/react/accordion";
+import { cn } from "cn";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+//#region src/components/ui/accordion.tsx
+function Accordion$1({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Root, {
+		"data-slot": "accordion",
+		className: cn("flex w-full flex-col overflow-hidden rounded-md border", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Item, {
+		"data-slot": "accordion-item",
+		className: cn("not-last:border-b data-open:bg-muted/50", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground", className),
+			...props,
+			children: [
+				children,
+				/* @__PURE__ */ jsx(ChevronDownIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+				}),
+				/* @__PURE__ */ jsx(ChevronUpIcon, {
+					"data-slot": "accordion-trigger-icon",
+					className: "pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+				})
+			]
+		})
+	});
+}
+function AccordionContent({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion.Panel, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+//#endregion
+export { Accordion$1 as Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/alert-dialog.d.ts

@@ -0,0 +1,20 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.d.ts
+declare function AlertDialog$1({ ...props }: AlertDialog.Root.Props): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: AlertDialog.Trigger.Props): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: AlertDialog.Portal.Props): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: AlertDialog.Backdrop.Props): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: AlertDialog.Popup.Props & {
+  size?: "default" | "sm";
+}): React.JSX.Element;
+declare function AlertDialogHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogMedia({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDialogTitle({ className, ...props }: React.ComponentProps<typeof AlertDialog.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: AlertDialog.Close.Props & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

package/dist/components/ui/alert-dialog.js

@@ -0,0 +1,93 @@
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "cn";
+import { AlertDialog } from "@base-ui/react/alert-dialog";
+//#region src/components/ui/alert-dialog.tsx
+function AlertDialog$1({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Backdrop, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className),
+		...props
+	});
+}
+function AlertDialogContent({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [/* @__PURE__ */ jsx(AlertDialogOverlay, {}), /* @__PURE__ */ jsx(AlertDialog.Popup, {
+		"data-slot": "alert-dialog-content",
+		"data-size": size,
+		className: cn("group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm 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),
+		...props
+	})] });
+}
+function AlertDialogHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-header",
+		className: cn("grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]", className),
+		...props
+	});
+}
+function AlertDialogFooter({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-footer",
+		className: cn("flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end", className),
+		...props
+	});
+}
+function AlertDialogMedia({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-dialog-media",
+		className: cn("mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2", className),
+		...props
+	});
+}
+function AlertDialogDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-dialog-action",
+		className: cn(className),
+		...props
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog.Close, {
+		"data-slot": "alert-dialog-cancel",
+		className: cn(className),
+		render: /* @__PURE__ */ jsx(Button, {
+			variant,
+			size
+		}),
+		...props
+	});
+}
+//#endregion
+export { AlertDialog$1 as AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+//#region src/components/ui/alert.d.ts
+declare const alertVariants: (props?: ({
+  variant?: "default" | "destructive" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/ui/alert.js

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+//#region src/components/ui/alert.tsx
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		default: "bg-card text-card-foreground",
+		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Alert({ className, variant, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert",
+		role: "alert",
+		className: cn(alertVariants({ variant }), className),
+		...props
+	});
+}
+function AlertTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-title",
+		className: cn("font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-description",
+		className: cn("text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+		...props
+	});
+}
+function AlertAction({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-action",
+		className: cn("absolute top-1.5 right-2", className),
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/ui/aspect-ratio.d.ts

@@ -0,0 +1,6 @@
+//#region src/components/ui/aspect-ratio.d.ts
+declare function AspectRatio({ ratio, className, ...props }: React.ComponentProps<"div"> & {
+  ratio: number;
+}): import("react").JSX.Element;
+//#endregion
+export { AspectRatio };

package/dist/components/ui/aspect-ratio.js

@@ -0,0 +1,13 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+//#region src/components/ui/aspect-ratio.tsx
+function AspectRatio({ ratio, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "aspect-ratio",
+		style: { "--ratio": ratio },
+		className: cn("relative aspect-(--ratio)", className),
+		...props
+	});
+}
+//#endregion
+export { AspectRatio };

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

@@ -0,0 +1,25 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/attachment.d.ts
+declare const attachmentVariants: (props?: ({
+  size?: "default" | "sm" | "xs" | null | undefined;
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Attachment({ className, state, size, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentVariants> & {
+  state?: "idle" | "uploading" | "processing" | "error" | "done";
+}): React.JSX.Element;
+declare const attachmentMediaVariants: (props?: ({
+  variant?: "icon" | "image" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function AttachmentMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof attachmentMediaVariants>): React.JSX.Element;
+declare function AttachmentContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentTitle({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentDescription({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AttachmentActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AttachmentAction({ className, variant, size, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
+declare function AttachmentTrigger({ className, render, type, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function AttachmentGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

package/dist/components/ui/attachment.js

@@ -0,0 +1,103 @@
+import { Button } from "./button.js";
+import { jsx } from "react/jsx-runtime";
+import { cn } from "cn";
+import { cva } from "class-variance-authority";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/attachment.tsx
+const attachmentVariants = cva("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-lg border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/30 has-[[data-slot=attachment-action]:focus-visible]:ring-0 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "gap-2 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+		sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1",
+		xs: "gap-1.5 rounded-md text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+function Attachment({ className, state = "done", size = "default", orientation = "horizontal", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment",
+		"data-state": state,
+		"data-size": size,
+		"data-orientation": orientation,
+		className: cn(attachmentVariants({
+			size,
+			orientation
+		}), className),
+		...props
+	});
+}
+const attachmentMediaVariants = cva("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-md bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-sm group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive group-data-[orientation=vertical]/attachment:*:data-[slot=spinner]:size-6! [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function AttachmentMedia({ className, variant = "icon", ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-media",
+		"data-variant": variant,
+		className: cn(attachmentMediaVariants({ variant }), className),
+		...props
+	});
+}
+function AttachmentContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-content",
+		className: cn("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", className),
+		...props
+	});
+}
+function AttachmentTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-title",
+		className: cn("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:shimmer group-data-[state=uploading]/attachment:shimmer", className),
+		...props
+	});
+}
+function AttachmentDescription({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "attachment-description",
+		className: cn("mt-0.5 block min-w-0 truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", "max-w-full", className),
+		...props
+	});
+}
+function AttachmentActions({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-actions",
+		className: cn("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", className),
+		...props
+	});
+}
+function AttachmentAction({ className, variant, size = "icon-xs", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "attachment-action",
+		variant: variant ?? "ghost",
+		size,
+		className: cn(className),
+		...props
+	});
+}
+function AttachmentTrigger({ className, render, type, ...props }) {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: render ? type : type ?? "button",
+			className: cn("absolute inset-0 z-10 outline-none", className)
+		}, props),
+		render,
+		state: { slot: "attachment-trigger" }
+	});
+}
+function AttachmentGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "attachment-group",
+		className: cn("flex min-w-0 scroll-fade-x snap-x snap-mandatory scroll-px-1 scrollbar-none gap-3 overflow-x-auto overscroll-x-contain py-1 *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start", className),
+		...props
+	});
+}
+//#endregion
+export { Attachment, AttachmentAction, AttachmentActions, AttachmentContent, AttachmentDescription, AttachmentGroup, AttachmentMedia, AttachmentTitle, AttachmentTrigger };

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

@@ -0,0 +1,13 @@
+import * as React from "react";
+import { Avatar } from "@base-ui/react/avatar";
+//#region src/components/ui/avatar.d.ts
+declare function Avatar$1({ className, size, ...props }: Avatar.Root.Props & {
+  size?: "default" | "sm" | "lg";
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar.Image.Props): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar.Fallback.Props): React.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+//#endregion
+export { Avatar$1 as Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };