@glyphui/ui 0.2.0 → 0.3.0

package/dist/chart.d.ts

@@ -0,0 +1,202 @@
+import { t as VariantProps } from "./tv-DuMh7UH2.js";
+import { t as StylesEntry } from "./registry-BGSJoiLq.js";
+import { ReactNode } from "react";
+//#region src/patterns/chart/chart-parts.d.ts
+/** Theme colors a series can use by name. Any CSS color also works. */
+type ChartColor = 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'foreground' | 'muted-foreground';
+//#endregion
+//#region src/patterns/chart/chart.d.ts
+type Key<T> = Extract<keyof T, string>;
+interface ChartSeries<T> {
+  /** Field of each data row holding this series' value. */
+  key: Key<T>;
+  /** Name shown in the legend, tooltip and accessible table. Defaults to `key`. */
+  label?: string;
+  /** A theme color name (`primary`, `info`, ...) or any CSS color. Defaults follow the theme palette. */
+  color?: ChartColor | (string & {});
+}
+interface CartesianChartProps<T extends object> {
+  data: readonly T[];
+  /** Field used for the x axis, e.g. `"month"`. */
+  index: Key<T>;
+  series: readonly ChartSeries<T>[];
+  /** Accessible name; also shown as the caption unless `hideTitle` is set. */
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** Formats values on the y axis, in tooltips and in the accessible table. */
+  valueFormatter?: (value: number) => string;
+  /** Plot height in pixels. Default 240. */
+  height?: number;
+  showGrid?: boolean;
+  /** Defaults to true when there is more than one series. */
+  showLegend?: boolean;
+  showYAxis?: boolean;
+  className?: string;
+}
+/** Trends over time, one line per series. */
+export declare function LineChart<T extends object>(props: CartesianChartProps<T> & {
+  curve?: 'monotone' | 'linear';
+}): import("react").JSX.Element;
+/** Trends with filled areas. `stacked` shows how series add up to a total. */
+export declare function AreaChart<T extends object>(props: CartesianChartProps<T> & {
+  stacked?: boolean;
+}): import("react").JSX.Element;
+/** Compare values across categories. `stacked` puts series on top of each other. */
+export declare function BarChart<T extends object>(props: CartesianChartProps<T> & {
+  stacked?: boolean; /** Corner radius of bar tops. Default 3. */
+  barRadius?: number;
+}): import("react").JSX.Element;
+interface DonutChartProps<T extends object> {
+  data: readonly T[];
+  /** Field naming each slice. */
+  category: Key<T>;
+  /** Field holding each slice's value. */
+  value: Key<T>;
+  title: string;
+  description?: ReactNode;
+  hideTitle?: boolean;
+  /** One color per slice, in order. Defaults follow the theme palette. */
+  colors?: readonly (ChartColor | (string & {}))[];
+  /** Content in the hole, e.g. the total. */
+  centerLabel?: ReactNode;
+  valueFormatter?: (value: number) => string;
+  /** Diameter in pixels. Default 200. */
+  size?: number;
+  showLegend?: boolean;
+  className?: string;
+}
+/** Parts of a whole. Best with five or fewer slices. */
+export declare function DonutChart<T extends object>(props: DonutChartProps<T>): import("react").JSX.Element;
+interface SparklineProps {
+  values: readonly number[];
+  /** Accessible description, e.g. "Revenue over the last 12 months, rising". */
+  title: string;
+  color?: ChartColor | (string & {});
+  /** Height in pixels. Default 36. */
+  height?: number;
+  /** Fill the area under the line. */
+  area?: boolean;
+  className?: string;
+}
+/** A tiny trend line without axes, for stat cards and table cells. */
+export declare function Sparkline({ values, title, color, height, area, className }: SparklineProps): import("react").JSX.Element;
+//#endregion
+//#region src/patterns/chart/chart.styles.d.ts
+export declare const chartStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legend?: import("tailwind-variants").ClassValue;
+      legendItem?: import("tailwind-variants").ClassValue;
+      swatch?: import("tailwind-variants").ClassValue;
+      tooltipLabel?: import("tailwind-variants").ClassValue;
+      tooltipRow?: import("tailwind-variants").ClassValue;
+      tooltipName?: import("tailwind-variants").ClassValue;
+      tooltipValue?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legend?: import("tailwind-variants").ClassValue;
+      legendItem?: import("tailwind-variants").ClassValue;
+      swatch?: import("tailwind-variants").ClassValue;
+      tooltipLabel?: import("tailwind-variants").ClassValue;
+      tooltipRow?: import("tailwind-variants").ClassValue;
+      tooltipName?: import("tailwind-variants").ClassValue;
+      tooltipValue?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string;
+  legend: string;
+  legendItem: string;
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  center: string;
+  srOnly: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legend?: import("tailwind-variants").ClassValue;
+      legendItem?: import("tailwind-variants").ClassValue;
+      swatch?: import("tailwind-variants").ClassValue;
+      tooltipLabel?: import("tailwind-variants").ClassValue;
+      tooltipRow?: import("tailwind-variants").ClassValue;
+      tooltipName?: import("tailwind-variants").ClassValue;
+      tooltipValue?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string;
+  legend: string;
+  legendItem: string;
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  center: string;
+  srOnly: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string;
+  legend: string;
+  legendItem: string;
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  center: string;
+  srOnly: string;
+}>>;
+type ChartVariants = VariantProps<typeof chartStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Chart: StylesEntry<typeof chartStyles>;
+  }
+}
+//#endregion
+export type { CartesianChartProps, ChartColor, ChartSeries, ChartVariants, DonutChartProps, SparklineProps };

