@react-spectrum/s2 3.0.0-nightly-e228ed814-250129 → 3.0.0-nightly-016590a4a-250131

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 (283) hide show
  1. package/dist/Accordion.cjs +3 -3
  2. package/dist/Accordion.css +2 -2
  3. package/dist/Accordion.mjs +3 -3
  4. package/dist/ActionBar.cjs +47 -47
  5. package/dist/ActionBar.css +51 -51
  6. package/dist/ActionBar.mjs +47 -47
  7. package/dist/ActionButton.cjs +97 -97
  8. package/dist/ActionButton.css +96 -96
  9. package/dist/ActionButton.mjs +97 -97
  10. package/dist/ActionButtonGroup.cjs +11 -11
  11. package/dist/ActionButtonGroup.css +9 -9
  12. package/dist/ActionButtonGroup.mjs +11 -11
  13. package/dist/AlertDialog.cjs +3 -3
  14. package/dist/AlertDialog.css +3 -3
  15. package/dist/AlertDialog.mjs +3 -3
  16. package/dist/Avatar.cjs +17 -17
  17. package/dist/Avatar.css +14 -14
  18. package/dist/Avatar.mjs +17 -17
  19. package/dist/AvatarGroup.cjs +100 -100
  20. package/dist/AvatarGroup.css +34 -34
  21. package/dist/AvatarGroup.mjs +100 -100
  22. package/dist/Badge.cjs +92 -67
  23. package/dist/Badge.cjs.map +1 -1
  24. package/dist/Badge.css +168 -92
  25. package/dist/Badge.css.map +1 -1
  26. package/dist/Badge.mjs +92 -67
  27. package/dist/Badge.mjs.map +1 -1
  28. package/dist/Breadcrumbs.cjs +115 -115
  29. package/dist/Breadcrumbs.css +89 -89
  30. package/dist/Breadcrumbs.mjs +115 -115
  31. package/dist/Button.cjs +236 -152
  32. package/dist/Button.cjs.map +1 -1
  33. package/dist/Button.css +309 -165
  34. package/dist/Button.css.map +1 -1
  35. package/dist/Button.mjs +236 -152
  36. package/dist/Button.mjs.map +1 -1
  37. package/dist/ButtonGroup.cjs +19 -19
  38. package/dist/ButtonGroup.css +15 -15
  39. package/dist/ButtonGroup.mjs +19 -19
  40. package/dist/Card.cjs +264 -261
  41. package/dist/Card.cjs.map +1 -1
  42. package/dist/Card.css +210 -198
  43. package/dist/Card.css.map +1 -1
  44. package/dist/Card.mjs +264 -261
  45. package/dist/Card.mjs.map +1 -1
  46. package/dist/CardView.cjs +15 -15
  47. package/dist/CardView.css +18 -18
  48. package/dist/CardView.mjs +15 -15
  49. package/dist/CenterBaseline.cjs +1 -1
  50. package/dist/CenterBaseline.css +2 -2
  51. package/dist/CenterBaseline.mjs +1 -1
  52. package/dist/Checkbox.cjs +124 -73
  53. package/dist/Checkbox.cjs.map +1 -1
  54. package/dist/Checkbox.css +201 -81
  55. package/dist/Checkbox.css.map +1 -1
  56. package/dist/Checkbox.mjs +124 -73
  57. package/dist/Checkbox.mjs.map +1 -1
  58. package/dist/CheckboxGroup.cjs +49 -49
  59. package/dist/CheckboxGroup.css +41 -41
  60. package/dist/CheckboxGroup.mjs +49 -49
  61. package/dist/ClearButton.cjs +15 -15
  62. package/dist/ClearButton.css +17 -17
  63. package/dist/ClearButton.mjs +15 -15
  64. package/dist/CloseButton.cjs +35 -35
  65. package/dist/CloseButton.css +33 -33
  66. package/dist/CloseButton.mjs +35 -35
  67. package/dist/ColorArea.cjs +22 -22
  68. package/dist/ColorArea.css +15 -15
  69. package/dist/ColorArea.mjs +22 -22
  70. package/dist/ColorField.cjs +38 -38
  71. package/dist/ColorField.css +32 -32
  72. package/dist/ColorField.mjs +38 -38
  73. package/dist/ColorHandle.cjs +27 -21
  74. package/dist/ColorHandle.cjs.map +1 -1
  75. package/dist/ColorHandle.css +93 -45
  76. package/dist/ColorHandle.css.map +1 -1
  77. package/dist/ColorHandle.mjs +27 -21
  78. package/dist/ColorHandle.mjs.map +1 -1
  79. package/dist/ColorSlider.cjs +52 -52
  80. package/dist/ColorSlider.css +51 -51
  81. package/dist/ColorSlider.mjs +52 -52
  82. package/dist/ColorSwatch.cjs +27 -24
  83. package/dist/ColorSwatch.cjs.map +1 -1
  84. package/dist/ColorSwatch.css +41 -29
  85. package/dist/ColorSwatch.css.map +1 -1
  86. package/dist/ColorSwatch.mjs +27 -24
  87. package/dist/ColorSwatch.mjs.map +1 -1
  88. package/dist/ColorSwatchPicker.cjs +23 -23
  89. package/dist/ColorSwatchPicker.css +60 -48
  90. package/dist/ColorSwatchPicker.css.map +1 -1
  91. package/dist/ColorSwatchPicker.mjs +23 -23
  92. package/dist/ColorWheel.cjs +22 -22
  93. package/dist/ColorWheel.css +16 -16
  94. package/dist/ColorWheel.mjs +22 -22
  95. package/dist/ComboBox.cjs +80 -80
  96. package/dist/ComboBox.css +88 -88
  97. package/dist/ComboBox.mjs +80 -80
  98. package/dist/Content.cjs.map +1 -1
  99. package/dist/Content.mjs.map +1 -1
  100. package/dist/ContextualHelp.cjs +5 -5
  101. package/dist/ContextualHelp.css +38 -38
  102. package/dist/ContextualHelp.mjs +5 -5
  103. package/dist/CustomDialog.cjs +31 -31
  104. package/dist/CustomDialog.css +25 -25
  105. package/dist/CustomDialog.mjs +31 -31
  106. package/dist/Dialog.cjs +17 -17
  107. package/dist/Dialog.css +64 -64
  108. package/dist/Dialog.mjs +17 -17
  109. package/dist/Disclosure.cjs +111 -108
  110. package/dist/Disclosure.cjs.map +1 -1
  111. package/dist/Disclosure.css +124 -112
  112. package/dist/Disclosure.css.map +1 -1
  113. package/dist/Disclosure.mjs +111 -108
  114. package/dist/Disclosure.mjs.map +1 -1
  115. package/dist/Divider.cjs +26 -26
  116. package/dist/Divider.css +16 -16
  117. package/dist/Divider.mjs +26 -26
  118. package/dist/DropZone.cjs +56 -47
  119. package/dist/DropZone.cjs.map +1 -1
  120. package/dist/DropZone.css +80 -56
  121. package/dist/DropZone.css.map +1 -1
  122. package/dist/DropZone.mjs +56 -47
  123. package/dist/DropZone.mjs.map +1 -1
  124. package/dist/Field.cjs +204 -150
  125. package/dist/Field.cjs.map +1 -1
  126. package/dist/Field.css +246 -150
  127. package/dist/Field.css.map +1 -1
  128. package/dist/Field.mjs +204 -150
  129. package/dist/Field.mjs.map +1 -1
  130. package/dist/Form.cjs +10 -10
  131. package/dist/Form.css +9 -9
  132. package/dist/Form.mjs +10 -10
  133. package/dist/FullscreenDialog.cjs +5 -5
  134. package/dist/FullscreenDialog.css +72 -72
  135. package/dist/FullscreenDialog.mjs +5 -5
  136. package/dist/IllustratedMessage.cjs +134 -134
  137. package/dist/IllustratedMessage.css +69 -69
  138. package/dist/IllustratedMessage.mjs +134 -134
  139. package/dist/Image.cjs +12 -12
  140. package/dist/Image.css +13 -13
  141. package/dist/Image.mjs +12 -12
  142. package/dist/InlineAlert.cjs +104 -77
  143. package/dist/InlineAlert.cjs.map +1 -1
  144. package/dist/InlineAlert.css +149 -77
  145. package/dist/InlineAlert.css.map +1 -1
  146. package/dist/InlineAlert.mjs +104 -77
  147. package/dist/InlineAlert.mjs.map +1 -1
  148. package/dist/Link.cjs +31 -31
  149. package/dist/Link.css +30 -30
  150. package/dist/Link.mjs +31 -31
  151. package/dist/Menu.cjs +269 -264
  152. package/dist/Menu.cjs.map +1 -1
  153. package/dist/Menu.css +152 -152
  154. package/dist/Menu.css.map +1 -1
  155. package/dist/Menu.mjs +270 -265
  156. package/dist/Menu.mjs.map +1 -1
  157. package/dist/Meter.cjs +85 -85
  158. package/dist/Meter.css +81 -81
  159. package/dist/Meter.mjs +85 -85
  160. package/dist/Modal.cjs +48 -48
  161. package/dist/Modal.css +46 -46
  162. package/dist/Modal.mjs +48 -48
  163. package/dist/NumberField.cjs +115 -115
  164. package/dist/NumberField.css +114 -114
  165. package/dist/NumberField.mjs +115 -115
  166. package/dist/Picker.cjs +193 -175
  167. package/dist/Picker.cjs.map +1 -1
  168. package/dist/Picker.css +223 -163
  169. package/dist/Picker.css.map +1 -1
  170. package/dist/Picker.mjs +193 -175
  171. package/dist/Picker.mjs.map +1 -1
  172. package/dist/Popover.cjs +84 -78
  173. package/dist/Popover.cjs.map +1 -1
  174. package/dist/Popover.css +89 -65
  175. package/dist/Popover.css.map +1 -1
  176. package/dist/Popover.mjs +84 -78
  177. package/dist/Popover.mjs.map +1 -1
  178. package/dist/ProgressBar.cjs +98 -98
  179. package/dist/ProgressBar.css +92 -92
  180. package/dist/ProgressBar.mjs +98 -98
  181. package/dist/ProgressCircle.cjs +17 -17
  182. package/dist/ProgressCircle.css +15 -15
  183. package/dist/ProgressCircle.mjs +17 -17
  184. package/dist/Provider.cjs +4 -4
  185. package/dist/Provider.css +5 -5
  186. package/dist/Provider.mjs +4 -4
  187. package/dist/Radio.cjs +152 -80
  188. package/dist/Radio.cjs.map +1 -1
  189. package/dist/Radio.css +240 -96
  190. package/dist/Radio.css.map +1 -1
  191. package/dist/Radio.mjs +152 -80
  192. package/dist/Radio.mjs.map +1 -1
  193. package/dist/RadioGroup.cjs +47 -47
  194. package/dist/RadioGroup.css +41 -41
  195. package/dist/RadioGroup.mjs +47 -47
  196. package/dist/SearchField.cjs +42 -42
  197. package/dist/SearchField.css +47 -47
  198. package/dist/SearchField.mjs +42 -42
  199. package/dist/SegmentedControl.cjs +101 -89
  200. package/dist/SegmentedControl.cjs.map +1 -1
  201. package/dist/SegmentedControl.css +140 -92
  202. package/dist/SegmentedControl.css.map +1 -1
  203. package/dist/SegmentedControl.mjs +101 -89
  204. package/dist/SegmentedControl.mjs.map +1 -1
  205. package/dist/Slider.cjs +229 -196
  206. package/dist/Slider.cjs.map +1 -1
  207. package/dist/Slider.css +221 -149
  208. package/dist/Slider.css.map +1 -1
  209. package/dist/Slider.mjs +229 -196
  210. package/dist/Slider.mjs.map +1 -1
  211. package/dist/StatusLight.cjs +56 -56
  212. package/dist/StatusLight.css +59 -59
  213. package/dist/StatusLight.mjs +56 -56
  214. package/dist/Switch.cjs +107 -74
  215. package/dist/Switch.cjs.map +1 -1
  216. package/dist/Switch.css +141 -69
  217. package/dist/Switch.css.map +1 -1
  218. package/dist/Switch.mjs +107 -74
  219. package/dist/Switch.mjs.map +1 -1
  220. package/dist/TableView.cjs +280 -253
  221. package/dist/TableView.cjs.map +1 -1
  222. package/dist/TableView.css +199 -163
  223. package/dist/TableView.css.map +1 -1
  224. package/dist/TableView.mjs +280 -253
  225. package/dist/TableView.mjs.map +1 -1
  226. package/dist/Tabs.cjs +493 -197
  227. package/dist/Tabs.cjs.map +1 -1
  228. package/dist/Tabs.css +250 -134
  229. package/dist/Tabs.css.map +1 -1
  230. package/dist/Tabs.mjs +494 -198
  231. package/dist/Tabs.mjs.map +1 -1
  232. package/dist/TabsPicker.cjs +415 -0
  233. package/dist/TabsPicker.cjs.map +1 -0
  234. package/dist/TabsPicker.css +482 -0
  235. package/dist/TabsPicker.css.map +1 -0
  236. package/dist/TabsPicker.mjs +409 -0
  237. package/dist/TabsPicker.mjs.map +1 -0
  238. package/dist/TagGroup.cjs +148 -148
  239. package/dist/TagGroup.css +134 -134
  240. package/dist/TagGroup.mjs +148 -148
  241. package/dist/TextField.cjs +59 -59
  242. package/dist/TextField.css +62 -62
  243. package/dist/TextField.mjs +59 -59
  244. package/dist/ToggleButton.cjs +3 -3
  245. package/dist/ToggleButton.css +12 -12
  246. package/dist/ToggleButton.mjs +3 -3
  247. package/dist/Tooltip.cjs +60 -57
  248. package/dist/Tooltip.cjs.map +1 -1
  249. package/dist/Tooltip.css +83 -71
  250. package/dist/Tooltip.css.map +1 -1
  251. package/dist/Tooltip.mjs +60 -57
  252. package/dist/Tooltip.mjs.map +1 -1
  253. package/dist/TreeView.cjs +465 -0
  254. package/dist/TreeView.cjs.map +1 -0
  255. package/dist/TreeView.css +632 -0
  256. package/dist/TreeView.css.map +1 -0
  257. package/dist/TreeView.mjs +455 -0
  258. package/dist/TreeView.mjs.map +1 -0
  259. package/dist/main.cjs +4 -0
  260. package/dist/main.cjs.map +1 -1
  261. package/dist/module.mjs +3 -1
  262. package/dist/module.mjs.map +1 -1
  263. package/dist/types.d.ts +33 -8
  264. package/dist/types.d.ts.map +1 -1
  265. package/icons/Skeleton.cjs +2 -2
  266. package/icons/Skeleton.css +5 -5
  267. package/icons/Skeleton.mjs +2 -2
  268. package/package.json +21 -19
  269. package/src/Badge.tsx +4 -1
  270. package/src/Content.tsx +2 -1
  271. package/src/Menu.tsx +2 -0
  272. package/src/Tabs.tsx +450 -144
  273. package/src/TabsPicker.tsx +350 -0
  274. package/src/TreeView.tsx +497 -0
  275. package/src/index.ts +2 -0
  276. package/style/__tests__/style-macro.test.js +18 -18
  277. package/style/dist/spectrum-theme.cjs +20 -10
  278. package/style/dist/spectrum-theme.cjs.map +1 -1
  279. package/style/dist/spectrum-theme.mjs +20 -10
  280. package/style/dist/spectrum-theme.mjs.map +1 -1
  281. package/style/dist/types.d.ts +4 -0
  282. package/style/dist/types.d.ts.map +1 -1
  283. package/style/spectrum-theme.ts +18 -11
