@matthieumordrel/chart-studio 0.2.2 → 0.2.4

package/dist/ui/chart-metric-selector.mjs

@@ -4,7 +4,7 @@ import { ChartDropdownPanel } from "./chart-dropdown.mjs";
 import { ChartMetricPanel } from "./chart-metric-panel.mjs";
 import { useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { ChevronDown, TrendingUpDown } from "lucide-react";
+import { ChevronDown, MoveVertical } from "lucide-react";
 //#region src/ui/chart-metric-selector.tsx
 /**
 * Metric selector — trigger button + popover wrapping ChartMetricPanel.
@@ -28,7 +28,7 @@ function ChartMetricSelector({ className }) {
 			className: `inline-flex h-7 items-center gap-1.5 rounded-lg border px-2.5 text-xs font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20 ${isActive ? "border-primary/30 bg-primary/5 text-primary shadow-sm shadow-primary/5 hover:bg-primary/8" : "border-border/50 bg-background text-muted-foreground shadow-sm hover:border-border hover:bg-muted/30 hover:shadow hover:text-foreground"}`,
 			"aria-label": "Metric",
 			children: [
-				/* @__PURE__ */ jsx(TrendingUpDown, { className: "h-3 w-3" }),
+				/* @__PURE__ */ jsx(MoveVertical, { className: "h-3 w-3" }),
 				/* @__PURE__ */ jsx("span", { children: label }),
 				isActive && !includeZeros && /* @__PURE__ */ jsx("span", {
 					className: "rounded bg-muted px-1 py-px text-[9px] font-normal text-muted-foreground",

package/dist/ui/chart-select.mjs

@@ -4,11 +4,6 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronDown } from "lucide-react";
 //#region src/ui/chart-select.tsx
 /**
-* Custom select dropdown — premium replacement for native <select> elements.
-* Uses fixed positioning so the options list works correctly even inside
-* overflow-hidden containers (e.g. the toolbar overflow panel).
-*/
-/**
 * Premium styled select dropdown with highlight-only selection styling.
 *
 * @property value - Currently selected value
@@ -17,7 +12,7 @@ import { ChevronDown } from "lucide-react";
 * @property ariaLabel - Accessible label for the trigger
 * @property className - Additional CSS classes
 */
-function ChartSelect({ value, options, onChange, ariaLabel, className }) {
+function ChartSelect({ value, options, onChange, ariaLabel, icon: Icon, hideIcon, className }) {
 	const [isOpen, setIsOpen] = useState(false);
 	const triggerRef = useRef(null);
 	const selected = options.find((o) => o.value === value);
@@ -37,10 +32,14 @@ function ChartSelect({ value, options, onChange, ariaLabel, className }) {
 			onClick: handleToggle,
 			className: "inline-flex h-7 items-center gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 text-xs font-medium text-foreground shadow-sm transition-all hover:border-border hover:bg-muted/30 hover:shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/20",
 			"aria-label": ariaLabel,
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "truncate",
-				children: selected?.label ?? value
-			}), /* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform ${isOpen ? "rotate-180" : ""}` })]
+			children: [
+				Icon && !hideIcon && /* @__PURE__ */ jsx(Icon, { className: "h-3 w-3 shrink-0 text-muted-foreground" }),
+				/* @__PURE__ */ jsx("span", {
+					className: "truncate",
+					children: selected?.label ?? value
+				}),
+				/* @__PURE__ */ jsx(ChevronDown, { className: `h-3 w-3 shrink-0 text-muted-foreground/60 transition-transform ${isOpen ? "rotate-180" : ""}` })
+			]
 		}), /* @__PURE__ */ jsx(ChartDropdownPanel, {
 			isOpen,
 			onClose: () => setIsOpen(false),

package/dist/ui/chart-source-switcher.d.mts

@@ -14,9 +14,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  * - Multi source → dropdown to switch between sources
  */
 declare function ChartSourceSwitcher({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { ChartSourceSwitcher };

package/dist/ui/chart-source-switcher.mjs

@@ -19,14 +19,14 @@ function formatCount(n) {
 * - Single source → read-only badge: "[icon] Jobs · 1,247 records"
 * - Multi source → dropdown to switch between sources
 */
-function ChartSourceSwitcher({ className }) {
+function ChartSourceSwitcher({ className, hideIcon }) {
 	const { hasMultipleSources, sources, activeSourceId, setActiveSource, recordCount } = useChartContext();
 	if (!hasMultipleSources) {
 		const label = sources[0]?.label ?? "Unnamed Source";
 		return /* @__PURE__ */ jsxs("div", {
 			className: `inline-flex items-center gap-1.5 whitespace-nowrap text-xs text-muted-foreground ${className ?? ""}`,
 			children: [
-				/* @__PURE__ */ jsx(Database, { className: "h-3 w-3 shrink-0" }),
+				!hideIcon && /* @__PURE__ */ jsx(Database, { className: "h-3 w-3 shrink-0" }),
 				/* @__PURE__ */ jsx("span", {
 					className: "font-medium text-foreground",
 					children: label
@@ -47,6 +47,8 @@ function ChartSourceSwitcher({ className }) {
 		})),
 		onChange: (v) => setActiveSource(v),
 		ariaLabel: "Data source",
+		icon: Database,
+		hideIcon,
 		className
 	});
 }

package/dist/ui/chart-time-bucket-selector.d.mts

@@ -7,9 +7,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 /** Custom dropdown to select time granularity. */
 declare function ChartTimeBucketSelector({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { ChartTimeBucketSelector };

package/dist/ui/chart-time-bucket-selector.mjs

@@ -2,6 +2,7 @@ import { CHART_TYPE_CONFIG } from "../core/chart-capabilities.mjs";
 import { useChartContext } from "./chart-context.mjs";
 import { ChartSelect } from "./chart-select.mjs";
 import { jsx } from "react/jsx-runtime";
+import { Clock } from "lucide-react";
 //#region src/ui/chart-time-bucket-selector.tsx
 /**
 * Time bucket selector — premium custom dropdown.
@@ -16,7 +17,7 @@ const BUCKET_LABELS = {
 	year: "Year"
 };
 /** Custom dropdown to select time granularity. */
-function ChartTimeBucketSelector({ className }) {
+function ChartTimeBucketSelector({ className, hideIcon }) {
 	const { chartType, isTimeSeries, timeBucket, setTimeBucket, availableTimeBuckets } = useChartContext();
 	if (!isTimeSeries || !CHART_TYPE_CONFIG[chartType].supportsTimeBucketing || availableTimeBuckets.length === 0) return null;
 	return /* @__PURE__ */ jsx(ChartSelect, {
@@ -27,6 +28,8 @@ function ChartTimeBucketSelector({ className }) {
 		})),
 		onChange: setTimeBucket,
 		ariaLabel: "Time granularity",
+		icon: Clock,
+		hideIcon,
 		className
 	});
 }

package/dist/ui/chart-toolbar-overflow.mjs

@@ -7,22 +7,25 @@ import { ChartMetricPanel } from "./chart-metric-panel.mjs";
 import { CONTROL_IDS, CONTROL_REGISTRY, SECTIONS } from "./toolbar-types.mjs";
 import { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { ArrowLeft, ChevronRight, Ellipsis, Eraser } from "lucide-react";
+import { ArrowLeft, BarChart3, Calendar, ChevronRight, Clock, Database, Ellipsis, Eraser, Filter, Layers, MoveHorizontal, MoveVertical } from "lucide-react";
 //#region src/ui/chart-toolbar-overflow.tsx
-/**
-* Overflow menu for toolbar controls — Notion-inspired configuration panel.
-*
-* Renders an ellipsis button that opens a panel with all non-pinned controls.
-* Simple controls (selects, toggle buttons) render inline in rows.
-* Complex controls (metric, filters, date range) show as clickable rows that
-* navigate to a full-page detail view within the panel (Notion-style drill-down).
-*/
 /** Controls that drill-down into a detail page instead of rendering inline. */
 const COMPLEX_CONTROLS = new Set([
 	"metric",
 	"filters",
 	"dateRange"
 ]);
+/** Icon for each control in the overflow menu. */
+const CONTROL_ICONS = {
+	source: Database,
+	xAxis: MoveHorizontal,
+	chartType: BarChart3,
+	groupBy: Layers,
+	timeBucket: Clock,
+	metric: MoveVertical,
+	filters: Filter,
+	dateRange: Calendar
+};
 /**
 * Ellipsis overflow menu with Notion-style drill-down navigation.
 * Main view shows all controls. Clicking a complex control replaces
@@ -157,16 +160,13 @@ function DetailPage({ controlId, onBack }) {
 * Used for selects and toggle buttons that work inline without popovers.
 */
 function SimpleControlRow({ controlId }) {
-	const entry = CONTROL_REGISTRY[controlId];
-	const Component = entry.component;
+	const Component = CONTROL_REGISTRY[controlId].component;
+	const Icon = CONTROL_ICONS[controlId];
 	return /* @__PURE__ */ jsxs("div", {
-		className: "flex items-center gap-3 rounded-lg px-1 py-1.5",
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "shrink-0 text-xs text-muted-foreground",
-			children: entry.label
-		}), /* @__PURE__ */ jsx("div", {
-			className: "ml-auto flex min-w-0 items-center",
-			children: /* @__PURE__ */ jsx(Component, {})
+		className: "flex items-center gap-3 rounded-lg px-2 py-1.5",
+		children: [Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }), /* @__PURE__ */ jsx("div", {
+			className: "flex min-w-0 items-center",
+			children: /* @__PURE__ */ jsx(Component, { hideIcon: true })
 		})]
 	});
 }
@@ -175,17 +175,14 @@ function SimpleControlRow({ controlId }) {
 * Shows the control label, current value summary, and a chevron.
 */
 function ComplexControlRow({ controlId, onNavigate }) {
-	const entry = CONTROL_REGISTRY[controlId];
+	const Icon = CONTROL_ICONS[controlId];
 	return /* @__PURE__ */ jsxs("button", {
 		onClick: onNavigate,
 		className: "flex w-full items-center gap-3 rounded-lg px-2 py-2 text-left transition-colors hover:bg-muted/50",
 		children: [
+			Icon && /* @__PURE__ */ jsx(Icon, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground" }),
 			/* @__PURE__ */ jsx("div", {
-				className: "shrink-0 text-xs text-muted-foreground",
-				children: entry.label
-			}),
-			/* @__PURE__ */ jsx("div", {
-				className: "ml-auto truncate text-xs text-foreground",
+				className: "truncate text-xs text-foreground",
 				children: /* @__PURE__ */ jsx(ControlSummary, { controlId })
 			}),
 			/* @__PURE__ */ jsx(ChevronRight, { className: "h-3 w-3 shrink-0 text-muted-foreground" })
@@ -194,14 +191,39 @@ function ComplexControlRow({ controlId, onNavigate }) {
 }
 /** Summary text for a complex control in the main menu. */
 function ControlSummary({ controlId }) {
-	const { metric, columns, filters, dateRangeFilter } = useChartContext();
+	const { metric, columns, filters, dateRange, dateRangePreset } = useChartContext();
 	switch (controlId) {
 		case "metric": return /* @__PURE__ */ jsx("span", { children: getMetricLabel(metric, columns) });
 		case "filters": {
 			const count = [...filters.values()].reduce((sum, set) => sum + set.size, 0);
 			return /* @__PURE__ */ jsx("span", { children: count > 0 ? `${count} active` : "None" });
 		}
-		case "dateRange": return /* @__PURE__ */ jsx("span", { children: resolvePresetLabel(dateRangeFilter) });
+		case "dateRange": {
+			const label = resolvePresetLabel(dateRangePreset);
+			if (dateRange?.min && dateRange?.max) {
+				const fmt = (d) => d.toLocaleDateString("en-US", {
+					month: "short",
+					day: "numeric",
+					year: "2-digit"
+				});
+				return /* @__PURE__ */ jsxs("span", { children: [
+					label,
+					/* @__PURE__ */ jsx("span", {
+						className: "text-muted-foreground/40",
+						children: " · "
+					}),
+					/* @__PURE__ */ jsxs("span", {
+						className: "font-normal",
+						children: [
+							fmt(dateRange.min),
+							" – ",
+							fmt(dateRange.max)
+						]
+					})
+				] });
+			}
+			return /* @__PURE__ */ jsx("span", { children: label });
+		}
 		default: return null;
 	}
 }

package/dist/ui/chart-type-selector.d.mts

@@ -2,9 +2,14 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/ui/chart-type-selector.d.ts
 /**
- * Chart type selector — inline toggle buttons for bar/line/area/pie/donut.
+ * Chart type selector — inline toggle buttons with variant dropdown.
+ *
+ * Primary types: Bar, Line, Area, Pie, Donut.
+ * Types with variants show a small chevron that opens a dropdown:
+ *   Bar  → Stacked, Grouped, 100%
+ *   Area → Stacked, 100%
  */
-/** Inline toggle buttons to select the chart type. */
+/** Inline toggle buttons with variant dropdown for chart type selection. */
 declare function ChartTypeSelector({
   className
 }: {

package/dist/ui/chart-type-selector.mjs

@@ -1,32 +1,167 @@
 import { useChartContext } from "./chart-context.mjs";
-import { jsx } from "react/jsx-runtime";
+import { ChartDropdownPanel } from "./chart-dropdown.mjs";
+import { useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
 //#region src/ui/chart-type-selector.tsx
-/** Labels for each chart type. */
-const CHART_TYPE_LABELS = {
-	bar: "Bar",
-	line: "Line",
-	area: "Area",
-	pie: "Pie",
-	donut: "Donut"
-};
-/** Inline toggle buttons to select the chart type. */
+/**
+* Chart type selector — inline toggle buttons with variant dropdown.
+*
+* Primary types: Bar, Line, Area, Pie, Donut.
+* Types with variants show a small chevron that opens a dropdown:
+*   Bar  → Stacked, Grouped, 100%
+*   Area → Stacked, 100%
+*/
+const CHART_TYPE_GROUPS = [
+	{
+		primary: "bar",
+		label: "Bar",
+		variants: [
+			{
+				type: "bar",
+				label: "Stacked"
+			},
+			{
+				type: "grouped-bar",
+				label: "Grouped"
+			},
+			{
+				type: "percent-bar",
+				label: "100%"
+			}
+		]
+	},
+	{
+		primary: "line",
+		label: "Line",
+		variants: []
+	},
+	{
+		primary: "area",
+		label: "Area",
+		variants: [{
+			type: "area",
+			label: "Stacked"
+		}, {
+			type: "percent-area",
+			label: "100%"
+		}]
+	},
+	{
+		primary: "pie",
+		label: "Pie",
+		variants: []
+	},
+	{
+		primary: "donut",
+		label: "Donut",
+		variants: []
+	}
+];
+function buildVisibleGroups(availableChartTypes) {
+	const available = new Set(availableChartTypes);
+	const result = [];
+	for (const group of CHART_TYPE_GROUPS) if (group.variants.length === 0) {
+		if (available.has(group.primary)) result.push({
+			...group,
+			visibleVariants: []
+		});
+	} else {
+		const visibleVariants = group.variants.filter((v) => available.has(v.type));
+		if (visibleVariants.length > 0) result.push({
+			...group,
+			visibleVariants
+		});
+	}
+	return result;
+}
+function findGroupForType(chartType) {
+	return CHART_TYPE_GROUPS.find((g) => g.primary === chartType || g.variants.some((v) => v.type === chartType));
+}
+/** Inline toggle buttons with variant dropdown for chart type selection. */
 function ChartTypeSelector({ className }) {
 	const { chartType, setChartType, availableChartTypes } = useChartContext();
-	if (availableChartTypes.length <= 1) return null;
+	const [openGroup, setOpenGroup] = useState(null);
+	const visibleGroups = useMemo(() => buildVisibleGroups(availableChartTypes), [availableChartTypes]);
+	const activeGroup = useMemo(() => {
+		const staticGroup = findGroupForType(chartType);
+		if (!staticGroup) return void 0;
+		return visibleGroups.find((g) => g.primary === staticGroup.primary);
+	}, [chartType, visibleGroups]);
+	if (visibleGroups.length <= 1 && (activeGroup?.visibleVariants.length ?? 0) <= 1) return null;
 	return /* @__PURE__ */ jsx("div", {
-		className: `inline-flex items-center rounded-lg border border-border/50 bg-muted/50 p-0.5 shadow-sm ${className ?? ""}`,
+		className: `inline-flex items-center rounded-lg border border-border/50 bg-background p-0.5 shadow-sm ${className ?? ""}`,
 		role: "tablist",
 		"aria-label": "Chart type",
-		children: availableChartTypes.map((type) => {
-			const isActive = type === chartType;
-			return /* @__PURE__ */ jsx("button", {
+		children: visibleGroups.map((group) => {
+			const isActive = activeGroup?.primary === group.primary;
+			return /* @__PURE__ */ jsx(ChartTypeButton, {
+				group,
+				isActive,
+				hasVariants: group.visibleVariants.length > 1,
+				isDropdownOpen: openGroup === group.primary,
+				chartType,
+				onSelect: () => {
+					if (isActive) return;
+					if (availableChartTypes.includes(group.primary)) setChartType(group.primary);
+					else if (group.visibleVariants.length > 0) setChartType(group.visibleVariants[0].type);
+				},
+				onToggleDropdown: () => setOpenGroup(openGroup === group.primary ? null : group.primary),
+				onSelectVariant: (type) => {
+					setChartType(type);
+					setOpenGroup(null);
+				},
+				onCloseDropdown: () => setOpenGroup(null)
+			}, group.primary);
+		})
+	});
+}
+function ChartTypeButton({ group, isActive, hasVariants, isDropdownOpen, chartType, onSelect, onToggleDropdown, onSelectVariant, onCloseDropdown }) {
+	const triggerRef = useRef(null);
+	if (!hasVariants) return /* @__PURE__ */ jsx("button", {
+		role: "tab",
+		"aria-selected": isActive,
+		onClick: onSelect,
+		className: `rounded-md px-2.5 py-1 text-xs font-medium transition-all ${isActive ? "bg-primary/10 text-primary" : "text-muted-foreground hover:bg-muted/40 hover:text-foreground"}`,
+		children: group.label
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref: triggerRef,
+		className: `relative flex items-center rounded-md transition-all ${isActive ? "bg-primary/10" : "hover:bg-muted/40"}`,
+		children: [
+			/* @__PURE__ */ jsx("button", {
 				role: "tab",
 				"aria-selected": isActive,
-				onClick: () => setChartType(type),
-				className: `rounded-md px-2.5 py-1 text-xs font-medium transition-all ${isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:bg-background/50 hover:text-foreground"}`,
-				children: CHART_TYPE_LABELS[type]
-			}, type);
-		})
+				onClick: () => {
+					if (isActive) onToggleDropdown();
+					else onSelect();
+				},
+				className: `py-1 pl-2.5 pr-1 text-xs font-medium transition-colors ${isActive ? "text-primary" : "text-muted-foreground hover:text-foreground"}`,
+				children: group.label
+			}),
+			/* @__PURE__ */ jsx("button", {
+				"aria-label": `${group.label} options`,
+				onClick: (e) => {
+					e.stopPropagation();
+					if (!isActive) onSelect();
+					onToggleDropdown();
+				},
+				className: `py-1 pr-2 pl-0.5 transition-colors ${isActive ? "text-primary/60 hover:text-primary" : "text-muted-foreground/40 hover:text-muted-foreground"}`,
+				children: /* @__PURE__ */ jsx(ChevronDown, { className: `h-2.5 w-2.5 transition-transform ${isDropdownOpen ? "rotate-180" : ""}` })
+			}),
+			/* @__PURE__ */ jsx(ChartDropdownPanel, {
+				isOpen: isDropdownOpen,
+				onClose: onCloseDropdown,
+				triggerRef,
+				minWidth: "trigger",
+				className: "p-1",
+				children: group.visibleVariants.map((variant) => /* @__PURE__ */ jsx("button", {
+					onClick: () => onSelectVariant(variant.type),
+					className: `flex w-full items-center rounded-md px-2.5 py-1.5 text-xs transition-colors ${variant.type === chartType ? "bg-primary/8 font-medium text-primary" : "text-foreground hover:bg-muted/60"}`,
+					children: variant.label
+				}, variant.type))
+			})
+		]
 	});
 }
 //#endregion

package/dist/ui/chart-x-axis-selector.d.mts

@@ -6,9 +6,11 @@ import * as react_jsx_runtime0 from "react/jsx-runtime";
  */
 /** Custom dropdown to select the X-axis column. */
 declare function ChartXAxisSelector({
-  className
+  className,
+  hideIcon
 }: {
   className?: string;
+  hideIcon?: boolean;
 }): react_jsx_runtime0.JSX.Element | null;
 //#endregion
 export { ChartXAxisSelector };

package/dist/ui/chart-x-axis-selector.mjs

@@ -1,12 +1,13 @@
 import { useChartContext } from "./chart-context.mjs";
 import { ChartSelect } from "./chart-select.mjs";
 import { jsx } from "react/jsx-runtime";
+import { MoveHorizontal } from "lucide-react";
 //#region src/ui/chart-x-axis-selector.tsx
 /**
 * X-axis selector — premium custom dropdown for choosing which column drives the X-axis.
 */
 /** Custom dropdown to select the X-axis column. */
-function ChartXAxisSelector({ className }) {
+function ChartXAxisSelector({ className, hideIcon }) {
 	const { xAxisId, setXAxis, availableXAxes } = useChartContext();
 	if (availableXAxes.length <= 1) return null;
 	const options = availableXAxes.map((col) => ({
@@ -18,6 +19,8 @@ function ChartXAxisSelector({ className }) {
 		options,
 		onChange: (v) => setXAxis(v),
 		ariaLabel: "X-axis",
+		icon: MoveHorizontal,
+		hideIcon,
 		className
 	});
 }

package/dist/ui/theme.css

@@ -1,62 +1,67 @@
 @source "./";
 
 @theme inline {
-  --color-background: hsl(var(--cs-background));
-  --color-foreground: hsl(var(--cs-foreground));
-  --color-card: hsl(var(--cs-card));
-  --color-card-foreground: hsl(var(--cs-card-foreground));
-  --color-popover: hsl(var(--cs-popover));
-  --color-popover-foreground: hsl(var(--cs-popover-foreground));
-  --color-primary: hsl(var(--cs-primary));
-  --color-primary-foreground: hsl(var(--cs-primary-foreground));
-  --color-muted: hsl(var(--cs-muted));
-  --color-muted-foreground: hsl(var(--cs-muted-foreground));
-  --color-border: hsl(var(--cs-border));
-  --color-input: hsl(var(--cs-input));
-  --color-ring: hsl(var(--cs-ring));
+  --color-background: var(--cs-background);
+  --color-foreground: var(--cs-foreground);
+  --color-card: var(--cs-card);
+  --color-card-foreground: var(--cs-card-foreground);
+  --color-popover: var(--cs-popover);
+  --color-popover-foreground: var(--cs-popover-foreground);
+  --color-primary: var(--cs-primary);
+  --color-primary-foreground: var(--cs-primary-foreground);
+  --color-muted: var(--cs-muted);
+  --color-muted-foreground: var(--cs-muted-foreground);
+  --color-border: var(--cs-border);
+  --color-input: var(--cs-input);
+  --color-ring: var(--cs-ring);
+  --radius-sm: calc(var(--cs-radius) - 4px);
+  --radius-md: calc(var(--cs-radius) - 2px);
+  --radius-lg: var(--cs-radius);
+  --radius-xl: calc(var(--cs-radius) + 4px);
 }
 
 :root {
   color-scheme: light;
-  --cs-background: var(--background, 220 16% 97.5%);
-  --cs-foreground: var(--foreground, 224 71% 4%);
-  --cs-card: var(--card, 0 0% 100%);
-  --cs-card-foreground: var(--card-foreground, 224 71% 4%);
-  --cs-popover: var(--popover, 0 0% 100%);
-  --cs-popover-foreground: var(--popover-foreground, 224 71% 4%);
-  --cs-primary: var(--primary, 245 72% 57%);
-  --cs-primary-foreground: var(--primary-foreground, 0 0% 100%);
-  --cs-muted: var(--muted, 220 14% 93.5%);
-  --cs-muted-foreground: var(--muted-foreground, 220 9% 46%);
-  --cs-border: var(--border, 220 13% 90%);
-  --cs-input: var(--input, 220 13% 90%);
-  --cs-ring: var(--ring, 245 72% 57%);
-  --cs-chart-1: 245 72% 57%;
-  --cs-chart-2: 271 72% 55%;
-  --cs-chart-3: 330 68% 54%;
-  --cs-chart-4: 170 65% 38%;
-  --cs-chart-5: 30 90% 54%;
+  --cs-radius: var(--radius, 0.25rem);
+  --cs-background: var(--background, oklch(0.980 0.002 264.545));
+  --cs-foreground: var(--foreground, oklch(0.128 0.027 261.594));
+  --cs-card: var(--card, oklch(1.000 0 0));
+  --cs-card-foreground: var(--card-foreground, oklch(0.128 0.027 261.594));
+  --cs-popover: var(--popover, oklch(1.000 0 0));
+  --cs-popover-foreground: var(--popover-foreground, oklch(0.128 0.027 261.594));
+  --cs-primary: var(--primary, oklch(0.501 0.228 277.992));
+  --cs-primary-foreground: var(--primary-foreground, oklch(1.000 0 0));
+  --cs-muted: var(--muted, oklch(0.948 0.004 264.536));
+  --cs-muted-foreground: var(--muted-foreground, oklch(0.550 0.023 264.362));
+  --cs-border: var(--border, oklch(0.920 0.006 264.529));
+  --cs-input: var(--input, oklch(0.920 0.006 264.529));
+  --cs-ring: var(--ring, oklch(0.501 0.228 277.992));
+  --cs-chart-1: oklch(0.501 0.228 277.992);
+  --cs-chart-2: oklch(0.550 0.235 302.715);
+  --cs-chart-3: oklch(0.609 0.206 354.673);
+  --cs-chart-4: oklch(0.635 0.109 178.228);
+  --cs-chart-5: oklch(0.732 0.166 58.213);
 }
 
 :root[data-theme='dark'],
 .dark {
   color-scheme: dark;
-  --cs-background: var(--background, 228 25% 7%);
-  --cs-foreground: var(--foreground, 220 15% 93%);
-  --cs-card: var(--card, 228 22% 10%);
-  --cs-card-foreground: var(--card-foreground, 220 15% 93%);
-  --cs-popover: var(--popover, 228 20% 12%);
-  --cs-popover-foreground: var(--popover-foreground, 220 15% 93%);
-  --cs-primary: var(--primary, 245 80% 67%);
-  --cs-primary-foreground: var(--primary-foreground, 0 0% 100%);
-  --cs-muted: var(--muted, 228 16% 14%);
-  --cs-muted-foreground: var(--muted-foreground, 220 10% 54%);
-  --cs-border: var(--border, 228 14% 15%);
-  --cs-input: var(--input, 228 14% 18%);
-  --cs-ring: var(--ring, 245 80% 67%);
-  --cs-chart-1: 245 85% 70%;
-  --cs-chart-2: 271 82% 68%;
-  --cs-chart-3: 190 85% 55%;
-  --cs-chart-4: 155 72% 50%;
-  --cs-chart-5: 38 90% 62%;
+  --cs-background: var(--background, oklch(0.171 0.015 273.761));
+  --cs-foreground: var(--foreground, oklch(0.944 0.005 264.534));
+  --cs-card: var(--card, oklch(0.203 0.018 273.739));
+  --cs-card-foreground: var(--card-foreground, oklch(0.944 0.005 264.534));
+  --cs-popover: var(--popover, oklch(0.224 0.019 273.793));
+  --cs-popover-foreground: var(--popover-foreground, oklch(0.944 0.005 264.534));
+  --cs-primary: var(--primary, oklch(0.597 0.196 282.474));
+  --cs-primary-foreground: var(--primary-foreground, oklch(1.000 0 0));
+  --cs-muted: var(--muted, oklch(0.246 0.018 274.033));
+  --cs-muted-foreground: var(--muted-foreground, oklch(0.618 0.025 264.372));
+  --cs-border: var(--border, oklch(0.258 0.016 274.161));
+  --cs-input: var(--input, oklch(0.287 0.019 274.112));
+  --cs-ring: var(--ring, oklch(0.597 0.196 282.474));
+  --cs-chart-1: oklch(0.625 0.188 283.272);
+  --cs-chart-2: oklch(0.660 0.198 305.491);
+  --cs-chart-3: oklch(0.785 0.132 215.571);
+  --cs-chart-4: oklch(0.789 0.176 158.514);
+  --cs-chart-5: oklch(0.815 0.143 77.593);
 }