@motiadev/ui 0.3.1-beta.86 → 0.3.1-beta.88-406962

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 (47) hide show
  1. package/dist/components/ui/breadcrumb.d.ts +27 -0
  2. package/dist/components/ui/breadcrumb.d.ts.map +1 -0
  3. package/dist/components/ui/breadcrumb.stories.d.ts +16 -0
  4. package/dist/components/ui/breadcrumb.stories.d.ts.map +1 -0
  5. package/dist/components/ui/button.d.ts +5 -5
  6. package/dist/components/ui/button.d.ts.map +1 -1
  7. package/dist/components/ui/button.stories.d.ts +3 -37
  8. package/dist/components/ui/button.stories.d.ts.map +1 -1
  9. package/dist/components/ui/collapsible-panel.d.ts +15 -0
  10. package/dist/components/ui/collapsible-panel.d.ts.map +1 -0
  11. package/dist/components/ui/collapsible-panel.stories.d.ts +8 -0
  12. package/dist/components/ui/collapsible-panel.stories.d.ts.map +1 -0
  13. package/dist/components/ui/container.d.ts +15 -0
  14. package/dist/components/ui/container.d.ts.map +1 -0
  15. package/dist/components/ui/container.stories.d.ts +9 -0
  16. package/dist/components/ui/container.stories.d.ts.map +1 -0
  17. package/dist/components/ui/dropdown-menu.d.ts +25 -0
  18. package/dist/components/ui/dropdown-menu.d.ts.map +1 -0
  19. package/dist/components/ui/dropdown-menu.stories.d.ts +13 -0
  20. package/dist/components/ui/dropdown-menu.stories.d.ts.map +1 -0
  21. package/dist/components/ui/input.d.ts +9 -3
  22. package/dist/components/ui/input.d.ts.map +1 -1
  23. package/dist/components/ui/input.stories.d.ts +3 -46
  24. package/dist/components/ui/input.stories.d.ts.map +1 -1
  25. package/dist/components/ui/panel.d.ts +14 -13
  26. package/dist/components/ui/panel.d.ts.map +1 -1
  27. package/dist/components/ui/panel.stories.d.ts +0 -1
  28. package/dist/components/ui/panel.stories.d.ts.map +1 -1
  29. package/dist/components/ui/side-panel-detail.d.ts +8 -0
  30. package/dist/components/ui/side-panel-detail.d.ts.map +1 -0
  31. package/dist/components/ui/side-panel.d.ts +21 -0
  32. package/dist/components/ui/side-panel.d.ts.map +1 -0
  33. package/dist/components/ui/tabs.d.ts +7 -0
  34. package/dist/components/ui/tabs.d.ts.map +1 -0
  35. package/dist/components/ui/tabs.stories.d.ts +7 -0
  36. package/dist/components/ui/tabs.stories.d.ts.map +1 -0
  37. package/dist/components/ui/textarea.d.ts +2 -3
  38. package/dist/components/ui/textarea.d.ts.map +1 -1
  39. package/dist/components/ui/textarea.stories.d.ts +2 -45
  40. package/dist/components/ui/textarea.stories.d.ts.map +1 -1
  41. package/dist/globals.css +131 -227
  42. package/dist/index.cjs +99 -4
  43. package/dist/index.d.ts +7 -0
  44. package/dist/index.d.ts.map +1 -1
  45. package/dist/index.js +6502 -872
  46. package/dist/ui.css +1 -1
  47. package/package.json +20 -15
package/dist/globals.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --font-weight-600: 600;
21
21
  --font-weight-700: 700;
22
22
 
23
- /* Figma Design System - Accent Colors */
23
+ /* Base Color Palette */
24
24
  --accent-1000: #2862fe;
25
25
  --accent-970: #2862fef7;
26
26
  --accent-950: #2862fef2;
@@ -36,7 +36,6 @@
36
36
  --accent-50: #2862fe0d;
37
37
  --accent-30: #2862fe08;
38
38
 
39
- /* Figma Design System - Dark Colors */
40
39
  --dark-1000: #0a0a0a;
41
40
  --dark-970: #0a0a0af7;
