@scalar/api-client-react 2.0.34 → 2.0.35

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/CHANGELOG.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # @scalar/api-client-react
2
2
 
3
+ ## 2.0.35
4
+
3
5
  ## 2.0.34
4
6
 
5
7
  ## 2.0.33
package/dist/style.css CHANGED
@@ -102,8 +102,13 @@
102
102
  :root {
103
103
  --scalar-border-width: .5px;
104
104
  --scalar-radius: 3px;
105
- --scalar-radius-lg: 6px;
106
- --scalar-radius-xl: 8px;
105
+ --scalar-radius-max: 20px;
106
+ --scalar-radius-md: min(var(--scalar-radius), var(--scalar-radius-max));
107
+ --scalar-radius-lg: min(calc(var(--scalar-radius) * 2), var(--scalar-radius-max));
108
+ --scalar-radius-xl: min(calc(var(--scalar-radius) * 8 / 3), var(--scalar-radius-max));
109
+ --scalar-radius-2xl: min(calc(var(--scalar-radius) * 4), var(--scalar-radius-max));
110
+ --scalar-radius-3xl: min(calc(var(--scalar-radius) * 16 / 3), var(--scalar-radius-max));
111
+ --scalar-radius-full: calc(var(--scalar-radius) * 9999);
107
112
  --scalar-font: "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
108
113
  "Noto Color Emoji";
109
114
  --scalar-font-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
@@ -431,7 +436,7 @@
431
436
  list-style: none;
432
437
  }
433
438
  :where(.scalar-app) input:where(:not([type="button"], [type="reset"], [type="submit"])), :where(.scalar-app) select, :where(.scalar-app) textarea {
434
- border-radius: var(--scalar-radius);
439
+ border-radius: var(--scalar-radius-md);
435
440
  border-width: 1px;
436
441
  }
437
442
  :where(.scalar-app) input, :where(.scalar-app) select, :where(.scalar-app) textarea {
@@ -459,7 +464,6 @@
459
464
  background-clip: text !important;
460
465
  }
461
466
  :where(.scalar-app) :focus-visible {
462
- border-radius: var(--scalar-radius);
463
467
  outline-style: solid;
464
468
  }
465
469
  :where(.scalar-app) button:focus-visible, :where(.scalar-app) [role="button"]:focus-visible {
@@ -852,7 +856,7 @@
852
856
  display: block;
853
857
  }
