@octavius2929-personal/design-system 0.13.0 → 0.15.0

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 (9) hide show
  1. package/dist/index.cjs +658 -330
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.cts +53 -865
  4. package/dist/index.d.ts +53 -865
  5. package/dist/index.js +582 -254
  6. package/dist/index.js.map +1 -1
  7. package/package.json +3 -11
  8. package/LICENSE +0 -21
  9. package/README.md +0 -117
package/dist/index.d.ts CHANGED
@@ -1,595 +1,8 @@
1
+ import { SchemaName, Mode, ModePreference } from '@octavius2929-personal/design-system-core';
2
+ export { ColorTokens, Mode, ModePreference, SchemaName, modeNames, schemaNames } from '@octavius2929-personal/design-system-core';
1
3
  import * as react from 'react';
2
4
  import { ElementType, ComponentPropsWithoutRef, Ref, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
3
5
 
4
- declare const tintaSchema: {
5
- light: {
6
- color: {
7
- bg1: string;
8
- bg2: string;
9
- bg3: string;
10
- bgInset: string;
11
- fg1: string;
12
- fg2: string;
13
- fg3: string;
14
- fgOnAccent: string;
15
- border1: string;
16
- border2: string;
17
- borderStrong: string;
18
- accent: string;
19
- accentHover: string;
20
- accentSoft: string;
21
- ok: string;
22
- warn: string;
23
- danger: string;
24
- dangerHover: string;
25
- dangerSoft: string;
26
- info: string;
27
- focus: string;
28
- scrim: string;
29
- };
30
- font: {
31
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
32
- readonly text: "'Newsreader', Georgia, serif";
33
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
34
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
35
- };
36
- text: {
37
- readonly eyebrow: {
38
- readonly size: "0.694rem";
39
- readonly lineHeight: "1.2";
40
- readonly weight: "500";
41
- readonly letterSpacing: "0.14em";
42
- };
43
- readonly display: {
44
- readonly size: "5.6rem";
45
- readonly lineHeight: "1.05";
46
- readonly weight: "600";
47
- readonly letterSpacing: "-0.01em";
48
- };
49
- readonly h1: {
50
- readonly size: "2.9rem";
51
- readonly lineHeight: "1.05";
52
- readonly weight: "600";
53
- readonly letterSpacing: "-0.01em";
54
- };
55
- readonly h2: {
56
- readonly size: "2.1rem";
57
- readonly lineHeight: "1.2";
58
- readonly weight: "600";
59
- readonly letterSpacing: "0";
60
- };
61
- readonly h3: {
62
- readonly size: "1.563rem";
63
- readonly lineHeight: "1.2";
64
- readonly weight: "500";
65
- readonly letterSpacing: "0";
66
- };
67
- readonly h4: {
68
- readonly size: "1.25rem";
69
- readonly lineHeight: "1.2";
70
- readonly weight: "600";
71
- readonly letterSpacing: "0";
72
- };
73
- readonly body: {
74
- readonly size: "1rem";
75
- readonly lineHeight: "1.7";
76
- readonly weight: "400";
77
- readonly letterSpacing: "0";
78
- };
79
- readonly lead: {
80
- readonly size: "1.25rem";
81
- readonly lineHeight: "1.7";
82
- readonly weight: "400";
83
- readonly letterSpacing: "0";
84
- };
85
- readonly small: {
86
- readonly size: "0.95rem";
87
- readonly lineHeight: "1.5";
88
- readonly weight: "400";
89
- readonly letterSpacing: "0";
90
- };
91
- readonly caption: {
92
- readonly size: "0.833rem";
93
- readonly lineHeight: "1.5";
94
- readonly weight: "400";
95
- readonly letterSpacing: "0.04em";
96
- };
97
- };
98
- space: {
99
- readonly s0: "0";
100
- readonly s1: "0.25rem";
101
- readonly s2: "0.5rem";
102
- readonly s3: "0.75rem";
103
- readonly s4: "1rem";
104
- readonly s5: "1.5rem";
105
- readonly s6: "2rem";
106
- readonly s7: "3rem";
107
- readonly s8: "4rem";
108
- readonly s9: "6rem";
109
- };
110
- radius: {
111
- readonly none: "0px";
112
- readonly sm: "3px";
113
- readonly md: "5px";
114
- readonly lg: "8px";
115
- readonly base: "4px";
116
- readonly full: "999px";
117
- };
118
- border: {
119
- readonly hair: "1px";
120
- readonly rule: "1.5px";
121
- readonly heavy: "2px";
122
- };
123
- tracking: {
124
- readonly tight: "-0.01em";
125
- readonly normal: "0";
126
- readonly wide: "0.04em";
127
- readonly wider: "0.1em";
128
- readonly widest: "0.14em";
129
- };
130
- weight: {
131
- readonly light: "300";
132
- readonly regular: "400";
133
- readonly medium: "500";
134
- readonly semibold: "600";
135
- readonly bold: "700";
136
- };
137
- dur: {
138
- readonly fast: "120ms";
139
- readonly base: "200ms";
140
- readonly slow: "360ms";
141
- };
142
- ease: {
143
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
144
- };
145
- shadow: {
146
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
147
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
148
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
149
- };
150
- };
151
- dark: {
152
- color: {
153
- bg1: string;
154
- bg2: string;
155
- bg3: string;
156
- bgInset: string;
157
- fg1: string;
158
- fg2: string;
159
- fg3: string;
160
- fgOnAccent: string;
161
- border1: string;
162
- border2: string;
163
- borderStrong: string;
164
- accent: string;
165
- accentHover: string;
166
- accentSoft: string;
167
- ok: string;
168
- warn: string;
169
- danger: string;
170
- dangerHover: string;
171
- dangerSoft: string;
172
- info: string;
173
- focus: string;
174
- scrim: string;
175
- };
176
- font: {
177
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
178
- readonly text: "'Newsreader', Georgia, serif";
179
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
180
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
181
- };
182
- text: {
183
- readonly eyebrow: {
184
- readonly size: "0.694rem";
185
- readonly lineHeight: "1.2";
186
- readonly weight: "500";
187
- readonly letterSpacing: "0.14em";
188
- };
189
- readonly display: {
190
- readonly size: "5.6rem";
191
- readonly lineHeight: "1.05";
192
- readonly weight: "600";
193
- readonly letterSpacing: "-0.01em";
194
- };
195
- readonly h1: {
196
- readonly size: "2.9rem";
197
- readonly lineHeight: "1.05";
198
- readonly weight: "600";
199
- readonly letterSpacing: "-0.01em";
200
- };
201
- readonly h2: {
202
- readonly size: "2.1rem";
203
- readonly lineHeight: "1.2";
204
- readonly weight: "600";
205
- readonly letterSpacing: "0";
206
- };
207
- readonly h3: {
208
- readonly size: "1.563rem";
209
- readonly lineHeight: "1.2";
210
- readonly weight: "500";
211
- readonly letterSpacing: "0";
212
- };
213
- readonly h4: {
214
- readonly size: "1.25rem";
215
- readonly lineHeight: "1.2";
216
- readonly weight: "600";
217
- readonly letterSpacing: "0";
218
- };
219
- readonly body: {
220
- readonly size: "1rem";
221
- readonly lineHeight: "1.7";
222
- readonly weight: "400";
223
- readonly letterSpacing: "0";
224
- };
225
- readonly lead: {
226
- readonly size: "1.25rem";
227
- readonly lineHeight: "1.7";
228
- readonly weight: "400";
229
- readonly letterSpacing: "0";
230
- };
231
- readonly small: {
232
- readonly size: "0.95rem";
233
- readonly lineHeight: "1.5";
234
- readonly weight: "400";
235
- readonly letterSpacing: "0";
236
- };
237
- readonly caption: {
238
- readonly size: "0.833rem";
239
- readonly lineHeight: "1.5";
240
- readonly weight: "400";
241
- readonly letterSpacing: "0.04em";
242
- };
243
- };
244
- space: {
245
- readonly s0: "0";
246
- readonly s1: "0.25rem";
247
- readonly s2: "0.5rem";
248
- readonly s3: "0.75rem";
249
- readonly s4: "1rem";
250
- readonly s5: "1.5rem";
251
- readonly s6: "2rem";
252
- readonly s7: "3rem";
253
- readonly s8: "4rem";
254
- readonly s9: "6rem";
255
- };
256
- radius: {
257
- readonly none: "0px";
258
- readonly sm: "3px";
259
- readonly md: "5px";
260
- readonly lg: "8px";
261
- readonly base: "4px";
262
- readonly full: "999px";
263
- };
264
- border: {
265
- readonly hair: "1px";
266
- readonly rule: "1.5px";
267
- readonly heavy: "2px";
268
- };
269
- tracking: {
270
- readonly tight: "-0.01em";
271
- readonly normal: "0";
272
- readonly wide: "0.04em";
273
- readonly wider: "0.1em";
274
- readonly widest: "0.14em";
275
- };
276
- weight: {
277
- readonly light: "300";
278
- readonly regular: "400";
279
- readonly medium: "500";
280
- readonly semibold: "600";
281
- readonly bold: "700";
282
- };
283
- dur: {
284
- readonly fast: "120ms";
285
- readonly base: "200ms";
286
- readonly slow: "360ms";
287
- };
288
- ease: {
289
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
290
- };
291
- shadow: {
292
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
293
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
294
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
295
- };
296
- };
297
- sepia: {
298
- color: {
299
- bg1: string;
300
- bg2: string;
301
- bg3: string;
302
- bgInset: string;
303
- fg1: string;
304
- fg2: string;
305
- fg3: string;
306
- fgOnAccent: string;
307
- border1: string;
308
- border2: string;
309
- borderStrong: string;
310
- accent: string;
311
- accentHover: string;
312
- accentSoft: string;
313
- ok: string;
314
- warn: string;
315
- danger: string;
316
- dangerHover: string;
317
- dangerSoft: string;
318
- info: string;
319
- focus: string;
320
- scrim: string;
321
- };
322
- font: {
323
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
324
- readonly text: "'Newsreader', Georgia, serif";
325
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
326
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
327
- };
328
- text: {
329
- readonly eyebrow: {
330
- readonly size: "0.694rem";
331
- readonly lineHeight: "1.2";
332
- readonly weight: "500";
333
- readonly letterSpacing: "0.14em";
334
- };
335
- readonly display: {
336
- readonly size: "5.6rem";
337
- readonly lineHeight: "1.05";
338
- readonly weight: "600";
339
- readonly letterSpacing: "-0.01em";
340
- };
341
- readonly h1: {
342
- readonly size: "2.9rem";
343
- readonly lineHeight: "1.05";
344
- readonly weight: "600";
345
- readonly letterSpacing: "-0.01em";
346
- };
347
- readonly h2: {
348
- readonly size: "2.1rem";
349
- readonly lineHeight: "1.2";
350
- readonly weight: "600";
351
- readonly letterSpacing: "0";
352
- };
353
- readonly h3: {
354
- readonly size: "1.563rem";
355
- readonly lineHeight: "1.2";
356
- readonly weight: "500";
357
- readonly letterSpacing: "0";
358
- };
359
- readonly h4: {
360
- readonly size: "1.25rem";
361
- readonly lineHeight: "1.2";
362
- readonly weight: "600";
363
- readonly letterSpacing: "0";
364
- };
365
- readonly body: {
366
- readonly size: "1rem";
367
- readonly lineHeight: "1.7";
368
- readonly weight: "400";
369
- readonly letterSpacing: "0";
370
- };
371
- readonly lead: {
372
- readonly size: "1.25rem";
373
- readonly lineHeight: "1.7";
374
- readonly weight: "400";
375
- readonly letterSpacing: "0";
376
- };
377
- readonly small: {
378
- readonly size: "0.95rem";
379
- readonly lineHeight: "1.5";
380
- readonly weight: "400";
381
- readonly letterSpacing: "0";
382
- };
383
- readonly caption: {
384
- readonly size: "0.833rem";
385
- readonly lineHeight: "1.5";
386
- readonly weight: "400";
387
- readonly letterSpacing: "0.04em";
388
- };
389
- };
390
- space: {
391
- readonly s0: "0";
392
- readonly s1: "0.25rem";
393
- readonly s2: "0.5rem";
394
- readonly s3: "0.75rem";
395
- readonly s4: "1rem";
396
- readonly s5: "1.5rem";
397
- readonly s6: "2rem";
398
- readonly s7: "3rem";
399
- readonly s8: "4rem";
400
- readonly s9: "6rem";
401
- };
402
- radius: {
403
- readonly none: "0px";
404
- readonly sm: "3px";
405
- readonly md: "5px";
406
- readonly lg: "8px";
407
- readonly base: "4px";
408
- readonly full: "999px";
409
- };
410
- border: {
411
- readonly hair: "1px";
412
- readonly rule: "1.5px";
413
- readonly heavy: "2px";
414
- };
415
- tracking: {
416
- readonly tight: "-0.01em";
417
- readonly normal: "0";
418
- readonly wide: "0.04em";
419
- readonly wider: "0.1em";
420
- readonly widest: "0.14em";
421
- };
422
- weight: {
423
- readonly light: "300";
424
- readonly regular: "400";
425
- readonly medium: "500";
426
- readonly semibold: "600";
427
- readonly bold: "700";
428
- };
429
- dur: {
430
- readonly fast: "120ms";
431
- readonly base: "200ms";
432
- readonly slow: "360ms";
433
- };
434
- ease: {
435
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
436
- };
437
- shadow: {
438
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
439
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
440
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
441
- };
442
- };
443
- contrast: {
444
- color: {
445
- bg1: string;
446
- bg2: string;
447
- bg3: string;
448
- bgInset: string;
449
- fg1: string;
450
- fg2: string;
451
- fg3: string;
452
- fgOnAccent: string;
453
- border1: string;
454
- border2: string;
455
- borderStrong: string;
456
- accent: string;
457
- accentHover: string;
458
- accentSoft: string;
459
- ok: string;
460
- warn: string;
461
- danger: string;
462
- dangerHover: string;
463
- dangerSoft: string;
464
- info: string;
465
- focus: string;
466
- scrim: string;
467
- };
468
- font: {
469
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
470
- readonly text: "'Newsreader', Georgia, serif";
471
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
472
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
473
- };
474
- text: {
475
- readonly eyebrow: {
476
- readonly size: "0.694rem";
477
- readonly lineHeight: "1.2";
478
- readonly weight: "500";
479
- readonly letterSpacing: "0.14em";
480
- };
481
- readonly display: {
482
- readonly size: "5.6rem";
483
- readonly lineHeight: "1.05";
484
- readonly weight: "600";
485
- readonly letterSpacing: "-0.01em";
486
- };
487
- readonly h1: {
488
- readonly size: "2.9rem";
489
- readonly lineHeight: "1.05";
490
- readonly weight: "600";
491
- readonly letterSpacing: "-0.01em";
492
- };
493
- readonly h2: {
494
- readonly size: "2.1rem";
495
- readonly lineHeight: "1.2";
496
- readonly weight: "600";
497
- readonly letterSpacing: "0";
498
- };
499
- readonly h3: {
500
- readonly size: "1.563rem";
501
- readonly lineHeight: "1.2";
502
- readonly weight: "500";
503
- readonly letterSpacing: "0";
504
- };
505
- readonly h4: {
506
- readonly size: "1.25rem";
507
- readonly lineHeight: "1.2";
508
- readonly weight: "600";
509
- readonly letterSpacing: "0";
510
- };
511
- readonly body: {
512
- readonly size: "1rem";
513
- readonly lineHeight: "1.7";
514
- readonly weight: "400";
515
- readonly letterSpacing: "0";
516
- };
517
- readonly lead: {
518
- readonly size: "1.25rem";
519
- readonly lineHeight: "1.7";
520
- readonly weight: "400";
521
- readonly letterSpacing: "0";
522
- };
523
- readonly small: {
524
- readonly size: "0.95rem";
525
- readonly lineHeight: "1.5";
526
- readonly weight: "400";
527
- readonly letterSpacing: "0";
528
- };
529
- readonly caption: {
530
- readonly size: "0.833rem";
531
- readonly lineHeight: "1.5";
532
- readonly weight: "400";
533
- readonly letterSpacing: "0.04em";
534
- };
535
- };
536
- space: {
537
- readonly s0: "0";
538
- readonly s1: "0.25rem";
539
- readonly s2: "0.5rem";
540
- readonly s3: "0.75rem";
541
- readonly s4: "1rem";
542
- readonly s5: "1.5rem";
543
- readonly s6: "2rem";
544
- readonly s7: "3rem";
545
- readonly s8: "4rem";
546
- readonly s9: "6rem";
547
- };
548
- radius: {
549
- readonly none: "0px";
550
- readonly sm: "3px";
551
- readonly md: "5px";
552
- readonly lg: "8px";
553
- readonly base: "4px";
554
- readonly full: "999px";
555
- };
556
- border: {
557
- readonly hair: "1px";
558
- readonly rule: "1.5px";
559
- readonly heavy: "2px";
560
- };
561
- tracking: {
562
- readonly tight: "-0.01em";
563
- readonly normal: "0";
564
- readonly wide: "0.04em";
565
- readonly wider: "0.1em";
566
- readonly widest: "0.14em";
567
- };
568
- weight: {
569
- readonly light: "300";
570
- readonly regular: "400";
571
- readonly medium: "500";
572
- readonly semibold: "600";
573
- readonly bold: "700";
574
- };
575
- dur: {
576
- readonly fast: "120ms";
577
- readonly base: "200ms";
578
- readonly slow: "360ms";
579
- };
580
- ease: {
581
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
582
- };
583
- shadow: {
584
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
585
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
586
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
587
- };
588
- };
589
- };
590
-
591
- type SchemaName = "tinta";
592
- type Mode = "light" | "dark" | "sepia" | "contrast";
593
6
  declare const colorVars: {
594
7
  bg1: `var(--${string})`;
595
8
  bg2: `var(--${string})`;
@@ -761,9 +174,6 @@ declare const vars: {
761
174
  };
762
175
  };
763
176
  declare const themes: Record<SchemaName, Record<Mode, string>>;
764
- declare const schemaNames: readonly SchemaName[];
765
- declare const modeNames: readonly Mode[];
766
- type ColorTokens = typeof tintaSchema.light.color;
767
177
 
768
178
  declare function usePrevious<T>(value: T, initial: T): T;
769
179
  declare function usePrevious<T>(value: T, initial?: T): T | undefined;
@@ -814,10 +224,12 @@ type Sprinkles = Parameters<typeof sprinkles>[0];
814
224
 
815
225
  type ContainerOwnProps<E extends ElementType> = Sprinkles & {
816
226
  as?: E;
227
+ /** Segmento de contexto para el data-testid. */
228
+ testId?: string;
817
229
  };
818
230
  type ContainerProps<E extends ElementType = "div"> = ContainerOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof ContainerOwnProps<E>>;
819
231
 
820
- declare function ContainerImpl<E extends ElementType = "div">({ as, ...props }: ContainerProps<E>, ref: Ref<Element>): react.JSX.Element;
232
+ declare function ContainerImpl<E extends ElementType = "div">({ as, testId, ...props }: ContainerProps<E>, ref: Ref<Element>): react.JSX.Element;
821
233
  declare const Container: <E extends ElementType = "div">(props: ContainerProps<E> & {
822
234
  ref?: Ref<Element>;
823
235
  }) => ReturnType<typeof ContainerImpl>;
@@ -830,10 +242,12 @@ type TypographyOwnProps<E extends ElementType> = {
830
242
  as?: E;
831
243
  color?: TypographyColor;
832
244
  align?: TypographyAlign;
245
+ /** Segmento de contexto para el data-testid. */
246
+ testId?: string;
833
247
  };
834
248
  type TypographyProps<E extends ElementType = "span"> = TypographyOwnProps<E> & Omit<ComponentPropsWithoutRef<E>, "className" | "style" | "color" | keyof TypographyOwnProps<E>>;
835
249
 
836
- declare function TypographyInner<E extends ElementType = "span">({ variant, as, color, align, ...rest }: TypographyProps<E>, ref: Ref<HTMLElement>): react.JSX.Element;
250
+ declare function TypographyInner<E extends ElementType = "span">({ variant, as, color, align, testId, ...rest }: TypographyProps<E>, ref: Ref<HTMLElement>): react.JSX.Element;
837
251
  declare const Typography: <E extends ElementType = "span">(props: TypographyProps<E> & {
838
252
  ref?: Ref<HTMLElement>;
839
253
  }) => ReturnType<typeof TypographyInner>;
@@ -865,6 +279,8 @@ declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAtt
865
279
  interface DividerProps extends Omit<HTMLAttributes<HTMLDivElement>, "className"> {
866
280
  vertical?: boolean;
867
281
  label?: ReactNode;
282
+ /** Segmento de contexto para el data-testid. */
283
+ testId?: string;
868
284
  }
869
285
 
870
286
  declare const Divider: react.ForwardRefExoticComponent<DividerProps & react.RefAttributes<HTMLDivElement>>;
@@ -873,6 +289,8 @@ type AvatarSize = "sm" | "md" | "lg";
873
289
  interface AvatarProps extends HTMLAttributes<HTMLSpanElement> {
874
290
  size?: AvatarSize;
875
291
  filled?: boolean;
292
+ /** Segmento de contexto para el data-testid. */
293
+ testId?: string;
876
294
  }
877
295
 
878
296
  declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLSpanElement>>;
@@ -881,6 +299,8 @@ type BadgeTone = "ink" | "accent";
881
299
  interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
882
300
  count?: number;
883
301
  tone?: BadgeTone;
302
+ /** Segmento de contexto para el data-testid. */
303
+ testId?: string;
884
304
  }
