@alpic-ai/ui 0.0.0-dev.g21697c4 → 0.0.0-dev.g21e767c

package/dist/components/chart-legend.mjs

@@ -0,0 +1,26 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-legend.tsx
+function Swatch({ color, dashed }) {
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": true,
+		className: "size-2 shrink-0 rounded-full",
+		style: dashed ? { border: `1.5px solid ${color}` } : { background: color }
+	});
+}
+function ChartLegend({ items, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-wrap gap-x-4 gap-y-1.5", className),
+		...props,
+		children: items.map((item) => /* @__PURE__ */ jsxs("span", {
+			className: "inline-flex items-center gap-1.5 font-mono text-[10px] text-muted-foreground uppercase tracking-[0.12em]",
+			children: [/* @__PURE__ */ jsx(Swatch, {
+				color: item.color,
+				dashed: item.dashed
+			}), item.name]
+		}, item.name))
+	});
+}
+//#endregion
+export { ChartLegend };

package/dist/components/chart-tooltip.d.mts

@@ -0,0 +1,33 @@
+//#region src/components/chart-tooltip.d.ts
+interface ChartTooltipItem {
+  name?: string | number;
+  value?: number | string;
+  color?: string;
+  stroke?: string;
+  fill?: string;
+  dataKey?: string | number;
+}
+interface ChartTooltipContentProps {
+  active?: boolean;
+  payload?: ChartTooltipItem[];
+  label?: string | number;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  hideLabel?: boolean;
+  showTotal?: boolean;
+  totalLabel?: string;
+  className?: string;
+}
+declare function ChartTooltipContent({
+  active,
+  payload,
+  label,
+  valueFormatter,
+  labelFormatter,
+  hideLabel,
+  showTotal,
+  totalLabel,
+  className
+}: ChartTooltipContentProps): import("react").JSX.Element | null;
+//#endregion
+export { ChartTooltipContent, ChartTooltipContentProps, ChartTooltipItem };

package/dist/components/chart-tooltip.mjs

@@ -0,0 +1,52 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/chart-tooltip.tsx
+function ChartTooltipContent({ active, payload, label, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, hideLabel, showTotal, totalLabel = "Total", className }) {
+	const { theme } = useChartContext();
+	if (!active || !payload?.length) return null;
+	const total = payload.reduce((sum, item) => sum + (typeof item.value === "number" ? item.value : Number(item.value ?? 0)), 0);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("min-w-[130px] rounded-lg border px-3 py-2.5 shadow-lg", "border-border bg-popover text-popover-foreground", className),
+		children: [!hideLabel && label !== void 0 && /* @__PURE__ */ jsx("p", {
+			className: "font-mono text-[10px] uppercase tracking-wider text-quaternary-foreground mb-1.5",
+			children: labelFormatter ? labelFormatter(label) : label
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col gap-1",
+			children: [payload.map((item, index) => {
+				const swatch = [
+					item.color,
+					item.stroke,
+					item.fill
+				].find((candidate) => typeof candidate === "string" && candidate.length > 0 && !candidate.startsWith("url(")) ?? theme.mutedForeground;
+				const numeric = typeof item.value === "number" ? item.value : Number(item.value ?? 0);
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center justify-between gap-4 text-text-xs",
+					children: [/* @__PURE__ */ jsxs("span", {
+						className: "inline-flex items-center gap-2 text-muted-foreground",
+						children: [/* @__PURE__ */ jsx("span", {
+							"aria-hidden": true,
+							className: "size-2 shrink-0 rounded-[2px]",
+							style: { background: swatch }
+						}), item.name]
+					}), /* @__PURE__ */ jsx("span", {
+						className: "font-mono font-semibold tabular-nums text-foreground",
+						children: valueFormatter(numeric)
+					})]
+				}, `${item.dataKey ?? index}`);
+			}), showTotal && /* @__PURE__ */ jsxs("div", {
+				className: "mt-1 flex items-center justify-between gap-4 border-border border-t pt-1.5 text-text-xs",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "font-mono text-quaternary-foreground uppercase tracking-wider text-[10px]",
+					children: totalLabel
+				}), /* @__PURE__ */ jsx("span", {
+					className: "font-mono font-semibold tabular-nums text-foreground",
+					children: valueFormatter(total)
+				})]
+			})]
+		})]
+	});
+}
+//#endregion
+export { ChartTooltipContent };

package/dist/components/checkbox.d.mts

