@sanity/ui 4.0.0-static.9 → 4.0.0

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 (677) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +25 -7
  3. package/dist/_system-CTe2lb5l.d.ts +40 -0
  4. package/dist/_system-CTe2lb5l.d.ts.map +1 -0
  5. package/dist/arrow-CHE8-_G7.js +161 -0
  6. package/dist/arrow-CHE8-_G7.js.map +1 -0
  7. package/dist/autocomplete.d.ts +140 -0
  8. package/dist/autocomplete.d.ts.map +1 -0
  9. package/dist/autocomplete.js +475 -0
  10. package/dist/autocomplete.js.map +1 -0
  11. package/dist/breadcrumbs.d.ts +18 -0
  12. package/dist/breadcrumbs.d.ts.map +1 -0
  13. package/dist/breadcrumbs.js +116 -0
  14. package/dist/breadcrumbs.js.map +1 -0
  15. package/dist/button-dnqMFkWg.d.ts +76 -0
  16. package/dist/button-dnqMFkWg.d.ts.map +1 -0
  17. package/dist/button-mxfSqr0n.js +179 -0
  18. package/dist/button-mxfSqr0n.js.map +1 -0
  19. package/dist/card-C0a0wQTc.d.ts +7 -0
  20. package/dist/card-C0a0wQTc.d.ts.map +1 -0
  21. package/dist/code.d.ts +20 -0
  22. package/dist/code.d.ts.map +1 -0
  23. package/dist/code.js +90 -0
  24. package/dist/code.js.map +1 -0
  25. package/dist/codeFontStyle-DYUujk7K.js +11 -0
  26. package/dist/codeFontStyle-DYUujk7K.js.map +1 -0
  27. package/dist/component-DVlwaWB-.d.ts +25 -0
  28. package/dist/component-DVlwaWB-.d.ts.map +1 -0
  29. package/dist/element-BYgCE_iK.js +51 -0
  30. package/dist/element-BYgCE_iK.js.map +1 -0
  31. package/dist/factory-BA3gEfyI.js +3056 -0
  32. package/dist/factory-BA3gEfyI.js.map +1 -0
  33. package/dist/flex-C-5JHi1C.js +76 -0
  34. package/dist/flex-C-5JHi1C.js.map +1 -0
  35. package/dist/font-EtfxKPUz.d.ts +49 -0
  36. package/dist/font-EtfxKPUz.d.ts.map +1 -0
  37. package/dist/getElementRef-5HZQ-Owu.js +91 -0
  38. package/dist/getElementRef-5HZQ-Owu.js.map +1 -0
  39. package/dist/getScopedTheme-C-sZsyAz.js +267 -0
  40. package/dist/getScopedTheme-C-sZsyAz.js.map +1 -0
  41. package/dist/getTheme_v2-y09KqtEb.js +487 -0
  42. package/dist/getTheme_v2-y09KqtEb.js.map +1 -0
  43. package/dist/grid-BXHFJhf_.js +115 -0
  44. package/dist/grid-BXHFJhf_.js.map +1 -0
  45. package/dist/helpers-bwfx1e-Y.js +67 -0
  46. package/dist/helpers-bwfx1e-Y.js.map +1 -0
  47. package/dist/hotkeys-CmmTQZpn.js +165 -0
  48. package/dist/hotkeys-CmmTQZpn.js.map +1 -0
  49. package/dist/index.d.ts +1192 -2168
  50. package/dist/index.d.ts.map +1 -0
  51. package/dist/index.js +2069 -4483
  52. package/dist/index.js.map +1 -1
  53. package/dist/layer-B98ynOf2.js +61 -0
  54. package/dist/layer-B98ynOf2.js.map +1 -0
  55. package/dist/layer-ChlP9Ik6.d.ts +242 -0
  56. package/dist/layer-ChlP9Ik6.d.ts.map +1 -0
  57. package/dist/menu.d.ts +146 -0
  58. package/dist/menu.d.ts.map +1 -0
  59. package/dist/menu.js +614 -0
  60. package/dist/menu.js.map +1 -0
  61. package/dist/popover-CMlQeKn0.d.ts +96 -0
  62. package/dist/popover-CMlQeKn0.d.ts.map +1 -0
  63. package/dist/popover-PorX5Jv9.js +419 -0
  64. package/dist/popover-PorX5Jv9.js.map +1 -0
  65. package/dist/popover.d.ts +2 -0
  66. package/dist/popover.js +3 -0
  67. package/dist/refractor-CC48DwHi.js +20 -0
  68. package/dist/refractor-CC48DwHi.js.map +1 -0
  69. package/dist/responsiveFont-hN1mZFjm.js +55 -0
  70. package/dist/responsiveFont-hN1mZFjm.js.map +1 -0
  71. package/dist/rgba-BSYaEUW6.d.ts +846 -0
  72. package/dist/rgba-BSYaEUW6.d.ts.map +1 -0
  73. package/dist/selectable-B0GUIL74.d.ts +7 -0
  74. package/dist/selectable-B0GUIL74.d.ts.map +1 -0
  75. package/dist/stack-iW9HuGLg.js +112 -0
  76. package/dist/stack-iW9HuGLg.js.map +1 -0
  77. package/dist/styles-css.d.ts +2 -0
  78. package/dist/styles-css.js +4 -0
  79. package/dist/styles.css +28 -0
  80. package/dist/textInput-udxyGbm1.js +321 -0
  81. package/dist/textInput-udxyGbm1.js.map +1 -0
  82. package/dist/theme.d.ts +240 -459
  83. package/dist/theme.d.ts.map +1 -0
  84. package/dist/theme.js +55 -870
  85. package/dist/theme.js.map +1 -1
  86. package/dist/toast.d.ts +73 -0
  87. package/dist/toast.d.ts.map +1 -0
  88. package/dist/toast.js +297 -0
  89. package/dist/toast.js.map +1 -0
  90. package/dist/tooltip.d.ts +88 -0
  91. package/dist/tooltip.d.ts.map +1 -0
  92. package/dist/tooltip.js +447 -0
  93. package/dist/tooltip.js.map +1 -0
  94. package/dist/useClickOutsideEvent-lEVhDFCQ.js +36 -0
  95. package/dist/useClickOutsideEvent-lEVhDFCQ.js.map +1 -0
  96. package/dist/useElementSize-BJvbGHq8.js +51 -0
  97. package/dist/useElementSize-BJvbGHq8.js.map +1 -0
  98. package/dist/useLayer-BAVfmbNN.js +712 -0
  99. package/dist/useLayer-BAVfmbNN.js.map +1 -0
  100. package/package.json +73 -208
  101. package/dist/_chunks-cjs/refractor.cjs +0 -22
  102. package/dist/_chunks-cjs/refractor.cjs.map +0 -1
  103. package/dist/_chunks-es/refractor.js +0 -25
  104. package/dist/_chunks-es/refractor.js.map +0 -1
  105. package/dist/css/index.cjs +0 -966
  106. package/dist/css/index.cjs.map +0 -1
  107. package/dist/css/index.css +0 -23387
  108. package/dist/css/index.css.map +0 -1
  109. package/dist/css/index.d.cts +0 -1394
  110. package/dist/css/index.d.ts +0 -1394
  111. package/dist/css/index.js +0 -967
  112. package/dist/css/index.js.map +0 -1
  113. package/dist/index.cjs +0 -4515
  114. package/dist/index.cjs.map +0 -1
  115. package/dist/index.d.cts +0 -2521
  116. package/dist/theme.cjs +0 -870
  117. package/dist/theme.cjs.map +0 -1
  118. package/dist/theme.d.cts +0 -499
  119. package/exports/css.ts +0 -1
  120. package/exports/index.ts +0 -1
  121. package/exports/theme.ts +0 -1
  122. package/src/core/Root.tsx +0 -88
  123. package/src/core/RootProvider.tsx +0 -40
  124. package/src/core/__workshop__/boundary.tsx +0 -28
  125. package/src/core/__workshop__/index.ts +0 -16
  126. package/src/core/components/autocomplete/__workshop__/async.tsx +0 -156
  127. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +0 -131
  128. package/src/core/components/autocomplete/__workshop__/custom.tsx +0 -91
  129. package/src/core/components/autocomplete/__workshop__/example.tsx +0 -80
  130. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +0 -36
  131. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +0 -292
  132. package/src/core/components/autocomplete/__workshop__/index.ts +0 -41
  133. package/src/core/components/autocomplete/__workshop__/mock/apiStore.ts +0 -49
  134. package/src/core/components/autocomplete/__workshop__/mock/countries.ts +0 -245
  135. package/src/core/components/autocomplete/__workshop__/types.ts +0 -4
  136. package/src/core/components/autocomplete/autocomplete.tsx +0 -690
  137. package/src/core/components/autocomplete/autocompleteOption.tsx +0 -45
  138. package/src/core/components/autocomplete/autocompleteReducer.ts +0 -47
  139. package/src/core/components/autocomplete/constants.ts +0 -28
  140. package/src/core/components/autocomplete/types.ts +0 -103
  141. package/src/core/components/breadcrumbs/__workshop__/example.tsx +0 -61
  142. package/src/core/components/breadcrumbs/__workshop__/index.ts +0 -16
  143. package/src/core/components/breadcrumbs/breadcrumbs.tsx +0 -131
  144. package/src/core/components/dialog/__workshop__/activate.tsx +0 -141
  145. package/src/core/components/dialog/__workshop__/autoFocus.tsx +0 -29
  146. package/src/core/components/dialog/__workshop__/index.ts +0 -21
  147. package/src/core/components/dialog/__workshop__/layering.tsx +0 -41
  148. package/src/core/components/dialog/__workshop__/nested.tsx +0 -71
  149. package/src/core/components/dialog/__workshop__/onScroll.tsx +0 -51
  150. package/src/core/components/dialog/__workshop__/panes.tsx +0 -89
  151. package/src/core/components/dialog/__workshop__/position.tsx +0 -30
  152. package/src/core/components/dialog/__workshop__/props.tsx +0 -77
  153. package/src/core/components/dialog/__workshop__/provider.tsx +0 -11
  154. package/src/core/components/dialog/__workshop__/wrapped.tsx +0 -76
  155. package/src/core/components/dialog/dialog.tsx +0 -232
  156. package/src/core/components/dialog/dialogCard.tsx +0 -233
  157. package/src/core/components/dialog/dialogContext.ts +0 -21
  158. package/src/core/components/dialog/dialogProvider.tsx +0 -34
  159. package/src/core/components/dialog/isTargetWithinScope.ts +0 -14
  160. package/src/core/components/dialog/types.ts +0 -2
  161. package/src/core/components/dialog/useDialog.ts +0 -11
  162. package/src/core/components/hotkeys/__workshop__/index.ts +0 -16
  163. package/src/core/components/hotkeys/__workshop__/plain.tsx +0 -9
  164. package/src/core/components/hotkeys/hotkeys.tsx +0 -60
  165. package/src/core/components/menu/__workshop__/asComponent.tsx +0 -45
  166. package/src/core/components/menu/__workshop__/avatarMenu.tsx +0 -57
  167. package/src/core/components/menu/__workshop__/closableMenuButton.tsx +0 -47
  168. package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +0 -133
  169. package/src/core/components/menu/__workshop__/customMenuItem.tsx +0 -45
  170. package/src/core/components/menu/__workshop__/customSelectedState.tsx +0 -35
  171. package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +0 -40
  172. package/src/core/components/menu/__workshop__/groups.tsx +0 -156
  173. package/src/core/components/menu/__workshop__/index.ts +0 -91
  174. package/src/core/components/menu/__workshop__/menuButton.tsx +0 -80
  175. package/src/core/components/menu/__workshop__/menuGroupRight.tsx +0 -65
  176. package/src/core/components/menu/__workshop__/nestedMenu.tsx +0 -22
  177. package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +0 -50
  178. package/src/core/components/menu/__workshop__/selectedItem.tsx +0 -69
  179. package/src/core/components/menu/__workshop__/shouldFocus.tsx +0 -42
  180. package/src/core/components/menu/__workshop__/tones.tsx +0 -25
  181. package/src/core/components/menu/__workshop__/withoutArrow.tsx +0 -32
  182. package/src/core/components/menu/helpers.ts +0 -82
  183. package/src/core/components/menu/menu.test.tsx +0 -129
  184. package/src/core/components/menu/menu.tsx +0 -179
  185. package/src/core/components/menu/menuButton.tsx +0 -225
  186. package/src/core/components/menu/menuContext.ts +0 -19
  187. package/src/core/components/menu/menuDivider.tsx +0 -32
  188. package/src/core/components/menu/menuGroup.tsx +0 -233
  189. package/src/core/components/menu/menuItem.tsx +0 -184
  190. package/src/core/components/menu/useMenu.ts +0 -21
  191. package/src/core/components/menu/useMenuController.ts +0 -241
  192. package/src/core/components/tab/__workshop__/example.tsx +0 -79
  193. package/src/core/components/tab/__workshop__/index.ts +0 -16
  194. package/src/core/components/tab/tab.tsx +0 -109
  195. package/src/core/components/tab/tabList.tsx +0 -90
  196. package/src/core/components/tab/tabPanel.tsx +0 -47
  197. package/src/core/components/toast/__workshop__/hook.tsx +0 -71
  198. package/src/core/components/toast/__workshop__/index.ts +0 -21
  199. package/src/core/components/toast/__workshop__/toast.tsx +0 -26
  200. package/src/core/components/toast/toast.test.tsx +0 -103
  201. package/src/core/components/toast/toast.tsx +0 -191
  202. package/src/core/components/toast/toastContext.ts +0 -7
  203. package/src/core/components/toast/toastLayer.tsx +0 -54
  204. package/src/core/components/toast/toastProvider.tsx +0 -112
  205. package/src/core/components/toast/toastState.ts +0 -6
  206. package/src/core/components/toast/types.ts +0 -24
  207. package/src/core/components/toast/useToast.ts +0 -23
  208. package/src/core/components/tree/__workshop__/basic.perf.ts +0 -19
  209. package/src/core/components/tree/__workshop__/basic.tsx +0 -105
  210. package/src/core/components/tree/__workshop__/index.ts +0 -23
  211. package/src/core/components/tree/__workshop__/tabFromElement.tsx +0 -84
  212. package/src/core/components/tree/helpers.ts +0 -105
  213. package/src/core/components/tree/tree.tsx +0 -248
  214. package/src/core/components/tree/treeContext.ts +0 -10
  215. package/src/core/components/tree/treeGroup.tsx +0 -46
  216. package/src/core/components/tree/treeItem.tsx +0 -237
  217. package/src/core/components/tree/types.ts +0 -24
  218. package/src/core/components/tree/useTree.ts +0 -17
  219. package/src/core/components/virtualList/__workshop__/changingProps.tsx +0 -36
  220. package/src/core/components/virtualList/__workshop__/elementScroll.tsx +0 -24
  221. package/src/core/components/virtualList/__workshop__/index.ts +0 -31
  222. package/src/core/components/virtualList/__workshop__/infiniteList.tsx +0 -48
  223. package/src/core/components/virtualList/__workshop__/windowScrolll.tsx +0 -22
  224. package/src/core/components/virtualList/virtualList.tsx +0 -209
  225. package/src/core/constants.ts +0 -67
  226. package/src/core/helpers/animation.ts +0 -27
  227. package/src/core/helpers/element.ts +0 -55
  228. package/src/core/helpers/focus.ts +0 -92
  229. package/src/core/helpers/props.ts +0 -28
  230. package/src/core/helpers/scroll.ts +0 -15
  231. package/src/core/hooks/useClickOutsideEvent.test.tsx +0 -114
  232. package/src/core/hooks/useClickOutsideEvent.ts +0 -67
  233. package/src/core/hooks/useCustomValidity.ts +0 -13
  234. package/src/core/hooks/useDelayed.test.ts +0 -67
  235. package/src/core/hooks/useDelayedState.ts +0 -28
  236. package/src/core/hooks/useElementSize.ts +0 -19
  237. package/src/core/hooks/useGlobalKeyDown.ts +0 -17
  238. package/src/core/hooks/useMatchMedia.ts +0 -28
  239. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +0 -16
  240. package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +0 -14
  241. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +0 -21
  242. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +0 -107
  243. package/src/core/hooks/useMounted.ts +0 -15
  244. package/src/core/hooks/usePrefersDark.hydration.test.tsx +0 -56
  245. package/src/core/hooks/usePrefersDark.test.tsx +0 -20
  246. package/src/core/hooks/usePrefersDark.ts +0 -16
  247. package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +0 -56
  248. package/src/core/hooks/usePrefersReducedMotion.test.tsx +0 -20
  249. package/src/core/hooks/usePrefersReducedMotion.ts +0 -16
  250. package/src/core/hooks/useResponsiveProp.ts +0 -28
  251. package/src/core/index.ts +0 -115
  252. package/src/core/lib/createGlobalScopedContext.ts +0 -37
  253. package/src/core/lib/globalScope.ts +0 -19
  254. package/src/core/lib/isArray.ts +0 -3
  255. package/src/core/lib/isRecord.ts +0 -3
  256. package/src/core/middleware/origin.ts +0 -47
  257. package/src/core/observers/elementSize.ts +0 -116
  258. package/src/core/observers/resize.ts +0 -9
  259. package/src/core/primitives/arrow/arrow.tsx +0 -74
  260. package/src/core/primitives/arrow/cmds.ts +0 -91
  261. package/src/core/primitives/avatar/__workshop__/asButton.tsx +0 -14
  262. package/src/core/primitives/avatar/__workshop__/index.ts +0 -31
  263. package/src/core/primitives/avatar/__workshop__/stack.tsx +0 -25
  264. package/src/core/primitives/avatar/__workshop__/withinButton.tsx +0 -55
  265. package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +0 -72
  266. package/src/core/primitives/avatar/avatar.tsx +0 -147
  267. package/src/core/primitives/avatar/avatarCounter.tsx +0 -69
  268. package/src/core/primitives/avatar/avatarStack.tsx +0 -79
  269. package/src/core/primitives/avatar/types.ts +0 -2
  270. package/src/core/primitives/badge/__workshop__/index.ts +0 -21
  271. package/src/core/primitives/badge/__workshop__/props.tsx +0 -19
  272. package/src/core/primitives/badge/__workshop__/tones.tsx +0 -16
  273. package/src/core/primitives/badge/badge.test.tsx +0 -16
  274. package/src/core/primitives/badge/badge.tsx +0 -61
  275. package/src/core/primitives/box/__workshop__/index.ts +0 -21
  276. package/src/core/primitives/box/__workshop__/props.tsx +0 -20
  277. package/src/core/primitives/box/__workshop__/responsive.tsx +0 -20
  278. package/src/core/primitives/box/box.tsx +0 -222
  279. package/src/core/primitives/button/__workshop__/custom.tsx +0 -27
  280. package/src/core/primitives/button/__workshop__/customIcons.tsx +0 -30
  281. package/src/core/primitives/button/__workshop__/disabled.tsx +0 -54
  282. package/src/core/primitives/button/__workshop__/index.ts +0 -66
  283. package/src/core/primitives/button/__workshop__/mixedChildren.tsx +0 -12
  284. package/src/core/primitives/button/__workshop__/props.tsx +0 -55
  285. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +0 -36
  286. package/src/core/primitives/button/__workshop__/stacked.tsx +0 -58
  287. package/src/core/primitives/button/__workshop__/styled1.tsx +0 -17
  288. package/src/core/primitives/button/__workshop__/styled2.tsx +0 -19
  289. package/src/core/primitives/button/__workshop__/textOverflow.tsx +0 -13
  290. package/src/core/primitives/button/__workshop__/uploadButton.tsx +0 -29
  291. package/src/core/primitives/button/button.test.tsx +0 -30
  292. package/src/core/primitives/button/button.tsx +0 -193
  293. package/src/core/primitives/button/types.ts +0 -2
  294. package/src/core/primitives/card/__workshop__/asButton.tsx +0 -107
  295. package/src/core/primitives/card/__workshop__/asComponent.tsx +0 -27
  296. package/src/core/primitives/card/__workshop__/checkered.tsx +0 -26
  297. package/src/core/primitives/card/__workshop__/index.ts +0 -20
  298. package/src/core/primitives/card/__workshop__/interactive.tsx +0 -29
  299. package/src/core/primitives/card/__workshop__/listNavigation.tsx +0 -78
  300. package/src/core/primitives/card/__workshop__/props.tsx +0 -52
  301. package/src/core/primitives/card/__workshop__/selected.tsx +0 -62
  302. package/src/core/primitives/card/__workshop__/styled.tsx +0 -14
  303. package/src/core/primitives/card/__workshop__/tones.tsx +0 -27
  304. package/src/core/primitives/card/card.tsx +0 -109
  305. package/src/core/primitives/card/cardContext.ts +0 -10
  306. package/src/core/primitives/card/cardProvider.tsx +0 -27
  307. package/src/core/primitives/card/types.ts +0 -17
  308. package/src/core/primitives/card/useCard.ts +0 -15
  309. package/src/core/primitives/checkbox/__workshop__/example.tsx +0 -25
  310. package/src/core/primitives/checkbox/__workshop__/index.ts +0 -15
  311. package/src/core/primitives/checkbox/__workshop__/props.tsx +0 -35
  312. package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +0 -16
  313. package/src/core/primitives/checkbox/__workshop__/tones.tsx +0 -27
  314. package/src/core/primitives/checkbox/checkbox.tsx +0 -80
  315. package/src/core/primitives/code/__workshop__/index.ts +0 -21
  316. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +0 -23
  317. package/src/core/primitives/code/__workshop__/props.tsx +0 -18
  318. package/src/core/primitives/code/code.tsx +0 -48
  319. package/src/core/primitives/code/refractor.tsx +0 -18
  320. package/src/core/primitives/container/__workshop__/example.tsx +0 -20
  321. package/src/core/primitives/container/__workshop__/index.ts +0 -10
  322. package/src/core/primitives/container/container.tsx +0 -37
  323. package/src/core/primitives/container/types.ts +0 -6
  324. package/src/core/primitives/flex/__workshop__/example.tsx +0 -34
  325. package/src/core/primitives/flex/__workshop__/gap.tsx +0 -25
  326. package/src/core/primitives/flex/__workshop__/index.ts +0 -13
  327. package/src/core/primitives/flex/flex.tsx +0 -58
  328. package/src/core/primitives/grid/__workshop__/index.ts +0 -12
  329. package/src/core/primitives/grid/__workshop__/responsive.tsx +0 -54
  330. package/src/core/primitives/grid/grid.tsx +0 -35
  331. package/src/core/primitives/heading/__workshop__/index.ts +0 -21
  332. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +0 -54
  333. package/src/core/primitives/heading/__workshop__/plain.tsx +0 -29
  334. package/src/core/primitives/heading/heading.tsx +0 -78
  335. package/src/core/primitives/inline/__workshop__/index.ts +0 -10
  336. package/src/core/primitives/inline/__workshop__/plain.tsx +0 -24
  337. package/src/core/primitives/inline/inline.tsx +0 -62
  338. package/src/core/primitives/kbd/__workshop__/index.ts +0 -10
  339. package/src/core/primitives/kbd/__workshop__/plain.tsx +0 -9
  340. package/src/core/primitives/kbd/kbd.tsx +0 -57
  341. package/src/core/primitives/label/__workshop__/index.ts +0 -21
  342. package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +0 -54
  343. package/src/core/primitives/label/__workshop__/plain.tsx +0 -28
  344. package/src/core/primitives/label/label.tsx +0 -75
  345. package/src/core/primitives/layer/__workshop__/_debug.tsx +0 -17
  346. package/src/core/primitives/layer/__workshop__/index.ts +0 -26
  347. package/src/core/primitives/layer/__workshop__/multipleRoots.tsx +0 -49
  348. package/src/core/primitives/layer/__workshop__/nested.tsx +0 -98
  349. package/src/core/primitives/layer/__workshop__/responsiveZOffset.tsx +0 -17
  350. package/src/core/primitives/layer/getLayerContext.test.ts +0 -32
  351. package/src/core/primitives/layer/getLayerContext.ts +0 -21
  352. package/src/core/primitives/layer/layer.test.tsx +0 -110
  353. package/src/core/primitives/layer/layer.tsx +0 -42
  354. package/src/core/primitives/layer/layerCard.tsx +0 -90
  355. package/src/core/primitives/layer/layerContext.ts +0 -7
  356. package/src/core/primitives/layer/layerProvider.tsx +0 -106
  357. package/src/core/primitives/layer/types.ts +0 -9
  358. package/src/core/primitives/layer/useLayer.ts +0 -24
  359. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +0 -77
  360. package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +0 -31
  361. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +0 -32
  362. package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +0 -11
  363. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +0 -71
  364. package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +0 -69
  365. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +0 -96
  366. package/src/core/primitives/popover/__workshop__/TestStory.tsx +0 -100
  367. package/src/core/primitives/popover/__workshop__/index.ts +0 -51
  368. package/src/core/primitives/popover/constants.ts +0 -22
  369. package/src/core/primitives/popover/floating-ui/size.ts +0 -83
  370. package/src/core/primitives/popover/helpers.ts +0 -32
  371. package/src/core/primitives/popover/popover.tsx +0 -443
  372. package/src/core/primitives/popover/popoverLayer.tsx +0 -149
  373. package/src/core/primitives/popover/types.ts +0 -12
  374. package/src/core/primitives/radio/__workshop__/example.tsx +0 -63
  375. package/src/core/primitives/radio/__workshop__/index.ts +0 -13
  376. package/src/core/primitives/radio/__workshop__/plain.tsx +0 -28
  377. package/src/core/primitives/radio/radio.tsx +0 -64
  378. package/src/core/primitives/select/__workshop__/index.ts +0 -13
  379. package/src/core/primitives/select/__workshop__/plain.tsx +0 -39
  380. package/src/core/primitives/select/__workshop__/readOnly.tsx +0 -23
  381. package/src/core/primitives/select/select.tsx +0 -75
  382. package/src/core/primitives/selectable/selectable.tsx +0 -50
  383. package/src/core/primitives/skeleton/__workshop__/delay.tsx +0 -70
  384. package/src/core/primitives/skeleton/__workshop__/index.ts +0 -13
  385. package/src/core/primitives/skeleton/__workshop__/skeleton.tsx +0 -64
  386. package/src/core/primitives/skeleton/codeSkeleton.tsx +0 -49
  387. package/src/core/primitives/skeleton/headingSkeleton.tsx +0 -48
  388. package/src/core/primitives/skeleton/labelSkeleton.tsx +0 -47
  389. package/src/core/primitives/skeleton/skeleton.tsx +0 -70
  390. package/src/core/primitives/skeleton/textSkeleton.tsx +0 -49
  391. package/src/core/primitives/spinner/__workshop__/Props.tsx +0 -15
  392. package/src/core/primitives/spinner/__workshop__/index.ts +0 -16
  393. package/src/core/primitives/spinner/animatedSpinnerIcon.tsx +0 -14
  394. package/src/core/primitives/spinner/spinner.tsx +0 -45
  395. package/src/core/primitives/srOnly/srOnly.tsx +0 -33
  396. package/src/core/primitives/stack/__workshop__/index.ts +0 -16
  397. package/src/core/primitives/stack/__workshop__/plain.tsx +0 -32
  398. package/src/core/primitives/stack/stack.tsx +0 -60
  399. package/src/core/primitives/switch/__workshop__/example.tsx +0 -23
  400. package/src/core/primitives/switch/__workshop__/index.ts +0 -13
  401. package/src/core/primitives/switch/__workshop__/props.tsx +0 -21
  402. package/src/core/primitives/switch/switch.tsx +0 -84
  403. package/src/core/primitives/text/__workshop__/colored.tsx +0 -23
  404. package/src/core/primitives/text/__workshop__/example.tsx +0 -28
  405. package/src/core/primitives/text/__workshop__/index.ts +0 -26
  406. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +0 -23
  407. package/src/core/primitives/text/text.tsx +0 -76
  408. package/src/core/primitives/textArea/__workshop__/index.ts +0 -16
  409. package/src/core/primitives/textArea/__workshop__/plain.tsx +0 -61
  410. package/src/core/primitives/textArea/textArea.tsx +0 -84
  411. package/src/core/primitives/textInput/__workshop__/clearButton.tsx +0 -30
  412. package/src/core/primitives/textInput/__workshop__/customValidity.tsx +0 -17
  413. package/src/core/primitives/textInput/__workshop__/index.ts +0 -46
  414. package/src/core/primitives/textInput/__workshop__/plain.tsx +0 -110
  415. package/src/core/primitives/textInput/__workshop__/readOnly.tsx +0 -9
  416. package/src/core/primitives/textInput/__workshop__/states.tsx +0 -53
  417. package/src/core/primitives/textInput/__workshop__/tones.tsx +0 -277
  418. package/src/core/primitives/textInput/__workshop__/typed.tsx +0 -23
  419. package/src/core/primitives/textInput/textInput.tsx +0 -258
  420. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +0 -102
  421. package/src/core/primitives/tooltip/__workshop__/index.ts +0 -31
  422. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -74
  423. package/src/core/primitives/tooltip/__workshop__/props.tsx +0 -112
  424. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -86
  425. package/src/core/primitives/tooltip/constants.ts +0 -23
  426. package/src/core/primitives/tooltip/tooltip.test.tsx +0 -452
  427. package/src/core/primitives/tooltip/tooltip.tsx +0 -482
  428. package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
  429. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +0 -13
  430. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +0 -55
  431. package/src/core/primitives/tooltip/tooltipDelayGroup/types.ts +0 -10
  432. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +0 -13
  433. package/src/core/primitives/tooltip/tooltipLayer.tsx +0 -106
  434. package/src/core/types.ts +0 -56
  435. package/src/core/utils/boundaryElement/__workshop__/index.ts +0 -16
  436. package/src/core/utils/boundaryElement/__workshop__/plain.tsx +0 -19
  437. package/src/core/utils/boundaryElement/boundaryElement.test.tsx +0 -102
  438. package/src/core/utils/boundaryElement/boundaryElementContext.ts +0 -10
  439. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +0 -18
  440. package/src/core/utils/boundaryElement/types.ts +0 -5
  441. package/src/core/utils/boundaryElement/useBoundaryElement.ts +0 -24
  442. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +0 -41
  443. package/src/core/utils/elementQuery/__workshop__/index.ts +0 -16
  444. package/src/core/utils/elementQuery/elementQuery.tsx +0 -75
  445. package/src/core/utils/elementQuery/helpers.ts +0 -27
  446. package/src/core/utils/errorBoundary.tsx +0 -50
  447. package/src/core/utils/getElementRef.ts +0 -29
  448. package/src/core/utils/portal/__workshop__/index.ts +0 -16
  449. package/src/core/utils/portal/__workshop__/named.tsx +0 -63
  450. package/src/core/utils/portal/portal.test.tsx +0 -105
  451. package/src/core/utils/portal/portal.tsx +0 -36
  452. package/src/core/utils/portal/portalContext.ts +0 -37
  453. package/src/core/utils/portal/portalProvider.tsx +0 -70
  454. package/src/core/utils/portal/types.ts +0 -7
  455. package/src/core/utils/portal/usePortal.ts +0 -23
  456. package/src/css/_assign.ts +0 -3
  457. package/src/css/_composeClassNames.ts +0 -12
  458. package/src/css/_fromEntries.ts +0 -3
  459. package/src/css/_getClassNames.ts +0 -9
  460. package/src/css/_responsiveClassName.ts +0 -45
  461. package/src/css/_responsiveStyle.css.ts +0 -34
  462. package/src/css/_style.css.ts +0 -9
  463. package/src/css/components/breadcrumbs/breadcrumbs.css.ts +0 -6
  464. package/src/css/components/breadcrumbs/breadcrumbs.ts +0 -7
  465. package/src/css/components/dialog/dialog.css.ts +0 -98
  466. package/src/css/components/dialog/dialog.ts +0 -58
  467. package/src/css/components/menu/menu.css.ts +0 -14
  468. package/src/css/components/menu/menu.ts +0 -12
  469. package/src/css/components/skeleton/skeleton.css.ts +0 -128
  470. package/src/css/components/skeleton/skeleton.ts +0 -38
  471. package/src/css/components/skeleton/types.ts +0 -36
  472. package/src/css/components/toast/toast.css.ts +0 -17
  473. package/src/css/components/toast/toast.ts +0 -11
  474. package/src/css/components/tree/tree.css.ts +0 -65
  475. package/src/css/components/tree/tree.ts +0 -7
  476. package/src/css/constants.ts +0 -10
  477. package/src/css/getVarName.ts +0 -27
  478. package/src/css/index.ts +0 -146
  479. package/src/css/layers.css.ts +0 -12
  480. package/src/css/primitives/_arrow/_arrow.css.ts +0 -68
  481. package/src/css/primitives/_arrow/_arrow.ts +0 -26
  482. package/src/css/primitives/_input/_input.css.ts +0 -261
  483. package/src/css/primitives/_input/input.ts +0 -29
  484. package/src/css/primitives/_input/types.ts +0 -13
  485. package/src/css/primitives/avatar/avatar.css.ts +0 -201
  486. package/src/css/primitives/avatar/avatar.ts +0 -68
  487. package/src/css/primitives/avatar/types.ts +0 -10
  488. package/src/css/primitives/badge/badge.css.ts +0 -27
  489. package/src/css/primitives/badge/badge.ts +0 -8
  490. package/src/css/primitives/badge/types.ts +0 -13
  491. package/src/css/primitives/box/box.css.ts +0 -19
  492. package/src/css/primitives/box/box.ts +0 -82
  493. package/src/css/primitives/box/types.ts +0 -75
  494. package/src/css/primitives/button/button.css.ts +0 -287
  495. package/src/css/primitives/button/button.ts +0 -26
  496. package/src/css/primitives/button/types.ts +0 -12
  497. package/src/css/primitives/card/__workshop__/color.tsx +0 -75
  498. package/src/css/primitives/card/__workshop__/index.ts +0 -16
  499. package/src/css/primitives/card/card.css.ts +0 -387
  500. package/src/css/primitives/card/card.ts +0 -13
  501. package/src/css/primitives/card/types.ts +0 -9
  502. package/src/css/primitives/checkbox/checkbox.css.ts +0 -193
  503. package/src/css/primitives/checkbox/checkbox.ts +0 -17
  504. package/src/css/primitives/code/code.css.ts +0 -272
  505. package/src/css/primitives/code/code.ts +0 -19
  506. package/src/css/primitives/code/types.ts +0 -11
  507. package/src/css/primitives/container/container.css.ts +0 -4
  508. package/src/css/primitives/container/container.ts +0 -17
  509. package/src/css/primitives/container/types.ts +0 -9
  510. package/src/css/primitives/heading/heading.css.ts +0 -86
  511. package/src/css/primitives/heading/heading.ts +0 -22
  512. package/src/css/primitives/heading/types.ts +0 -14
  513. package/src/css/primitives/kbd/kbd.css.ts +0 -16
  514. package/src/css/primitives/kbd/kbd.ts +0 -9
  515. package/src/css/primitives/kbd/types.ts +0 -6
  516. package/src/css/primitives/label/label.css.ts +0 -87
  517. package/src/css/primitives/label/label.ts +0 -22
  518. package/src/css/primitives/label/types.ts +0 -14
  519. package/src/css/primitives/popover/popover.css.ts +0 -6
  520. package/src/css/primitives/popover/popover.ts +0 -12
  521. package/src/css/primitives/radio/radio.css.ts +0 -78
  522. package/src/css/primitives/radio/radio.ts +0 -17
  523. package/src/css/primitives/root/root.css.ts +0 -19
  524. package/src/css/primitives/root/root.ts +0 -17
  525. package/src/css/primitives/root/types.ts +0 -10
  526. package/src/css/primitives/select/select.css.ts +0 -24
  527. package/src/css/primitives/select/select.ts +0 -14
  528. package/src/css/primitives/select/types.ts +0 -5
  529. package/src/css/primitives/selectable/selectable.css.ts +0 -131
  530. package/src/css/primitives/selectable/selectable.ts +0 -9
  531. package/src/css/primitives/selectable/types.ts +0 -9
  532. package/src/css/primitives/spinner/spinner.css.ts +0 -19
  533. package/src/css/primitives/spinner/spinner.ts +0 -13
  534. package/src/css/primitives/spinner/types.ts +0 -4
  535. package/src/css/primitives/srOnly/srOnly.css.ts +0 -10
  536. package/src/css/primitives/srOnly/srOnly.ts +0 -7
  537. package/src/css/primitives/stack/stack.css.ts +0 -6
  538. package/src/css/primitives/stack/stack.ts +0 -7
  539. package/src/css/primitives/switch/switch.css.ts +0 -98
  540. package/src/css/primitives/switch/switch.ts +0 -27
  541. package/src/css/primitives/text/text.css.ts +0 -86
  542. package/src/css/primitives/text/text.ts +0 -24
  543. package/src/css/primitives/text/types.ts +0 -18
  544. package/src/css/primitives/textArea/textArea.css.ts +0 -4
  545. package/src/css/primitives/textArea/textArea.ts +0 -9
  546. package/src/css/primitives/textArea/types.ts +0 -7
  547. package/src/css/primitives/textInput/textInput.css.ts +0 -43
  548. package/src/css/primitives/textInput/textInput.ts +0 -24
  549. package/src/css/primitives/textInput/types.ts +0 -7
  550. package/src/css/primitives/tooltip/tooltip.css.ts +0 -4
  551. package/src/css/primitives/tooltip/tooltip.ts +0 -8
  552. package/src/css/primitives/tooltip/types.ts +0 -4
  553. package/src/css/props/alignItems/alignItems.css.ts +0 -22
  554. package/src/css/props/alignItems/alignItems.ts +0 -8
  555. package/src/css/props/alignItems/types.ts +0 -9
  556. package/src/css/props/border/border.css.ts +0 -65
  557. package/src/css/props/border/border.ts +0 -21
  558. package/src/css/props/border/types.ts +0 -13
  559. package/src/css/props/boxSizing/boxSizing.css.ts +0 -12
  560. package/src/css/props/boxSizing/boxSizing.ts +0 -7
  561. package/src/css/props/boxSizing/types.ts +0 -7
  562. package/src/css/props/display/display.css.ts +0 -56
  563. package/src/css/props/display/display.ts +0 -8
  564. package/src/css/props/display/types.ts +0 -16
  565. package/src/css/props/flex/flex.css.ts +0 -52
  566. package/src/css/props/flex/flex.ts +0 -8
  567. package/src/css/props/flex/types.ts +0 -9
  568. package/src/css/props/flexDirection/flexDirection.css.ts +0 -19
  569. package/src/css/props/flexDirection/flexDirection.ts +0 -8
  570. package/src/css/props/flexDirection/types.ts +0 -9
  571. package/src/css/props/flexWrap/flexWrap.css.ts +0 -16
  572. package/src/css/props/flexWrap/flexWrap.ts +0 -8
  573. package/src/css/props/flexWrap/types.ts +0 -9
  574. package/src/css/props/font/font.css.ts +0 -94
  575. package/src/css/props/font/font.ts +0 -8
  576. package/src/css/props/font/types.ts +0 -6
  577. package/src/css/props/gap/gap.css.ts +0 -40
  578. package/src/css/props/gap/gap.ts +0 -13
  579. package/src/css/props/gap/types.ts +0 -10
  580. package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts +0 -19
  581. package/src/css/props/gridAutoColumns/gridAutoColumns.ts +0 -8
  582. package/src/css/props/gridAutoColumns/types.ts +0 -9
  583. package/src/css/props/gridAutoFlow/gridAutoFlow.css.ts +0 -19
  584. package/src/css/props/gridAutoFlow/gridAutoFlow.ts +0 -8
  585. package/src/css/props/gridAutoFlow/types.ts +0 -9
  586. package/src/css/props/gridAutoRows/gridAutoRows.css.ts +0 -19
  587. package/src/css/props/gridAutoRows/gridAutoRows.ts +0 -8
  588. package/src/css/props/gridAutoRows/types.ts +0 -9
  589. package/src/css/props/gridColumn/gridColumn.css.ts +0 -49
  590. package/src/css/props/gridColumn/gridColumn.ts +0 -8
  591. package/src/css/props/gridColumn/types.ts +0 -9
  592. package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts +0 -46
  593. package/src/css/props/gridColumnEnd/gridColumnEnd.ts +0 -8
  594. package/src/css/props/gridColumnEnd/types.ts +0 -9
  595. package/src/css/props/gridColumnStart/gridColumnStart.css.ts +0 -46
  596. package/src/css/props/gridColumnStart/gridColumnStart.ts +0 -8
  597. package/src/css/props/gridColumnStart/types.ts +0 -9
  598. package/src/css/props/gridRow/gridRow.css.ts +0 -49
  599. package/src/css/props/gridRow/gridRow.ts +0 -8
  600. package/src/css/props/gridRow/types.ts +0 -9
  601. package/src/css/props/gridRowEnd/gridRowEnd.css.ts +0 -46
  602. package/src/css/props/gridRowEnd/gridRowEnd.ts +0 -8
  603. package/src/css/props/gridRowEnd/types.ts +0 -9
  604. package/src/css/props/gridRowStart/gridRowStart.css.ts +0 -46
  605. package/src/css/props/gridRowStart/gridRowStart.ts +0 -8
  606. package/src/css/props/gridRowStart/types.ts +0 -9
  607. package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts +0 -43
  608. package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts +0 -8
  609. package/src/css/props/gridTemplateColumns/types.ts +0 -9
  610. package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts +0 -43
  611. package/src/css/props/gridTemplateRows/gridTemplateRows.ts +0 -8
  612. package/src/css/props/gridTemplateRows/types.ts +0 -9
  613. package/src/css/props/height/height.css.ts +0 -25
  614. package/src/css/props/height/height.ts +0 -8
  615. package/src/css/props/height/types.ts +0 -9
  616. package/src/css/props/inset/inset.css.ts +0 -37
  617. package/src/css/props/inset/inset.ts +0 -21
  618. package/src/css/props/inset/types.ts +0 -13
  619. package/src/css/props/justifyContent/justifyContent.css.ts +0 -25
  620. package/src/css/props/justifyContent/justifyContent.ts +0 -8
  621. package/src/css/props/justifyContent/types.ts +0 -15
  622. package/src/css/props/margin/margin.css.ts +0 -117
  623. package/src/css/props/margin/margin.ts +0 -25
  624. package/src/css/props/margin/types.ts +0 -17
  625. package/src/css/props/maxWidth/maxWidth.css.ts +0 -32
  626. package/src/css/props/maxWidth/maxWidth.ts +0 -8
  627. package/src/css/props/maxWidth/types.ts +0 -11
  628. package/src/css/props/minHeight/minHeight.css.ts +0 -13
  629. package/src/css/props/minHeight/minHeight.ts +0 -8
  630. package/src/css/props/minHeight/types.ts +0 -9
  631. package/src/css/props/minWidth/minWidth.css.ts +0 -25
  632. package/src/css/props/minWidth/minWidth.ts +0 -8
  633. package/src/css/props/minWidth/types.ts +0 -9
  634. package/src/css/props/outline/outline.css.ts +0 -10
  635. package/src/css/props/outline/outline.ts +0 -8
  636. package/src/css/props/outline/types.ts +0 -7
  637. package/src/css/props/overflow/overflow.css.ts +0 -16
  638. package/src/css/props/overflow/overflow.ts +0 -8
  639. package/src/css/props/overflow/types.ts +0 -11
  640. package/src/css/props/padding/padding.css.ts +0 -87
  641. package/src/css/props/padding/padding.ts +0 -25
  642. package/src/css/props/padding/types.ts +0 -17
  643. package/src/css/props/pointerEvents/pointerEvents.css.ts +0 -13
  644. package/src/css/props/pointerEvents/pointerEvents.ts +0 -8
  645. package/src/css/props/pointerEvents/types.ts +0 -7
  646. package/src/css/props/position/position.css.ts +0 -22
  647. package/src/css/props/position/position.ts +0 -8
  648. package/src/css/props/position/types.ts +0 -9
  649. package/src/css/props/radius/radius.css.ts +0 -21
  650. package/src/css/props/radius/radius.ts +0 -8
  651. package/src/css/props/radius/types.ts +0 -8
  652. package/src/css/props/shadow/shadow.css.ts +0 -23
  653. package/src/css/props/shadow/shadow.ts +0 -8
  654. package/src/css/props/shadow/types.ts +0 -8
  655. package/src/css/props/textAlign/textAlign.css.ts +0 -22
  656. package/src/css/props/textAlign/textAlign.ts +0 -8
  657. package/src/css/props/textAlign/types.ts +0 -7
  658. package/src/css/props/textOverflow/textOverflow.css.ts +0 -19
  659. package/src/css/props/textOverflow/textOverflow.ts +0 -8
  660. package/src/css/props/textOverflow/types.ts +0 -12
  661. package/src/css/props/width/types.ts +0 -11
  662. package/src/css/props/width/width.css.ts +0 -31
  663. package/src/css/props/width/width.ts +0 -8
  664. package/src/css/theme/buildCSSTheme.ts +0 -488
  665. package/src/css/theme/defaultTheme.css.ts +0 -64
  666. package/src/css/types.ts +0 -427
  667. package/src/css/vars.css.ts +0 -676
  668. package/src/theme/_parseColorToken.ts +0 -180
  669. package/src/theme/buildTheme.ts +0 -32
  670. package/src/theme/constants.ts +0 -90
  671. package/src/theme/defaults/color.ts +0 -197
  672. package/src/theme/defaults/common.ts +0 -71
  673. package/src/theme/defaults/fonts.ts +0 -250
  674. package/src/theme/index.ts +0 -5
  675. package/src/theme/merge.ts +0 -24
  676. package/src/theme/resolveTokens.ts +0 -204
  677. package/src/theme/types.ts +0 -366