885
305
 
886
306
  declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLSpanElement>>;
@@ -890,6 +310,8 @@ interface ProgressProps extends HTMLAttributes<HTMLDivElement> {
890
310
  variant?: ProgressVariant;
891
311
  value?: number;
892
312
  size?: number;
313
+ /** Segmento de contexto para el data-testid. */
314
+ testId?: string;
893
315
  }
894
316
 
895
317
  declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLElement>>;
@@ -899,6 +321,8 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
899
321
  selected?: boolean;
900
322
  tone?: ChipTone;
901
323
  onDelete?: () => void;
324
+ /** Segmento de contexto para el data-testid. */
325
+ testId?: string;
902
326
  }
903
327
 
904
328
  declare const Chip: react.ForwardRefExoticComponent<ChipProps & react.RefAttributes<HTMLSpanElement>>;
@@ -909,6 +333,8 @@ interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onC
909
333
  label?: ReactNode;
910
334
  disabled?: boolean;
911
335
  id?: string;
336
+ /** Segmento de contexto para el data-testid. */
337
+ testId?: string;
912
338
  }
913
339
 
914
340
  declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
@@ -920,6 +346,8 @@ interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChan
920
346
  name?: string;
921
347
  value?: string;
922
348
  disabled?: boolean;
