@tenerife.music/ui 1.0.15 → 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.
@@ -112,9 +112,23 @@ type AlertVariant = keyof typeof ALERT_TOKENS.variant;
112
112
  * Button Component Tokens
113
113
  *
114
114
  * Component-level design tokens for Button component.
115
- * Maps foundation tokens (spacing, typography, radius, shadows) to button-specific usage.
115
+ * Maps foundation tokens (spacing, typography, radius, shadows, motion) to button-specific usage.
116
116
  *
117
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
118
132
  */
119
133
  /**
120
134
  * Button Component Tokens
@@ -146,20 +160,37 @@ declare const BUTTON_TOKENS: {
146
160
  readonly vertical: {
147
161
  readonly sm: "py-xs";
148
162
  readonly md: "py-sm";
163
+ readonly lg: "py-md";
149
164
  };
150
165
  };
151
166
  /**
152
- * Gap between icon and text
167
+ * Gap between icon and text by size
168
+ * Scales with button size for visual consistency
153
169
  */
154
- readonly gap: "gap-sm";
170
+ readonly gap: {
171
+ readonly sm: "gap-xs";
172
+ readonly md: "gap-sm";
173
+ readonly lg: "gap-md";
174
+ };
155
175
  /**
156
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
157
182
  */
158
183
  readonly radius: "rounded-md";
159
184
  /**
160
- * Icon size within buttons
185
+ * Icon size within buttons by button size
186
+ * Scales proportionally with button size for visual balance
161
187
  */
162
- readonly iconSize: "size-4";
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
+ };
163
194
  /**
164
195
  * Width tokens
165
196
  */
@@ -168,12 +199,16 @@ declare const BUTTON_TOKENS: {
168
199
  };
169
200
  /**
170
201
  * Font sizes by button size
171
- * Maps to foundation typography fontSize tokens
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
172
207
  */
173
208
  readonly fontSize: {
174
209
  readonly sm: "text-xs";
175
210
  readonly md: "text-sm";
176
- readonly lg: "text-sm";
211
+ readonly lg: "text-base";
177
212
  };
178
213
  /**
179
214
  * Shadow tokens by variant
@@ -186,48 +221,181 @@ declare const BUTTON_TOKENS: {
186
221
  /**
187
222
  * Color tokens for button variants
188
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
189
247
  */
190
248
  readonly variant: {
191
249
  readonly primary: {
192
- readonly background: "bg-primary";
250
+ readonly background: "bg-[hsl(var(--button-primary-base-bg))]";
193
251
  readonly text: "text-primary-foreground";
194
- readonly hover: "hover:bg-primary/90";
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))]";
195
260
  };
196
261
  readonly secondary: {
197
262
  readonly background: "bg-secondary";
198
263
  readonly text: "text-secondary-foreground";
199
- readonly hover: "hover:bg-secondary/80";
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
+ };
200
270
  };
201
271
  readonly accent: {
202
272
  readonly background: "bg-accent";
203
273
  readonly text: "text-accent-foreground";
204
- readonly hover: "hover:bg-accent/90";
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
+ };
205
280
  };
206
281
  readonly outline: {
207
282
  readonly border: "border border-input";
208
283
  readonly background: "bg-background";
284
+ readonly text: "text-foreground";
209
285
  readonly hover: {
210
- readonly background: "hover:bg-accent";
211
- readonly text: "hover:text-accent-foreground";
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))]";
212
299
  };
213
300
  };
214
301
  readonly ghost: {
302
+ readonly background: "bg-transparent";
303
+ readonly text: "text-foreground";
215
304
  readonly hover: {
216
- readonly background: "hover:bg-accent";
217
- readonly text: "hover:text-accent-foreground";
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))]";
218
315
  };
219
316
  };
220
317
  readonly destructive: {
221
318
  readonly background: "bg-destructive";
222
319
  readonly text: "text-destructive-foreground";
223
- readonly hover: "hover:bg-destructive/90";
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
+ };
224
326
  };
225
327
  };
226
328
  /**
227
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
228
336
  */
229
337
  readonly transition: {
230
- 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
+ };
231
399
  };
232
400
  };
