@tenerife.music/ui 1.0.13 → 1.0.16
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.
- package/README.md +113 -419
- package/dist/{colors-CVA7_16U.d.cts → colors-BrFmCQv-.d.cts} +6 -1
- package/dist/{colors-CVA7_16U.d.ts → colors-BrFmCQv-.d.ts} +6 -1
- package/dist/{index-BgXvioll.d.cts → index-DPWxsWs3.d.cts} +861 -228
- package/dist/{index-Bv4wWj9I.d.ts → index-DPWxsWs3.d.ts} +861 -228
- package/dist/index.cjs +2196 -1132
- package/dist/index.d.cts +451 -127
- package/dist/index.d.ts +451 -127
- package/dist/index.mjs +2196 -1133
- package/dist/preset.cjs +29 -57
- package/dist/preset.mjs +29 -57
- package/dist/styles.css +3637 -57
- package/dist/theme/index.cjs +1305 -127
- package/dist/theme/index.d.cts +2 -2
- package/dist/theme/index.d.ts +2 -2
- package/dist/theme/index.mjs +1304 -126
- package/dist/tokens/index.cjs +628 -442
- package/dist/tokens/index.d.cts +89 -2
- package/dist/tokens/index.d.ts +89 -2
- package/dist/tokens/index.mjs +628 -443
- package/package.json +57 -53
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import './colors-CVA7_16U.js';
|
|
2
|
-
|
|
3
1
|
/**
|
|
4
2
|
* Responsive Typing Primitives
|
|
5
3
|
*
|
|
@@ -114,9 +112,23 @@ type AlertVariant = keyof typeof ALERT_TOKENS.variant;
|
|
|
114
112
|
* Button Component Tokens
|
|
115
113
|
*
|
|
116
114
|
* Component-level design tokens for Button component.
|
|
117
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to button-specific usage.
|
|
115
|
+
* Maps foundation tokens (spacing, typography, radius, shadows, motion) to button-specific usage.
|
|
118
116
|
*
|
|
119
117
|
* All values reference foundation tokens to ensure consistency across the design system.
|
|
118
|
+
*
|
|
119
|
+
* Authority Compliance:
|
|
120
|
+
* - Motion Authority: Uses MOTION_TOKENS.transitionPreset.colors
|
|
121
|
+
* - Radius Authority: References componentRadius.button.md
|
|
122
|
+
* - Typography Authority: References fontSize tokens
|
|
123
|
+
* - Spacing Authority: References semanticSpacing tokens
|
|
124
|
+
* - State Authority: Uses State Matrix CSS variables
|
|
125
|
+
* - Interaction Authority: Follows Interaction Authority Contract
|
|
126
|
+
*
|
|
127
|
+
* @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
|
|
128
|
+
* @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
|
|
129
|
+
* @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
|
|
130
|
+
* @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
|
|
131
|
+
* @see docs/architecture/SPACING_AUTHORITY_CONTRACT.md
|
|
120
132
|
*/
|
|
121
133
|
/**
|
|
122
134
|
* Button Component Tokens
|
|
@@ -148,20 +160,37 @@ declare const BUTTON_TOKENS: {
|
|
|
148
160
|
readonly vertical: {
|
|
149
161
|
readonly sm: "py-xs";
|
|
150
162
|
readonly md: "py-sm";
|
|
163
|
+
readonly lg: "py-md";
|
|
151
164
|
};
|
|
152
165
|
};
|
|
153
166
|
/**
|
|
154
|
-
* Gap between icon and text
|
|
167
|
+
* Gap between icon and text by size
|
|
168
|
+
* Scales with button size for visual consistency
|
|
155
169
|
*/
|
|
156
|
-
readonly gap:
|
|
170
|
+
readonly gap: {
|
|
171
|
+
readonly sm: "gap-xs";
|
|
172
|
+
readonly md: "gap-sm";
|
|
173
|
+
readonly lg: "gap-md";
|
|
174
|
+
};
|
|
157
175
|
/**
|
|
158
176
|
* Border radius for all button sizes
|
|
177
|
+
* Consistent radius across sizes for visual harmony
|
|
178
|
+
*
|
|
179
|
+
* @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
|
|
180
|
+
* @rule References componentRadius.button.md (6px / 0.375rem) from Radius Authority
|
|
181
|
+
* @see docs/architecture/RADIUS_AUTHORITY_CONTRACT.md
|
|
159
182
|
*/
|
|
160
183
|
readonly radius: "rounded-md";
|
|
161
184
|
/**
|
|
162
|
-
* Icon size within buttons
|
|
185
|
+
* Icon size within buttons by button size
|
|
186
|
+
* Scales proportionally with button size for visual balance
|
|
163
187
|
*/
|
|
164
|
-
readonly iconSize:
|
|
188
|
+
readonly iconSize: {
|
|
189
|
+
readonly sm: "size-3.5";
|
|
190
|
+
readonly md: "size-4";
|
|
191
|
+
readonly lg: "size-5";
|
|
192
|
+
readonly icon: "size-4";
|
|
193
|
+
};
|
|
165
194
|
/**
|
|
166
195
|
* Width tokens
|
|
167
196
|
*/
|
|
@@ -170,12 +199,16 @@ declare const BUTTON_TOKENS: {
|
|
|
170
199
|
};
|
|
171
200
|
/**
|
|
172
201
|
* Font sizes by button size
|
|
173
|
-
*
|
|
202
|
+
* References foundation typography fontSize tokens from Typography Authority
|
|
203
|
+
*
|
|
204
|
+
* @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
|
|
205
|
+
* @rule All fontSize values reference Typography Authority tokens
|
|
206
|
+
* @see docs/architecture/TYPOGRAPHY_AUTHORITY_CONTRACT.md
|
|
174
207
|
*/
|
|
175
208
|
readonly fontSize: {
|
|
176
209
|
readonly sm: "text-xs";
|
|
177
210
|
readonly md: "text-sm";
|
|
178
|
-
readonly lg: "text-
|
|
211
|
+
readonly lg: "text-base";
|
|
179
212
|
};
|
|
180
213
|
/**
|
|
181
214
|
* Shadow tokens by variant
|
|
@@ -188,48 +221,181 @@ declare const BUTTON_TOKENS: {
|
|
|
188
221
|
/**
|
|
189
222
|
* Color tokens for button variants
|
|
190
223
|
* Uses semantic color tokens that map to CSS variables
|
|
224
|
+
*
|
|
225
|
+
* State tokens (hover, active, disabled) use CSS variables from State Matrix.
|
|
226
|
+
* All states are injected via updateStateMatrixFromTokens() and consumed via arbitrary values.
|
|
227
|
+
* States react to Color Authority changes automatically through State Matrix.
|
|
228
|
+
*
|
|
229
|
+
* Interaction Authority Rules:
|
|
230
|
+
* - Hover (Priority 4): hover: prefix - ONLY when !disabled && !loading && pointer-events:auto
|
|
231
|
+
* - Active (Priority 3): active: prefix - ONLY when !disabled && !loading && mousedown
|
|
232
|
+
* - Focus (Priority 5): focus-visible: prefix - ONLY when !disabled && keyboard navigation
|
|
233
|
+
* - Disabled (Priority 1): disabled: prefix - Blocks ALL interactions
|
|
234
|
+
* - Loading (Priority 2): loading: prefix - Blocks hover/active (when implemented)
|
|
235
|
+
* - Base (Priority 6): No prefix - Default state, pointer-events: auto
|
|
236
|
+
*
|
|
237
|
+
* @enforcement TUNG_STATE_AUTHORITY_FOUNDATION_LOCK
|
|
238
|
+
* @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
|
|
239
|
+
* @rule States use CSS variables, not Tailwind variants
|
|
240
|
+
* @rule All state variables follow pattern: --{component}-{variant}-{state}-{property}
|
|
241
|
+
* @rule Visual states (colors) are SEPARATE from interaction states (pointer-events)
|
|
242
|
+
* @rule Hover MUST work with real mouse cursor, NOT just DevTools force state
|
|
243
|
+
* @rule Active MUST activate only on mousedown, NOT on hover
|
|
244
|
+
* @rule Focus MUST activate only on keyboard navigation, NOT on mouse click
|
|
245
|
+
*
|
|
246
|
+
* @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
|
|
191
247
|
*/
|
|
192
248
|
readonly variant: {
|
|
193
249
|
readonly primary: {
|
|
194
|
-
readonly background: "bg-primary";
|
|
250
|
+
readonly background: "bg-[hsl(var(--button-primary-base-bg))]";
|
|
195
251
|
readonly text: "text-primary-foreground";
|
|
196
|
-
readonly hover: "hover:bg-primary
|
|
252
|
+
readonly hover: "hover:bg-[hsl(var(--button-primary-hover-bg))]";
|
|
253
|
+
readonly active: "active:bg-[hsl(var(--button-primary-active-bg))]";
|
|
254
|
+
readonly focus: "focus-visible:bg-[hsl(var(--button-primary-focus-bg))]";
|
|
255
|
+
readonly disabled: {
|
|
256
|
+
readonly background: "disabled:bg-[hsl(var(--button-primary-disabled-bg))]";
|
|
257
|
+
readonly text: "disabled:text-[hsl(var(--button-primary-disabled-text))]";
|
|
258
|
+
};
|
|
259
|
+
readonly loading: "bg-[hsl(var(--button-primary-loading-bg))]";
|
|
197
260
|
};
|
|
198
261
|
readonly secondary: {
|
|
199
262
|
readonly background: "bg-secondary";
|
|
200
263
|
readonly text: "text-secondary-foreground";
|
|
201
|
-
readonly hover: "hover:bg-secondary
|
|
264
|
+
readonly hover: "hover:bg-[hsl(var(--button-secondary-hover-bg))]";
|
|
265
|
+
readonly active: "active:bg-[hsl(var(--button-secondary-active-bg))]";
|
|
266
|
+
readonly disabled: {
|
|
267
|
+
readonly background: "disabled:bg-[hsl(var(--button-secondary-disabled-bg))]";
|
|
268
|
+
readonly text: "disabled:text-[hsl(var(--button-secondary-disabled-text))]";
|
|
269
|
+
};
|
|
202
270
|
};
|
|
203
271
|
readonly accent: {
|
|
204
272
|
readonly background: "bg-accent";
|
|
205
273
|
readonly text: "text-accent-foreground";
|
|
206
|
-
readonly hover: "hover:bg-accent
|
|
274
|
+
readonly hover: "hover:bg-[hsl(var(--button-accent-hover-bg))]";
|
|
275
|
+
readonly active: "active:bg-[hsl(var(--button-accent-active-bg))]";
|
|
276
|
+
readonly disabled: {
|
|
277
|
+
readonly background: "disabled:bg-[hsl(var(--button-accent-disabled-bg))]";
|
|
278
|
+
readonly text: "disabled:text-[hsl(var(--button-accent-disabled-text))]";
|
|
279
|
+
};
|
|
207
280
|
};
|
|
208
281
|
readonly outline: {
|
|
209
282
|
readonly border: "border border-input";
|
|
210
283
|
readonly background: "bg-background";
|
|
284
|
+
readonly text: "text-foreground";
|
|
211
285
|
readonly hover: {
|
|
212
|
-
readonly background: "hover:bg-
|
|
213
|
-
readonly text: "hover:text-
|
|
286
|
+
readonly background: "hover:bg-[hsl(var(--button-outline-hover-bg))]";
|
|
287
|
+
readonly text: "hover:text-[hsl(var(--button-outline-hover-text))]";
|
|
288
|
+
readonly border: "hover:border-[hsl(var(--button-outline-hover-border))]";
|
|
289
|
+
};
|
|
290
|
+
readonly active: {
|
|
291
|
+
readonly background: "active:bg-[hsl(var(--button-outline-active-bg))]";
|
|
292
|
+
readonly text: "active:text-[hsl(var(--button-outline-active-text))]";
|
|
293
|
+
readonly border: "active:border-[hsl(var(--button-outline-active-border))]";
|
|
294
|
+
};
|
|
295
|
+
readonly disabled: {
|
|
296
|
+
readonly background: "disabled:bg-[hsl(var(--button-outline-disabled-bg))]";
|
|
297
|
+
readonly text: "disabled:text-[hsl(var(--button-outline-disabled-text))]";
|
|
298
|
+
readonly border: "disabled:border-[hsl(var(--button-outline-disabled-border))]";
|
|
214
299
|
};
|
|
215
300
|
};
|
|
216
301
|
readonly ghost: {
|
|
302
|
+
readonly background: "bg-transparent";
|
|
303
|
+
readonly text: "text-foreground";
|
|
217
304
|
readonly hover: {
|
|
218
|
-
readonly background: "hover:bg-
|
|
219
|
-
readonly text: "hover:text-
|
|
305
|
+
readonly background: "hover:bg-[hsl(var(--button-ghost-hover-bg))]";
|
|
306
|
+
readonly text: "hover:text-[hsl(var(--button-ghost-hover-text))]";
|
|
307
|
+
};
|
|
308
|
+
readonly active: {
|
|
309
|
+
readonly background: "active:bg-[hsl(var(--button-ghost-active-bg))]";
|
|
310
|
+
readonly text: "active:text-[hsl(var(--button-ghost-active-text))]";
|
|
311
|
+
};
|
|
312
|
+
readonly disabled: {
|
|
313
|
+
readonly background: "disabled:bg-[hsl(var(--button-ghost-disabled-bg))]";
|
|
314
|
+
readonly text: "disabled:text-[hsl(var(--button-ghost-disabled-text))]";
|
|
220
315
|
};
|
|
221
316
|
};
|
|
222
317
|
readonly destructive: {
|
|
223
318
|
readonly background: "bg-destructive";
|
|
224
319
|
readonly text: "text-destructive-foreground";
|
|
225
|
-
readonly hover: "hover:bg-destructive
|
|
320
|
+
readonly hover: "hover:bg-[hsl(var(--button-destructive-hover-bg))]";
|
|
321
|
+
readonly active: "active:bg-[hsl(var(--button-destructive-active-bg))]";
|
|
322
|
+
readonly disabled: {
|
|
323
|
+
readonly background: "disabled:bg-[hsl(var(--button-destructive-disabled-bg))]";
|
|
324
|
+
readonly text: "disabled:text-[hsl(var(--button-destructive-disabled-text))]";
|
|
325
|
+
};
|
|
226
326
|
};
|
|
227
327
|
};
|
|
228
328
|
/**
|
|
229
329
|
* Transition tokens
|
|
330
|
+
* References Motion Authority tokens for consistent motion behavior
|
|
331
|
+
*
|
|
332
|
+
* @enforcement TUNG_TOKEN_AUTHORITY_EXPANSION_PLAN
|
|
333
|
+
* @rule Uses MOTION_TOKENS.transitionPreset.colors from Motion Authority
|
|
334
|
+
* @rule Motion transitions MUST use canonical motion tokens only
|
|
335
|
+
* @see docs/architecture/MOTION_AUTHORITY_CONTRACT.md
|
|
230
336
|
*/
|
|
231
337
|
readonly transition: {
|
|
232
|
-
readonly colors: "transition-colors";
|
|
338
|
+
readonly colors: "transition-colors duration-normal ease-out";
|
|
339
|
+
};
|
|
340
|
+
/**
|
|
341
|
+
* Global state tokens
|
|
342
|
+
* Shared state tokens that apply across all variants
|
|
343
|
+
* Variant-specific states are defined in variant.*.active and variant.*.disabled
|
|
344
|
+
*
|
|
345
|
+
* @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
|
|
346
|
+
* @rule All interaction states MUST follow Interaction Authority Contract
|
|
347
|
+
* @rule State priority: disabled > loading > active > hover > focus-visible > base
|
|
348
|
+
* @rule Visual states (colors) are SEPARATE from interaction states (pointer-events, cursor)
|
|
349
|
+
* @rule All states MUST be browser-native (CSS pseudo-classes), NOT JavaScript-managed
|
|
350
|
+
*/
|
|
351
|
+
readonly state: {
|
|
352
|
+
/**
|
|
353
|
+
* Disabled state tokens
|
|
354
|
+
* Global disabled state tokens (variant-specific overrides in variant.*.disabled)
|
|
355
|
+
*
|
|
356
|
+
* Interaction Authority Rules:
|
|
357
|
+
* - Priority: 1 (Highest) - Blocks ALL interactions
|
|
358
|
+
* - MUST block hover, active, and focus states
|
|
359
|
+
* - MUST use disabled: prefix (never in base state)
|
|
360
|
+
* - Base state MUST have pointer-events: auto (default) for hover to work
|
|
361
|
+
*
|
|
362
|
+
* @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
|
|
363
|
+
* @enforcement TUNG_BUTTON_INTERACTION_FIX
|
|
364
|
+
* @rule Interaction Authority: pointer-events is NOT a visual token
|
|
365
|
+
* @rule pointer-events-none MUST use disabled: prefix (never in base state)
|
|
366
|
+
* @rule Base state MUST have pointer-events: auto (default) for hover to work
|
|
367
|
+
* @rule These tokens are applied in base but only activate when element is disabled
|
|
368
|
+
* @rule Hover is FORBIDDEN when disabled={true}
|
|
369
|
+
* @rule Active is FORBIDDEN when disabled={true}
|
|
370
|
+
* @rule Focus is FORBIDDEN when disabled={true} (for interactions)
|
|
371
|
+
*
|
|
372
|
+
* @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
|
|
373
|
+
*/
|
|
374
|
+
readonly disabled: {
|
|
375
|
+
readonly cursor: "disabled:cursor-not-allowed";
|
|
376
|
+
readonly pointerEvents: "disabled:pointer-events-none";
|
|
377
|
+
};
|
|
378
|
+
/**
|
|
379
|
+
* Focus state tokens
|
|
380
|
+
* Focus ring for keyboard navigation
|
|
381
|
+
*
|
|
382
|
+
* Interaction Authority Rules:
|
|
383
|
+
* - Priority: 5 - Lower than active and hover
|
|
384
|
+
* - MUST activate only on keyboard navigation (focus-visible: prefix)
|
|
385
|
+
* - MUST NOT activate on mouse click (use :focus-visible, not :focus)
|
|
386
|
+
* - MUST be blocked by disabled state
|
|
387
|
+
*
|
|
388
|
+
* @enforcement TUNG_INTERACTION_AUTHORITY_FOUNDATION
|
|
389
|
+
* @rule Focus MUST use focus-visible: prefix (keyboard navigation only)
|
|
390
|
+
* @rule Focus MUST be blocked when disabled={true}
|
|
391
|
+
* @rule Focus MUST NOT activate on mouse click
|
|
392
|
+
*
|
|
393
|
+
* @see docs/architecture/INTERACTION_AUTHORITY_CONTRACT.md
|
|
394
|
+
*/
|
|
395
|
+
readonly focus: {
|
|
396
|
+
readonly ring: "focus-visible:ring-1 focus-visible:ring-ring";
|
|
397
|
+
readonly outline: "focus-visible:outline-none";
|
|
398
|
+
};
|
|
233
399
|
};
|
|
234
400
|
};
|
|
235
401
|
/**
|
|
@@ -487,7 +653,7 @@ declare const DOMAIN_TOKENS: {
|
|
|
487
653
|
};
|
|
488
654
|
/**
|
|
489
655
|
* Image tokens for card media
|
|
490
|
-
* Defines aspect ratio, radius, and
|
|
656
|
+
* Defines aspect ratio, radius, overlay styles, and placeholder gradients
|
|
491
657
|
*/
|
|
492
658
|
readonly image: {
|
|
493
659
|
/**
|
|
@@ -508,6 +674,35 @@ declare const DOMAIN_TOKENS: {
|
|
|
508
674
|
readonly overlay: {
|
|
509
675
|
readonly gradient: "bg-gradient-to-t from-black/60 via-transparent to-transparent";
|
|
510
676
|
};
|
|
677
|
+
/**
|
|
678
|
+
* Placeholder gradient tokens for image placeholders
|
|
679
|
+
* Used when no image URL is provided
|
|
680
|
+
*/
|
|
681
|
+
readonly placeholder: {
|
|
682
|
+
readonly gradient: "bg-gradient-to-br from-muted to-muted/50";
|
|
683
|
+
};
|
|
684
|
+
};
|
|
685
|
+
/**
|
|
686
|
+
* Text tokens for card text elements
|
|
687
|
+
* Defines hover states and line clamping for titles and descriptions
|
|
688
|
+
*/
|
|
689
|
+
readonly text: {
|
|
690
|
+
/**
|
|
691
|
+
* Hover state tokens for text elements
|
|
692
|
+
* Used for interactive text elements like titles
|
|
693
|
+
*/
|
|
694
|
+
readonly hover: {
|
|
695
|
+
readonly primary: "group-hover:text-primary";
|
|
696
|
+
};
|
|
697
|
+
/**
|
|
698
|
+
* Line clamp tokens for text truncation
|
|
699
|
+
* Used for limiting text to specific number of lines
|
|
700
|
+
*/
|
|
701
|
+
readonly lineClamp: {
|
|
702
|
+
readonly one: "line-clamp-1";
|
|
703
|
+
readonly two: "line-clamp-2";
|
|
704
|
+
readonly three: "line-clamp-3";
|
|
705
|
+
};
|
|
511
706
|
};
|
|
512
707
|
/**
|
|
513
708
|
* Metadata tokens for card information displays
|
|
@@ -699,6 +894,81 @@ declare const DOMAIN_TOKENS: {
|
|
|
699
894
|
readonly height: "h-6";
|
|
700
895
|
};
|
|
701
896
|
};
|
|
897
|
+
/**
|
|
898
|
+
* CTA (Call-to-Action) button tokens for domain card components
|
|
899
|
+
* Provides PromoCard-specific CTA button styling tokens
|
|
900
|
+
* These tokens are semantically owned by domain card components, not by the Button component
|
|
901
|
+
* References foundation tokens (spacing, typography, radius, shadows, motion) for consistency
|
|
902
|
+
*/
|
|
903
|
+
readonly cta: {
|
|
904
|
+
/**
|
|
905
|
+
* CTA button styling tokens
|
|
906
|
+
* Used by PromoCard and other domain card components for CTA button elements
|
|
907
|
+
*/
|
|
908
|
+
readonly button: {
|
|
909
|
+
/**
|
|
910
|
+
* Button heights by size
|
|
911
|
+
* Maps to Tailwind height utilities: h-8, h-9
|
|
912
|
+
*/
|
|
913
|
+
readonly height: {
|
|
914
|
+
readonly sm: "h-8";
|
|
915
|
+
readonly md: "h-9";
|
|
916
|
+
};
|
|
917
|
+
/**
|
|
918
|
+
* Button padding by size
|
|
919
|
+
* Horizontal and vertical padding values
|
|
920
|
+
* References semanticSpacing tokens
|
|
921
|
+
*/
|
|
922
|
+
readonly padding: {
|
|
923
|
+
readonly horizontal: {
|
|
924
|
+
readonly sm: "px-sm";
|
|
925
|
+
readonly md: "px-md";
|
|
926
|
+
};
|
|
927
|
+
readonly vertical: {
|
|
928
|
+
readonly sm: "py-xs";
|
|
929
|
+
};
|
|
930
|
+
};
|
|
931
|
+
/**
|
|
932
|
+
* Border radius for CTA buttons
|
|
933
|
+
* References borderRadius.md (6px / 0.375rem)
|
|
934
|
+
* Using Tailwind class "rounded-md" which maps to borderRadius.md
|
|
935
|
+
*/
|
|
936
|
+
readonly radius: "rounded-md";
|
|
937
|
+
/**
|
|
938
|
+
* Font sizes by button size
|
|
939
|
+
* Maps to foundation typography fontSize tokens
|
|
940
|
+
*/
|
|
941
|
+
readonly fontSize: {
|
|
942
|
+
readonly sm: "text-xs";
|
|
943
|
+
readonly md: "text-sm";
|
|
944
|
+
};
|
|
945
|
+
/**
|
|
946
|
+
* Shadow tokens for CTA buttons
|
|
947
|
+
* Maps to foundation elevation shadow tokens
|
|
948
|
+
*/
|
|
949
|
+
readonly shadow: {
|
|
950
|
+
readonly primary: "shadow";
|
|
951
|
+
};
|
|
952
|
+
/**
|
|
953
|
+
* Color tokens for CTA button variants
|
|
954
|
+
* Uses semantic color tokens that map to CSS variables
|
|
955
|
+
*/
|
|
956
|
+
readonly variant: {
|
|
957
|
+
readonly primary: {
|
|
958
|
+
readonly background: "bg-primary";
|
|
959
|
+
readonly text: "text-primary-foreground";
|
|
960
|
+
readonly hover: "hover:bg-primary/90";
|
|
961
|
+
};
|
|
962
|
+
};
|
|
963
|
+
/**
|
|
964
|
+
* Transition tokens for CTA buttons
|
|
965
|
+
* References MOTION_TOKENS for transitions
|
|
966
|
+
*/
|
|
967
|
+
readonly transition: {
|
|
968
|
+
readonly colors: "transition-colors";
|
|
969
|
+
};
|
|
970
|
+
};
|
|
971
|
+
};
|
|
702
972
|
};
|
|
703
973
|
/**
|
|
704
974
|
* Type exports for Domain Card tokens
|
|
@@ -797,31 +1067,6 @@ declare const INPUT_TOKENS: {
|
|
|
797
1067
|
readonly file: {
|
|
798
1068
|
readonly text: "text-[hsl(var(--foreground))]";
|
|
799
1069
|
};
|
|
800
|
-
/**
|
|
801
|
-
* Select listbox tokens
|
|
802
|
-
* Styling for select dropdown container
|
|
803
|
-
*/
|
|
804
|
-
readonly selectListbox: {
|
|
805
|
-
readonly border: "border border-[hsl(var(--border))]";
|
|
806
|
-
readonly background: "bg-[hsl(var(--popover))]";
|
|
807
|
-
readonly text: "text-[hsl(var(--popover-foreground))]";
|
|
808
|
-
readonly radius: "rounded-md";
|
|
809
|
-
readonly shadow: "shadow-md";
|
|
810
|
-
};
|
|
811
|
-
/**
|
|
812
|
-
* Select option tokens
|
|
813
|
-
* Styling for select option items
|
|
814
|
-
*/
|
|
815
|
-
readonly selectOption: {
|
|
816
|
-
readonly focus: {
|
|
817
|
-
readonly background: "focus:bg-[hsl(var(--accent))]";
|
|
818
|
-
readonly text: "focus:text-[hsl(var(--accent-foreground))]";
|
|
819
|
-
};
|
|
820
|
-
readonly selected: {
|
|
821
|
-
readonly background: "bg-[hsl(var(--accent))]";
|
|
822
|
-
readonly text: "text-[hsl(var(--accent-foreground))]";
|
|
823
|
-
};
|
|
824
|
-
};
|
|
825
1070
|
/**
|
|
826
1071
|
* Variant-based tokens
|
|
827
1072
|
* Border, background, and text colors for different variants
|
|
@@ -1639,6 +1884,10 @@ declare const TEXT_TOKENS: {
|
|
|
1639
1884
|
readonly md: "text-base";
|
|
1640
1885
|
readonly lg: "text-lg";
|
|
1641
1886
|
readonly xl: "text-xl";
|
|
1887
|
+
readonly "2xl": "text-2xl";
|
|
1888
|
+
readonly "3xl": "text-3xl";
|
|
1889
|
+
readonly "4xl": "text-4xl";
|
|
1890
|
+
readonly "5xl": "text-5xl";
|
|
1642
1891
|
};
|
|
1643
1892
|
/**
|
|
1644
1893
|
* Font weights by weight variant
|
|
@@ -1657,6 +1906,7 @@ declare const TEXT_TOKENS: {
|
|
|
1657
1906
|
readonly lineHeight: {
|
|
1658
1907
|
readonly none: "leading-none";
|
|
1659
1908
|
readonly tight: "leading-tight";
|
|
1909
|
+
readonly snug: "leading-snug";
|
|
1660
1910
|
readonly normal: "leading-normal";
|
|
1661
1911
|
readonly relaxed: "leading-relaxed";
|
|
1662
1912
|
readonly loose: "leading-loose";
|
|
@@ -2108,8 +2358,8 @@ declare const TOAST_TOKENS: {
|
|
|
2108
2358
|
readonly states: {
|
|
2109
2359
|
readonly default: "opacity-0";
|
|
2110
2360
|
readonly groupHover: "group-hover:opacity-100";
|
|
2111
|
-
readonly focus: "focus:opacity-100";
|
|
2112
|
-
readonly focusRing: "focus:outline-none focus:ring-1";
|
|
2361
|
+
readonly focus: "focus-visible:opacity-100";
|
|
2362
|
+
readonly focusRing: "focus-visible:outline-none focus-visible:ring-1";
|
|
2113
2363
|
};
|
|
2114
2364
|
};
|
|
2115
2365
|
};
|
|
@@ -2769,17 +3019,24 @@ declare const DROPDOWN_TOKENS: {
|
|
|
2769
3019
|
readonly lg: "min-w-64";
|
|
2770
3020
|
};
|
|
2771
3021
|
};
|
|
3022
|
+
/**
|
|
3023
|
+
* Width tokens
|
|
3024
|
+
* Common width utilities
|
|
3025
|
+
*/
|
|
3026
|
+
readonly width: {
|
|
3027
|
+
readonly full: "w-full";
|
|
3028
|
+
};
|
|
2772
3029
|
/**
|
|
2773
3030
|
* Item tokens by size
|
|
2774
3031
|
* Individual menu item
|
|
2775
3032
|
*/
|
|
2776
3033
|
readonly item: {
|
|
2777
3034
|
readonly background: {
|
|
2778
|
-
readonly focus: "focus:bg-[hsl(var(--accent))]";
|
|
3035
|
+
readonly focus: "focus-visible:bg-[hsl(var(--accent))]";
|
|
2779
3036
|
readonly selected: "bg-[hsl(var(--accent))]";
|
|
2780
3037
|
};
|
|
2781
3038
|
readonly text: {
|
|
2782
|
-
readonly focus: "focus:text-[hsl(var(--accent-foreground))]";
|
|
3039
|
+
readonly focus: "focus-visible:text-[hsl(var(--accent-foreground))]";
|
|
2783
3040
|
readonly selected: "text-[hsl(var(--accent-foreground))]";
|
|
2784
3041
|
};
|
|
2785
3042
|
readonly padding: {
|
|
@@ -2986,8 +3243,8 @@ declare const SELECT_TOKENS: {
|
|
|
2986
3243
|
readonly position: "left-sm";
|
|
2987
3244
|
};
|
|
2988
3245
|
readonly focus: {
|
|
2989
|
-
readonly background: "focus:bg-[hsl(var(--accent))]";
|
|
2990
|
-
readonly text: "focus:text-[hsl(var(--accent-foreground))]";
|
|
3246
|
+
readonly background: "focus-visible:bg-[hsl(var(--accent))]";
|
|
3247
|
+
readonly text: "focus-visible:text-[hsl(var(--accent-foreground))]";
|
|
2991
3248
|
};
|
|
2992
3249
|
readonly selected: {
|
|
2993
3250
|
readonly background: "bg-[hsl(var(--accent))]";
|
|
@@ -3727,92 +3984,25 @@ declare const MODAL_TOKENS: {
|
|
|
3727
3984
|
/**
|
|
3728
3985
|
* Data Component Tokens
|
|
3729
3986
|
*
|
|
3730
|
-
* Component-level design tokens for
|
|
3731
|
-
* Maps foundation tokens (spacing, typography, radius, shadows) to data component-specific usage.
|
|
3987
|
+
* Component-level design tokens for Skeleton component only.
|
|
3732
3988
|
*
|
|
3989
|
+
* Note: Other data components (Table, DataList, EmptyState, Pagination) have their own
|
|
3990
|
+
* isolated token domains:
|
|
3991
|
+
* - TABLE_TOKENS (src/tokens/components/table.ts)
|
|
3992
|
+
* - DATA_LIST_TOKENS (src/tokens/components/data-list.ts)
|
|
3993
|
+
* - EMPTY_STATE_TOKENS (src/tokens/components/empty-state.ts)
|
|
3994
|
+
* - PAGINATION_TOKENS (src/tokens/components/pagination.ts)
|
|
3995
|
+
*
|
|
3996
|
+
* Maps foundation tokens (spacing, typography, radius, shadows) to skeleton-specific usage.
|
|
3733
3997
|
* All values reference foundation tokens to ensure consistency across the design system.
|
|
3734
3998
|
*/
|
|
3735
3999
|
/**
|
|
3736
|
-
* Data Component Tokens
|
|
4000
|
+
* Data Component Tokens (Skeleton Only)
|
|
3737
4001
|
*
|
|
3738
|
-
* Defines all spacing, sizing, typography, and visual tokens for
|
|
4002
|
+
* Defines all spacing, sizing, typography, and visual tokens for Skeleton component.
|
|
3739
4003
|
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
3740
4004
|
*/
|
|
3741
4005
|
declare const DATA_TOKENS: {
|
|
3742
|
-
/**
|
|
3743
|
-
* Table Component Tokens
|
|
3744
|
-
*/
|
|
3745
|
-
readonly table: {
|
|
3746
|
-
/**
|
|
3747
|
-
* Table row heights by size
|
|
3748
|
-
* Maps to Tailwind height utilities
|
|
3749
|
-
*/
|
|
3750
|
-
readonly rowHeight: {
|
|
3751
|
-
readonly sm: "h-8";
|
|
3752
|
-
readonly md: "h-10";
|
|
3753
|
-
readonly lg: "h-12";
|
|
3754
|
-
};
|
|
3755
|
-
/**
|
|
3756
|
-
* Table cell and header padding by size
|
|
3757
|
-
* Maps to semantic spacing tokens
|
|
3758
|
-
*/
|
|
3759
|
-
readonly padding: {
|
|
3760
|
-
readonly cell: {
|
|
3761
|
-
readonly sm: "p-xs";
|
|
3762
|
-
readonly md: "p-sm";
|
|
3763
|
-
readonly lg: "p-md";
|
|
3764
|
-
};
|
|
3765
|
-
readonly header: {
|
|
3766
|
-
readonly sm: "px-xs py-sm";
|
|
3767
|
-
readonly md: "px-sm py-md";
|
|
3768
|
-
readonly lg: "px-md py-lg";
|
|
3769
|
-
};
|
|
3770
|
-
};
|
|
3771
|
-
/**
|
|
3772
|
-
* Gap between table cells (horizontal spacing)
|
|
3773
|
-
*/
|
|
3774
|
-
readonly gap: {
|
|
3775
|
-
readonly sm: "gap-xs";
|
|
3776
|
-
readonly md: "gap-sm";
|
|
3777
|
-
};
|
|
3778
|
-
/**
|
|
3779
|
-
* Border radius for table
|
|
3780
|
-
*/
|
|
3781
|
-
readonly radius: {
|
|
3782
|
-
readonly default: "rounded-md";
|
|
3783
|
-
};
|
|
3784
|
-
/**
|
|
3785
|
-
* Shadow tokens for table
|
|
3786
|
-
* Maps to foundation elevation shadow tokens
|
|
3787
|
-
*/
|
|
3788
|
-
readonly shadow: {
|
|
3789
|
-
readonly none: "shadow-none";
|
|
3790
|
-
readonly subtle: "shadow-sm";
|
|
3791
|
-
};
|
|
3792
|
-
/**
|
|
3793
|
-
* Typography tokens for table headers and cells
|
|
3794
|
-
* Maps to foundation typography fontSize tokens
|
|
3795
|
-
*/
|
|
3796
|
-
readonly typography: {
|
|
3797
|
-
readonly header: {
|
|
3798
|
-
readonly fontSize: "text-sm";
|
|
3799
|
-
readonly fontWeight: "font-semibold";
|
|
3800
|
-
};
|
|
3801
|
-
readonly cell: {
|
|
3802
|
-
readonly fontSize: "text-sm";
|
|
3803
|
-
readonly fontWeight: "font-normal";
|
|
3804
|
-
};
|
|
3805
|
-
};
|
|
3806
|
-
/**
|
|
3807
|
-
* Color tokens for table states
|
|
3808
|
-
* Uses semantic color tokens
|
|
3809
|
-
*/
|
|
3810
|
-
readonly colors: {
|
|
3811
|
-
readonly border: "border-border";
|
|
3812
|
-
readonly rowHover: "hover:bg-muted/50";
|
|
3813
|
-
readonly rowSelected: "bg-muted";
|
|
3814
|
-
};
|
|
3815
|
-
};
|
|
3816
4006
|
/**
|
|
3817
4007
|
* Skeleton Component Tokens
|
|
3818
4008
|
*/
|
|
@@ -3863,94 +4053,337 @@ declare const DATA_TOKENS: {
|
|
|
3863
4053
|
readonly inline: "inline-block";
|
|
3864
4054
|
};
|
|
3865
4055
|
};
|
|
4056
|
+
};
|
|
4057
|
+
/**
|
|
4058
|
+
* Type exports for Data tokens (Skeleton only)
|
|
4059
|
+
*/
|
|
4060
|
+
type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
|
|
4061
|
+
type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
|
|
4062
|
+
type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
|
|
4063
|
+
|
|
4064
|
+
/**
|
|
4065
|
+
* Table Component Tokens
|
|
4066
|
+
*
|
|
4067
|
+
* Component-level design tokens for Table component.
|
|
4068
|
+
* Maps foundation tokens (spacing, typography, radius, shadows) to table-specific usage.
|
|
4069
|
+
*
|
|
4070
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
4071
|
+
*
|
|
4072
|
+
* This is an isolated token domain - tokens are specific to Table component only.
|
|
4073
|
+
* No other components should import or use TABLE_TOKENS.
|
|
4074
|
+
*/
|
|
4075
|
+
/**
|
|
4076
|
+
* Table Component Tokens
|
|
4077
|
+
*
|
|
4078
|
+
* Defines all spacing, sizing, typography, and visual tokens for Table component.
|
|
4079
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
4080
|
+
*/
|
|
4081
|
+
declare const TABLE_TOKENS: {
|
|
3866
4082
|
/**
|
|
3867
|
-
*
|
|
4083
|
+
* Table row heights by size
|
|
4084
|
+
* Maps to Tailwind height utilities
|
|
3868
4085
|
*/
|
|
3869
|
-
readonly
|
|
3870
|
-
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
|
|
3874
|
-
|
|
3875
|
-
|
|
3876
|
-
|
|
4086
|
+
readonly rowHeight: {
|
|
4087
|
+
readonly sm: "h-8";
|
|
4088
|
+
readonly md: "h-10";
|
|
4089
|
+
readonly lg: "h-12";
|
|
4090
|
+
};
|
|
4091
|
+
/**
|
|
4092
|
+
* Table cell and header padding by size
|
|
4093
|
+
* Maps to semantic spacing tokens
|
|
4094
|
+
*/
|
|
4095
|
+
readonly padding: {
|
|
4096
|
+
readonly cell: {
|
|
4097
|
+
readonly sm: "p-xs";
|
|
4098
|
+
readonly md: "p-sm";
|
|
4099
|
+
readonly lg: "p-md";
|
|
4100
|
+
};
|
|
4101
|
+
readonly header: {
|
|
4102
|
+
readonly sm: "px-xs py-sm";
|
|
4103
|
+
readonly md: "px-sm py-md";
|
|
4104
|
+
readonly lg: "px-md py-lg";
|
|
3877
4105
|
};
|
|
4106
|
+
};
|
|
4107
|
+
/**
|
|
4108
|
+
* Gap between table cells (horizontal spacing)
|
|
4109
|
+
*/
|
|
4110
|
+
readonly gap: {
|
|
4111
|
+
readonly sm: "gap-xs";
|
|
4112
|
+
readonly md: "gap-sm";
|
|
4113
|
+
};
|
|
4114
|
+
/**
|
|
4115
|
+
* Border radius for table
|
|
4116
|
+
*/
|
|
4117
|
+
readonly radius: {
|
|
4118
|
+
readonly default: "rounded-md";
|
|
4119
|
+
};
|
|
4120
|
+
/**
|
|
4121
|
+
* Shadow tokens for table
|
|
4122
|
+
* Maps to foundation elevation shadow tokens
|
|
4123
|
+
*/
|
|
4124
|
+
readonly shadow: {
|
|
4125
|
+
readonly none: "shadow-none";
|
|
4126
|
+
readonly subtle: "shadow-sm";
|
|
4127
|
+
};
|
|
4128
|
+
/**
|
|
4129
|
+
* Typography tokens for table headers and cells
|
|
4130
|
+
* Maps to foundation typography fontSize tokens
|
|
4131
|
+
*/
|
|
4132
|
+
readonly typography: {
|
|
4133
|
+
readonly header: {
|
|
4134
|
+
readonly fontSize: "text-sm";
|
|
4135
|
+
readonly fontWeight: "font-semibold";
|
|
4136
|
+
};
|
|
4137
|
+
readonly cell: {
|
|
4138
|
+
readonly fontSize: "text-sm";
|
|
4139
|
+
readonly fontWeight: "font-normal";
|
|
4140
|
+
};
|
|
4141
|
+
};
|
|
4142
|
+
/**
|
|
4143
|
+
* Color tokens for table states
|
|
4144
|
+
* Uses semantic color tokens
|
|
4145
|
+
*/
|
|
4146
|
+
readonly colors: {
|
|
4147
|
+
readonly border: "border-border";
|
|
4148
|
+
readonly rowHover: "hover:bg-muted/50";
|
|
4149
|
+
readonly rowSelected: "bg-muted";
|
|
4150
|
+
};
|
|
4151
|
+
/**
|
|
4152
|
+
* Border tokens for table
|
|
4153
|
+
*/
|
|
4154
|
+
readonly border: {
|
|
4155
|
+
readonly bottom: "border-b";
|
|
4156
|
+
};
|
|
4157
|
+
/**
|
|
4158
|
+
* Layout tokens for table container and base styles
|
|
4159
|
+
*/
|
|
4160
|
+
readonly layout: {
|
|
4161
|
+
readonly overflow: "overflow-x-auto";
|
|
4162
|
+
readonly table: "w-full border-collapse";
|
|
4163
|
+
};
|
|
4164
|
+
/**
|
|
4165
|
+
* Sticky header tokens
|
|
4166
|
+
* For sticky header positioning and styling
|
|
4167
|
+
*/
|
|
4168
|
+
readonly sticky: {
|
|
4169
|
+
readonly header: "sticky top-0 z-10 bg-background";
|
|
4170
|
+
};
|
|
4171
|
+
/**
|
|
4172
|
+
* Expandable row tokens
|
|
4173
|
+
* For expandable content styling
|
|
4174
|
+
*/
|
|
4175
|
+
readonly expandable: {
|
|
4176
|
+
readonly padding: "p-md";
|
|
4177
|
+
readonly container: "p-0";
|
|
4178
|
+
readonly transition: "overflow-hidden transition-all duration-normal ease-in-out";
|
|
4179
|
+
readonly expanded: "max-h-[100vh] opacity-100";
|
|
4180
|
+
readonly collapsed: "max-h-0 opacity-0";
|
|
4181
|
+
readonly cursor: "cursor-pointer";
|
|
4182
|
+
readonly content: {
|
|
4183
|
+
readonly expanded: "block";
|
|
4184
|
+
readonly collapsed: "hidden";
|
|
4185
|
+
};
|
|
4186
|
+
};
|
|
4187
|
+
/**
|
|
4188
|
+
* Loading state tokens
|
|
4189
|
+
* For loading state cell styling
|
|
4190
|
+
*/
|
|
4191
|
+
readonly loading: {
|
|
4192
|
+
readonly cellPadding: "p-sm";
|
|
4193
|
+
readonly skeletonWidth: "w-full";
|
|
4194
|
+
};
|
|
4195
|
+
/**
|
|
4196
|
+
* Empty state tokens
|
|
4197
|
+
* For empty state cell styling
|
|
4198
|
+
*/
|
|
4199
|
+
readonly empty: {
|
|
4200
|
+
readonly padding: "p-8";
|
|
4201
|
+
};
|
|
4202
|
+
/**
|
|
4203
|
+
* Sortable header tokens
|
|
4204
|
+
* For sortable header styling and interactions
|
|
4205
|
+
*/
|
|
4206
|
+
readonly sortable: {
|
|
4207
|
+
readonly hover: "hover:bg-muted/50";
|
|
4208
|
+
readonly gap: "gap-2";
|
|
4209
|
+
readonly cursor: "cursor-pointer select-none";
|
|
4210
|
+
readonly container: "flex items-center";
|
|
4211
|
+
readonly icon: {
|
|
4212
|
+
readonly base: "inline-flex size-4 items-center text-muted-foreground transition-transform";
|
|
4213
|
+
readonly rotated: "rotate-180";
|
|
4214
|
+
readonly inactive: "opacity-30";
|
|
4215
|
+
};
|
|
4216
|
+
};
|
|
4217
|
+
};
|
|
4218
|
+
/**
|
|
4219
|
+
* Type exports for Table tokens
|
|
4220
|
+
*/
|
|
4221
|
+
type TableRowHeight = keyof typeof TABLE_TOKENS.rowHeight;
|
|
4222
|
+
type TableCellPadding = keyof typeof TABLE_TOKENS.padding.cell;
|
|
4223
|
+
type TableHeaderPadding = keyof typeof TABLE_TOKENS.padding.header;
|
|
4224
|
+
type TableGap = keyof typeof TABLE_TOKENS.gap;
|
|
4225
|
+
type TableShadow = keyof typeof TABLE_TOKENS.shadow;
|
|
4226
|
+
|
|
4227
|
+
/**
|
|
4228
|
+
* DataList Component Tokens
|
|
4229
|
+
*
|
|
4230
|
+
* Component-level design tokens for DataList component.
|
|
4231
|
+
* Maps foundation tokens (spacing, typography) to data-list-specific usage.
|
|
4232
|
+
*
|
|
4233
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
4234
|
+
*
|
|
4235
|
+
* This is an isolated token domain - tokens are specific to DataList component only.
|
|
4236
|
+
* No other components should import or use DATA_LIST_TOKENS.
|
|
4237
|
+
*/
|
|
4238
|
+
/**
|
|
4239
|
+
* DataList Component Tokens
|
|
4240
|
+
*
|
|
4241
|
+
* Defines all spacing, sizing, typography, and visual tokens for DataList component.
|
|
4242
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
4243
|
+
*/
|
|
4244
|
+
declare const DATA_LIST_TOKENS: {
|
|
4245
|
+
/**
|
|
4246
|
+
* Spacing tokens for DataList
|
|
4247
|
+
* Maps to semantic spacing tokens
|
|
4248
|
+
*/
|
|
4249
|
+
readonly spacing: {
|
|
4250
|
+
readonly gap: "gap-md";
|
|
4251
|
+
readonly padding: "p-md";
|
|
4252
|
+
};
|
|
4253
|
+
/**
|
|
4254
|
+
* Label width tokens (for desktop horizontal layout)
|
|
4255
|
+
* Maps to Tailwind width utilities
|
|
4256
|
+
*/
|
|
4257
|
+
readonly labelWidth: {
|
|
4258
|
+
readonly sm: "w-24";
|
|
4259
|
+
readonly md: "w-32";
|
|
4260
|
+
readonly lg: "w-40";
|
|
4261
|
+
};
|
|
4262
|
+
/**
|
|
4263
|
+
* Row padding tokens
|
|
4264
|
+
* Maps to semantic spacing tokens
|
|
4265
|
+
*/
|
|
4266
|
+
readonly rowPadding: {
|
|
4267
|
+
readonly sm: "py-xs";
|
|
4268
|
+
readonly md: "py-sm";
|
|
4269
|
+
readonly lg: "py-md";
|
|
4270
|
+
};
|
|
4271
|
+
/**
|
|
4272
|
+
* Item tokens
|
|
4273
|
+
* For individual DataList item styling
|
|
4274
|
+
*/
|
|
4275
|
+
readonly item: {
|
|
3878
4276
|
/**
|
|
3879
|
-
* Border
|
|
4277
|
+
* Border tokens for items
|
|
3880
4278
|
*/
|
|
3881
|
-
readonly
|
|
3882
|
-
readonly default: "rounded-xl";
|
|
3883
|
-
};
|
|
4279
|
+
readonly border: "border-b border-border last:border-0";
|
|
3884
4280
|
/**
|
|
3885
|
-
*
|
|
3886
|
-
* Maps to Tailwind size utilities
|
|
4281
|
+
* Responsive layout tokens
|
|
3887
4282
|
*/
|
|
3888
|
-
readonly
|
|
4283
|
+
readonly layout: {
|
|
4284
|
+
readonly mobile: "flex flex-col";
|
|
4285
|
+
readonly desktop: "md:flex-row md:items-center";
|
|
4286
|
+
};
|
|
4287
|
+
};
|
|
4288
|
+
/**
|
|
4289
|
+
* Label tokens
|
|
4290
|
+
* For DataList label styling
|
|
4291
|
+
*/
|
|
4292
|
+
readonly label: {
|
|
4293
|
+
readonly mobile: "mb-1 font-semibold text-foreground";
|
|
4294
|
+
readonly desktop: "md:mb-0";
|
|
4295
|
+
};
|
|
4296
|
+
/**
|
|
4297
|
+
* Value tokens
|
|
4298
|
+
* For DataList value styling
|
|
4299
|
+
*/
|
|
4300
|
+
readonly value: {
|
|
4301
|
+
readonly color: "text-muted-foreground";
|
|
4302
|
+
readonly flex: "flex-1";
|
|
4303
|
+
};
|
|
4304
|
+
};
|
|
4305
|
+
/**
|
|
4306
|
+
* Type exports for DataList tokens
|
|
4307
|
+
*/
|
|
4308
|
+
type DataListLabelWidth = keyof typeof DATA_LIST_TOKENS.labelWidth;
|
|
4309
|
+
type DataListRowPadding = keyof typeof DATA_LIST_TOKENS.rowPadding;
|
|
4310
|
+
|
|
4311
|
+
/**
|
|
4312
|
+
* EmptyState Component Tokens
|
|
4313
|
+
*
|
|
4314
|
+
* Component-level design tokens for EmptyState component.
|
|
4315
|
+
* Maps foundation tokens (spacing, typography, radius) to empty-state-specific usage.
|
|
4316
|
+
*
|
|
4317
|
+
* All values reference foundation tokens to ensure consistency across the design system.
|
|
4318
|
+
*
|
|
4319
|
+
* This is an isolated token domain - tokens are specific to EmptyState component only.
|
|
4320
|
+
* No other components should import or use EMPTY_STATE_TOKENS.
|
|
4321
|
+
*/
|
|
4322
|
+
/**
|
|
4323
|
+
* EmptyState Component Tokens
|
|
4324
|
+
*
|
|
4325
|
+
* Defines all spacing, sizing, typography, and visual tokens for EmptyState component.
|
|
4326
|
+
* Values are mapped to Tailwind utility classes for direct use in component variants.
|
|
4327
|
+
*/
|
|
4328
|
+
declare const EMPTY_STATE_TOKENS: {
|
|
4329
|
+
/**
|
|
4330
|
+
* Spacing tokens for EmptyState
|
|
4331
|
+
* Maps to semantic spacing tokens
|
|
4332
|
+
*/
|
|
4333
|
+
readonly spacing: {
|
|
4334
|
+
readonly gap: "gap-md";
|
|
4335
|
+
readonly padding: "p-lg";
|
|
4336
|
+
readonly action: "mt-2";
|
|
4337
|
+
};
|
|
4338
|
+
/**
|
|
4339
|
+
* Border radius for EmptyState container
|
|
4340
|
+
*/
|
|
4341
|
+
readonly radius: {
|
|
4342
|
+
readonly default: "rounded-xl";
|
|
4343
|
+
};
|
|
4344
|
+
/**
|
|
4345
|
+
* Icon sizes by variant
|
|
4346
|
+
* Maps to Tailwind size utilities
|
|
4347
|
+
*/
|
|
4348
|
+
readonly icon: {
|
|
4349
|
+
readonly size: {
|
|
3889
4350
|
readonly sm: "size-8";
|
|
3890
4351
|
readonly md: "size-12";
|
|
3891
4352
|
readonly lg: "size-16";
|
|
3892
4353
|
};
|
|
3893
|
-
|
|
3894
|
-
* Typography tokens for EmptyState
|
|
3895
|
-
* Maps to foundation typography tokens
|
|
3896
|
-
*/
|
|
3897
|
-
readonly typography: {
|
|
3898
|
-
readonly title: {
|
|
3899
|
-
readonly fontSize: "text-lg";
|
|
3900
|
-
readonly fontWeight: "font-semibold";
|
|
3901
|
-
};
|
|
3902
|
-
readonly description: {
|
|
3903
|
-
readonly fontSize: "text-sm";
|
|
3904
|
-
readonly fontWeight: "font-normal";
|
|
3905
|
-
};
|
|
3906
|
-
};
|
|
4354
|
+
readonly container: "flex items-center justify-center text-muted-foreground";
|
|
3907
4355
|
};
|
|
3908
4356
|
/**
|
|
3909
|
-
*
|
|
4357
|
+
* Typography tokens for EmptyState
|
|
4358
|
+
* Maps to foundation typography tokens
|
|
3910
4359
|
*/
|
|
3911
|
-
readonly
|
|
3912
|
-
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
readonly spacing: {
|
|
3917
|
-
readonly gap: "gap-md";
|
|
3918
|
-
readonly padding: "p-md";
|
|
3919
|
-
};
|
|
3920
|
-
/**
|
|
3921
|
-
* Label width tokens (for desktop horizontal layout)
|
|
3922
|
-
* Maps to Tailwind width utilities
|
|
3923
|
-
*/
|
|
3924
|
-
readonly labelWidth: {
|
|
3925
|
-
readonly sm: "w-24";
|
|
3926
|
-
readonly md: "w-32";
|
|
3927
|
-
readonly lg: "w-40";
|
|
4360
|
+
readonly typography: {
|
|
4361
|
+
readonly title: {
|
|
4362
|
+
readonly fontSize: "text-lg";
|
|
4363
|
+
readonly fontWeight: "font-semibold";
|
|
4364
|
+
readonly color: "text-foreground";
|
|
3928
4365
|
};
|
|
3929
|
-
|
|
3930
|
-
|
|
3931
|
-
|
|
3932
|
-
|
|
3933
|
-
|
|
3934
|
-
readonly sm: "py-xs";
|
|
3935
|
-
readonly md: "py-sm";
|
|
3936
|
-
readonly lg: "py-md";
|
|
4366
|
+
readonly description: {
|
|
4367
|
+
readonly fontSize: "text-sm";
|
|
4368
|
+
readonly fontWeight: "font-normal";
|
|
4369
|
+
readonly color: "text-muted-foreground";
|
|
4370
|
+
readonly maxWidth: "max-w-md";
|
|
3937
4371
|
};
|
|
3938
4372
|
};
|
|
4373
|
+
/**
|
|
4374
|
+
* Alignment tokens
|
|
4375
|
+
* For text alignment in EmptyState
|
|
4376
|
+
*/
|
|
4377
|
+
readonly alignment: {
|
|
4378
|
+
readonly center: "text-center";
|
|
4379
|
+
readonly left: "text-left";
|
|
4380
|
+
readonly right: "text-right";
|
|
4381
|
+
};
|
|
3939
4382
|
};
|
|
3940
4383
|
/**
|
|
3941
|
-
* Type exports for
|
|
4384
|
+
* Type exports for EmptyState tokens
|
|
3942
4385
|
*/
|
|
3943
|
-
type
|
|
3944
|
-
type TableCellPadding = keyof typeof DATA_TOKENS.table.padding.cell;
|
|
3945
|
-
type TableHeaderPadding = keyof typeof DATA_TOKENS.table.padding.header;
|
|
3946
|
-
type TableGap = keyof typeof DATA_TOKENS.table.gap;
|
|
3947
|
-
type TableShadow = keyof typeof DATA_TOKENS.table.shadow;
|
|
3948
|
-
type SkeletonVariant = keyof typeof DATA_TOKENS.skeleton.height;
|
|
3949
|
-
type SkeletonAnimation = keyof typeof DATA_TOKENS.skeleton.animation;
|
|
3950
|
-
type SkeletonBackground = keyof typeof DATA_TOKENS.skeleton.background;
|
|
3951
|
-
type EmptyStateIconSize = keyof typeof DATA_TOKENS.emptyState.iconSize;
|
|
3952
|
-
type DataListLabelWidth = keyof typeof DATA_TOKENS.dataList.labelWidth;
|
|
3953
|
-
type DataListRowPadding = keyof typeof DATA_TOKENS.dataList.rowPadding;
|
|
4386
|
+
type EmptyStateIconSize = keyof typeof EMPTY_STATE_TOKENS.icon.size;
|
|
3954
4387
|
|
|
3955
4388
|
/**
|
|
3956
4389
|
* Icon Component Tokens
|
|
@@ -4783,118 +5216,118 @@ declare const transitions: {
|
|
|
4783
5216
|
declare const keyframes: {
|
|
4784
5217
|
readonly fadeIn: {
|
|
4785
5218
|
readonly from: {
|
|
4786
|
-
readonly opacity: 0;
|
|
5219
|
+
readonly opacity: "0";
|
|
4787
5220
|
};
|
|
4788
5221
|
readonly to: {
|
|
4789
|
-
readonly opacity: 1;
|
|
5222
|
+
readonly opacity: "1";
|
|
4790
5223
|
};
|
|
4791
5224
|
};
|
|
4792
5225
|
readonly fadeOut: {
|
|
4793
5226
|
readonly from: {
|
|
4794
|
-
readonly opacity: 1;
|
|
5227
|
+
readonly opacity: "1";
|
|
4795
5228
|
};
|
|
4796
5229
|
readonly to: {
|
|
4797
|
-
readonly opacity: 0;
|
|
5230
|
+
readonly opacity: "0";
|
|
4798
5231
|
};
|
|
4799
5232
|
};
|
|
4800
5233
|
readonly slideInUp: {
|
|
4801
5234
|
readonly from: {
|
|
4802
5235
|
readonly transform: "translateY(100%)";
|
|
4803
|
-
readonly opacity: 0;
|
|
5236
|
+
readonly opacity: "0";
|
|
4804
5237
|
};
|
|
4805
5238
|
readonly to: {
|
|
4806
5239
|
readonly transform: "translateY(0)";
|
|
4807
|
-
readonly opacity: 1;
|
|
5240
|
+
readonly opacity: "1";
|
|
4808
5241
|
};
|
|
4809
5242
|
};
|
|
4810
5243
|
readonly slideInDown: {
|
|
4811
5244
|
readonly from: {
|
|
4812
5245
|
readonly transform: "translateY(-100%)";
|
|
4813
|
-
readonly opacity: 0;
|
|
5246
|
+
readonly opacity: "0";
|
|
4814
5247
|
};
|
|
4815
5248
|
readonly to: {
|
|
4816
5249
|
readonly transform: "translateY(0)";
|
|
4817
|
-
readonly opacity: 1;
|
|
5250
|
+
readonly opacity: "1";
|
|
4818
5251
|
};
|
|
4819
5252
|
};
|
|
4820
5253
|
readonly slideInLeft: {
|
|
4821
5254
|
readonly from: {
|
|
4822
5255
|
readonly transform: "translateX(-100%)";
|
|
4823
|
-
readonly opacity: 0;
|
|
5256
|
+
readonly opacity: "0";
|
|
4824
5257
|
};
|
|
4825
5258
|
readonly to: {
|
|
4826
5259
|
readonly transform: "translateX(0)";
|
|
4827
|
-
readonly opacity: 1;
|
|
5260
|
+
readonly opacity: "1";
|
|
4828
5261
|
};
|
|
4829
5262
|
};
|
|
4830
5263
|
readonly slideInRight: {
|
|
4831
5264
|
readonly from: {
|
|
4832
5265
|
readonly transform: "translateX(100%)";
|
|
4833
|
-
readonly opacity: 0;
|
|
5266
|
+
readonly opacity: "0";
|
|
4834
5267
|
};
|
|
4835
5268
|
readonly to: {
|
|
4836
5269
|
readonly transform: "translateX(0)";
|
|
4837
|
-
readonly opacity: 1;
|
|
5270
|
+
readonly opacity: "1";
|
|
4838
5271
|
};
|
|
4839
5272
|
};
|
|
4840
5273
|
readonly slideOutUp: {
|
|
4841
5274
|
readonly from: {
|
|
4842
5275
|
readonly transform: "translateY(0)";
|
|
4843
|
-
readonly opacity: 1;
|
|
5276
|
+
readonly opacity: "1";
|
|
4844
5277
|
};
|
|
4845
5278
|
readonly to: {
|
|
4846
5279
|
readonly transform: "translateY(-100%)";
|
|
4847
|
-
readonly opacity: 0;
|
|
5280
|
+
readonly opacity: "0";
|
|
4848
5281
|
};
|
|
4849
5282
|
};
|
|
4850
5283
|
readonly slideOutDown: {
|
|
4851
5284
|
readonly from: {
|
|
4852
5285
|
readonly transform: "translateY(0)";
|
|
4853
|
-
readonly opacity: 1;
|
|
5286
|
+
readonly opacity: "1";
|
|
4854
5287
|
};
|
|
4855
5288
|
readonly to: {
|
|
4856
5289
|
readonly transform: "translateY(100%)";
|
|
4857
|
-
readonly opacity: 0;
|
|
5290
|
+
readonly opacity: "0";
|
|
4858
5291
|
};
|
|
4859
5292
|
};
|
|
4860
5293
|
readonly slideOutLeft: {
|
|
4861
5294
|
readonly from: {
|
|
4862
5295
|
readonly transform: "translateX(0)";
|
|
4863
|
-
readonly opacity: 1;
|
|
5296
|
+
readonly opacity: "1";
|
|
4864
5297
|
};
|
|
4865
5298
|
readonly to: {
|
|
4866
5299
|
readonly transform: "translateX(-100%)";
|
|
4867
|
-
readonly opacity: 0;
|
|
5300
|
+
readonly opacity: "0";
|
|
4868
5301
|
};
|
|
4869
5302
|
};
|
|
4870
5303
|
readonly slideOutRight: {
|
|
4871
5304
|
readonly from: {
|
|
4872
5305
|
readonly transform: "translateX(0)";
|
|
4873
|
-
readonly opacity: 1;
|
|
5306
|
+
readonly opacity: "1";
|
|
4874
5307
|
};
|
|
4875
5308
|
readonly to: {
|
|
4876
5309
|
readonly transform: "translateX(100%)";
|
|
4877
|
-
readonly opacity: 0;
|
|
5310
|
+
readonly opacity: "0";
|
|
4878
5311
|
};
|
|
4879
5312
|
};
|
|
4880
5313
|
readonly scaleIn: {
|
|
4881
5314
|
readonly from: {
|
|
4882
5315
|
readonly transform: "scale(0.95)";
|
|
4883
|
-
readonly opacity: 0;
|
|
5316
|
+
readonly opacity: "0";
|
|
4884
5317
|
};
|
|
4885
5318
|
readonly to: {
|
|
4886
5319
|
readonly transform: "scale(1)";
|
|
4887
|
-
readonly opacity: 1;
|
|
5320
|
+
readonly opacity: "1";
|
|
4888
5321
|
};
|
|
4889
5322
|
};
|
|
4890
5323
|
readonly scaleOut: {
|
|
4891
5324
|
readonly from: {
|
|
4892
5325
|
readonly transform: "scale(1)";
|
|
4893
|
-
readonly opacity: 1;
|
|
5326
|
+
readonly opacity: "1";
|
|
4894
5327
|
};
|
|
4895
5328
|
readonly to: {
|
|
4896
5329
|
readonly transform: "scale(0.95)";
|
|
4897
|
-
readonly opacity: 0;
|
|
5330
|
+
readonly opacity: "0";
|
|
4898
5331
|
};
|
|
4899
5332
|
};
|
|
4900
5333
|
readonly scaleUp: {
|
|
@@ -4931,10 +5364,10 @@ declare const keyframes: {
|
|
|
4931
5364
|
};
|
|
4932
5365
|
readonly pulse: {
|
|
4933
5366
|
readonly "0%, 100%": {
|
|
4934
|
-
readonly opacity: 1;
|
|
5367
|
+
readonly opacity: "1";
|
|
4935
5368
|
};
|
|
4936
5369
|
readonly "50%": {
|
|
4937
|
-
readonly opacity: 0.5;
|
|
5370
|
+
readonly opacity: "0.5";
|
|
4938
5371
|
};
|
|
4939
5372
|
};
|
|
4940
5373
|
readonly bounce: {
|
|
@@ -4961,7 +5394,7 @@ declare const keyframes: {
|
|
|
4961
5394
|
readonly ping: {
|
|
4962
5395
|
readonly "75%, 100%": {
|
|
4963
5396
|
readonly transform: "scale(2)";
|
|
4964
|
-
readonly opacity: 0;
|
|
5397
|
+
readonly opacity: "0";
|
|
4965
5398
|
};
|
|
4966
5399
|
};
|
|
4967
5400
|
readonly "accordion-down": {
|
|
@@ -5156,7 +5589,207 @@ declare const tailwindMotionConfig: {
|
|
|
5156
5589
|
readonly all: "all";
|
|
5157
5590
|
readonly none: "none";
|
|
5158
5591
|
};
|
|
5159
|
-
readonly keyframes:
|
|
5592
|
+
readonly keyframes: {
|
|
5593
|
+
readonly fadeIn: {
|
|
5594
|
+
readonly from: {
|
|
5595
|
+
readonly opacity: "0";
|
|
5596
|
+
};
|
|
5597
|
+
readonly to: {
|
|
5598
|
+
readonly opacity: "1";
|
|
5599
|
+
};
|
|
5600
|
+
};
|
|
5601
|
+
readonly fadeOut: {
|
|
5602
|
+
readonly from: {
|
|
5603
|
+
readonly opacity: "1";
|
|
5604
|
+
};
|
|
5605
|
+
readonly to: {
|
|
5606
|
+
readonly opacity: "0";
|
|
5607
|
+
};
|
|
5608
|
+
};
|
|
5609
|
+
readonly slideInUp: {
|
|
5610
|
+
readonly from: {
|
|
5611
|
+
readonly transform: "translateY(100%)";
|
|
5612
|
+
readonly opacity: "0";
|
|
5613
|
+
};
|
|
5614
|
+
readonly to: {
|
|
5615
|
+
readonly transform: "translateY(0)";
|
|
5616
|
+
readonly opacity: "1";
|
|
5617
|
+
};
|
|
5618
|
+
};
|
|
5619
|
+
readonly slideInDown: {
|
|
5620
|
+
readonly from: {
|
|
5621
|
+
readonly transform: "translateY(-100%)";
|
|
5622
|
+
readonly opacity: "0";
|
|
5623
|
+
};
|
|
5624
|
+
readonly to: {
|
|
5625
|
+
readonly transform: "translateY(0)";
|
|
5626
|
+
readonly opacity: "1";
|
|
5627
|
+
};
|
|
5628
|
+
};
|
|
5629
|
+
readonly slideInLeft: {
|
|
5630
|
+
readonly from: {
|
|
5631
|
+
readonly transform: "translateX(-100%)";
|
|
5632
|
+
readonly opacity: "0";
|
|
5633
|
+
};
|
|
5634
|
+
readonly to: {
|
|
5635
|
+
readonly transform: "translateX(0)";
|
|
5636
|
+
readonly opacity: "1";
|
|
5637
|
+
};
|
|
5638
|
+
};
|
|
5639
|
+
readonly slideInRight: {
|
|
5640
|
+
readonly from: {
|
|
5641
|
+
readonly transform: "translateX(100%)";
|
|
5642
|
+
readonly opacity: "0";
|
|
5643
|
+
};
|
|
5644
|
+
readonly to: {
|
|
5645
|
+
readonly transform: "translateX(0)";
|
|
5646
|
+
readonly opacity: "1";
|
|
5647
|
+
};
|
|
5648
|
+
};
|
|
5649
|
+
readonly slideOutUp: {
|
|
5650
|
+
readonly from: {
|
|
5651
|
+
readonly transform: "translateY(0)";
|
|
5652
|
+
readonly opacity: "1";
|
|
5653
|
+
};
|
|
5654
|
+
readonly to: {
|
|
5655
|
+
readonly transform: "translateY(-100%)";
|
|
5656
|
+
readonly opacity: "0";
|
|
5657
|
+
};
|
|
5658
|
+
};
|
|
5659
|
+
readonly slideOutDown: {
|
|
5660
|
+
readonly from: {
|
|
5661
|
+
readonly transform: "translateY(0)";
|
|
5662
|
+
readonly opacity: "1";
|
|
5663
|
+
};
|
|
5664
|
+
readonly to: {
|
|
5665
|
+
readonly transform: "translateY(100%)";
|
|
5666
|
+
readonly opacity: "0";
|
|
5667
|
+
};
|
|
5668
|
+
};
|
|
5669
|
+
readonly slideOutLeft: {
|
|
5670
|
+
readonly from: {
|
|
5671
|
+
readonly transform: "translateX(0)";
|
|
5672
|
+
readonly opacity: "1";
|
|
5673
|
+
};
|
|
5674
|
+
readonly to: {
|
|
5675
|
+
readonly transform: "translateX(-100%)";
|
|
5676
|
+
readonly opacity: "0";
|
|
5677
|
+
};
|
|
5678
|
+
};
|
|
5679
|
+
readonly slideOutRight: {
|
|
5680
|
+
readonly from: {
|
|
5681
|
+
readonly transform: "translateX(0)";
|
|
5682
|
+
readonly opacity: "1";
|
|
5683
|
+
};
|
|
5684
|
+
readonly to: {
|
|
5685
|
+
readonly transform: "translateX(100%)";
|
|
5686
|
+
readonly opacity: "0";
|
|
5687
|
+
};
|
|
5688
|
+
};
|
|
5689
|
+
readonly scaleIn: {
|
|
5690
|
+
readonly from: {
|
|
5691
|
+
readonly transform: "scale(0.95)";
|
|
5692
|
+
readonly opacity: "0";
|
|
5693
|
+
};
|
|
5694
|
+
readonly to: {
|
|
5695
|
+
readonly transform: "scale(1)";
|
|
5696
|
+
readonly opacity: "1";
|
|
5697
|
+
};
|
|
5698
|
+
};
|
|
5699
|
+
readonly scaleOut: {
|
|
5700
|
+
readonly from: {
|
|
5701
|
+
readonly transform: "scale(1)";
|
|
5702
|
+
readonly opacity: "1";
|
|
5703
|
+
};
|
|
5704
|
+
readonly to: {
|
|
5705
|
+
readonly transform: "scale(0.95)";
|
|
5706
|
+
readonly opacity: "0";
|
|
5707
|
+
};
|
|
5708
|
+
};
|
|
5709
|
+
readonly scaleUp: {
|
|
5710
|
+
readonly from: {
|
|
5711
|
+
readonly transform: "scale(1)";
|
|
5712
|
+
};
|
|
5713
|
+
readonly to: {
|
|
5714
|
+
readonly transform: "scale(1.05)";
|
|
5715
|
+
};
|
|
5716
|
+
};
|
|
5717
|
+
readonly scaleDown: {
|
|
5718
|
+
readonly from: {
|
|
5719
|
+
readonly transform: "scale(1.05)";
|
|
5720
|
+
};
|
|
5721
|
+
readonly to: {
|
|
5722
|
+
readonly transform: "scale(1)";
|
|
5723
|
+
};
|
|
5724
|
+
};
|
|
5725
|
+
readonly spin: {
|
|
5726
|
+
readonly from: {
|
|
5727
|
+
readonly transform: "rotate(0deg)";
|
|
5728
|
+
};
|
|
5729
|
+
readonly to: {
|
|
5730
|
+
readonly transform: "rotate(360deg)";
|
|
5731
|
+
};
|
|
5732
|
+
};
|
|
5733
|
+
readonly spinReverse: {
|
|
5734
|
+
readonly from: {
|
|
5735
|
+
readonly transform: "rotate(360deg)";
|
|
5736
|
+
};
|
|
5737
|
+
readonly to: {
|
|
5738
|
+
readonly transform: "rotate(0deg)";
|
|
5739
|
+
};
|
|
5740
|
+
};
|
|
5741
|
+
readonly pulse: {
|
|
5742
|
+
readonly "0%, 100%": {
|
|
5743
|
+
readonly opacity: "1";
|
|
5744
|
+
};
|
|
5745
|
+
readonly "50%": {
|
|
5746
|
+
readonly opacity: "0.5";
|
|
5747
|
+
};
|
|
5748
|
+
};
|
|
5749
|
+
readonly bounce: {
|
|
5750
|
+
readonly "0%, 100%": {
|
|
5751
|
+
readonly transform: "translateY(-25%)";
|
|
5752
|
+
readonly animationTimingFunction: "cubic-bezier(0.8, 0, 1, 1)";
|
|
5753
|
+
};
|
|
5754
|
+
readonly "50%": {
|
|
5755
|
+
readonly transform: "translateY(0)";
|
|
5756
|
+
readonly animationTimingFunction: "cubic-bezier(0, 0, 0.2, 1)";
|
|
5757
|
+
};
|
|
5758
|
+
};
|
|
5759
|
+
readonly shake: {
|
|
5760
|
+
readonly "0%, 100%": {
|
|
5761
|
+
readonly transform: "translateX(0)";
|
|
5762
|
+
};
|
|
5763
|
+
readonly "10%, 30%, 50%, 70%, 90%": {
|
|
5764
|
+
readonly transform: "translateX(-4px)";
|
|
5765
|
+
};
|
|
5766
|
+
readonly "20%, 40%, 60%, 80%": {
|
|
5767
|
+
readonly transform: "translateX(4px)";
|
|
5768
|
+
};
|
|
5769
|
+
};
|
|
5770
|
+
readonly ping: {
|
|
5771
|
+
readonly "75%, 100%": {
|
|
5772
|
+
readonly transform: "scale(2)";
|
|
5773
|
+
readonly opacity: "0";
|
|
5774
|
+
};
|
|
5775
|
+
};
|
|
5776
|
+
readonly "accordion-down": {
|
|
5777
|
+
readonly from: {
|
|
5778
|
+
readonly height: "0";
|
|
5779
|
+
};
|
|
5780
|
+
readonly to: {
|
|
5781
|
+
readonly height: "var(--radix-accordion-content-height)";
|
|
5782
|
+
};
|
|
5783
|
+
};
|
|
5784
|
+
readonly "accordion-up": {
|
|
5785
|
+
readonly from: {
|
|
5786
|
+
readonly height: "var(--radix-accordion-content-height)";
|
|
5787
|
+
};
|
|
5788
|
+
readonly to: {
|
|
5789
|
+
readonly height: "0";
|
|
5790
|
+
};
|
|
5791
|
+
};
|
|
5792
|
+
};
|
|
5160
5793
|
readonly animation: {
|
|
5161
5794
|
readonly none: "none";
|
|
5162
5795
|
readonly spin: "spin 1s linear infinite";
|
|
@@ -6504,8 +7137,8 @@ declare const CONTEXT_MENU_TOKENS: {
|
|
|
6504
7137
|
readonly item: {
|
|
6505
7138
|
readonly radius: "rounded-sm";
|
|
6506
7139
|
readonly focus: {
|
|
6507
|
-
readonly background: "focus:bg-[hsl(var(--accent))]";
|
|
6508
|
-
readonly text: "focus:text-[hsl(var(--accent-foreground))]";
|
|
7140
|
+
readonly background: "focus-visible:bg-[hsl(var(--accent))]";
|
|
7141
|
+
readonly text: "focus-visible:text-[hsl(var(--accent-foreground))]";
|
|
6509
7142
|
};
|
|
6510
7143
|
readonly disabled: {
|
|
6511
7144
|
readonly opacity: "opacity-50";
|
|
@@ -6842,4 +7475,4 @@ type ResponsiveContextMenuSize = Responsive<ContextMenuSizeToken>;
|
|
|
6842
7475
|
*/
|
|
6843
7476
|
type ResponsiveContextMenuWidth = Responsive<ContextMenuWidthToken>;
|
|
6844
7477
|
|
|
6845
|
-
export { type
|
|
7478
|
+
export { type IconColor as $, ALERT_TOKENS as A, BUTTON_TOKENS as B, CARD_TOKENS as C, DATA_TOKENS as D, type DataListRowPadding as E, type DomainCardBadge as F, type DomainCardImage as G, type DomainCardLayout as H, ICON_TOKENS as I, type DomainCardMetadata as J, type DomainCardMotion as K, type DomainCardPriceCapacity as L, MENU_TOKENS as M, NAVIGATION_TOKENS as N, OVERLAY_TOKENS as O, POPOVER_TOKENS as P, type DomainCardSkeleton as Q, RADIO_TOKENS as R, SECTION_TOKENS as S, TEXT_TOKENS as T, type DomainCardSkeletonContentWidth as U, type DomainCardSurface as V, type DropdownItemSize as W, type DropdownMenuSize as X, type DropdownTriggerSize as Y, type DropdownVariant as Z, type EmptyStateIconSize as _, CHECKBOX_TOKENS as a, type SkeletonBackground as a$, type IconSize as a0, type IconStroke as a1, type InputFontSize as a2, type InputHeight as a3, type InputPaddingHorizontal as a4, type InputPaddingVertical as a5, type InputRadius as a6, type InputSize as a7, type MenuContentMinWidth as a8, type MenuContentPadding as a9, type PopoverArrowSize as aA, type PopoverContentPadding as aB, type PopoverContentRadius as aC, type PopoverContentShadow as aD, type PopoverContentWidth as aE, type RadioSize as aF, type RadioState as aG, type RadioVariant as aH, type SectionGap as aI, type SectionPadding as aJ, type SelectContentPadding as aK, type SelectContentRadius as aL, type SelectItemFontSize as aM, type SelectItemPaddingHorizontal as aN, type SelectItemPaddingVertical as aO, type SelectItemRadius as aP, type SelectLabelFontSize as aQ, type SelectLabelPaddingHorizontal as aR, type SelectLabelPaddingVertical as aS, type SelectSeparatorMarginHorizontal as aT, type SelectSeparatorMarginVertical as aU, type SelectTriggerFontSize as aV, type SelectTriggerHeight as aW, type SelectTriggerPaddingHorizontal as aX, type SelectTriggerPaddingVertical as aY, type SelectTriggerRadius as aZ, type SkeletonAnimation as a_, type MenuContentRadius as aa, type MenuContentShadow as ab, type MenuIndicatorOffset as ac, type MenuIndicatorSize as ad, type MenuItemGap as ae, type MenuItemHeight as af, type MenuItemPadding as ag, type MenuItemRadius as ah, type MenuLabelPadding as ai, type MenuSeparatorMargin as aj, type MotionAnimation as ak, type MotionDuration as al, type MotionEasing as am, type MotionTransition as an, type MotionTransitionPreset as ao, type NavigationItemPadding as ap, type NavigationListGap as aq, type NavigationRadius as ar, type NavigationShadow as as, type NavigationSize as at, type NavigationState as au, type NotificationPanelWidth as av, type NotificationVariant as aw, type OverlayBackdropVariant as ax, type OverlayModalSize as ay, type PopoverArrowOffset as az, DOMAIN_TOKENS as b, accentColoredShadows as b$, type SkeletonVariant as b0, type SurfacePadding as b1, type SurfaceRadius as b2, type SurfaceShadow as b3, type SurfaceVariant as b4, type SwitchSize as b5, type SwitchState as b6, type SwitchVariant as b7, type TableCellPadding as b8, type TableGap as b9, springs as bA, tailwindMotionConfig as bB, transitions as bC, type MotionV2CombinedType as bD, type MotionV2Duration as bE, type MotionV2Easing as bF, type MotionV2SlideDirection as bG, type MotionV2Transition as bH, motionV2CSSVariables as bI, motionV2Combined as bJ, motionV2Durations as bK, motionV2Easings as bL, motionV2Fade as bM, motionV2Scale as bN, motionV2Slide as bO, motionV2TailwindConfig as bP, motionV2Transitions as bQ, type BorderRadius as bR, type ComponentRadius as bS, borderRadius as bT, componentRadius as bU, radiusCSSVariables as bV, tailwindRadiusConfig as bW, type ColoredShadow as bX, type ElevationShadow as bY, type FocusRing as bZ, type GlowEffect as b_, type TableHeaderPadding as ba, type TableRowHeight as bb, type TableShadow as bc, type TextFontSize as bd, type TextFontWeight as be, type TextLetterSpacing as bf, type TextLineHeight as bg, type ToastVariant as bh, type TooltipContentRadius as bi, type TooltipContentShadow as bj, allCSSVariables as bk, allCSSVariablesCSS as bl, generateCSSVariablesCSS as bm, tokenSystemSummary as bn, type Animation as bo, type Duration as bp, type Easing as bq, type Keyframe as br, type Spring as bs, type Transition as bt, animations as bu, durations as bv, easings as bw, keyframes as bx, motionCSSVariables as by, reducedMotion as bz, DROPDOWN_TOKENS as c, type ResponsiveColor as c$, componentShadowMapping as c0, elevationShadows as c1, focusRings as c2, glowEffects as c3, primaryColoredShadows as c4, shadowBase as c5, shadowCSSVariables as c6, shadowOpacity as c7, tailwindShadowConfig as c8, type ComponentSpacing as c9, fontWeight as cA, letterSpacing as cB, lineHeight as cC, tailwindTypographyConfig as cD, textStyles as cE, typographyCSSVariables as cF, type AlignOffsetToken as cG, type AnimationPresetToken as cH, type AspectRatioToken as cI, type ColorToken as cJ, type ContainerMaxWidthToken as cK, type ContainerPaddingToken as cL, type DelayToken as cM, type FlexBasisToken as cN, type LayoutSpaceToken as cO, type ModalFooterAlignToken as cP, type ModalHeightToken as cQ, type ModalSizeToken as cR, type ModalWidthToken as cS, type MotionDurationToken as cT, type MotionEasingToken as cU, type MotionToken as cV, type MotionTransitionToken as cW, type RadiusToken as cX, type ResponsiveAlignOffset as cY, type ResponsiveAnimationPreset as cZ, type ResponsiveAspectRatio as c_, type ContainerSpacing as ca, type GridSpacing as cb, type SectionSpacing as cc, type SemanticSpacing as cd, type Spacing as ce, type StackSpacing as cf, layoutSpacing as cg, semanticSpacing as ch, spacing as ci, spacingCSSVariables as cj, tailwindSpacingConfig as ck, UI_COLORS as cl, type CanonicalFontSize as cm, type CanonicalFontWeight as cn, type CanonicalLetterSpacing as co, type CanonicalLineHeight as cp, type CanonicalTextColor as cq, type FontFamily as cr, type FontSize as cs, type FontWeight as ct, type LetterSpacing as cu, type LineHeight as cv, type TextStyle as cw, fontFamily as cx, fontSize as cy, fontSizeWithMd as cz, INPUT_TOKENS as d, type ResponsiveContainerMaxWidth as d0, type ResponsiveContainerPadding as d1, type ResponsiveDelay as d2, type ResponsiveFlexBasis as d3, type ResponsiveModalHeight as d4, type ResponsiveModalSize as d5, type ResponsiveModalWidth as d6, type ResponsiveMotion as d7, type ResponsiveRadius as d8, type ResponsiveSelectSize as d9, type ResponsiveTabsSize as dA, type TabsVariantToken as dB, type TabsToneToken as dC, type Breakpoint as dD, type ResponsiveSelectWidth as da, type ResponsiveShadow as db, type ResponsiveSideOffset as dc, type ResponsiveSpace as dd, type ResponsiveSurface as de, type ResponsiveTextLineHeight as df, type ResponsiveTextSize as dg, type ResponsiveTextWeight as dh, type SelectSizeToken as di, type SelectStateToken as dj, type SelectVariantToken as dk, type SelectWidthToken as dl, type ShadowToken as dm, type SideOffsetToken as dn, type SpaceToken as dp, type SpacingToken as dq, type SurfaceToken as dr, type TextLetterSpacingToken as ds, type TextLineHeightToken as dt, type TextSizeToken as du, type TextWeightToken as dv, type Responsive as dw, type ResponsiveContextMenuSize as dx, type ResponsiveContextMenuWidth as dy, type ContextMenuItemToneToken as dz, MOTION_TOKENS as e, NOTIFICATION_TOKENS as f, SELECT_TOKENS as g, SURFACE_TOKENS as h, SWITCH_TOKENS as i, TOAST_TOKENS as j, TOOLTIP_TOKENS as k, type AlertVariant as l, type ButtonFontSize as m, type ButtonHeight as n, type ButtonPaddingHorizontal as o, type ButtonPaddingVertical as p, type ButtonShadow as q, type CardPadding as r, type CardRadius as s, type CardShadow as t, type CardSize as u, type CardSpacingVertical as v, type CheckboxSize as w, type CheckboxState as x, type CheckboxVariant as y, type DataListLabelWidth as z };
|