@fab1o978/react-ui 0.1.3 → 0.1.7

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 (39) hide show
  1. package/dist/components/ColorPicker/index.cjs +205 -63
  2. package/dist/components/ColorPicker/index.cjs.map +1 -1
  3. package/dist/components/ColorPicker/index.css +200 -42
  4. package/dist/components/ColorPicker/index.css.map +1 -1
  5. package/dist/components/ColorPicker/index.js +205 -63
  6. package/dist/components/ColorPicker/index.js.map +1 -1
  7. package/dist/components/RichTextEditor/index.cjs +3553 -0
  8. package/dist/components/RichTextEditor/index.cjs.map +1 -0
  9. package/dist/components/RichTextEditor/index.css +356 -0
  10. package/dist/components/RichTextEditor/index.css.map +1 -0
  11. package/dist/components/RichTextEditor/index.d.cts +30 -0
  12. package/dist/components/RichTextEditor/index.d.ts +30 -0
  13. package/dist/components/RichTextEditor/index.js +3538 -0
  14. package/dist/components/RichTextEditor/index.js.map +1 -0
  15. package/dist/components/SliderControl/index.cjs +268 -0
  16. package/dist/components/SliderControl/index.cjs.map +1 -0
  17. package/dist/components/SliderControl/index.css +202 -0
  18. package/dist/components/SliderControl/index.css.map +1 -0
  19. package/dist/components/SliderControl/index.d.cts +21 -0
  20. package/dist/components/SliderControl/index.d.ts +21 -0
  21. package/dist/components/SliderControl/index.js +266 -0
  22. package/dist/components/SliderControl/index.js.map +1 -0
  23. package/dist/components/SlidingCounter/index.cjs +181 -0
  24. package/dist/components/SlidingCounter/index.cjs.map +1 -0
  25. package/dist/components/SlidingCounter/index.css +133 -0
  26. package/dist/components/SlidingCounter/index.css.map +1 -0
  27. package/dist/components/SlidingCounter/index.d.cts +19 -0
  28. package/dist/components/SlidingCounter/index.d.ts +19 -0
  29. package/dist/components/SlidingCounter/index.js +179 -0
  30. package/dist/components/SlidingCounter/index.js.map +1 -0
  31. package/dist/index.cjs +3771 -63
  32. package/dist/index.cjs.map +1 -1
  33. package/dist/index.css +685 -42
  34. package/dist/index.css.map +1 -1
  35. package/dist/index.d.cts +5 -0
  36. package/dist/index.d.ts +5 -0
  37. package/dist/index.js +3760 -65
  38. package/dist/index.js.map +1 -1
  39. package/package.json +8 -1
package/dist/index.css CHANGED
@@ -832,48 +832,6 @@
832
832
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.2);
833
833
  background: transparent;
834
834
  }
835
- .ColorPicker_module_lSlider {
836
- position: relative;
837
- height: 10px;
838
- border-radius: 5px;
839
- cursor: ew-resize;
840
- margin-block: 5px;
841
- background-color: var(--color-neutral-200);
842
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
843
- }
844
- .ColorPicker_module_lThumb {
845
- position: absolute;
846
- top: 50%;
847
- width: 20px;
848
- height: 20px;
849
- border-radius: 50%;
850
- transform: translate(-50%, -50%);
851
- background: white;
852
- border: 2px solid rgba(0, 0, 0, 0.2);
853
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
854
- pointer-events: none;
855
- }
856
- .ColorPicker_module_alphaSlider {
857
- position: relative;
858
- height: 10px;
859
- border-radius: 5px;
860
- cursor: ew-resize;
861
- margin-block: 5px;
862
- background-color: var(--color-neutral-200);
863
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
864
- }
865
- .ColorPicker_module_alphaThumb {
866
- position: absolute;
867
- top: 50%;
868
- width: 20px;
869
- height: 20px;
870
- border-radius: 50%;
871
- transform: translate(-50%, -50%);
872
- background: white;
873
- border: 2px solid rgba(0, 0, 0, 0.2);
874
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
875
- pointer-events: none;
876
- }
877
835
  .ColorPicker_module_previewSwatch {
878
836
  width: 100%;
879
837
  height: 48px;
@@ -1026,4 +984,689 @@
1026
984
  padding: 0;
1027
985
  flex-shrink: 0;
1028
986
  }
