harebear-ui 0.0.0-stage → 0.1.0

package/dist/components/data/status-bars.d.ts

@@ -0,0 +1,17 @@
+import { StatusTone } from "../admin/status.js";
+import * as React from "react";
+export type StatusBarDatum = number | {
+  value: number;
+  tone?: StatusTone;
+  label?: string;
+};
+export interface StatusBarsProps extends Omit<React.ComponentProps<"div">, "children"> {
+  data: StatusBarDatum[];
+  /** Value mapped to full height. Defaults to the max in data. */
+  max?: number;
+  /** Tone for plain-number data. Default "info" (primary). */
+  tone?: StatusTone;
+}
+/** Mini bar history, e.g. last 20 pings or uptime checks. Size it with className (default 96x26). */
+declare function StatusBars({ data, max, tone, className, ...props }: StatusBarsProps): React.JSX.Element;
+export { StatusBars };

package/dist/components/data/status-bars.js

@@ -0,0 +1,37 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+// src/components/data/status-bars.tsx
+const toneBg = {
+	success: "var(--success)",
+	warning: "var(--warning)",
+	danger: "var(--destructive)",
+	info: "var(--primary)",
+	neutral: "var(--muted-foreground)"
+};
+/** Mini bar history, e.g. last 20 pings or uptime checks. Size it with className (default 96x26). */
+function StatusBars({ data, max, tone = "info", className, ...props }) {
+	const items = data.map((d) => typeof d === "number" ? {
+		value: d,
+		tone
+	} : {
+		tone,
+		...d
+	});
+	const top = max ?? Math.max(1, ...items.map((d) => d.value));
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "status-bars",
+		"aria-hidden": "true",
+		className: cn("flex h-6.5 w-24 shrink-0 items-end gap-0.5", className),
+		...props,
+		children: items.map((d, i) => /* @__PURE__ */ jsx("span", {
+			title: d.label,
+			className: "min-h-[3px] flex-1 rounded-[2px]",
+			style: {
+				height: `${Math.min(100, d.value / top * 100)}%`,
+				background: toneBg[d.tone ?? tone]
+			}
+		}, i))
+	});
+}
+export { StatusBars };

package/dist/components/data/trend-chart.d.ts

@@ -0,0 +1,31 @@
+import * as React from "react";
+export interface TrendSeries {
+  /** Key in each data row. */
+  key: string;
+  label: React.ReactNode;
+  /** CSS color. Defaults to chart-1..5 in order. */
+  color?: string;
+  /** Dashed line, no fill. Use for "previous period". */
+  dashed?: boolean;
+}
+export interface TrendChartProps extends Omit<React.ComponentProps<"div">, "children"> {
+  data: Array<Record<string, unknown>>;
+  /** Key of the x-axis value in each row. */
+  xKey: string;
+  series: TrendSeries[];
+  /** Plot height in px. Default 240. */
+  height?: number;
+  /** Format y-axis ticks and tooltip values. */
+  valueFormatter?: (value: number) => string;
+  /** Format x-axis ticks. */
+  xFormatter?: (value: unknown) => string;
+  /** Hide the y-axis labels. */
+  hideYAxis?: boolean;
+}
+/** Smoothed area/line chart with grid, axis labels and hover tooltip. Recharts under the hood. */
+declare function TrendChart({ data, xKey, series, height, valueFormatter, xFormatter, hideYAxis, className, style, ...props }: TrendChartProps): React.JSX.Element;
+/** Inline legend matching TrendChart series styling (solid vs dashed swatches). */
+declare function TrendLegend({ series, className, ...props }: Omit<React.ComponentProps<"div">, "children"> & {
+  series: TrendSeries[];
+}): React.JSX.Element;
+export { TrendChart, TrendLegend };

package/dist/components/data/trend-chart.js