233
401
  /**
@@ -1716,6 +1884,10 @@ declare const TEXT_TOKENS: {
1716
1884
  readonly md: "text-base";
1717
1885
  readonly lg: "text-lg";
1718
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";
1719
1891
  };
1720
1892
  /**
1721
1893
  * Font weights by weight variant
@@ -1734,6 +1906,7 @@ declare const TEXT_TOKENS: {
1734
1906
  readonly lineHeight: {
1735
1907
  readonly none: "leading-none";
1736
1908
  readonly tight: "leading-tight";
1909
+ readonly snug: "leading-snug";
1737
1910
  readonly normal: "leading-normal";
1738
1911
  readonly relaxed: "leading-relaxed";
1739
1912
  readonly loose: "leading-loose";
@@ -2185,8 +2358,8 @@ declare const TOAST_TOKENS: {
2185
2358
  readonly states: {
2186
2359
  readonly default: "opacity-0";
2187
2360
  readonly groupHover: "group-hover:opacity-100";
2188
- readonly focus: "focus:opacity-100";
2189
- 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";
2190
2363
  };
2191
2364
  };
2192
2365
  };
@@ -2859,11 +3032,11 @@ declare const DROPDOWN_TOKENS: {
2859
3032
  */
2860
3033
  readonly item: {
2861
3034
  readonly background: {
2862
- readonly focus: "focus:bg-[hsl(var(--accent))]";
3035
+ readonly focus: "focus-visible:bg-[hsl(var(--accent))]";
2863
3036
  readonly selected: "bg-[hsl(var(--accent))]";
2864
3037
  };
2865
3038
  readonly text: {
2866
- readonly focus: "focus:text-[hsl(var(--accent-foreground))]";
3039
+ readonly focus: "focus-visible:text-[hsl(var(--accent-foreground))]";
2867
3040
  readonly selected: "text-[hsl(var(--accent-foreground))]";
2868
3041
  };
2869
3042
  readonly padding: {
@@ -3070,8 +3243,8 @@ declare const SELECT_TOKENS: {
3070
3243
  readonly position: "left-sm";
3071
3244
  };
3072
3245
  readonly focus: {
3073
- readonly background: "focus:bg-[hsl(var(--accent))]";
3074
- 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))]";
3075
3248
  };
