@juv/codego-react-ui 1.1.1 → 1.1.3

package/dist/index.cjs

@@ -34,6 +34,7 @@ __export(index_exports, {
   Badge: () => Badge,
   Breadcrumb: () => Breadcrumb,
   Button: () => Button,
+  COLOR_PALETTE: () => COLOR_PALETTE,
   Calendar: () => Calendar,
   Card: () => Card,
   CardContent: () => CardContent,
@@ -103,6 +104,7 @@ __export(index_exports, {
   Tabs: () => Tabs,
   TagInput: () => TagInput,
   Textarea: () => Textarea,
+  ThemeProvider: () => ThemeProvider,
   Timeline: () => Timeline,
   ToastProvider: () => ToastProvider,
   ToggleSwitch: () => ToggleSwitch,
@@ -111,6 +113,7 @@ __export(index_exports, {
   TreeView: () => TreeView,
   Widget: () => Widget,
   Wizard: () => Wizard,
+  useTheme: () => useTheme,
   useToast: () => useToast
 });
 module.exports = __toCommonJS(index_exports);
@@ -1656,12 +1659,12 @@ function DonutChart({ data, color, height, showValues, unit }) {
   const total = data.reduce((s, d) => s + d.value, 0) || 1;
   const cx = 80, cy = height / 2, r = Math.min(cx, cy) - 10, inner = r * 0.58;
   let angle = -Math.PI / 2;
-  const defaultColors2 = ["primary", "info", "success", "warning", "danger"];
+  const defaultColors = ["primary", "info", "success", "warning", "danger"];
   const slices = data.map((d, i) => {
     const sweep = d.value / total * 2 * Math.PI;
     const start = angle;
     angle += sweep;
-    const c = d.color ?? defaultColors2[i % defaultColors2.length];
+    const c = d.color ?? defaultColors[i % defaultColors.length];
     return { ...d, start, sweep, color: c };
   });
   const arc = (cx2, cy2, r2, start, end) => {
@@ -5247,24 +5250,36 @@ function Tooltip({
 
 // src/components/theme-provider.tsx
 var import_react = require("react");
+
+// src/components/conf/settingConfig.json
+var settingConfig_default = {
+  theme: "dark",
+  fontSize: "16px",
+  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  colors: {
+    primary: "#8b5cf6",
+    primaryHover: "#7c3aed",
+    secondary: "#171717",
+    secondaryHover: "#262626",
+    info: "#3b82f6",
+    infoHover: "#2563eb",
+    warning: "#f59e0b",
+    warningHover: "#d97706",
+    danger: "#ef4444",
+    dangerHover: "#dc2626"
+  }
+};
+
+// src/components/theme-provider.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var defaultColors = {
-  primary: "#8b5cf6",
-  primaryHover: "#7c3aed",
-  secondary: "#171717",
-  secondaryHover: "#262626",
-  info: "#3b82f6",
-  infoHover: "#2563eb",
-  warning: "#f59e0b",
-  warningHover: "#d97706",
-  danger: "#ef4444",
-  dangerHover: "#dc2626"
+var configDefaults = {
+  theme: settingConfig_default.theme,
+  fontSize: settingConfig_default.fontSize,
+  fontFamily: settingConfig_default.fontFamily,
+  colors: settingConfig_default.colors
 };
 var initialState = {
-  theme: "system",
-  colors: defaultColors,
-  fontSize: "16px",
-  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  ...configDefaults,
   setTheme: () => null,
   setColors: () => null,
   setFontSize: () => null,
@@ -5274,26 +5289,60 @@ var initialState = {
 var ThemeProviderContext = (0, import_react.createContext)(initialState);
 var COLOR_PALETTE = [
   { base: "#6366f1", hover: "#4f46e5" },
-  // Indigo
   { base: "#8b5cf6", hover: "#7c3aed" },
-  // Violet
   { base: "#3b82f6", hover: "#2563eb" },
-  // Blue
   { base: "#10b981", hover: "#059669" },
-  // Emerald
   { base: "#22c55e", hover: "#16a34a" },
-  // Green
   { base: "#eab308", hover: "#ca8a04" },
-  // Yellow
   { base: "#f59e0b", hover: "#d97706" },
-  // Amber
   { base: "#f97316", hover: "#ea580c" },
-  // Orange
   { base: "#ef4444", hover: "#dc2626" },
-  // Red
   { base: "#ec4899", hover: "#db2777" }
-  // Pink
 ];
+function ThemeProvider({
+  children,
+  storageKey = "codego-ui-theme-settings",
+  ...props
+}) {
+  const [settings, setSettings] = (0, import_react.useState)(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) return { ...configDefaults, ...JSON.parse(stored) };
+    } catch {
+    }
+    return configDefaults;
+  });
+  (0, import_react.useEffect)(() => {
+    localStorage.setItem(storageKey, JSON.stringify(settings));
+  }, [settings, storageKey]);
+  (0, import_react.useEffect)(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    const resolved = settings.theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : settings.theme;
+    root.classList.add(resolved);
+    root.style.setProperty("--primary", settings.colors.primary);
+    root.style.setProperty("--primary-hover", settings.colors.primaryHover);
+    root.style.setProperty("--secondary", settings.colors.secondary);
+    root.style.setProperty("--secondary-hover", settings.colors.secondaryHover);
+    root.style.setProperty("--info", settings.colors.info);
+    root.style.setProperty("--info-hover", settings.colors.infoHover);
+    root.style.setProperty("--warning", settings.colors.warning);
+    root.style.setProperty("--warning-hover", settings.colors.warningHover);
+    root.style.setProperty("--danger", settings.colors.danger);
+    root.style.setProperty("--danger-hover", settings.colors.dangerHover);
+    root.style.setProperty("font-size", settings.fontSize);
+    root.style.setProperty("--font-sans", settings.fontFamily);
+  }, [settings]);
+  const value = {
+    ...settings,
+    setTheme: (theme) => setSettings((s) => ({ ...s, theme })),
+    setColors: (colors) => setSettings((s) => ({ ...s, colors: { ...s.colors, ...colors } })),
+    setFontSize: (fontSize) => setSettings((s) => ({ ...s, fontSize })),
+    setFontFamily: (fontFamily) => setSettings((s) => ({ ...s, fontFamily })),
+    resetSettings: () => setSettings(configDefaults)
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
+}
 var useTheme = () => {
   const context = (0, import_react.useContext)(ThemeProviderContext);
   if (context === void 0)
@@ -7956,6 +8005,7 @@ function Wizard({
   Badge,
   Breadcrumb,
   Button,
+  COLOR_PALETTE,
   Calendar,
   Card,
   CardContent,
@@ -8025,6 +8075,7 @@ function Wizard({
   Tabs,
   TagInput,
   Textarea,
+  ThemeProvider,
   Timeline,
   ToastProvider,
   ToggleSwitch,
@@ -8033,5 +8084,6 @@ function Wizard({
   TreeView,
   Widget,
   Wizard,
+  useTheme,
   useToast
 });

package/dist/index.d.cts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 
 type AccordionVariant = "default" | "bordered" | "separated" | "ghost";
 interface AccordionItem {
@@ -1033,6 +1034,7 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChan
 }
 declare function Select({ options, value, onChange, placeholder, searchable, native, label, loadingMessage, noSearchResultsMessage, searchingMessage, multiple, reorderable, disabled, createOptionForm, suffixIcon, suffixIconColor, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
+type Theme = 'dark' | 'light' | 'system';
 type ThemeColors = {
     primary: string;
     primaryHover: string;
@@ -1045,6 +1047,29 @@ type ThemeColors = {
     danger: string;
     dangerHover: string;
 };
+type ThemeSettings = {
+    theme: Theme;
+    colors: ThemeColors;
+    fontSize: string;
+    fontFamily: string;
+};
+type ThemeProviderProps = {
+    children: React__default.ReactNode;
+    storageKey?: string;
+};
+type ThemeProviderState = ThemeSettings & {
+    setTheme: (theme: Theme) => void;
+    setColors: (colors: Partial<ThemeColors>) => void;
+    setFontSize: (size: string) => void;
+    setFontFamily: (family: string) => void;
+    resetSettings: () => void;
+};
+declare const COLOR_PALETTE: {
+    base: string;
+    hover: string;
+}[];
+declare function ThemeProvider({ children, storageKey, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare const useTheme: () => ThemeProviderState;
 
 type PanelSettingsTab = "appearance" | "colors" | "typography";
 interface PanelSettingsProps {
@@ -1384,4 +1409,4 @@ interface WizardProps {
 }
 declare function Wizard({ steps, step: controlledStep, defaultStep, onStepChange, onFinish, onClose, layout, variant, size, isOpen, showClose, unchange, title, description, hideHeader, footer, renderActions, backLabel, nextLabel, finishLabel, cancelLabel, showCancel, showBackOnFirst, loading, clickableSteps, className, contentClassName, }: WizardProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FormField, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeftSidebar, type LeftSidebarProps, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, ScrollArea, type ScrollAreaProps, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, COLOR_PALETTE, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FormField, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeftSidebar, type LeftSidebarProps, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, ScrollArea, type ScrollAreaProps, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useTheme, useToast };

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
+import React__default from 'react';
 
 type AccordionVariant = "default" | "bordered" | "separated" | "ghost";
 interface AccordionItem {
@@ -1033,6 +1034,7 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChan
 }
 declare function Select({ options, value, onChange, placeholder, searchable, native, label, loadingMessage, noSearchResultsMessage, searchingMessage, multiple, reorderable, disabled, createOptionForm, suffixIcon, suffixIconColor, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
+type Theme = 'dark' | 'light' | 'system';
 type ThemeColors = {
     primary: string;
     primaryHover: string;
@@ -1045,6 +1047,29 @@ type ThemeColors = {
     danger: string;
     dangerHover: string;
 };
+type ThemeSettings = {
+    theme: Theme;
+    colors: ThemeColors;
+    fontSize: string;
+    fontFamily: string;
+};
+type ThemeProviderProps = {
+    children: React__default.ReactNode;
+    storageKey?: string;
+};
+type ThemeProviderState = ThemeSettings & {
+    setTheme: (theme: Theme) => void;
+    setColors: (colors: Partial<ThemeColors>) => void;
+    setFontSize: (size: string) => void;
+    setFontFamily: (family: string) => void;
+    resetSettings: () => void;
+};
+declare const COLOR_PALETTE: {
+    base: string;
+    hover: string;
+}[];
+declare function ThemeProvider({ children, storageKey, ...props }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare const useTheme: () => ThemeProviderState;
 
 type PanelSettingsTab = "appearance" | "colors" | "typography";
 interface PanelSettingsProps {
@@ -1384,4 +1409,4 @@ interface WizardProps {
 }
 declare function Wizard({ steps, step: controlledStep, defaultStep, onStepChange, onFinish, onClose, layout, variant, size, isOpen, showClose, unchange, title, description, hideHeader, footer, renderActions, backLabel, nextLabel, finishLabel, cancelLabel, showCancel, showBackOnFirst, loading, clickableSteps, className, contentClassName, }: WizardProps): react_jsx_runtime.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FormField, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeftSidebar, type LeftSidebarProps, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, ScrollArea, type ScrollAreaProps, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, type AccordionVariant, AvatarStack, type AvatarStackProps, Badge, type BadgeProps, type BadgeSize, type BadgeVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonProps, COLOR_PALETTE, Calendar, type CalendarEvent, type CalendarProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, type ChartDataPoint, ChartWidget, type ChartWidgetProps, Checkbox, type CheckboxProps, CircularProgress, type CircularProgressProps, ColorPicker, type ColorPickerProps, type Column, Combobox, type ComboboxOption, type ComboboxProps, type CommandItem, CommandPalette, type CommandPaletteProps, ComposableWidget, type ComposableWidgetProps, type ConfirmVariant, ContextMenu, type ContextMenuItem, type ContextMenuProps, DataGrid, type DataGridColumn, type DataGridProps, DatePickerPopup, type DateRange, DateRangePicker, type DateRangePickerProps, Drawer, type DrawerProps, type DrawerSide, Dropdown, DropdownItem, DropdownLabel, type DropdownProps, DropdownSeparator, type FileTypeValidation, FileUpload, type FileUploadProps, type FlexAlign, type FlexDirection, type FlexGap, FlexItem, type FlexItemProps, type FlexJustify, FlexLayout, type FlexLayoutProps, type FlexWrap, type FormField, type GridAlign, type GridCols, type GridGap, GridItem, type GridItemProps, GridLayout, type GridLayoutProps, GroupNavigation, type GroupNavigationProps, type ImageEditorMode, type ImageEditorOptions, Input, type InputProps, KanbanBoard, type KanbanBoardProps, type KanbanCard, type KanbanColumn, Label, LeftSidebar, type LeftSidebarProps, type MetricItem, MetricRow, type MetricRowProps, Modal, ModalConfirmation, type ModalConfirmationProps, type ModalProps, ModalUnchange, type ModalUnchangeProps, ModalWithForms, type ModalWithFormsProps, type NavGroup, type NavItem, Navigation, type NavigationProps, NotificationBanner, type NotificationBannerProps, type NotificationItem, NotificationPanel, type NotificationPanelProps, type NotificationVariant, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Panel, type PanelProps, PanelSettings, type PanelSettingsProps, type PanelSettingsTab, PanelSidebarGroup, PanelSidebarItem, Popover, type PopoverPlacement, type PopoverProps, Progress, type ProgressProps, type ProgressSize, type ProgressVariant, type PropRow, PropsTable, RadioGroup, type RadioGroupProps, type RadioOption, type RadioSize, type RadioVariant, RangeSlider, type RangeSliderProps, Repeater, type RepeaterProps, ResizablePanels, type ResizablePanelsProps, RichTextEditor, type RichTextEditorProps, RightSidebar, type RightSidebarProps, ScrollArea, type ScrollAreaProps, SectionBlock, type SectionProps, type SectionVariant, Select, type SelectOption, type SelectProps, type SemanticColor, Skeleton, Slider, type SliderProps, type SortDir, StatCard, type StatCardProps, type StatTrend, StatsWidget, type StatsWidgetProps, type Step, type StepStatus, Stepper, type StepperProps, type TabItem, type TabSize, type TabVariant, Table, type TableProps, TableWidget, type TableWidgetProps, Tabs, type TabsProps, TagInput, type TagInputProps, Textarea, type TextareaProps, type ThemeColors, ThemeProvider, type ThemeSettings, Timeline, type TimelineItem, type TimelineProps, type TimelineVariant, type ToastItem, type ToastPosition, ToastProvider, type ToastProviderProps, type ToastVariant, ToggleSwitch, type ToggleSwitchProps, Tooltip, type TooltipProps, Topbar, type TopbarProps, type TreeNode, TreeView, type TreeViewProps, type TrendDir, Widget, type WidgetProps, Wizard, type WizardActionProps, type WizardLayout, type WizardProps, type WizardSize, type WizardStep, type WizardVariant, useTheme, useToast };

package/dist/index.global.js

@@ -2181,6 +2181,7 @@ var CodegoUI = (() => {
     Badge: () => Badge,
     Breadcrumb: () => Breadcrumb,
     Button: () => Button,
+    COLOR_PALETTE: () => COLOR_PALETTE,
     Calendar: () => Calendar,
     Card: () => Card,
     CardContent: () => CardContent,
@@ -2250,6 +2251,7 @@ var CodegoUI = (() => {
     Tabs: () => Tabs,
     TagInput: () => TagInput,
     Textarea: () => Textarea,
+    ThemeProvider: () => ThemeProvider,
     Timeline: () => Timeline,
     ToastProvider: () => ToastProvider,
     ToggleSwitch: () => ToggleSwitch,
@@ -2258,6 +2260,7 @@ var CodegoUI = (() => {
     TreeView: () => TreeView,
     Widget: () => Widget,
     Wizard: () => Wizard,
+    useTheme: () => useTheme,
     useToast: () => useToast
   });
 
@@ -7560,12 +7563,12 @@ var CodegoUI = (() => {
     const total = data.reduce((s, d) => s + d.value, 0) || 1;
     const cx = 80, cy = height / 2, r2 = Math.min(cx, cy) - 10, inner = r2 * 0.58;
     let angle = -Math.PI / 2;
-    const defaultColors2 = ["primary", "info", "success", "warning", "danger"];
+    const defaultColors = ["primary", "info", "success", "warning", "danger"];
     const slices = data.map((d, i) => {
       const sweep = d.value / total * 2 * Math.PI;
       const start = angle;
       angle += sweep;
-      const c = d.color ?? defaultColors2[i % defaultColors2.length];
+      const c = d.color ?? defaultColors[i % defaultColors.length];
       return { ...d, start, sweep, color: c };
     });
     const arc = (cx2, cy2, r3, start, end) => {
@@ -12995,24 +12998,36 @@ var CodegoUI = (() => {
 
   // src/components/theme-provider.tsx
   var import_react3 = __toESM(require_react(), 1);
+
+  // src/components/conf/settingConfig.json
+  var settingConfig_default = {
+    theme: "dark",
+    fontSize: "16px",
+    fontFamily: '"Space Grotesk", "Inter", sans-serif',
+    colors: {
+      primary: "#8b5cf6",
+      primaryHover: "#7c3aed",
+      secondary: "#171717",
+      secondaryHover: "#262626",
+      info: "#3b82f6",
+      infoHover: "#2563eb",
+      warning: "#f59e0b",
+      warningHover: "#d97706",
+      danger: "#ef4444",
+      dangerHover: "#dc2626"
+    }
+  };
+
+  // src/components/theme-provider.tsx
   var import_jsx_runtime34 = __toESM(require_jsx_runtime(), 1);
-  var defaultColors = {
-    primary: "#8b5cf6",
-    primaryHover: "#7c3aed",
-    secondary: "#171717",
-    secondaryHover: "#262626",
-    info: "#3b82f6",
-    infoHover: "#2563eb",
-    warning: "#f59e0b",
-    warningHover: "#d97706",
-    danger: "#ef4444",
-    dangerHover: "#dc2626"
+  var configDefaults = {
+    theme: settingConfig_default.theme,
+    fontSize: settingConfig_default.fontSize,
+    fontFamily: settingConfig_default.fontFamily,
+    colors: settingConfig_default.colors
   };
   var initialState = {
-    theme: "system",
-    colors: defaultColors,
-    fontSize: "16px",
-    fontFamily: '"Space Grotesk", "Inter", sans-serif',
+    ...configDefaults,
     setTheme: () => null,
     setColors: () => null,
     setFontSize: () => null,
@@ -13022,26 +13037,60 @@ var CodegoUI = (() => {
   var ThemeProviderContext = (0, import_react3.createContext)(initialState);
   var COLOR_PALETTE = [
     { base: "#6366f1", hover: "#4f46e5" },
-    // Indigo
     { base: "#8b5cf6", hover: "#7c3aed" },
-    // Violet
     { base: "#3b82f6", hover: "#2563eb" },
-    // Blue
     { base: "#10b981", hover: "#059669" },
-    // Emerald
     { base: "#22c55e", hover: "#16a34a" },
-    // Green
     { base: "#eab308", hover: "#ca8a04" },
-    // Yellow
     { base: "#f59e0b", hover: "#d97706" },
-    // Amber
     { base: "#f97316", hover: "#ea580c" },
-    // Orange
     { base: "#ef4444", hover: "#dc2626" },
-    // Red
     { base: "#ec4899", hover: "#db2777" }
-    // Pink
   ];
+  function ThemeProvider({
+    children,
+    storageKey = "codego-ui-theme-settings",
+    ...props
+  }) {
+    const [settings, setSettings] = (0, import_react3.useState)(() => {
+      try {
+        const stored = localStorage.getItem(storageKey);
+        if (stored) return { ...configDefaults, ...JSON.parse(stored) };
+      } catch {
+      }
+      return configDefaults;
+    });
+    (0, import_react3.useEffect)(() => {
+      localStorage.setItem(storageKey, JSON.stringify(settings));
+    }, [settings, storageKey]);
+    (0, import_react3.useEffect)(() => {
+      const root = window.document.documentElement;
+      root.classList.remove("light", "dark");
+      const resolved = settings.theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : settings.theme;
+      root.classList.add(resolved);
+      root.style.setProperty("--primary", settings.colors.primary);
+      root.style.setProperty("--primary-hover", settings.colors.primaryHover);
+      root.style.setProperty("--secondary", settings.colors.secondary);
+      root.style.setProperty("--secondary-hover", settings.colors.secondaryHover);
+      root.style.setProperty("--info", settings.colors.info);
+      root.style.setProperty("--info-hover", settings.colors.infoHover);
+      root.style.setProperty("--warning", settings.colors.warning);
+      root.style.setProperty("--warning-hover", settings.colors.warningHover);
+      root.style.setProperty("--danger", settings.colors.danger);
+      root.style.setProperty("--danger-hover", settings.colors.dangerHover);
+      root.style.setProperty("font-size", settings.fontSize);
+      root.style.setProperty("--font-sans", settings.fontFamily);
+    }, [settings]);
+    const value = {
+      ...settings,
+      setTheme: (theme) => setSettings((s) => ({ ...s, theme })),
+      setColors: (colors) => setSettings((s) => ({ ...s, colors: { ...s.colors, ...colors } })),
+      setFontSize: (fontSize) => setSettings((s) => ({ ...s, fontSize })),
+      setFontFamily: (fontFamily) => setSettings((s) => ({ ...s, fontFamily })),
+      resetSettings: () => setSettings(configDefaults)
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ThemeProviderContext.Provider, { ...props, value, children });
+  }
   var useTheme = () => {
     const context = (0, import_react3.useContext)(ThemeProviderContext);
     if (context === void 0)

package/dist/index.js

@@ -1539,12 +1539,12 @@ function DonutChart({ data, color, height, showValues, unit }) {
   const total = data.reduce((s, d) => s + d.value, 0) || 1;
   const cx = 80, cy = height / 2, r = Math.min(cx, cy) - 10, inner = r * 0.58;
   let angle = -Math.PI / 2;
-  const defaultColors2 = ["primary", "info", "success", "warning", "danger"];
+  const defaultColors = ["primary", "info", "success", "warning", "danger"];
   const slices = data.map((d, i) => {
     const sweep = d.value / total * 2 * Math.PI;
     const start = angle;
     angle += sweep;
-    const c = d.color ?? defaultColors2[i % defaultColors2.length];
+    const c = d.color ?? defaultColors[i % defaultColors.length];
     return { ...d, start, sweep, color: c };
   });
   const arc = (cx2, cy2, r2, start, end) => {
@@ -5147,24 +5147,36 @@ function Tooltip({
 
 // src/components/theme-provider.tsx
 import { createContext as createContext2, useContext as useContext2, useEffect as useEffect18, useState as useState23 } from "react";
+
+// src/components/conf/settingConfig.json
+var settingConfig_default = {
+  theme: "dark",
+  fontSize: "16px",
+  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  colors: {
+    primary: "#8b5cf6",
+    primaryHover: "#7c3aed",
+    secondary: "#171717",
+    secondaryHover: "#262626",
+    info: "#3b82f6",
+    infoHover: "#2563eb",
+    warning: "#f59e0b",
+    warningHover: "#d97706",
+    danger: "#ef4444",
+    dangerHover: "#dc2626"
+  }
+};
+
+// src/components/theme-provider.tsx
 import { jsx as jsx34 } from "react/jsx-runtime";
-var defaultColors = {
-  primary: "#8b5cf6",
-  primaryHover: "#7c3aed",
-  secondary: "#171717",
-  secondaryHover: "#262626",
-  info: "#3b82f6",
-  infoHover: "#2563eb",
-  warning: "#f59e0b",
-  warningHover: "#d97706",
-  danger: "#ef4444",
-  dangerHover: "#dc2626"
+var configDefaults = {
+  theme: settingConfig_default.theme,
+  fontSize: settingConfig_default.fontSize,
+  fontFamily: settingConfig_default.fontFamily,
+  colors: settingConfig_default.colors
 };
 var initialState = {
-  theme: "system",
-  colors: defaultColors,
-  fontSize: "16px",
-  fontFamily: '"Space Grotesk", "Inter", sans-serif',
+  ...configDefaults,
   setTheme: () => null,
   setColors: () => null,
   setFontSize: () => null,
@@ -5174,26 +5186,60 @@ var initialState = {
 var ThemeProviderContext = createContext2(initialState);
 var COLOR_PALETTE = [
   { base: "#6366f1", hover: "#4f46e5" },
-  // Indigo
   { base: "#8b5cf6", hover: "#7c3aed" },
-  // Violet
   { base: "#3b82f6", hover: "#2563eb" },
-  // Blue
   { base: "#10b981", hover: "#059669" },
-  // Emerald
   { base: "#22c55e", hover: "#16a34a" },
-  // Green
   { base: "#eab308", hover: "#ca8a04" },
-  // Yellow
   { base: "#f59e0b", hover: "#d97706" },
-  // Amber
   { base: "#f97316", hover: "#ea580c" },
-  // Orange
   { base: "#ef4444", hover: "#dc2626" },
-  // Red
   { base: "#ec4899", hover: "#db2777" }
-  // Pink
 ];
+function ThemeProvider({
+  children,
+  storageKey = "codego-ui-theme-settings",
+  ...props
+}) {
+  const [settings, setSettings] = useState23(() => {
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored) return { ...configDefaults, ...JSON.parse(stored) };
+    } catch {
+    }
+    return configDefaults;
+  });
+  useEffect18(() => {
+    localStorage.setItem(storageKey, JSON.stringify(settings));
+  }, [settings, storageKey]);
+  useEffect18(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    const resolved = settings.theme === "system" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : settings.theme;
+    root.classList.add(resolved);
+    root.style.setProperty("--primary", settings.colors.primary);
+    root.style.setProperty("--primary-hover", settings.colors.primaryHover);
+    root.style.setProperty("--secondary", settings.colors.secondary);
+    root.style.setProperty("--secondary-hover", settings.colors.secondaryHover);
+    root.style.setProperty("--info", settings.colors.info);
+    root.style.setProperty("--info-hover", settings.colors.infoHover);
+    root.style.setProperty("--warning", settings.colors.warning);
+    root.style.setProperty("--warning-hover", settings.colors.warningHover);
+    root.style.setProperty("--danger", settings.colors.danger);
+    root.style.setProperty("--danger-hover", settings.colors.dangerHover);
+    root.style.setProperty("font-size", settings.fontSize);
+    root.style.setProperty("--font-sans", settings.fontFamily);
+  }, [settings]);
+  const value = {
+    ...settings,
+    setTheme: (theme) => setSettings((s) => ({ ...s, theme })),
+    setColors: (colors) => setSettings((s) => ({ ...s, colors: { ...s.colors, ...colors } })),
+    setFontSize: (fontSize) => setSettings((s) => ({ ...s, fontSize })),
+    setFontFamily: (fontFamily) => setSettings((s) => ({ ...s, fontFamily })),
+    resetSettings: () => setSettings(configDefaults)
+  };
+  return /* @__PURE__ */ jsx34(ThemeProviderContext.Provider, { ...props, value, children });
+}
 var useTheme = () => {
   const context = useContext2(ThemeProviderContext);
   if (context === void 0)
@@ -7855,6 +7901,7 @@ export {
   Badge,
   Breadcrumb,
   Button,
+  COLOR_PALETTE,
   Calendar,
   Card,
   CardContent,
@@ -7924,6 +7971,7 @@ export {
   Tabs,
   TagInput,
   Textarea,
+  ThemeProvider,
   Timeline,
   ToastProvider,
   ToggleSwitch,
@@ -7932,5 +7980,6 @@ export {
   TreeView,
   Widget,
   Wizard,
+  useTheme,
   useToast
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@juv/codego-react-ui",
   "private": false,
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "Reusable React UI components",
   "license": "MIT",
   "main": "dist/index.js",