@polastack/design-system 0.1.6 → 0.1.8

package/dist/chunk-Q6XRSLLQ.js

@@ -0,0 +1,86 @@
+// src/tokens/colors.ts
+var colors = {
+  primary: {
+    50: "#f0fdfb",
+    100: "#cdfbf0",
+    200: "#9bf7e2",
+    300: "#61ebd0",
+    400: "#2fd4ba",
+    500: "#1BA491",
+    600: "#138575",
+    700: "#146b5f",
+    800: "#15564e",
+    900: "#134841",
+    950: "#042c28"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  success: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  warning: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  error: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  info: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  }
+};
+
+export {
+  colors
+};
+//# sourceMappingURL=chunk-Q6XRSLLQ.js.map

package/dist/chunk-Q6XRSLLQ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/tokens/colors.ts"],"sourcesContent":["/**\n * カラートークン定数\n * CSS変数（globals.css @theme）と同期。プログラム的アクセス用。\n * スタイリングにはTailwindユーティリティクラス（bg-primary-500等）を推奨。\n */\n\nexport const colors = {\n  primary: {\n    50: '#f0fdfb',\n    100: '#cdfbf0',\n    200: '#9bf7e2',\n    300: '#61ebd0',\n    400: '#2fd4ba',\n    500: '#1BA491',\n    600: '#138575',\n    700: '#146b5f',\n    800: '#15564e',\n    900: '#134841',\n    950: '#042c28',\n  },\n  neutral: {\n    50: '#fafafa',\n    100: '#f4f4f5',\n    200: '#e4e4e7',\n    300: '#d4d4d8',\n    400: '#a1a1aa',\n    500: '#71717a',\n    600: '#52525b',\n    700: '#3f3f46',\n    800: '#27272a',\n    900: '#18181b',\n    950: '#09090b',\n  },\n  success: {\n    50: '#f0fdf4',\n    100: '#dcfce7',\n    200: '#bbf7d0',\n    300: '#86efac',\n    400: '#4ade80',\n    500: '#22c55e',\n    600: '#16a34a',\n    700: '#15803d',\n    800: '#166534',\n    900: '#14532d',\n    950: '#052e16',\n  },\n  warning: {\n    50: '#fffbeb',\n    100: '#fef3c7',\n    200: '#fde68a',\n    300: '#fcd34d',\n    400: '#fbbf24',\n    500: '#f59e0b',\n    600: '#d97706',\n    700: '#b45309',\n    800: '#92400e',\n    900: '#78350f',\n    950: '#451a03',\n  },\n  error: {\n    50: '#fef2f2',\n    100: '#fee2e2',\n    200: '#fecaca',\n    300: '#fca5a5',\n    400: '#f87171',\n    500: '#ef4444',\n    600: '#dc2626',\n    700: '#b91c1c',\n    800: '#991b1b',\n    900: '#7f1d1d',\n    950: '#450a0a',\n  },\n  info: {\n    50: '#eff6ff',\n    100: '#dbeafe',\n    200: '#bfdbfe',\n    300: '#93c5fd',\n    400: '#60a5fa',\n    500: '#3b82f6',\n    600: '#2563eb',\n    700: '#1d4ed8',\n    800: '#1e40af',\n    900: '#1e3a8a',\n    950: '#172554',\n  },\n} as const;\n\nexport type ColorScale = keyof typeof colors;\nexport type ColorShade = keyof (typeof colors)['primary'];\n"],"mappings":";AAMO,IAAM,SAAS;AAAA,EACpB,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,SAAS;AAAA,IACP,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,IACL,KAAK;AAAA,EACP;AACF;","names":[]}

package/dist/index.d.ts

@@ -661,4 +661,79 @@ interface PullToRefreshProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const PullToRefresh: React.ForwardRefExoticComponent<PullToRefreshProps & React.RefAttributes<HTMLDivElement>>;
 
