@bison-lab/ui 0.6.0 → 0.8.0

package/dist/index.mjs

@@ -6,9 +6,11 @@ import { defaultFontWeights, densityPresets, deriveDarkPalette, deriveLightPalet
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Accordion as Accordion$1, AlertDialog as AlertDialog$1, AspectRatio as AspectRatio$1, Avatar as Avatar$1, Checkbox as Checkbox$1, ContextMenu as ContextMenu$1, Dialog as Dialog$1, DropdownMenu as DropdownMenu$1, Label as Label$1, NavigationMenu as NavigationMenu$1, Popover as Popover$1, Progress as Progress$1, RadioGroup as RadioGroup$1, ScrollArea as ScrollArea$1, Select as Select$1, Separator as Separator$1, Slider as Slider$1, Slot, Switch as Switch$1, Tabs as Tabs$1, Tooltip as Tooltip$1 } from "radix-ui";
 import { cva } from "class-variance-authority";
-import { ArrowLeft, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, Circle, FileQuestion, Inbox, Loader2, Mail, Menu, MoreHorizontal, Search, ServerCrash, Wrench, X } from "lucide-react";
+import { ArrowDown, ArrowLeft, ArrowUp, ArrowUpDown, Camera, Check, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsLeft, ChevronsRight, Circle, FileQuestion, Inbox, Loader2, Mail, Menu, MoreHorizontal, Search, ServerCrash, SlidersHorizontal, Wrench, X } from "lucide-react";
 import { Toaster as Toaster$1, toast } from "sonner";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
 import { Command as Command$1 } from "cmdk";
+import { Area, AreaChart as AreaChart$1, Bar, BarChart as BarChart$1, CartesianGrid, Cell, Legend, Pie, PieChart, ResponsiveContainer, Tooltip as Tooltip$2, XAxis, YAxis } from "recharts";
 //#region src/lib/utils.ts
 function cn(...inputs) {
 	return twMerge(clsx(inputs));
@@ -979,6 +981,300 @@ const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PU
 }));
 TableCaption.displayName = "TableCaption";
 //#endregion
