@siyahi/ui 0.0.0-stage → 0.1.0-next.3

package/dist/components/registry/sidebar-07/nav-projects.js

@@ -0,0 +1,43 @@
+"use client";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuAction, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../ui/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowRightIcon, FolderIcon, MoreHorizontalIcon, Trash2Icon } from "lucide-react";
+//#region src/components/registry/sidebar-07/nav-projects.tsx
+function NavProjects({ projects }) {
+	const { isMobile } = useSidebar();
+	return /* @__PURE__ */ jsxs(SidebarGroup, {
+		className: "group-data-[collapsible=icon]:hidden",
+		children: [/* @__PURE__ */ jsx(SidebarGroupLabel, { children: "Projects" }), /* @__PURE__ */ jsxs(SidebarMenu, { children: [projects.map((item) => /* @__PURE__ */ jsxs(SidebarMenuItem, { children: [/* @__PURE__ */ jsxs(SidebarMenuButton, {
+			render: /* @__PURE__ */ jsx("a", { href: item.url }),
+			children: [item.icon, /* @__PURE__ */ jsx("span", { children: item.name })]
+		}), /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(SidebarMenuAction, {
+				showOnHover: true,
+				className: "aria-expanded:bg-muted"
+			}),
+			children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "More"
+			})]
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			className: "w-fit",
+			side: isMobile ? "bottom" : "right",
+			align: isMobile ? "end" : "start",
+			children: [
+				/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(FolderIcon, {}), /* @__PURE__ */ jsx("span", { children: "View Project" })] }),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(ArrowRightIcon, {}), /* @__PURE__ */ jsx("span", { children: "Share Project" })] }),
+				/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, {
+					variant: "destructive",
+					children: [/* @__PURE__ */ jsx(Trash2Icon, {}), /* @__PURE__ */ jsx("span", { children: "Delete Project" })]
+				})
+			]
+		})] })] }, item.name)), /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(SidebarMenuButton, {
+			className: "text-sidebar-foreground/70",
+			children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, { className: "text-sidebar-foreground/70" }), /* @__PURE__ */ jsx("span", { children: "More" })]
+		}) })] })]
+	});
+}
+//#endregion
+export { NavProjects };

package/dist/components/registry/sidebar-07/nav-user.d.ts

@@ -0,0 +1,9 @@
+//#region src/components/registry/sidebar-07/nav-user.d.ts
+export declare function NavUser({ user }: {
+  user: {
+    name: string;
+    email: string;
+    avatar: string;
+  };
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/registry/sidebar-07/nav-user.js

@@ -0,0 +1,70 @@
+import { Avatar, AvatarFallback, AvatarImage } from "../../ui/avatar.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../ui/sidebar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { BadgeCheckIcon, BellIcon, ChevronsUpDownIcon, CreditCardIcon, LogOutIcon, SparklesIcon } from "lucide-react";
+//#region src/components/registry/sidebar-07/nav-user.tsx
+function NavUser({ user }) {
+	const { isMobile } = useSidebar();
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+			size: "lg",
+			className: "aria-expanded:bg-muted"
+		}),
+		children: [
+			/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
+				src: user.avatar,
+				alt: user.name
+			}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid flex-1 text-left text-sm leading-tight",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: user.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs",
+					children: user.email
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ml-auto size-4" })
+		]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "w-fit",
+		side: isMobile ? "bottom" : "right",
+		align: "end",
+		sideOffset: 4,
+		children: [
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "p-0 font-normal",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2 px-1 py-1.5 text-left text-sm",
+					children: [/* @__PURE__ */ jsxs(Avatar, { children: [/* @__PURE__ */ jsx(AvatarImage, {
+						src: user.avatar,
+						alt: user.name
+					}), /* @__PURE__ */ jsx(AvatarFallback, { children: "CN" })] }), /* @__PURE__ */ jsxs("div", {
+						className: "grid flex-1 text-left text-sm leading-tight",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: user.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "truncate text-xs",
+							children: user.email
+						})]
+					})]
+				})
+			}) }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(SparklesIcon, {}), "Upgrade to Pro"] }) }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+				/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(BadgeCheckIcon, {}), "Account"] }),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(CreditCardIcon, {}), "Billing"] }),
+				/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(BellIcon, {}), "Notifications"] })
+			] }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsxs(DropdownMenuItem, { children: [/* @__PURE__ */ jsx(LogOutIcon, {}), "Log out"] })
+		]
+	})] }) }) });
+}
+//#endregion
+export { NavUser };

