@polastack/design-system 0.1.17 → 0.1.18

package/dist/index.d.ts

@@ -806,4 +806,63 @@ declare const chartColors: {
 type ChartCategoricalColors = typeof chartColors.categorical;
 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 ChartCategoricalColors, 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, PrintDivider, type PrintDividerProps, PrintDocument, type PrintDocumentProps, PrintField, PrintFieldGroup, type PrintFieldGroupProps, type PrintFieldProps, PrintFooter, type PrintFooterProps, PrintHeader, type PrintHeaderProps, PrintTable, PrintTableBody, type PrintTableBodyProps, PrintTableCell, type PrintTableCellProps, PrintTableFooter, type PrintTableFooterProps, PrintTableHead, type PrintTableHeadProps, PrintTableHeader, type PrintTableHeaderProps, type PrintTableProps, PrintTableRow, type PrintTableRowProps, 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, printDocumentVariants, printFieldGroupVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };
+/** Categorical palette — 8 curated dataviz colors */
+declare function getChartColors(): readonly string[];
+/** Subtle fill palette — 1:1 paired with categorical */
+declare function getChartSubtleColors(dark?: boolean): readonly string[];
+/** Theme object for Recharts axes, grid, and tooltip styling */
+declare function getChartTheme(): {
+    gridColor: string;
+    axisColor: string;
+    textColor: string;
+    tooltipBg: string;
+    tooltipBorder: string;
+    fontSize: number;
+    fontFamily: string;
+};
+
+/**
+ * ChartTooltip — Styled tooltip content for Recharts.
+ *
+ * Usage with Recharts:
+ * ```tsx
+ * <RechartsTooltip content={<ChartTooltip />} />
+ * ```
+ */
+interface ChartTooltipProps {
+    active?: boolean;
+    payload?: Array<{
+        name: string;
+        value: number;
+        color: string;
+        dataKey: string;
+    }>;
+    label?: string;
+    /** Custom value formatter (e.g. currency, percentage) */
+    formatter?: (value: number, name: string) => string;
+    /** Custom label formatter */
+    labelFormatter?: (label: string) => string;
+    className?: string;
+}
+declare const ChartTooltip: React.FC<ChartTooltipProps>;
+
+/**
+ * ChartLegend — Styled legend content for Recharts.
+ *
+ * Usage with Recharts:
+ * ```tsx
+ * <RechartsLegend content={<ChartLegend />} />
+ * ```
+ */
+interface ChartLegendProps {
+    payload?: Array<{
+        value: string;
+        color: string;
+        type?: string;
+        dataKey?: string;
+    }>;
+    className?: string;
+}
+declare const ChartLegend: React.FC<ChartLegendProps>;
+
+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 ChartCategoricalColors, ChartContainer, type ChartContainerProps, ChartLegend, type ChartLegendProps, type ChartSemanticColors, ChartTooltip, type ChartTooltipProps, 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, PrintDivider, type PrintDividerProps, PrintDocument, type PrintDocumentProps, PrintField, PrintFieldGroup, type PrintFieldGroupProps, type PrintFieldProps, PrintFooter, type PrintFooterProps, PrintHeader, type PrintHeaderProps, PrintTable, PrintTableBody, type PrintTableBodyProps, PrintTableCell, type PrintTableCellProps, PrintTableFooter, type PrintTableFooterProps, PrintTableHead, type PrintTableHeadProps, PrintTableHeader, type PrintTableHeaderProps, type PrintTableProps, PrintTableRow, type PrintTableRowProps, 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, getChartColors, getChartSubtleColors, getChartTheme, getFieldComponent, inputVariants, printDocumentVariants, printFieldGroupVariants, spinnerVariants, switchVariants, textareaVariants, toast, toastVariants, useAppShell, useBreakpoint, useDisplayMode, useFormField, useInstallPrompt, useOnlineStatus, useTheme$1 as useTheme, useTheme as useThemeContext, useToast, useViewportHeight };

package/dist/index.js