349
+ /** Segmento de contexto para el data-testid. */
350
+ testId?: string;
923
351
  }
924
352
 
925
353
  declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
@@ -929,6 +357,8 @@ interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onCha
929
357
  onChange?: (checked: boolean) => void;
930
358
  label?: ReactNode;
931
359
  disabled?: boolean;
360
+ /** Segmento de contexto para el data-testid. */
361
+ testId?: string;
932
362
  }
933
363
 
934
364
  declare const Switch: react.ForwardRefExoticComponent<SwitchProps & react.RefAttributes<HTMLInputElement>>;
@@ -990,7 +420,10 @@ interface IconButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>,
990
420
  declare const IconButton: react.ForwardRefExoticComponent<IconButtonProps & react.RefAttributes<HTMLButtonElement>>;
991
421
 
992
422
  type DivProps = Omit<HTMLAttributes<HTMLDivElement>, "className">;
993
- type CardProps = DivProps;
423
+ interface CardProps extends DivProps {
424
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
425
+ testId?: string;
426
+ }
994
427
  type CardSectionProps = DivProps;
995
428
 
996
429
  declare function CardHeader({ children, ...rest }: CardSectionProps): react.JSX.Element;
@@ -1005,273 +438,7 @@ declare function CardFooter({ children, ...rest }: CardSectionProps): react.JSX.
1005
438
  declare namespace CardFooter {
1006
439
  var displayName: string;
1007
440
  }
