@serendie/ui 2.5.0 → 2.5.1-dev.202602170627

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 (52) hide show
  1. package/README.md +63 -8
  2. package/dist/client.js +135 -119
  3. package/dist/components/Avatar/Avatar.js +3 -3
  4. package/dist/components/Badge/Badge.d.ts +6 -6
  5. package/dist/components/Badge/Badge.js +21 -21
  6. package/dist/components/Banner/Banner.d.ts +1 -4
  7. package/dist/components/Banner/Banner.js +8 -11
  8. package/dist/components/Button/Button.d.ts +0 -2
  9. package/dist/components/Button/Button.js +10 -11
  10. package/dist/components/CheckBox/CheckBox.js +4 -4
  11. package/dist/components/DatePicker/styles.js +1 -1
  12. package/dist/components/Divider/Divider.d.ts +2 -2
  13. package/dist/components/Divider/Divider.js +11 -11
  14. package/dist/components/Drawer/Drawer.js +3 -3
  15. package/dist/components/DropdownMenu/DropdownMenu.js +5 -5
  16. package/dist/components/IconButton/IconButton.d.ts +0 -1
  17. package/dist/components/IconButton/IconButton.js +0 -1
  18. package/dist/components/ModalDialog/ModalDialog.js +1 -1
  19. package/dist/components/ProgressIndicator/ProgressIndicator.js +9 -9
  20. package/dist/components/Search/Search.js +5 -5
  21. package/dist/components/Select/Select.js +14 -14
  22. package/dist/components/Switch/Switch.js +5 -5
  23. package/dist/components/TextField/TextField.js +52 -48
  24. package/dist/components/Toast/Toast.d.ts +3 -5
  25. package/dist/components/Toast/Toast.js +8 -10
  26. package/dist/i18n/index.d.ts +1 -1
  27. package/dist/i18n/provider.d.ts +29 -4
  28. package/dist/i18n/provider.js +31 -11
  29. package/dist/index.d.ts +2 -0
  30. package/dist/index.js +135 -119
  31. package/dist/node_modules/@serendie/design-token/dist/panda-tokens.js +310 -0
  32. package/dist/node_modules/@serendie/design-token/dist/tokens.js +126 -0
  33. package/dist/preset.d.ts +0 -930
  34. package/dist/styled-system/css/conditions.js +1 -1
  35. package/dist/styled-system/jsx/is-valid-prop.js +1 -1
  36. package/dist/styles.css +1 -1
  37. package/dist/theme/ThemeContext.d.ts +55 -0
  38. package/dist/theme/ThemeContext.js +15 -0
  39. package/dist/theme/index.d.ts +3 -0
  40. package/dist/theme/index.js +11 -0
  41. package/dist/theme/initColorScheme.d.ts +74 -0
  42. package/dist/theme/initColorScheme.js +32 -0
  43. package/dist/theme/useSystemColorScheme.d.ts +15 -0
  44. package/dist/theme/useSystemColorScheme.js +19 -0
  45. package/dist/tokens/getToken.d.ts +0 -378
  46. package/dist/tokens/index.d.ts +0 -930
  47. package/package.json +2 -2
  48. package/styled-system/css/conditions.js +1 -1
  49. package/styled-system/jsx/is-valid-prop.js +1 -1
  50. package/styled-system/themes/index.d.ts +6 -1
  51. package/styled-system/themes/theme-konjo-dark.json +5 -0
  52. package/styled-system/types/conditions.d.ts +2 -0
package/dist/preset.d.ts CHANGED
@@ -309,936 +309,6 @@ declare const themes: {
309
309
  };
310
310
  };
311
311
  };
