rothzerg-ui 0.1.7 → 0.1.8

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 (3) hide show
  1. package/README.md +1 -1
  2. package/package.json +2 -2
  3. package/rothzerg.config.example.ts +161 -0
package/README.md CHANGED
@@ -80,7 +80,7 @@ export function MyCard() {
80
80
 
81
81
  ## Configuration
82
82
 
83
- Copy `rothzerg.config.example.js` to your project root and customize:
83
+ Copy `rothzerg.config.example.ts` to your project root and customize:
84
84
 
85
85
  ```ts
86
86
  // rothzerg.config.ts
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "rothzerg-ui",
3
- "version": "0.1.7",
3
+ "version": "0.1.8",
4
4
  "description": "A highly customizable React UI component library built with TypeScript, TailwindCSS 4.2 and BEM methodology",
5
5
  "author": "Rothzerg",
6
6
  "license": "MIT",
@@ -23,7 +23,7 @@
23
23
  },
24
24
  "files": [
25
25
  "dist",
26
- "rothzerg.config.example.js",
26
+ "rothzerg.config.example.ts",
27
27
  "LICENSE"
28
28
  ],
29
29
  "sideEffects": ["*.css", "dist/styles.css"],
package/rothzerg.config.example.ts ADDED
@@ -0,0 +1,161 @@
1
+ /**
2
+ * Rothzerg UI Configuration Example
3
+ *
4
+ * Copy this file to your project root as:
5
+ * rothzerg.config.ts (JavaScript)
6
+ * rothzerg.config.ts (TypeScript — recommended)
7
+ *
8
+ * Then pass it to RothzergProvider:
9
+ *
10
+ * import config from './rothzerg.config';
11
+ * <RothzergProvider config={config}>...</RothzergProvider>
12
+ *
13
+ * Use defineConfig() for TypeScript intellisense:
14
+ * import { defineConfig } from 'rothzerg-ui';
15
+ * export default defineConfig({ ... });
16
+ */
17
+
18
+ /** @type {import('rothzerg-ui').RothzergConfig} */
19
+ export default {
20
+ /**
21
+ * Theme tokens
22
+ * All values become CSS custom properties on :root (--rz-color-primary, etc.)
23
+ */
24
+ theme: {
25
+ /**
26
+ * Light mode colors
27
+ * Every key maps to a --rz-color-{key} CSS custom property
28
+ */
29
+ colors: {
30
+ // Brand
31
+ primary: '#6366f1', // --rz-color-primary
32
+ primaryForeground: '#ffffff', // --rz-color-primary-foreground
33
+
34
+ // Neutrals
35
+ secondary: '#f1f5f9',
36
+ secondaryForeground: '#0f172a',
37
+ muted: '#f8fafc',
38
+ mutedForeground: '#64748b',
39
+ accent: '#f1f5f9',
40
+ accentForeground: '#0f172a',
41
+
42
+ // Feedback
43
+ destructive: '#ef4444',
44
+ destructiveForeground: '#ffffff',
45
+ success: '#22c55e',
46
+ successForeground: '#f0fdf4',
47
+ warning: '#f59e0b',
48
+ warningForeground: '#fffbeb',
49
+ info: '#3b82f6',
50
+ infoForeground: '#eff6ff',
51
+
52
+ // Surface
53
+ background: '#ffffff',
54
+ foreground: '#0f172a',
55
+ card: '#ffffff',
56
+ cardForeground: '#0f172a',
57
+ popover: '#ffffff',
58
+ popoverForeground: '#0f172a',
59
+
60
+ // Borders & inputs
61
+ border: '#e2e8f0',
62
+ input: '#e2e8f0',
63
+ ring: '#6366f1', // Focus ring color
64
+ },
65
+
66
+ /**
67
+ * Dark mode color overrides
68
+ * Only specify tokens that differ in dark mode
69
+ */
70
+ darkColors: {
71
+ primary: '#818cf8',
72
+ primaryForeground: '#ffffff',
73
+ secondary: '#1e293b',
74
+ secondaryForeground: '#f8fafc',
75
+ muted: '#1e293b',
76
+ mutedForeground: '#94a3b8',
77
+ accent: '#1e293b',
78
+ accentForeground: '#f8fafc',
79
+ background: '#0f172a',
80
+ foreground: '#f8fafc',
81
+ card: '#1e293b',
82
+ cardForeground: '#f8fafc',
83
+ popover: '#1e293b',
84
+ popoverForeground: '#f8fafc',
85
+ border: '#334155',
86
+ input: '#334155',
87
+ ring: '#818cf8',
88
+ },
89
+
90
+ /**
91
+ * Border radius scale
92
+ * Maps to --rz-radius-{key}
93
+ */
94
+ borderRadius: {
95
+ none: '0',
96
+ xs: '0.125rem',
97
+ sm: '0.25rem',
98
+ md: '0.5rem', // Used by most components by default
99
+ lg: '0.75rem',
100
+ xl: '1rem',
101
+ '2xl': '1.5rem',
102
+ full: '9999px',
103
+ },
104
+
105
+ /**
106
+ * Font families
107
+ * Maps to --rz-font-{key}
108
+ */
109
+ fonts: {
110
+ sans: "'Inter', system-ui, -apple-system, sans-serif",
111
+ mono: "'JetBrains Mono', 'Fira Code', monospace",
112
+ },
113
+
114
+ /**
115
+ * Animation settings
116
+ */
117
+ animation: {
118
+ duration: '150ms', // Fast transitions (buttons, hover)
119
+ durationSlow: '300ms', // Slow transitions (drawers, dialogs)
120
+ easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
121
+ easingBounce: 'cubic-bezier(0.34, 1.56, 0.64, 1)',
122
+ },
123
+
124
+ /**
125
+ * Box shadows
126
+ * Maps to --rz-shadow-{key}
127
+ */
128
+ shadows: {
129
+ sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
130
+ md: '0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)',
131
+ lg: '0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)',
132
+ xl: '0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)',
133
+ },
134
+ },
135
+
136
+ /**
137
+ * Dark mode strategy
138
+ * - 'class': Toggle dark mode by adding/removing 'dark' class on <html>
139
+ * document.documentElement.classList.toggle('dark')
140
+ * - 'media': Automatically follow OS dark mode preference
141
+ * - false: Disable dark mode entirely
142
+ */
143
+ darkMode: 'class',
144
+
145
+ /**
146
+ * Per-component default prop values
147
+ * Override the built-in defaults for your design needs
148
+ */
149
+ components: {
150
+ button: {
151
+ defaultVariant: 'default', // Which variant to use when none is specified
152
+ defaultSize: 'md',
153
+ },
154
+ badge: {
155
+ defaultVariant: 'secondary',
156
+ },
157
+ input: {
158
+ defaultVariant: 'default',
159
+ },
160
+ },
161
+ };