3076
3249
  readonly selected: {
3077
3250
  readonly background: "bg-[hsl(var(--accent))]";
@@ -5043,118 +5216,118 @@ declare const transitions: {
5043
5216
  declare const keyframes: {
5044
5217
  readonly fadeIn: {
5045
5218
  readonly from: {
5046
- readonly opacity: 0;
5219
+ readonly opacity: "0";
5047
5220
  };
5048
5221
  readonly to: {
5049
- readonly opacity: 1;
5222
+ readonly opacity: "1";
5050
5223
  };
5051
5224
  };
5052
5225
  readonly fadeOut: {
5053
5226
  readonly from: {
5054
- readonly opacity: 1;
5227
+ readonly opacity: "1";
5055
5228
  };
5056
5229
  readonly to: {
5057
- readonly opacity: 0;
5230
+ readonly opacity: "0";
5058
5231
  };
5059
5232
  };
5060
5233
  readonly slideInUp: {
5061
5234
  readonly from: {
5062
5235
  readonly transform: "translateY(100%)";
5063
- readonly opacity: 0;
5236
+ readonly opacity: "0";
5064
5237
  };
5065
5238
  readonly to: {
5066
5239
  readonly transform: "translateY(0)";
5067
- readonly opacity: 1;
5240
+ readonly opacity: "1";
5068
5241
  };
5069
5242
  };
5070
5243
  readonly slideInDown: {
5071
5244
  readonly from: {
5072
5245
  readonly transform: "translateY(-100%)";
5073
- readonly opacity: 0;
5246
+ readonly opacity: "0";
5074
5247
  };
5075
5248
  readonly to: {
5076
5249
  readonly transform: "translateY(0)";
5077
- readonly opacity: 1;
5250
+ readonly opacity: "1";
5078
5251
  };
5079
5252
  };
5080
5253
  readonly slideInLeft: {
5081
5254
  readonly from: {
5082
5255
  readonly transform: "translateX(-100%)";
5083
- readonly opacity: 0;
5256
+ readonly opacity: "0";
5084
5257
  };
5085
5258
  readonly to: {
5086
5259
  readonly transform: "translateX(0)";
5087
- readonly opacity: 1;
5260
+ readonly opacity: "1";
5088
5261
  };
5089
5262
  };
5090
5263
  readonly slideInRight: {
5091
5264
  readonly from: {
5092
5265
  readonly transform: "translateX(100%)";
5093
- readonly opacity: 0;
5266
+ readonly opacity: "0";
5094
5267
  };
5095
5268
  readonly to: {
5096
5269
  readonly transform: "translateX(0)";
5097
- readonly opacity: 1;
5270
+ readonly opacity: "1";
5098
5271
  };
5099
5272
  };
5100
5273
  readonly slideOutUp: {
5101
5274
  readonly from: {
5102
5275
  readonly transform: "translateY(0)";
5103
- readonly opacity: 1;
5276
+ readonly opacity: "1";
5104
5277
  };
5105
5278
  readonly to: {
5106
5279
  readonly transform: "translateY(-100%)";
5107
- readonly opacity: 0;
5280
+ readonly opacity: "0";
5108
5281
  };
5109
5282
  };
5110
5283
  readonly slideOutDown: {
5111
5284
  readonly from: {
5112
5285
  readonly transform: "translateY(0)";
5113
- readonly opacity: 1;
5286
+ readonly opacity: "1";
5114
5287
  };
5115
5288
  readonly to: {
5116
5289
  readonly transform: "translateY(100%)";
5117
- readonly opacity: 0;
5290
+ readonly opacity: "0";
5118
5291
  };
5119
5292
  };
5120
5293
  readonly slideOutLeft: {
5121
5294
  readonly from: {
5122
5295
  readonly transform: "translateX(0)";
5123
- readonly opacity: 1;
5296
+ readonly opacity: "1";
5124
5297
  };
5125
5298
  readonly to: {
5126
5299
  readonly transform: "translateX(-100%)";
5127
- readonly opacity: 0;
5300
+ readonly opacity: "0";
5128
5301
  };
5129
5302
  };
5130
5303
  readonly slideOutRight: {
5131
5304
  readonly from: {
5132
5305
  readonly transform: "translateX(0)";
5133
- readonly opacity: 1;
5306
+ readonly opacity: "1";
5134
5307
  };
5135
5308
  readonly to: {
5136
5309
  readonly transform: "translateX(100%)";
5137
- readonly opacity: 0;
5310
+ readonly opacity: "0";
5138
5311
  };
5139
5312
  };
5140
5313
  readonly scaleIn: {
5141
5314
  readonly from: {
5142
5315
  readonly transform: "scale(0.95)";
5143
- readonly opacity: 0;
5316
+ readonly opacity: "0";
5144
5317
  };
5145
5318
  readonly to: {
5146
5319
  readonly transform: "scale(1)";
5147
- readonly opacity: 1;
5320
+ readonly opacity: "1";
5148
5321
  };
5149
5322
  };
5150
5323
  readonly scaleOut: {
5151
5324
  readonly from: {
5152
5325
  readonly transform: "scale(1)";
5153
- readonly opacity: 1;
5326
+ readonly opacity: "1";
5154
5327
  };
5155
5328
  readonly to: {
5156
5329
  readonly transform: "scale(0.95)";
5157
- readonly opacity: 0;
5330
+ readonly opacity: "0";
5158
5331
  };
5159
5332
  };
5160
5333
  readonly scaleUp: {
@@ -5191,10 +5364,10 @@ declare const keyframes: {
5191
5364
  };
5192
5365
  readonly pulse: {
5193
5366
  readonly "0%, 100%": {
5194
- readonly opacity: 1;
5367
+ readonly opacity: "1";
5195
5368
  };
5196
5369
  readonly "50%": {
5197
- readonly opacity: 0.5;
5370
+ readonly opacity: "0.5";
5198
5371
  };
5199
5372
  };
5200
5373
  readonly bounce: {
@@ -5221,7 +5394,7 @@ declare const keyframes: {
5221
5394
  readonly ping: {
5222
5395
  readonly "75%, 100%": {
5223
5396
  readonly transform: "scale(2)";
5224
- readonly opacity: 0;
5397
+ readonly opacity: "0";
5225
5398
  };
5226
5399
  };
5227
5400
  readonly "accordion-down": {
@@ -5416,7 +5589,207 @@ declare const tailwindMotionConfig: {
5416
5589
  readonly all: "all";
5417
5590
  readonly none: "none";
5418
5591
  };
5419
- readonly keyframes: Record<string, Record<string, Record<string, string | number>>>;
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
+ };
5420
5793
  readonly animation: {
5421
5794
  readonly none: "none";
5422
5795
  readonly spin: "spin 1s linear infinite";
@@ -6764,8 +7137,8 @@ declare const CONTEXT_MENU_TOKENS: {
6764
7137
  readonly item: {
6765
7138
  readonly radius: "rounded-sm";
6766
7139
  readonly focus: {
6767
- readonly background: "focus:bg-[hsl(var(--accent))]";
6768
- 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))]";
6769
7142
  };
6770
7143
  readonly disabled: {
6771
7144
  readonly opacity: "opacity-50";