package/dist/chart.js

@@ -0,0 +1,457 @@
+"use client";
+import { a as themedBorder, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { useId } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import * as R from "recharts";
+//#region src/patterns/chart/chart.styles.ts
+const chartStyles = tv({ slots: {
+	root: "m-0 grid min-w-0 gap-3",
+	caption: "grid gap-0.5",
+	title: "text-small font-medium text-foreground",
+	description: "text-caption text-muted-foreground",
+	plot: "min-w-0 [&_.recharts-surface]:overflow-visible [&_.recharts-text]:fill-muted-foreground",
+	legend: "flex flex-wrap items-center gap-x-4 gap-y-1 text-caption text-muted-foreground",
+	legendItem: "inline-flex items-center gap-1.5",
+	swatch: "size-2.5 shrink-0 rounded-[2px]",
+	tooltip: ["grid min-w-36 gap-1.5 rounded-md border-border bg-raised px-3 py-2 text-caption text-foreground shadow-lg", themedBorder],
+	tooltipLabel: "font-medium text-foreground",
+	tooltipRow: "flex items-center gap-2",
+	tooltipName: "flex-1 text-muted-foreground",
+	tooltipValue: "font-mono font-medium tabular-nums text-foreground",
+	center: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center",
+	srOnly: "sr-only"
+} });
+//#endregion
+//#region src/patterns/chart/chart-parts.tsx
+const palette = [
+	"primary",
+	"info",
+	"success",
+	"warning",
+	"danger"
+];
+function resolveColor(color, index) {
+	const value = color ?? palette[index % palette.length];
+	return /^[a-z-]+$/.test(value) ? `var(--color-${value})` : value;
+}
+const defaultFormatter = (value) => typeof value === "number" ? value.toLocaleString() : String(value);
+function useChartParts() {
+	const [, slots] = useComponentConfig("Chart", {});
+	return {
+		s: chartStyles(),
+		slots
+	};
+}
+function ChartLegend({ items }) {
+	const { s, slots } = useChartParts();
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "chart-legend",
+		className: s.legend({ class: slots.legend }),
+		"aria-hidden": "true",
+		children: items.map((item, i) => /* @__PURE__ */ jsxs("li", {
+			className: s.legendItem({ class: slots.legendItem }),
+			children: [/* @__PURE__ */ jsx("span", {
+				className: s.swatch({ class: slots.swatch }),
+				style: { background: item.color }
+			}), item.label]
+		}, i))
+	});
+}
+function ChartTooltipCard({ active, payload, label, formatter, labelFormatter }) {
+	const { s, slots } = useChartParts();
+	if (!active || !payload?.length) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "chart-tooltip",
+		className: s.tooltip({ class: slots.tooltip }),
+		children: [label !== void 0 && label !== "" && /* @__PURE__ */ jsx("p", {
+			className: s.tooltipLabel({ class: slots.tooltipLabel }),
+			children: labelFormatter ? labelFormatter(label) : label
+		}), payload.map((item, i) => /* @__PURE__ */ jsxs("div", {
+			className: s.tooltipRow({ class: slots.tooltipRow }),
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: s.swatch({ class: slots.swatch }),
+					style: { background: item.color ?? item.payload?.fill }
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: s.tooltipName({ class: slots.tooltipName }),
+					children: String(item.name ?? "")
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: s.tooltipValue({ class: slots.tooltipValue }),
+					children: formatter(Number(item.value))
+				})
+			]
+		}, i))]
+	});
+}
+/**
+* Wraps every chart in a `<figure>` with a caption and a visually hidden data table,
+* so screen-reader users get the numbers the chart shows.
+*/
+function ChartFrame({ title, description, hideTitle, className, legend, table, children }) {
+	const { s, slots } = useChartParts();
+	const titleId = useId();
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "chart",
+		"aria-labelledby": titleId,
+		className: s.root({ class: [slots.root, className] }),
+		children: [
+			/* @__PURE__ */ jsxs("figcaption", {
+				className: hideTitle ? s.srOnly() : s.caption({ class: slots.caption }),
+				children: [/* @__PURE__ */ jsx("span", {
+					id: titleId,
+					className: s.title({ class: slots.title }),
+					children: title
+				}), description && /* @__PURE__ */ jsx("span", {
+					className: s.description({ class: slots.description }),
+					children: description
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: s.plot({ class: slots.plot }),
+				"aria-hidden": "true",
+				children
+			}),
+			legend && legend.length > 1 && /* @__PURE__ */ jsx(ChartLegend, { items: legend }),
+			/* @__PURE__ */ jsxs("table", {
+				className: s.srOnly(),
+				children: [
+					/* @__PURE__ */ jsx("caption", { children: title }),
+					/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: table.columns.map((column) => /* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: column
+					}, column)) }) }),
+					/* @__PURE__ */ jsx("tbody", { children: table.rows.map((row, i) => /* @__PURE__ */ jsx("tr", { children: row.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: cell
+					}, j) : /* @__PURE__ */ jsx("td", { children: cell }, j)) }, i)) })
+				]
+			})
+		]
+	});
+}
+//#endregion
+//#region src/patterns/chart/chart.tsx
+const axisTick = {
+	fill: "var(--color-muted-foreground)",
+	fontSize: 12
+};
+function useCartesian(props) {
+	const { data, index, series, title, valueFormatter = defaultFormatter } = props;
+	const resolved = series.map((item, i) => ({
+		...item,
+		label: item.label ?? item.key,
+		stroke: resolveColor(item.color, i)
+	}));
+	return {
+		resolved,
+		table: {
+			columns: [String(index), ...resolved.map((item) => item.label)],
+			rows: data.map((row) => [String(row[index]), ...resolved.map((item) => valueFormatter(Number(row[item.key])))])
+		},
+		legend: props.showLegend ?? series.length > 1 ? resolved.map((item) => ({
+			label: item.label,
+			color: item.stroke
+		})) : void 0,
+		valueFormatter,
+		title
+	};
+}
+function frameProps(props) {
+	return {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className
+	};
+}
+function Axes({ index, showGrid = true, showYAxis = true, valueFormatter }) {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		showGrid && /* @__PURE__ */ jsx(R.CartesianGrid, {
+			vertical: false,
+			stroke: "var(--color-border)",
+			strokeDasharray: "3 3"
+		}),
+		/* @__PURE__ */ jsx(R.XAxis, {
+			dataKey: index,
+			tick: axisTick,
+			tickLine: false,
+			axisLine: false,
+			tickMargin: 8,
+			minTickGap: 16
+		}),
+		showYAxis && /* @__PURE__ */ jsx(R.YAxis, {
+			tick: axisTick,
+			tickLine: false,
+			axisLine: false,
+			width: 48,
+			tickFormatter: valueFormatter
+		})
+	] });
+}
+function tooltip(valueFormatter, cursor) {
+	return /* @__PURE__ */ jsx(R.Tooltip, {
+		cursor,
+		content: (p) => /* @__PURE__ */ jsx(ChartTooltipCard, {
+			active: p.active,
+			payload: p.payload,
+			label: p.label,
+			formatter: valueFormatter
+		})
+	});
+}
+/** Trends over time, one line per series. */
+function LineChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.LineChart, {
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
+					resolved.map((item) => /* @__PURE__ */ jsx(R.Line, {
+						dataKey: item.key,
+						name: item.label,
+						type: props.curve ?? "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						dot: false,
+						activeDot: {
+							r: 4,
+							strokeWidth: 0
+						},
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Trends with filled areas. `stacked` shows how series add up to a total. */
+function AreaChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	const id = useId().replace(/:/g, "");
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx("defs", { children: resolved.map((item, i) => /* @__PURE__ */ jsxs("linearGradient", {
+						id: `${id}-${i}`,
+						x1: "0",
+						x2: "0",
+						y1: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ jsx("stop", {
+							offset: "0%",
+							stopColor: item.stroke,
+							stopOpacity: .3
+						}), /* @__PURE__ */ jsx("stop", {
+							offset: "100%",
+							stopColor: item.stroke,
+							stopOpacity: 0
+						})]
+					}, item.key)) }),
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, { stroke: "var(--color-border-strong)" }),
+					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Area, {
+						dataKey: item.key,
+						name: item.label,
+						type: "monotone",
+						stroke: item.stroke,
+						strokeWidth: 2,
+						fill: `url(#${id}-${i})`,
+						...props.stacked && { stackId: "stack" },
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Compare values across categories. `stacked` puts series on top of each other. */
+function BarChart(props) {
+	const { resolved, table, legend, valueFormatter } = useCartesian(props);
+	const radius = props.barRadius ?? 3;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		...frameProps(props),
+		legend,
+		table,
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: props.height ?? 240,
+			children: /* @__PURE__ */ jsxs(R.BarChart, {
+				data: props.data,
+				margin: {
+					top: 8,
+					right: 8,
+					bottom: 0,
+					left: 0
+				},
+				children: [
+					/* @__PURE__ */ jsx(Axes, {
+						index: props.index,
+						showGrid: props.showGrid,
+						showYAxis: props.showYAxis,
+						valueFormatter
+					}),
+					tooltip(valueFormatter, {
+						fill: "var(--color-muted)",
+						opacity: .6
+					}),
+					resolved.map((item, i) => /* @__PURE__ */ jsx(R.Bar, {
+						dataKey: item.key,
+						name: item.label,
+						fill: item.stroke,
+						radius: props.stacked && i < resolved.length - 1 ? 0 : [
+							radius,
+							radius,
+							0,
+							0
+						],
+						...props.stacked && { stackId: "stack" },
+						isAnimationActive: false
+					}, item.key))
+				]
+			})
+		})
+	});
+}
+/** Parts of a whole. Best with five or fewer slices. */
+function DonutChart(props) {
+	const { data, category, value, valueFormatter = defaultFormatter, size = 200 } = props;
+	const { s, slots } = useChartParts();
+	const rows = data.map((row) => row);
+	const colors = rows.map((_, i) => resolveColor(props.colors?.[i], i));
+	const table = {
+		columns: [String(category), String(value)],
+		rows: rows.map((row) => [String(row[category]), valueFormatter(Number(row[value]))])
+	};
+	const legend = props.showLegend ?? true ? rows.map((row, i) => ({
+		label: String(row[category]),
+		color: colors[i]
+	})) : void 0;
+	return /* @__PURE__ */ jsx(ChartFrame, {
+		title: props.title,
+		description: props.description,
+		hideTitle: props.hideTitle,
+		className: props.className,
+		legend,
+		table,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "relative mx-auto",
+			style: {
+				width: size,
+				height: size
+			},
+			children: [/* @__PURE__ */ jsx(R.ResponsiveContainer, {
+				width: "100%",
+				height: "100%",
+				children: /* @__PURE__ */ jsxs(R.PieChart, { children: [tooltip(valueFormatter, false), /* @__PURE__ */ jsx(R.Pie, {
+					data: rows,
+					dataKey: value,
+					nameKey: category,
+					innerRadius: "68%",
+					outerRadius: "100%",
+					paddingAngle: 2,
+					stroke: "var(--color-surface)",
+					strokeWidth: 2,
+					isAnimationActive: false,
+					children: rows.map((_, i) => /* @__PURE__ */ jsx(R.Cell, { fill: colors[i] }, i))
+				})] })
+			}), props.centerLabel && /* @__PURE__ */ jsx("div", {
+				className: s.center({ class: slots.center }),
+				children: props.centerLabel
+			})]
+		})
+	});
+}
+/** A tiny trend line without axes, for stat cards and table cells. */
+function Sparkline({ values, title, color, height = 36, area = true, className }) {
+	const id = useId().replace(/:/g, "");
+	const stroke = resolveColor(color, 0);
+	const data = values.map((v, i) => ({
+		i,
+		v
+	}));
+	return /* @__PURE__ */ jsx("div", {
+		role: "img",
+		"aria-label": title,
+		"data-slot": "sparkline",
+		className,
+		style: { height },
+		children: /* @__PURE__ */ jsx(R.ResponsiveContainer, {
+			width: "100%",
+			height: "100%",
+			children: /* @__PURE__ */ jsxs(R.AreaChart, {
+				data,
+				margin: {
+					top: 2,
+					right: 2,
+					bottom: 2,
+					left: 2
+				},
+				children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+					id,
+					x1: "0",
+					x2: "0",
+					y1: "0",
+					y2: "1",
+					children: [/* @__PURE__ */ jsx("stop", {
+						offset: "0%",
+						stopColor: stroke,
+						stopOpacity: area ? .25 : 0
+					}), /* @__PURE__ */ jsx("stop", {
+						offset: "100%",
+						stopColor: stroke,
+						stopOpacity: 0
+					})]
+				}) }), /* @__PURE__ */ jsx(R.Area, {
+					dataKey: "v",
+					type: "monotone",
+					stroke,
+					strokeWidth: 1.75,
+					fill: `url(#${id})`,
+					isAnimationActive: false,
+					dot: false
+				})]
+			})
+		})
+	});
+}
+//#endregion
+export { AreaChart, BarChart, DonutChart, LineChart, Sparkline, chartStyles };