987
+
988
+ /* src/components/SliderControl/SliderControl.module.scss */
989
+ :root {
990
+ --accent: #3b82f6;
991
+ --accent-dot: rgb(82.52, 145, 247.08);
992
+ --accent-track: #3b82f6;
993
+ --accent-ring: #3b82f6;
994
+ --accent-glow: rgba(59, 130, 246, 0.3);
995
+ --accent-light: rgb(157.485, 188.725, 239.765);
996
+ --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
997
+ --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
998
+ --color-primary-400: rgb(82.52, 145, 247.08);
999
+ --color-primary-500: #3b82f6;
1000
+ --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
1001
+ --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
1002
+ --color-neutral-0: #ffffff;
1003
+ --color-neutral-100: #f3f4f6;
1004
+ --color-neutral-200: #e5e7eb;
1005
+ --color-neutral-400: #9ca3af;
1006
+ --color-neutral-600: #4b5563;
1007
+ --color-neutral-900: #111827;
1008
+ --color-success-500: #22c55e;
1009
+ --color-success-600: #16a34a;
1010
+ --color-danger-500: #ef4444;
1011
+ --color-danger-600: #dc2626;
1012
+ --color-warning-500: #f59e0b;
1013
+ --color-warning-600: #d97706;
1014
+ --font-family-base:
1015
+ "Inter",
1016
+ system-ui,
1017
+ -apple-system,
1018
+ sans-serif;
1019
+ --font-size-xs: 0.75rem;
1020
+ --font-size-sm: 0.875rem;
1021
+ --font-size-md: 1rem;
1022
+ --font-size-lg: 1.125rem;
1023
+ --spacing-1: 0.25rem;
1024
+ --spacing-2: 0.5rem;
1025
+ --spacing-3: 0.75rem;
1026
+ --spacing-4: 1rem;
1027
+ --radius-sm: 0.25rem;
1028
+ --radius-md: 0.375rem;
1029
+ --radius-lg: 0.5rem;
1030
+ --radius-full: 9999px;
1031
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1032
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1033
+ --transition-fast: 150ms ease;
1034
+ --color-surface: #ffffff;
1035
+ --color-surface-elevated: #ffffff;
1036
+ }
1037
+ [data-theme=dark] {
1038
+ --color-neutral-0: #0f172a;
1039
+ --color-neutral-100: #1e293b;
1040
+ --color-neutral-200: #334155;
1041
+ --color-neutral-400: #94a3b8;
1042
+ --color-neutral-600: #cbd5e1;
1043
+ --color-neutral-900: #f8fafc;
1044
+ --color-surface: #1e293b;
1045
+ --color-surface-elevated: #273549;
1046
+ --color-primary-50: #172554;
1047
+ --color-primary-100: #1e3a8a;
1048
+ --accent-light: #172554;
1049
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
1050
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
1051
+ }
1052
+ .SliderControl_module_wrapper {
1053
+ display: flex;
1054
+ align-items: center;
1055
+ gap: 10px;
1056
+ font-family: var(--font-family-base);
1057
+ user-select: none;
1058
+ -webkit-user-select: none;
1059
+ }
1060
+ .SliderControl_module_disabled {
1061
+ opacity: 0.45;
1062
+ pointer-events: none;
1063
+ }
1064
+ .SliderControl_module_icon {
1065
+ display: flex;
1066
+ align-items: center;
1067
+ justify-content: center;
1068
+ color: var(--color-neutral-400);
1069
+ flex-shrink: 0;
1070
+ line-height: 0;
1071
+ }
1072
+ .SliderControl_module_trackArea {
1073
+ position: relative;
1074
+ flex: 1;
1075
+ height: 36px;
1076
+ display: flex;
1077
+ align-items: center;
1078
+ cursor: pointer;
1079
+ }
1080
+ .SliderControl_module_groove {
1081
+ position: relative;
1082
+ width: 100%;
1083
+ height: 22px;
1084
+ border-radius: var(--radius-full);
1085
+ background: var(--color-neutral-300);
1086
+ display: flex;
1087
+ align-items: center;
1088
+ box-shadow:
1089
+ inset 0 4px 8px rgba(0, 0, 0, 0.14),
1090
+ inset 0 2px 4px rgba(0, 0, 0, 0.06),
1091
+ inset 0 -2px 3px rgba(255, 255, 255, 0.1);
1092
+ }
1093
+ .SliderControl_module_rail {
1094
+ position: absolute;
1095
+ left: 8px;
1096
+ right: 8px;
1097
+ height: 6px;
1098
+ border-radius: var(--radius-full);
1099
+ background: var(--color-neutral-400);
1100
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.18);
1101
+ overflow: hidden;
1102
+ }
1103
+ .SliderControl_module_fill {
1104
+ position: absolute;
1105
+ top: 0;
1106
+ left: 0;
1107
+ height: 100%;
1108
+ background: var(--slider-accent-track, var(--accent-track));
1109
+ border-radius: var(--radius-full);
1110
+ transition: width 60ms linear;
1111
+ }
1112
+ .SliderControl_module_thumb {
1113
+ position: absolute;
1114
+ top: 50%;
1115
+ width: 18px;
1116
+ height: 18px;
1117
+ border-radius: 50%;
1118
+ transform: translate(-50%, -50%);
1119
+ background: #dde0e6;
1120
+ border: 1px solid rgba(0, 0, 0, 0.1);
1121
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
1122
+ cursor: grab;
1123
+ transition: box-shadow 120ms ease, transform 120ms ease;
1124
+ outline: none;
1125
+ z-index: 2;
1126
+ }
1127
+ .SliderControl_module_thumb:focus-visible {
1128
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22), 0 0 0 3px var(--slider-accent-ring, var(--accent-ring));
1129
+ }
1130
+ .SliderControl_module_thumbDragging {
1131
+ cursor: grabbing;
1132
+ transform: translate(-50%, -50%) scale(1.08);
1133
+ box-shadow:
1134
+ 0 1px 4px rgba(0, 0, 0, 0.28),
1135
+ 0 0 0 3px var(--slider-accent-ring, var(--accent-ring)),
1136
+ 0 0 0 6px var(--slider-accent-glow, var(--accent-glow));
1137
+ }
1138
+ .SliderControl_module_tooltip {
1139
+ position: absolute;
1140
+ bottom: calc(100% + 6px);
1141
+ transform: translateX(-50%);
1142
+ background: rgba(18, 18, 26, 0.85);
1143
+ backdrop-filter: blur(6px);
1144
+ -webkit-backdrop-filter: blur(6px);
1145
+ color: #fff;
1146
+ font-size: 11px;
1147
+ font-weight: 600;
1148
+ letter-spacing: 0.02em;
1149
+ padding: 3px 8px;
1150
+ border-radius: 6px;
1151
+ white-space: nowrap;
1152
+ pointer-events: none;
1153
+ opacity: 0;
1154
+ transition: opacity 120ms ease;
1155
+ z-index: 10;
1156
+ }
1157
+ .SliderControl_module_tooltip::after {
1158
+ content: "";
1159
+ position: absolute;
1160
+ top: 100%;
1161
+ left: 50%;
1162
+ transform: translateX(-50%);
1163
+ border: 4px solid transparent;
1164
+ border-top-color: rgba(18, 18, 26, 0.85);
1165
+ }
1166
+ .SliderControl_module_tooltipVisible {
1167
+ opacity: 1;
1168
+ }
1169
+ [data-theme=dark] .SliderControl_module_groove {
1170
+ box-shadow:
1171
+ inset 0 1px 0 rgba(255, 255, 255, 0.07),
1172
+ inset 0 3px 7px rgba(0, 0, 0, 0.32),
1173
+ inset 0 1px 3px rgba(0, 0, 0, 0.22),
1174
+ inset 0 -2px 3px rgba(255, 255, 255, 0.04);
1175
+ }
1176
+ [data-theme=dark] .SliderControl_module_thumb {
1177
+ background: #4a4f5c;
1178
+ border-color: rgba(255, 255, 255, 0.08);
1179
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
1180
+ }
1181
+ [data-theme=dark] .SliderControl_module_thumbDragging {
1182
+ box-shadow:
1183
+ 0 1px 4px rgba(0, 0, 0, 0.5),
1184
+ 0 0 0 3px var(--slider-accent-ring, var(--accent-ring)),
1185
+ 0 0 0 6px var(--slider-accent-glow, var(--accent-glow));
1186
+ }
1187
+
1188
+ /* src/components/SlidingCounter/SlidingCounter.module.scss */
1189
+ :root {
1190
+ --accent: #3b82f6;
1191
+ --accent-dot: rgb(82.52, 145, 247.08);
1192
+ --accent-track: #3b82f6;
1193
+ --accent-ring: #3b82f6;
1194
+ --accent-glow: rgba(59, 130, 246, 0.3);
1195
+ --accent-light: rgb(157.485, 188.725, 239.765);
1196
+ --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
1197
+ --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
1198
+ --color-primary-400: rgb(82.52, 145, 247.08);
1199
+ --color-primary-500: #3b82f6;
1200
+ --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
1201
+ --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
1202
+ --color-neutral-0: #ffffff;
1203
+ --color-neutral-100: #f3f4f6;
1204
+ --color-neutral-200: #e5e7eb;
1205
+ --color-neutral-400: #9ca3af;
1206
+ --color-neutral-600: #4b5563;
1207
+ --color-neutral-900: #111827;
1208
+ --color-success-500: #22c55e;
1209
+ --color-success-600: #16a34a;
1210
+ --color-danger-500: #ef4444;
1211
+ --color-danger-600: #dc2626;
1212
+ --color-warning-500: #f59e0b;
1213
+ --color-warning-600: #d97706;
1214
+ --font-family-base:
1215
+ "Inter",
1216
+ system-ui,
1217
+ -apple-system,
1218
+ sans-serif;
1219
+ --font-size-xs: 0.75rem;
1220
+ --font-size-sm: 0.875rem;
1221
+ --font-size-md: 1rem;
1222
+ --font-size-lg: 1.125rem;
1223
+ --spacing-1: 0.25rem;
1224
+ --spacing-2: 0.5rem;
1225
+ --spacing-3: 0.75rem;
1226
+ --spacing-4: 1rem;
1227
+ --radius-sm: 0.25rem;
1228
+ --radius-md: 0.375rem;
1229
+ --radius-lg: 0.5rem;
1230
+ --radius-full: 9999px;
1231
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1232
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1233
+ --transition-fast: 150ms ease;
1234
+ --color-surface: #ffffff;
1235
+ --color-surface-elevated: #ffffff;
1236
+ }
1237
+ [data-theme=dark] {
1238
+ --color-neutral-0: #0f172a;
1239
+ --color-neutral-100: #1e293b;
1240
+ --color-neutral-200: #334155;
1241
+ --color-neutral-400: #94a3b8;
1242
+ --color-neutral-600: #cbd5e1;
1243
+ --color-neutral-900: #f8fafc;
1244
+ --color-surface: #1e293b;
1245
+ --color-surface-elevated: #273549;
1246
+ --color-primary-50: #172554;
1247
+ --color-primary-100: #1e3a8a;
1248
+ --accent-light: #172554;
1249
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
1250
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
1251
+ }
1252
+ .SlidingCounter_module_counter {
1253
+ display: inline-flex;
1254
+ align-items: center;
1255
+ gap: 1px;
1256
+ font-family: var(--font-family-base);
1257
+ font-weight: 600;
1258
+ font-variant-numeric: tabular-nums;
1259
+ color: var(--sliding-counter-accent-dot, var(--accent-dot));
1260
+ user-select: none;
1261
+ }
1262
+ .SlidingCounter_module_sign {
1263
+ line-height: 1;
1264
+ margin-right: 2px;
1265
+ }
1266
+ .SlidingCounter_module_separator {
1267
+ line-height: 1;
1268
+ margin: 0 1px;
1269
+ opacity: 0.5;
1270
+ align-self: flex-end;
1271
+ padding-bottom: 0.5em;
1272
+ }
1273
+ .SlidingCounter_module_reelWindow {
1274
+ overflow: hidden;
1275
+ position: relative;
1276
+ }
1277
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_sm {
1278
+ height: 1.6rem;
1279
+ width: 0.85rem;
1280
+ font-size: 1.25rem;
1281
+ line-height: 1.6rem;
1282
+ }
1283
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_md {
1284
+ height: 2.6rem;
1285
+ width: 1.35rem;
1286
+ font-size: 2rem;
1287
+ line-height: 2.6rem;
1288
+ }
1289
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_lg {
1290
+ height: 3.8rem;
1291
+ width: 2rem;
1292
+ font-size: 3rem;
1293
+ line-height: 3.8rem;
1294
+ }
1295
+ .SlidingCounter_module_reel {
1296
+ display: flex;
1297
+ flex-direction: column;
1298
+ transition: transform 420ms cubic-bezier(0.4, 0, 0.2, 1);
1299
+ }
1300
+ .SlidingCounter_module_digitCell {
1301
+ display: flex;
1302
+ align-items: center;
1303
+ justify-content: center;
1304
+ flex-shrink: 0;
1305
+ }
1306
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_sm .SlidingCounter_module_digitCell {
1307
+ height: 1.6rem;
1308
+ width: 0.85rem;
1309
+ }
1310
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_md .SlidingCounter_module_digitCell {
1311
+ height: 2.6rem;
1312
+ width: 1.35rem;
1313
+ }
1314
+ .SlidingCounter_module_reelWindow.SlidingCounter_module_lg .SlidingCounter_module_digitCell {
1315
+ height: 3.8rem;
1316
+ width: 2rem;
1317
+ }
1318
+
1319
+ /* src/components/RichTextEditor/RichTextEditor.module.scss */
1320
+ :root {
1321
+ --accent: #3b82f6;
1322
+ --accent-dot: rgb(82.52, 145, 247.08);
1323
+ --accent-track: #3b82f6;
1324
+ --accent-ring: #3b82f6;
1325
+ --accent-glow: rgba(59, 130, 246, 0.3);
1326
+ --accent-light: rgb(157.485, 188.725, 239.765);
1327
+ --color-primary-50: rgb(169.3455, 194.6925, 236.1045);
1328
+ --color-primary-100: rgb(149.4545, 184.4575, 241.6455);
1329
+ --color-primary-400: rgb(82.52, 145, 247.08);
1330
+ --color-primary-500: #3b82f6;
1331
+ --color-primary-600: rgb(29.8390243902, 111.4024390244, 244.6609756098);
1332
+ --color-primary-700: rgb(10.712195122, 95.2195121951, 233.287804878);
1333
+ --color-neutral-0: #ffffff;
1334
+ --color-neutral-100: #f3f4f6;
1335
+ --color-neutral-200: #e5e7eb;
1336
+ --color-neutral-400: #9ca3af;
1337
+ --color-neutral-600: #4b5563;
1338
+ --color-neutral-900: #111827;
1339
+ --color-success-500: #22c55e;
1340
+ --color-success-600: #16a34a;
1341
+ --color-danger-500: #ef4444;
1342
+ --color-danger-600: #dc2626;
1343
+ --color-warning-500: #f59e0b;
1344
+ --color-warning-600: #d97706;
1345
+ --font-family-base:
1346
+ "Inter",
1347
+ system-ui,
1348
+ -apple-system,
1349
+ sans-serif;
1350
+ --font-size-xs: 0.75rem;
1351
+ --font-size-sm: 0.875rem;
1352
+ --font-size-md: 1rem;
1353
+ --font-size-lg: 1.125rem;
1354
+ --spacing-1: 0.25rem;
1355
+ --spacing-2: 0.5rem;
1356
+ --spacing-3: 0.75rem;
1357
+ --spacing-4: 1rem;
1358
+ --radius-sm: 0.25rem;
1359
+ --radius-md: 0.375rem;
1360
+ --radius-lg: 0.5rem;
1361
+ --radius-full: 9999px;
1362
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
1363
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
1364
+ --transition-fast: 150ms ease;
1365
+ --color-surface: #ffffff;
1366
+ --color-surface-elevated: #ffffff;
1367
+ }
1368
+ [data-theme=dark] {
1369
+ --color-neutral-0: #0f172a;
1370
+ --color-neutral-100: #1e293b;
1371
+ --color-neutral-200: #334155;
1372
+ --color-neutral-400: #94a3b8;
1373
+ --color-neutral-600: #cbd5e1;
1374
+ --color-neutral-900: #f8fafc;
1375
+ --color-surface: #1e293b;
1376
+ --color-surface-elevated: #273549;
1377
+ --color-primary-50: #172554;
1378
+ --color-primary-100: #1e3a8a;
1379
+ --accent-light: #172554;
1380
+ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.4);
1381
+ --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.4);
1382
+ }
1383
+ .RichTextEditor_module_root {
1384
+ display: flex;
1385
+ flex-direction: column;
1386
+ border: 1px solid var(--color-neutral-200);
1387
+ border-radius: var(--radius-lg);
1388
+ background: var(--color-surface);
1389
+ transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
1390
+ }
1391
+ .RichTextEditor_module_root:focus-within {
1392
+ border-color: var(--rich-text-editor-accent-ring, var(--accent-ring));
1393
+ box-shadow: 0 0 0 3px var(--rich-text-editor-accent-glow, var(--accent-glow));
1394
+ }
1395
+ .RichTextEditor_module_readOnly {
1396
+ border-color: transparent;
1397
+ background: transparent;
1398
+ }
1399
+ .RichTextEditor_module_readOnly:focus-within {
1400
+ border-color: transparent;
1401
+ box-shadow: none;
1402
+ }
1403
+ .RichTextEditor_module_toolbar {
1404
+ display: flex;
1405
+ align-items: center;
1406
+ gap: var(--spacing-1);
1407
+ padding: var(--spacing-1) var(--spacing-2);
1408
+ background: var(--color-surface-elevated);
1409
+ border: 1px solid var(--color-neutral-200);
1410
+ border-radius: var(--radius-md);
1411
+ flex-shrink: 0;
1412
+ position: sticky;
1413
+ top: var(--spacing-1);
1414
+ margin: var(--spacing-1) var(--spacing-1) 0;
1415
+ z-index: 10;
1416
+ }
1417
+ .RichTextEditor_module_toolbarGroup {
1418
+ display: flex;
1419
+ align-items: center;
1420
+ gap: 2px;
1421
+ }
1422
+ .RichTextEditor_module_divider {
1423
+ width: 1px;
1424
+ height: 18px;
1425
+ background: var(--color-neutral-200);
1426
+ margin: 0 var(--spacing-1);
1427
+ flex-shrink: 0;
1428
+ }
1429
+ .RichTextEditor_module_toolbarButton {
1430
+ display: inline-flex;
1431
+ align-items: center;
1432
+ justify-content: center;
1433
+ width: 28px;
1434
+ height: 28px;
1435
+ padding: 0;
1436
+ border: none;
1437
+ border-radius: var(--radius-sm);
1438
+ background: transparent;
1439
+ color: var(--color-neutral-600);
1440
+ cursor: pointer;
1441
+ font-size: var(--font-size-sm);
1442
+ font-family: var(--font-family-base);
1443
+ line-height: 1;
1444
+ transition: background var(--transition-fast), color var(--transition-fast);
1445
+ }
1446
+ .RichTextEditor_module_toolbarButton:hover {
1447
+ background: var(--color-neutral-100);
1448
+ color: var(--color-neutral-900);
1449
+ }
1450
+ .RichTextEditor_module_toolbarButton:focus-visible {
1451
+ outline: 2px solid var(--rich-text-editor-accent-ring, var(--accent-ring));
1452
+ outline-offset: 1px;
1453
+ }
1454
+ .RichTextEditor_module_toolbarButton.RichTextEditor_module_active {
1455
+ background: var(--rich-text-editor-accent-light, var(--accent-light));
1456
+ color: var(--rich-text-editor-accent, var(--accent));
1457
+ }
1458
+ .RichTextEditor_module_headingButton {
1459
+ width: auto;
1460
+ min-width: 28px;
1461
+ padding: 0 var(--spacing-2);
1462
+ font-size: 11px;
1463
+ font-weight: 700;
1464
+ letter-spacing: 0.02em;
1465
+ }
1466
+ .RichTextEditor_module_bubbleMenu {
1467
+ display: flex;
1468
+ align-items: center;
1469
+ gap: 2px;
1470
+ padding: var(--spacing-1) var(--spacing-2);
1471
+ background: var(--color-surface-elevated);
1472
+ border: 1px solid var(--color-neutral-200);
1473
+ border-radius: var(--radius-md);
1474
+ box-shadow: var(--shadow-md);
1475
+ }
1476
+ .RichTextEditor_module_prose {
1477
+ color: var(--color-neutral-900);
1478
+ font-family: var(--font-family-base);
1479
+ font-size: var(--font-size-md);
1480
+ line-height: 1.65;
1481
+ }
1482
+ .RichTextEditor_module_prose > * + * {
1483
+ margin-top: 0.5em;
1484
+ }
1485
+ .RichTextEditor_module_prose p {
1486
+ margin: 0;
1487
+ }
1488
+ .RichTextEditor_module_prose h1 {
1489
+ font-size: 1.75rem;
1490
+ font-weight: 700;
1491
+ line-height: 1.25;
1492
+ color: var(--color-neutral-900);
1493
+ margin-top: 0.75em;
1494
+ margin-bottom: 0.25em;
1495
+ }
1496
+ .RichTextEditor_module_prose h1:first-child {
1497
+ margin-top: 0;
1498
+ }
1499
+ .RichTextEditor_module_prose h2 {
1500
+ font-size: 1.375rem;
1501
+ font-weight: 600;
1502
+ line-height: 1.3;
1503
+ color: var(--color-neutral-900);
1504
+ margin-top: 0.75em;
1505
+ margin-bottom: 0.25em;
1506
+ }
1507
+ .RichTextEditor_module_prose h2:first-child {
1508
+ margin-top: 0;
1509
+ }
1510
+ .RichTextEditor_module_prose h3 {
1511
+ font-size: 1.125rem;
1512
+ font-weight: 600;
1513
+ line-height: 1.4;
1514
+ color: var(--color-neutral-900);
1515
+ margin-top: 0.75em;
1516
+ margin-bottom: 0.25em;
1517
+ }
1518
+ .RichTextEditor_module_prose h3:first-child {
1519
+ margin-top: 0;
1520
+ }
1521
+ .RichTextEditor_module_prose ul,
1522
+ .RichTextEditor_module_prose ol {
1523
+ padding-left: 1.5em;
1524
+ margin: 0.5em 0;
1525
+ }
1526
+ .RichTextEditor_module_prose ul {
1527
+ list-style-type: disc;
1528
+ }
1529
+ .RichTextEditor_module_prose ol {
1530
+ list-style-type: decimal;
1531
+ }
1532
+ .RichTextEditor_module_prose li {
1533
+ line-height: 1.65;
1534
+ }
1535
+ .RichTextEditor_module_prose li + li {
1536
+ margin-top: 0.25em;
1537
+ }
1538
+ .RichTextEditor_module_prose li p {
1539
+ margin: 0;
1540
+ }
1541
+ .RichTextEditor_module_prose {
1542
+ padding: var(--spacing-3) var(--spacing-4);
1543
+ }
1544
+ .RichTextEditor_module_editorContent {
1545
+ flex: 1;
1546
+ overflow-y: auto;
1547
+ max-height: var(--rte-max-height);
1548
+ scrollbar-width: thin;
1549
+ scrollbar-color: var(--color-neutral-200) transparent;
1550
+ }
1551
+ .RichTextEditor_module_editorContent::-webkit-scrollbar {
1552
+ width: 4px;
1553
+ }
1554
+ .RichTextEditor_module_editorContent::-webkit-scrollbar-track {
1555
+ background: transparent;
1556
+ }
1557
+ .RichTextEditor_module_editorContent::-webkit-scrollbar-thumb {
1558
+ background: var(--color-neutral-200);
1559
+ border-radius: var(--radius-full);
1560
+ }
1561
+ .RichTextEditor_module_editorContent::before {
1562
+ content: "";
1563
+ display: block;
1564
+ position: sticky;
1565
+ top: 0;
1566
+ pointer-events: none;
1567
+ z-index: 9;
1568
+ }
1569
+ .RichTextEditor_module_editorContent .ProseMirror {
1570
+ color: var(--color-neutral-900);
1571
+ font-family: var(--font-family-base);
1572
+ font-size: var(--font-size-md);
1573
+ line-height: 1.65;
1574
+ }
1575
+ .RichTextEditor_module_editorContent .ProseMirror > * + * {
1576
+ margin-top: 0.5em;
1577
+ }
1578
+ .RichTextEditor_module_editorContent .ProseMirror p {
1579
+ margin: 0;
1580
+ }
1581
+ .RichTextEditor_module_editorContent .ProseMirror h1 {
1582
+ font-size: 1.75rem;
1583
+ font-weight: 700;
1584
+ line-height: 1.25;
1585
+ color: var(--color-neutral-900);
1586
+ margin-top: 0.75em;
1587
+ margin-bottom: 0.25em;
1588
+ }
1589
+ .RichTextEditor_module_editorContent .ProseMirror h1:first-child {
1590
+ margin-top: 0;
1591
+ }
1592
+ .RichTextEditor_module_editorContent .ProseMirror h2 {
1593
+ font-size: 1.375rem;
1594
+ font-weight: 600;
1595
+ line-height: 1.3;
1596
+ color: var(--color-neutral-900);
1597
+ margin-top: 0.75em;
1598
+ margin-bottom: 0.25em;
1599
+ }
1600
+ .RichTextEditor_module_editorContent .ProseMirror h2:first-child {
1601
+ margin-top: 0;
1602
+ }
1603
+ .RichTextEditor_module_editorContent .ProseMirror h3 {
1604
+ font-size: 1.125rem;
1605
+ font-weight: 600;
1606
+ line-height: 1.4;
1607
+ color: var(--color-neutral-900);
1608
+ margin-top: 0.75em;
1609
+ margin-bottom: 0.25em;
1610
+ }
1611
+ .RichTextEditor_module_editorContent .ProseMirror h3:first-child {
1612
+ margin-top: 0;
1613
+ }
1614
+ .RichTextEditor_module_editorContent .ProseMirror ul,
1615
+ .RichTextEditor_module_editorContent .ProseMirror ol {
1616
+ padding-left: 1.5em;
1617
+ margin: 0.5em 0;
1618
+ }
1619
+ .RichTextEditor_module_editorContent .ProseMirror ul {
1620
+ list-style-type: disc;
1621
+ }
1622
+ .RichTextEditor_module_editorContent .ProseMirror ol {
1623
+ list-style-type: decimal;
1624
+ }
1625
+ .RichTextEditor_module_editorContent .ProseMirror li {
1626
+ line-height: 1.65;
1627
+ }
1628
+ .RichTextEditor_module_editorContent .ProseMirror li + li {
1629
+ margin-top: 0.25em;
1630
+ }
1631
+ .RichTextEditor_module_editorContent .ProseMirror li p {
1632
+ margin: 0;
1633
+ }
1634
+ .RichTextEditor_module_editorContent .ProseMirror {
1635
+ min-height: var(--rte-min-height, 200px);
1636
+ padding: var(--spacing-3) var(--spacing-4);
1637
+ outline: none;
1638
+ caret-color: var(--rich-text-editor-accent, var(--accent));
1639
+ }
1640
+ .RichTextEditor_module_editorContent .ProseMirror p.RichTextEditor_module_is-empty:first-child::before {
1641
+ content: attr(data-placeholder);
1642
+ color: var(--color-neutral-400);
1643
+ pointer-events: none;
1644
+ float: left;
1645
+ height: 0;
1646
+ }
1647
+ .RichTextEditor_module_editorContent .ProseMirror div[data-type=page-break] {
1648
+ position: relative;
1649
+ margin: 1em 0;
1650
+ border: none;
1651
+ height: 0;
1652
+ border-top: 2px dashed var(--color-neutral-200);
1653
+ pointer-events: none;
1654
+ user-select: none;
1655
+ }
1656
+ .RichTextEditor_module_editorContent .ProseMirror div[data-type=page-break]::after {
1657
+ content: "Page break";
1658
+ position: absolute;
1659
+ top: 50%;
1660
+ left: 50%;
1661
+ transform: translate(-50%, -50%);
1662
+ padding: 0 var(--spacing-2);
1663
+ background: var(--color-surface);
1664
+ font-size: var(--font-size-xs);
1665
+ color: var(--color-neutral-400);
1666
+ font-family: var(--font-family-base);
1667
+ white-space: nowrap;
1668
+ }
1669
+ .RichTextEditor_module_editorContent .ProseMirror ::selection {
1670
+ background: var(--rich-text-editor-accent-light, var(--accent-light));
1671
+ }
1029
1672
  /*# sourceMappingURL=index.css.map */