package/dist/components/registry/sidebar-07/team-switcher.d.ts

@@ -0,0 +1,10 @@
+import * as React$1 from "react";
+//#region src/components/registry/sidebar-07/team-switcher.d.ts
+export declare function TeamSwitcher({ teams }: {
+  teams: {
+    name: string;
+    logo: React$1.ReactNode;
+    plan: string;
+  }[];
+}): React$1.JSX.Element | null;
+//#endregion

package/dist/components/registry/sidebar-07/team-switcher.js

@@ -0,0 +1,70 @@
+"use client";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger } from "../../ui/dropdown-menu.js";
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "../../ui/sidebar.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+//#region src/components/registry/sidebar-07/team-switcher.tsx
+function TeamSwitcher({ teams }) {
+	const { isMobile } = useSidebar();
+	const [activeTeam, setActiveTeam] = React$1.useState(teams[0]);
+	if (!activeTeam) return null;
+	return /* @__PURE__ */ jsx(SidebarMenu, { children: /* @__PURE__ */ jsx(SidebarMenuItem, { children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+		render: /* @__PURE__ */ jsx(SidebarMenuButton, {
+			size: "lg",
+			className: "data-open:bg-sidebar-accent data-open:text-sidebar-accent-foreground"
+		}),
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground",
+				children: activeTeam.logo
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "grid flex-1 text-left text-sm leading-tight",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "truncate font-medium",
+					children: activeTeam.name
+				}), /* @__PURE__ */ jsx("span", {
+					className: "truncate text-xs",
+					children: activeTeam.plan
+				})]
+			}),
+			/* @__PURE__ */ jsx(ChevronsUpDownIcon, { className: "ml-auto" })
+		]
+	}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+		className: "w-fit",
+		align: "start",
+		side: isMobile ? "bottom" : "right",
+		sideOffset: 4,
+		children: [
+			/* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsx(DropdownMenuLabel, {
+				className: "text-xs text-muted-foreground",
+				children: "Teams"
+			}), teams.map((team, index) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				onClick: () => setActiveTeam(team),
+				className: "gap-2 p-2",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "flex size-6 items-center justify-center rounded-md border",
+						children: team.logo
+					}),
+					team.name,
+					/* @__PURE__ */ jsxs(DropdownMenuShortcut, { children: ["⌘", index + 1] })
+				]
+			}, team.name))] }),
+			/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+			/* @__PURE__ */ jsx(DropdownMenuGroup, { children: /* @__PURE__ */ jsxs(DropdownMenuItem, {
+				className: "gap-2 p-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex size-6 items-center justify-center rounded-md border bg-transparent",
+					children: /* @__PURE__ */ jsx(PlusIcon, { className: "size-4" })
+				}), /* @__PURE__ */ jsx("div", {
+					className: "font-medium text-muted-foreground",
+					children: "Add team"
+				})]
+			}) })
+		]
+	})] }) }) });
+}
+//#endregion
+export { TeamSwitcher };

package/dist/components/siyahi/delta.d.ts