package/src/core/Root.tsx DELETED
@@ -1,88 +0,0 @@
1
- import {box, root, type RootStyleProps} from '@sanity/ui/css'
2
- import {useCallback, useImperativeHandle, useRef, useState} from 'react'
3
-
4
- import {Box, type BoxOwnProps} from './primitives/box/box'
5
- import {RootProvider} from './RootProvider'
6
- import type {Props} from './types'
7
-
8
- /** @public */
9
- export const DEFAULT_ROOT_ELEMENT = 'html'
10
-
11
- /** @public */
12
- export interface RootOwnProps extends BoxOwnProps, RootStyleProps {}
13
-
14
- /** @public */
15
- export type RootElementType = 'html' | 'body' | 'div'
16
-
17
- /** @public */
18
- export type RootProps<E extends RootElementType = RootElementType> = Props<RootOwnProps, E>
19
-
20
- /**
21
- * The `Root` component.
22
- *
23
- * @public
24
- */
25
- export function Root<E extends RootElementType = typeof DEFAULT_ROOT_ELEMENT>(
26
- props: RootProps<E>,
27
- ): React.JSX.Element {
28
- const {
29
- as: as = DEFAULT_ROOT_ELEMENT,
30
- children,
31
- className,
32
- height,
33
- overflow = 'hidden',
34
- ref: forwardedRef,
35
- scheme = 'light',
36
- tone = 'default',
37
- ...rest
38
- } = props as RootProps<typeof DEFAULT_ROOT_ELEMENT>
39
-
40
- const ref = useRef<HTMLHtmlElement | null>(null)
41
-
42
- useImperativeHandle<HTMLHtmlElement | null, HTMLHtmlElement | null>(
43
- forwardedRef,
44
- () => ref.current,
45
- )
46
-
47
- const [portalElement, setPortalElement] = useState<HTMLElement | null>(null)
48
- const [boundaryElement, setBoundaryElement] = useState<HTMLElement | null>(null)
49
-
50
- const handleRef = useCallback((el: HTMLHtmlElement | null) => {
51
- setBoundaryElement(el)
52
- ref.current = el
53
- }, [])
54
-
55
- let node = (
56
- <RootProvider
57
- boundaryElement={boundaryElement}
58
- portalElement={portalElement}
59
- scheme={scheme}
60
- tone={tone}
61
- >
62
- {children}
63
- <div data-portal="" ref={setPortalElement} />
64
- </RootProvider>
65
- )
66
-
67
- if (as === 'html') {
68
- node = <body className={box({height, margin: 0})}>{node}</body>
69
- }
70
-
71
- return (
72
- <Box
73
- as={as}
74
- data-ui="Root"
75
- {...rest}
76
- className={root({
77
- className,
78
- height,
79
- scheme,
80
- tone,
81
- })}
82
- overflow={overflow}
83
- ref={handleRef}
84
- >
85
- {node}
86
- </Box>
87
- )
88
- }
@@ -1,40 +0,0 @@
1
- import type {CardTone, ColorScheme} from '@sanity/ui/theme'
2
- import type {ReactNode} from 'react'
3
-
4
- import {ToastProvider} from './components/toast/toastProvider'
5
- import {CardProvider} from './primitives/card/cardProvider'
6
- import {LayerProvider} from './primitives/layer/layerProvider'
7
- import {BoundaryElementProvider} from './utils/boundaryElement/boundaryElementProvider'
8
- import {PortalProvider} from './utils/portal/portalProvider'
9
-
10
- /** @public */
11
- export interface RootProviderProps {
12
- boundaryElement?: HTMLElement | null
13
- children?: ReactNode
14
- portalElement?: HTMLElement | null
15
- scheme?: ColorScheme
16
- tone?: CardTone
17
- }
18
-
19
- /** @public */
20
- export function RootProvider(props: RootProviderProps): React.JSX.Element {
21
- const {
22
- boundaryElement = null,
23
- children,
24
- portalElement = null,
25
- scheme = 'light',
26
- tone = 'transparent',
27
- } = props
28
-
29
- return (
30
- <LayerProvider>
31
- <CardProvider scheme={scheme} tone={tone}>
32
- <ToastProvider>
33
- <BoundaryElementProvider element={boundaryElement}>
34
- <PortalProvider element={portalElement}>{children}</PortalProvider>
35
- </BoundaryElementProvider>
36
- </ToastProvider>
37
- </CardProvider>
38
- </LayerProvider>
39
- )
40
- }
@@ -1,28 +0,0 @@
1
- import {Box, Button, Root, Stack, Text, useCard, useToast} from '@sanity/ui'
2
-
3
- export default function BoundaryStory(): React.JSX.Element {
4
- const {scheme} = useCard()
5
-
6
- return (
7
- <Box padding={5}>
8
- <Root as="div" padding={5} radius={4} scheme={scheme}>
9
- <Layout />
10
- </Root>
11
- </Box>
12
- )
13
- }
14
-
15
- function Layout() {
16
- const toast = useToast()
17
-
18
- return (
19
- <Stack gap={4}>
20
- <Text size={1}>
21
- Testing the root component. Toast messages will be rendered here, and should be contained
22
- within the root element.
23
- </Text>
24
-
25
- <Button onClick={() => toast.push({title: 'Hello!'})} text="Push toast message" width="min" />
26
- </Stack>
27
- )
28
- }
@@ -1,16 +0,0 @@
1
- import type {WorkshopScope} from '@sanity/ui-workshop'
2
- import {lazy} from 'react'
3
-
4
- const scope: WorkshopScope = {
5
- name: 'root',
6
- title: 'Root',
7
- stories: [
8
- {
9
- name: 'boundary',
10
- title: 'Boundary',
11
- component: lazy(() => import('./boundary')),
12
- },
13
- ],
14
- }
15
-
16
- export default scope
@@ -1,156 +0,0 @@
1
- import {EarthAmericasIcon, SearchIcon} from '@sanity/icons'
2
- import {
3
- Autocomplete,
4
- type BaseAutocompleteOption,
5
- Box,
6
- Card,
7
- Code,
8
- Flex,
9
- LayerProvider,
10
- Stack,
11
- Text,
12
- } from '@sanity/ui'
13
- import {useCallback, useEffect, useRef, useState} from 'react'
14
-
15
- import {countriesStore} from './mock/apiStore'
16
-
17
- export default function AsyncStory(): React.JSX.Element {
18
- const [options, setOptions] = useState<BaseAutocompleteOption[]>([])
19
- const [loading, setLoading] = useState(false)
20
- const searchRef = useRef<{cancel: () => void} | null>(null)
21
- const fetchRef = useRef<{cancel: () => void} | null>(null)
22
- const [query, setQuery] = useState<string | null>(null)
23
- const [value, setValue] = useState('')
24
- const [optionTitle, setOptionTitle] = useState<string | null>(null)
25
- const [loadingCurrentRef, setLoadingCurrentRef] = useState(false)
26
-
27
- const doSearch = useCallback((query: string | null) => {
28
- if (searchRef.current) searchRef.current.cancel()
29
- searchRef.current = countriesStore.search(query || '', setOptions, setLoading)
30
- }, [])
31
-
32
- const filterOption = useCallback(() => true, [])
33
-
34
- const handleQueryChange = useCallback(
35
- (query: string | null) => {
36
- setQuery(query)
37
-
38
- if (query !== null) {
39
- doSearch(query)
40
- }
41
- },
42
- [doSearch],
43
- )
44
-
45
- const handleOpenButtonClick = useCallback(() => {
46
- if (!value) {
47
- doSearch('')
48
- }
49
- }, [doSearch, value])
50
-
51
- const renderValue = useCallback(() => {
52
- if (loadingCurrentRef) {
53
- return 'Loading…'
54
- }
55
-
56
- return optionTitle || ''
57
- }, [loadingCurrentRef, optionTitle])
58
-
59
- const renderOption = useCallback((option: BaseAutocompleteOption) => {
60
- return <AsyncOption documentId={option.value} />
61
- }, [])
62
-
63
- useEffect(() => {
64
- if (fetchRef.current) fetchRef.current.cancel()
65
-
66
- if (value) {
67
- fetchRef.current = countriesStore.fetchDocument(
68
- value,
69
- (data) => setOptionTitle(data?.title || null),
70
- setLoadingCurrentRef,
71
- )
72
- } else {
73
- setOptionTitle(null)
74
- setLoadingCurrentRef(false)
75
- }
76
- }, [value])
77
-
78
- useEffect(() => {
79
- if (optionTitle) doSearch(optionTitle)
80
- }, [doSearch, optionTitle])
81
-
82
- return (
83
- <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
84
- <Stack gap={[3, 3, 4]}>
85
- <Text as="label" htmlFor="async" size={[1, 1, 2]} weight="medium">
86
- Country
87
- </Text>
88
- <LayerProvider zOffset={100}>
89
- <Autocomplete
90
- disabled={loadingCurrentRef}
91
- filterOption={filterOption}
92
- icon={value ? EarthAmericasIcon : SearchIcon}
93
- id="async"
94
- loading={loading}
95
- onChange={setValue}
96
- onQueryChange={handleQueryChange}
97
- openButton={{onClick: handleOpenButtonClick}}
98
- options={options}
99
- placeholder="Search"
100
- renderOption={renderOption}
101
- renderValue={renderValue}
102
- value={value}
103
- />
104
- </LayerProvider>
105
-
106
- <Box muted overflow="auto" padding={3} radius={2}>
107
- <Code language="json" size={1}>
108
- {JSON.stringify({loading, options, query, value}, null, 2)}
109
- </Code>
110
- </Box>
111
- </Stack>
112
- </Box>
113
- )
114
- }
115
-
116
- function AsyncOption(props: {
117
- documentId: string
118
- disabled?: boolean
119
- selected?: boolean
120
- tabIndex?: number
121
- }) {
122
- const {documentId, disabled, selected, tabIndex} = props
123
- const [data, setData] = useState<{title: string} | null>(null)
124
- const [loading, setLoading] = useState(false)
125
- const ref = useRef<{cancel: () => void} | null>(null)
126
-
127
- useEffect(() => {
128
- if (ref.current) ref.current.cancel()
129
- ref.current = countriesStore.fetchDocument(documentId, setData, setLoading)
130
- }, [documentId])
131
-
132
- return (
133
- <Card
134
- as="button"
135
- disabled={disabled}
136
- padding={3}
137
- radius={1}
138
- selected={selected}
139
- tabIndex={tabIndex}
140
- >
141
- <Flex gap={3}>
142
- <Text>
143
- <EarthAmericasIcon />
144
- </Text>
145
-
146
- {loading && (
147
- <Text muted>
148
- <>Loading…</>
149
- </Text>
150
- )}
151
-
152
- {!loading && <Text muted={!data}>{data ? data.title : <>Untitled</>}</Text>}
153
- </Flex>
154
- </Card>
155
- )
156
- }
@@ -1,131 +0,0 @@
1
- import {
2
- Autocomplete,
3
- type AutocompleteProps,
4
- BoundaryElementProvider,
5
- Box,
6
- Card,
7
- Container,
8
- LayerProvider,
9
- Popover,
10
- Stack,
11
- Text,
12
- } from '@sanity/ui'
13
- import {useCallback, useState} from 'react'
14
-
15
- import {countries} from './mock/countries'
16
- import type {ExampleOption} from './types'
17
-
18
- export default function ConstrainedHeightStory(): React.JSX.Element {
19
- const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
20
-
21
- return (
22
- <Card height="fill" tone="transparent">
23
- <Container height="fill" padding={3} sizing="border" width={1}>
24
- <Card height="fill" ref={setBoundaryElement} radius={4} shadow={3} tone="default">
25
- <Box height="fill" overflow="auto" padding={[4, 4, 5]} sizing="border">
26
- <Stack gap={5}>
27
- <BoundaryElementProvider element={boundaryElement}>
28
- <ConstrainedHeightExampleField id="example-1" label="Example 1" />
29
- <ConstrainedHeightExampleField id="example-2" label="Example 2" />
30
- <ConstrainedHeightExampleField id="example-3" label="Example 3" />
31
- <ConstrainedHeightExampleField id="example-4" label="Example 4" />
32
- <ConstrainedHeightExampleField id="example-5" label="Example 5" />
33
- <ConstrainedHeightExampleField id="example-6" label="Example 6" />
34
- <ConstrainedHeightExampleField id="example-7" label="Example 7" />
35
- <ConstrainedHeightExampleField id="example-8" label="Example 8" />
36
- <ConstrainedHeightExampleField id="example-9" label="Example 9" />
37
- </BoundaryElementProvider>
38
- </Stack>
39
- </Box>
40
- </Card>
41
- </Container>
42
- </Card>
43
- )
44
- }
45
-
46
- function ConstrainedHeightExampleField({id, label}: {id: string; label: string}) {
47
- const [value, setValue] = useState('')
48
-
49
- const renderOption = useCallback((option: ExampleOption) => {
50
- return (
51
- <Card
52
- as="a"
53
- data-qa={`option-${option.value}`}
54
- href="#"
55
- key={option.value}
56
- onClick={(event) => event.preventDefault()}
57
- padding={3}
58
- radius={2}
59
- >
60
- <Text textOverflow="ellipsis">{option.title}</Text>
61
- </Card>
62
- )
63
- }, [])
64
-
65
- const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
66
- return option ? option.title : currentValue
67
- }, [])
68
-
69
- const filterOption = useCallback((query: string, option: ExampleOption) => {
70
- return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
71
- }, [])
72
-
73
- const options = countries.map((item) => ({value: item.code, title: item.name}))
74
-
75
- const renderPopover: AutocompleteProps['renderPopover'] = useCallback(
76
- (
77
- popoverProps: {
78
- content: React.JSX.Element | null
79
- hidden: boolean
80
- inputElement: HTMLInputElement | null
81
- onMouseEnter: () => void
82
- onMouseLeave: () => void
83
- },
84
- popoverRef: React.Ref<HTMLDivElement>,
85
- ) => {
86
- const {hidden, inputElement, ...rest} = popoverProps
87
-
88
- if (hidden) return null
89
-
90
- return (
91
- <Popover
92
- {...rest}
93
- arrow={false}
94
- constrainSize
95
- matchReferenceWidth
96
- open
97
- overflow="auto"
98
- placement="bottom-start"
99
- portal
100
- radius={3}
101
- ref={popoverRef}
102
- referenceElement={inputElement}
103
- />
104
- )
105
- },
106
- [],
107
- )
108
-
109
- return (
110
- <Stack gap={3}>
111
- <Text size={1} weight="medium">
112
- {label}
113
- </Text>
114
- <LayerProvider zOffset={100}>
115
- <Autocomplete
116
- filterOption={filterOption}
117
- id={id}
118
- onChange={setValue}
119
- openButton
120
- options={options}
121
- placeholder="Search"
122
- radius={2}
123
- renderOption={renderOption}
124
- renderPopover={renderPopover}
125
- renderValue={renderValue}
126
- value={value}
127
- />
128
- </LayerProvider>
129
- </Stack>
130
- )
131
- }
@@ -1,91 +0,0 @@
1
- import {Autocomplete, Box, Button, Card, Code, Container, Stack, Text} from '@sanity/ui'
2
- import type {Radius} from '@sanity/ui/theme'
3
- import {useBoolean, useSelect} from '@sanity/ui-workshop'
4
- import {useCallback, useState} from 'react'
5
-
6
- import {
7
- WORKSHOP_RADIUS_OPTIONS,
8
- WORKSHOP_SPACE_OPTIONS,
9
- WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
10
- } from '$workshop'
11
-
12
- import {countries} from './mock/countries'
13
- import type {ExampleOption} from './types'
14
-
15
- export default function CustomStory(): React.JSX.Element {
16
- const data: ExampleOption[] = countries.map((d) => ({value: d.code, title: d.name}))
17
- const border = useBoolean('Border', true)
18
- const disabled = useBoolean('Disabled', false)
19
- const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS, 2)
20
- const openButton = useBoolean('Open button', true)
21
- const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
22
- const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
23
- const readOnly = useBoolean('Read only', false)
24
- const [value, setValue] = useState('')
25
-
26
- const renderOption = useCallback(
27
- (option: ExampleOption) => (
28
- <Card
29
- as="a"
30
- data-qa={`option-${option.value}`}
31
- href="#"
32
- key={option.value}
33
- onClick={(event) => event.preventDefault()}
34
- padding={padding}
35
- radius={Math.max((radius ?? 0) - 1, 0) as Radius}
36
- >
37
- <Text size={fontSize}>{option.title}</Text>
38
- </Card>
39
- ),
40
- [fontSize, padding, radius],
41
- )
42
-
43
- const renderValue = useCallback((currentValue: string, option?: ExampleOption) => {
44
- return option ? option.title : currentValue
45
- }, [])
46
-
47
- const filterOption = useCallback((query: string, option: ExampleOption) => {
48
- return option.title.toLowerCase().indexOf(query.toLowerCase()) > -1
49
- }, [])
50
-
51
- const options = data.map((item) => ({value: item.value, title: item.title}))
52
-
53
- return (
54
- <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
55
- <Container width={0}>
56
- <Stack gap={5}>
57
- <Stack gap={3}>
58
- <Text as="label" htmlFor="custom" id="custom-label" size={1} weight="medium">
59
- Country
60
- </Text>
61
- <Autocomplete
62
- aria-describedby="custom-label"
63
- border={border}
64
- disabled={disabled}
65
- filterOption={filterOption}
66
- fontSize={fontSize}
67
- id="custom"
68
- onChange={setValue}
69
- openButton={openButton}
70
- options={options}
71
- padding={padding}
72
- placeholder="Search"
73
- radius={radius}
74
- readOnly={readOnly}
75
- renderOption={renderOption}
76
- renderValue={renderValue}
77
- value={value}
78
- />
79
- </Stack>
80
-
81
- <Box muted padding={3} radius={2}>
82
- <Code size={1}>{JSON.stringify(value)}</Code>
83
- </Box>
84
- <Box>
85
- <Button id="set-value-btn" onClick={() => setValue('NO')} text="Set to NO" />
86
- </Box>
87
- </Stack>
88
- </Container>
89
- </Box>
90
- )
91
- }
@@ -1,80 +0,0 @@
1
- import {Autocomplete, Box, Card, Container, Stack, Text} from '@sanity/ui'
2
- import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
3
- import {type PerfTestProps, usePerfTest} from '@sanity/ui-workshop/plugin-perf'
4
- import {fireEvent} from '@testing-library/dom'
5
- import {useCallback, useMemo, useState} from 'react'
6
-
7
- import {
8
- WORKSHOP_CARD_TONE_OPTIONS,
9
- WORKSHOP_RADIUS_OPTIONS,
10
- WORKSHOP_SPACE_OPTIONS,
11
- WORKSHOP_TEXT_FONT_SIZE_OPTIONS,
12
- } from '$workshop'
13
-
14
- import {countries} from './mock/countries'
15
-
16
- const typingPerfTest: PerfTestProps<HTMLInputElement> = {
17
- name: 'typing',
18
- title: 'Typing',
19
- description: 'This test types one character at a time',
20
- run({target}) {
21
- const text = 'Hello, world & Hello, world & Hello, world'
22
- const len = text.length
23
-
24
- for (let i = 0; i < len; i += 1) {
25
- const value = text.slice(0, i + 1)
26
-
27
- fireEvent.change(target, {target: {value}})
28
- }
29
- },
30
- }
31
-
32
- export default function ExampleStory(): React.JSX.Element {
33
- const {ref, Wrapper} = usePerfTest(typingPerfTest)
34
-
35
- const layoutTone = useSelect('Layout tone', WORKSHOP_CARD_TONE_OPTIONS)
36
- const options = useMemo(() => countries.map((country) => ({value: country.code})), [])
37
- const border = useBoolean('Border', true)
38
- const customValidity = useText('Custom validity')
39
- const disabled = useBoolean('Disabled', false)
40
- const fontSize = useSelect('Font size', WORKSHOP_TEXT_FONT_SIZE_OPTIONS)
41
- const openButton = useBoolean('Open button', false)
42
- const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
43
- const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
44
- const readOnly = useBoolean('Read only', false)
45
- const [value, setValue] = useState('')
46
-
47
- const handleChange = useCallback((value: string) => setValue(value), [])
48
-
49
- return (
50
- <Card height="fill" tone={layoutTone}>
51
- <Container width={1}>
52
- <Box paddingX={[4, 5, 6]} paddingY={[5, 6, 7]}>
53
- <Stack gap={3}>
54
- <Text as="label" htmlFor="default" size={1} weight="medium">
55
- Country code
56
- </Text>
57
- <Wrapper>
58
- <Autocomplete
59
- border={border}
60
- customValidity={customValidity}
61
- disabled={disabled}
62
- fontSize={fontSize}
63
- onChange={handleChange}
64
- id="default"
65
- openButton={openButton}
66
- options={options}
67
- padding={padding}
68
- placeholder="Search"
69
- radius={radius}
70
- readOnly={readOnly}
71
- ref={ref}
72
- value={value}
73
- />
74
- </Wrapper>
75
- </Stack>
76
- </Box>
77
- </Container>
78
- </Card>
79
- )
80
- }
@@ -1,36 +0,0 @@
1
- import {Autocomplete, Box, Button, Code, Stack} from '@sanity/ui'
2
- import {useCallback, useState} from 'react'
3
-
4
- export default function FocusAndBlurStory(): React.JSX.Element {
5
- const [value, setValue] = useState('')
6
- const [log, setLog] = useState<string[]>([])
7
- const handleBlur = useCallback(() => setLog((v) => v.concat(['blur'])), [])
8
- const handleFocus = useCallback(() => setLog((v) => v.concat(['focus'])), [])
9
- const handleClear = useCallback(() => setLog([]), [])
10
-
11
- return (
12
- <Box padding={[4, 5, 6]}>
13
- <Stack gap={3}>
14
- <Autocomplete
15
- id="focus-and-blur"
16
- onBlur={handleBlur}
17
- onChange={setValue}
18
- onFocus={handleFocus}
19
- openButton
20
- options={[{value: 'foo'}, {value: 'bar'}]}
21
- placeholder="Search"
22
- value={value}
23
- />
24
- <Stack gap={3}>
25
- <Box muted overflow="auto" padding={3} radius={2}>
26
- <Code id="focus-and-blur-log" language="json" size={1}>
27
- {JSON.stringify(log)}
28
- </Code>
29
- </Box>
30
-
31
- <Button id="focus-and-blur-clear-btn" mode="ghost" onClick={handleClear} text="Clear" />
32
- </Stack>
33
- </Stack>
34
- </Box>
35
- )
36
- }