@@ -4041,6 +4041,88 @@ var chartColors = {
     // neutral-400
   }
 };
+
+// src/components/chart/chart-theme.ts
+var cssVar = (variable, fallback) => {
+  if (typeof window === "undefined") return fallback;
+  return getComputedStyle(document.documentElement).getPropertyValue(variable).trim() || fallback;
+};
+function getChartColors() {
+  return chartColors.categorical;
+}
+function getChartSubtleColors(dark = false) {
+  return dark ? chartColors.subtleDark : chartColors.subtle;
+}
+function getChartTheme() {
+  return {
+    gridColor: cssVar("--color-neutral-200", chartColors.grid.light),
+    axisColor: cssVar("--color-neutral-400", "#a1a1aa"),
+    textColor: cssVar("--color-neutral-500", chartColors.text.light),
+    tooltipBg: cssVar("--color-surface-raised", "#ffffff"),
+    tooltipBorder: cssVar("--color-border", "#e4e4e7"),
+    fontSize: 12,
+    fontFamily: 'Inter, "Noto Sans JP", sans-serif'
+  };
+}
+
+// src/components/chart/chart-tooltip.tsx
+import { jsx as jsx50, jsxs as jsxs29 } from "react/jsx-runtime";
+var ChartTooltip = ({
+  active,
+  payload,
+  label,
+  formatter,
+  labelFormatter,
+  className
+}) => {
+  if (!active || !payload?.length) return null;
+  const displayLabel = labelFormatter ? labelFormatter(String(label)) : label;
+  return /* @__PURE__ */ jsxs29(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-[var(--color-border)] bg-[var(--color-surface-raised)] px-3 py-2 shadow-md",
+        "text-xs",
+        className
+      ),
+      children: [
+        displayLabel && /* @__PURE__ */ jsx50("p", { className: "font-medium text-[var(--color-on-surface)] mb-1", children: displayLabel }),
+        /* @__PURE__ */ jsx50("div", { className: "flex flex-col gap-0.5", children: payload.map((entry, i) => /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx50(
+            "span",
+            {
+              className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+              style: { backgroundColor: entry.color }
+            }
+          ),
+          /* @__PURE__ */ jsx50("span", { className: "text-[var(--color-on-surface-muted)]", children: entry.name }),
+          /* @__PURE__ */ jsx50("span", { className: "ml-auto font-medium tabular-nums text-[var(--color-on-surface)]", children: formatter ? formatter(entry.value, entry.name) : entry.value.toLocaleString() })
+        ] }, i)) })
+      ]
+    }
+  );
+};
+ChartTooltip.displayName = "ChartTooltip";
+
+// src/components/chart/chart-legend.tsx
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+var ChartLegend = ({
+  payload,
+  className
+}) => {
+  if (!payload?.length) return null;
+  return /* @__PURE__ */ jsx51("div", { className: cn("flex flex-wrap items-center justify-center gap-x-4 gap-y-1 pt-3", className), children: payload.map((entry, i) => /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5 text-xs text-[var(--color-on-surface-muted)]", children: [
+    /* @__PURE__ */ jsx51(
+      "span",
+      {
+        className: "inline-block h-2.5 w-2.5 shrink-0 rounded-full",
+        style: { backgroundColor: entry.color }
+      }
+    ),
+    /* @__PURE__ */ jsx51("span", { children: entry.value })
+  ] }, i)) });
+};
+ChartLegend.displayName = "ChartLegend";
 export {
   ActiveFilters,
   AppShell,
@@ -4065,6 +4147,8 @@ export {
   CardHeader,
   CardTitle,
   ChartContainer,
+  ChartLegend,
+  ChartTooltip,
   Checkbox,
   Combobox,
   CommandPalette,
@@ -4200,6 +4284,9 @@ export {
   cn,
   createContext2 as createContext,
   formLayoutVariants,
+  getChartColors,
+  getChartSubtleColors,
+  getChartTheme,
   getFieldComponent,
   inputVariants,
   printDocumentVariants,