@tinybigui/react 0.1.0-rc.1

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 (13) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +378 -0
  3. package/dist/index.cjs +3374 -0
  4. package/dist/index.cjs.map +1 -0
  5. package/dist/index.d.cts +1836 -0
  6. package/dist/index.d.ts +1836 -0
  7. package/dist/index.js +3329 -0
  8. package/dist/index.js.map +1 -0
  9. package/dist/styles.css +213 -0
  10. package/dist/styles.css.map +1 -0
  11. package/dist/styles.d.cts +2 -0
  12. package/dist/styles.d.ts +2 -0
  13. package/package.json +118 -0
package/dist/styles.css ADDED
@@ -0,0 +1,213 @@
1
+ @import "tailwindcss";
2
+
3
+ /* ../tokens/src/tokens.css */
4
+ :root {
5
+ --md-sys-color-primary: #6750a4;
6
+ --md-sys-color-on-primary: #ffffff;
7
+ --md-sys-color-primary-container: #eaddff;
8
+ --md-sys-color-on-primary-container: #21005d;
9
+ --md-sys-color-secondary: #625b71;
10
+ --md-sys-color-on-secondary: #ffffff;
11
+ --md-sys-color-secondary-container: #e8def8;
12
+ --md-sys-color-on-secondary-container: #1d192b;
13
+ --md-sys-color-tertiary: #7d5260;
14
+ --md-sys-color-on-tertiary: #ffffff;
15
+ --md-sys-color-tertiary-container: #ffd8e4;
16
+ --md-sys-color-on-tertiary-container: #31111d;
17
+ --md-sys-color-error: #b3261e;
18
+ --md-sys-color-on-error: #ffffff;
19
+ --md-sys-color-error-container: #f9dedc;
20
+ --md-sys-color-on-error-container: #410e0b;
21
+ --md-sys-color-surface: #fffbfe;
22
+ --md-sys-color-on-surface: #1c1b1f;
23
+ --md-sys-color-surface-variant: #e7e0ec;
24
+ --md-sys-color-on-surface-variant: #49454f;
25
+ --md-sys-color-surface-container-lowest: #ffffff;
26
+ --md-sys-color-surface-container-low: #f7f2fa;
27
+ --md-sys-color-surface-container: #f3edf7;
28
+ --md-sys-color-surface-container-high: #ece6f0;
29
+ --md-sys-color-surface-container-highest: #e6e0e9;
30
+ --md-sys-color-outline: #79747e;
31
+ --md-sys-color-outline-variant: #cac4d0;
32
+ --md-sys-color-background: #fffbfe;
33
+ --md-sys-color-on-background: #1c1b1f;
34
+ --md-sys-typescale-font-family-plain:
35
+ system-ui,
36
+ -apple-system,
37
+ "Segoe UI",
38
+ Roboto,
39
+ "Helvetica Neue",
40
+ Arial,
41
+ sans-serif;
42
+ --md-sys-typescale-font-family-brand: var(--md-sys-typescale-font-family-plain);
43
+ --md-sys-typescale-display-large-size: 3.5625rem;
44
+ --md-sys-typescale-display-large-line-height: 4rem;
45
+ --md-sys-typescale-display-large-weight: 400;
46
+ --md-sys-typescale-display-large-tracking: -0.25px;
47
+ --md-sys-typescale-display-medium-size: 2.8125rem;
48
+ --md-sys-typescale-display-medium-line-height: 3.25rem;
49
+ --md-sys-typescale-display-medium-weight: 400;
50
+ --md-sys-typescale-display-medium-tracking: 0;
51
+ --md-sys-typescale-display-small-size: 2.25rem;
52
+ --md-sys-typescale-display-small-line-height: 2.75rem;
53
+ --md-sys-typescale-display-small-weight: 400;
54
+ --md-sys-typescale-display-small-tracking: 0;
55
+ --md-sys-typescale-headline-large-size: 2rem;
56
+ --md-sys-typescale-headline-large-line-height: 2.5rem;
57
+ --md-sys-typescale-headline-large-weight: 400;
58
+ --md-sys-typescale-headline-large-tracking: 0;
59
+ --md-sys-typescale-headline-medium-size: 1.75rem;
60
+ --md-sys-typescale-headline-medium-line-height: 2.25rem;
61
+ --md-sys-typescale-headline-medium-weight: 400;
62
+ --md-sys-typescale-headline-medium-tracking: 0;
63
+ --md-sys-typescale-headline-small-size: 1.5rem;
64
+ --md-sys-typescale-headline-small-line-height: 2rem;
65
+ --md-sys-typescale-headline-small-weight: 400;
66
+ --md-sys-typescale-headline-small-tracking: 0;
67
+ --md-sys-typescale-title-large-size: 1.375rem;
68
+ --md-sys-typescale-title-large-line-height: 1.75rem;
69
+ --md-sys-typescale-title-large-weight: 400;
70
+ --md-sys-typescale-title-large-tracking: 0;
71
+ --md-sys-typescale-title-medium-size: 1rem;
72
+ --md-sys-typescale-title-medium-line-height: 1.5rem;
73
+ --md-sys-typescale-title-medium-weight: 500;
74
+ --md-sys-typescale-title-medium-tracking: 0.15px;
75
+ --md-sys-typescale-title-small-size: 0.875rem;
76
+ --md-sys-typescale-title-small-line-height: 1.25rem;
77
+ --md-sys-typescale-title-small-weight: 500;
78
+ --md-sys-typescale-title-small-tracking: 0.1px;
79
+ --md-sys-typescale-body-large-size: 1rem;
80
+ --md-sys-typescale-body-large-line-height: 1.5rem;
81
+ --md-sys-typescale-body-large-weight: 400;
82
+ --md-sys-typescale-body-large-tracking: 0.5px;
83
+ --md-sys-typescale-body-medium-size: 0.875rem;
84
+ --md-sys-typescale-body-medium-line-height: 1.25rem;
85
+ --md-sys-typescale-body-medium-weight: 400;
86
+ --md-sys-typescale-body-medium-tracking: 0.25px;
87
+ --md-sys-typescale-body-small-size: 0.75rem;
88
+ --md-sys-typescale-body-small-line-height: 1rem;
89
+ --md-sys-typescale-body-small-weight: 400;
90
+ --md-sys-typescale-body-small-tracking: 0.4px;
91
+ --md-sys-typescale-label-large-size: 0.875rem;
92
+ --md-sys-typescale-label-large-line-height: 1.25rem;
93
+ --md-sys-typescale-label-large-weight: 500;
94
+ --md-sys-typescale-label-large-tracking: 0.1px;
95
+ --md-sys-typescale-label-medium-size: 0.75rem;
96
+ --md-sys-typescale-label-medium-line-height: 1rem;
97
+ --md-sys-typescale-label-medium-weight: 500;
98
+ --md-sys-typescale-label-medium-tracking: 0.5px;
99
+ --md-sys-typescale-label-small-size: 0.6875rem;
100
+ --md-sys-typescale-label-small-line-height: 1rem;
101
+ --md-sys-typescale-label-small-weight: 500;
102
+ --md-sys-typescale-label-small-tracking: 0.5px;
103
+ --md-sys-shape-corner-none: 0;
104
+ --md-sys-shape-corner-extra-small: 0.25rem;
105
+ --md-sys-shape-corner-small: 0.5rem;
106
+ --md-sys-shape-corner-medium: 0.75rem;
107
+ --md-sys-shape-corner-large: 1rem;
108
+ --md-sys-shape-corner-extra-large: 1.75rem;
109
+ --md-sys-shape-corner-full: 624.9375rem;
110
+ --md-sys-elevation-level-0: none;
111
+ --md-sys-elevation-level-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
112
+ --md-sys-elevation-level-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
113
+ --md-sys-elevation-level-3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
114
+ --md-sys-elevation-level-4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
115
+ --md-sys-elevation-level-5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);
116
+ --md-sys-motion-duration-short1: 50ms;
117
+ --md-sys-motion-duration-short2: 100ms;
118
+ --md-sys-motion-duration-short3: 150ms;
119
+ --md-sys-motion-duration-short4: 200ms;
120
+ --md-sys-motion-duration-medium1: 250ms;
121
+ --md-sys-motion-duration-medium2: 300ms;
122
+ --md-sys-motion-duration-medium3: 350ms;
123
+ --md-sys-motion-duration-medium4: 400ms;
124
+ --md-sys-motion-duration-long1: 450ms;
125
+ --md-sys-motion-duration-long2: 500ms;
126
+ --md-sys-motion-duration-long3: 550ms;
127
+ --md-sys-motion-duration-long4: 600ms;
128
+ --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
129
+ --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);
130
+ --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
131
+ --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
132
+ }
133
+ .dark {
134
+ --md-sys-color-primary: #d0bcff;
135
+ --md-sys-color-on-primary: #381e72;
136
+ --md-sys-color-primary-container: #4f378b;
137
+ --md-sys-color-on-primary-container: #eaddff;
138
+ --md-sys-color-secondary: #ccc2dc;
139
+ --md-sys-color-on-secondary: #332d41;
140
+ --md-sys-color-secondary-container: #4a4458;
141
+ --md-sys-color-on-secondary-container: #e8def8;
142
+ --md-sys-color-tertiary: #efb8c8;
143
+ --md-sys-color-on-tertiary: #492532;
144
+ --md-sys-color-tertiary-container: #633b48;
145
+ --md-sys-color-on-tertiary-container: #ffd8e4;
146
+ --md-sys-color-error: #f2b8b5;
147
+ --md-sys-color-on-error: #601410;
148
+ --md-sys-color-error-container: #8c1d18;
149
+ --md-sys-color-on-error-container: #f9dedc;
150
+ --md-sys-color-surface: #1c1b1f;
151
+ --md-sys-color-on-surface: #e6e1e5;
152
+ --md-sys-color-surface-variant: #49454f;
153
+ --md-sys-color-on-surface-variant: #cac4d0;
154
+ --md-sys-color-surface-container-lowest: #0f0d13;
155
+ --md-sys-color-surface-container-low: #1d1b20;
156
+ --md-sys-color-surface-container: #211f26;
157
+ --md-sys-color-surface-container-high: #2b2930;
158
+ --md-sys-color-surface-container-highest: #36343b;
159
+ --md-sys-color-outline: #938f99;
160
+ --md-sys-color-outline-variant: #49454f;
161
+ --md-sys-color-background: #1c1b1f;
162
+ --md-sys-color-on-background: #e6e1e5;
163
+ }
164
+ @media (prefers-color-scheme: dark) {
165
+ :root:not(.light) {
166
+ --md-sys-color-primary: #d0bcff;
167
+ --md-sys-color-on-primary: #381e72;
168
+ --md-sys-color-primary-container: #4f378b;
169
+ --md-sys-color-on-primary-container: #eaddff;
170
+ --md-sys-color-secondary: #ccc2dc;
171
+ --md-sys-color-on-secondary: #332d41;
172
+ --md-sys-color-secondary-container: #4a4458;
173
+ --md-sys-color-on-secondary-container: #e8def8;
174
+ --md-sys-color-tertiary: #efb8c8;
175
+ --md-sys-color-on-tertiary: #492532;
176
+ --md-sys-color-tertiary-container: #633b48;
177
+ --md-sys-color-on-tertiary-container: #ffd8e4;
178
+ --md-sys-color-error: #f2b8b5;
179
+ --md-sys-color-on-error: #601410;
180
+ --md-sys-color-error-container: #8c1d18;
181
+ --md-sys-color-on-error-container: #f9dedc;
182
+ --md-sys-color-surface: #1c1b1f;
183
+ --md-sys-color-on-surface: #e6e1e5;
184
+ --md-sys-color-surface-variant: #49454f;
185
+ --md-sys-color-on-surface-variant: #cac4d0;
186
+ --md-sys-color-surface-container-lowest: #0f0d13;
187
+ --md-sys-color-surface-container-low: #1d1b20;
188
+ --md-sys-color-surface-container: #211f26;
189
+ --md-sys-color-surface-container-high: #2b2930;
190
+ --md-sys-color-surface-container-highest: #36343b;
191
+ --md-sys-color-outline: #938f99;
192
+ --md-sys-color-outline-variant: #49454f;
193
+ --md-sys-color-background: #1c1b1f;
194
+ --md-sys-color-on-background: #e6e1e5;
195
+ }
196
+ }
197
+ body {
198
+ background-color: var(--md-sys-color-surface);
199
+ color: var(--md-sys-color-on-surface);
200
+ margin: 0;
201
+ font-family: var(--md-sys-typescale-font-family-plain);
202
+ }
203
+ @theme { --color-primary: var(--md-sys-color-primary); --color-on-primary: var(--md-sys-color-on-primary); --color-primary-container: var(--md-sys-color-primary-container); --color-on-primary-container: var(--md-sys-color-on-primary-container); --color-secondary: var(--md-sys-color-secondary); --color-on-secondary: var(--md-sys-color-on-secondary); --color-secondary-container: var(--md-sys-color-secondary-container); --color-on-secondary-container: var(--md-sys-color-on-secondary-container); --color-tertiary: var(--md-sys-color-tertiary); --color-on-tertiary: var(--md-sys-color-on-tertiary); --color-tertiary-container: var(--md-sys-color-tertiary-container); --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container); --color-error: var(--md-sys-color-error); --color-on-error: var(--md-sys-color-on-error); --color-error-container: var(--md-sys-color-error-container); --color-on-error-container: var(--md-sys-color-on-error-container); --color-surface: var(--md-sys-color-surface); --color-on-surface: var(--md-sys-color-on-surface); --color-surface-variant: var(--md-sys-color-surface-variant); --color-on-surface-variant: var(--md-sys-color-on-surface-variant); --color-surface-container-lowest: var(--md-sys-color-surface-container-lowest); --color-surface-container-low: var(--md-sys-color-surface-container-low); --color-surface-container: var(--md-sys-color-surface-container); --color-surface-container-high: var(--md-sys-color-surface-container-high); --color-surface-container-highest: var(--md-sys-color-surface-container-highest); --color-outline: var(--md-sys-color-outline); --color-outline-variant: var(--md-sys-color-outline-variant); --color-background: var(--md-sys-color-background); --color-on-background: var(--md-sys-color-on-background); --shadow-elevation-0: var(--md-sys-elevation-level-0); --shadow-elevation-1: var(--md-sys-elevation-level-1); --shadow-elevation-2: var(--md-sys-elevation-level-2); --shadow-elevation-3: var(--md-sys-elevation-level-3); --shadow-elevation-4: var(--md-sys-elevation-level-4); --shadow-elevation-5: var(--md-sys-elevation-level-5); }
204
+ @keyframes ripple {
205
+ to {
206
+ transform: translate(-50%, -50%) scale(1);
207
+ opacity: 0;
208
+ }
209
+ }
210
+ @theme { --animate-ripple: ripple 450ms cubic-bezier(0.2, 0, 0, 1); --opacity-8: 0.08; --opacity-12: 0.12; --opacity-38: 0.38; }
211
+
212
+ /* src/styles.css */
213
+ /*# sourceMappingURL=styles.css.map */
package/dist/styles.css.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../../tokens/src/tokens.css"],"sourcesContent":["/**\n * @tinybigui/tokens\n * Material Design 3 Design Tokens\n * \n * This file contains CSS variables for MD3 design tokens.\n * These tokens will be generated from Material Color Utilities\n * and other MD3 specifications.\n */\n\n/* Import Tailwind CSS v4 */\n@import \"tailwindcss\";\n\n:root {\n /* ==========================================================================\n COLOR TOKENS\n Material Design 3 color system with light/dark mode support\n Complete set of 18 semantic color roles for light and dark themes\n ========================================================================== */\n\n /* Primary */\n --md-sys-color-primary: #6750a4;\n --md-sys-color-on-primary: #ffffff;\n --md-sys-color-primary-container: #eaddff;\n --md-sys-color-on-primary-container: #21005d;\n\n /* Secondary */\n --md-sys-color-secondary: #625b71;\n --md-sys-color-on-secondary: #ffffff;\n --md-sys-color-secondary-container: #e8def8;\n --md-sys-color-on-secondary-container: #1d192b;\n\n /* Tertiary */\n --md-sys-color-tertiary: #7d5260;\n --md-sys-color-on-tertiary: #ffffff;\n --md-sys-color-tertiary-container: #ffd8e4;\n --md-sys-color-on-tertiary-container: #31111d;\n\n /* Error */\n --md-sys-color-error: #b3261e;\n --md-sys-color-on-error: #ffffff;\n --md-sys-color-error-container: #f9dedc;\n --md-sys-color-on-error-container: #410e0b;\n\n /* Surface */\n --md-sys-color-surface: #fffbfe;\n --md-sys-color-on-surface: #1c1b1f;\n --md-sys-color-surface-variant: #e7e0ec;\n --md-sys-color-on-surface-variant: #49454f;\n\n /* Surface containers (MD3 elevation system) */\n --md-sys-color-surface-container-lowest: #ffffff;\n --md-sys-color-surface-container-low: #f7f2fa;\n --md-sys-color-surface-container: #f3edf7;\n --md-sys-color-surface-container-high: #ece6f0;\n --md-sys-color-surface-container-highest: #e6e0e9;\n\n /* Outline */\n --md-sys-color-outline: #79747e;\n --md-sys-color-outline-variant: #cac4d0;\n\n /* Background */\n --md-sys-color-background: #fffbfe;\n --md-sys-color-on-background: #1c1b1f;\n\n /* ==========================================================================\n TYPOGRAPHY TOKENS\n Material Design 3 Type Scale - 5 categories, 3 sizes each (15 total)\n ========================================================================== */\n\n /* Font families */\n --md-sys-typescale-font-family-plain:\n system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n --md-sys-typescale-font-family-brand: var(--md-sys-typescale-font-family-plain);\n\n /* Display - Large expressive text */\n --md-sys-typescale-display-large-size: 3.5625rem; /* 57px */\n --md-sys-typescale-display-large-line-height: 4rem; /* 64px */\n --md-sys-typescale-display-large-weight: 400;\n --md-sys-typescale-display-large-tracking: -0.25px;\n\n --md-sys-typescale-display-medium-size: 2.8125rem; /* 45px */\n --md-sys-typescale-display-medium-line-height: 3.25rem; /* 52px */\n --md-sys-typescale-display-medium-weight: 400;\n --md-sys-typescale-display-medium-tracking: 0;\n\n --md-sys-typescale-display-small-size: 2.25rem; /* 36px */\n --md-sys-typescale-display-small-line-height: 2.75rem; /* 44px */\n --md-sys-typescale-display-small-weight: 400;\n --md-sys-typescale-display-small-tracking: 0;\n\n /* Headline - High-emphasis text */\n --md-sys-typescale-headline-large-size: 2rem; /* 32px */\n --md-sys-typescale-headline-large-line-height: 2.5rem; /* 40px */\n --md-sys-typescale-headline-large-weight: 400;\n --md-sys-typescale-headline-large-tracking: 0;\n\n --md-sys-typescale-headline-medium-size: 1.75rem; /* 28px */\n --md-sys-typescale-headline-medium-line-height: 2.25rem; /* 36px */\n --md-sys-typescale-headline-medium-weight: 400;\n --md-sys-typescale-headline-medium-tracking: 0;\n\n --md-sys-typescale-headline-small-size: 1.5rem; /* 24px */\n --md-sys-typescale-headline-small-line-height: 2rem; /* 32px */\n --md-sys-typescale-headline-small-weight: 400;\n --md-sys-typescale-headline-small-tracking: 0;\n\n /* Title - Medium-emphasis text */\n --md-sys-typescale-title-large-size: 1.375rem; /* 22px */\n --md-sys-typescale-title-large-line-height: 1.75rem; /* 28px */\n --md-sys-typescale-title-large-weight: 400;\n --md-sys-typescale-title-large-tracking: 0;\n\n --md-sys-typescale-title-medium-size: 1rem; /* 16px */\n --md-sys-typescale-title-medium-line-height: 1.5rem; /* 24px */\n --md-sys-typescale-title-medium-weight: 500;\n --md-sys-typescale-title-medium-tracking: 0.15px;\n\n --md-sys-typescale-title-small-size: 0.875rem; /* 14px */\n --md-sys-typescale-title-small-line-height: 1.25rem; /* 20px */\n --md-sys-typescale-title-small-weight: 500;\n --md-sys-typescale-title-small-tracking: 0.1px;\n\n /* Body - Plain text */\n --md-sys-typescale-body-large-size: 1rem; /* 16px */\n --md-sys-typescale-body-large-line-height: 1.5rem; /* 24px */\n --md-sys-typescale-body-large-weight: 400;\n --md-sys-typescale-body-large-tracking: 0.5px;\n\n --md-sys-typescale-body-medium-size: 0.875rem; /* 14px */\n --md-sys-typescale-body-medium-line-height: 1.25rem; /* 20px */\n --md-sys-typescale-body-medium-weight: 400;\n --md-sys-typescale-body-medium-tracking: 0.25px;\n\n --md-sys-typescale-body-small-size: 0.75rem; /* 12px */\n --md-sys-typescale-body-small-line-height: 1rem; /* 16px */\n --md-sys-typescale-body-small-weight: 400;\n --md-sys-typescale-body-small-tracking: 0.4px;\n\n /* Label - UI labels, buttons */\n --md-sys-typescale-label-large-size: 0.875rem; /* 14px */\n --md-sys-typescale-label-large-line-height: 1.25rem; /* 20px */\n --md-sys-typescale-label-large-weight: 500;\n --md-sys-typescale-label-large-tracking: 0.1px;\n\n --md-sys-typescale-label-medium-size: 0.75rem; /* 12px */\n --md-sys-typescale-label-medium-line-height: 1rem; /* 16px */\n --md-sys-typescale-label-medium-weight: 500;\n --md-sys-typescale-label-medium-tracking: 0.5px;\n\n --md-sys-typescale-label-small-size: 0.6875rem; /* 11px */\n --md-sys-typescale-label-small-line-height: 1rem; /* 16px */\n --md-sys-typescale-label-small-weight: 500;\n --md-sys-typescale-label-small-tracking: 0.5px;\n\n /* ==========================================================================\n SHAPE TOKENS\n Material Design 3 corner radius system\n ========================================================================== */\n\n --md-sys-shape-corner-none: 0;\n --md-sys-shape-corner-extra-small: 0.25rem;\n --md-sys-shape-corner-small: 0.5rem;\n --md-sys-shape-corner-medium: 0.75rem;\n --md-sys-shape-corner-large: 1rem;\n --md-sys-shape-corner-extra-large: 1.75rem;\n --md-sys-shape-corner-full: 624.9375rem;\n\n /* ==========================================================================\n ELEVATION TOKENS\n Material Design 3 elevation system (box shadows)\n ========================================================================== */\n\n --md-sys-elevation-level-0: none;\n --md-sys-elevation-level-1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);\n --md-sys-elevation-level-2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);\n --md-sys-elevation-level-3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);\n --md-sys-elevation-level-4: 0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);\n --md-sys-elevation-level-5: 0 4px 4px 0 rgba(0, 0, 0, 0.3), 0 8px 12px 6px rgba(0, 0, 0, 0.15);\n\n /* ==========================================================================\n MOTION TOKENS\n Material Design 3 motion system (duration and easing)\n ========================================================================== */\n\n --md-sys-motion-duration-short1: 50ms;\n --md-sys-motion-duration-short2: 100ms;\n --md-sys-motion-duration-short3: 150ms;\n --md-sys-motion-duration-short4: 200ms;\n --md-sys-motion-duration-medium1: 250ms;\n --md-sys-motion-duration-medium2: 300ms;\n --md-sys-motion-duration-medium3: 350ms;\n --md-sys-motion-duration-medium4: 400ms;\n --md-sys-motion-duration-long1: 450ms;\n --md-sys-motion-duration-long2: 500ms;\n --md-sys-motion-duration-long3: 550ms;\n --md-sys-motion-duration-long4: 600ms;\n\n --md-sys-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);\n --md-sys-motion-easing-emphasized: cubic-bezier(0.2, 0, 0, 1);\n --md-sys-motion-easing-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);\n --md-sys-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);\n}\n\n/* ==========================================================================\n DARK MODE (Placeholder)\n ========================================================================== */\n\n/* Dark mode with class selector (for manual toggling, e.g., Storybook) */\n.dark {\n /* Primary */\n --md-sys-color-primary: #d0bcff;\n --md-sys-color-on-primary: #381e72;\n --md-sys-color-primary-container: #4f378b;\n --md-sys-color-on-primary-container: #eaddff;\n\n /* Secondary */\n --md-sys-color-secondary: #ccc2dc;\n --md-sys-color-on-secondary: #332d41;\n --md-sys-color-secondary-container: #4a4458;\n --md-sys-color-on-secondary-container: #e8def8;\n\n /* Tertiary */\n --md-sys-color-tertiary: #efb8c8;\n --md-sys-color-on-tertiary: #492532;\n --md-sys-color-tertiary-container: #633b48;\n --md-sys-color-on-tertiary-container: #ffd8e4;\n\n /* Error */\n --md-sys-color-error: #f2b8b5;\n --md-sys-color-on-error: #601410;\n --md-sys-color-error-container: #8c1d18;\n --md-sys-color-on-error-container: #f9dedc;\n\n /* Surface */\n --md-sys-color-surface: #1c1b1f;\n --md-sys-color-on-surface: #e6e1e5;\n --md-sys-color-surface-variant: #49454f;\n --md-sys-color-on-surface-variant: #cac4d0;\n\n /* Surface containers (MD3 elevation system - dark mode) */\n --md-sys-color-surface-container-lowest: #0f0d13;\n --md-sys-color-surface-container-low: #1d1b20;\n --md-sys-color-surface-container: #211f26;\n --md-sys-color-surface-container-high: #2b2930;\n --md-sys-color-surface-container-highest: #36343b;\n\n /* Outline */\n --md-sys-color-outline: #938f99;\n --md-sys-color-outline-variant: #49454f;\n\n /* Background */\n --md-sys-color-background: #1c1b1f;\n --md-sys-color-on-background: #e6e1e5;\n}\n\n/* System/OS dark mode preference (activates when no .light class is present) */\n@media (prefers-color-scheme: dark) {\n :root:not(.light) {\n /* Primary */\n --md-sys-color-primary: #d0bcff;\n --md-sys-color-on-primary: #381e72;\n --md-sys-color-primary-container: #4f378b;\n --md-sys-color-on-primary-container: #eaddff;\n\n /* Secondary */\n --md-sys-color-secondary: #ccc2dc;\n --md-sys-color-on-secondary: #332d41;\n --md-sys-color-secondary-container: #4a4458;\n --md-sys-color-on-secondary-container: #e8def8;\n\n /* Tertiary */\n --md-sys-color-tertiary: #efb8c8;\n --md-sys-color-on-tertiary: #492532;\n --md-sys-color-tertiary-container: #633b48;\n --md-sys-color-on-tertiary-container: #ffd8e4;\n\n /* Error */\n --md-sys-color-error: #f2b8b5;\n --md-sys-color-on-error: #601410;\n --md-sys-color-error-container: #8c1d18;\n --md-sys-color-on-error-container: #f9dedc;\n\n /* Surface */\n --md-sys-color-surface: #1c1b1f;\n --md-sys-color-on-surface: #e6e1e5;\n --md-sys-color-surface-variant: #49454f;\n --md-sys-color-on-surface-variant: #cac4d0;\n\n /* Surface containers (MD3 elevation system - dark mode) */\n --md-sys-color-surface-container-lowest: #0f0d13;\n --md-sys-color-surface-container-low: #1d1b20;\n --md-sys-color-surface-container: #211f26;\n --md-sys-color-surface-container-high: #2b2930;\n --md-sys-color-surface-container-highest: #36343b;\n\n /* Outline */\n --md-sys-color-outline: #938f99;\n --md-sys-color-outline-variant: #49454f;\n\n /* Background */\n --md-sys-color-background: #1c1b1f;\n --md-sys-color-on-background: #e6e1e5;\n }\n}\n\n/* ==========================================================================\n GLOBAL STYLES\n Apply MD3 surface colors to body element\n ========================================================================== */\n\nbody {\n background-color: var(--md-sys-color-surface);\n color: var(--md-sys-color-on-surface);\n margin: 0;\n font-family: var(--md-sys-typescale-font-family-plain);\n}\n\n/* ==========================================================================\n TAILWIND V4 INTEGRATION\n Maps MD3 design tokens to Tailwind utility classes\n ========================================================================== */\n\n/* @theme is a Tailwind v4 directive - ignore unknown at-rule warning */\n@theme {\n /* Color Utilities\n Maps MD3 semantic color roles to Tailwind color utilities\n Usage: bg-primary, text-on-primary, border-outline, etc. */\n\n /* Primary colors */\n --color-primary: var(--md-sys-color-primary);\n --color-on-primary: var(--md-sys-color-on-primary);\n --color-primary-container: var(--md-sys-color-primary-container);\n --color-on-primary-container: var(--md-sys-color-on-primary-container);\n\n /* Secondary colors */\n --color-secondary: var(--md-sys-color-secondary);\n --color-on-secondary: var(--md-sys-color-on-secondary);\n --color-secondary-container: var(--md-sys-color-secondary-container);\n --color-on-secondary-container: var(--md-sys-color-on-secondary-container);\n\n /* Tertiary colors */\n --color-tertiary: var(--md-sys-color-tertiary);\n --color-on-tertiary: var(--md-sys-color-on-tertiary);\n --color-tertiary-container: var(--md-sys-color-tertiary-container);\n --color-on-tertiary-container: var(--md-sys-color-on-tertiary-container);\n\n /* Error colors */\n --color-error: var(--md-sys-color-error);\n --color-on-error: var(--md-sys-color-on-error);\n --color-error-container: var(--md-sys-color-error-container);\n --color-on-error-container: var(--md-sys-color-on-error-container);\n\n /* Surface colors */\n --color-surface: var(--md-sys-color-surface);\n --color-on-surface: var(--md-sys-color-on-surface);\n --color-surface-variant: var(--md-sys-color-surface-variant);\n --color-on-surface-variant: var(--md-sys-color-on-surface-variant);\n\n /* Surface containers */\n --color-surface-container-lowest: var(--md-sys-color-surface-container-lowest);\n --color-surface-container-low: var(--md-sys-color-surface-container-low);\n --color-surface-container: var(--md-sys-color-surface-container);\n --color-surface-container-high: var(--md-sys-color-surface-container-high);\n --color-surface-container-highest: var(--md-sys-color-surface-container-highest);\n\n /* Outline colors */\n --color-outline: var(--md-sys-color-outline);\n --color-outline-variant: var(--md-sys-color-outline-variant);\n\n /* Background colors */\n --color-background: var(--md-sys-color-background);\n --color-on-background: var(--md-sys-color-on-background);\n\n /* Elevation/Shadow utilities\n Maps MD3 elevation levels to Tailwind box-shadow utilities\n Usage: shadow-elevation-1, shadow-elevation-2, etc. */\n --shadow-elevation-0: var(--md-sys-elevation-level-0);\n --shadow-elevation-1: var(--md-sys-elevation-level-1);\n --shadow-elevation-2: var(--md-sys-elevation-level-2);\n --shadow-elevation-3: var(--md-sys-elevation-level-3);\n --shadow-elevation-4: var(--md-sys-elevation-level-4);\n --shadow-elevation-5: var(--md-sys-elevation-level-5);\n}\n\n/* ==========================================================================\n ANIMATIONS\n Material Design 3 motion specs for ripple and other animations\n ========================================================================== */\n\n@keyframes ripple {\n to {\n transform: translate(-50%, -50%) scale(1);\n opacity: 0;\n }\n}\n\n/* Extend Tailwind theme with MD3 animations and opacity values */\n/* @theme is a Tailwind v4 directive - ignore unknown at-rule warning */\n@theme {\n /* Animations */\n --animate-ripple: ripple 450ms cubic-bezier(0.2, 0, 0, 1);\n\n /* Opacity values for MD3 state layers */\n --opacity-8: 0.08;\n --opacity-12: 0.12;\n --opacity-38: 0.38;\n}\n"],"mappings":";;;AAYA;AAQE,0BAAwB;AACxB,6BAA2B;AAC3B,oCAAkC;AAClC,uCAAqC;AAGrC,4BAA0B;AAC1B,+BAA6B;AAC7B,sCAAoC;AACpC,yCAAuC;AAGvC,2BAAyB;AACzB,8BAA4B;AAC5B,qCAAmC;AACnC,wCAAsC;AAGtC,wBAAsB;AACtB,2BAAyB;AACzB,kCAAgC;AAChC,qCAAmC;AAGnC,0BAAwB;AACxB,6BAA2B;AAC3B,kCAAgC;AAChC,qCAAmC;AAGnC,2CAAyC;AACzC,wCAAsC;AACtC,oCAAkC;AAClC,yCAAuC;AACvC,4CAA0C;AAG1C,0BAAwB;AACxB,kCAAgC;AAGhC,6BAA2B;AAC3B,gCAA8B;AAQ9B;AAAA,IACE,SAAS;AAAA,IAAE,aAAa;AAAA,IAAE,UAAU;AAAA,IAAE,MAAM;AAAA,IAAE,gBAAgB;AAAA,IAAE,KAAK;AAAA,IAAE;AACzE,wCAAsC,IAAI;AAG1C,yCAAuC;AACvC,gDAA8C;AAC9C,2CAAyC;AACzC,6CAA2C;AAE3C,0CAAwC;AACxC,iDAA+C;AAC/C,4CAA0C;AAC1C,8CAA4C;AAE5C,yCAAuC;AACvC,gDAA8C;AAC9C,2CAAyC;AACzC,6CAA2C;AAG3C,0CAAwC;AACxC,iDAA+C;AAC/C,4CAA0C;AAC1C,8CAA4C;AAE5C,2CAAyC;AACzC,kDAAgD;AAChD,6CAA2C;AAC3C,+CAA6C;AAE7C,0CAAwC;AACxC,iDAA+C;AAC/C,4CAA0C;AAC1C,8CAA4C;AAG5C,uCAAqC;AACrC,8CAA4C;AAC5C,yCAAuC;AACvC,2CAAyC;AAEzC,wCAAsC;AACtC,+CAA6C;AAC7C,0CAAwC;AACxC,4CAA0C;AAE1C,uCAAqC;AACrC,8CAA4C;AAC5C,yCAAuC;AACvC,2CAAyC;AAGzC,sCAAoC;AACpC,6CAA2C;AAC3C,wCAAsC;AACtC,0CAAwC;AAExC,uCAAqC;AACrC,8CAA4C;AAC5C,yCAAuC;AACvC,2CAAyC;AAEzC,sCAAoC;AACpC,6CAA2C;AAC3C,wCAAsC;AACtC,0CAAwC;AAGxC,uCAAqC;AACrC,8CAA4C;AAC5C,yCAAuC;AACvC,2CAAyC;AAEzC,wCAAsC;AACtC,+CAA6C;AAC7C,0CAAwC;AACxC,4CAA0C;AAE1C,uCAAqC;AACrC,8CAA4C;AAC5C,yCAAuC;AACvC,2CAAyC;AAOzC,8BAA4B;AAC5B,qCAAmC;AACnC,+BAA6B;AAC7B,gCAA8B;AAC9B,+BAA6B;AAC7B,qCAAmC;AACnC,8BAA4B;AAO5B,8BAA4B;AAC5B,8BAA4B,EAAE,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxF,8BAA4B,EAAE,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxF,8BAA4B,EAAE,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,IAAI,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACxF,8BAA4B,EAAE,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,KAAK,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AACzF,8BAA4B,EAAE,IAAI,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,IAAI,KAAK,IAAI,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;AAOzF,mCAAiC;AACjC,mCAAiC;AACjC,mCAAiC;AACjC,mCAAiC;AACjC,oCAAkC;AAClC,oCAAkC;AAClC,oCAAkC;AAClC,oCAAkC;AAClC,kCAAgC;AAChC,kCAAgC;AAChC,kCAAgC;AAChC,kCAAgC;AAEhC,mCAAiC,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AACzD,qCAAmC,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE;AAC3D,gDAA8C,aAAa,IAAI,EAAE,GAAG,EAAE,GAAG,EAAE;AAC3E,gDAA8C,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AAC1E;AAOA,CAAC;AAEC,0BAAwB;AACxB,6BAA2B;AAC3B,oCAAkC;AAClC,uCAAqC;AAGrC,4BAA0B;AAC1B,+BAA6B;AAC7B,sCAAoC;AACpC,yCAAuC;AAGvC,2BAAyB;AACzB,8BAA4B;AAC5B,qCAAmC;AACnC,wCAAsC;AAGtC,wBAAsB;AACtB,2BAAyB;AACzB,kCAAgC;AAChC,qCAAmC;AAGnC,0BAAwB;AACxB,6BAA2B;AAC3B,kCAAgC;AAChC,qCAAmC;AAGnC,2CAAyC;AACzC,wCAAsC;AACtC,oCAAkC;AAClC,yCAAuC;AACvC,4CAA0C;AAG1C,0BAAwB;AACxB,kCAAgC;AAGhC,6BAA2B;AAC3B,gCAA8B;AAChC;AAGA,QAAO,sBAAuB;AAC5B,OAAK,KAAK,CAAC;AAET,4BAAwB;AACxB,+BAA2B;AAC3B,sCAAkC;AAClC,yCAAqC;AAGrC,8BAA0B;AAC1B,iCAA6B;AAC7B,wCAAoC;AACpC,2CAAuC;AAGvC,6BAAyB;AACzB,gCAA4B;AAC5B,uCAAmC;AACnC,0CAAsC;AAGtC,0BAAsB;AACtB,6BAAyB;AACzB,oCAAgC;AAChC,uCAAmC;AAGnC,4BAAwB;AACxB,+BAA2B;AAC3B,oCAAgC;AAChC,uCAAmC;AAGnC,6CAAyC;AACzC,0CAAsC;AACtC,sCAAkC;AAClC,2CAAuC;AACvC,8CAA0C;AAG1C,4BAAwB;AACxB,oCAAgC;AAGhC,+BAA2B;AAC3B,kCAA8B;AAChC;AACF;AAOA;AACE,oBAAkB,IAAI;AACtB,SAAO,IAAI;AACX,UAAQ;AACR,eAAa,IAAI;AACnB;AAQA,OAAO,EAML,eAAe,EAAE,IAAI,uBAAuB,EAC5C,kBAAkB,EAAE,IAAI,0BAA0B,EAClD,yBAAyB,EAAE,IAAI,iCAAiC,EAChE,4BAA4B,EAAE,IAAI,oCAAoC,EAGtE,iBAAiB,EAAE,IAAI,yBAAyB,EAChD,oBAAoB,EAAE,IAAI,4BAA4B,EACtD,2BAA2B,EAAE,IAAI,mCAAmC,EACpE,8BAA8B,EAAE,IAAI,sCAAsC,EAG1E,gBAAgB,EAAE,IAAI,wBAAwB,EAC9C,mBAAmB,EAAE,IAAI,2BAA2B,EACpD,0BAA0B,EAAE,IAAI,kCAAkC,EAClE,6BAA6B,EAAE,IAAI,qCAAqC,EAGxE,aAAa,EAAE,IAAI,qBAAqB,EACxC,gBAAgB,EAAE,IAAI,wBAAwB,EAC9C,uBAAuB,EAAE,IAAI,+BAA+B,EAC5D,0BAA0B,EAAE,IAAI,kCAAkC,EAGlE,eAAe,EAAE,IAAI,uBAAuB,EAC5C,kBAAkB,EAAE,IAAI,0BAA0B,EAClD,uBAAuB,EAAE,IAAI,+BAA+B,EAC5D,0BAA0B,EAAE,IAAI,kCAAkC,EAGlE,gCAAgC,EAAE,IAAI,wCAAwC,EAC9E,6BAA6B,EAAE,IAAI,qCAAqC,EACxE,yBAAyB,EAAE,IAAI,iCAAiC,EAChE,8BAA8B,EAAE,IAAI,sCAAsC,EAC1E,iCAAiC,EAAE,IAAI,yCAAyC,EAGhF,eAAe,EAAE,IAAI,uBAAuB,EAC5C,uBAAuB,EAAE,IAAI,+BAA+B,EAG5D,kBAAkB,EAAE,IAAI,0BAA0B,EAClD,qBAAqB,EAAE,IAAI,6BAA6B,EAKxD,oBAAoB,EAAE,IAAI,2BAA2B,EACrD,oBAAoB,EAAE,IAAI,2BAA2B,EACrD,oBAAoB,EAAE,IAAI,2BAA2B,EACrD,oBAAoB,EAAE,IAAI,2BAA2B,EACrD,oBAAoB,EAAE,IAAI,2BAA2B,EACrD,oBAAoB,EAAE,IAAI,2BAA2B;AAQvD,WAAW;AACT;AACE,eAAW,UAAU,IAAI,EAAE,MAAM,MAAM;AACvC,aAAS;AACX;AACF;AAIA,OAAO,EAEL,gBAAgB,EAAE,OAAO,MAAM,aAAa,GAAG,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,EAGzD,WAAW,EAAE,IAAI,EACjB,YAAY,EAAE,IAAI,EAClB,YAAY,EAAE,IAAI;","names":[]}
package/dist/styles.d.cts ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/dist/styles.d.ts ADDED
@@ -0,0 +1,2 @@
1
+
2
+ export { }
package/package.json ADDED
@@ -0,0 +1,118 @@
1
+ {
2
+ "name": "@tinybigui/react",
3
+ "version": "0.1.0-rc.1",
4
+ "description": "Material Design 3 React components built with Tailwind CSS",
5
+ "keywords": [
6
+ "react",
7
+ "material-design",
8
+ "material-design-3",
9
+ "ui-library",
10
+ "tailwindcss",
11
+ "components",
12
+ "md3"
13
+ ],
14
+ "homepage": "https://github.com/buildinclicks/tinybigui#readme",
15
+ "bugs": {
16
+ "url": "https://github.com/buildinclicks/tinybigui/issues"
17
+ },
18
+ "repository": {
19
+ "type": "git",
20
+ "url": "git+https://github.com/buildinclicks/tinybigui.git",
21
+ "directory": "packages/react"
22
+ },
23
+ "license": "MIT",
24
+ "author": "buildinclicks",
25
+ "sideEffects": [
26
+ "**/*.css"
27
+ ],
28
+ "type": "module",
29
+ "exports": {
30
+ ".": {
31
+ "import": {
32
+ "types": "./dist/index.d.ts",
33
+ "default": "./dist/index.js"
34
+ },
35
+ "require": {
36
+ "types": "./dist/index.d.cts",
37
+ "default": "./dist/index.cjs"
38
+ }
39
+ },
40
+ "./styles.css": "./dist/styles.css",
41
+ "./package.json": "./package.json"
42
+ },
43
+ "main": "./dist/index.cjs",
44
+ "module": "./dist/index.js",
45
+ "types": "./dist/index.d.ts",
46
+ "files": [
47
+ "dist",
48
+ "README.md",
49
+ "LICENSE"
50
+ ],
51
+ "dependencies": {
52
+ "@material/material-color-utilities": "^0.3.0",
53
+ "@react-aria/live-announcer": "^3.4.4",
54
+ "class-variance-authority": "^0.7.1",
55
+ "clsx": "^2.1.1",
56
+ "react-aria": "^3.45.0",
57
+ "react-aria-components": "^1.14.0",
58
+ "tailwind-merge": "^2.6.0"
59
+ },
60
+ "devDependencies": {
61
+ "@chromatic-com/storybook": "^4.1.3",
62
+ "@storybook/addon-a11y": "^10.1.11",
63
+ "@storybook/addon-docs": "^10.1.11",
64
+ "@storybook/addon-mcp": "^0.1.8",
65
+ "@storybook/addon-themes": "^10.1.11",
66
+ "@storybook/addon-vitest": "^10.1.11",
67
+ "@storybook/react-vite": "^10.1.11",
68
+ "@tailwindcss/vite": "^4.1.18",
69
+ "@types/react": "^18.3.18",
70
+ "@types/react-dom": "^18.3.5",
71
+ "@vitest/browser-playwright": "^4.0.16",
72
+ "@vitest/coverage-v8": "^4.0.16",
73
+ "eslint": "^9.39.2",
74
+ "eslint-config-prettier": "^10.1.8",
75
+ "eslint-plugin-jsx-a11y": "^6.10.2",
76
+ "eslint-plugin-react": "^7.37.5",
77
+ "eslint-plugin-react-hooks": "^7.0.1",
78
+ "eslint-plugin-storybook": "^10.1.11",
79
+ "playwright": "^1.57.0",
80
+ "react": "^18.3.1",
81
+ "react-dom": "^18.3.1",
82
+ "storybook": "^10.1.11",
83
+ "tailwindcss": "^4.0.0",
84
+ "tsup": "^8.3.5",
85
+ "typescript": "^5.7.2",
86
+ "typescript-eslint": "^8.51.0",
87
+ "vitest-axe": "^0.1.0",
88
+ "@tinybigui/tokens": "0.1.0-rc.1"
89
+ },
90
+ "peerDependencies": {
91
+ "react": "^18.0.0 || ^19.0.0",
92
+ "react-dom": "^18.0.0 || ^19.0.0",
93
+ "tailwindcss": "^4.0.0"
94
+ },
95
+ "peerDependenciesMeta": {
96
+ "tailwindcss": {
97
+ "optional": true
98
+ }
99
+ },
100
+ "publishConfig": {
101
+ "access": "public"
102
+ },
103
+ "eslintConfig": {
104
+ "extends": [
105
+ "plugin:storybook/recommended"
106
+ ]
107
+ },
108
+ "scripts": {
109
+ "build": "tsup",
110
+ "dev": "tsup --watch",
111
+ "typecheck": "tsc --noEmit",
112
+ "test": "vitest run",
113
+ "test:watch": "vitest",
114
+ "clean": "rm -rf dist",
115
+ "storybook": "storybook dev -p 6006",
116
+ "build-storybook": "storybook build"
117
+ }
118
+ }