@@ -0,0 +1,136 @@
+"use client";
+import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../ui/chart.js";
+import { cn } from "../../lib/utils.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+// src/components/data/trend-chart.tsx
+const palette = [
+	"var(--chart-1)",
+	"var(--chart-2)",
+	"var(--chart-3)",
+	"var(--chart-4)",
+	"var(--chart-5)"
+];
+/** Smoothed area/line chart with grid, axis labels and hover tooltip. Recharts under the hood. */
+function TrendChart({ data, xKey, series, height = 240, valueFormatter, xFormatter, hideYAxis, className, style, ...props }) {
+	const config = React.useMemo(() => Object.fromEntries(series.map((s, i) => [s.key, {
+		label: s.label,
+		color: s.color ?? palette[i % palette.length]
+	}])), [series]);
+	const ordered = React.useMemo(() => [...series].sort((a, b) => Number(!!b.dashed) - Number(!!a.dashed)), [series]);
+	return /* @__PURE__ */ jsx(ChartContainer, {
+		"data-slot": "trend-chart",
+		config,
+		className: cn("aspect-auto w-full", className),
+		style: {
+			height,
+			...style
+		},
+		...props,
+		children: /* @__PURE__ */ jsxs(AreaChart, {
+			data,
+			margin: {
+				top: 8,
+				right: 4,
+				bottom: 0,
+				left: 0
+			},
+			children: [
+				/* @__PURE__ */ jsx("defs", { children: series.map((s) => /* @__PURE__ */ jsxs("linearGradient", {
+					id: `hb-fill-${s.key}`,
+					x1: "0",
+					y1: "0",
+					x2: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: `var(--color-${s.key})`,
+						stopOpacity: .14
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: `var(--color-${s.key})`,
+						stopOpacity: .02
+					})]
+				}, s.key)) }),
+				/* @__PURE__ */ jsx(CartesianGrid, {
+					vertical: false,
+					stroke: "var(--chart-grid)"
+				}),
+				/* @__PURE__ */ jsx(XAxis, {
+					dataKey: xKey,
+					tickLine: false,
+					axisLine: { stroke: "var(--border)" },
+					tickMargin: 10,
+					minTickGap: 32,
+					tickFormatter: xFormatter,
+					fontSize: 11
+				}),
+				/* @__PURE__ */ jsx(YAxis, {
+					hide: hideYAxis,
+					tickLine: false,
+					axisLine: false,
+					width: 40,
+					tickMargin: 6,
+					tickFormatter: valueFormatter,
+					fontSize: 11
+				}),
+				/* @__PURE__ */ jsx(ChartTooltip, {
+					cursor: { stroke: "var(--border)" },
+					content: /* @__PURE__ */ jsx(ChartTooltipContent, {
+						indicator: "dot",
+						formatter: valueFormatter ? (value, name) => /* @__PURE__ */ jsxs("div", {
+							className: "flex w-full items-center justify-between gap-4",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground",
+								children: config[String(name)]?.label ?? name
+							}), /* @__PURE__ */ jsx("span", {
+								className: "font-semibold tabular-nums",
+								children: valueFormatter(Number(value))
+							})]
+						}) : void 0
+					})
+				}),
+				ordered.map((s) => /* @__PURE__ */ jsx(Area, {
+					dataKey: s.key,
+					type: "monotone",
+					stroke: `var(--color-${s.key})`,
+					strokeWidth: 2,
+					strokeDasharray: s.dashed ? "5 5" : void 0,
+					fill: s.dashed ? "none" : `url(#hb-fill-${s.key})`,
+					dot: false,
+					activeDot: {
+						r: 5,
+						strokeWidth: 2,
+						stroke: "var(--card)"
+					},
+					isAnimationActive: false
+				}, s.key))
+			]
+		})
+	});
+}
+/** Inline legend matching TrendChart series styling (solid vs dashed swatches). */
+function TrendLegend({ series, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "trend-legend",
+		className: cn("flex flex-wrap items-center gap-4.5 text-[13px]", className),
+		...props,
+		children: series.map((s, i) => {
+			const color = s.color ?? palette[i % palette.length];
+			return /* @__PURE__ */ jsxs("span", {
+				className: "inline-flex items-center gap-2",
+				children: [/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "w-4",
+					style: s.dashed ? { borderTop: `2px dashed ${color}` } : {
+						height: 3,
+						borderRadius: 3,
+						background: color
+					}
+				}), s.label]
+			}, s.key);
+		})
+	});
+}
+export { TrendChart, TrendLegend };

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

