@octavius2929-personal/design-system 0.21.0 → 0.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/index.cjs +58 -30
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.css +251 -219
  4. package/dist/index.css.map +1 -1
  5. package/dist/index.d.cts +53 -597
  6. package/dist/index.d.ts +53 -597
  7. package/dist/index.js +58 -30
  8. package/dist/index.js.map +1 -1
  9. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -1,6 +1,40 @@
1
1
  import * as react from 'react';
2
2
  import { ElementType, ComponentPropsWithoutRef, Ref, SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
3
3
 
4
+ interface ColorTokens {
5
+ bg1: string;
6
+ bg2: string;
7
+ bg3: string;
8
+ bgInset: string;
9
+ fg1: string;
10
+ fg2: string;
11
+ fg3: string;
12
+ fgOnAccent: string;
13
+ border1: string;
14
+ border2: string;
15
+ borderStrong: string;
16
+ accent: string;
17
+ accentHover: string;
18
+ accentSoft: string;
19
+ /** Accent como TEXTO sobre el fondo de página (outline/ghost, links). Cumple AA (≥4.5);
20
+ * en dark es más claro que `accent` (que es un fondo de relleno y debe ser oscuro). */
21
+ accentText: string;
22
+ ok: string;
23
+ warn: string;
24
+ danger: string;
25
+ dangerHover: string;
26
+ dangerSoft: string;
27
+ /** Danger como TEXTO sobre el fondo de página (errores, outline/ghost). Cumple AA (≥4.5). */
28
+ dangerText: string;
29
+ info: string;
30
+ focus: string;
31
+ scrim: string;
32
+ }
33
+ type Mode = "light" | "dark" | "sepia" | "contrast";
34
+ /** El usuario puede fijar un modo concreto o "system" (seguir las preferencias del SO). */
35
+ type ModePreference = Mode | "system";
36
+ declare const modeNames: readonly ["light", "dark", "sepia", "contrast"];
37
+
4
38
  declare const schemas: {
5
39
  readonly tinta: {
6
40
  light: {
@@ -19,11 +53,13 @@ declare const schemas: {
19
53
  accent: string;
20
54
  accentHover: string;
21
55
  accentSoft: string;
56
+ accentText: string;
22
57
  ok: string;
23
58
  warn: string;
24
59
  danger: string;
25
60
  dangerHover: string;
26
61
  dangerSoft: string;
62
+ dangerText: string;
27
63
  info: string;
28
64
  focus: string;
29
65
  scrim: string;
@@ -165,11 +201,13 @@ declare const schemas: {
165
201
  accent: string;
166
202
  accentHover: string;
167
203
  accentSoft: string;
204
+ accentText: string;
168
205
  ok: string;
169
206
  warn: string;
170
207
  danger: string;
171
208
  dangerHover: string;
172
209
  dangerSoft: string;
210
+ dangerText: string;
173
211
  info: string;
174
212
  focus: string;
175
213
  scrim: string;
@@ -311,11 +349,13 @@ declare const schemas: {
311
349
  accent: string;
312
350
  accentHover: string;
313
351
  accentSoft: string;
352
+ accentText: string;
314
353
  ok: string;
315
354
  warn: string;
316
355
  danger: string;
317
356
  dangerHover: string;
318
357
  dangerSoft: string;
358
+ dangerText: string;
319
359
  info: string;
320
360
  focus: string;
321
361
  scrim: string;
@@ -457,11 +497,13 @@ declare const schemas: {
457
497
  accent: string;
458
498
  accentHover: string;
459
499
  accentSoft: string;
500
+ accentText: string;
460
501
  ok: string;
461
502
  warn: string;
462
503
  danger: string;
463
504
  dangerHover: string;
464
505
  dangerSoft: string;
506
+ dangerText: string;
465
507
  info: string;
466
508
  focus: string;
467
509
  scrim: string;
@@ -589,601 +631,8 @@ declare const schemas: {
589
631
  };
590
632
  };
591
633
  };
592
-
593
- declare const tintaSchema: {
594
- light: {
595
- color: {
596
- bg1: string;
597
- bg2: string;
598
- bg3: string;
599
- bgInset: string;
600
- fg1: string;
601
- fg2: string;
602
- fg3: string;
603
- fgOnAccent: string;
604
- border1: string;
605
- border2: string;
606
- borderStrong: string;
607
- accent: string;
608
- accentHover: string;
609
- accentSoft: string;
610
- ok: string;
611
- warn: string;
612
- danger: string;
613
- dangerHover: string;
614
- dangerSoft: string;
615
- info: string;
616
- focus: string;
617
- scrim: string;
618
- };
619
- font: {
620
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
621
- readonly text: "'Newsreader', Georgia, serif";
622
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
623
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
624
- };
625
- text: {
626
- readonly eyebrow: {
627
- readonly size: "0.694rem";
628
- readonly lineHeight: "1.2";
629
- readonly weight: "500";
630
- readonly letterSpacing: "0.14em";
631
- };
632
- readonly display: {
633
- readonly size: "5.6rem";
634
- readonly lineHeight: "1.05";
635
- readonly weight: "600";
636
- readonly letterSpacing: "-0.01em";
637
- };
638
- readonly h1: {
639
- readonly size: "2.9rem";
640
- readonly lineHeight: "1.05";
641
- readonly weight: "600";
642
- readonly letterSpacing: "-0.01em";
643
- };
644
- readonly h2: {
645
- readonly size: "2.1rem";
646
- readonly lineHeight: "1.2";
647
- readonly weight: "600";
648
- readonly letterSpacing: "0";
649
- };
650
- readonly h3: {
651
- readonly size: "1.563rem";
652
- readonly lineHeight: "1.2";
653
- readonly weight: "500";
654
- readonly letterSpacing: "0";
655
- };
656
- readonly h4: {
657
- readonly size: "1.25rem";
658
- readonly lineHeight: "1.2";
659
- readonly weight: "600";
660
- readonly letterSpacing: "0";
661
- };
662
- readonly body: {
663
- readonly size: "1rem";
664
- readonly lineHeight: "1.7";
665
- readonly weight: "400";
666
- readonly letterSpacing: "0";
667
- };
668
- readonly lead: {
669
- readonly size: "1.25rem";
670
- readonly lineHeight: "1.7";
671
- readonly weight: "400";
672
- readonly letterSpacing: "0";
673
- };
674
- readonly small: {
675
- readonly size: "0.95rem";
676
- readonly lineHeight: "1.5";
677
- readonly weight: "400";
678
- readonly letterSpacing: "0";
679
- };
680
- readonly caption: {
681
- readonly size: "0.833rem";
682
- readonly lineHeight: "1.5";
683
- readonly weight: "400";
684
- readonly letterSpacing: "0.04em";
685
- };
686
- };
687
- space: {
688
- readonly s0: "0";
689
- readonly s1: "0.25rem";
690
- readonly s2: "0.5rem";
691
- readonly s3: "0.75rem";
692
- readonly s4: "1rem";
693
- readonly s5: "1.5rem";
694
- readonly s6: "2rem";
695
- readonly s7: "3rem";
696
- readonly s8: "4rem";
697
- readonly s9: "6rem";
698
- };
699
- radius: {
700
- readonly none: "0px";
701
- readonly sm: "3px";
702
- readonly md: "5px";
703
- readonly lg: "8px";
704
- readonly base: "4px";
705
- readonly full: "999px";
706
- };
707
- border: {
708
- readonly hair: "1px";
709
- readonly rule: "1.5px";
710
- readonly heavy: "2px";
711
- };
712
- tracking: {
713
- readonly tight: "-0.01em";
714
- readonly normal: "0";
715
- readonly wide: "0.04em";
716
- readonly wider: "0.1em";
717
- readonly widest: "0.14em";
718
- };
719
- weight: {
720
- readonly light: "300";
721
- readonly regular: "400";
722
- readonly medium: "500";
723
- readonly semibold: "600";
724
- readonly bold: "700";
725
- };
726
- dur: {
727
- readonly fast: "120ms";
728
- readonly base: "200ms";
729
- readonly slow: "360ms";
730
- };
731
- ease: {
732
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
733
- };
734
- shadow: {
735
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
736
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
737
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
738
- };
739
- };
740
- dark: {
741
- color: {
742
- bg1: string;
743
- bg2: string;
744
- bg3: string;
745
- bgInset: string;
746
- fg1: string;
747
- fg2: string;
748
- fg3: string;
749
- fgOnAccent: string;
750
- border1: string;
751
- border2: string;
752
- borderStrong: string;
753
- accent: string;
754
- accentHover: string;
755
- accentSoft: string;
756
- ok: string;
757
- warn: string;
758
- danger: string;
759
- dangerHover: string;
760
- dangerSoft: string;
761
- info: string;
762
- focus: string;
763
- scrim: string;
764
- };
765
- font: {
766
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
767
- readonly text: "'Newsreader', Georgia, serif";
768
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
769
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
770
- };
771
- text: {
772
- readonly eyebrow: {
773
- readonly size: "0.694rem";
774
- readonly lineHeight: "1.2";
775
- readonly weight: "500";
776
- readonly letterSpacing: "0.14em";
777
- };
778
- readonly display: {
779
- readonly size: "5.6rem";
780
- readonly lineHeight: "1.05";
781
- readonly weight: "600";
782
- readonly letterSpacing: "-0.01em";
783
- };
784
- readonly h1: {
785
- readonly size: "2.9rem";
786
- readonly lineHeight: "1.05";
787
- readonly weight: "600";
788
- readonly letterSpacing: "-0.01em";
789
- };
790
- readonly h2: {
791
- readonly size: "2.1rem";
792
- readonly lineHeight: "1.2";
793
- readonly weight: "600";
794
- readonly letterSpacing: "0";
795
- };
796
- readonly h3: {
797
- readonly size: "1.563rem";
798
- readonly lineHeight: "1.2";
799
- readonly weight: "500";
800
- readonly letterSpacing: "0";
801
- };
802
- readonly h4: {
803
- readonly size: "1.25rem";
804
- readonly lineHeight: "1.2";
805
- readonly weight: "600";
806
- readonly letterSpacing: "0";
807
- };
808
- readonly body: {
809
- readonly size: "1rem";
810
- readonly lineHeight: "1.7";
811
- readonly weight: "400";
812
- readonly letterSpacing: "0";
813
- };
814
- readonly lead: {
815
- readonly size: "1.25rem";
816
- readonly lineHeight: "1.7";
817
- readonly weight: "400";
818
- readonly letterSpacing: "0";
819
- };
820
- readonly small: {
821
- readonly size: "0.95rem";
822
- readonly lineHeight: "1.5";
823
- readonly weight: "400";
824
- readonly letterSpacing: "0";
825
- };
826
- readonly caption: {
827
- readonly size: "0.833rem";
828
- readonly lineHeight: "1.5";
829
- readonly weight: "400";
830
- readonly letterSpacing: "0.04em";
831
- };
832
- };
833
- space: {
834
- readonly s0: "0";
835
- readonly s1: "0.25rem";
836
- readonly s2: "0.5rem";
837
- readonly s3: "0.75rem";
838
- readonly s4: "1rem";
839
- readonly s5: "1.5rem";
840
- readonly s6: "2rem";
841
- readonly s7: "3rem";
842
- readonly s8: "4rem";
843
- readonly s9: "6rem";
844
- };
845
- radius: {
846
- readonly none: "0px";
847
- readonly sm: "3px";
848
- readonly md: "5px";
849
- readonly lg: "8px";
850
- readonly base: "4px";
851
- readonly full: "999px";
852
- };
853
- border: {
854
- readonly hair: "1px";
855
- readonly rule: "1.5px";
856
- readonly heavy: "2px";
857
- };
858
- tracking: {
859
- readonly tight: "-0.01em";
860
- readonly normal: "0";
861
- readonly wide: "0.04em";
862
- readonly wider: "0.1em";
863
- readonly widest: "0.14em";
864
- };
865
- weight: {
866
- readonly light: "300";
867
- readonly regular: "400";
868
- readonly medium: "500";
869
- readonly semibold: "600";
870
- readonly bold: "700";
871
- };
872
- dur: {
873
- readonly fast: "120ms";
874
- readonly base: "200ms";
875
- readonly slow: "360ms";
876
- };
877
- ease: {
878
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
879
- };
880
- shadow: {
881
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
882
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
883
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
884
- };
885
- };
886
- sepia: {
887
- color: {
888
- bg1: string;
889
- bg2: string;
890
- bg3: string;
891
- bgInset: string;
892
- fg1: string;
893
- fg2: string;
894
- fg3: string;
895
- fgOnAccent: string;
896
- border1: string;
897
- border2: string;
898
- borderStrong: string;
899
- accent: string;
900
- accentHover: string;
901
- accentSoft: string;
902
- ok: string;
903
- warn: string;
904
- danger: string;
905
- dangerHover: string;
906
- dangerSoft: string;
907
- info: string;
908
- focus: string;
909
- scrim: string;
910
- };
911
- font: {
912
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
913
- readonly text: "'Newsreader', Georgia, serif";
914
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
915
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
916
- };
917
- text: {
918
- readonly eyebrow: {
919
- readonly size: "0.694rem";
920
- readonly lineHeight: "1.2";
921
- readonly weight: "500";
922
- readonly letterSpacing: "0.14em";
923
- };
924
- readonly display: {
925
- readonly size: "5.6rem";
926
- readonly lineHeight: "1.05";
927
- readonly weight: "600";
928
- readonly letterSpacing: "-0.01em";
929
- };
930
- readonly h1: {
931
- readonly size: "2.9rem";
932
- readonly lineHeight: "1.05";
933
- readonly weight: "600";
934
- readonly letterSpacing: "-0.01em";
935
- };
936
- readonly h2: {
937
- readonly size: "2.1rem";
938
- readonly lineHeight: "1.2";
939
- readonly weight: "600";
940
- readonly letterSpacing: "0";
941
- };
942
- readonly h3: {
943
- readonly size: "1.563rem";
944
- readonly lineHeight: "1.2";
945
- readonly weight: "500";
946
- readonly letterSpacing: "0";
947
- };
948
- readonly h4: {
949
- readonly size: "1.25rem";
950
- readonly lineHeight: "1.2";
951
- readonly weight: "600";
952
- readonly letterSpacing: "0";
953
- };
954
- readonly body: {
955
- readonly size: "1rem";
956
- readonly lineHeight: "1.7";
957
- readonly weight: "400";
958
- readonly letterSpacing: "0";
959
- };
960
- readonly lead: {
961
- readonly size: "1.25rem";
962
- readonly lineHeight: "1.7";
963
- readonly weight: "400";
964
- readonly letterSpacing: "0";
965
- };
966
- readonly small: {
967
- readonly size: "0.95rem";
968
- readonly lineHeight: "1.5";
969
- readonly weight: "400";
970
- readonly letterSpacing: "0";
971
- };
972
- readonly caption: {
973
- readonly size: "0.833rem";
974
- readonly lineHeight: "1.5";
975
- readonly weight: "400";
976
- readonly letterSpacing: "0.04em";
977
- };
978
- };
979
- space: {
980
- readonly s0: "0";
981
- readonly s1: "0.25rem";
982
- readonly s2: "0.5rem";
983
- readonly s3: "0.75rem";
984
- readonly s4: "1rem";
985
- readonly s5: "1.5rem";
986
- readonly s6: "2rem";
987
- readonly s7: "3rem";
988
- readonly s8: "4rem";
989
- readonly s9: "6rem";
990
- };
991
- radius: {
992
- readonly none: "0px";
993
- readonly sm: "3px";
994
- readonly md: "5px";
995
- readonly lg: "8px";
996
- readonly base: "4px";
997
- readonly full: "999px";
998
- };
999
- border: {
1000
- readonly hair: "1px";
1001
- readonly rule: "1.5px";
1002
- readonly heavy: "2px";
1003
- };
1004
- tracking: {
1005
- readonly tight: "-0.01em";
1006
- readonly normal: "0";
1007
- readonly wide: "0.04em";
1008
- readonly wider: "0.1em";
1009
- readonly widest: "0.14em";
1010
- };
1011
- weight: {
1012
- readonly light: "300";
1013
- readonly regular: "400";
1014
- readonly medium: "500";
1015
- readonly semibold: "600";
1016
- readonly bold: "700";
1017
- };
1018
- dur: {
1019
- readonly fast: "120ms";
1020
- readonly base: "200ms";
1021
- readonly slow: "360ms";
1022
- };
1023
- ease: {
1024
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
1025
- };
1026
- shadow: {
1027
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
1028
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
1029
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
1030
- };
1031
- };
1032
- contrast: {
1033
- color: {
1034
- bg1: string;
1035
- bg2: string;
1036
- bg3: string;
1037
- bgInset: string;
1038
- fg1: string;
1039
- fg2: string;
1040
- fg3: string;
1041
- fgOnAccent: string;
1042
- border1: string;
1043
- border2: string;
1044
- borderStrong: string;
1045
- accent: string;
1046
- accentHover: string;
1047
- accentSoft: string;
1048
- ok: string;
1049
- warn: string;
1050
- danger: string;
1051
- dangerHover: string;
1052
- dangerSoft: string;
1053
- info: string;
1054
- focus: string;
1055
- scrim: string;
1056
- };
1057
- font: {
1058
- readonly display: "'DM Serif Display', 'Times New Roman', serif";
1059
- readonly text: "'Newsreader', Georgia, serif";
1060
- readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
1061
- readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
1062
- };
1063
- text: {
1064
- readonly eyebrow: {
1065
- readonly size: "0.694rem";
1066
- readonly lineHeight: "1.2";
1067
- readonly weight: "500";
1068
- readonly letterSpacing: "0.14em";
1069
- };
1070
- readonly display: {
1071
- readonly size: "5.6rem";
1072
- readonly lineHeight: "1.05";
1073
- readonly weight: "600";
1074
- readonly letterSpacing: "-0.01em";
1075
- };
1076
- readonly h1: {
1077
- readonly size: "2.9rem";
1078
- readonly lineHeight: "1.05";
1079
- readonly weight: "600";
1080
- readonly letterSpacing: "-0.01em";
1081
- };
1082
- readonly h2: {
1083
- readonly size: "2.1rem";
1084
- readonly lineHeight: "1.2";
1085
- readonly weight: "600";
1086
- readonly letterSpacing: "0";
1087
- };
1088
- readonly h3: {
1089
- readonly size: "1.563rem";
1090
- readonly lineHeight: "1.2";
1091
- readonly weight: "500";
1092
- readonly letterSpacing: "0";
1093
- };
1094
- readonly h4: {
1095
- readonly size: "1.25rem";
1096
- readonly lineHeight: "1.2";
1097
- readonly weight: "600";
1098
- readonly letterSpacing: "0";
1099
- };
1100
- readonly body: {
1101
- readonly size: "1rem";
1102
- readonly lineHeight: "1.7";
1103
- readonly weight: "400";
1104
- readonly letterSpacing: "0";
1105
- };
1106
- readonly lead: {
1107
- readonly size: "1.25rem";
1108
- readonly lineHeight: "1.7";
1109
- readonly weight: "400";
1110
- readonly letterSpacing: "0";
1111
- };
1112
- readonly small: {
1113
- readonly size: "0.95rem";
1114
- readonly lineHeight: "1.5";
1115
- readonly weight: "400";
1116
- readonly letterSpacing: "0";
1117
- };
1118
- readonly caption: {
1119
- readonly size: "0.833rem";
1120
- readonly lineHeight: "1.5";
1121
- readonly weight: "400";
1122
- readonly letterSpacing: "0.04em";
1123
- };
1124
- };
1125
- space: {
1126
- readonly s0: "0";
1127
- readonly s1: "0.25rem";
1128
- readonly s2: "0.5rem";
1129
- readonly s3: "0.75rem";
1130
- readonly s4: "1rem";
1131
- readonly s5: "1.5rem";
1132
- readonly s6: "2rem";
1133
- readonly s7: "3rem";
1134
- readonly s8: "4rem";
1135
- readonly s9: "6rem";
1136
- };
1137
- radius: {
1138
- readonly none: "0px";
1139
- readonly sm: "3px";
1140
- readonly md: "5px";
1141
- readonly lg: "8px";
1142
- readonly base: "4px";
1143
- readonly full: "999px";
1144
- };
1145
- border: {
1146
- readonly hair: "1px";
1147
- readonly rule: "1.5px";
1148
- readonly heavy: "2px";
1149
- };
1150
- tracking: {
1151
- readonly tight: "-0.01em";
1152
- readonly normal: "0";
1153
- readonly wide: "0.04em";
1154
- readonly wider: "0.1em";
1155
- readonly widest: "0.14em";
1156
- };
1157
- weight: {
1158
- readonly light: "300";
1159
- readonly regular: "400";
1160
- readonly medium: "500";
1161
- readonly semibold: "600";
1162
- readonly bold: "700";
1163
- };
1164
- dur: {
1165
- readonly fast: "120ms";
1166
- readonly base: "200ms";
1167
- readonly slow: "360ms";
1168
- };
1169
- ease: {
1170
- readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
1171
- };
1172
- shadow: {
1173
- readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
1174
- readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
1175
- readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
1176
- };
1177
- };
1178
- };
1179
-
1180
634
  type SchemaName = keyof typeof schemas;
1181
- type Mode = "light" | "dark" | "sepia" | "contrast";
1182
- type ColorTokens = typeof tintaSchema.light.color;
1183
- /** El usuario puede fijar un modo concreto o "system" (seguir las preferencias del SO). */
1184
- type ModePreference = Mode | "system";
1185
- declare const schemaNames: readonly SchemaName[];
1186
- declare const modeNames: readonly Mode[];
635
+ declare const schemaNames: SchemaName[];
1187
636
 
1188
637
  declare const colorVars: {
1189
638
  bg1: `var(--${string})`;
@@ -1200,11 +649,13 @@ declare const colorVars: {
1200
649
  accent: `var(--${string})`;
1201
650
  accentHover: `var(--${string})`;
1202
651
  accentSoft: `var(--${string})`;
652
+ accentText: `var(--${string})`;
1203
653
  ok: `var(--${string})`;
1204
654
  warn: `var(--${string})`;
1205
655
  danger: `var(--${string})`;
1206
656
  dangerHover: `var(--${string})`;
1207
657
  dangerSoft: `var(--${string})`;
658
+ dangerText: `var(--${string})`;
1208
659
  info: `var(--${string})`;
1209
660
  focus: `var(--${string})`;
1210
661
  scrim: `var(--${string})`;
@@ -1225,11 +676,13 @@ declare const vars: {
1225
676
  accent: `var(--${string})`;
1226
677
  accentHover: `var(--${string})`;
1227
678
  accentSoft: `var(--${string})`;
679
+ accentText: `var(--${string})`;
1228
680
  ok: `var(--${string})`;
1229
681
  warn: `var(--${string})`;
1230
682
  danger: `var(--${string})`;
1231
683
  dangerHover: `var(--${string})`;
1232
684
  dangerSoft: `var(--${string})`;
685
+ dangerText: `var(--${string})`;
1233
686
  info: `var(--${string})`;
1234
687
  focus: `var(--${string})`;
1235
688
  scrim: `var(--${string})`;
@@ -1375,8 +828,8 @@ declare const sprinkles: ((props: {
1375
828
  gap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1376
829
  rowGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1377
830
  columnGap?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1378
- background?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
1379
- color?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
831
+ background?: keyof ColorTokens | undefined;
832
+ color?: keyof ColorTokens | undefined;
1380
833
  borderRadius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1381
834
  display?: "none" | "flex" | "grid" | "block" | "inline-block" | "inline-flex" | undefined;
1382
835
  flexDirection?: "column" | "column-reverse" | "row" | "row-reverse" | undefined;
@@ -1397,7 +850,7 @@ declare const sprinkles: ((props: {
1397
850
  mr?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1398
851
  mb?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1399
852
  ml?: "s0" | "s1" | "s2" | "s3" | "s4" | "s5" | "s6" | "s7" | "s8" | "s9" | undefined;
1400
- bg?: "bg1" | "bg2" | "bg3" | "bgInset" | "fg1" | "fg2" | "fg3" | "fgOnAccent" | "border1" | "border2" | "borderStrong" | "accent" | "accentHover" | "accentSoft" | "ok" | "warn" | "danger" | "dangerHover" | "dangerSoft" | "info" | "focus" | "scrim" | undefined;
853
+ bg?: keyof ColorTokens | undefined;
1401
854
  radius?: "none" | "sm" | "md" | "lg" | "base" | "full" | undefined;
1402
855
  }) => string) & {
1403
856
  properties: Set<"display" | "radius" | "alignItems" | "color" | "columnGap" | "flexDirection" | "flexWrap" | "justifyContent" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "rowGap" | "background" | "borderRadius" | "gap" | "padding" | "p" | "px" | "py" | "pt" | "pr" | "pb" | "pl" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml" | "bg">;
@@ -1503,6 +956,7 @@ interface ChipProps extends Omit<HTMLAttributes<HTMLSpanElement>, "className"> {
1503
956
  selected?: boolean;
1504
957
  tone?: ChipTone;
1505
958
  onDelete?: () => void;
959
+ startIcon?: Icon;
1506
960
  /** Segmento de contexto para el data-testid. */
1507
961
  testId?: string;
1508
962
  }
@@ -1729,6 +1183,7 @@ declare const Stepper: react.ForwardRefExoticComponent<StepperProps & react.RefA
1729
1183
  interface TabItem {
1730
1184
  value: string;
1731
1185
  label: ReactNode;
1186
+ icon?: Icon;
1732
1187
  /** Contenido del panel asociado. Si algún item lo define, Tabs renderiza los tabpanel cableados. */
1733
1188
  content?: ReactNode;
1734
1189
  }
@@ -1746,6 +1201,7 @@ interface MenuItemDef {
1746
1201
  label: ReactNode;
1747
1202
  onClick?: () => void;
1748
1203
  danger?: boolean;
1204
+ icon?: Icon;
1749
1205
  }
1750
1206
  interface MenuProps {
1751
1207
  trigger: ReactElement;