@polastack/design-system 0.1.6 → 0.1.7

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,69 @@ 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) */
+    readonly series: readonly ["#1BA491", "#3b82f6", "#f59e0b", "#ef4444", "#22c55e", "#61ebd0", "#93c5fd", "#fcd34d"];
+    /** Semantic colors for status-based charts */
+    readonly semantic: {
+        readonly positive: "#22c55e";
+        readonly negative: "#ef4444";
+        readonly neutral: "#a1a1aa";
+        readonly warning: "#f59e0b";
+        readonly info: "#3b82f6";
+        readonly primary: "#1BA491";
+    };
+    /** Light fills for area/background (light mode) */
+    readonly areaLight: readonly ["#cdfbf0", "#dbeafe", "#fef3c7", "#fee2e2", "#dcfce7"];
+    /** Dark fills for area/background (dark mode) */
+    readonly areaDark: readonly ["#134841", "#1e3a8a", "#78350f", "#7f1d1d", "#14532d"];
+    /** 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 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, 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,142 @@ 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) */
+  series: [
+    colors.primary[500],
+    // #1BA491 teal
+    colors.info[500],
+    // #3b82f6 blue
+    colors.warning[500],
+    // #f59e0b amber
+    colors.error[500],
+    // #ef4444 red
+    colors.success[500],
+    // #22c55e green
+    colors.primary[300],
+    // #61ebd0 light teal
+    colors.info[300],
+    // #93c5fd light blue
+    colors.warning[300]
+    // #fcd34d light amber
+  ],
+  /** Semantic colors for status-based charts */
+  semantic: {
+    positive: colors.success[500],
+    negative: colors.error[500],
+    neutral: colors.neutral[400],
+    warning: colors.warning[500],
+    info: colors.info[500],
+    primary: colors.primary[500]
+  },
+  /** Light fills for area/background (light mode) */
+  areaLight: [
+    colors.primary[100],
+    colors.info[100],
+    colors.warning[100],
+    colors.error[100],
+    colors.success[100]
+  ],
+  /** Dark fills for area/background (dark mode) */
+  areaDark: [
+    colors.primary[900],
+    colors.info[900],
+    colors.warning[900],
+    colors.error[900],
+    colors.success[900]
+  ],
+  /** 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 +3835,7 @@ export {
   CardFooter,
   CardHeader,
   CardTitle,
+  ChartContainer,
   Checkbox,
   Combobox,
   CommandPalette,
@@ -3782,6 +3923,7 @@ export {
   Separator,
   Skeleton,
   Spinner,
+  StatCard,
   Switch,
   Table,
   TableBody,
@@ -3812,6 +3954,7 @@ export {
   avatarVariants,
   badgeVariants,
   buttonVariants,
+  chartColors,
   cn,
   createContext2 as createContext,
   formLayoutVariants,