854
858
  .scalar-app .markdown img {
855
- border-radius: var(--scalar-radius);
859
+ border-radius: var(--scalar-radius-md);
856
860
  max-width: 100%;
857
861
  display: inline-block;
858
862
  overflow: hidden;
@@ -901,7 +905,7 @@
901
905
  .scalar-app .markdown table {
902
906
  table-layout: fixed;
903
907
  border: var(--scalar-border-width) solid var(--scalar-border-color);
904
- border-radius: var(--scalar-radius);
908
+ border-radius: var(--scalar-radius-md);
905
909
  border-spacing: 0;
906
910
  width: max-content;
907
911
  max-width: 100%;
@@ -959,10 +963,10 @@
959
963
  border-left-color: #0000;
960
964
  }
961
965
  .scalar-app .markdown th:first-of-type {
962
- border-top-left-radius: var(--scalar-radius);
966
+ border-top-left-radius: var(--scalar-radius-md);
963
967
  }
964
968
  .scalar-app .markdown th:last-of-type {
965
- border-top-right-radius: var(--scalar-radius);
969
+ border-top-right-radius: var(--scalar-radius-md);
966
970
  }
967
971
  .scalar-app .markdown tr > [align="left"] {
968
972
  text-align: left;
@@ -992,13 +996,13 @@
992
996
  width: calc(100% - calc(var(--markdown-spacing-md) * 2));
993
997
  }
994
998
  .scalar-app .markdown summary {
999
+ border-radius: var(--scalar-radius);
995
1000
  min-height: 40px;
996
1001
  font-weight: var(--scalar-semibold);
997
1002
  line-height: var(--markdown-line-height);
998
1003
  cursor: pointer;
999
1004
  -webkit-user-select: none;
1000
1005
  user-select: none;
1001
- border-radius: 2.5px;
1002
1006
  align-items: flex-start;
1003
1007
  gap: 8px;
1004
1008
  padding: 7px 14px;
@@ -1099,7 +1103,7 @@
1099
1103
  background-color: var(--scalar-background-2);
1100
1104
  box-shadow: 0 0 0 var(--scalar-border-width) var(--scalar-border-color);
1101
1105
  font-size: var(--scalar-micro);
1102
- border-radius: 2px;
1106
+ border-radius: var(--scalar-radius-md);
1103
1107
  padding: 0 3px;
1104
1108
  }
1105
1109
  .scalar-app .markdown .hljs {
@@ -1162,7 +1166,7 @@
1162
1166
  opacity: 1;
1163
1167
  }
1164
1168
  .scalar-app .markdown .markdown-alert {
1165
- border-radius: var(--scalar-radius);
1169
+ border-radius: var(--scalar-radius-md);
1166
1170
  background-color: var(--scalar-background-2);
1167
1171
  align-items: stretch;
1168
1172
  }
@@ -1463,7 +1467,7 @@
1463
1467
  :where(body) > .scalar-tooltip:before {
1464
1468
  content: "";
1465
1469
  z-index: calc(1 * -1);
1466
- border-radius: var(--scalar-radius);
1470
+ border-radius: var(--scalar-radius-md);
1467
1471
  background-color: var(--scalar-tooltip-background);
1468
1472
  --tw-backdrop-blur: blur(8px);
1469
1473
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
@@ -1595,19 +1599,19 @@
1595
1599
  .scalar-virtual-text-search-input[data-v-95edadbb]::-webkit-search-cancel-button {
1596
1600
  display: none;
1597
1601
  }
1598
- .scalar-virtual-text[data-v-b50a85e1]:focus {
1602
+ .scalar-virtual-text[data-v-77b9d685]:focus {
1599
1603
  outline: none;
1600
1604
  }
1601
- .scalar-virtual-text-highlight[data-v-b50a85e1] {
1605
+ .scalar-virtual-text-highlight[data-v-77b9d685] {
1602
1606
  background: var(--scalar-background-accent);
1603
1607
  color: inherit;
1604
- border-radius: 2px;
1608
+ border-radius: var(--scalar-radius);
1605
1609
  padding: 1px 0;
1606
1610
  }
1607
- .scalar-virtual-text-highlight-active[data-v-b50a85e1] {
1611
+ .scalar-virtual-text-highlight-active[data-v-77b9d685] {
1608
1612
  background: var(--scalar-color-accent);
1609
1613
  color: var(--scalar-background-1);
1610
- border-radius: 2px;
1614
+ border-radius: var(--scalar-radius);
1611
1615
  }
1612
1616
  .sidebar-heading-type[data-v-bdef8365] {
1613
1617
  text-transform: uppercase;
@@ -2758,19 +2762,25 @@
2758
2762
  border-radius: 0 !important;
2759
2763
  }
2760
2764
  .scalar-app .rounded {
2761
- border-radius: var(--scalar-radius);
2765
+ border-radius: var(--scalar-radius-md);
2766
+ }
2767
+ .scalar-app .rounded-2xl {
2768
+ border-radius: var(--scalar-radius-2xl);
2769
+ }
2770
+ .scalar-app .rounded-3xl {
2771
+ border-radius: var(--scalar-radius-3xl);
2762
2772
  }
2763
2773
  .scalar-app .rounded-\[inherit\] {
2764
2774
  border-radius: inherit;
2765
2775
  }
2766
2776
  .scalar-app .rounded-full {
2767
- border-radius: 9999px;
2777
+ border-radius: var(--scalar-radius-full);
2768
2778
  }
2769
2779
  .scalar-app .rounded-lg {
2770
2780
  border-radius: var(--scalar-radius-lg);
2771
2781
  }
2772
2782
  .scalar-app .rounded-md {
2773
- border-radius: var(--scalar-radius);
2783
+ border-radius: var(--scalar-radius-md);
2774
2784
  }
2775
2785
  .scalar-app .rounded-none {
2776
2786
  border-radius: 0;
@@ -2782,8 +2792,8 @@
2782
2792
  border-radius: var(--scalar-radius-xl);
2783
2793
  }
2784
2794
  .scalar-app .rounded-t {
2785
- border-top-left-radius: var(--scalar-radius);
2786
- border-top-right-radius: var(--scalar-radius);
2795
+ border-top-left-radius: var(--scalar-radius-md);
2796
+ border-top-right-radius: var(--scalar-radius-md);
2787
2797
  }
2788
2798
  .scalar-app .rounded-t-lg {
2789
2799
  border-top-left-radius: var(--scalar-radius-lg);
@@ -2794,8 +2804,8 @@
2794
2804
  border-top-right-radius: var(--scalar-radius-xl);
2795
2805
  }
2796
2806
  .scalar-app .rounded-b {
2797
- border-bottom-right-radius: var(--scalar-radius);
2798
- border-bottom-left-radius: var(--scalar-radius);
2807
+ border-bottom-right-radius: var(--scalar-radius-md);
2808
+ border-bottom-left-radius: var(--scalar-radius-md);
2799
2809
  }
2800
2810
  .scalar-app .rounded-b-lg {
2801
2811
  border-bottom-right-radius: var(--scalar-radius-lg);
@@ -3602,6 +3612,10 @@
3602
3612
  --tw-shadow: 0 0 #0000;
3603
3613
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3604
3614
  }
3615
+ .scalar-app .ring {
3616
+ --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
3617
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
3618
+ }
3605
3619
  .scalar-app .outline {
3606
3620
  outline-style: var(--tw-outline-style);
3607
3621
  outline-width: 1px;
@@ -3786,7 +3800,7 @@
3786
3800
  gap: 4px;
3787
3801
  }
3788
3802
  :is(.scalar-app .\*\:rounded > *) {
3789
- border-radius: var(--scalar-radius);
3803
+ border-radius: var(--scalar-radius-md);
3790
3804
  }
3791
3805
  :is(.scalar-app .\*\:rounded-none > *) {
3792
3806
  border-radius: 0;
@@ -4039,7 +4053,7 @@
4039
4053
  }
4040
4054
  .scalar-app .after\:rounded:after {
4041
4055
  content: var(--tw-content);
4042
- border-radius: var(--scalar-radius);
4056
+ border-radius: var(--scalar-radius-md);
4043
4057
  }
4044
4058
  .scalar-app .after\:bg-blue:after {
4045
4059
  content: var(--tw-content);
@@ -4058,8 +4072,8 @@
4058
4072
  border-top-right-radius: inherit;
4059
4073
  }
4060
4074
  :is(.scalar-app .\*\:first\:rounded-l > *):first-child {
4061
- border-top-left-radius: var(--scalar-radius);
4062
- border-bottom-left-radius: var(--scalar-radius);
4075
+ border-top-left-radius: var(--scalar-radius-md);
4076
+ border-bottom-left-radius: var(--scalar-radius-md);
4063
4077
  }
4064
4078
  :is(.scalar-app .\*\:first\:border-t-0 > *):first-child, :is(.scalar-app .first\:\*\:border-t-0:first-child > *) {
4065
4079
  border-top-style: var(--tw-border-style);
@@ -4078,8 +4092,8 @@
4078
4092
  border-right-width: 0;
4079
4093
  }
4080
4094
  :is(.scalar-app .\*\:last\:rounded-r > *):last-child {
4081
- border-top-right-radius: var(--scalar-radius);
4082
- border-bottom-right-radius: var(--scalar-radius);
4095
+ border-top-right-radius: var(--scalar-radius-md);
4096
+ border-bottom-right-radius: var(--scalar-radius-md);
4083
4097
  }
4084
4098
  .scalar-app .last-of-type\:first-of-type\:border-b-0:last-of-type:first-of-type {
4085
4099
  border-bottom-style: var(--tw-border-style);
@@ -4924,23 +4938,23 @@ to {
4924
4938
  /*
4925
4939
  Deep styling for customizing Codemirror
4926
4940
  */
4927
- [data-v-d6fb2049] .cm-editor {
4941
+ [data-v-dfc591f4] .cm-editor {
4928
4942
  height: 100%;
4929
4943
  outline: none;
4930
4944
  padding: 0;
4931
4945
  background: transparent;
4932
4946
  }
4933
- [data-v-d6fb2049] .cm-placeholder {
4947
+ [data-v-dfc591f4] .cm-placeholder {
4934
4948
  color: var(--scalar-color-3);
4935
4949
  }
4936
- [data-v-d6fb2049] .cm-content {
4950
+ [data-v-dfc591f4] .cm-content {
4937
4951
  font-family: var(--scalar-font-code);
4938
4952
  font-size: var(--scalar-small);
4939
4953
  max-height: 20px;
4940
4954
  padding: 8px 0;
4941
4955
  }
4942
4956
  /* Tooltip helper */
4943
- [data-v-d6fb2049] .cm-tooltip {
4957
+ [data-v-dfc591f4] .cm-tooltip {
4944
4958
  background: transparent !important;
4945
4959
  filter: brightness(var(--scalar-lifted-brightness));
4946
4960
  border-radius: var(--scalar-radius);
@@ -4949,43 +4963,43 @@ to {
4949
4963
  outline: none !important;
4950
4964
  overflow: hidden !important;
4951
4965
  }
4952
- [data-v-d6fb2049] .cm-tooltip-autocomplete ul li {
4966
+ [data-v-dfc591f4] .cm-tooltip-autocomplete ul li {
4953
4967
  padding: 3px 6px !important;
4954
4968
  }
4955
- [data-v-d6fb2049] .cm-completionIcon-type:after {
4969
+ [data-v-dfc591f4] .cm-completionIcon-type:after {
4956
4970
  color: var(--scalar-color-3) !important;
4957
4971
  }
4958
- [data-v-d6fb2049] .cm-tooltip-autocomplete ul li[aria-selected] {
4972
+ [data-v-dfc591f4] .cm-tooltip-autocomplete ul li[aria-selected] {
4959
4973
  background: var(--scalar-background-2) !important;
4960
4974
  color: var(--scalar-color-1) !important;
4961
4975
  }
4962
- [data-v-d6fb2049] .cm-tooltip-autocomplete ul {
4976
+ [data-v-dfc591f4] .cm-tooltip-autocomplete ul {
4963
4977
  padding: 6px !important;
4964
4978
  position: relative;
4965
4979
  }
4966
- [data-v-d6fb2049] .cm-tooltip-autocomplete ul li:hover {
4980
+ [data-v-dfc591f4] .cm-tooltip-autocomplete ul li:hover {
4967
4981
  border-radius: 3px;
4968
4982
  color: var(--scalar-color-1) !important;
4969
4983
  background: var(--scalar-background-3) !important;
4970
4984
  }
4971
4985
  /* Disable active line highlighting */
4972
- [data-v-d6fb2049] .cm-activeLine,[data-v-d6fb2049] .cm-activeLineGutter {
4986
+ [data-v-dfc591f4] .cm-activeLine,[data-v-dfc591f4] .cm-activeLineGutter {
4973
4987
  background-color: transparent;
4974
4988
  }
4975
4989
  /* Color selection matching */
4976
- [data-v-d6fb2049] .cm-selectionMatch,[data-v-d6fb2049] .cm-matchingBracket {
4990
+ [data-v-dfc591f4] .cm-selectionMatch,[data-v-dfc591f4] .cm-matchingBracket {
4977
4991
  border-radius: var(--scalar-radius);
4978
4992
  background: var(--scalar-background-4) !important;
4979
4993
  }
4980
4994
  /* Color Picker Swatches */
4981
- [data-v-d6fb2049] .cm-css-color-picker-wrapper {
4995
+ [data-v-dfc591f4] .cm-css-color-picker-wrapper {
4982
4996
  display: inline-flex;
4983
4997
  outline: 1px solid var(--scalar-background-3);
4984
4998
  border-radius: 3px;
4985
4999
  overflow: hidden;
4986
5000
  }
4987
5001
  /* Number gutter */
4988
- [data-v-d6fb2049] .cm-gutters {
5002
+ [data-v-dfc591f4] .cm-gutters {
4989
5003
  background-color: transparent;
4990
5004
  border-right: none;
4991
5005
  color: var(--scalar-color-3);
@@ -4993,7 +5007,7 @@ to {
4993
5007
  line-height: 22px;
4994
5008
  border-radius: 0 0 0 3px;
4995
5009
  }
4996
- [data-v-d6fb2049] .cm-gutters:before {
5010
+ [data-v-dfc591f4] .cm-gutters:before {
4997
5011
  content: '';
4998
5012
  position: absolute;
4999
5013
  top: 2px;
@@ -5003,7 +5017,7 @@ to {
5003
5017
  border-radius: var(--scalar-radius) 0 0 var(--scalar-radius);
5004
5018
  background-color: var(--scalar-background-1);
5005
5019
  }
5006
- [data-v-d6fb2049] .cm-gutterElement {
5020
+ [data-v-dfc591f4] .cm-gutterElement {
5007
5021
  font-family: var(--scalar-font-code) !important;
5008
5022
  padding-left: 0px !important;
5009
5023
  padding-right: 6px !important;
@@ -5012,16 +5026,16 @@ to {
5012
5026
  justify-content: flex-end;
5013
5027
  position: relative;
5014
5028
  }
5015
- [data-v-d6fb2049] .cm-lineNumbers .cm-gutterElement {
5029
+ [data-v-dfc591f4] .cm-lineNumbers .cm-gutterElement {
5016
5030
  min-width: fit-content;
5017
5031
  }
5018
- [data-v-d6fb2049] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
5032
+ [data-v-dfc591f4] .cm-gutter + .cm-gutter :not(.cm-foldGutter) .cm-gutterElement {
5019
5033
  padding-left: 0 !important;
5020
5034
  }
5021
- [data-v-d6fb2049] .cm-scroller {
5035
+ [data-v-dfc591f4] .cm-scroller {
5022
5036
  overflow: auto;
5023
5037
  }
5024
- .line-wrapping[data-v-d6fb2049]:focus-within .cm-content {
5038
+ .line-wrapping[data-v-dfc591f4]:focus-within .cm-content {
5025
5039
  display: inline-table;
5026
5040
  min-height: fit-content;
5027
5041
  padding: 3px 6px;
@@ -5031,9 +5045,8 @@ to {
5031
5045
  .cm-pill {
5032
5046
  color: var(--scalar-color-1) !important;
5033
5047
  padding: 0px 9px;
5034
- border-radius: 3px;
5035
5048
  display: inline-block;
5036
- border-radius: 30px;
5049
+ border-radius: var(--scalar-radius-full);
5037
5050
  font-size: var(--scalar-small);
5038
5051
  }
5039
5052
  .light-mode .cm-pill {
@@ -5271,13 +5284,13 @@ to {
5271
5284
  .context-bar-group:has(:focus-visible) .context-bar-group-hover\:hidden[data-v-07ff8fc3] {
5272
5285
  display: none;
5273
5286
  }
5274
- .code-input-lite[data-v-1974e80d] {
5287
+ .code-input-lite[data-v-f03d0c9d] {
5275
5288
  /* Flex so the editor centres vertically in whatever height the cell gives us.
5276
5289
  Font properties inherit so we adopt the surrounding typography. */
5277
5290
  display: flex;
5278
5291
  align-items: center;
5279
5292
  }
5280
- .code-input-lite__editor[data-v-1974e80d] {
5293
+ .code-input-lite__editor[data-v-f03d0c9d] {
5281
5294
  /* Everything font-related inherits from the surrounding context. */
5282
5295
  font: inherit;
5283
5296
  letter-spacing: inherit;
@@ -5299,14 +5312,14 @@ to {
5299
5312
  /* Positioning context for the absolutely positioned placeholder. */
5300
5313
  position: relative;
5301
5314
  }
5302
- .code-input-lite__editor[data-v-1974e80d]::-webkit-scrollbar {
5315
+ .code-input-lite__editor[data-v-f03d0c9d]::-webkit-scrollbar {
5303
5316
  display: none;
5304
5317
  }
5305
5318
  /* Absolute so the placeholder does not occupy flow space inside the
5306
5319
  contenteditable; otherwise the caret would land after it on focus.
5307
5320
  `pointer-events: none` lets clicks fall through to focus the editor.
5308
5321
  Hidden on focus so it never renders on top of the text caret. */
5309
- .code-input-lite--empty .code-input-lite__editor[data-v-1974e80d]:not(:focus)::before {
5322
+ .code-input-lite--empty .code-input-lite__editor[data-v-f03d0c9d]:not(:focus)::before {
5310
5323
  content: attr(data-placeholder);
5311
5324
  color: var(--scalar-color-3);
5312
5325
  pointer-events: none;
@@ -5317,14 +5330,14 @@ to {
5317
5330
  display: flex;
5318
5331
  align-items: center;
5319
5332
  }
5320
- .code-input-lite--error .code-input-lite__editor[data-v-1974e80d] {
5333
+ .code-input-lite--error .code-input-lite__editor[data-v-f03d0c9d] {
5321
5334
  outline: 1px solid var(--scalar-color-red);
5322
5335
  }
5323
5336
  /* Pill styling. Each pill is `<span contenteditable="false">name</span>` —
5324
5337
  an atomic widget; the caret lands before or after it, never inside. */
5325
5338
  .scalar-pill {
5326
5339
  color: var(--scalar-color-2);
5327
- border-radius: 30px;
5340
+ border-radius: var(--scalar-radius-full);
5328
5341
  display: inline-block;
5329
5342
  font-family: var(--scalar-font-code);
5330
5343
  font-size: 0.9em;
package/package.json CHANGED
@@ -19,7 +19,7 @@
19
19
  "testing",
20
20
  "react"
21
21
  ],
22
- "version": "2.0.34",
22
+ "version": "2.0.35",
23
23
  "engines": {
24
24
  "node": ">=22"
25
25
  },
@@ -39,8 +39,8 @@
39
39
  "CHANGELOG.md"
40
40
  ],
41
41
  "dependencies": {
42
- "@scalar/api-client": "3.13.5",
43
- "@scalar/blocks": "0.1.6",
42
+ "@scalar/api-client": "3.13.6",
43
+ "@scalar/blocks": "0.1.7",
44
44
  "@scalar/helpers": "0.9.1",
45
45
  "@scalar/workspace-store": "0.55.5"
46
46
  },