@vritti/quantum-ui 0.1.1 → 0.1.2

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 (104) hide show
  1. package/dist/Button-CCQVCZBc.js +97 -0
  2. package/dist/Button-CCQVCZBc.js.map +1 -0
  3. package/dist/Card-C5V_kLq7.js +41 -0
  4. package/dist/Card-C5V_kLq7.js.map +1 -0
  5. package/dist/TextField-bmiQJ7hv.js +119 -0
  6. package/dist/TextField-bmiQJ7hv.js.map +1 -0
  7. package/dist/ThemeToggle-HP4cegI7.js +78 -0
  8. package/dist/ThemeToggle-HP4cegI7.js.map +1 -0
  9. package/dist/Typography-BCxuB5sP.js +100 -0
  10. package/dist/Typography-BCxuB5sP.js.map +1 -0
  11. package/dist/components/Button.js +1 -19
  12. package/dist/components/Button.js.map +1 -1
  13. package/dist/components/Card.js +2 -0
  14. package/dist/components/Card.js.map +1 -0
  15. package/dist/components/TextField.js +1 -28
  16. package/dist/components/TextField.js.map +1 -1
  17. package/dist/components/ThemeToggle.js +2 -0
  18. package/dist/components/ThemeToggle.js.map +1 -0
  19. package/dist/components/Typography.js +1 -41
  20. package/dist/components/Typography.js.map +1 -1
  21. package/dist/index-B_dX4wQk.js +123 -0
  22. package/dist/index-B_dX4wQk.js.map +1 -0
  23. package/dist/index.js +6 -92
  24. package/dist/index.js.map +1 -1
  25. package/dist/lib/components/Button/Button.d.ts +10 -0
  26. package/dist/lib/components/Button/Button.d.ts.map +1 -0
  27. package/dist/lib/components/Button/index.d.ts +2 -0
  28. package/dist/lib/components/Button/index.d.ts.map +1 -0
  29. package/dist/lib/components/Card/Card.d.ts +2 -0
  30. package/dist/lib/components/Card/Card.d.ts.map +1 -0
  31. package/dist/lib/components/Card/index.d.ts +2 -0
  32. package/dist/lib/components/Card/index.d.ts.map +1 -0
  33. package/dist/lib/components/TextField/TextField.d.ts +8 -0
  34. package/dist/lib/components/TextField/TextField.d.ts.map +1 -0
  35. package/dist/lib/components/TextField/index.d.ts +2 -0
  36. package/dist/lib/components/TextField/index.d.ts.map +1 -0
  37. package/dist/lib/components/ThemeToggle/ThemeToggle.d.ts +7 -0
  38. package/dist/lib/components/ThemeToggle/ThemeToggle.d.ts.map +1 -0
  39. package/dist/lib/components/ThemeToggle/index.d.ts +2 -0
  40. package/dist/lib/components/ThemeToggle/index.d.ts.map +1 -0
  41. package/dist/lib/components/Typography/Typography.d.ts +10 -0
  42. package/dist/lib/components/Typography/Typography.d.ts.map +1 -0
  43. package/dist/lib/components/Typography/index.d.ts +2 -0
  44. package/dist/lib/components/Typography/index.d.ts.map +1 -0
  45. package/dist/lib/components/index.d.ts +6 -0
  46. package/dist/lib/components/index.d.ts.map +1 -0
  47. package/dist/lib/index.d.ts +3 -0
  48. package/dist/lib/index.d.ts.map +1 -0
  49. package/dist/utils-BLJyPY44.js +2963 -0
  50. package/dist/utils-BLJyPY44.js.map +1 -0
  51. package/package.json +23 -13
  52. package/readme.md +72 -60
  53. package/dist/ThemeScript-BcAiGxU5.js +0 -1586
  54. package/dist/ThemeScript-BcAiGxU5.js.map +0 -1
  55. package/dist/components/Button/Button.d.ts +0 -11
  56. package/dist/components/Button/Button.d.ts.map +0 -1
  57. package/dist/components/Button/index.d.ts +0 -3
  58. package/dist/components/Button/index.d.ts.map +0 -1
  59. package/dist/components/Paper/Paper.d.ts +0 -14
  60. package/dist/components/Paper/Paper.d.ts.map +0 -1
  61. package/dist/components/Paper/index.d.ts +0 -3
  62. package/dist/components/Paper/index.d.ts.map +0 -1
  63. package/dist/components/Paper.js +0 -27
  64. package/dist/components/Paper.js.map +0 -1
  65. package/dist/components/TextField/TextField.d.ts +0 -13
  66. package/dist/components/TextField/TextField.d.ts.map +0 -1
  67. package/dist/components/TextField/index.d.ts +0 -3
  68. package/dist/components/TextField/index.d.ts.map +0 -1
  69. package/dist/components/Typography/Typography.d.ts +0 -8
  70. package/dist/components/Typography/Typography.d.ts.map +0 -1
  71. package/dist/components/Typography/index.d.ts +0 -3
  72. package/dist/components/Typography/index.d.ts.map +0 -1
  73. package/dist/components/index.d.ts +0 -9
  74. package/dist/components/index.d.ts.map +0 -1
  75. package/dist/index.d.ts +0 -8
  76. package/dist/index.d.ts.map +0 -1
  77. package/dist/next.d.ts +0 -4
  78. package/dist/next.d.ts.map +0 -1
  79. package/dist/next.js +0 -2
  80. package/dist/next.js.map +0 -1
  81. package/dist/theme/ThemeProvider.d.ts +0 -9
  82. package/dist/theme/ThemeProvider.d.ts.map +0 -1
  83. package/dist/theme/ThemeScript.d.ts +0 -11
  84. package/dist/theme/ThemeScript.d.ts.map +0 -1
  85. package/dist/theme/components/Button.d.ts +0 -3
  86. package/dist/theme/components/Button.d.ts.map +0 -1
  87. package/dist/theme/components/Paper.d.ts +0 -3
  88. package/dist/theme/components/Paper.d.ts.map +0 -1
  89. package/dist/theme/components/TextField.d.ts +0 -3
  90. package/dist/theme/components/TextField.d.ts.map +0 -1
  91. package/dist/theme/components/index.d.ts +0 -4
  92. package/dist/theme/components/index.d.ts.map +0 -1
  93. package/dist/theme/createTheme.d.ts +0 -2
  94. package/dist/theme/createTheme.d.ts.map +0 -1
  95. package/dist/theme/cssVariableGenerator.d.ts +0 -4
  96. package/dist/theme/cssVariableGenerator.d.ts.map +0 -1
  97. package/dist/theme/index.d.ts +0 -8
  98. package/dist/theme/index.d.ts.map +0 -1
  99. package/dist/theme/palette.d.ts +0 -88
  100. package/dist/theme/palette.d.ts.map +0 -1
  101. package/dist/theme/semanticTokens.d.ts +0 -142
  102. package/dist/theme/semanticTokens.d.ts.map +0 -1
  103. package/dist/theme/useTheme.d.ts +0 -12
  104. package/dist/theme/useTheme.d.ts.map +0 -1