42
41
  --dark-950: #0a0a0af2;
@@ -52,7 +51,6 @@
52
51
  --dark-50: #0a0a0a0d;
53
52
  --dark-30: #0a0a0a08;
54
53
 
55
- /* Figma Design System - Light Colors */
56
54
  --light-1000: #ffffff;
57
55
  --light-970: #fffffff7;
58
56
  --light-950: #fffffff2;
@@ -67,211 +65,158 @@
67
65
  --light-100: #ffffff1a;
68
66
  --light-50: #ffffff0d;
69
67
  --light-30: #ffffff08;
68
+
70
69
  --error: #d61355;
71
70
 
72
- /* Figma Semantic Tokens - Light Theme (Inverted from dark theme values) */
73
- --bg-default: var(--light-1000); /* BG/Default */
74
- --bg-content: var(--dark-30); /* BG/Content inverted */
75
- --bg-component: var(--dark-50); /* BG/Component inverted */
76
- --bg-light100: var(--dark-100); /* BG/Light100 inverted */
77
- --bg-light200: var(--dark-200); /* BG/Light200 inverted */
78
- --bg-shade100: var(--dark-100); /* BG/Shade100 inverted */
79
- --bg-shade200: var(--dark-200); /* BG/Shade200 inverted */
80
-
81
- --br-outline: var(--dark-100); /* BR/Outline inverted */
82
- --br-light: var(--dark-1000); /* BR/Light inverted */
83
- --br-accent: var(--accent-1000); /* BR/Accent */
84
-
85
- --states-fill-hover: var(--dark-30); /* States/Fill/Hover inverted */
86
- --states-fill-selected: var(--dark-100); /* States/Fill/Selected inverted */
87
- --states-fill-active: var(--accent-1000); /* States/Fill/Active */
88
-
89
- --fill-default-1000: var(--dark-1000); /* Fill/Default-1000 inverted */
90
- --fill-default-600: var(--dark-600); /* Fill/Default-600 inverted */
91
- --fill-default-200: var(--dark-200); /* Fill/Default-200 inverted */
92
- --fill-inverse-1000: var(--light-1000); /* Fill/Inverse-1000 */
93
- --fill-inverse-600: var(--light-600); /* Fill/Inverse-600 */
94
- --fill-inverse-200: var(--light-200); /* Fill/Inverse-200 */
95
- --fill-accent-1000: var(--accent-1000); /* Fill/Accent-1000 */
96
- --fill-error: var(--error); /* Fill/Error */
97
-
98
- --text-header: var(--dark-1000); /* Text/Header inverted */
99
- --text-body: var(--dark-600); /* Text/Body inverted */
100
- --text-placeholder: var(--dark-400); /* Text/Placeholder inverted */
101
- --text-accent: var(--accent-1000); /* Text/Accent */
102
- --text-error: var(--error); /* Text/Error */
103
-
104
- --icon-active: var(--dark-1000); /* Icon/Active inverted */
105
- --icon-light: var(--dark-600); /* Icon/Light inverted */
106
- --icon-component: var(--dark-400); /* Icon/Component inverted */
107
- --icon-accent: var(--accent-1000); /* Icon/Accent */
108
-
109
- /* Surface Colors from Figma Design System - Light Theme */
110
- --surface-default: var(--bg-default);
111
- --surface-content: var(--bg-content);
112
- --surface-component: var(--bg-component);
113
- --surface-light-100: var(--bg-light100);
114
- --surface-light-200: var(--bg-light200);
115
- --surface-shade-100: var(--bg-shade100);
116
- --surface-shade-200: var(--bg-shade200);
117
-
118
- /* Primary Accent Colors */
71
+ /* Light Theme Semantic Tokens */
72
+ --background: var(--light-1000);
73
+ --foreground: var(--dark-1000);
74
+
75
+ --surface-content: var(--dark-30);
76
+ --surface-component: var(--dark-50);
77
+ --surface-light-100: var(--dark-100);
78
+ --surface-light-200: var(--dark-200);
79
+
80
+ --border: var(--dark-100);
81
+ --border-accent: var(--accent-1000);
82
+
83
+ --states-hover: var(--dark-30);
84
+ --states-selected: var(--dark-100);
85
+ --states-active: var(--accent-1000);
86
+
87
+ --text-header: var(--dark-1000);
88
+ --text-body: var(--dark-600);
89
+ --text-placeholder: var(--dark-400);
90
+ --text-accent: var(--accent-1000);
91
+ --text-error: var(--error);
92
+
93
+ --icon-active: var(--dark-1000);
94
+ --icon-light: var(--dark-600);
95
+ --icon-component: var(--dark-400);
96
+ --icon-accent: var(--accent-1000);
97
+
98
+ /* Component Tokens */
119
99
  --primary: var(--accent-1000);
