@glyphui/ui 0.3.0 → 0.5.0

package/dist/patterns/chart/chart-card.d.ts

@@ -0,0 +1,39 @@
+import { SegmentedOption } from "../../components/segmented-control/segmented-control.js";
+import "../../components/segmented-control/index.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/patterns/chart/chart-card.d.ts
+export interface ChartPeriod<P extends string> {
+  options: readonly SegmentedOption<P>[];
+  value?: P;
+  defaultValue?: P;
+  onValueChange?: (value: P) => void;
+  /** Default "Period". */
+  'aria-label'?: string;
+}
+export interface ChartCardProps<P extends string = string> extends Omit<ComponentProps<'div'>, 'title' | 'children'> {
+  title: ReactNode;
+  description?: ReactNode;
+  /** A period selector in the header, e.g. 7d / 30d / 90d. */
+  period?: ChartPeriod<P>;
+  /** Extra controls in the header, before the built-in buttons. */
+  actions?: ReactNode;
+  /** Adds a button that shows the chart's data as a table. Default true. */
+  tableToggle?: boolean;
+  view?: 'chart' | 'table';
+  defaultView?: 'chart' | 'table';
+  onViewChange?: (view: 'chart' | 'table') => void;
+  /** Adds a download menu (PNG and SVG). Default true. */
+  exportable?: boolean | {
+    fileName?: string;
+  };
+  /** Called when a download fails, e.g. to show a toast. Logs to the console by default. */
+  onExportError?: (error: unknown) => void;
+  /** One chart from `@glyphui/ui/chart`. Its own title becomes the accessible name only. */
+  children: ReactNode;
+}
+/**
+ * A card for one chart: title, period selector, "view as table" toggle and a download menu.
+ * The chart inside hides its own caption and switches to a table when asked.
+ */
+export declare function ChartCard<P extends string = string>(inProps: ChartCardProps<P>): import("react").JSX.Element;
+//#endregion

package/dist/patterns/chart/chart-card.js

@@ -0,0 +1,103 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { IconButton } from "../../components/button/button.js";
+import { Card, CardDescription, CardTitle } from "../../components/card/card.js";
+import { useControllableState } from "../../hooks/use-controllable-state.js";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "../../components/dropdown-menu/dropdown-menu.js";
+import { SegmentedControl } from "../../components/segmented-control/segmented-control.js";
+import { chartCardStyles } from "./chart.styles.js";
+import { ChartViewContext } from "./chart-parts.js";
+import { exportChart } from "./export.js";
+import { ChartIcon, DownloadIcon, TableIcon } from "./icons.js";
+import { useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/chart/chart-card.tsx
+function slug(value) {
+	return (typeof value === "string" || typeof value === "number" ? String(value) : "chart").toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-|-$/g, "") || "chart";
+}
+/**
+* A card for one chart: title, period selector, "view as table" toggle and a download menu.
+* The chart inside hides its own caption and switches to a table when asked.
+*/
+function ChartCard(inProps) {
+	const [props, slots] = useComponentConfig("ChartCard", inProps);
+	const { title, description, period, actions, tableToggle = true, view: viewProp, defaultView = "chart", onViewChange, exportable = true, onExportError, className, children, ...rest } = props;
+	const s = chartCardStyles();
+	const body = useRef(null);
+	const [view, setView] = useControllableState({
+		value: viewProp,
+		defaultValue: defaultView,
+		onChange: onViewChange
+	});
+	const fileName = (typeof exportable === "object" ? exportable.fileName : void 0) ?? slug(title);
+	const download = (format) => {
+		exportChart(body.current, {
+			format,
+			fileName
+		}).catch((error) => {
+			if (onExportError) onExportError(error);
+			else console.error(error);
+		});
+	};
+	return /* @__PURE__ */ jsxs(Card, {
+		"data-slot": "chart-card",
+		className: s.root({ class: [slots.root, className] }),
+		...rest,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: s.header({ class: slots.header }),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: s.heading({ class: slots.heading }),
+				children: [/* @__PURE__ */ jsx(CardTitle, { children: title }), description && /* @__PURE__ */ jsx(CardDescription, { children: description })]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: s.controls({ class: slots.controls }),
+				children: [
+					period && /* @__PURE__ */ jsx(SegmentedControl, {
+						size: "sm",
+						"aria-label": period["aria-label"] ?? "Period",
+						options: period.options,
+						...period.value !== void 0 && { value: period.value },
+						...period.defaultValue !== void 0 && { defaultValue: period.defaultValue },
+						...period.onValueChange && { onValueChange: period.onValueChange }
+					}),
+					actions,
+					tableToggle && /* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						variant: "ghost",
+						"aria-label": "View as table",
+						"aria-pressed": view === "table",
+						icon: view === "table" ? /* @__PURE__ */ jsx(ChartIcon, {}) : /* @__PURE__ */ jsx(TableIcon, {}),
+						onClick: () => setView(view === "table" ? "chart" : "table")
+					}),
+					exportable && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
+						asChild: true,
+						children: /* @__PURE__ */ jsx(IconButton, {
+							size: "sm",
+							variant: "ghost",
+							"aria-label": "Download chart",
+							icon: /* @__PURE__ */ jsx(DownloadIcon, {}),
+							disabled: view === "table"
+						})
+					}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+						align: "end",
+						children: [/* @__PURE__ */ jsx(DropdownMenuItem, {
+							onSelect: () => download("png"),
+							children: "Download PNG"
+						}), /* @__PURE__ */ jsx(DropdownMenuItem, {
+							onSelect: () => download("svg"),
+							children: "Download SVG"
+						})]
+					})] })
+				]
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			ref: body,
+			className: s.body({ class: slots.body }),
+			children: /* @__PURE__ */ jsx(ChartViewContext.Provider, {
+				value: { view },
+				children
+			})
+		})]
+	});
+}
+//#endregion
+export { ChartCard };