@@ -1,11 +1,10 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 
 //#region src/components/checkbox.d.ts
 declare function Checkbox({
   className,
   ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof CheckboxPrimitive.Root>): React$1.JSX.Element;
 //#endregion
 export { Checkbox };

package/dist/components/collapsible.d.mts

@@ -1,16 +1,15 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
 
 //#region src/components/collapsible.d.ts
 declare function Collapsible({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof CollapsiblePrimitive.Root>): React$1.JSX.Element;
 declare function CollapsibleTrigger({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>): React$1.JSX.Element;
 declare function CollapsibleContent({
   ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>): React$1.JSX.Element;
 //#endregion
 export { Collapsible, CollapsibleContent, CollapsibleTrigger };

package/dist/components/combobox.d.mts

@@ -1,6 +1,5 @@
 import { PopoverContent } from "./popover.mjs";
 import { selectTriggerVariants } from "./select-trigger-variants.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
 import { ReactNode } from "react";
 import { Command } from "cmdk";
@@ -27,7 +26,7 @@ interface ComboboxMultipleProps extends ComboboxBaseProps {
   onValueChange?: (value: string[]) => void;
 }
 type ComboboxProps = ComboboxSingleProps | ComboboxMultipleProps;
-declare function Combobox(props: ComboboxProps): _$react_jsx_runtime0.JSX.Element;
+declare function Combobox(props: ComboboxProps): import("react").JSX.Element;
 interface ComboboxTriggerProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">, VariantProps<typeof selectTriggerVariants> {
   placeholder?: string;
 }
@@ -37,7 +36,7 @@ declare function ComboboxTrigger({
   placeholder,
   children,
   ...props
-}: ComboboxTriggerProps): _$react_jsx_runtime0.JSX.Element;
+}: ComboboxTriggerProps): import("react").JSX.Element;
 interface ComboboxContentProps extends React.ComponentProps<typeof PopoverContent> {
   className?: string;
   children?: ReactNode;
@@ -48,27 +47,27 @@ declare function ComboboxContent({
   children,
   filter,
   ...props
-}: ComboboxContentProps): _$react_jsx_runtime0.JSX.Element;
+}: ComboboxContentProps): import("react").JSX.Element;
 declare function ComboboxSearch({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Input>): _$react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Command.Input>): import("react").JSX.Element;
 declare function ComboboxList({
   className,
   ...props
-}: React.ComponentProps<typeof Command.List>): _$react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Command.List>): import("react").JSX.Element;
 declare function ComboboxEmpty({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Empty>): _$react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Command.Empty>): import("react").JSX.Element;
 declare function ComboboxGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Group>): _$react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Command.Group>): import("react").JSX.Element;
 declare function ComboboxSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command.Separator>): _$react_jsx_runtime0.JSX.Element;
+}: React.ComponentProps<typeof Command.Separator>): import("react").JSX.Element;
 interface ComboboxItemProps extends Omit<React.ComponentProps<typeof Command.Item>, "onSelect"> {
   /** The value stored when this item is selected */
   itemValue: string;
@@ -78,11 +77,11 @@ declare function ComboboxItem({
   children,
   itemValue,
   ...props
-}: ComboboxItemProps): _$react_jsx_runtime0.JSX.Element;
+}: ComboboxItemProps): import("react").JSX.Element;
 declare function ComboboxItemText({
   className,
   children,
   ...props
-}: React.HTMLAttributes<HTMLSpanElement>): _$react_jsx_runtime0.JSX.Element;
+}: React.HTMLAttributes<HTMLSpanElement>): import("react").JSX.Element;
 //#endregion
 export { Combobox, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxItemText, ComboboxList, ComboboxSearch, ComboboxSeparator, ComboboxTrigger };

package/dist/components/command.d.mts