1008
- declare const Card: react.ForwardRefExoticComponent<{
1009
- color?: string | undefined | undefined;
1010
- content?: string | undefined | undefined;
1011
- translate?: "yes" | "no" | undefined | undefined;
1012
- hidden?: boolean | undefined | undefined;
1013
- style?: react.CSSProperties | undefined;
1014
- slot?: string | undefined | undefined;
1015
- title?: string | undefined | undefined;
1016
- defaultChecked?: boolean | undefined | undefined;
1017
- defaultValue?: string | number | readonly string[] | undefined;
1018
- suppressContentEditableWarning?: boolean | undefined | undefined;
1019
- suppressHydrationWarning?: boolean | undefined | undefined;
1020
- accessKey?: string | undefined | undefined;
1021
- autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
1022
- autoFocus?: boolean | undefined | undefined;
1023
- contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
1024
- contextMenu?: string | undefined | undefined;
1025
- dir?: string | undefined | undefined;
1026
- draggable?: (boolean | "false" | "true") | undefined;
1027
- enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
1028
- id?: string | undefined | undefined;
1029
- lang?: string | undefined | undefined;
1030
- nonce?: string | undefined | undefined;
1031
- spellCheck?: (boolean | "false" | "true") | undefined;
1032
- tabIndex?: number | undefined | undefined;
1033
- radioGroup?: string | undefined | undefined;
1034
- role?: react.AriaRole | undefined;
1035
- about?: string | undefined | undefined;
1036
- datatype?: string | undefined | undefined;
1037
- inlist?: any;
1038
- prefix?: string | undefined | undefined;
1039
- property?: string | undefined | undefined;
1040
- rel?: string | undefined | undefined;
1041
- resource?: string | undefined | undefined;
1042
- rev?: string | undefined | undefined;
1043
- typeof?: string | undefined | undefined;
1044
- vocab?: string | undefined | undefined;
1045
- autoCorrect?: string | undefined | undefined;
1046
- autoSave?: string | undefined | undefined;
1047
- itemProp?: string | undefined | undefined;
1048
- itemScope?: boolean | undefined | undefined;
1049
- itemType?: string | undefined | undefined;
1050
- itemID?: string | undefined | undefined;
1051
- itemRef?: string | undefined | undefined;
1052
- results?: number | undefined | undefined;
1053
- security?: string | undefined | undefined;
1054
- unselectable?: "on" | "off" | undefined | undefined;
1055
- inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
1056
- is?: string | undefined | undefined;
1057
- exportparts?: string | undefined | undefined;
1058
- part?: string | undefined | undefined;
1059
- "aria-activedescendant"?: string | undefined | undefined;
1060
- "aria-atomic"?: (boolean | "false" | "true") | undefined;
1061
- "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
1062
- "aria-braillelabel"?: string | undefined | undefined;
1063
- "aria-brailleroledescription"?: string | undefined | undefined;
1064
- "aria-busy"?: (boolean | "false" | "true") | undefined;
1065
- "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
1066
- "aria-colcount"?: number | undefined | undefined;
1067
- "aria-colindex"?: number | undefined | undefined;
1068
- "aria-colindextext"?: string | undefined | undefined;
1069
- "aria-colspan"?: number | undefined | undefined;
1070
- "aria-controls"?: string | undefined | undefined;
1071
- "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
1072
- "aria-describedby"?: string | undefined | undefined;
1073
- "aria-description"?: string | undefined | undefined;
1074
- "aria-details"?: string | undefined | undefined;
1075
- "aria-disabled"?: (boolean | "false" | "true") | undefined;
1076
- "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
1077
- "aria-errormessage"?: string | undefined | undefined;
1078
- "aria-expanded"?: (boolean | "false" | "true") | undefined;
1079
- "aria-flowto"?: string | undefined | undefined;
1080
- "aria-grabbed"?: (boolean | "false" | "true") | undefined;
1081
- "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
1082
- "aria-hidden"?: (boolean | "false" | "true") | undefined;
1083
- "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
1084
- "aria-keyshortcuts"?: string | undefined | undefined;
1085
- "aria-label"?: string | undefined | undefined;
1086
- "aria-labelledby"?: string | undefined | undefined;
1087
- "aria-level"?: number | undefined | undefined;
1088
- "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
1089
- "aria-modal"?: (boolean | "false" | "true") | undefined;
1090
- "aria-multiline"?: (boolean | "false" | "true") | undefined;
1091
- "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
1092
- "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
1093
- "aria-owns"?: string | undefined | undefined;
1094
- "aria-placeholder"?: string | undefined | undefined;
1095
- "aria-posinset"?: number | undefined | undefined;
1096
- "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
1097
- "aria-readonly"?: (boolean | "false" | "true") | undefined;
1098
- "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
1099
- "aria-required"?: (boolean | "false" | "true") | undefined;
1100
- "aria-roledescription"?: string | undefined | undefined;
1101
- "aria-rowcount"?: number | undefined | undefined;
1102
- "aria-rowindex"?: number | undefined | undefined;
1103
- "aria-rowindextext"?: string | undefined | undefined;
1104
- "aria-rowspan"?: number | undefined | undefined;
1105
- "aria-selected"?: (boolean | "false" | "true") | undefined;
1106
- "aria-setsize"?: number | undefined | undefined;
1107
- "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
1108
- "aria-valuemax"?: number | undefined | undefined;
1109
- "aria-valuemin"?: number | undefined | undefined;
1110
- "aria-valuenow"?: number | undefined | undefined;
1111
- "aria-valuetext"?: string | undefined | undefined;
1112
- children?: react.ReactNode;
1113
- dangerouslySetInnerHTML?: {
1114
- __html: string | TrustedHTML;
1115
- } | undefined | undefined;
1116
- onCopy?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1117
- onCopyCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1118
- onCut?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1119
- onCutCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1120
- onPaste?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1121
- onPasteCapture?: react.ClipboardEventHandler<HTMLDivElement> | undefined;
1122
- onCompositionEnd?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1123
- onCompositionEndCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1124
- onCompositionStart?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1125
- onCompositionStartCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1126
- onCompositionUpdate?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1127
- onCompositionUpdateCapture?: react.CompositionEventHandler<HTMLDivElement> | undefined;
1128
- onFocus?: react.FocusEventHandler<HTMLDivElement> | undefined;
1129
- onFocusCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
1130
- onBlur?: react.FocusEventHandler<HTMLDivElement> | undefined;
1131
- onBlurCapture?: react.FocusEventHandler<HTMLDivElement> | undefined;
1132
- onChange?: react.FormEventHandler<HTMLDivElement> | undefined;
1133
- onChangeCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1134
- onBeforeInput?: react.InputEventHandler<HTMLDivElement> | undefined;
1135
- onBeforeInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1136
- onInput?: react.FormEventHandler<HTMLDivElement> | undefined;
1137
- onInputCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1138
- onReset?: react.FormEventHandler<HTMLDivElement> | undefined;
1139
- onResetCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1140
- onSubmit?: react.FormEventHandler<HTMLDivElement> | undefined;
1141
- onSubmitCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1142
- onInvalid?: react.FormEventHandler<HTMLDivElement> | undefined;
1143
- onInvalidCapture?: react.FormEventHandler<HTMLDivElement> | undefined;
1144
- onLoad?: react.ReactEventHandler<HTMLDivElement> | undefined;
1145
- onLoadCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1146
- onError?: react.ReactEventHandler<HTMLDivElement> | undefined;
1147
- onErrorCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1148
- onKeyDown?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1149
- onKeyDownCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1150
- onKeyPress?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1151
- onKeyPressCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1152
- onKeyUp?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1153
- onKeyUpCapture?: react.KeyboardEventHandler<HTMLDivElement> | undefined;
1154
- onAbort?: react.ReactEventHandler<HTMLDivElement> | undefined;
1155
- onAbortCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1156
- onCanPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
1157
- onCanPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1158
- onCanPlayThrough?: react.ReactEventHandler<HTMLDivElement> | undefined;
1159
- onCanPlayThroughCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1160
- onDurationChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
1161
- onDurationChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1162
- onEmptied?: react.ReactEventHandler<HTMLDivElement> | undefined;
1163
- onEmptiedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1164
- onEncrypted?: react.ReactEventHandler<HTMLDivElement> | undefined;
1165
- onEncryptedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1166
- onEnded?: react.ReactEventHandler<HTMLDivElement> | undefined;
1167
- onEndedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1168
- onLoadedData?: react.ReactEventHandler<HTMLDivElement> | undefined;
1169
- onLoadedDataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1170
- onLoadedMetadata?: react.ReactEventHandler<HTMLDivElement> | undefined;
1171
- onLoadedMetadataCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1172
- onLoadStart?: react.ReactEventHandler<HTMLDivElement> | undefined;
1173
- onLoadStartCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1174
- onPause?: react.ReactEventHandler<HTMLDivElement> | undefined;
1175
- onPauseCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1176
- onPlay?: react.ReactEventHandler<HTMLDivElement> | undefined;
1177
- onPlayCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1178
- onPlaying?: react.ReactEventHandler<HTMLDivElement> | undefined;
1179
- onPlayingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1180
- onProgress?: react.ReactEventHandler<HTMLDivElement> | undefined;
1181
- onProgressCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1182
- onRateChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
1183
- onRateChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1184
- onSeeked?: react.ReactEventHandler<HTMLDivElement> | undefined;
1185
- onSeekedCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1186
- onSeeking?: react.ReactEventHandler<HTMLDivElement> | undefined;
1187
- onSeekingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1188
- onStalled?: react.ReactEventHandler<HTMLDivElement> | undefined;
1189
- onStalledCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1190
- onSuspend?: react.ReactEventHandler<HTMLDivElement> | undefined;
1191
- onSuspendCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1192
- onTimeUpdate?: react.ReactEventHandler<HTMLDivElement> | undefined;
1193
- onTimeUpdateCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1194
- onVolumeChange?: react.ReactEventHandler<HTMLDivElement> | undefined;
1195
- onVolumeChangeCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1196
- onWaiting?: react.ReactEventHandler<HTMLDivElement> | undefined;
1197
- onWaitingCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1198
- onAuxClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
1199
- onAuxClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1200
- onClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
1201
- onClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1202
- onContextMenu?: react.MouseEventHandler<HTMLDivElement> | undefined;
1203
- onContextMenuCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1204
- onDoubleClick?: react.MouseEventHandler<HTMLDivElement> | undefined;
1205
- onDoubleClickCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1206
- onDrag?: react.DragEventHandler<HTMLDivElement> | undefined;
1207
- onDragCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1208
- onDragEnd?: react.DragEventHandler<HTMLDivElement> | undefined;
1209
- onDragEndCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1210
- onDragEnter?: react.DragEventHandler<HTMLDivElement> | undefined;
1211
- onDragEnterCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1212
- onDragExit?: react.DragEventHandler<HTMLDivElement> | undefined;
1213
- onDragExitCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1214
- onDragLeave?: react.DragEventHandler<HTMLDivElement> | undefined;
1215
- onDragLeaveCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1216
- onDragOver?: react.DragEventHandler<HTMLDivElement> | undefined;
1217
- onDragOverCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1218
- onDragStart?: react.DragEventHandler<HTMLDivElement> | undefined;
1219
- onDragStartCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1220
- onDrop?: react.DragEventHandler<HTMLDivElement> | undefined;
1221
- onDropCapture?: react.DragEventHandler<HTMLDivElement> | undefined;
1222
- onMouseDown?: react.MouseEventHandler<HTMLDivElement> | undefined;
1223
- onMouseDownCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1224
- onMouseEnter?: react.MouseEventHandler<HTMLDivElement> | undefined;
1225
- onMouseLeave?: react.MouseEventHandler<HTMLDivElement> | undefined;
1226
- onMouseMove?: react.MouseEventHandler<HTMLDivElement> | undefined;
1227
- onMouseMoveCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1228
- onMouseOut?: react.MouseEventHandler<HTMLDivElement> | undefined;
1229
- onMouseOutCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1230
- onMouseOver?: react.MouseEventHandler<HTMLDivElement> | undefined;
1231
- onMouseOverCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1232
- onMouseUp?: react.MouseEventHandler<HTMLDivElement> | undefined;
1233
- onMouseUpCapture?: react.MouseEventHandler<HTMLDivElement> | undefined;
1234
- onSelect?: react.ReactEventHandler<HTMLDivElement> | undefined;
1235
- onSelectCapture?: react.ReactEventHandler<HTMLDivElement> | undefined;
1236
- onTouchCancel?: react.TouchEventHandler<HTMLDivElement> | undefined;
1237
- onTouchCancelCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
1238
- onTouchEnd?: react.TouchEventHandler<HTMLDivElement> | undefined;
1239
- onTouchEndCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
1240
- onTouchMove?: react.TouchEventHandler<HTMLDivElement> | undefined;
1241
- onTouchMoveCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
1242
- onTouchStart?: react.TouchEventHandler<HTMLDivElement> | undefined;
1243
- onTouchStartCapture?: react.TouchEventHandler<HTMLDivElement> | undefined;
1244
- onPointerDown?: react.PointerEventHandler<HTMLDivElement> | undefined;
1245
- onPointerDownCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1246
- onPointerMove?: react.PointerEventHandler<HTMLDivElement> | undefined;
1247
- onPointerMoveCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1248
- onPointerUp?: react.PointerEventHandler<HTMLDivElement> | undefined;
1249
- onPointerUpCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1250
- onPointerCancel?: react.PointerEventHandler<HTMLDivElement> | undefined;
1251
- onPointerCancelCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1252
- onPointerEnter?: react.PointerEventHandler<HTMLDivElement> | undefined;
1253
- onPointerLeave?: react.PointerEventHandler<HTMLDivElement> | undefined;
1254
- onPointerOver?: react.PointerEventHandler<HTMLDivElement> | undefined;
1255
- onPointerOverCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1256
- onPointerOut?: react.PointerEventHandler<HTMLDivElement> | undefined;
1257
- onPointerOutCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1258
- onGotPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1259
- onGotPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1260
- onLostPointerCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1261
- onLostPointerCaptureCapture?: react.PointerEventHandler<HTMLDivElement> | undefined;
1262
- onScroll?: react.UIEventHandler<HTMLDivElement> | undefined;
1263
- onScrollCapture?: react.UIEventHandler<HTMLDivElement> | undefined;
1264
- onWheel?: react.WheelEventHandler<HTMLDivElement> | undefined;
1265
- onWheelCapture?: react.WheelEventHandler<HTMLDivElement> | undefined;
1266
- onAnimationStart?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1267
- onAnimationStartCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1268
- onAnimationEnd?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1269
- onAnimationEndCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1270
- onAnimationIteration?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1271
- onAnimationIterationCapture?: react.AnimationEventHandler<HTMLDivElement> | undefined;
1272
- onTransitionEnd?: react.TransitionEventHandler<HTMLDivElement> | undefined;
1273
- onTransitionEndCapture?: react.TransitionEventHandler<HTMLDivElement> | undefined;
1274
- } & react.RefAttributes<HTMLDivElement>> & {
441
+ declare const Card: react.ForwardRefExoticComponent<CardProps & react.RefAttributes<HTMLDivElement>> & {
1275
442
  Header: typeof CardHeader;
1276
443
  Body: typeof CardBody;
1277
444
  Footer: typeof CardFooter;
@@ -1282,6 +449,8 @@ interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
1282
449
  severity?: AlertSeverity;
1283
450
  title?: ReactNode;
1284
451
  icon?: Icon;
452
+ /** testId de la instancia: compone `feedback__<contexto>__<testId>`. */
453
+ testId?: string;
1285
454
  }
1286
455
 
1287
456
  declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
@@ -1291,6 +460,8 @@ interface TooltipProps {
1291
460
  label: ReactNode;
1292
461
  children: ReactElement;
1293
462
  placement?: TooltipPlacement;
463
+ /** testId de la instancia: compone `feedback__<contexto>__<testId>`. */
464
+ testId?: string;
1294
465
  }
1295
466
 
1296
467
  declare const Tooltip: react.ForwardRefExoticComponent<TooltipProps & react.RefAttributes<HTMLSpanElement>>;
@@ -1332,6 +503,8 @@ interface AccordionProps {
1332
503
  multiple?: boolean;
1333
504
  defaultOpen?: string[];
1334
505
  className?: string;
506
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
507
+ testId?: string;
1335
508
  }
1336
509
 
1337
510
  declare const Accordion: react.ForwardRefExoticComponent<AccordionProps & react.RefAttributes<HTMLDivElement>>;
@@ -1342,6 +515,8 @@ interface Crumb {
1342
515
  }
1343
516
  interface BreadcrumbsProps extends HTMLAttributes<HTMLElement> {
1344
517
  items: Crumb[];
518
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
519
+ testId?: string;
1345
520
  }
1346
521
 
1347
522
  declare const Breadcrumbs: react.ForwardRefExoticComponent<BreadcrumbsProps & react.RefAttributes<HTMLElement>>;
@@ -1351,6 +526,8 @@ interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, "className"
1351
526
  page?: number;
1352
527
  onChange?: (page: number) => void;
1353
528
  siblingCount?: number;
529
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
530
+ testId?: string;
1354
531
  }