package/dist/patterns/chart/chart-parts.d.ts

@@ -0,0 +1,53 @@
+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. */
+export type ChartColor = 'chart-1' | 'chart-2' | 'chart-3' | 'chart-4' | 'chart-5' | 'primary' | 'info' | 'success' | 'warning' | 'danger' | 'foreground' | 'muted-foreground';
+/** A theme color name or any CSS color. */
+export type ChartColorValue = ChartColor | (string & {});
+export type Key<T> = Extract<keyof T, string>;
+export interface LegendEntry {
+  /** Stable id used for toggling. Defaults to the label. */
+  key?: string;
+  label: ReactNode;
+  color: string;
+  hidden?: boolean;
+}
+export interface ChartLegendProps {
+  items: LegendEntry[];
+  /** Makes entries buttons that show and hide their series. */
+  onToggle?: ((key: string) => void) | undefined;
+  className?: string;
+}
+/** Legend under a chart. Interactive when `onToggle` is set: click or press Enter to hide a series. */
+export declare function ChartLegend({ items, onToggle, className }: ChartLegendProps): import("react").JSX.Element;
+interface TooltipPayloadItem {
+  name?: string | number;
+  value?: unknown;
+  color?: string;
+  dataKey?: unknown;
+  payload?: Record<string, unknown> & {
+    fill?: string;
+  };
+}
+export interface ChartTooltipCardProps {
+  active?: boolean | undefined;
+  payload?: readonly TooltipPayloadItem[] | undefined;
+  label?: ReactNode;
+  formatter: (value: number) => string;
+  labelFormatter?: ((label: ReactNode) => ReactNode) | undefined;
+  /** Adds a total row, for stacked charts. */
+  total?: boolean | undefined;
+}
+/** The themed tooltip every chart uses. Render it from recharts' `<Tooltip content>`. */
+export declare function ChartTooltipCard({ active, payload, label, formatter, labelFormatter, total }: ChartTooltipCardProps): import("react").JSX.Element | null;
+/** Loading, error and empty handling shared by every chart. */
+export interface ChartStateProps {
+  /** Shows a skeleton in place of the plot. */
+  loading?: boolean;
+  /** Shows an error message in place of the plot, with a retry button when `onRetry` is set. */
+  error?: unknown;
+  onRetry?: () => unknown;
+  /** Shown when there is no data. Defaults to a short "No data" message. */
+  empty?: ReactNode;
+}
+//#endregion

package/dist/patterns/chart/chart-parts.js