@@ -1,38 +1,37 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 import { Command as Command$1 } from "cmdk";
 
 //#region src/components/command.d.ts
 declare function Command({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1>): React$1.JSX.Element;
 declare function CommandInput({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Input>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.Input>): React$1.JSX.Element;
 declare function CommandList({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.List>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.List>): React$1.JSX.Element;
 declare function CommandEmpty({
   ...props
-}: React.ComponentProps<typeof Command$1.Empty>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.Empty>): React$1.JSX.Element;
 declare function CommandGroup({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Group>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.Group>): React$1.JSX.Element;
 declare function CommandSeparator({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Separator>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.Separator>): React$1.JSX.Element;
 declare function CommandItem({
   className,
   ...props
-}: React.ComponentProps<typeof Command$1.Item>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof Command$1.Item>): React$1.JSX.Element;
 declare function CommandShortcut({
   className,
   ...props
-}: React.ComponentProps<"span">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"span">): React$1.JSX.Element;
 //#endregion
 export { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };

package/dist/components/copyable.d.mts

@@ -1,4 +1,3 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { ReactNode } from "react";
 
 //#region src/components/copyable.d.ts
@@ -11,12 +10,12 @@ declare function Copyable({
   content,
   children,
   className
-}: CopyableProps): _$react_jsx_runtime0.JSX.Element;
+}: CopyableProps): import("react").JSX.Element;
 interface CopyableUrlProps {
   url: URL;
 }
 declare function CopyableUrl({
   url
-}: CopyableUrlProps): _$react_jsx_runtime0.JSX.Element;
+}: CopyableUrlProps): import("react").JSX.Element;
 //#endregion
 export { Copyable, type CopyableProps, CopyableUrl, type CopyableUrlProps };

package/dist/components/description-list.d.mts

@@ -1,22 +1,21 @@
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
-import * as React from "react";
+import * as React$1 from "react";
 
 //#region src/components/description-list.d.ts
 declare function DescriptionList({
   className,
   ...props
-}: React.ComponentProps<"dl">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"dl">): React$1.JSX.Element;
 declare function DescriptionItem({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function DescriptionTitle({
   className,
   ...props
-}: React.ComponentProps<"dt">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"dt">): React$1.JSX.Element;
 declare function DescriptionValue({
   className,
   ...props
-}: React.ComponentProps<"dd">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"dd">): React$1.JSX.Element;
 //#endregion
 export { DescriptionItem, DescriptionList, DescriptionTitle, DescriptionValue };

package/dist/components/dialog.d.mts

@@ -1,28 +1,26 @@
 import { ButtonProps } from "./button.mjs";
-import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import { VariantProps } from "class-variance-authority";
-import * as React from "react";
+import * as React$1 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import * as _$class_variance_authority_types0 from "class-variance-authority/types";
 
 //#region src/components/dialog.d.ts
 declare function Dialog({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Root>): React$1.JSX.Element;
 declare function DialogTrigger({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Trigger>): React$1.JSX.Element;
 declare function DialogPortal({
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Portal>): React$1.JSX.Element;
 declare function DialogOverlay({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Overlay>): React$1.JSX.Element;
 declare const dialogContentVariants: (props?: ({
   size?: "sm" | "lg" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-interface DialogContentProps extends React.ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DialogContentProps extends React$1.ComponentProps<typeof DialogPrimitive.Content>, VariantProps<typeof dialogContentVariants> {
   showCloseButton?: boolean;
 }
 declare function DialogContent({
@@ -31,31 +29,31 @@ declare function DialogContent({
   size,
   showCloseButton,
   ...props
-}: DialogContentProps): _$react_jsx_runtime0.JSX.Element;
+}: DialogContentProps): React$1.JSX.Element;
 declare function DialogHeader({
   className,
   ...props
-}: React.ComponentProps<"div">): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare const dialogFooterVariants: (props?: ({
   layout?: "horizontal" | "vertical" | null | undefined;
-} & _$class_variance_authority_types0.ClassProp) | undefined) => string;
-interface DialogFooterProps extends React.ComponentProps<"div">, VariantProps<typeof dialogFooterVariants> {}
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface DialogFooterProps extends React$1.ComponentProps<"div">, VariantProps<typeof dialogFooterVariants> {}
 declare function DialogFooter({
   className,
   layout,
   ...props
-}: DialogFooterProps): _$react_jsx_runtime0.JSX.Element;
+}: DialogFooterProps): React$1.JSX.Element;
 declare function DialogTitle({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Title>): React$1.JSX.Element;
 declare function DialogClose({
   children,
   ...props
-}: Omit<ButtonProps, "variant" | "asChild">): _$react_jsx_runtime0.JSX.Element;
+}: Omit<ButtonProps, "variant" | "asChild">): React$1.JSX.Element;
 declare function DialogDescription({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Description>): _$react_jsx_runtime0.JSX.Element;
+}: React$1.ComponentProps<typeof DialogPrimitive.Description>): React$1.JSX.Element;
 //#endregion
 export { Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, DialogFooter, type DialogFooterProps, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, dialogContentVariants, dialogFooterVariants };

package/dist/components/donut-chart.d.mts

@@ -0,0 +1,46 @@
+import { ChartPaletteName } from "../lib/chart-palette.mjs";
+import * as React$1 from "react";
+
+//#region src/components/donut-chart.d.ts
+declare const GEOMETRY: {
+  readonly donut: {
+    readonly inner: "64%";
+    readonly outer: "92%";
+  };
+  readonly ring: {
+    readonly inner: "78%";
+    readonly outer: "92%";
+  };
+};
+interface DonutChartProps {
+  data: ReadonlyArray<Record<string, string | number | null | undefined>>;
+  index: string;
+  dataKey?: string;
+  variant?: keyof typeof GEOMETRY;
+  legend?: boolean;
+  paddingAngle?: number;
+  height?: number;
+  palette?: ChartPaletteName;
+  centerLabel?: string;
+  loading?: boolean;
+  valueFormatter?: (value: number) => string;
+  labelFormatter?: (label: string | number) => string;
+  className?: string;
+}
+declare function DonutChart({
+  data,
+  index,
+  dataKey,
+  variant,
+  legend,
+  paddingAngle,
+  height,
+  palette,
+  centerLabel,
+  loading,
+  valueFormatter,
+  labelFormatter,
+  className
+}: DonutChartProps): React$1.JSX.Element;
+//#endregion
+export { DonutChart, DonutChartProps };

package/dist/components/donut-chart.mjs

@@ -0,0 +1,185 @@
+"use client";
+import { cn } from "../lib/cn.mjs";
+import { useReducedMotion } from "../hooks/use-reduced-motion.mjs";
+import { paletteColor } from "../lib/chart-palette.mjs";
+import { formatShare } from "../lib/chart.mjs";
+import { useChartContext } from "./chart-container.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React$1 from "react";
+import { Cell, Pie, PieChart, ResponsiveContainer } from "recharts";
+//#region src/components/donut-chart.tsx
+const GEOMETRY = {
+	donut: {
+		inner: "64%",
+		outer: "92%"
+	},
+	ring: {
+		inner: "78%",
+		outer: "92%"
+	}
+};
+function DonutChart({ data, index, dataKey = "value", variant = "donut", legend = false, paddingAngle = 1, height = 220, palette, centerLabel = "total", loading = false, valueFormatter = (value) => value.toLocaleString("en-US"), labelFormatter, className }) {
+	const { palette: paletteColors, theme } = useChartContext(palette);
+	const reactId = React$1.useId().replace(/:/g, "");
+	const animated = !useReducedMotion();
+	const [active, setActive] = React$1.useState(null);
+	const rowRefs = React$1.useRef([]);
+	const slices = React$1.useMemo(() => {
+		const mapped = data.map((row) => ({
+			name: String(row[index] ?? ""),
+			value: Number(row[dataKey]) || 0
+		}));
+		mapped.sort((lower, upper) => upper.value - lower.value);
+		return mapped.map((slice, rank) => ({
+			...slice,
+			color: paletteColor(paletteColors, rank)
+		}));
+	}, [
+		data,
+		index,
+		dataKey,
+		paletteColors
+	]);
+	const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+	const maxValue = slices.reduce((max, slice) => slice.value > max ? slice.value : max, 0);
+	const geometry = GEOMETRY[variant] ?? GEOMETRY.donut;
+	const formatName = (name) => labelFormatter ? labelFormatter(name) : name;
+	const isEmpty = slices.length === 0 || total <= 0;
+	const activeSlice = active !== null ? slices[active] : void 0;
+	const centerTitle = activeSlice ? formatName(activeSlice.name) : centerLabel;
+	const centerValue = valueFormatter(activeSlice ? activeSlice.value : total);
+	React$1.useEffect(() => {
+		if (active !== null) rowRefs.current[active]?.scrollIntoView({ block: "nearest" });
+	}, [active]);
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "donut-chart",
+		className: cn("@container flex w-full flex-col gap-3", className),
+		children: loading ? /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-center gap-2.5 font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: [/* @__PURE__ */ jsx("span", { className: "size-4 animate-spin rounded-full border-2 border-border border-t-foreground" }), "loading…"]
+		}) : isEmpty ? /* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center rounded-lg border border-border border-dashed font-mono text-quaternary-foreground text-text-xs",
+			style: { height },
+			children: "no data in range"
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col items-center gap-5 @md:flex-row",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "relative shrink-0",
+				style: {
+					width: height,
+					height
+				},
+				children: [/* @__PURE__ */ jsx(ResponsiveContainer, {
+					width: "100%",
+					height: "100%",
+					children: /* @__PURE__ */ jsxs(PieChart, { children: [/* @__PURE__ */ jsx("defs", { children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `donut-${reactId}-${slot}`,
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: slice.color,
+							stopOpacity: 1
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: slice.color,
+							stopOpacity: .7
+						})]
+					}, slice.name)) }), /* @__PURE__ */ jsx(Pie, {
+						data: slices,
+						dataKey: "value",
+						nameKey: "name",
+						innerRadius: geometry.inner,
+						outerRadius: geometry.outer,
+						paddingAngle,
+						startAngle: 90,
+						endAngle: -270,
+						cornerRadius: 2,
+						stroke: theme.card,
+						strokeWidth: 1.5,
+						isAnimationActive: animated,
+						animationDuration: 650,
+						animationEasing: "ease-out",
+						onMouseEnter: (_entry, sliceIndex) => setActive(sliceIndex),
+						onMouseLeave: () => setActive(null),
+						children: slices.map((slice, slot) => /* @__PURE__ */ jsx(Cell, {
+							className: "motion-safe:[transition:fill-opacity_180ms_ease-out]",
+							fill: `url(#donut-${reactId}-${slot})`,
+							fillOpacity: active === null || active === slot ? 1 : .55,
+							stroke: theme.card,
+							strokeWidth: 1.5
+						}, slice.name))
+					})] })
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center gap-1 text-center",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "max-w-[72%] truncate font-mono text-[10px] text-quaternary-foreground uppercase tracking-[0.18em]",
+							children: centerTitle
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: "font-mono font-semibold text-[28px] text-foreground leading-none tabular-nums",
+							children: centerValue
+						}),
+						activeSlice && /* @__PURE__ */ jsx("span", {
+							className: "font-mono font-medium text-[11px] tabular-nums",
+							style: { color: activeSlice.color },
+							children: formatShare(activeSlice.value / total)
+						})
+					]
+				})]
+			}), legend && /* @__PURE__ */ jsx("div", {
+				"data-slot": "donut-readout",
+				className: "flex min-w-0 flex-1 flex-col overflow-y-auto pr-1",
+				style: { maxHeight: height },
+				children: slices.map((slice, slot) => /* @__PURE__ */ jsxs("div", {
+					ref: (node) => {
+						rowRefs.current[slot] = node;
+					},
+					onMouseEnter: () => setActive(slot),
+					onMouseLeave: () => setActive(null),
+					className: cn("flex flex-col gap-1.5 border-border/40 border-b px-2 py-2 text-text-xs last:border-b-0 motion-safe:transition-colors", active === slot ? "bg-muted/50" : "bg-transparent"),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center justify-between gap-3",
+						children: [/* @__PURE__ */ jsxs("span", {
+							className: "inline-flex min-w-0 items-center gap-2 text-muted-foreground",
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": true,
+								className: "h-2 w-2.5 shrink-0 rounded-[3px]",
+								style: { background: slice.color }
+							}), /* @__PURE__ */ jsx("span", {
+								className: "truncate",
+								children: formatName(slice.name)
+							})]
+						}), /* @__PURE__ */ jsxs("span", {
+							className: "flex shrink-0 items-center gap-3 font-mono tabular-nums",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "min-w-[3.5rem] text-right font-semibold text-foreground",
+								children: valueFormatter(slice.value)
+							}), /* @__PURE__ */ jsx("span", {
+								className: "w-10 text-right text-quaternary-foreground",
+								children: formatShare(slice.value / total)
+							})]
+						})]
+					}), /* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "relative block h-[2px] w-full overflow-hidden rounded-full bg-border/40",
+						children: /* @__PURE__ */ jsx("span", {
+							className: "absolute inset-y-0 left-0 rounded-full motion-safe:transition-[width] motion-safe:duration-500",
+							style: {
+								width: `${maxValue > 0 ? slice.value / maxValue * 100 : 0}%`,
+								background: slice.color,
+								opacity: active === null || active === slot ? 1 : .45
+							}
+						})
+					})]
+				}, slice.name))
+			})]
+		})
+	});
+}
+//#endregion
+export { DonutChart };