1355
532
 
1356
533
  declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
@@ -1361,6 +538,8 @@ interface Step {
1361
538
  interface StepperProps extends HTMLAttributes<HTMLDivElement> {
1362
539
  steps: Step[];
1363
540
  active?: number;
541
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
542
+ testId?: string;
1364
543
  }
1365
544
 
1366
545
  declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefAttributes<HTMLDivElement>>;
@@ -1375,6 +554,8 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "className" | "
1375
554
  items: TabItem[];
1376
555
  value?: string;
1377
556
  onChange?: (value: string) => void;
557
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
558
+ testId?: string;
1378
559
  }
1379
560
 
1380
561
  declare const Tabs: react.ForwardRefExoticComponent<TabsProps & react.RefAttributes<HTMLDivElement>>;
@@ -1410,6 +591,8 @@ interface SnackbarProps {
1410
591
  message: ReactNode;
1411
592
  action?: ReactNode;
1412
593
  onClose?: () => void;
594
+ /** testId de la instancia: compone `feedback__<contexto>__<testId>`. */
595
+ testId?: string;
1413
596
  }
1414
597
 
1415
598
  declare const Snackbar: react.ForwardRefExoticComponent<SnackbarProps & react.RefAttributes<HTMLDivElement>>;
@@ -1426,9 +609,11 @@ interface TableProps<Row extends Record<string, unknown>> extends TableHTMLAttri
1426
609
  getRowKey?: (row: Row, index: number) => string | number;