@@ -0,0 +1,42 @@
+import * as React from "react";
+export type ThemeMode = "light" | "dark" | "system";
+export type ResolvedThemeMode = "light" | "dark";
+export interface ThemeProviderProps {
+  children?: React.ReactNode;
+  /** Initial mode when nothing is stored. Default "system". */
+  defaultMode?: ThemeMode;
+  /** Brand/accent color (any CSS color). Drives --brand, which primary derives from. */
+  accent?: string;
+  /** Base corner radius in px. Default 14. */
+  radius?: number;
+  /** Font family name for body text, e.g. "Inter". Default Geist (bundled). */
+  font?: string;
+  /** localStorage key for the chosen mode. Pass null to disable persistence. */
+  storageKey?: string | null;
+}
+export interface ThemeContextValue {
+  mode: ThemeMode;
+  resolvedMode: ResolvedThemeMode;
+  setMode: (mode: ThemeMode) => void;
+  toggleMode: () => void;
+  accent: string | undefined;
+  setAccent: (accent: string | undefined) => void;
+  radius: number | undefined;
+  setRadius: (radius: number | undefined) => void;
+}
+/**
+ * Applies light/dark mode (the `.dark` class on <html>), accent, radius and
+ * font to the document. Wrap your app once, near the root.
+ */
+declare function ThemeProvider({ children, defaultMode, accent: accentProp, radius: radiusProp, font, storageKey }: ThemeProviderProps): React.JSX.Element;
+/** Read and change the current theme. Safe to call outside a provider (returns light). */
+declare function useTheme(): ThemeContextValue;
+/**
+ * Inline script for SSR apps that sets `.dark` before first paint, avoiding a
+ * flash of the wrong theme. Render it inside <head>.
+ */
+declare function ThemeScript({ storageKey, defaultMode }: {
+  storageKey?: string;
+  defaultMode?: ThemeMode;
+}): React.JSX.Element;
+export { ThemeProvider, ThemeScript, useTheme };

package/dist/components/theme/theme-provider.js

@@ -0,0 +1,110 @@
+"use client";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+// src/components/theme/theme-provider.tsx
+const ThemeContext = React.createContext({
+	mode: "light",
+	resolvedMode: "light",
+	setMode: () => {},
+	toggleMode: () => {},
+	accent: void 0,
+	setAccent: () => {},
+	radius: void 0,
+	setRadius: () => {}
+});
+const DEFAULT_STORAGE_KEY = "harebear-theme";
+function readStored(key) {
+	if (!key || typeof window === "undefined") return null;
+	try {
+		const v = window.localStorage.getItem(key);
+		return v === "light" || v === "dark" || v === "system" ? v : null;
+	} catch {
+		return null;
+	}
+}
+function systemPrefersDark() {
+	return typeof window !== "undefined" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+}
+/**
+* Applies light/dark mode (the `.dark` class on <html>), accent, radius and
+* font to the document. Wrap your app once, near the root.
+*/
+function ThemeProvider({ children, defaultMode = "system", accent: accentProp, radius: radiusProp, font, storageKey = DEFAULT_STORAGE_KEY }) {
+	const [mode, setModeState] = React.useState(() => readStored(storageKey) ?? defaultMode);
+	const [systemDark, setSystemDark] = React.useState(systemPrefersDark);
+	const [accent, setAccent] = React.useState(accentProp);
+	const [radius, setRadius] = React.useState(radiusProp);
+	React.useEffect(() => setAccent(accentProp), [accentProp]);
+	React.useEffect(() => setRadius(radiusProp), [radiusProp]);
+	React.useEffect(() => {
+		const mq = window.matchMedia?.("(prefers-color-scheme: dark)");
+		if (!mq) return;
+		const onChange = () => setSystemDark(mq.matches);
+		mq.addEventListener("change", onChange);
+		return () => mq.removeEventListener("change", onChange);
+	}, []);
+	const resolvedMode = mode === "system" ? systemDark ? "dark" : "light" : mode;
+	React.useEffect(() => {
+		const root = document.documentElement;
+		if (root.classList.contains("dark") === (resolvedMode === "dark")) return;
+		const style = document.createElement("style");
+		style.textContent = "*,*::before,*::after{transition:none!important}";
+		document.head.appendChild(style);
+		root.classList.toggle("dark", resolvedMode === "dark");
+		window.getComputedStyle(document.body).opacity;
+		requestAnimationFrame(() => style.remove());
+	}, [resolvedMode]);
+	React.useEffect(() => {
+		const s = document.documentElement.style;
+		if (accent) s.setProperty("--brand", accent);
+		else s.removeProperty("--brand");
+		if (radius !== void 0) s.setProperty("--radius", `${radius / 16}rem`);
+		else s.removeProperty("--radius");
+		if (font) s.setProperty("--hb-font-sans", `"${font}", ui-sans-serif, system-ui, sans-serif`);
+		else s.removeProperty("--hb-font-sans");
+	}, [
+		accent,
+		radius,
+		font
+	]);
+	const setMode = React.useCallback((next) => {
+		setModeState(next);
+		if (!storageKey) return;
+		try {
+			window.localStorage.setItem(storageKey, next);
+		} catch {}
+	}, [storageKey]);
+	const value = React.useMemo(() => ({
+		mode,
+		resolvedMode,
+		setMode,
+		toggleMode: () => setMode(resolvedMode === "dark" ? "light" : "dark"),
+		accent,
+		setAccent,
+		radius,
+		setRadius
+	}), [
+		mode,
+		resolvedMode,
+		setMode,
+		accent,
+		radius
+	]);
+	return /* @__PURE__ */ jsx(ThemeContext, {
+		value,
+		children
+	});
+}
+/** Read and change the current theme. Safe to call outside a provider (returns light). */
+function useTheme() {
+	return React.useContext(ThemeContext);
+}
+/**
+* Inline script for SSR apps that sets `.dark` before first paint, avoiding a
+* flash of the wrong theme. Render it inside <head>.
+*/
+function ThemeScript({ storageKey = DEFAULT_STORAGE_KEY, defaultMode = "system" }) {
+	const code = `(function(){try{var m=localStorage.getItem(${JSON.stringify(storageKey)})||${JSON.stringify(defaultMode)};var d=m==="dark"||(m==="system"&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.toggle("dark",d)}catch(e){}})()`;
+	return /* @__PURE__ */ jsx("script", { dangerouslySetInnerHTML: { __html: code } });
+}
+export { ThemeProvider, ThemeScript, useTheme };

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