@@ -0,0 +1,10 @@
+//#region src/components/siyahi/delta.d.ts
+export interface DeltaProps {
+  /** The signed change. For `pct`, a fraction: 0.025 is 2.5%. */
+  value: number;
+  format?: "pct" | "money";
+  className?: string;
+}
+/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+export declare function Delta({ value, format, className }: DeltaProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/delta.js

@@ -0,0 +1,27 @@
+import { useFormat } from "../../lib/format.js";
+import { cn } from "cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/delta.tsx
+/** A signed figure: ▲ in --positive, ▼ in --negative, so colour is never the only cue. */
+function Delta({ value, format = "pct", className }) {
+	const f = useFormat();
+	const size = format === "money" ? f.money(Math.abs(value)) : f.pct(Math.abs(value));
+	const direction = value > 0 ? "up" : value < 0 ? "down" : null;
+	return /* @__PURE__ */ jsxs("span", {
+		"data-slot": "delta",
+		className: cn("inline-flex items-center gap-1 tabular-nums", direction === "up" && "text-positive", direction === "down" && "text-negative", direction === null && "text-muted-foreground", className),
+		children: [
+			direction && /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				children: direction === "up" ? "▲" : "▼"
+			}),
+			direction && /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: direction
+			}),
+			size
+		]
+	});
+}
+//#endregion
+export { Delta };

package/dist/components/siyahi/local-time.d.ts

@@ -0,0 +1,7 @@
+//#region src/components/siyahi/local-time.d.ts
+export interface LocalTimeProps {
+  value: Date | number | string;
+}
+/** A time in the configured zone (14:30 IST), with the viewer's own clock in a tooltip. */
+export declare function LocalTime({ value }: LocalTimeProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/local-time.js

@@ -0,0 +1,22 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip.js";
+import { useFormat } from "../../lib/format.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/siyahi/local-time.tsx
+/** A time in the configured zone (14:30 IST), with the viewer's own clock in a tooltip. */
+function LocalTime({ value }) {
+	const { time } = useFormat();
+	const date = new Date(value);
+	const viewer = new Intl.DateTimeFormat(void 0, {
+		dateStyle: "medium",
+		timeStyle: "short"
+	}).format(date);
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		render: /* @__PURE__ */ jsx("time", {
+			dateTime: date.toISOString(),
+			className: "tabular-nums"
+		}),
+		children: time(date)
+	}), /* @__PURE__ */ jsxs(TooltipContent, { children: ["Your time: ", viewer] })] });
+}
+//#endregion
+export { LocalTime };

package/dist/components/siyahi/price-chart.d.ts

@@ -0,0 +1,12 @@
+import { LineData, Time } from "lightweight-charts";
+//#region src/components/siyahi/price-chart.d.ts
+export interface PriceChartProps {
+  data: LineData<Time>[];
+  /** Fixed height in pixels. */
+  height: number;
+  /** TradingView's licence asks for a credit on the page; turn it off on the second chart. */
+  credit?: boolean;
+}
+/** A TradingView Lightweight Charts price chart in the theme's colours, redrawn when the scheme changes. */
+export declare function PriceChart({ data, height, credit }: PriceChartProps): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/price-chart.js

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AreaSeries, ColorType, LineStyle, createChart } from "lightweight-charts";
+//#region src/components/siyahi/price-chart.tsx
+function toRgba(color) {
+	const context = document.createElement("canvas").getContext("2d", { willReadFrequently: true });
+	if (!context) return null;
+	context.fillStyle = color;
+	context.fillRect(0, 0, 1, 1);
+	const [r = 0, g = 0, b = 0, a = 0] = context.getImageData(0, 0, 1, 1).data;
+	return [
+		r,
+		g,
+		b,
+		a / 255
+	];
+}
+/** A TradingView Lightweight Charts price chart in the theme's colours, redrawn when the scheme changes. */
+function PriceChart({ data, height, credit = true }) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const chart = createChart(element, {
+			autoSize: true,
+			layout: {
+				attributionLogo: credit,
+				colorParsers: [toRgba],
+				background: {
+					type: ColorType.Solid,
+					color: "transparent"
+				}
+			},
+			rightPriceScale: { borderVisible: false },
+			timeScale: { borderVisible: false }
+		});
+		const series = chart.addSeries(AreaSeries, { priceLineVisible: false });
+		series.setData(data);
+		chart.timeScale().fitContent();
+		const paint = () => {
+			const style = getComputedStyle(element);
+			const token = (name) => style.getPropertyValue(name).trim();
+			const line = token("--chart-1");
+			chart.applyOptions({
+				layout: {
+					textColor: token("--muted-foreground"),
+					fontFamily: style.fontFamily,
+					fontSize: parseFloat(style.fontSize)
+				},
+				grid: {
+					vertLines: { visible: false },
+					horzLines: {
+						color: token("--border"),
+						style: LineStyle.Dashed
+					}
+				}
+			});
+			series.applyOptions({
+				lineColor: line,
+				topColor: `color-mix(in oklch, ${line} 30%, transparent)`,
+				bottomColor: "transparent"
+			});
+		};
+		paint();
+		const scheme = matchMedia("(prefers-color-scheme: dark)");
+		scheme.addEventListener("change", paint);
+		return () => {
+			scheme.removeEventListener("change", paint);
+			chart.remove();
+		};
+	}, [data, credit]);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "price-chart",
+		className: "w-full font-mono text-xs",
+		style: { height }
+	});
+}
+//#endregion
+export { PriceChart };

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

