@soba-so/react 0.0.24 → 0.0.26
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +297 -8
- package/dist/styles.css +289 -0
- package/package.json +9 -8
package/dist/styles.css
CHANGED
|
@@ -491,6 +491,29 @@ a.sc-btn {
|
|
|
491
491
|
.sc-rrow + .sc-rrow {
|
|
492
492
|
box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
|
|
493
493
|
}
|
|
494
|
+
|
|
495
|
+
.sc-rgo {
|
|
496
|
+
display: flex;
|
|
497
|
+
flex: 1;
|
|
498
|
+
min-width: 0;
|
|
499
|
+
align-items: center;
|
|
500
|
+
gap: calc(14px * var(--sc-scale, 1));
|
|
501
|
+
margin: calc(-8px * var(--sc-scale, 1)) 0;
|
|
502
|
+
padding: calc(8px * var(--sc-scale, 1)) 0;
|
|
503
|
+
border: 0;
|
|
504
|
+
background: transparent;
|
|
505
|
+
font: inherit;
|
|
506
|
+
color: inherit;
|
|
507
|
+
text-align: left;
|
|
508
|
+
cursor: pointer;
|
|
509
|
+
}
|
|
510
|
+
.sc-rgo .sc-chev {
|
|
511
|
+
margin-left: calc(2px * var(--sc-scale, 1));
|
|
512
|
+
opacity: 0.75;
|
|
513
|
+
}
|
|
514
|
+
.sc-rgo:hover .sc-chev {
|
|
515
|
+
opacity: 1;
|
|
516
|
+
}
|
|
494
517
|
.sc-rdot {
|
|
495
518
|
flex: none;
|
|
496
519
|
width: calc(10px * var(--sc-scale, 1));
|
|
@@ -858,6 +881,272 @@ a.sc-btn {
|
|
|
858
881
|
text-align: center;
|
|
859
882
|
}
|
|
860
883
|
|
|
884
|
+
.sc-screen-head {
|
|
885
|
+
display: flex;
|
|
886
|
+
align-items: center;
|
|
887
|
+
gap: calc(12px * var(--sc-scale, 1));
|
|
888
|
+
}
|
|
889
|
+
|
|
890
|
+
.sc-back {
|
|
891
|
+
flex: none;
|
|
892
|
+
display: grid;
|
|
893
|
+
place-items: center;
|
|
894
|
+
width: calc(36px * var(--sc-scale, 1));
|
|
895
|
+
height: calc(36px * var(--sc-scale, 1));
|
|
896
|
+
padding: 0;
|
|
897
|
+
border: 0;
|
|
898
|
+
border-radius: 50%;
|
|
899
|
+
background: var(--sc-tray-card, #ffffff);
|
|
900
|
+
color: var(--sc-text, #1b1b1a);
|
|
901
|
+
font: inherit;
|
|
902
|
+
cursor: pointer;
|
|
903
|
+
box-shadow: var(--sc-shadow-1);
|
|
904
|
+
transition: background-color 120ms ease;
|
|
905
|
+
}
|
|
906
|
+
.sc-back:hover:not(:disabled) {
|
|
907
|
+
background: var(--sc-tray-sunk, #efefed);
|
|
908
|
+
}
|
|
909
|
+
.sc-back:disabled {
|
|
910
|
+
cursor: default;
|
|
911
|
+
opacity: 0.5;
|
|
912
|
+
}
|
|
913
|
+
.sc-back-glyph {
|
|
914
|
+
width: calc(15px * var(--sc-scale, 1));
|
|
915
|
+
height: calc(15px * var(--sc-scale, 1));
|
|
916
|
+
}
|
|
917
|
+
.sc-screen-title {
|
|
918
|
+
margin: 0;
|
|
919
|
+
font-size: calc(var(--sc-font-size, 15px) * 1.3333);
|
|
920
|
+
font-weight: 600;
|
|
921
|
+
color: var(--sc-text, #1b1b1a);
|
|
922
|
+
}
|
|
923
|
+
|
|
924
|
+
.sc-group-card.sc-mopts {
|
|
925
|
+
padding: 0 calc(16px * var(--sc-scale, 1));
|
|
926
|
+
}
|
|
927
|
+
.sc-mopt {
|
|
928
|
+
display: flex;
|
|
929
|
+
align-items: center;
|
|
930
|
+
gap: calc(14px * var(--sc-scale, 1));
|
|
931
|
+
width: 100%;
|
|
932
|
+
padding: calc(16px * var(--sc-scale, 1)) 0;
|
|
933
|
+
border: 0;
|
|
934
|
+
background: transparent;
|
|
935
|
+
font: inherit;
|
|
936
|
+
color: inherit;
|
|
937
|
+
text-align: left;
|
|
938
|
+
cursor: pointer;
|
|
939
|
+
}
|
|
940
|
+
.sc-mopt + .sc-mopt {
|
|
941
|
+
box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
|
|
942
|
+
}
|
|
943
|
+
.sc-mopt:disabled {
|
|
944
|
+
cursor: default;
|
|
945
|
+
opacity: 0.5;
|
|
946
|
+
}
|
|
947
|
+
.sc-mopt-say {
|
|
948
|
+
display: flex;
|
|
949
|
+
flex: 1;
|
|
950
|
+
min-width: 0;
|
|
951
|
+
flex-direction: column;
|
|
952
|
+
gap: calc(2px * var(--sc-scale, 1));
|
|
953
|
+
}
|
|
954
|
+
.sc-mopt-name {
|
|
955
|
+
|
|
956
|
+
overflow-wrap: anywhere;
|
|
957
|
+
font-size: calc(var(--sc-font-size, 15px) * 1.0667);
|
|
958
|
+
font-weight: 600;
|
|
959
|
+
}
|
|
960
|
+
.sc-mopt-desc {
|
|
961
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
962
|
+
line-height: calc(20px * var(--sc-scale, 1));
|
|
963
|
+
color: var(--sc-muted, #6b6b69);
|
|
964
|
+
}
|
|
965
|
+
|
|
966
|
+
.sc-ring {
|
|
967
|
+
flex: none;
|
|
968
|
+
box-sizing: border-box;
|
|
969
|
+
display: grid;
|
|
970
|
+
place-items: center;
|
|
971
|
+
width: calc(22px * var(--sc-scale, 1));
|
|
972
|
+
height: calc(22px * var(--sc-scale, 1));
|
|
973
|
+
border: 2px solid var(--sc-line-2, #cfcfcb);
|
|
974
|
+
border-radius: 50%;
|
|
975
|
+
color: var(--sc-accent-fg, #ffffff);
|
|
976
|
+
transition:
|
|
977
|
+
background-color 120ms ease,
|
|
978
|
+
border-color 120ms ease;
|
|
979
|
+
}
|
|
980
|
+
.sc-ring-on {
|
|
981
|
+
border-color: var(--sc-accent, #1b1b1a);
|
|
982
|
+
background: var(--sc-accent, #1b1b1a);
|
|
983
|
+
}
|
|
984
|
+
.sc-ring-tick {
|
|
985
|
+
width: calc(13px * var(--sc-scale, 1));
|
|
986
|
+
height: calc(13px * var(--sc-scale, 1));
|
|
987
|
+
}
|
|
988
|
+
|
|
989
|
+
.sc-screen-foot {
|
|
990
|
+
margin: 0;
|
|
991
|
+
padding: 0 calc(4px * var(--sc-scale, 1));
|
|
992
|
+
font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
|
|
993
|
+
line-height: 1.5;
|
|
994
|
+
color: var(--sc-muted, #6b6b69);
|
|
995
|
+
}
|
|
996
|
+
|
|
997
|
+
.sc-screen-from {
|
|
998
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
999
|
+
color: var(--sc-muted, #6b6b69);
|
|
1000
|
+
}
|
|
1001
|
+
|
|
1002
|
+
.sc-rd-head {
|
|
1003
|
+
display: grid;
|
|
1004
|
+
gap: calc(8px * var(--sc-scale, 1));
|
|
1005
|
+
padding: 0 calc(4px * var(--sc-scale, 1));
|
|
1006
|
+
}
|
|
1007
|
+
|
|
1008
|
+
.sc-rd-name {
|
|
1009
|
+
margin: 0;
|
|
1010
|
+
font-size: calc(var(--sc-font-size, 15px) * 1.3333);
|
|
1011
|
+
line-height: 1.25;
|
|
1012
|
+
font-weight: 600;
|
|
1013
|
+
color: var(--sc-text, #1b1b1a);
|
|
1014
|
+
overflow-wrap: anywhere;
|
|
1015
|
+
}
|
|
1016
|
+
.sc-rd-state {
|
|
1017
|
+
display: flex;
|
|
1018
|
+
align-items: center;
|
|
1019
|
+
gap: calc(8px * var(--sc-scale, 1));
|
|
1020
|
+
margin: 0;
|
|
1021
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
1022
|
+
color: var(--sc-text-2, #3f3f46);
|
|
1023
|
+
font-variant-numeric: tabular-nums;
|
|
1024
|
+
}
|
|
1025
|
+
|
|
1026
|
+
.sc-rd-dot {
|
|
1027
|
+
flex: none;
|
|
1028
|
+
width: calc(10px * var(--sc-scale, 1));
|
|
1029
|
+
height: calc(10px * var(--sc-scale, 1));
|
|
1030
|
+
border-radius: 50%;
|
|
1031
|
+
background: var(--sc-line-2, #dcdce0);
|
|
1032
|
+
}
|
|
1033
|
+
.sc-rd-dot-live {
|
|
1034
|
+
background: var(--sc-ok, #1e8e5a);
|
|
1035
|
+
}
|
|
1036
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1037
|
+
.sc-rd-dot-live {
|
|
1038
|
+
animation: sc-breathe 1.6s ease-in-out infinite;
|
|
1039
|
+
}
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
.sc-group-card.sc-rd-facts,
|
|
1043
|
+
.sc-group-card.sc-rd-steps {
|
|
1044
|
+
padding: 0 calc(16px * var(--sc-scale, 1));
|
|
1045
|
+
}
|
|
1046
|
+
.sc-rd-fact {
|
|
1047
|
+
display: flex;
|
|
1048
|
+
align-items: center;
|
|
1049
|
+
gap: calc(10px * var(--sc-scale, 1));
|
|
1050
|
+
margin: 0;
|
|
1051
|
+
padding: calc(14px * var(--sc-scale, 1)) 0;
|
|
1052
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1053
|
+
}
|
|
1054
|
+
.sc-rd-fact + .sc-rd-fact,
|
|
1055
|
+
.sc-rd-step + .sc-rd-step {
|
|
1056
|
+
box-shadow: inset 0 1px 0 var(--sc-line, #e9e9e7);
|
|
1057
|
+
}
|
|
1058
|
+
.sc-rd-key {
|
|
1059
|
+
flex: none;
|
|
1060
|
+
width: calc(74px * var(--sc-scale, 1));
|
|
1061
|
+
color: var(--sc-muted, #6b6b69);
|
|
1062
|
+
}
|
|
1063
|
+
.sc-rd-val {
|
|
1064
|
+
flex: 1;
|
|
1065
|
+
min-width: 0;
|
|
1066
|
+
overflow-wrap: anywhere;
|
|
1067
|
+
}
|
|
1068
|
+
|
|
1069
|
+
.sc-rd-step {
|
|
1070
|
+
display: flex;
|
|
1071
|
+
align-items: center;
|
|
1072
|
+
gap: calc(12px * var(--sc-scale, 1));
|
|
1073
|
+
margin: 0;
|
|
1074
|
+
padding: calc(13px * var(--sc-scale, 1)) 0;
|
|
1075
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1076
|
+
}
|
|
1077
|
+
.sc-rd-mark {
|
|
1078
|
+
flex: none;
|
|
1079
|
+
width: calc(18px * var(--sc-scale, 1));
|
|
1080
|
+
height: calc(18px * var(--sc-scale, 1));
|
|
1081
|
+
color: var(--sc-line-2, #dcdce0);
|
|
1082
|
+
}
|
|
1083
|
+
.sc-rd-mark-done {
|
|
1084
|
+
color: var(--sc-ok, #1e8e5a);
|
|
1085
|
+
}
|
|
1086
|
+
.sc-rd-mark-now {
|
|
1087
|
+
color: var(--sc-text, #1b1b1a);
|
|
1088
|
+
}
|
|
1089
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
1090
|
+
.sc-rd-mark-now {
|
|
1091
|
+
animation: sc-spin 900ms linear infinite;
|
|
1092
|
+
}
|
|
1093
|
+
}
|
|
1094
|
+
|
|
1095
|
+
.sc-rd-say {
|
|
1096
|
+
flex: 1;
|
|
1097
|
+
min-width: 0;
|
|
1098
|
+
overflow-wrap: anywhere;
|
|
1099
|
+
}
|
|
1100
|
+
.sc-rd-wait {
|
|
1101
|
+
color: var(--sc-muted, #6b6b69);
|
|
1102
|
+
}
|
|
1103
|
+
.sc-rd-when {
|
|
1104
|
+
flex: none;
|
|
1105
|
+
font-size: max(12px, calc(var(--sc-font-size, 15px) * 0.8667));
|
|
1106
|
+
color: var(--sc-muted, #6b6b69);
|
|
1107
|
+
font-variant-numeric: tabular-nums;
|
|
1108
|
+
}
|
|
1109
|
+
|
|
1110
|
+
.sc-act-stop {
|
|
1111
|
+
display: flex;
|
|
1112
|
+
align-items: center;
|
|
1113
|
+
justify-content: center;
|
|
1114
|
+
height: calc(48px * var(--sc-scale, 1));
|
|
1115
|
+
border: 0;
|
|
1116
|
+
border-radius: calc(10px * var(--sc-scale, 1));
|
|
1117
|
+
background: var(--sc-tray-card, #ffffff);
|
|
1118
|
+
color: var(--sc-danger, #c2452d);
|
|
1119
|
+
box-shadow:
|
|
1120
|
+
var(--sc-shadow-1),
|
|
1121
|
+
inset 0 0 0 1px color-mix(in srgb, var(--sc-line, #e9e9eb) 70%, transparent);
|
|
1122
|
+
font: inherit;
|
|
1123
|
+
font-size: calc(var(--sc-font-size, 15px) * 1);
|
|
1124
|
+
font-weight: 600;
|
|
1125
|
+
cursor: pointer;
|
|
1126
|
+
transition: background-color 120ms ease;
|
|
1127
|
+
}
|
|
1128
|
+
.sc-act-stop:hover:not(:disabled) {
|
|
1129
|
+
background: color-mix(in srgb, var(--sc-danger, #c2452d) 7%, var(--sc-tray-card, #ffffff));
|
|
1130
|
+
}
|
|
1131
|
+
.sc-act-stop:disabled {
|
|
1132
|
+
cursor: default;
|
|
1133
|
+
color: var(--sc-muted, #6b6b69);
|
|
1134
|
+
}
|
|
1135
|
+
|
|
1136
|
+
.sc-act-quiet {
|
|
1137
|
+
display: grid;
|
|
1138
|
+
place-items: center;
|
|
1139
|
+
height: calc(44px * var(--sc-scale, 1));
|
|
1140
|
+
border-radius: calc(10px * var(--sc-scale, 1));
|
|
1141
|
+
font-size: calc(var(--sc-font-size, 15px) * 0.9333);
|
|
1142
|
+
color: var(--sc-muted, #6b6b69);
|
|
1143
|
+
text-decoration: none;
|
|
1144
|
+
cursor: pointer;
|
|
1145
|
+
}
|
|
1146
|
+
.sc-act-quiet:hover {
|
|
1147
|
+
color: var(--sc-text, #1b1b1a);
|
|
1148
|
+
}
|
|
1149
|
+
|
|
861
1150
|
.sc-arow {
|
|
862
1151
|
display: flex;
|
|
863
1152
|
align-items: center;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@soba-so/react",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.26",
|
|
4
4
|
"description": "Connect the AI your users already pay for, from your own React app.",
|
|
5
5
|
"license": "UNLICENSED",
|
|
6
6
|
"homepage": "https://soba.so/docs/components",
|
|
@@ -19,13 +19,18 @@
|
|
|
19
19
|
"!dist/**/*.map",
|
|
20
20
|
"README.md"
|
|
21
21
|
],
|
|
22
|
+
"scripts": {
|
|
23
|
+
"build": "node ../../scripts/build-react.mjs",
|
|
24
|
+
"typecheck": "tsc -p tsconfig.json",
|
|
25
|
+
"prepublishOnly": "node ../../scripts/build-react.mjs"
|
|
26
|
+
},
|
|
22
27
|
"peerDependencies": {
|
|
23
28
|
"react": ">=18"
|
|
24
29
|
},
|
|
25
30
|
"devDependencies": {
|
|
31
|
+
"@soba-so/connect-ui": "workspace:*",
|
|
26
32
|
"@types/react": "^19.0.0",
|
|
27
|
-
"typescript": "^7.0.2"
|
|
28
|
-
"@soba-so/connect-ui": "0.1.0"
|
|
33
|
+
"typescript": "^7.0.2"
|
|
29
34
|
},
|
|
30
35
|
"engines": {
|
|
31
36
|
"node": ">=22"
|
|
@@ -39,9 +44,5 @@
|
|
|
39
44
|
],
|
|
40
45
|
"publishConfig": {
|
|
41
46
|
"access": "public"
|
|
42
|
-
},
|
|
43
|
-
"scripts": {
|
|
44
|
-
"build": "node ../../scripts/build-react.mjs",
|
|
45
|
-
"typecheck": "tsc -p tsconfig.json"
|
|
46
47
|
}
|
|
47
|
-
}
|
|
48
|
+
}
|