package/dist/data-table.js

@@ -1,6 +1,7 @@
 "use client";
-import { E as SearchIcon, O as useComponentConfig, b as ChevronRightIcon, c as tv, f as themedBorder, g as ArrowUpIcon, h as ArrowDownIcon, i as IconButton, r as Button, u as focusRing, x as ChevronsUpDownIcon, y as ChevronLeftIcon } from "./field-context-B6WOcK5m.js";
-import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-Rp8wZ_jH.js";
+import { a as themedBorder, r as focusRing, s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { b as SearchIcon, h as ChevronsUpDownIcon, i as IconButton, l as ArrowDownIcon, m as ChevronRightIcon, p as ChevronLeftIcon, r as Button, u as ArrowUpIcon } from "./field-context-anGPYXbW.js";
+import { a as Table, c as TableCell, d as TableRow, h as Input, l as TableHead, n as ErrorState, o as TableBody, p as Skeleton, t as EmptyState, u as TableHeader, v as Checkbox } from "./states-DR-OoDT-.js";
 import { useEffect, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createColumnHelper, flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";

package/dist/{field-CCecIzdq.js → field-CWZ_FdkD.js}

@@ -1,5 +1,6 @@
 "use client";
-import { O as useComponentConfig, c as tv, t as FieldContext } from "./field-context-B6WOcK5m.js";
+import { s as useComponentConfig, t as tv } from "./tv-DBAGlgXJ.js";
+import { t as FieldContext } from "./field-context-anGPYXbW.js";
 import { Label } from "radix-ui";
 import { useId, useMemo } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";