shru-design-system 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.d.mts +111 -1
  2. package/dist/index.d.ts +111 -1
  3. package/dist/index.js +1095 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1083 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +14 -11
  8. package/scripts/apply-theme-sync.js +230 -0
  9. package/scripts/init.js +445 -10
package/dist/index.d.mts CHANGED
@@ -4,6 +4,7 @@ import { VariantProps } from 'class-variance-authority';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import * as DialogPrimitive from '@radix-ui/react-dialog';
6
6
  import * as SelectPrimitive from '@radix-ui/react-select';
7
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
7
8
 
8
9
  declare const buttonVariants: (props?: ({
9
10
  readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
@@ -52,4 +53,113 @@ declare function SelectSeparator({ className, ...props }: React.ComponentProps<t
52
53
  declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
53
54
  declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
54
55
 
55
- export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, badgeVariants, buttonVariants };
56
+ declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
57
+ declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
58
+ declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
59
+ declare const tooltipSides: readonly ["top", "right", "bottom", "left"];
60
+ declare function TooltipContent({ className, sideOffset, children, side, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
61
+ side?: typeof tooltipSides[number];
62
+ }): react_jsx_runtime.JSX.Element;
63
+
64
+ interface ThemeToggleProps {
65
+ className?: string;
66
+ position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
67
+ }
68
+ declare function ThemeToggle({ className, position }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
69
+
70
+ type ThemeSelection = {
71
+ color?: string;
72
+ typography?: string;
73
+ shape?: string;
74
+ density?: string;
75
+ animation?: string;
76
+ custom?: string;
77
+ };
78
+ type ThemeMetadata$1 = {
79
+ name: string;
80
+ file: string;
81
+ icon: string;
82
+ description: string;
83
+ };
84
+ /**
85
+ * Hook for managing design system theme switching
86
+ */
87
+ declare function useTheme(): {
88
+ selectedThemes: ThemeSelection;
89
+ updateTheme: (category: keyof ThemeSelection, themeId: string | undefined) => Promise<void>;
90
+ resetToDefaults: () => Promise<void>;
91
+ isLoading: boolean;
92
+ error: string | null;
93
+ getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
94
+ };
95
+
96
+ declare function useThemeToggle(): {
97
+ selectedThemes: ThemeSelection;
98
+ isLoading: boolean;
99
+ getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
100
+ isOpen: boolean;
101
+ selectedCategory: string | null;
102
+ themeCategories: any;
103
+ categories: [string, {
104
+ name: string;
105
+ themes: Record<string, any>;
106
+ order?: number;
107
+ }][];
108
+ menuRef: React.RefObject<HTMLDivElement>;
109
+ handleCategoryClick: (categoryKey: string) => void;
110
+ handleThemeSelect: (category: keyof ThemeSelection, themeId: string) => Promise<void>;
111
+ handleBack: () => void;
112
+ toggleMenu: () => void;
113
+ };
114
+
115
+ /**
116
+ * Theme Configuration
117
+ * Registry of all available themes organized by category
118
+ *
119
+ * Base themes are defined here. Additional themes can be discovered dynamically
120
+ * by scanning the /tokens/themes/ directory structure.
121
+ */
122
+ type ThemeMetadata = {
123
+ name: string;
124
+ file: string;
125
+ icon: string;
126
+ description: string;
127
+ };
128
+ type ThemeCategory = {
129
+ name: string;
130
+ order: number;
131
+ themes: Record<string, ThemeMetadata>;
132
+ };
133
+ /**
134
+ * Register a custom theme dynamically
135
+ * Allows users to add themes without modifying the base config
136
+ */
137
+ declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
138
+ /**
139
+ * Get merged theme categories (base + discovered)
140
+ */
141
+ declare function getThemeCategories(): Promise<Record<string, ThemeCategory>>;
142
+ /**
143
+ * Get theme file path
144
+ */
145
+ declare function getThemeFilePath(category: string, themeId: string): string | null;
146
+ /**
147
+ * Get all themes for a category
148
+ */
149
+ declare function getThemesForCategory(category: string): Promise<Record<string, ThemeMetadata>>;
150
+ /**
151
+ * Get theme by ID
152
+ */
153
+ declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
154
+
155
+ /**
156
+ * Synchronous theme application for blocking script execution
157
+ * This runs before React hydrates to prevent theme flash
158
+ */
159
+ /**
160
+ * Apply theme synchronously using blocking XMLHttpRequest
161
+ * This prevents flash of unstyled content
162
+ */
163
+ declare function applyThemeSync(): void;
164
+
165
+ export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };
package/dist/index.d.ts CHANGED
@@ -4,6 +4,7 @@ import { VariantProps } from 'class-variance-authority';
4
4
  import * as react_jsx_runtime from 'react/jsx-runtime';
5
5
  import * as DialogPrimitive from '@radix-ui/react-dialog';
6
6
  import * as SelectPrimitive from '@radix-ui/react-select';
7
+ import * as TooltipPrimitive from '@radix-ui/react-tooltip';
7
8
 
8
9
  declare const buttonVariants: (props?: ({
9
10
  readonly variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
@@ -52,4 +53,113 @@ declare function SelectSeparator({ className, ...props }: React.ComponentProps<t
52
53
  declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
53
54
  declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
54
55
 
55
- export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, badgeVariants, buttonVariants };
56
+ declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): react_jsx_runtime.JSX.Element;
57
+ declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): react_jsx_runtime.JSX.Element;
58
+ declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
59
+ declare const tooltipSides: readonly ["top", "right", "bottom", "left"];
60
+ declare function TooltipContent({ className, sideOffset, children, side, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
61
+ side?: typeof tooltipSides[number];
62
+ }): react_jsx_runtime.JSX.Element;
63
+
64
+ interface ThemeToggleProps {
65
+ className?: string;
66
+ position?: "bottom-right" | "bottom-left" | "top-right" | "top-left";
67
+ }
68
+ declare function ThemeToggle({ className, position }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
69
+
70
+ type ThemeSelection = {
71
+ color?: string;
72
+ typography?: string;
73
+ shape?: string;
74
+ density?: string;
75
+ animation?: string;
76
+ custom?: string;
77
+ };
78
+ type ThemeMetadata$1 = {
79
+ name: string;
80
+ file: string;
81
+ icon: string;
82
+ description: string;
83
+ };
84
+ /**
85
+ * Hook for managing design system theme switching
86
+ */
87
+ declare function useTheme(): {
88
+ selectedThemes: ThemeSelection;
89
+ updateTheme: (category: keyof ThemeSelection, themeId: string | undefined) => Promise<void>;
90
+ resetToDefaults: () => Promise<void>;
91
+ isLoading: boolean;
92
+ error: string | null;
93
+ getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
94
+ };
95
+
96
+ declare function useThemeToggle(): {
97
+ selectedThemes: ThemeSelection;
98
+ isLoading: boolean;
99
+ getAvailableThemes: (category: string) => Promise<Record<string, ThemeMetadata$1>>;
100
+ isOpen: boolean;
101
+ selectedCategory: string | null;
102
+ themeCategories: any;
103
+ categories: [string, {
104
+ name: string;
105
+ themes: Record<string, any>;
106
+ order?: number;
107
+ }][];
108
+ menuRef: React.RefObject<HTMLDivElement>;
109
+ handleCategoryClick: (categoryKey: string) => void;
110
+ handleThemeSelect: (category: keyof ThemeSelection, themeId: string) => Promise<void>;
111
+ handleBack: () => void;
112
+ toggleMenu: () => void;
113
+ };
114
+
115
+ /**
116
+ * Theme Configuration
117
+ * Registry of all available themes organized by category
118
+ *
119
+ * Base themes are defined here. Additional themes can be discovered dynamically
120
+ * by scanning the /tokens/themes/ directory structure.
121
+ */
122
+ type ThemeMetadata = {
123
+ name: string;
124
+ file: string;
125
+ icon: string;
126
+ description: string;
127
+ };
128
+ type ThemeCategory = {
129
+ name: string;
130
+ order: number;
131
+ themes: Record<string, ThemeMetadata>;
132
+ };
133
+ /**
134
+ * Register a custom theme dynamically
135
+ * Allows users to add themes without modifying the base config
136
+ */
137
+ declare function registerTheme(category: string, themeId: string, metadata: ThemeMetadata): Record<string, ThemeCategory>;
138
+ /**
139
+ * Get merged theme categories (base + discovered)
140
+ */
141
+ declare function getThemeCategories(): Promise<Record<string, ThemeCategory>>;
142
+ /**
143
+ * Get theme file path
144
+ */
145
+ declare function getThemeFilePath(category: string, themeId: string): string | null;
146
+ /**
147
+ * Get all themes for a category
148
+ */
149
+ declare function getThemesForCategory(category: string): Promise<Record<string, ThemeMetadata>>;
150
+ /**
151
+ * Get theme by ID
152
+ */
153
+ declare function getTheme(category: string, themeId: string): Promise<ThemeMetadata | null>;
154
+
155
+ /**
156
+ * Synchronous theme application for blocking script execution
157
+ * This runs before React hydrates to prevent theme flash
158
+ */
159
+ /**
160
+ * Apply theme synchronously using blocking XMLHttpRequest
161
+ * This prevents flash of unstyled content
162
+ */
163
+ declare function applyThemeSync(): void;
164
+
165
+ export { Badge, Button, Modal, ModalClose, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalOverlay, ModalPortal, ModalTitle, ModalTrigger, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, type ThemeMetadata$1 as ThemeMetadata, type ThemeSelection, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, applyThemeSync, badgeVariants, buttonVariants, getTheme, getThemeCategories, getThemeFilePath, getThemesForCategory, registerTheme, useTheme, useThemeToggle };