@@ -0,0 +1,5 @@
+import { Button } from "../ui/button.js";
+import * as React from "react";
+/** Icon button that flips between light and dark mode. */
+declare function ThemeToggle(props: Omit<React.ComponentProps<typeof Button>, "onClick">): React.JSX.Element;
+export { ThemeToggle };

package/dist/components/theme/theme-toggle.js

@@ -0,0 +1,20 @@
+"use client";
+import { Button } from "../ui/button.js";
+import { useTheme } from "./theme-provider.js";
+import { jsx } from "react/jsx-runtime";
+import { MoonIcon, SunIcon } from "lucide-react";
+// src/components/theme/theme-toggle.tsx
+/** Icon button that flips between light and dark mode. */
+function ThemeToggle(props) {
+	const { resolvedMode, toggleMode } = useTheme();
+	const dark = resolvedMode === "dark";
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "ghost",
+		size: "icon",
+		"aria-label": dark ? "Switch to light mode" : "Switch to dark mode",
+		onClick: toggleMode,
+		...props,
+		children: dark ? /* @__PURE__ */ jsx(SunIcon, {}) : /* @__PURE__ */ jsx(MoonIcon, {})
+	});
+}
+export { ThemeToggle };

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

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { Accordion as Accordion$1 } from "radix-ui";
+declare function Accordion({ className, ...props }: React.ComponentProps<typeof Accordion$1.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof Accordion$1.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Content>): React.JSX.Element;
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/components/ui/accordion.js