@@ -0,0 +1,282 @@
+"use client";
+import { useComponentConfig } from "../../hooks/use-component-config.js";
+import { useMotionSettings } from "../../motion/use-motion-settings.js";
+import { Skeleton } from "../../components/skeleton/skeleton.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../../components/table/table.js";
+import { EmptyState, ErrorState } from "../async/states.js";
+import { chartStyles } from "./chart.styles.js";
+import { createContext, useContext, useEffect, useId, useRef } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/patterns/chart/chart-parts.tsx
+/** Series without a color use the theme's chart palette, in order. */
+const palette = [
+	"chart-1",
+	"chart-2",
+	"chart-3",
+	"chart-4",
+	"chart-5"
+];
+/**
+* Turns a theme color name into a CSS value. Uses the `--glyph-*` variables the theme always
+* emits: Tailwind only emits `--color-*` variables it finds in your source, and these names
+* are built at runtime.
+*/
+function resolveColor(color, index) {
+	const value = color ?? palette[index % palette.length];
+	return /^[a-z][a-z\d-]*$/.test(value) ? `var(--glyph-${value})` : value;
+}
+/**
+* The palette color for the `index`-th category. After the fifth, colors are blended toward
+* the muted surface instead of repeating, so no two categories ever share a color.
+*/
+function categoryColor(color, index) {
+	if (color) return resolveColor(color, index);
+	const base = resolveColor(void 0, index);
+	const round = Math.floor(index / palette.length);
+	if (round === 0) return base;
+	return `color-mix(in oklab, ${base} ${Math.max(30, 100 - round * 30)}%, var(--glyph-muted))`;
+}
+const defaultFormatter = (value) => typeof value === "number" && Number.isFinite(value) ? value.toLocaleString() : String(value);
+function useChartParts() {
+	const [, slots] = useComponentConfig("Chart", {});
+	return {
+		s: chartStyles(),
+		slots
+	};
+}
+/**
+* Entry and update animation for recharts series, from the theme's motion settings:
+* off for `none` and reduced motion, a little longer and bouncier for `expressive`.
+*/
+function useChartAnimation() {
+	const { animate, level, duration } = useMotionSettings();
+	return {
+		isAnimationActive: animate,
+		animationDuration: Math.round(duration.slow * 1e3 * (level === "expressive" ? 2.6 : 2)),
+		animationEasing: "ease-out"
+	};
+}
+/** Legend under a chart. Interactive when `onToggle` is set: click or press Enter to hide a series. */
+function ChartLegend({ items, onToggle, className }) {
+	const { s, slots } = useChartParts();
+	if (!onToggle) return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "chart-legend",
+		className: s.legend({ class: [slots.legend, className] }),
+		"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]
+		}, item.key ?? i))
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "chart-legend",
+		"aria-label": "Series",
+		className: s.legend({ class: [slots.legend, className] }),
+		children: items.map((item, i) => {
+			const key = item.key ?? String(item.label ?? i);
+			return /* @__PURE__ */ jsx("li", {
+				className: s.legendItem({ class: slots.legendItem }),
+				children: /* @__PURE__ */ jsxs("button", {
+					type: "button",
+					"aria-pressed": !item.hidden,
+					className: s.legendButton({ class: slots.legendButton }),
+					onClick: () => onToggle(key),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: s.swatch({ class: slots.swatch }),
+						style: { background: item.color }
+					}), item.label]
+				})
+			}, key);
+		})
+	});
+}
+/** The themed tooltip every chart uses. Render it from recharts' `<Tooltip content>`. */
+function ChartTooltipCard({ active, payload, label, formatter, labelFormatter, total }) {
+	const { s, slots } = useChartParts();
+	if (!active || !payload?.length) return null;
+	const sum = payload.reduce((acc, item) => acc + (Number(item.value) || 0), 0);
+	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)),
+			total && payload.length > 1 && /* @__PURE__ */ jsxs("div", {
+				className: s.tooltipTotal({ class: slots.tooltipTotal }),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: s.tooltipName({ class: slots.tooltipName }),
+					children: "Total"
+				}), /* @__PURE__ */ jsx("span", {
+					className: s.tooltipValue({ class: slots.tooltipValue }),
+					children: formatter(sum)
+				})]
+			})
+		]
+	});
+}
+const ChartViewContext = createContext(null);
+/**
+* Keeps everything inside a hidden plot out of the tab order. Recharts makes some parts
+* focusable (brush handles, the Sankey surface); inside an `aria-hidden` plot they would be
+* reachable but unnamed. Keyboard and screen-reader users get the data from the table.
+*/
+function useUnfocusable(enabled) {
+	const ref = useRef(null);
+	useEffect(() => {
+		const plot = ref.current;
+		if (!enabled || !plot) return;
+		const apply = () => {
+			for (const node of plot.querySelectorAll("[tabindex]")) if (node.getAttribute("tabindex") !== "-1") node.setAttribute("tabindex", "-1");
+		};
+		apply();
+		const observer = new MutationObserver(apply);
+		observer.observe(plot, {
+			subtree: true,
+			childList: true,
+			attributeFilter: ["tabindex"]
+		});
+		return () => observer.disconnect();
+	}, [enabled]);
+	return ref;
+}
+function DataTable({ table }) {
+	const { s, slots } = useChartParts();
+	return /* @__PURE__ */ jsx("div", {
+		className: s.table({ class: slots.table }),
+		children: /* @__PURE__ */ jsxs(Table, { children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: table.columns.map((column) => /* @__PURE__ */ jsx(TableHead, {
+			scope: "col",
+			children: column
+		}, column)) }) }), /* @__PURE__ */ jsx(TableBody, { children: table.rows.map((row, i) => /* @__PURE__ */ jsx(TableRow, { children: row.map((cell, j) => j === 0 ? /* @__PURE__ */ jsx(TableHead, {
+			scope: "row",
+			className: "font-normal text-foreground",
+			children: cell
+		}, j) : /* @__PURE__ */ jsx(TableCell, {
+			className: "tabular-nums",
+			children: cell
+		}, j)) }, 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. Also renders loading, error and empty
+* states in place of the plot, and the visible table when a `ChartCard` asks for it.
+*/
+function ChartFrame({ title, description, hideTitle, className, legend, onLegendToggle, table, height = 240, isEmpty, loading, error, onRetry, empty, accessiblePlot, children }) {
+	const { s, slots } = useChartParts();
+	const titleId = useId();
+	const viewContext = useContext(ChartViewContext);
+	const plotRef = useUnfocusable(!accessiblePlot);
+	const asTable = viewContext?.view === "table";
+	const captionHidden = hideTitle || viewContext !== null;
+	let plot;
+	let state = false;
+	if (loading) {
+		state = true;
+		plot = /* @__PURE__ */ jsxs("div", {
+			className: s.state({ class: slots.state }),
+			style: { height },
+			role: "status",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: s.skeleton({ class: slots.skeleton }) }), /* @__PURE__ */ jsx("span", {
+				className: s.srOnly(),
+				children: "Loading chart…"
+			})]
+		});
+	} else if (error) {
+		state = true;
+		plot = /* @__PURE__ */ jsx("div", {
+			className: s.state({ class: slots.state }),
+			style: { minHeight: height },
+			children: /* @__PURE__ */ jsx(ErrorState, {
+				error,
+				onRetry,
+				title: "Couldn’t load this chart"
+			})
+		});
+	} else if (isEmpty) {
+		state = true;
+		plot = /* @__PURE__ */ jsx("div", {
+			className: s.state({ class: slots.state }),
+			style: { minHeight: height },
+			children: empty ?? /* @__PURE__ */ jsx(EmptyState, {
+				title: "No data yet",
+				description: "Nothing to show for this period."
+			})
+		});
+	} else if (asTable) {
+		state = true;
+		plot = /* @__PURE__ */ jsx(DataTable, { table });
+	}
+	return /* @__PURE__ */ jsxs("figure", {
+		"data-slot": "chart",
+		"aria-labelledby": titleId,
+		"aria-busy": loading || void 0,
+		className: s.root({ class: [slots.root, className] }),
+		children: [/* @__PURE__ */ jsxs("figcaption", {
+			className: captionHidden ? 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
+			})]
+		}), state ? plot : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("div", {
+				ref: plotRef,
+				"data-slot": "chart-plot",
+				className: s.plot({ class: slots.plot }),
+				"aria-hidden": accessiblePlot ? void 0 : "true",
+				children
+			}),
+			legend && legend.length > 1 && /* @__PURE__ */ jsx(ChartLegend, {
+				items: legend,
+				onToggle: onLegendToggle
+			}),
+			!accessiblePlot && /* @__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)) })
+				]
+			})
+		] })]
+	});
+}
+/** Hidden-series state for interactive legends, controlled or not. */
+function toggleIn(list, key, total) {
+	if (list.includes(key)) return list.filter((k) => k !== key);
+	if (list.length + 1 >= total) return [...list];
+	return [...list, key];
+}
+//#endregion
+export { ChartFrame, ChartLegend, ChartTooltipCard, ChartViewContext, categoryColor, defaultFormatter, resolveColor, toggleIn, useChartAnimation, useChartParts };

package/dist/patterns/chart/chart.styles.d.ts

@@ -0,0 +1,200 @@
+import { VariantProps } from "../../utils/tv.js";
+import { StylesEntry } from "../../utils/registry.js";
+//#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;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      state?: import("tailwind-variants").ClassValue;
+      skeleton?: 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;
+      tooltipTotal?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legendButton?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      state?: import("tailwind-variants").ClassValue;
+      skeleton?: 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;
+      tooltipTotal?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legendButton?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string[];
+  state: string;
+  skeleton: string;
+  legend: string;
+  legendItem: string;
+  legendButton: string[];
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  tooltipTotal: string;
+  center: string;
+  table: string;
+  srOnly: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      title?: import("tailwind-variants").ClassValue;
+      description?: import("tailwind-variants").ClassValue;
+      caption?: import("tailwind-variants").ClassValue;
+      state?: import("tailwind-variants").ClassValue;
+      skeleton?: 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;
+      tooltipTotal?: import("tailwind-variants").ClassValue;
+      center?: import("tailwind-variants").ClassValue;
+      table?: import("tailwind-variants").ClassValue;
+      srOnly?: import("tailwind-variants").ClassValue;
+      plot?: import("tailwind-variants").ClassValue;
+      legendButton?: import("tailwind-variants").ClassValue;
+      tooltip?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string[];
+  state: string;
+  skeleton: string;
+  legend: string;
+  legendItem: string;
+  legendButton: string[];
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  tooltipTotal: string;
+  center: string;
+  table: string;
+  srOnly: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  caption: string;
+  title: string;
+  description: string;
+  plot: string[];
+  state: string;
+  skeleton: string;
+  legend: string;
+  legendItem: string;
+  legendButton: string[];
+  swatch: string;
+  tooltip: string[];
+  tooltipLabel: string;
+  tooltipRow: string;
+  tooltipName: string;
+  tooltipValue: string;
+  tooltipTotal: string;
+  center: string;
+  table: string;
+  srOnly: string;
+}>>;
+export type ChartVariants = VariantProps<typeof chartStyles>;
+export declare const chartCardStyles: import("tailwind-variants").TVReturnType<{
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      heading?: import("tailwind-variants").ClassValue;
+      controls?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {
+  [x: string]: {
+    [x: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      heading?: import("tailwind-variants").ClassValue;
+      controls?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  header: string;
+  heading: string;
+  controls: string;
+  body: string;
+}, undefined, {
+  [key: string]: {
+    [key: string]: import("tailwind-variants").ClassValue | {
+      root?: import("tailwind-variants").ClassValue;
+      header?: import("tailwind-variants").ClassValue;
+      heading?: import("tailwind-variants").ClassValue;
+      controls?: import("tailwind-variants").ClassValue;
+      body?: import("tailwind-variants").ClassValue;
+    };
+  };
+} | {}, {
+  root: string;
+  header: string;
+  heading: string;
+  controls: string;
+  body: string;
+}, import("tailwind-variants").TVReturnTypeLike<unknown, {
+  root: string;
+  header: string;
+  heading: string;
+  controls: string;
+  body: string;
+}>>;
+export type ChartCardVariants = VariantProps<typeof chartCardStyles>;
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Chart: StylesEntry<typeof chartStyles>;
+    ChartCard: StylesEntry<typeof chartCardStyles>;
+  }
+}
+//#endregion