package/readme.md CHANGED
@@ -13,7 +13,7 @@ A production-ready React component library built with TypeScript, Material-UI, a
13
13
  🎭 **Advanced Animations** - Confidence energy fields with reduced motion support
14
14
  🔮 **Glassmorphism Effects** - Backdrop blur and sophisticated visual effects
15
15
  📍 **Comprehensive Storybook** - Interactive component documentation
16
- 🔧 **Full TypeScript** - Complete type safety with intelligent autocomplete
16
+ 🔧 **Full TypeScript** - Complete type safety with intelligent autocomplete
17
17
 
18
18
  ## Installation
19
19
 
@@ -37,15 +37,15 @@ function App() {
37
37
  return (
38
38
  <>
39
39
  {/* Add ThemeScript to prevent flickering */}
40
- <ThemeScript defaultColorScheme="light" />
41
-
42
- <ThemeProvider defaultColorScheme="light">
43
- <Paper variant="elevated">
44
- <Typography variant="h1">Welcome to Quantum UI</Typography>
45
- <Typography variant="body1" intent="secondary">
40
+ <ThemeScript defaultColorScheme='light' />
41
+
42
+ <ThemeProvider defaultColorScheme='light'>
43
+ <Paper variant='elevated'>
44
+ <Typography variant='h1'>Welcome to Quantum UI</Typography>
45
+ <Typography variant='body1' intent='secondary'>
46
46
  A modern component library for business applications
47
47
  </Typography>
48
- <Button intent="primary">Get Started</Button>
48
+ <Button intent='primary'>Get Started</Button>
49
49
  </Paper>
50
50
  </ThemeProvider>
51
51
  </>
@@ -71,28 +71,24 @@ import { ThemeProvider, ThemeScript, useTheme } from 'quantum-ui';
71
71
  ### Next.js Setup
72
72
 
73
73
  #### App Router (app/layout.tsx)
74
+
74
75
  ```tsx
75
76
  import { ThemeScript } from 'quantum-ui';
76
77
 
77
- export default function RootLayout({
78
- children,
79
- }: {
80
- children: React.ReactNode;
81
- }) {
78
+ export default function RootLayout({ children }: { children: React.ReactNode }) {
82
79
  return (
83
- <html lang="en">
80
+ <html lang='en'>
84
81
  <head>
85
- <ThemeScript defaultColorScheme="light" />
82
+ <ThemeScript defaultColorScheme='light' />
86
83
  </head>
87
- <body>
88
- {children}
89
- </body>
84
+ <body>{children}</body>
90
85
  </html>
91
86
  );
92
87
  }
93
88
  ```
94
89
 
95
- #### Pages Router (_document.tsx)
90
+ #### Pages Router (\_document.tsx)
91
+
96
92
  ```tsx
97
93
  import { Html, Head, Main, NextScript } from 'next/document';
98
94
  import { ThemeScript } from 'quantum-ui';
@@ -102,7 +98,7 @@ export default function Document() {
102
98
  <Html>
103
99
  <Head />
104
100
  <body>
105
- <ThemeScript defaultColorScheme="light" />
101
+ <ThemeScript defaultColorScheme='light' />
106
102
  <Main />
107
103
  <NextScript />
108
104
  </body>
@@ -111,13 +107,14 @@ export default function Document() {
111
107
  }
112
108
  ```
113
109
 
114
- #### App Component (_app.tsx or layout.tsx)
110
+ #### App Component (\_app.tsx or layout.tsx)
111
+
115
112
  ```tsx
116
113
  import { ThemeProvider } from 'quantum-ui';
117
114
 
118
115
  export default function App({ Component, pageProps }) {
119
116
  return (
120
- <ThemeProvider defaultColorScheme="light">
117
+ <ThemeProvider defaultColorScheme='light'>
121
118
  <Component {...pageProps} />
122
119
  </ThemeProvider>
123
120
  );
@@ -127,6 +124,7 @@ export default function App({ Component, pageProps }) {
127
124
  ### Vite Setup
128
125
 
129
126
  #### index.html
127
+
130
128
  ```html
131
129
  <!DOCTYPE html>
132
130
  <html lang="en" data-theme="light">
@@ -150,6 +148,7 @@ export default function App({ Component, pageProps }) {
150
148
  ```
151
149
 
152
150
  #### main.tsx
151
+
153
152
  ```tsx
154
153
  import React from 'react';
155
154
  import ReactDOM from 'react-dom/client';
@@ -158,7 +157,7 @@ import App from './App';
158
157
 
159
158
  ReactDOM.createRoot(document.getElementById('root')!).render(
160
159
  <React.StrictMode>
161
- <ThemeProvider defaultColorScheme="light">
160
+ <ThemeProvider defaultColorScheme='light'>
162
161
  <App />
163
162
  </ThemeProvider>
164
163
  </React.StrictMode>
@@ -168,6 +167,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
168
167
  ### Webpack/CRA Setup
169
168
 
170
169
  #### public/index.html
170
+
171
171
  ```html
172
172
  <!DOCTYPE html>
173
173
  <html lang="en" data-theme="light">
@@ -177,26 +177,24 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
177
177
  <title>Your App</title>
178
178
  <script>
179
179
  // Add theme script manually (copy from getThemeScript() output)
180
- (function() {
180
+ (function () {
181
181
  document.documentElement.classList.add('no-transition');
182
182
  try {
183
183
  const savedScheme = localStorage.getItem('quantum-color-scheme');
184
184
  const validSchemes = ['light', 'dark'];
185
- const themeToApply = savedScheme && validSchemes.includes(savedScheme)
186
- ? savedScheme
187
- : 'light';
185
+ const themeToApply = savedScheme && validSchemes.includes(savedScheme) ? savedScheme : 'light';
188
186
  document.documentElement.setAttribute('data-theme', themeToApply);
189
187
  } catch (e) {
190
188
  document.documentElement.setAttribute('data-theme', 'light');
191
189
  }
192
-
190
+
193
191
  function enableTransitions() {
194
192
  document.documentElement.classList.remove('no-transition');
195
193
  document.documentElement.classList.add('loaded');
196
194
  }
197
-
195
+
198
196
  if (document.readyState === 'loading') {
199
- window.addEventListener('DOMContentLoaded', function() {
197
+ window.addEventListener('DOMContentLoaded', function () {
200
198
  setTimeout(enableTransitions, 100);
201
199
  });
202
200
  } else {
@@ -212,6 +210,7 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
212
210
  ```
213
211
 
214
212
  #### src/App.tsx
213
+
215
214
  ```tsx
216
215
  import React from 'react';
217
216
  import { ThemeProvider } from 'quantum-ui';
@@ -219,7 +218,7 @@ import YourComponents from './components';
219
218
 
220
219
  function App() {
221
220
  return (
222
- <ThemeProvider defaultColorScheme="light">
221
+ <ThemeProvider defaultColorScheme='light'>
223
222
  <YourComponents />
224
223
  </ThemeProvider>
225
224
  );
@@ -231,19 +230,20 @@ export default App;
231
230
  ### Remix Setup
232
231
 
233
232
  #### app/root.tsx
233
+
234
234
  ```tsx
235
235
  import { ThemeScript, ThemeProvider } from 'quantum-ui';
236
236
 
237
237
  export default function App() {
238
238
  return (
239
- <html lang="en">
239
+ <html lang='en'>
240
240
  <head>
241
241
  <Meta />
242
242
  <Links />
243
- <ThemeScript defaultColorScheme="light" />
243
+ <ThemeScript defaultColorScheme='light' />
244
244
  </head>
245
245
  <body>
246
- <ThemeProvider defaultColorScheme="light">
246
+ <ThemeProvider defaultColorScheme='light'>
247
247
  <Outlet />
248
248
  </ThemeProvider>
249
249
  <ScrollRestoration />
@@ -258,12 +258,14 @@ export default function App() {
258
258
  ## Components
259
259
 
260
260
  ### Core Components (Production Ready)
261
+
261
262
  - **Button** - Intent-based variants (`primary`, `secondary`, `destructive`, `ghost`) with advanced animations
262
263
  - **Typography** - Complete text system with semantic intents and responsive scaling
263
264
  - **TextField** - State-driven inputs (`normal`, `error`, `success`, `warning`) with glassmorphism styling
264
265
  - **Paper** - Surface containers with variants (`standard`, `glass`, `elevated`, `subtle`)
265
266
 
266
267
  ### Theme System
268
+
267
269
  - **ThemeProvider** - Global theme and color scheme management
268
270
  - **ThemeScript** - Prevents theme flickering (add before React loads)
269
271
  - **useTheme** - Hook for accessing theme context and toggling modes
@@ -272,77 +274,79 @@ export default function App() {
272
274
  ## Theming API
273
275
 
274
276
  ### ThemeScript Configuration
277
+
275
278
  ```tsx
276
279
  <ThemeScript
277
- defaultColorScheme="dark" // Default: "light"
278
- storageKey="my-theme-key" // Default: "quantum-color-scheme"
279
- attribute="data-color-mode" // Default: "data-theme"
280
- preventFlickering={false} // Default: true
280
+ defaultColorScheme='dark' // Default: "light"
281
+ storageKey='my-theme-key' // Default: "quantum-color-scheme"
282
+ attribute='data-color-mode' // Default: "data-theme"
283
+ preventFlickering={false} // Default: true
281
284
  />
282
285
  ```
283
286
 
284
287
  ### ThemeProvider Configuration
288
+
285
289
  ```tsx
286
290
  <ThemeProvider
287
- defaultColorScheme="dark" // Must match ThemeScript
288
- storageKey="my-theme-key" // Must match ThemeScript
289
- attribute="data-color-mode" // Must match ThemeScript
291
+ defaultColorScheme='dark' // Must match ThemeScript
292
+ storageKey='my-theme-key' // Must match ThemeScript
293
+ attribute='data-color-mode' // Must match ThemeScript
290
294
  >
291
295
  <App />
292
296
  </ThemeProvider>
293
297
  ```
294
298
 
295
299
  ### useTheme Hook
300
+
296
301
  ```tsx
297
302
  function ThemeToggle() {
298
- const {
299
- colorScheme, // Current theme: "light" | "dark"
300
- toggleColorScheme,// Toggle between themes
301
- setTheme, // Set specific theme
302
- isHydrated // Whether React has hydrated
303
+ const {
304
+ colorScheme, // Current theme: "light" | "dark"
305
+ toggleColorScheme, // Toggle between themes
306
+ setTheme, // Set specific theme
307
+ isHydrated, // Whether React has hydrated
303
308
  } = useTheme();
304
-
305
- return (
306
- <button onClick={toggleColorScheme}>
307
- Current: {colorScheme}
308
- </button>
309
- );
309
+
310
+ return <button onClick={toggleColorScheme}>Current: {colorScheme}</button>;
310
311
  }
311
312
  ```
312
313
 
313
314
  ## Component APIs
314
315
 
315
316
  ### Button
317
+
316
318
  ```tsx
317
319
  import { Button } from 'quantum-ui/Button';
318
320
  import type { ButtonProps } from 'quantum-ui/Button';
319
321
 
320
322
  interface ButtonProps {
321
- intent?: "primary" | "secondary" | "destructive" | "ghost";
322
- size?: "small" | "medium" | "large";
323
+ intent?: 'primary' | 'secondary' | 'destructive' | 'ghost';
324
+ size?: 'small' | 'medium' | 'large';
323
325
  fullWidth?: boolean;
324
326
  disabled?: boolean;
325
327
  }
326
328
  ```
327
329
 
328
330
  ### Typography
331
+
329
332
  ```tsx
330
333
  import { Typography } from 'quantum-ui/Typography';
331
334
  import type { TypographyProps } from 'quantum-ui/Typography';
332
335
 
333
336
  interface TypographyProps {
334
- intent?: "primary" | "secondary" | "disabled";
335
- variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "body1" | "body2" | "button" | "caption" | "overline";
337
+ intent?: 'primary' | 'secondary' | 'disabled';
338
+ variant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'button' | 'caption' | 'overline';
336
339
  }
337
340
  ```
338
341
 
339
342
  ### TextField
343
+
340
344
  ```tsx
341
345
  import { TextField } from 'quantum-ui/TextField';
342
346
  import type { TextFieldProps } from 'quantum-ui/TextField';
343
347
 
344
348
  interface TextFieldProps {
345
- state?: "normal" | "error" | "success" | "warning";
349
+ state?: 'normal' | 'error' | 'success' | 'warning';
346
350
  label?: string;
347
351
  message?: string;
348
352
  fullWidth?: boolean;
@@ -350,12 +354,13 @@ interface TextFieldProps {
350
354
  ```
351
355
 
352
356
  ### Paper
357
+
353
358
  ```tsx
354
359
  import { Paper } from 'quantum-ui/Paper';
355
360
  import type { PaperProps } from 'quantum-ui/Paper';
356
361
 
357
362
  interface PaperProps {
358
- variant?: "standard" | "glass" | "elevated" | "subtle";
363
+ variant?: 'standard' | 'glass' | 'elevated' | 'subtle';
359
364
  }
360
365
  ```
361
366
 
@@ -381,6 +386,7 @@ npm run lint
381
386
  ## Performance Best Practices
382
387
 
383
388
  ### Import Strategy
389
+
384
390
  ```tsx
385
391
  // ✅ BEST: Direct component imports (optimal tree-shaking)
386
392
  import { Button } from 'quantum-ui/Button';
@@ -394,6 +400,7 @@ import { Button, TextField } from 'quantum-ui';
394
400
  ```
395
401
 
396
402
  ### Bundle Size Optimization
403
+
397
404
  - **Individual components**: ~0.5-1KB gzipped each
398
405
  - **Theme system**: ~8KB gzipped (includes MUI theme)
399
406
  - **Full library**: Import only what you use for optimal performance
@@ -401,11 +408,13 @@ import { Button, TextField } from 'quantum-ui';
401
408
  ## SSR Considerations
402
409
 
403
410
  ### Zero Flickering Setup
411
+
404
412
  1. **Add ThemeScript** before React loads (prevents flickering)
405
413
  2. **Configure ThemeProvider** with matching settings
406
414
  3. **Use consistent defaults** across script and provider
407
415
 
408
416
  ### Hydration Safety
417
+
409
418
  - ThemeProvider ensures no hydration mismatches
410
419
  - `isHydrated` flag available for client-only features
411
420
  - `useIsClient` hook for conditional rendering
@@ -423,22 +432,25 @@ Quantum UI is built on a sophisticated design token system:
423
432
  ## Architecture Highlights
424
433
 
425
434
  ### Design Philosophy
435
+
426
436
  - **Intent over Style** - Components use semantic intents rather than style props
427
437
  - **Theme-First Architecture** - Everything uses CSS variables, zero hardcoded values
428
438
  - **Progressive Enhancement** - Mobile-first with desktop refinements
429
439
  - **Performance by Design** - React.memo, constant lookups, zero runtime CSS-in-JS
430
440
 
431
441
  ### Advanced Features
442
+
432
443
  - **Blue Brand Theming** - Universal blue (#0066CC) with subtle input backgrounds
433
444
  - **Sophisticated Shadows** - Theme-aware with different opacity for light/dark modes
434
445
  - **Animation System** - Confidence animations with accessibility considerations
435
446
  - **SSR Excellence** - Zero hydration mismatches across all supported frameworks
436
447
 
437
448
  ### Bundle Optimization
449
+
438
450
  ```bash
439
451
  # Individual component sizes (gzipped)
440
452
  Button: ~0.7KB
441
- TextField: ~0.9KB
453
+ TextField: ~0.9KB
442
454
  Paper: ~0.5KB
443
455
  Typography: ~0.6KB
444
456
  Theme System: ~8KB (includes MUI theme)
@@ -457,4 +469,4 @@ MIT License - see LICENSE file for details.
457
469
 
458
470
  ---
459
471
 
460
- **Status**: All components are production-ready and fully implemented. The codebase represents a mature, sophisticated design system with excellent architecture and performance characteristics.
472
+ **Status**: All components are production-ready and fully implemented. The codebase represents a mature, sophisticated design system with excellent architecture and performance characteristics.