120
100
  --primary-foreground: var(--light-1000);
121
101
 
122
- /* Light Theme Colors (Using Figma tokens) */
123
- --background: var(--bg-default);
124
- --foreground: var(--fill-default-1000);
125
- --card: var(--bg-content);
126
- --card-foreground: var(--fill-default-1000);
127
- --popover: var(--bg-content);
128
- --popover-foreground: var(--fill-default-1000);
129
- --secondary: var(--bg-component);
130
- --secondary-foreground: var(--fill-default-600);
131
- --muted: var(--bg-light100);
132
- --muted-foreground: var(--fill-default-600);
133
- --accent: var(--fill-accent-1000);
102
+ --secondary: var(--surface-component);
103
+ --secondary-foreground: var(--text-body);
104
+
105
+ --muted: var(--surface-light-100);
106
+ --muted-foreground: var(--text-body);
107
+
108
+ --accent: var(--accent-1000);
134
109
  --accent-foreground: var(--light-1000);
110
+
135
111
  --destructive: var(--error);
136
112
  --destructive-foreground: var(--light-1000);
137
- --border: var(--br-outline);
138
- --input: var(--states-fill-hover);
139
- --ring: var(--br-accent);
140
113
 
141
- /* Chart colors using accent variations */
114
+ --card: var(--surface-content);
115
+ --card-foreground: var(--foreground);
116
+
117
+ --popover: var(--surface-content);
118
+ --popover-foreground: var(--foreground);
119
+
120
+ --input: var(--states-hover);
121
+ --ring: var(--border-accent);
122
+
123
+ /* Chart colors */
142
124
  --chart-1: var(--accent-1000);
143
125
  --chart-2: var(--accent-800);
144
126
  --chart-3: var(--accent-600);
145
127
  --chart-4: var(--accent-400);
146
128
  --chart-5: var(--accent-200);
147
129
 
148
- /* Header colors */
149
- --header: var(--bg-default);
130
+ /* Header tokens */
131
+ --header: var(--background);
150
132
  --header-foreground: var(--text-header);
151
- --header-primary: var(--fill-accent-1000);
152
- --header-primary-foreground: var(--light-1000);
153
- --header-accent: var(--bg-component);
154
- --header-accent-foreground: var(--fill-default-600);
155
- --header-border: var(--br-outline);
156
- --header-ring: var(--br-accent);
157
-
158
- /* Sidebar colors */
159
- --sidebar: var(--bg-default);
133
+ --header-primary: var(--primary);
134
+ --header-primary-foreground: var(--primary-foreground);
135
+ --header-accent: var(--surface-component);
136
+ --header-accent-foreground: var(--text-body);
137
+ --header-border: var(--border);
138
+ --header-ring: var(--ring);
139
+
140
+ /* Sidebar tokens */
141
+ --sidebar: var(--background);
160
142
  --sidebar-foreground: var(--text-header);
161
- --sidebar-primary: var(--fill-accent-1000);
162
- --sidebar-primary-foreground: var(--light-1000);
163
- --sidebar-accent: var(--bg-component);
164
- --sidebar-accent-foreground: var(--fill-default-600);
165
- --sidebar-border: var(--br-outline);
166
- --sidebar-ring: var(--br-accent);
143
+ --sidebar-primary: var(--primary);
144
+ --sidebar-primary-foreground: var(--primary-foreground);
145
+ --sidebar-accent: var(--surface-component);
146
+ --sidebar-accent-foreground: var(--text-body);
147
+ --sidebar-border: var(--border);
148
+ --sidebar-ring: var(--ring);
167
149
  }