+//#region src/components/data-table.tsx
+const sizeClasses = {
+	sm: {
+		cell: "px-3 py-1.5 text-xs",
+		header: "h-9 px-3 text-xs"
+	},
+	md: {
+		cell: "px-4 py-2 text-sm",
+		header: "h-10 px-4 text-sm"
+	},
+	lg: {
+		cell: "px-4 py-3 text-sm",
+		header: "h-12 px-4 text-sm"
+	}
+};
+const densitySizeMap = {
+	compact: "sm",
+	default: "md",
+	spacious: "lg"
+};
+function DataTableColumnHeader({ column, title, className }) {
+	if (!column.getCanSort()) return /* @__PURE__ */ jsx("div", {
+		className: cn(className),
+		children: title
+	});
+	const sorted = column.getIsSorted();
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "ghost",
+		size: "sm",
+		className: cn("-ml-3 h-8 data-[state=open]:bg-accent", className),
+		onClick: () => column.toggleSorting(sorted === "asc"),
+		children: [title, sorted === "asc" ? /* @__PURE__ */ jsx(ArrowUp, { className: "ml-2 h-3.5 w-3.5" }) : sorted === "desc" ? /* @__PURE__ */ jsx(ArrowDown, { className: "ml-2 h-3.5 w-3.5" }) : /* @__PURE__ */ jsx(ArrowUpDown, { className: "ml-2 h-3.5 w-3.5 text-muted-foreground/50" })]
+	});
+}
+DataTableColumnHeader.displayName = "DataTableColumnHeader";
+function createSelectionColumn() {
+	return {
+		id: "_select",
+		header: ({ table }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && "indeterminate",
+			onCheckedChange: (value) => table.toggleAllPageRowsSelected(!!value),
+			"aria-label": "Select all",
+			className: "translate-y-[2px]"
+		}),
+		cell: ({ row }) => /* @__PURE__ */ jsx(Checkbox, {
+			checked: row.getIsSelected(),
+			onCheckedChange: (value) => row.toggleSelected(!!value),
+			"aria-label": "Select row",
+			className: "translate-y-[2px]"
+		}),
+		enableSorting: false,
+		enableHiding: false,
+		size: 40
+	};
+}
+function useDensitySize() {
+	const ref = React.useRef(null);
+	const [size, setSize] = React.useState("md");
+	React.useEffect(() => {
+		const el = ref.current;
+		if (!el) return;
+		const container = el.closest(".bison-density-compact, .bison-density-default, .bison-density-spacious");
+		if (!container) return;
+		for (const [cls, sz] of Object.entries(densitySizeMap)) if (container.classList.contains(`bison-density-${cls}`)) {
+			setSize(sz);
+			return;
+		}
+	}, []);
+	return size;
+}
+function DataTableInner({ columns, data, filterColumn, filterPlaceholder = "Filter...", pagination = true, pageSize = 10, pageSizeOptions = [
+	10,
+	20,
+	30,
+	50
+], enableRowSelection = false, onRowSelectionChange, totalRows, paginationState: controlledPagination, onPaginationChange, sortingState: controlledSorting, onSortingChange: onSortingChangeProp, filterState: controlledFilters, onFilterChange, showColumnToggle = true, toolbarActions, size: sizeProp, emptyMessage = "No results.", className }, ref) {
+	const isServerSide = totalRows !== void 0;
+	const [internalSorting, setInternalSorting] = React.useState([]);
+	const [internalFilters, setInternalFilters] = React.useState([]);
+	const [internalPagination, setInternalPagination] = React.useState({
+		pageIndex: 0,
+		pageSize
+	});
+	const [columnVisibility, setColumnVisibility] = React.useState({});
+	const [rowSelection, setRowSelection] = React.useState({});
+	const sorting = controlledSorting ?? internalSorting;
+	const setSorting = onSortingChangeProp ?? setInternalSorting;
+	const columnFilters = controlledFilters ?? internalFilters;
+	const setColumnFilters = onFilterChange ?? setInternalFilters;
+	const paginationVal = controlledPagination ?? internalPagination;
+	const setPaginationVal = onPaginationChange ?? setInternalPagination;
+	const handleRowSelectionChange = React.useCallback((updater) => {
+		setRowSelection((prev) => {
+			const next = typeof updater === "function" ? updater(prev) : updater;
+			onRowSelectionChange?.(next);
+			return next;
+		});
+	}, [onRowSelectionChange]);
+	const finalColumns = React.useMemo(() => {
+		if (!enableRowSelection) return columns;
+		return [createSelectionColumn(), ...columns];
+	}, [columns, enableRowSelection]);
+	const table = useReactTable({
+		data,
+		columns: finalColumns,
+		state: {
+			sorting,
+			columnFilters,
+			columnVisibility,
+			rowSelection,
+			pagination: paginationVal
+		},
+		onSortingChange: setSorting,
+		onColumnFiltersChange: setColumnFilters,
+		onColumnVisibilityChange: setColumnVisibility,
+		onRowSelectionChange: handleRowSelectionChange,
+		onPaginationChange: setPaginationVal,
+		getCoreRowModel: getCoreRowModel(),
+		...isServerSide ? {
+			manualPagination: true,
+			manualSorting: true,
+			manualFiltering: true,
+			pageCount: Math.ceil(totalRows / paginationVal.pageSize)
+		} : {
+			getSortedRowModel: getSortedRowModel(),
+			getFilteredRowModel: getFilteredRowModel(),
+			...pagination && { getPaginationRowModel: getPaginationRowModel() }
+		},
+		enableRowSelection
+	});
+	const densitySize = useDensitySize();
+	const sc = sizeClasses[sizeProp ?? densitySize];
+	const hasToolbar = filterColumn || showColumnToggle || toolbarActions;
+	const selectedCount = Object.keys(rowSelection).length;
+	const totalFilteredRows = isServerSide ? totalRows : table.getFilteredRowModel().rows.length;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cn("space-y-4", className),
+		children: [
+			hasToolbar && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex flex-1 items-center gap-2",
+					children: filterColumn && /* @__PURE__ */ jsx(Input, {
+						placeholder: filterPlaceholder,
+						value: table.getColumn(filterColumn)?.getFilterValue() ?? "",
+						onChange: (event) => table.getColumn(filterColumn)?.setFilterValue(event.target.value),
+						className: "max-w-sm"
+					})
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center gap-2",
+					children: [toolbarActions, showColumnToggle && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsxs(Button, {
+							variant: "outline",
+							size: "sm",
+							className: "ml-auto h-8",
+							children: [/* @__PURE__ */ jsx(SlidersHorizontal, { className: "mr-2 h-4 w-4" }), "Columns"]
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+						align: "end",
+						className: "w-40",
+						children: [
+							/* @__PURE__ */ jsx(DropdownMenuLabel, { children: "Toggle columns" }),
+							/* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+							table.getAllColumns().filter((col) => col.getCanHide()).map((col) => /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
+								className: "capitalize",
+								checked: col.getIsVisible(),
+								onCheckedChange: (value) => col.toggleVisibility(!!value),
+								children: col.id
+							}, col.id))
+						]
+					})] })]
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "rounded-md border",
+				children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(TableRow, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(TableHead, {
+					className: sc.header,
+					style: { width: header.column.id === "_select" ? 40 : header.getSize() !== 150 ? header.getSize() : void 0 },
+					children: header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())
+				}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(TableBody, { children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(TableRow, {
+					"data-state": row.getIsSelected() && "selected",
+					children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(TableCell, {
+						className: sc.cell,
+						children: flexRender(cell.column.columnDef.cell, cell.getContext())
+					}, cell.id))
+				}, row.id)) : /* @__PURE__ */ jsx(TableRow, { children: /* @__PURE__ */ jsx(TableCell, {
+					colSpan: finalColumns.length,
+					className: "h-24 text-center",
+					children: emptyMessage
+				}) }) })] })
+			}),
+			(pagination || enableRowSelection) && /* @__PURE__ */ jsxs("div", {
+				className: "flex items-center justify-between px-2",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "flex-1 text-sm text-muted-foreground",
+					children: enableRowSelection ? `${selectedCount} of ${totalFilteredRows} row(s) selected` : `${totalFilteredRows} row(s) total`
+				}), pagination && /* @__PURE__ */ jsxs("div", {
+					className: "flex items-center space-x-6 lg:space-x-8",
+					children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center space-x-2",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm font-medium",
+								children: "Rows per page"
+							}), /* @__PURE__ */ jsxs(Select, {
+								value: `${paginationVal.pageSize}`,
+								onValueChange: (value) => {
+									setPaginationVal((old) => ({
+										...old,
+										pageIndex: 0,
+										pageSize: Number(value)
+									}));
+								},
+								children: [/* @__PURE__ */ jsx(SelectTrigger, {
+									className: "h-8 w-[70px]",
+									children: /* @__PURE__ */ jsx(SelectValue, { placeholder: `${paginationVal.pageSize}` })
+								}), /* @__PURE__ */ jsx(SelectContent, {
+									side: "top",
+									children: pageSizeOptions.map((s) => /* @__PURE__ */ jsx(SelectItem, {
+										value: `${s}`,
+										children: s
+									}, s))
+								})]
+							})]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex w-[100px] items-center justify-center text-sm font-medium",
+							children: [
+								"Page ",
+								paginationVal.pageIndex + 1,
+								" of ",
+								table.getPageCount()
+							]
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex items-center space-x-2",
+							children: [
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									size: "sm",
+									className: "hidden h-8 w-8 p-0 lg:flex",
+									onClick: () => table.setPageIndex(0),
+									disabled: !table.getCanPreviousPage(),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Go to first page"
+									}), /* @__PURE__ */ jsx(ChevronsLeft, { className: "h-4 w-4" })]
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									size: "sm",
+									className: "h-8 w-8 p-0",
+									onClick: () => table.previousPage(),
+									disabled: !table.getCanPreviousPage(),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Go to previous page"
+									}), /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4" })]
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									size: "sm",
+									className: "h-8 w-8 p-0",
+									onClick: () => table.nextPage(),
+									disabled: !table.getCanNextPage(),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Go to next page"
+									}), /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })]
+								}),
+								/* @__PURE__ */ jsxs(Button, {
+									variant: "outline",
+									size: "sm",
+									className: "hidden h-8 w-8 p-0 lg:flex",
+									onClick: () => table.setPageIndex(table.getPageCount() - 1),
+									disabled: !table.getCanNextPage(),
+									children: [/* @__PURE__ */ jsx("span", {
+										className: "sr-only",
+										children: "Go to last page"
+									}), /* @__PURE__ */ jsx(ChevronsRight, { className: "h-4 w-4" })]
+								})
+							]
+						})
+					]
+				})]
+			})
+		]
+	});
+}
+const DataTable = React.forwardRef(DataTableInner);
+DataTable.displayName = "DataTable";
+//#endregion
 //#region src/components/progress.tsx
 const Progress = React.forwardRef(({ className, value, ...props }, ref) => /* @__PURE__ */ jsx(Progress$1.Root, {
 	ref,
@@ -1389,6 +1685,270 @@ const CommandShortcut = ({ className, ...props }) => /* @__PURE__ */ jsx("span",
 //#region src/components/aspect-ratio.tsx
 const AspectRatio = AspectRatio$1.Root;
 //#endregion
+//#region src/lib/chart-utils.ts
+/**
+* Shared utilities for chart components.
+* Reads theme CSS custom properties to provide Recharts-compatible color strings.
+*/
+/** Default chart color tokens mapped to CSS custom properties */
+const chartColorTokens = [
+	"--primary",
+	"--secondary",
+	"--brand-accent",
+	"--highlight",
+	"--destructive"
+];
+/**
+* Resolves a CSS custom property value to an `hsl(...)` string.
+* Falls back to the raw token name if resolution fails (e.g. SSR).
+*/
+function resolveHslToken(token, el) {
+	if (typeof window === "undefined") return `hsl(var(${token}))`;
+	const target = el ?? document.documentElement;
+	const raw = getComputedStyle(target).getPropertyValue(token).trim();
+	if (!raw) return `hsl(var(${token}))`;
+	if (raw.startsWith("hsl")) return raw;
+	return `hsl(${raw})`;
+}
+/**
+* Returns an array of resolved theme colors for chart series.
+* Consumers can override with explicit `colors` prop.
+*/
+function getThemeColors(el) {
+	return chartColorTokens.map((token) => resolveHslToken(token, el));
+}
+/** Chart size presets (height in px) */
+const chartSizeMap = {
+	sm: 200,
+	md: 300,
+	lg: 400
+};
+//#endregion
+//#region src/components/area-chart.tsx
+const AreaChart = React.forwardRef(({ className, data, index, categories, series, colors, size = "md", height, showGrid = true, showLegend = false, showTooltip = true, showYAxis = true, curveType = "monotone", stacked = false, ...props }, ref) => {
+	const containerRef = React.useRef(null);
+	const [themeColors, setThemeColors] = React.useState([]);
+	React.useEffect(() => {
+		const el = containerRef.current;
+		setThemeColors(colors ?? getThemeColors(el));
+	}, [colors]);
+	const resolvedSeries = React.useMemo(() => {
+		if (series) return series;
+		return (categories ?? []).map((key) => ({
+			dataKey: key,
+			name: key
+		}));
+	}, [series, categories]);
+	const chartHeight = height ?? chartSizeMap[size];
+	const gridColor = themeColors.length > 0 ? void 0 : "hsl(var(--border-subtle))";
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: chartHeight,
+			children: /* @__PURE__ */ jsxs(AreaChart$1, {
+				data,
+				children: [
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						stroke: gridColor,
+						className: "stroke-border-subtle"
+					}),
+					/* @__PURE__ */ jsx(XAxis, {
+						dataKey: index,
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						className: "[&_text]:fill-content-secondary"
+					}),
+					showYAxis && /* @__PURE__ */ jsx(YAxis, {
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						width: 40,
+						className: "[&_text]:fill-content-secondary"
+					}),
+					showTooltip && /* @__PURE__ */ jsx(Tooltip$2, { contentStyle: {
+						backgroundColor: "hsl(var(--popover))",
+						border: "1px solid hsl(var(--border))",
+						borderRadius: "var(--radius-md)",
+						color: "hsl(var(--popover-foreground))",
+						fontSize: 12
+					} }),
+					showLegend && /* @__PURE__ */ jsx(Legend, {}),
+					resolvedSeries.map((s, i) => {
+						const color = s.color ?? themeColors[i % themeColors.length] ?? `hsl(var(--primary))`;
+						return /* @__PURE__ */ jsx(Area, {
+							type: curveType,
+							dataKey: s.dataKey,
+							name: s.name ?? s.dataKey,
+							stroke: color,
+							fill: color,
+							fillOpacity: s.fillOpacity ?? .15,
+							stackId: stacked ? "stack" : void 0
+						}, s.dataKey);
+					})
+				]
+			})
+		})
+	});
+});
+AreaChart.displayName = "AreaChart";
+//#endregion
+//#region src/components/bar-chart.tsx
+const BarChart = React.forwardRef(({ className, data, index, categories, series, colors, size = "md", height, showGrid = true, showLegend = false, showTooltip = true, showYAxis = true, stacked = false, horizontal = false, ...props }, ref) => {
+	const containerRef = React.useRef(null);
+	const [themeColors, setThemeColors] = React.useState([]);
+	React.useEffect(() => {
+		const el = containerRef.current;
+		setThemeColors(colors ?? getThemeColors(el));
+	}, [colors]);
+	const resolvedSeries = React.useMemo(() => {
+		if (series) return series;
+		return (categories ?? []).map((key) => ({
+			dataKey: key,
+			name: key
+		}));
+	}, [series, categories]);
+	const chartHeight = height ?? chartSizeMap[size];
+	const layout = horizontal ? "vertical" : "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("w-full", className),
+		...props,
+		children: /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: chartHeight,
+			children: /* @__PURE__ */ jsxs(BarChart$1, {
+				data,
+				layout,
+				children: [
+					showGrid && /* @__PURE__ */ jsx(CartesianGrid, {
+						strokeDasharray: "3 3",
+						className: "stroke-border-subtle"
+					}),
+					horizontal ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						type: "number",
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						className: "[&_text]:fill-content-secondary"
+					}), /* @__PURE__ */ jsx(YAxis, {
+						dataKey: index,
+						type: "category",
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						width: 80,
+						className: "[&_text]:fill-content-secondary"
+					})] }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(XAxis, {
+						dataKey: index,
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						className: "[&_text]:fill-content-secondary"
+					}), showYAxis && /* @__PURE__ */ jsx(YAxis, {
+						tick: { fontSize: 12 },
+						tickLine: false,
+						axisLine: false,
+						width: 40,
+						className: "[&_text]:fill-content-secondary"
+					})] }),
+					showTooltip && /* @__PURE__ */ jsx(Tooltip$2, { contentStyle: {
+						backgroundColor: "hsl(var(--popover))",
+						border: "1px solid hsl(var(--border))",
+						borderRadius: "var(--radius-md)",
+						color: "hsl(var(--popover-foreground))",
+						fontSize: 12
+					} }),
+					showLegend && /* @__PURE__ */ jsx(Legend, {}),
+					resolvedSeries.map((s, i) => {
+						const color = s.color ?? themeColors[i % themeColors.length] ?? `hsl(var(--primary))`;
+						return /* @__PURE__ */ jsx(Bar, {
+							dataKey: s.dataKey,
+							name: s.name ?? s.dataKey,
+							fill: color,
+							radius: s.radius ?? [
+								4,
+								4,
+								0,
+								0
+							],
+							stackId: stacked ? "stack" : void 0
+						}, s.dataKey);
+					})
+				]
+			})
+		})
+	});
+});
+BarChart.displayName = "BarChart";
+//#endregion
+//#region src/components/donut-chart.tsx
+const DonutChart = React.forwardRef(({ className, data, nameKey = "name", dataKey = "value", colors, size = "md", height, showLegend = false, showTooltip = true, showLabels = false, innerRadius = "60%", outerRadius = "80%", paddingAngle = 2, centerLabel, ...props }, ref) => {
+	const containerRef = React.useRef(null);
+	const [themeColors, setThemeColors] = React.useState([]);
+	React.useEffect(() => {
+		const el = containerRef.current;
+		setThemeColors(colors ?? getThemeColors(el));
+	}, [colors]);
+	const chartHeight = height ?? chartSizeMap[size];
+	return /* @__PURE__ */ jsxs("div", {
+		ref: (node) => {
+			containerRef.current = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		className: cn("relative w-full", className),
+		...props,
+		children: [centerLabel && /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "text-center",
+				children: centerLabel
+			})
+		}), /* @__PURE__ */ jsx(ResponsiveContainer, {
+			width: "100%",
+			height: chartHeight,
+			children: /* @__PURE__ */ jsxs(PieChart, { children: [
+				/* @__PURE__ */ jsx(Pie, {
+					data,
+					nameKey,
+					dataKey,
+					innerRadius,
+					outerRadius,
+					paddingAngle,
+					label: showLabels,
+					strokeWidth: 0,
+					children: data.map((_, i) => {
+						return /* @__PURE__ */ jsx(Cell, { fill: themeColors[i % themeColors.length] ?? `hsl(var(--primary))` }, i);
+					})
+				}),
+				showTooltip && /* @__PURE__ */ jsx(Tooltip$2, { contentStyle: {
+					backgroundColor: "hsl(var(--popover))",
+					border: "1px solid hsl(var(--border))",
+					borderRadius: "var(--radius-md)",
+					color: "hsl(var(--popover-foreground))",
+					fontSize: 12
+				} }),
+				showLegend && /* @__PURE__ */ jsx(Legend, {})
+			] })
+		})]
+	});
+});
+DonutChart.displayName = "DonutChart";
+//#endregion
 //#region src/blocks/auth/social-providers.tsx
 const providerConfig = {
 	google: {
@@ -2493,6 +3053,6 @@ function NotificationSettingsBlock({ groups, onSave, loading = false, error, dis
 	});
 }
 //#endregion
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountSettingsBlock, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BisonProvider, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyStateBlock, FooterBlock, ForgotPasswordBlock, Form, FormError, FormField, HeaderBlock, Input, Label, MaintenanceBlock, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFoundBlock, NotificationSettingsBlock, PageShell, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, ProfileSettingsBlock, Progress, ProgressBar, RadioGroup, RadioGroupItem, ResetPasswordBlock, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, ServerErrorBlock, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBlock, SignInBlock, SignUpBlock, Skeleton, Slider, SocialProviders, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VerifyBlock, badgeVariants, buttonVariants, cn, navigationMenuTriggerStyle, progressBarVariants, spinnerVariants, toast, useDensity, useFormContext, useScrollReveal, useTheme };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, AccountSettingsBlock, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AreaChart, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BarChart, BisonProvider, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, DataTable, DataTableColumnHeader, DensityProvider, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DonutChart, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyStateBlock, FooterBlock, ForgotPasswordBlock, Form, FormError, FormField, HeaderBlock, Input, Label, MaintenanceBlock, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, NotFoundBlock, NotificationSettingsBlock, PageShell, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverContent, PopoverTrigger, ProfileSettingsBlock, Progress, ProgressBar, RadioGroup, RadioGroupItem, ResetPasswordBlock, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, ServerErrorBlock, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SidebarBlock, SignInBlock, SignUpBlock, Skeleton, Slider, SocialProviders, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, ThemeProvider, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VerifyBlock, badgeVariants, buttonVariants, chartColorTokens, chartSizeMap, cn, getThemeColors, navigationMenuTriggerStyle, progressBarVariants, resolveHslToken, spinnerVariants, toast, useDensity, useFormContext, useScrollReveal, useTheme };
 
 //# sourceMappingURL=index.mjs.map