1427
610
  /** Título accesible de la tabla (`<caption>`). Recomendado para lectores de pantalla. */
1428
611
  caption?: ReactNode;
612
+ /** testId de la instancia: compone `list__<contexto>__<testId>`. */
613
+ testId?: string;
1429
614
  }
1430
615
 
1431
- declare function TableInner<Row extends Record<string, unknown>>({ columns, rows, getRowKey, className, caption, ...rest }: TableProps<Row>, ref: Ref<HTMLTableElement>): react.JSX.Element;
616
+ declare function TableInner<Row extends Record<string, unknown>>({ columns, rows, getRowKey, className, caption, testId, ...rest }: TableProps<Row>, ref: Ref<HTMLTableElement>): react.JSX.Element;
1432
617
  declare const Table: <Row extends Record<string, unknown>>(props: TableProps<Row> & {
1433
618
  ref?: Ref<HTMLTableElement>;
1434
619
  }) => ReturnType<typeof TableInner>;
@@ -1436,6 +621,8 @@ declare const Table: <Row extends Record<string, unknown>>(props: TableProps<Row
1436
621
  interface AppBarProps extends HTMLAttributes<HTMLElement> {
1437
622
  brand?: ReactNode;
1438
623
  actions?: ReactNode;
624
+ /** testId de la instancia (segmento hoja); compone con el contexto de TestIdProvider. */
625
+ testId?: string;
1439
626
  }
1440
627
 
1441
628
  declare const AppBar: react.ForwardRefExoticComponent<AppBarProps & react.RefAttributes<HTMLElement>>;
@@ -1444,6 +631,8 @@ interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
1444
631
  leading?: ReactNode;
1445
632
  trailing?: ReactNode;
1446
633
  selected?: boolean;
634
+ /** testId de la instancia: compone `list__<contexto>__<testId>`. */
635
+ testId?: string;
1447
636
  }
1448
637
 
1449
638
  declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLDivElement>>;
@@ -1482,7 +671,6 @@ declare function MoreHorizontalIcon({ size, strokeWidth, ...rest }: IconProps):
1482
671
 
1483
672
  declare const text: Record<"display" | "eyebrow" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "code" | "blackletter", string>;
1484
673
 
1485
- type ModePreference = Mode | "system";
1486
674
  interface ThemeContextValue {
1487
675
  schema: SchemaName;
1488
676
  /** Modo efectivo ya resuelto (nunca "system"). */
@@ -1524,4 +712,4 @@ interface TestIdHandle {
1524
712
  }
1525
713
  declare function useTestId(type: string, ownTestId?: string): TestIdHandle;
1526
714
 
1527
- export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, Container, type ContainerProps, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoneyField, type MoneyFieldProps, MoreHorizontalIcon, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };
715
+ export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, Container, type ContainerProps, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, MoneyField, type MoneyFieldProps, MoreHorizontalIcon, Pagination, type PaginationProps, PasswordField, type PasswordFieldProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, type TestIdHandle, TestIdProvider, type TestIdProviderProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, XIcon, colorVars, text, vars as theme, themes, usePrevious, useTestId, useTheme, useToggle };