168
150
 
169
151
  .dark {
170
- /* Figma Semantic Tokens - Dark Theme (Direct from Figma) */
171
- --bg-default: var(--dark-1000); /* BG/Default */
172
- --bg-content: var(--light-30); /* BG/Content */
173
- --bg-component: var(--light-50); /* BG/Component */
174
- --bg-light100: var(--light-100); /* BG/Light100 */
175
- --bg-light200: var(--light-200); /* BG/Light200 */
176
- --bg-shade100: var(--dark-100); /* BG/Shade100 */
177
- --bg-shade200: var(--dark-200); /* BG/Shade200 */
178
- --bg-dark100: var(--dark-100); /* BG/Dark100 */
179
- --bg-dark200: var(--dark-200); /* BG/Dark200 */
180
-
181
- --br-outline: var(--light-100); /* BR/Outline */
182
- --br-light: var(--light-1000); /* BR/Light */
183
- --br-accent: var(--accent-1000); /* BR/Accent */
184
-
185
- --states-fill-hover: var(--light-30); /* States/Fill/Hover */
186
- --states-fill-selected: var(--light-100); /* States/Fill/Selected */
187
- --states-fill-active: var(--accent-1000); /* States/Fill/Active */
188
-
189
- --fill-default-1000: var(--light-1000); /* Fill/Default-1000 */
190
- --fill-default-600: var(--light-600); /* Fill/Default-600 */
191
- --fill-default-200: var(--light-200); /* Fill/Default-200 */
192
- --fill-inverse-1000: var(--dark-1000); /* Fill/Inverse-1000 */
193
- --fill-inverse-600: var(--dark-600); /* Fill/Inverse-600 */
194
- --fill-inverse-200: var(--dark-200); /* Fill/Inverse-200 */
195
- --fill-accent-1000: var(--accent-1000); /* Fill/Accent-1000 */
196
- --fill-error: var(--error); /* Fill/Error */
197
-
198
- --text-header: var(--light-1000); /* Text/Header */
199
- --text-body: var(--light-600); /* Text/Body */
200
- --text-placeholder: var(--light-400); /* Text/Placeholder */
201
- --text-accent: var(--accent-1000); /* Text/Accent */
202
- --text-error: var(--error); /* Text/Error */
203
-
204
- --icon-active: var(--light-1000); /* Icon/Active */
205
- --icon-light: var(--light-600); /* Icon/Light */
206
- --icon-component: var(--light-400); /* Icon/Component */
207
- --icon-accent: var(--accent-1000); /* Icon/Accent */
208
-
209
- /* Surface Colors from Figma Design System - Dark Theme */
210
- --surface-default: var(--bg-default);
211
- --surface-content: var(--bg-content);
212
- --surface-component: var(--bg-component);
213
- --surface-light-100: var(--bg-light100);
214
- --surface-light-200: var(--bg-light200);
215
- --surface-shade-100: var(--bg-shade100);
216
- --surface-shade-200: var(--bg-shade200);
217
-
218
- /* Dark Theme Colors (From Figma design system) */
219
- --background: var(--bg-default);
220
- --foreground: var(--fill-default-1000);
221
- --card: var(--bg-content);
222
- --card-foreground: var(--fill-default-1000);
223
- --popover: var(--bg-content);
224
- --popover-foreground: var(--fill-default-1000);
225
- --primary: var(--fill-accent-1000);
226
- --primary-foreground: var(--light-1000);
227
- --secondary: var(--bg-component);
228
- --secondary-foreground: var(--fill-default-600);
229
- --muted: var(--bg-light100);
230
- --muted-foreground: var(--text-body);
231
- --accent: var(--fill-accent-1000);
232
- --accent-foreground: var(--light-1000);
233
- --destructive: var(--error);
234
- --destructive-foreground: var(--light-1000);
235
- --border: var(--br-outline);
236
- --input: var(--states-fill-hover);
237
- --ring: var(--br-accent);
152
+ /* Dark Theme Semantic Tokens */
153
+ --background: var(--dark-1000);
154
+ --foreground: var(--light-1000);
238
155
 
239
- /* Chart colors using Light variations from Figma */
240
- --chart-1: var(--accent-1000);
241
- --chart-2: var(--light-600);
242
- --chart-3: var(--light-400);
243
- --chart-4: var(--light-200);
244
- --chart-5: var(--light-100);
156
+ --surface-content: var(--light-30);
157
+ --surface-component: var(--light-50);
158
+ --surface-light-100: var(--light-100);
159
+ --surface-light-200: var(--light-200);
160
+
161
+ --border: var(--light-100);
162
+
163
+ --states-hover: var(--light-30);
164
+ --states-selected: var(--light-100);
165
+
166
+ --text-header: var(--light-1000);
167
+ --text-body: var(--light-600);
168
+ --text-placeholder: var(--light-400);
169
+
170
+ --icon-active: var(--light-1000);
171
+ --icon-light: var(--light-600);
172
+ --icon-component: var(--light-400);
245
173
 
246
- /* Header colors */
247
- --header: var(--bg-default);
174
+ --secondary-foreground: var(--light-600);
175
+ --muted-foreground: var(--light-600);
176
+
177
+ --card: var(--surface-content);
178
+ --card-foreground: var(--foreground);
179
+
180
+ --popover: var(--surface-content);
181
+ --popover-foreground: var(--foreground);
182
+
183
+ --input: var(--states-hover);
184
+ --ring: var(--border-accent);
185
+
186
+ --chart-1: var(--accent-1000);
187
+ --chart-2: var(--accent-800);
188
+ --chart-3: var(--accent-600);
189
+ --chart-4: var(--accent-400);
190
+ --chart-5: var(--accent-200);
191
+
192
+ /* Header tokens */
193
+ --header: var(--background);
248
194
  --header-foreground: var(--text-header);
249
- --header-primary: var(--fill-accent-1000);
250
- --header-primary-foreground: var(--light-1000);
251
- --header-accent: var(--bg-component);
195
+ --header-primary: var(--primary);
196
+ --header-primary-foreground: var(--primary-foreground);
197
+ --header-accent: var(--surface-component);
252
198
  --header-accent-foreground: var(--text-body);
253
- --header-border: var(--br-outline);
254
- --header-ring: var(--br-accent);
255
-
256
- /* Sidebar colors */
257
- --sidebar: var(--bg-default);
199
+ --header-border: var(--border);
200
+ --header-ring: var(--ring);
201
+
202
+ /* Sidebar tokens */
203
+ --sidebar: var(--background);
258
204
  --sidebar-foreground: var(--text-header);
259
- --sidebar-primary: var(--fill-accent-1000);
260
- --sidebar-primary-foreground: var(--light-1000);
261
- --sidebar-accent: var(--bg-component);
205
+ --sidebar-primary: var(--primary);
206
+ --sidebar-primary-foreground: var(--primary-foreground);
207
+ --sidebar-accent: var(--surface-component);
262
208
  --sidebar-accent-foreground: var(--text-body);
263
- --sidebar-border: var(--br-outline);
264
- --sidebar-ring: var(--br-accent);
209
+ --sidebar-border: var(--border);
210
+ --sidebar-ring: var(--ring);
265
211
  }