@@ -0,0 +1,12 @@
+import { SiyahiLocale } from "../../lib/locale.js";
+import { ReactNode } from "react";
+//#region src/components/siyahi/siyahi-provider.d.ts
+export interface SiyahiProviderProps {
+  /** Any setting left out keeps its default: en-IN, INR, Asia/Kolkata. */
+  locale?: Partial<SiyahiLocale>;
+  children: ReactNode;
+}
+/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
+export declare function SiyahiProvider({ locale, children }: SiyahiProviderProps): import("react").JSX.Element;
+export declare function useLocale(): SiyahiLocale;
+//#endregion

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

@@ -0,0 +1,31 @@
+import { TooltipProvider } from "../ui/tooltip.js";
+import { defaultLocale } from "../../lib/locale.js";
+import { createContext, use, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/siyahi/siyahi-provider.tsx
+const LocaleContext = createContext(defaultLocale);
+/** Wrap the app once. Carries the locale and the tooltip provider shadcn asks for. */
+function SiyahiProvider({ locale, children }) {
+	const { numberLocale, currency, timeZone } = {
+		...defaultLocale,
+		...locale
+	};
+	const value = useMemo(() => ({
+		numberLocale,
+		currency,
+		timeZone
+	}), [
+		numberLocale,
+		currency,
+		timeZone
+	]);
+	return /* @__PURE__ */ jsx(LocaleContext, {
+		value,
+		children: /* @__PURE__ */ jsx(TooltipProvider, { children })
+	});
+}
+function useLocale() {
+	return use(LocaleContext);
+}
+//#endregion
+export { SiyahiProvider, useLocale };

package/dist/components/siyahi/treemap.d.ts

@@ -0,0 +1,14 @@
+//#region src/components/siyahi/treemap.d.ts
+export interface TreemapItem {
+  name: string;
+  /** Tile area, such as the holding's value. */
+  weight: number;
+  /** Signed change as a fraction; sets the heat. */
+  change: number;
+}
+/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
+export declare function Treemap({ items, height }: {
+  items: TreemapItem[];
+  height: number;
+}): import("react").JSX.Element;
+//#endregion

package/dist/components/siyahi/treemap.js

@@ -0,0 +1,58 @@
+import { useFormat } from "../../lib/format.js";
+import { useLayoutEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { hierarchy, treemap, treemapSquarify } from "d3-hierarchy";
+//#region src/components/siyahi/treemap.tsx
+function heat(change) {
+	if (change === 0) return "var(--muted)";
+	const mix = Math.min(5, Math.ceil(Math.abs(change) * 100)) * 12;
+	return `color-mix(in oklab, var(${change > 0 ? "--positive" : "--negative"}) ${mix}%, var(--card))`;
+}
+/** Holdings heat map: area by weight, colour by signed change, hand-drawn SVG. */
+function Treemap({ items, height }) {
+	const ref = useRef(null);
+	const [width, setWidth] = useState(0);
+	const { pct } = useFormat();
+	useLayoutEffect(() => {
+		const observer = new ResizeObserver(([entry]) => setWidth(entry?.contentRect.width ?? 0));
+		if (ref.current) observer.observe(ref.current);
+		return () => observer.disconnect();
+	}, []);
+	const root = hierarchy({ children: items }).sum((d) => d.weight ?? 0);
+	const leaves = treemap().size([width, height]).paddingInner(2).tile(treemapSquarify)(root).leaves();
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		"data-slot": "treemap",
+		style: { height },
+		children: /* @__PURE__ */ jsx("svg", {
+			width,
+			height,
+			role: "img",
+			"aria-label": "Treemap of holdings by weight and change",
+			className: "text-xs",
+			children: leaves.map(({ data, x0, y0, x1, y1 }) => /* @__PURE__ */ jsxs("g", {
+				transform: `translate(${x0},${y0})`,
+				children: [/* @__PURE__ */ jsx("rect", {
+					width: x1 - x0,
+					height: y1 - y0,
+					rx: 4,
+					style: { fill: heat(data.change ?? 0) }
+				}), x1 - x0 > 56 && y1 - y0 > 36 && /* @__PURE__ */ jsxs("text", {
+					x: 8,
+					y: 18,
+					className: "fill-foreground",
+					children: [/* @__PURE__ */ jsx("tspan", {
+						className: "font-medium",
+						children: data.name
+					}), /* @__PURE__ */ jsxs("tspan", {
+						x: 8,
+						dy: 16,
+						children: [(data.change ?? 0) > 0 ? "▲ " : (data.change ?? 0) < 0 ? "▼ " : "", pct(Math.abs(data.change ?? 0))]
+					})]
+				})]
+			}, data.name))
+		})
+	});
+}
+//#endregion
+export { Treemap };

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