-export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };
+interface StatCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Metric label (e.g. "Total Revenue") */
+    label: string;
+    /** Formatted value (e.g. "¥1,234,567") */
+    value: string;
+    /** Trend text (e.g. "+12.5%", "-3") */
+    trend?: string;
+    /** Trend direction — controls color. Default: inferred from trend string. */
+    trendDirection?: 'up' | 'down' | 'neutral';
+    /** Optional icon rendered left of the value */
+    icon?: React.ReactNode;
+}
+declare const StatCard: React.ForwardRefExoticComponent<StatCardProps & React.RefAttributes<HTMLDivElement>>;
+
+interface ChartContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Chart title */
+    title: string;
+    /** Optional description below the title */
+    description?: string;
+    /** Actions rendered in the header (e.g. period selector, export button) */
+    actions?: React.ReactNode;
+}
+declare const ChartContainer: React.ForwardRefExoticComponent<ChartContainerProps & React.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Chart theme tokens for integrating charting libraries (Recharts, Chart.js, etc.)
+ * with the Polastack design system color palette.
+ *
+ * Usage with Recharts:
+ *   <Bar fill={chartColors.series[0]} />
+ *
+ * Usage with Chart.js:
+ *   datasets: [{ backgroundColor: chartColors.series }]
+ */
+/** Ordered color series for chart data — distinct, accessible, brand-consistent. */
+declare const chartColors: {
+    /**
+     * Primary data series palette (use in order for multi-series charts).
+     * Uses 400-level tones for a softer, more cohesive look in filled areas
+     * (bars, pie slices, etc.). Brand teal stays at 500 as the anchor.
+     */
+    readonly series: readonly ["#1BA491", "#60a5fa", "#a1a1aa", "#fbbf24", "#4ade80", "#fca5a5", "#61ebd0", "#93c5fd"];
+    /**
+     * Stronger series — for line charts and small marks (dots, strokes)
+     * where higher contrast is needed against the background.
+     */
+    readonly stroke: readonly ["#138575", "#2563eb", "#71717a", "#d97706", "#16a34a", "#ef4444", "#146b5f", "#1d4ed8"];
+    /** Semantic colors for status-based charts */
+    readonly semantic: {
+        readonly positive: "#4ade80";
+        readonly negative: "#f87171";
+        readonly neutral: "#a1a1aa";
+        readonly warning: "#fbbf24";
+        readonly info: "#60a5fa";
+        readonly primary: "#1BA491";
+    };
+    /** Light fills for area/background (light mode) — very subtle */
+    readonly areaLight: readonly ["#f0fdfb", "#eff6ff", "#f4f4f5", "#fffbeb", "#f0fdf4"];
+    /** Dark fills for area/background (dark mode) */
+    readonly areaDark: readonly ["#042c28", "#172554", "#27272a", "#451a03", "#052e16"];
+    /** Grid and axis colors (use CSS variables for dark mode compatibility) */
+    readonly grid: {
+        readonly light: "#e4e4e7";
+        readonly dark: "#3f3f46";
+    };
+    /** Text colors for labels and legends */
+    readonly text: {
+        readonly light: "#71717a";
+        readonly dark: "#a1a1aa";
+    };
+};
+type ChartColorSeries = typeof chartColors.series;
+type ChartStrokeColors = typeof chartColors.stroke;
+type ChartSemanticColors = typeof chartColors.semantic;
+
+export { ActiveFilters, type ActiveFiltersProps, AppShell, AppShellContent, AppShellFooter, AppShellHeader, type AppShellProps, AppShellSidebar, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarGroup, type AvatarGroupProps, AvatarImage, type AvatarImageProps, type AvatarProps, AvatarStatus, type AvatarStatusProps, type AvatarStatusType, BREAKPOINTS, Badge, type BadgeProps, BottomNavigation, BottomNavigationItem, type BottomNavigationItemProps, type BottomNavigationProps, type Breakpoint, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartColorSeries, ChartContainer, type ChartContainerProps, type ChartSemanticColors, type ChartStrokeColors, Checkbox, type CheckboxProps, Combobox, type ComboboxOption, type ComboboxProps, CommandPalette, CommandPaletteEmpty, CommandPaletteGroup, type CommandPaletteGroupProps, CommandPaletteItem, type CommandPaletteItemProps, type CommandPaletteProps, CommandPaletteSeparator, CommandPaletteShortcut, DataTable, DataTableColumnHeader, DataTablePagination, type DataTableProps, DataTableToolbar, DatePicker, type DatePickerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, type DisplayMode, Drawer, DrawerClose, DrawerContent, type DrawerContentProps, DrawerDescription, DrawerFooter, DrawerHeader, type DrawerProps, DrawerProvider, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFormField, type DynamicFormFieldProps, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, type EmptyStateProps, EmptyStateTitle, type FieldOption, type FieldType, FilterBar, FilterBarActions, FilterBarGroup, FilterChip, type FilterChipProps, FormActions, type FormActionsProps, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldProps, FormLabel, type FormLabelProps, FormLayout, type FormLayoutProps, FormMessage, type FormMessageProps, FormSection, type FormSectionProps, Input, type InputProps, InstallPrompt, type InstallPromptProps, Label, type LabelProps, NumberInput, type NumberInputProps, OfflineIndicator, type OfflineIndicatorProps, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PullToRefresh, type PullToRefreshProps, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, type ResolvedTheme, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, Spinner, type SpinnerProps, StatCard, type StatCardProps, Switch, type SwitchProps, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, type TabsListProps, TabsTrigger, Textarea, type TextareaProps, type Theme, ThemeProvider, type ThemeProviderProps, Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseThemeOptions, type UseThemeReturn, avatarVariants, badgeVariants, buttonVariants, chartColors, cn, createContext, formLayoutVariants, getFieldComponent, inputVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };

package/dist/index.js

@@ -1,3 +1,7 @@
+import {
+  colors
+} from "./chunk-Q6XRSLLQ.js";
+
 // src/lib/cn.ts
 import { clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
@@ -3672,6 +3676,168 @@ var PullToRefresh = React41.forwardRef(
   }
 );
 PullToRefresh.displayName = "PullToRefresh";
+
+// src/components/stat-card/stat-card.tsx
+import * as React42 from "react";
+import { jsx as jsx44, jsxs as jsxs25 } from "react/jsx-runtime";
+function inferDirection(trend) {
+  if (!trend) return "neutral";
+  if (trend.startsWith("+")) return "up";
+  if (trend.startsWith("-")) return "down";
+  return "neutral";
+}
+var TREND_STYLES = {
+  up: "text-success-600 dark:text-success-400",
+  down: "text-error-600 dark:text-error-400",
+  neutral: "text-[var(--color-on-surface-muted)]"
+};
+var TREND_ICONS = {
+  up: "M7 17l5-5 5 5",
+  down: "M7 7l5 5 5-5",
+  neutral: ""
+};
+var StatCard = React42.forwardRef(
+  ({ className, label, value, trend, trendDirection, icon, ...props }, ref) => {
+    const direction = trendDirection ?? inferDirection(trend);
+    return /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] p-5",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx44("p", { className: "text-xs font-medium text-[var(--color-on-surface-muted)] uppercase tracking-wider", children: label }),
+            icon && /* @__PURE__ */ jsx44("span", { className: "text-[var(--color-on-surface-muted)]", children: icon })
+          ] }),
+          /* @__PURE__ */ jsxs25("div", { className: "flex items-baseline gap-2 mt-2", children: [
+            /* @__PURE__ */ jsx44("span", { className: "text-2xl font-bold tabular-nums", children: value }),
+            trend && /* @__PURE__ */ jsxs25("span", { className: cn("inline-flex items-center gap-0.5 text-xs font-medium", TREND_STYLES[direction]), children: [
+              direction !== "neutral" && /* @__PURE__ */ jsx44("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx44("path", { d: TREND_ICONS[direction] }) }),
+              trend
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+StatCard.displayName = "StatCard";
+
+// src/components/chart-container/chart-container.tsx
+import * as React43 from "react";
+import { jsx as jsx45, jsxs as jsxs26 } from "react/jsx-runtime";
+var ChartContainer = React43.forwardRef(
+  ({ className, title, description, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs26(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-xl border border-[var(--color-border)] bg-[var(--color-surface-raised)] shadow-sm",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-4 p-5 pb-0", children: [
+          /* @__PURE__ */ jsxs26("div", { children: [
+            /* @__PURE__ */ jsx45("h3", { className: "text-sm font-semibold leading-none tracking-tight", children: title }),
+            description && /* @__PURE__ */ jsx45("p", { className: "mt-1 text-xs text-[var(--color-on-surface-muted)]", children: description })
+          ] }),
+          actions && /* @__PURE__ */ jsx45("div", { className: "flex items-center gap-2 shrink-0", children: actions })
+        ] }),
+        /* @__PURE__ */ jsx45("div", { className: "p-5", children })
+      ]
+    }
+  )
+);
+ChartContainer.displayName = "ChartContainer";
+
+// src/tokens/chart-theme.ts
+var chartColors = {
+  /**
+   * Primary data series palette (use in order for multi-series charts).
+   * Uses 400-level tones for a softer, more cohesive look in filled areas
+   * (bars, pie slices, etc.). Brand teal stays at 500 as the anchor.
+   */
+  series: [
+    colors.primary[500],
+    // #1BA491 brand teal (anchor)
+    colors.info[400],
+    // #60a5fa soft blue
+    colors.neutral[400],
+    // #a1a1aa muted gray
+    colors.warning[400],
+    // #fbbf24 soft amber
+    colors.success[400],
+    // #4ade80 soft green
+    colors.error[300],
+    // #fca5a5 soft coral
+    colors.primary[300],
+    // #61ebd0 light teal
+    colors.info[300]
+    // #93c5fd light blue
+  ],
+  /**
+   * Stronger series — for line charts and small marks (dots, strokes)
+   * where higher contrast is needed against the background.
+   */
+  stroke: [
+    colors.primary[600],
+    // #138575 deep teal
+    colors.info[600],
+    // #2563eb deep blue
+    colors.neutral[500],
+    // #71717a medium gray
+    colors.warning[600],
+    // #d97706 deep amber
+    colors.success[600],
+    // #16a34a deep green
+    colors.error[500],
+    // #ef4444 red
+    colors.primary[700],
+    // #146b5f dark teal
+    colors.info[700]
+    // #1d4ed8 dark blue
+  ],
+  /** Semantic colors for status-based charts */
+  semantic: {
+    positive: colors.success[400],
+    negative: colors.error[400],
+    neutral: colors.neutral[400],
+    warning: colors.warning[400],
+    info: colors.info[400],
+    primary: colors.primary[500]
+  },
+  /** Light fills for area/background (light mode) — very subtle */
+  areaLight: [
+    colors.primary[50],
+    colors.info[50],
+    colors.neutral[100],
+    colors.warning[50],
+    colors.success[50]
+  ],
+  /** Dark fills for area/background (dark mode) */
+  areaDark: [
+    colors.primary[950],
+    colors.info[950],
+    colors.neutral[800],
+    colors.warning[950],
+    colors.success[950]
+  ],
+  /** Grid and axis colors (use CSS variables for dark mode compatibility) */
+  grid: {
+    light: colors.neutral[200],
+    dark: colors.neutral[700]
+  },
+  /** Text colors for labels and legends */
+  text: {
+    light: colors.neutral[500],
+    dark: colors.neutral[400]
+  }
+};
 export {
   ActiveFilters,
   AppShell,
@@ -3695,6 +3861,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  ChartContainer,
   Checkbox,
   Combobox,
   CommandPalette,
@@ -3782,6 +3949,7 @@ export {
   Separator,
   Skeleton,
   Spinner,
+  StatCard,
   Switch,
   Table,
   TableBody,
@@ -3812,6 +3980,7 @@ export {
   avatarVariants,
   badgeVariants,
   buttonVariants,
+  chartColors,
   cn,
   createContext2 as createContext,
   formLayoutVariants,