266
212
 
267
213
  @theme inline {
268
- /* Tailwind Size Variables - Based on Figma Design System */
269
-
214
+ /* Expose CSS variables to Tailwind */
270
215
  --font-weight-500: var(--font-weight-500);
271
216
  --font-weight-600: var(--font-weight-600);
272
217
  --font-weight-700: var(--font-weight-700);
273
218
 
274
- /* Figma Design System Colors - Direct Access */
219
+ /* Expose color palette */
275
220
  --color-accent-1000: var(--accent-1000);
276
221
  --color-accent-970: var(--accent-970);
277
222
  --color-accent-950: var(--accent-950);
@@ -317,60 +262,11 @@
317
262
  --color-light-50: var(--light-50);
318
263
  --color-light-30: var(--light-30);
319
264
 
320
- /* Figma Semantic Tokens - Direct Access */
321
- --color-default: var(--bg-default);
322
- --color-content: var(--bg-content);
323
- --color-component: var(--bg-component);
324
- --color-light100: var(--bg-light100);
325
- --color-light200: var(--bg-light200);
326
- --color-shade100: var(--bg-shade100);
327
- --color-shade200: var(--bg-shade200);
328
- --color-dark100: var(--bg-dark100);
329
-
330
- --color-br-outline: var(--br-outline);
331
- --color-br-light: var(--br-light);
332
- --color-br-accent: var(--br-accent);
333
-
334
- --color-states-fill-hover: var(--states-fill-hover);
335
- --color-states-fill-selected: var(--states-fill-selected);
336
- --color-states-fill-active: var(--states-fill-active);
337
-
338
- --color-fill-default-1000: var(--fill-default-1000);
339
- --color-fill-default-600: var(--fill-default-600);
340
- --color-fill-default-200: var(--fill-default-200);
341
- --color-fill-inverse-1000: var(--fill-inverse-1000);
342
- --color-fill-inverse-600: var(--fill-inverse-600);
343
- --color-fill-inverse-200: var(--fill-inverse-200);
344
- --color-fill-accent-1000: var(--fill-accent-1000);
345
- --color-fill-error: var(--error);
346
-
347
- --color-text-header: var(--text-header);
348
- --color-text-body: var(--text-body);
349
- --color-text-placeholder: var(--text-placeholder);
350
- --color-text-accent: var(--text-accent);
351
- --color-text-error: var(--text-error);
352
-
353
- --color-icon-active: var(--icon-active);
354
- --color-icon-light: var(--icon-light);
355
- --color-icon-component: var(--icon-component);
356
- --color-icon-accent: var(--icon-accent);
357
-
358
- /* Surface Colors */
359
- --color-surface-default: var(--surface-default);
360
- --color-surface-content: var(--surface-content);
361
- --color-surface-component: var(--surface-component);
362
- --color-surface-light-100: var(--surface-light-100);
363
- --color-surface-light-200: var(--surface-light-200);
364
- --color-surface-shade-100: var(--surface-shade-100);
365
- --color-surface-shade-200: var(--surface-shade-200);
366
-
367
- /* Existing Colors */
265
+ --color-error: var(--error);
266
+
267
+ /* Expose semantic tokens */
368
268
  --color-background: var(--background);
369
269
  --color-foreground: var(--foreground);
370
- --color-card: var(--card);
371
- --color-card-foreground: var(--card-foreground);
372
- --color-popover: var(--popover);
373
- --color-popover-foreground: var(--popover-foreground);
374
270
  --color-primary: var(--primary);
375
271
  --color-primary-foreground: var(--primary-foreground);
376
272
  --color-secondary: var(--secondary);
@@ -384,11 +280,18 @@
384
280
  --color-border: var(--border);
385
281
  --color-input: var(--input);
386
282
  --color-ring: var(--ring);
283
+
284
+ --color-card: var(--card);
285
+ --color-card-foreground: var(--card-foreground);
286
+ --color-popover: var(--popover);
287
+ --color-popover-foreground: var(--popover-foreground);
288
+
387
289
  --color-chart-1: var(--chart-1);
388
290
  --color-chart-2: var(--chart-2);
389
291
  --color-chart-3: var(--chart-3);
390
292
  --color-chart-4: var(--chart-4);
391
293
  --color-chart-5: var(--chart-5);
294
+
392
295
  --color-header: var(--header);
393
296
  --color-header-foreground: var(--header-foreground);
394
297
  --color-header-primary: var(--header-primary);
@@ -397,6 +300,7 @@
397
300
  --color-header-accent-foreground: var(--header-accent-foreground);
398
301
  --color-header-border: var(--header-border);
399
302
  --color-header-ring: var(--header-ring);
303
+
400
304
  --color-sidebar: var(--sidebar);
401
305
  --color-sidebar-foreground: var(--sidebar-foreground);
402
306
  --color-sidebar-primary: var(--sidebar-primary);