312
- kurikawa: {
313
- tokens: {
314
- colors: {
315
- sd: {
316
- system: {
317
- color: {
318
- impression: {
319
- primary: {
320
- value: string;
321
- };
322
- onPrimary: {
323
- value: string;
324
- };
325
- primaryContainer: {
326
- value: string;
327
- };
328
- onPrimaryContainer: {
329
- value: string;
330
- };
331
- secondary: {
332
- value: string;
333
- };
334
- onSecondary: {
335
- value: string;
336
- };
337
- secondaryContainer: {
338
- value: string;
339
- };
340
- onSecondaryContainer: {
341
- value: string;
342
- };
343
- tertiary: {
344
- value: string;
345
- };
346
- onTertiary: {
347
- value: string;
348
- };
349
- tertiaryContainer: {
350
- value: string;
351
- };
352
- onTertiaryContainer: {
353
- value: string;
354
- };
355
- notice: {
356
- value: string;
357
- };
358
- onNotice: {
359
- value: string;
360
- };
361
- noticeContainer: {
362
- value: string;
363
- };
364
- onNoticeContainer: {
365
- value: string;
366
- };
367
- noticeContainerVariant: {
368
- value: string;
369
- };
370
- onNoticeContainerVariant: {
371
- value: string;
372
- };
373
- negative: {
374
- value: string;
375
- };
376
- onNegative: {
377
- value: string;
378
- };
379
- negativeContainer: {
380
- value: string;
381
- };
382
- onNegativeContainer: {
383
- value: string;
384
- };
385
- negativeContainerVariant: {
386
- value: string;
387
- };
388
- onNegativeContainerVariant: {
389
- value: string;
390
- };
391
- positive: {
392
- value: string;
393
- };
394
- onPositive: {
395
- value: string;
396
- };
397
- positiveContainer: {
398
- value: string;
399
- };
400
- onPositiveContainer: {
401
- value: string;
402
- };
403
- positiveContainerVariant: {
404
- value: string;
405
- };
406
- onPositiveContainerVariant: {
407
- value: string;
408
- };
409
- };
410
- component: {
411
- surface: {
412
- value: string;
413
- };
414
- onSurface: {
415
- value: string;
416
- };
417
- onSurfaceVariant: {
418
- value: string;
419
- };
420
- inverseSurface: {
421
- value: string;
422
- };
423
- inverseOnSurface: {
424
- value: string;
425
- };
426
- inversePrimary: {
427
- value: string;
428
- };
429
- outlineBright: {
430
- value: string;
431
- };
432
- outline: {
433
- value: string;
434
- };
435
- outlineDim: {
436
- value: string;
437
- };
438
- scrim: {
439
- value: string;
440
- };
441
- surfaceDim: {
442
- value: string;
443
- };
444
- surfaceBright: {
445
- value: string;
446
- };
447
- surfaceContainerBright: {
448
- value: string;
449
- };
450
- surfaceContainer: {
451
- value: string;
452
- };
453
- surfaceContainerDim: {
454
- value: string;
455
- };
456
- };
457
- interaction: {
458
- disabled: {
459
- value: string;
460
- };
461
- disabledOnSurface: {
462
- value: string;
463
- };
464
- selected: {
465
- value: string;
466
- };
467
- selectedSurface: {
468
- value: string;
469
- };
470
- hovered: {
471
- value: string;
472
- };
473
- hoveredVariant: {
474
- value: string;
475
- };
476
- hoveredOnPrimary: {
477
- value: string;
478
- };
479
- };
480
- chart: {
481
- mark: {
482
- primary: {
483
- "01": {
484
- value: string;
485
- };
486
- "02": {
487
- value: string;
488
- };
489
- "03": {
490
- value: string;
491
- };
492
- "04": {
493
- value: string;
494
- };
495
- "05": {
496
- value: string;
497
- };
498
- "06": {
499
- value: string;
500
- };
501
- };
502
- positive: {
503
- "01": {
504
- value: string;
505
- };
506
- "02": {
507
- value: string;
508
- };
509
- "03": {
510
- value: string;
511
- };
512
- "04": {
513
- value: string;
514
- };
515
- "05": {
516
- value: string;
517
- };
518
- "06": {
519
- value: string;
520
- };
521
- };
522
- negative: {
523
- "01": {
524
- value: string;
525
- };
526
- "02": {
527
- value: string;
528
- };
529
- "03": {
530
- value: string;
531
- };
532
- "04": {
533
- value: string;
534
- };
535
- "05": {
536
- value: string;
537
- };
538
- "06": {
539
- value: string;
540
- };
541
- };
542
- notice: {
543
- "01": {
544
- value: string;
545
- };
546
- "02": {
547
- value: string;
548
- };
549
- "03": {
550
- value: string;
551
- };
552
- "04": {
553
- value: string;
554
- };
555
- "05": {
556
- value: string;
557
- };
558
- "06": {
559
- value: string;
560
- };
561
- };
562
- multi: {
563
- 10: {
564
- value: string;
565
- };
566
- "01": {
567
- value: string;
568
- };
569
- "02": {
570
- value: string;
571
- };
572
- "03": {
573
- value: string;
574
- };
575
- "04": {
576
- value: string;
577
- };
578
- "05": {
579
- value: string;
580
- };
581
- "06": {
582
- value: string;
583
- };
584
- "07": {
585
- value: string;
586
- };
587
- "08": {
588
- value: string;
589
- };
590
- "09": {
591
- value: string;
592
- };
593
- };
594
- };
595
- component: {
596
- onMarkLabel: {
597
- value: string;
598
- };
599
- inverseOnMarkLabel: {
600
- value: string;
601
- };
602
- scalemark: {
603
- value: string;
604
- };
605
- threshold: {
606
- value: string;
607
- };
608
- chartSurface: {
609
- value: string;
610
- };
611
- onChartSurface: {
612
- value: string;
613
- };
614
- };
615
- };
616
- };
617
- };
618
- };
619
- };
620
- };
621
- };
622
- sumire: {
623
- tokens: {
624
- colors: {
625
- sd: {
626
- system: {
627
- color: {
628
- impression: {
629
- primary: {
630
- value: string;
631
- };
632
- onPrimary: {
633
- value: string;
634
- };
635
- primaryContainer: {
636
- value: string;
637
- };
638
- onPrimaryContainer: {
639
- value: string;
640
- };
641
- secondary: {
642
- value: string;
643
- };
644
- onSecondary: {
645
- value: string;
646
- };
647
- secondaryContainer: {
648
- value: string;
649
- };
650
- onSecondaryContainer: {
651
- value: string;
652
- };
653
- tertiary: {
654
- value: string;
655
- };
656
- onTertiary: {
657
- value: string;
658
- };
659
- tertiaryContainer: {
660
- value: string;
661
- };
662
- onTertiaryContainer: {
663
- value: string;
664
- };
665
- notice: {
666
- value: string;
667
- };
668
- onNotice: {
669
- value: string;
670
- };
671
- noticeContainer: {
672
- value: string;
673
- };
674
- onNoticeContainer: {
675
- value: string;
676
- };
677
- noticeContainerVariant: {
678
- value: string;
679
- };
680
- onNoticeContainerVariant: {
681
- value: string;
682
- };
683
- negative: {
684
- value: string;
685
- };
686
- onNegative: {
687
- value: string;
688
- };
689
- negativeContainer: {
690
- value: string;
691
- };
692
- onNegativeContainer: {
693
- value: string;
694
- };
695
- negativeContainerVariant: {
696
- value: string;
697
- };
698
- onNegativeContainerVariant: {
699
- value: string;
700
- };
701
- positive: {
702
- value: string;
703
- };
704
- onPositive: {
705
- value: string;
706
- };
707
- positiveContainer: {
708
- value: string;
709
- };
710
- onPositiveContainer: {
711
- value: string;
712
- };
713
- positiveContainerVariant: {
714
- value: string;
715
- };
716
- onPositiveContainerVariant: {
717
- value: string;
718
- };
719
- };
720
- component: {
721
- surface: {
722
- value: string;
723
- };
724
- onSurface: {
725
- value: string;
726
- };
727
- onSurfaceVariant: {
728
- value: string;
729
- };
730
- inverseSurface: {
731
- value: string;
732
- };
733
- inverseOnSurface: {
734
- value: string;
735
- };
736
- inversePrimary: {
737
- value: string;
738
- };
739
- outlineBright: {
740
- value: string;
741
- };
742
- outline: {
743
- value: string;
744
- };
745
- outlineDim: {
746
- value: string;
747
- };
748
- scrim: {
749
- value: string;
750
- };
751
- surfaceDim: {
752
- value: string;
753
- };
754
- surfaceBright: {
755
- value: string;
756
- };
757
- surfaceContainerBright: {
758
- value: string;
759
- };
760
- surfaceContainer: {
761
- value: string;
762
- };
763
- surfaceContainerDim: {
764
- value: string;
765
- };
766
- };
767
- interaction: {
768
- disabled: {
769
- value: string;
770
- };
771
- disabledOnSurface: {
772
- value: string;
773
- };
774
- selected: {
775
- value: string;
776
- };
777
- selectedSurface: {
778
- value: string;
779
- };
780
- hovered: {
781
- value: string;
782
- };
783
- hoveredVariant: {
784
- value: string;
785
- };
786
- hoveredOnPrimary: {
787
- value: string;
788
- };
789
- };
790
- chart: {
791
- mark: {
792
- primary: {
793
- "01": {
794
- value: string;
795
- };
796
- "02": {
797
- value: string;
798
- };
799
- "03": {
800
- value: string;
801
- };
802
- "04": {
803
- value: string;
804
- };
805
- "05": {
806
- value: string;
807
- };
808
- "06": {
809
- value: string;
810
- };
811
- };
812
- positive: {
813
- "01": {
814
- value: string;
815
- };
816
- "02": {
817
- value: string;
818
- };
819
- "03": {
820
- value: string;
821
- };
822
- "04": {
823
- value: string;
824
- };
825
- "05": {
826
- value: string;
827
- };
828
- "06": {
829
- value: string;
830
- };
831
- };
832
- negative: {
833
- "01": {
834
- value: string;
835
- };
836
- "02": {
837
- value: string;
838
- };
839
- "03": {
840
- value: string;
841
- };
842
- "04": {
843
- value: string;
844
- };
845
- "05": {
846
- value: string;
847
- };
848
- "06": {
849
- value: string;
850
- };
851
- };
852
- notice: {
853
- "01": {
854
- value: string;
855
- };
856
- "02": {
857
- value: string;
858
- };
859
- "03": {
860
- value: string;
861
- };
862
- "04": {
863
- value: string;
864
- };
865
- "05": {
866
- value: string;
867
- };
868
- "06": {
869
- value: string;
870
- };
871
- };
872
- multi: {
873
- 10: {
874
- value: string;
875
- };
876
- "01": {
877
- value: string;
878
- };
879
- "02": {
880
- value: string;
881
- };
882
- "03": {
883
- value: string;
884
- };
885
- "04": {
886
- value: string;
887
- };
888
- "05": {
889
- value: string;
890
- };
891
- "06": {
892
- value: string;
893
- };
894
- "07": {
895
- value: string;
896
- };
897
- "08": {
898
- value: string;
899
- };
900
- "09": {
901
- value: string;
902
- };
903
- };
904
- };
905
- component: {
906
- onMarkLabel: {
907
- value: string;
908
- };
909
- inverseOnMarkLabel: {
910
- value: string;
911
- };
912
- scalemark: {
913
- value: string;
914
- };
915
- threshold: {
916
- value: string;
917
- };
918
- chartSurface: {
919
- value: string;
920
- };
921
- onChartSurface: {
922
- value: string;
923
- };
924
- };
925
- };
926
- };
927
- };
928
- };
929
- };
930
- };
931
- };
932
- tsutsuji: {
933
- tokens: {
934
- colors: {
935
- sd: {
936
- system: {
937
- color: {
938
- impression: {
939
- primary: {
940
- value: string;
941
- };
942
- onPrimary: {
943
- value: string;
944
- };
945
- primaryContainer: {
946
- value: string;
947
- };
948
- onPrimaryContainer: {
949
- value: string;
950
- };
951
- secondary: {
952
- value: string;
953
- };
954
- onSecondary: {
955
- value: string;
956
- };
957
- secondaryContainer: {
958
- value: string;
959
- };
960
- onSecondaryContainer: {
961
- value: string;
962
- };
963
- tertiary: {
964
- value: string;
965
- };
966
- onTertiary: {
967
- value: string;
968
- };
969
- tertiaryContainer: {
970
- value: string;
971
- };
972
- onTertiaryContainer: {
973
- value: string;
974
- };
975
- notice: {
976
- value: string;
977
- };
978
- onNotice: {
979
- value: string;
980
- };
981
- noticeContainer: {
982
- value: string;
983
- };
984
- onNoticeContainer: {
985
- value: string;
986
- };
987
- noticeContainerVariant: {
988
- value: string;
989
- };
990
- onNoticeContainerVariant: {
991
- value: string;
992
- };
993
- negative: {
994
- value: string;
995
- };
996
- onNegative: {
997
- value: string;
998
- };
999
- negativeContainer: {
1000
- value: string;
1001
- };
1002
- onNegativeContainer: {
1003
- value: string;
1004
- };
1005
- negativeContainerVariant: {
1006
- value: string;
1007
- };
1008
- onNegativeContainerVariant: {
1009
- value: string;
1010
- };
1011
- positive: {
1012
- value: string;
1013
- };
1014
- onPositive: {
1015
- value: string;
1016
- };
1017
- positiveContainer: {
1018
- value: string;
1019
- };
1020
- onPositiveContainer: {
1021
- value: string;
1022
- };
1023
- positiveContainerVariant: {
1024
- value: string;
1025
- };
1026
- onPositiveContainerVariant: {
1027
- value: string;
1028
- };
1029
- };
1030
- component: {
1031
- surface: {
1032
- value: string;
1033
- };
1034
- onSurface: {
1035
- value: string;
1036
- };
1037
- onSurfaceVariant: {
1038
- value: string;
1039
- };
1040
- inverseSurface: {
1041
- value: string;
1042
- };
1043
- inverseOnSurface: {
1044
- value: string;
1045
- };
1046
- inversePrimary: {
1047
- value: string;
1048
- };
1049
- outlineBright: {
1050
- value: string;
1051
- };
1052
- outline: {
1053
- value: string;
1054
- };
1055
- outlineDim: {
1056
- value: string;
1057
- };
1058
- scrim: {
1059
- value: string;
1060
- };
1061
- surfaceDim: {
1062
- value: string;
1063
- };
1064
- surfaceBright: {
1065
- value: string;
1066
- };
1067
- surfaceContainerBright: {
1068
- value: string;
1069
- };
1070
- surfaceContainer: {
1071
- value: string;
1072
- };
1073
- surfaceContainerDim: {
1074
- value: string;
1075
- };
1076
- };
1077
- interaction: {
1078
- disabled: {
1079
- value: string;
1080
- };
1081
- disabledOnSurface: {
1082
- value: string;
1083
- };
1084
- selected: {
1085
- value: string;
1086
- };
1087
- selectedSurface: {
1088
- value: string;
1089
- };
1090
- hovered: {
1091
- value: string;
1092
- };
1093
- hoveredVariant: {
1094
- value: string;
1095
- };
1096
- hoveredOnPrimary: {
1097
- value: string;
1098
- };
1099
- };
1100
- chart: {
1101
- mark: {
1102
- primary: {
1103
- "01": {
1104
- value: string;
1105
- };
1106
- "02": {
1107
- value: string;
1108
- };
1109
- "03": {
1110
- value: string;
1111
- };
1112
- "04": {
1113
- value: string;
1114
- };
1115
- "05": {
1116
- value: string;
1117
- };
1118
- "06": {
1119
- value: string;
1120
- };
1121
- };
1122
- positive: {
1123
- "01": {
1124
- value: string;
1125
- };
1126
- "02": {
1127
- value: string;
1128
- };
1129
- "03": {
1130
- value: string;
1131
- };
1132
- "04": {
1133
- value: string;
1134
- };
1135
- "05": {
1136
- value: string;
1137
- };
1138
- "06": {
1139
- value: string;
1140
- };
1141
- };
1142
- negative: {
1143
- "01": {
1144
- value: string;
1145
- };
1146
- "02": {
1147
- value: string;
1148
- };
1149
- "03": {
1150
- value: string;
1151
- };
1152
- "04": {
1153
- value: string;
1154
- };
1155
- "05": {
1156
- value: string;
1157
- };
1158
- "06": {
1159
- value: string;
1160
- };
1161
- };
1162
- notice: {
1163
- "01": {
1164
- value: string;
1165
- };
1166
- "02": {
1167
- value: string;
1168
- };
1169
- "03": {
1170
- value: string;
1171
- };
1172
- "04": {
1173
- value: string;
1174
- };
1175
- "05": {
1176
- value: string;
1177
- };
1178
- "06": {
1179
- value: string;
1180
- };
1181
- };
1182
- multi: {
1183
- 10: {
1184
- value: string;
1185
- };
1186
- "01": {
1187
- value: string;
1188
- };
1189
- "02": {
1190
- value: string;
1191
- };
1192
- "03": {
1193
- value: string;
1194
- };
1195
- "04": {
1196
- value: string;
1197
- };
1198
- "05": {
1199
- value: string;
1200
- };
1201
- "06": {
1202
- value: string;
1203
- };
1204
- "07": {
1205
- value: string;
1206
- };
1207
- "08": {
1208
- value: string;
1209
- };
1210
- "09": {
1211
- value: string;
1212
- };
1213
- };
1214
- };
1215
- component: {
1216
- onMarkLabel: {
1217
- value: string;
1218
- };
1219
- inverseOnMarkLabel: {
1220
- value: string;
1221
- };
1222
- scalemark: {
1223
- value: string;
1224
- };
1225
- threshold: {
1226
- value: string;
1227
- };
1228
- chartSurface: {
1229
- value: string;
1230
- };
1231
- onChartSurface: {
1232
- value: string;
1233
- };
1234
- };
1235
- };
1236
- };
1237
- };
1238
- };
1239
- };
1240
- };
1241
- };
1242
312
  };
1243
313
  export { themes };
1244
314
  export declare const themeNames: string[];