@@ -0,0 +1,53 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Accordion as Accordion$1 } from "radix-ui";
+// src/components/ui/accordion.tsx
+function Accordion({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Root, {
+		"data-slot": "accordion",
+		className: cn("flex w-full flex-col", className),
+		...props
+	});
+}
+function AccordionItem({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Item, {
+		"data-slot": "accordion-item",
+		className: cn("not-last:border-b", className),
+		...props
+	});
+}
+function AccordionTrigger({ className, children, ...props }) {
+	return /* @__PURE__ */ jsx(Accordion$1.Header, {
+		className: "flex",
+		children: /* @__PURE__ */ jsxs(Accordion$1.Trigger, {
+			"data-slot": "accordion-trigger",
+			className: cn("group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none 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$1.Content, {
+		"data-slot": "accordion-content",
+		className: "overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up",
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cn("h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4", className),
+			children
+		})
+	});
+}
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

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

@@ -0,0 +1,18 @@
+import { Button } from "./button.js";
+import * as React from "react";
+import { AlertDialog as AlertDialog$1 } from "radix-ui";
+declare function AlertDialog({ ...props }: React.ComponentProps<typeof AlertDialog$1.Root>): React.JSX.Element;
+declare function AlertDialogTrigger({ ...props }: React.ComponentProps<typeof AlertDialog$1.Trigger>): React.JSX.Element;
+declare function AlertDialogPortal({ ...props }: React.ComponentProps<typeof AlertDialog$1.Portal>): React.JSX.Element;
+declare function AlertDialogOverlay({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Overlay>): React.JSX.Element;
+declare function AlertDialogContent({ className, size, ...props }: React.ComponentProps<typeof AlertDialog$1.Content> & {
+  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$1.Title>): React.JSX.Element;
+declare function AlertDialogDescription({ className, ...props }: React.ComponentProps<typeof AlertDialog$1.Description>): React.JSX.Element;
+declare function AlertDialogAction({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialog$1.Action> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+declare function AlertDialogCancel({ className, variant, size, ...props }: React.ComponentProps<typeof AlertDialog$1.Cancel> & Pick<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,99 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AlertDialog as AlertDialog$1 } from "radix-ui";
+// src/components/ui/alert-dialog.tsx
+function AlertDialog({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Root, {
+		"data-slot": "alert-dialog",
+		...props
+	});
+}
+function AlertDialogTrigger({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Trigger, {
+		"data-slot": "alert-dialog-trigger",
+		...props
+	});
+}
+function AlertDialogPortal({ ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Portal, {
+		"data-slot": "alert-dialog-portal",
+		...props
+	});
+}
+function AlertDialogOverlay({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Overlay, {
+		"data-slot": "alert-dialog-overlay",
+		className: cn("fixed inset-0 z-50 bg-black/10 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$1.Content, {
+		"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-4 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-xs 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.5 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("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 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-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6", className),
+		...props
+	});
+}
+function AlertDialogTitle({ className, ...props }) {
+	return /* @__PURE__ */ jsx(AlertDialog$1.Title, {
+		"data-slot": "alert-dialog-title",
+		className: cn("text-base 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$1.Description, {
+		"data-slot": "alert-dialog-description",
+		className: cn("text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className),
+		...props
+	});
+}
+function AlertDialogAction({ className, variant = "default", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Action, {
+			"data-slot": "alert-dialog-action",
+			className: cn(className),
+			...props
+		})
+	});
+}
+function AlertDialogCancel({ className, variant = "outline", size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		variant,
+		size,
+		asChild: true,
+		children: /* @__PURE__ */ jsx(AlertDialog$1.Cancel, {
+			"data-slot": "alert-dialog-cancel",
+			className: cn(className),
+			...props
+		})
+	});
+}
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogMedia, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger };

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { VariantProps } from "class-variance-authority";
+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;
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/ui/alert.js

@@ -0,0 +1,42 @@
+"use client";
+import { cn } from "../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+// src/components/ui/alert.tsx
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
+	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-sm 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-2 right-2", className),
+		...props
+	});
+}
+export { Alert, AlertAction, AlertDescription, AlertTitle };

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

@@ -0,0 +1,3 @@
+import { AspectRatio as AspectRatio$1 } from "radix-ui";
+declare function AspectRatio({ ...props }: React.ComponentProps<typeof AspectRatio$1.Root>): import("react").JSX.Element;
+export { AspectRatio };

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { AspectRatio as AspectRatio$1 } from "radix-ui";
+// src/components/ui/aspect-ratio.tsx
+function AspectRatio({ ...props }) {
+	return /* @__PURE__ */ jsx(AspectRatio$1.Root, {
+		"data-slot": "aspect-ratio",
+		...props
+	});
+}
+export { AspectRatio };