@@ -0,0 +1,12 @@
+import * as React$1 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$1.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React$1.JSX.Element;
+declare function AlertTitle({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertDescription({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function AlertAction({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };

package/dist/components/ui/alert.js

@@ -0,0 +1,43 @@
+import "react";
+import { cva } from "class-variance-authority";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ui/alert.tsx
+const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-4 py-3 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.5 *:[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.5 right-3", className),
+		...props
+	});
+}
+//#endregion
+export { Alert, AlertAction, AlertDescription, AlertTitle };

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

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

package/dist/components/ui/avatar.js

@@ -0,0 +1,50 @@
+import "react";
+import { cn } from "cn";
+import { jsx } from "react/jsx-runtime";
+import { Avatar as Avatar$1 } from "@base-ui/react/avatar";
+//#region src/components/ui/avatar.tsx
+function Avatar({ className, size = "default", ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Root, {
+		"data-slot": "avatar",
+		"data-size": size,
+		className: cn("group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten", className),
+		...props
+	});
+}
+function AvatarImage({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Image, {
+		"data-slot": "avatar-image",
+		className: cn("aspect-square size-full rounded-full object-cover", className),
+		...props
+	});
+}
+function AvatarFallback({ className, ...props }) {
+	return /* @__PURE__ */ jsx(Avatar$1.Fallback, {
+		"data-slot": "avatar-fallback",
+		className: cn("flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs", className),
+		...props
+	});
+}
+function AvatarBadge({ className, ...props }) {
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "avatar-badge",
+		className: cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none", "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", className),
+		...props
+	});
+}
+function AvatarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group",
+		className: cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background", className),
+		...props
+	});
+}
+function AvatarGroupCount({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "avatar-group-count",
+		className: cn("relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-sm text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3", className),
+		...props
+	});
+}
+//#endregion
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage };

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

@@ -0,0 +1,9 @@
+import { VariantProps } from "class-variance-authority";
+import { useRender } from "@base-ui/react/use-render";
+//#region src/components/ui/badge.d.ts
+declare const badgeVariants: (props?: ({
+  variant?: "default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+//#endregion
+export { Badge, badgeVariants };