@@ -0,0 +1,482 @@
1
+ @layer _.a {
2
+ ._Pb {
3
+ outline-style: solid;
4
+ }
5
+
6
+ .cx {
7
+ outline-color: var(--lightningcss-light, #4b75ff) var(--lightningcss-dark, #4069fd);
8
+ }
9
+
10
+ ._Rc {
11
+ outline-width: 2px;
12
+ }
13
+
14
+ ._Q-3t1z {
15
+ outline-offset: 2px;
16
+ }
17
+
18
+ .__e-g2ozi1 {
19
+ grid-column-start: input;
20
+ }
21
+
22
+ .__f-g2ozi1 {
23
+ grid-column-end: input;
24
+ }
25
+
26
+ .__g-g2ozi1 {
27
+ grid-row-start: input;
28
+ }
29
+
30
+ .__h-g2ozi1 {
31
+ grid-row-end: input;
32
+ }
33
+
34
+ .pf {
35
+ min-width: calc(2rem * var(--s2-scale));
36
+ }
37
+
38
+ .pg {
39
+ min-width: calc(1.25rem * var(--s2-scale));
40
+ }
41
+
42
+ .ph {
43
+ min-width: calc(1.5rem * var(--s2-scale));
44
+ }
45
+
46
+ .pi {
47
+ min-width: calc(2.5rem * var(--s2-scale));
48
+ }
49
+
50
+ .pj {
51
+ min-width: calc(3rem * var(--s2-scale));
52
+ }
53
+
54
+ .__qa {
55
+ contain: none;
56
+ }
57
+
58
+ .-usygro_k-___K {
59
+ --defaultWidth: calc(13rem * var(--s2-scale));
60
+ }
61
+
62
+ .-usygro_k-___u {
63
+ --defaultWidth: calc(12rem * var(--s2-scale));
64
+ }
65
+
66
+ .-usygro_k-___0 {
67
+ --defaultWidth: calc(14rem * var(--s2-scale));
68
+ }
69
+
70
+ .-usygro_k-____g {
71
+ --defaultWidth: calc(15rem * var(--s2-scale));
72
+ }
73
+
74
+ .l-rwozxi {
75
+ contain-intrinsic-width: calc(var(--defaultWidth) - var(--F, 0px) - var(--G, 0px) - var(--r, 0px) - var(--s, 0px));
76
+ }
77
+
78
+ .Yc {
79
+ position: relative;
80
+ }
81
+
82
+ ._ib {
83
+ font-variation-settings: "wght" 400;
84
+ font-synthesis-weight: none;
85
+ font-weight: 400;
86
+ }
87
+
88
+ ._ja {
89
+ line-height: 1.3;
90
+ }
91
+
92
+ .an {
93
+ color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
94
+ }
95
+
96
+ .ao {
97
+ color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
98
+ }
99
+
100
+ .aj {
101
+ color: var(--lightningcss-light, #c6c6c6) var(--lightningcss-dark, #444);
102
+ }
103
+
104
+ ._na {
105
+ text-align: start;
106
+ }
107
+
108
+ ._zb {
109
+ border-start-start-radius: .25rem;
110
+ }
111
+
112
+ ._Ab {
113
+ border-start-end-radius: .25rem;
114
+ }
115
+
116
+ ._Bb {
117
+ border-end-start-radius: .25rem;
118
+ }
119
+
120
+ ._Cb {
121
+ border-end-end-radius: .25rem;
122
+ }
123
+
124
+ ._Sa {
125
+ transition-property: color, background-color, var(--gp), border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter;
126
+ }
127
+
128
+ ._U-375x7f {
129
+ transition-duration: .15s;
130
+ }
131
+
132
+ .iG {
133
+ column-gap: .428571em;
134
+ }
135
+
136
+ .F-375tnp {
137
+ padding-inline-start: var(--F);
138
+ }
139
+
140
+ .G-375tnq {
141
+ padding-inline-end: var(--G);
142
+ }
143
+
144
+ .ba {
145
+ background-color: #0000;
146
+ }
147
+
148
+ .qd {
149
+ max-width: max-content;
150
+ }
151
+
152
+ .__V-yksgrp {
153
+ -webkit-tap-highlight-color: #0000;
154
+ }
155
+
156
+ .j_a {
157
+ height: calc(3rem * var(--s2-scale));
158
+ }
159
+
160
+ .jU {
161
+ height: calc(2rem * var(--s2-scale));
162
+ }
163
+
164
+ .-_375tnp_F-a {
165
+ --F: 0rem;
166
+ }
167
+
168
+ .-_375tnq_G-a {
169
+ --G: 0rem;
170
+ }
171
+
172
+ ._Pa {
173
+ outline-style: none;
174
+ }
175
+
176
+ ._3f {
177
+ display: grid;
178
+ }
179
+
180
+ .__l-n6rb9a {
181
+ grid-template-columns: .75rem auto auto minmax(0, 1fr) auto auto auto .75rem;
182
+ }
183
+
184
+ .__ra {
185
+ box-sizing: border-box;
186
+ }
187
+
188
+ .o-17zqamw {
189
+ max-height: inherit;
190
+ }
191
+
192
+ .__za {
193
+ overflow-x: auto;
194
+ }
195
+
196
+ .__Aa {
197
+ overflow-y: auto;
198
+ }
199
+
200
+ .Hd {
201
+ padding-top: .5rem;
202
+ }
203
+
204
+ .Id {
205
+ padding-bottom: .5rem;
206
+ }
207
+
208
+ .Fd {
209
+ padding-inline-start: .5rem;
210
+ }
211
+
212
+ .Gd {
213
+ padding-inline-end: .5rem;
214
+ }
215
+
216
+ ._ga {
217
+ font-family: adobe-clean-variable, adobe-clean, ui-sans-serif, system-ui, sans-serif;
218
+ }
219
+
220
+ ._he {
221
+ font-size: .875rem;
222
+ }
223
+
224
+ ._ha {
225
+ font-size: .6875rem;
226
+ }
227
+
228
+ ._hc {
229
+ font-size: .75rem;
230
+ }
231
+
232
+ ._hg {
233
+ font-size: 1rem;
234
+ }
235
+
236
+ ._hi {
237
+ font-size: 1.125rem;
238
+ }
239
+
240
+ .__d-3t1x {
241
+ flex-grow: 0;
242
+ }
243
+
244
+ ._5c {
245
+ align-items: center;
246
+ }
247
+
248
+ .jb {
249
+ height: 100%;
250
+ }
251
+
252
+ .__c-3t1x {
253
+ flex-shrink: 0;
254
+ }
255
+
256
+ .U-3hn0u {
257
+ rotate: 90deg;
258
+ }
259
+
260
+ .-rwx0fg_d-b {
261
+ --iconPrimary: currentColor;
262
+ }
263
+
264
+ ._3d {
265
+ display: flex;
266
+ }
267
+
268
+ .__e-qb5q8i {
269
+ grid-column-start: icon;
270
+ }
271
+
272
+ .__f-qb5q8i {
273
+ grid-column-end: icon;
274
+ }
275
+
276
+ .__g-qb5q8i {
277
+ grid-row-start: icon;
278
+ }
279
+
280
+ .__h-qb5q8i {
281
+ grid-row-end: icon;
282
+ }
283
+
284
+ .F-ve8p9e {
285
+ padding-inline-start: calc(.375rem * var(--s2-scale));
286
+ }
287
+
288
+ .-u6zm92 > * {
289
+ display: none;
290
+ }
291
+
292
+ ._3a {
293
+ display: block;
294
+ }
295
+
296
+ ._3j {
297
+ display: none;
298
+ }
299
+
300
+ .__d-3t1y {
301
+ flex-grow: 1;
302
+ }
303
+
304
+ .__zb {
305
+ overflow-x: hidden;
306
+ }
307
+
308
+ .__Ab {
309
+ overflow-y: hidden;
310
+ }
311
+
312
+ ._qa {
313
+ text-overflow: ellipsis;
314
+ }
315
+
316
+ ._tb {
317
+ white-space: nowrap;
318
+ }
319
+
320
+ .B-375tnl {
321
+ margin-inline-start: var(--B);
322
+ }
323
+
324
+ .p___u {
325
+ min-width: calc(12rem * var(--s2-scale));
326
+ }
327
+
328
+ .k-13f72lm {
329
+ width: calc(var(--trigger-width) + (-2 * var(--B)));
330
+ }
331
+
332
+ .-_375tnl_B-M {
333
+ --B: -.75rem;
334
+ }
335
+
336
+ .bn {
337
+ background-color: var(--lightningcss-light, #292929) var(--lightningcss-dark, #dbdbdb);
338
+ }
339
+
340
+ .bo {
341
+ background-color: var(--lightningcss-light, #131313) var(--lightningcss-dark, #f2f2f2);
342
+ }
343
+
344
+ .bg {
345
+ background-color: var(--lightningcss-light, #e9e9e9) var(--lightningcss-dark, #2c2c2c);
346
+ }
347
+
348
+ .j-375zlr {
349
+ height: 2px;
350
+ }
351
+
352
+ .zf {
353
+ border-style: none;
354
+ }
355
+
356
+ ._zf {
357
+ border-start-start-radius: 9999px;
358
+ }
359
+
360
+ ._Af {
361
+ border-start-end-radius: 9999px;
362
+ }
363
+
364
+ ._Bf {
365
+ border-end-start-radius: 9999px;
366
+ }
367
+
368
+ ._Cf {
369
+ border-end-end-radius: 9999px;
370
+ }
371
+
372
+ .D-yj8a3w {
373
+ margin-top: -2px;
374
+ }
375
+
376
+ ._U-375x5l {
377
+ transition-duration: .13s;
378
+ }
379
+
380
+ ._Va {
381
+ transition-timing-function: cubic-bezier(.45, 0, .4, 1);
382
+ }
383
+ }
384
+
385
+ @layer _.b {
386
+ ._j-1x99dlob:is(:lang(ja), :lang(ko), :lang(zh), :lang(zh-Hant), :lang(zh-Hans)) {
387
+ line-height: 1.5;
388
+ }
389
+
390
+ ._g-enzrfpb:lang(ar) {
391
+ font-family: myriad-arabic, ui-sans-serif, system-ui, sans-serif;
392
+ }
393
+ }
394
+
395
+ @layer _.c {
396
+ ._g-enzwzjc:lang(he) {
397
+ font-family: myriad-hebrew, ui-sans-serif, system-ui, sans-serif;
398
+ }
399
+ }
400
+
401
+ @layer _.d {
402
+ ._g-enzykdd:lang(ja) {
403
+ font-family: adobe-clean-han-japanese, Hiragino Kaku Gothic ProN, ヒラギノ角ゴ ProN W3, Osaka, YuGothic, Yu Gothic, メイリオ, Meiryo, MS Pゴシック, MS PGothic, sans-serif;
404
+ }
405
+ }
406
+
407
+ @layer _.e {
408
+ ._g-enzzrge:lang(ko) {
409
+ font-family: adobe-clean-han-korean, source-han-korean, Malgun Gothic, Apple Gothic, sans-serif;
410
+ }
411
+ }
412
+
413
+ @layer _.f {
414
+ ._g-eo0c6sf:lang(zh) {
415
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Heiti TC Light, sans-serif;
416
+ }
417
+ }
418
+
419
+ @layer _.g {
420
+ ._g-1uotwbwg:lang(zh-hant) {
421
+ font-family: adobe-clean-han-traditional, source-han-traditional, MingLiu, Microsoft JhengHei UI, Microsoft JhengHei, Heiti TC Light, sans-serif;
422
+ }
423
+ }
424
+
425
+ @layer _.h {
426
+ ._g-bc1l9oh:is(:lang(zh-Hans), :lang(zh-CN), :lang(zh-SG)) {
427
+ font-family: adobe-clean-han-simplified-c, source-han-simplified-c, SimSun, Heiti SC Light, sans-serif;
428
+ }
429
+ }
430
+
431
+ @layer _.b.a {
432
+ @media (forced-colors: active) {
433
+ .ca_____M {
434
+ outline-color: highlight;
435
+ }
436
+
437
+ .ba_____M {
438
+ background-color: highlight;
439
+ }
440
+
441
+ .ba_____O {
442
+ background-color: graytext;
443
+ }
444
+ }
445
+ }
446
+
447
+ @layer _.b.-_1s8glxu {
448
+ @supports (contain-intrinsic-width: 1px) {
449
+ .__q-1s8glxue {
450
+ contain: inline-size;
451
+ }
452
+ }
453
+ }
454
+
455
+ @layer _.b.b {
456
+ @media not ((hover: hover) and (pointer: fine)) {
457
+ .ibH {
458
+ column-gap: .470588em;
459
+ }
460
+
461
+ ._hbf {
462
+ font-size: 1.0625rem;
463
+ }
464
+
465
+ ._hbb {
466
+ font-size: .8125rem;
467
+ }
468
+
469
+ ._hbd {
470
+ font-size: .9375rem;
471
+ }
472
+
473
+ ._hbh {
474
+ font-size: 1.1875rem;
475
+ }
476
+
477
+ ._hbj {
478
+ font-size: 1.375rem;
479
+ }
480
+ }
481
+ }
482
+ /*# sourceMappingURL=TabsPicker.css.map */
@@ -0,0 +1 @@
1
+ {"mappings":"AC0FoB;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkCF;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAWE;;;;EAAA;;;;EAAA;;;;EAOD;;;;EAAA;;;;EAAA;;;;EAQO;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAkDgC;;;;EAkBpB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EA6BhB;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAoCI;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;EAAA;;;;;AAjMN;EAAA;;;;EAkCF;;;;;AAlCE;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;;;;;AAAA;EAAA;IAAA;;;;IAiMM;;;;IAAA;;;;;;AAjMN;EAAA;IAAA;;;;;;AAAA;EAAA;IAAA;;;;IAkCF;;;;IAAA;;;;IAAA;;;;IAAA;;;;IAAA","sources":["abc7c61fd7ad618f","packages/@react-spectrum/s2/src/TabsPicker.tsx"],"sourcesContent":["@import \"b8fdcb8ccc776f53\";\n@import \"dcd883b3c8357572\";\n@import \"d5ec52da6ab778b1\";\n@import \"081608ef106e269e\";\n@import \"adbdb624431721fa\";\n@import \"03bd912125a89e81\";\n@import \"9581efae4a323524\";\n@import \"809cfbcd16a993af\";\n@import \"01c6d08aaf920097\";\n","/*\n * Copyright 2024 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\nimport {\n PopoverProps as AriaPopoverProps,\n Select as AriaSelect,\n SelectProps as AriaSelectProps,\n Button,\n ContextValue,\n DEFAULT_SLOT,\n ListBox,\n ListBoxItem,\n ListBoxItemProps,\n ListBoxProps,\n Provider,\n SelectValue\n} from 'react-aria-components';\nimport {centerBaseline} from './CenterBaseline';\nimport {\n checkmark,\n description,\n icon,\n label,\n menuitem,\n sectionHeader,\n sectionHeading\n} from './Menu';\nimport CheckmarkIcon from '../ui-icons/Checkmark';\nimport ChevronIcon from '../ui-icons/Chevron';\nimport {edgeToText, focusRing, size, style} from '../style' with {type: 'macro'};\nimport {fieldInput, StyleProps} from './style-utils' with {type: 'macro'};\nimport {\n FieldLabel\n} from './Field';\nimport {FocusableRef, FocusableRefValue, SpectrumLabelableProps} from '@react-types/shared';\nimport {forwardRefType} from './types';\nimport {HeaderContext, HeadingContext, Text, TextContext} from './Content';\nimport {IconContext} from './Icon';\nimport {Placement} from 'react-aria';\nimport {PopoverBase} from './Popover';\nimport {pressScale} from './pressScale';\nimport {raw} from '../style/style-macro' with {type: 'macro'};\nimport React, {createContext, forwardRef, ReactNode, useContext, useRef} from 'react';\nimport {useFocusableRef} from '@react-spectrum/utils';\nimport {useFormProps} from './Form';\nimport {useSpectrumContextProps} from './useSpectrumContextProps';\nexport interface PickerStyleProps {\n}\nexport interface PickerProps<T extends object> extends\n Omit<AriaSelectProps<T>, 'children' | 'style' | 'className' | 'placeholder'>,\n PickerStyleProps,\n StyleProps,\n SpectrumLabelableProps,\n Pick<ListBoxProps<T>, 'items'>,\n Pick<AriaPopoverProps, 'shouldFlip'> {\n /** The contents of the collection. */\n children: ReactNode | ((item: T) => ReactNode),\n /**\n * Direction the menu will render relative to the Picker.\n *\n * @default 'bottom'\n */\n direction?: 'bottom' | 'top',\n /**\n * Alignment of the menu relative to the input target.\n *\n * @default 'start'\n */\n align?: 'start' | 'end',\n /** Width of the menu. By default, matches width of the trigger. Note that the minimum width of the dropdown is always equal to the trigger's width. */\n menuWidth?: number,\n /** Density of the tabs, affects the height of the picker. */\n density: 'compact' | 'regular',\n /**\n * If the tab picker should only display icon and no text for the button label.\n * @default 'show\n */\n labelBehavior?: 'show' | 'hide',\n /** Id for the SelectedValue so we can label using it. */\n valueId?: string\n}\nexport const PickerContext = createContext<ContextValue<Partial<PickerProps<any>>, FocusableRefValue<HTMLButtonElement>>>(null);\nconst inputButton = style({\n ...focusRing(),\n ...fieldInput(),\n outlineStyle: {\n default: 'none',\n isFocusVisible: 'solid'\n },\n position: 'relative',\n font: 'ui',\n display: 'flex',\n textAlign: 'start',\n borderStyle: 'none',\n borderRadius: 'sm',\n alignItems: 'center',\n transition: 'default',\n columnGap: 'text-to-visual',\n paddingX: 0,\n backgroundColor: 'transparent',\n color: {\n default: 'neutral',\n isDisabled: 'disabled'\n },\n maxWidth: {\n isQuiet: 'max'\n },\n disableTapHighlight: true,\n height: {\n default: 48,\n density: {\n compact: 32\n }\n },\n boxSizing: 'border-box'\n});\nexport let menu = style({\n outlineStyle: 'none',\n display: 'grid',\n gridTemplateColumns: [edgeToText(32), 'auto', 'auto', 'minmax(0, 1fr)', 'auto', 'auto', 'auto', edgeToText(32)],\n boxSizing: 'border-box',\n maxHeight: '[inherit]',\n overflow: 'auto',\n padding: 8,\n fontFamily: 'sans',\n fontSize: 'control'\n});\nconst valueStyles = style({\n flexGrow: 0,\n truncate: true,\n display: 'flex',\n alignItems: 'center',\n height: 'full'\n});\nconst iconStyles = style({\n flexShrink: 0,\n rotate: 90,\n '--iconPrimary': {\n type: 'fill',\n value: 'currentColor'\n }\n});\nconst iconCenterWrapper = style({\n display: 'flex',\n gridArea: 'icon',\n paddingStart: {\n labelBehavior: {\n hide: size(6)\n }\n }\n});\nlet InsideSelectValueContext = createContext(false);\nfunction Picker<T extends object>(props: PickerProps<T>, ref: FocusableRef<HTMLButtonElement>) {\n [props, ref] = useSpectrumContextProps(props, ref, PickerContext);\n let domRef = useFocusableRef(ref);\n props = useFormProps(props);\n let {\n direction = 'bottom',\n align = 'start',\n shouldFlip = true,\n children,\n items,\n density,\n labelBehavior = 'show',\n valueId,\n ...pickerProps\n } = props;\n let isQuiet = true;\n const menuOffset: number = 6;\n const size = 'M';\n let ariaLabelledby = props['aria-labelledby'] ?? '';\n return (\n <div>\n <AriaSelect\n {...pickerProps}\n aria-labelledby={`${labelBehavior === 'hide' ? valueId : ''} ${ariaLabelledby}`}>\n {({isOpen}) => (\n <>\n <FieldLabel isQuiet={isQuiet} />\n <Button\n ref={domRef}\n style={renderProps => pressScale(domRef)(renderProps)}\n // Prevent press scale from sticking while Picker is open.\n // @ts-ignore\n isPressed={false}\n className={renderProps => inputButton({\n ...renderProps,\n size: 'M',\n isOpen,\n isQuiet,\n density\n })}>\n <SelectValue className={valueStyles + ' ' + raw('&> * {display: none;}')}>\n {({defaultChildren}) => {\n return (\n <Provider\n values={[\n [IconContext, {\n slots: {\n icon: {\n render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({labelBehavior})}),\n styles: icon\n }\n }\n }],\n [TextContext, {\n slots: {\n // Default slot is useful when converting other collections to PickerItems.\n [DEFAULT_SLOT]: {\n id: valueId,\n styles: style({\n display: {\n default: 'block',\n labelBehavior: {\n hide: 'none'\n }\n },\n flexGrow: 1,\n truncate: true\n })({labelBehavior})\n }\n }\n }],\n [InsideSelectValueContext, true]\n ]}>\n {defaultChildren}\n </Provider>\n );\n }}\n </SelectValue>\n <ChevronIcon\n size={size}\n className={iconStyles} />\n </Button>\n <PopoverBase\n hideArrow\n offset={menuOffset}\n placement={`${direction} ${align}` as Placement}\n shouldFlip={shouldFlip}\n styles={style({\n marginStart: -12,\n minWidth: 192,\n width: '[calc(var(--trigger-width) + (-2 * self(marginStart)))]'\n })}>\n <Provider\n values={[\n [HeaderContext, {styles: sectionHeader({size})}],\n [HeadingContext, {styles: sectionHeading}],\n [TextContext, {\n slots: {\n description: {styles: description({size})}\n }\n }]\n ]}>\n <ListBox\n items={items}\n className={menu}>\n {children}\n </ListBox>\n </Provider>\n </PopoverBase>\n </>\n )}\n </AriaSelect>\n <TabLine isDisabled={props.isDisabled} />\n </div>\n );\n}\n/**\n * Pickers allow users to choose a single option from a collapsible list of options when space is limited.\n */\nlet _Picker = /*#__PURE__*/ (forwardRef as forwardRefType)(Picker);\nexport {_Picker as Picker};\n\n\nconst selectedIndicator = style({\n backgroundColor: {\n default: 'neutral',\n isDisabled: 'disabled',\n forcedColors: {\n default: 'Highlight',\n isDisabled: 'GrayText'\n }\n },\n height: '[2px]',\n borderStyle: 'none',\n borderRadius: 'full',\n marginTop: '[-2px]',\n transitionDuration: 130,\n transitionTimingFunction: 'in-out'\n});\nfunction TabLine(props) {\n return <div className={selectedIndicator(props)} />;\n}\n\n\nexport interface PickerItemProps extends Omit<ListBoxItemProps, 'children' | 'style' | 'className'>, StyleProps {\n children: ReactNode\n}\nexport function PickerItem(props: PickerItemProps) {\n let ref = useRef(null);\n let isLink = props.href != null;\n const size = 'M';\n return (\n <ListBoxItem\n {...props}\n ref={ref}\n textValue={props.textValue || (typeof props.children === 'string' ? props.children as string : undefined)}\n style={pressScale(ref, props.UNSAFE_style)}\n className={renderProps => (props.UNSAFE_className || '') + menuitem({...renderProps, size, isLink}, props.styles)}>\n {(renderProps) => {\n let {children} = props;\n return (\n <DefaultProvider\n context={IconContext}\n value={{slots: {\n icon: {render: centerBaseline({slot: 'icon', styles: iconCenterWrapper({})}), styles: icon}\n }}}>\n <DefaultProvider\n context={TextContext}\n value={{\n slots: {\n [DEFAULT_SLOT]: {styles: label({size})}\n }\n }}>\n {!isLink && <CheckmarkIcon size={size} className={checkmark({...renderProps, size})} />}\n {typeof children === 'string' ? <Text>{children}</Text> : children}\n </DefaultProvider>\n </DefaultProvider>\n );\n }}\n </ListBoxItem>\n );\n}\n// A Context.Provider that only sets a value if not inside SelectValue.\nfunction DefaultProvider({context, value, children}: {context: React.Context<any>, value: any, children: any}) {\n let inSelectValue = useContext(InsideSelectValueContext);\n if (inSelectValue) {\n return children;\n }\n return <context.Provider value={value}>{children}</context.Provider>;\n}\n"],"names":[],"version":3,"file":"TabsPicker.css.map"}