@sanity/ui 3.1.13 → 4.0.0-beta.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 (957) hide show
  1. package/LICENSE +1 -1
  2. package/README.md +7 -9
  3. package/dist/_chunks-es/Syntax.js +23 -0
  4. package/dist/_chunks-es/Syntax.js.map +1 -0
  5. package/dist/css/index.css +1 -0
  6. package/dist/css.d.ts +11 -0
  7. package/dist/css.js +7 -0
  8. package/dist/css.js.map +1 -0
  9. package/dist/index.d.ts +1352 -1848
  10. package/dist/index.js +4621 -1827
  11. package/dist/index.js.map +1 -1
  12. package/dist/tokens.d.ts +4 -0
  13. package/dist/tokens.js +2 -0
  14. package/dist/tokens.js.map +1 -0
  15. package/exports/css/index.css +1 -0
  16. package/exports/css.ts +2 -0
  17. package/exports/index.ts +117 -1
  18. package/exports/tokens.ts +2 -0
  19. package/package.json +86 -172
  20. package/src/components/autocomplete/Autocomplete.tsx +665 -0
  21. package/src/components/autocomplete/AutocompleteOption.tsx +42 -0
  22. package/src/components/autocomplete/__workshop__/Async.tsx +162 -0
  23. package/src/components/autocomplete/__workshop__/ConstrainedHeight.tsx +121 -0
  24. package/src/components/autocomplete/__workshop__/Custom.tsx +91 -0
  25. package/src/components/autocomplete/__workshop__/Example.tsx +71 -0
  26. package/src/components/autocomplete/__workshop__/FocusAndBlur.tsx +39 -0
  27. package/src/components/autocomplete/__workshop__/Fullscreen.tsx +307 -0
  28. package/src/components/autocomplete/__workshop__/index.ts +41 -0
  29. package/src/components/autocomplete/__workshop__/mock/apiStore.ts +49 -0
  30. package/src/components/autocomplete/__workshop__/mock/countries.ts +245 -0
  31. package/src/components/autocomplete/autocompleteReducer.ts +47 -0
  32. package/src/components/autocomplete/constants.ts +28 -0
  33. package/src/components/autocomplete/types.ts +103 -0
  34. package/src/components/breadcrumbs/Breadcrumbs.tsx +163 -0
  35. package/src/components/breadcrumbs/__workshop__/Example.tsx +49 -0
  36. package/src/components/breadcrumbs/__workshop__/index.ts +16 -0
  37. package/src/components/dialog/Dialog.tsx +230 -0
  38. package/src/components/dialog/DialogCard.tsx +233 -0
  39. package/src/components/dialog/DialogContext.ts +21 -0
  40. package/src/components/dialog/DialogProvider.tsx +34 -0
  41. package/src/components/dialog/__workshop__/Activate.tsx +141 -0
  42. package/src/components/dialog/__workshop__/AutoFocus.tsx +29 -0
  43. package/src/components/dialog/__workshop__/Layering.tsx +41 -0
  44. package/src/components/dialog/__workshop__/Nested.tsx +71 -0
  45. package/src/components/dialog/__workshop__/OnScroll.tsx +51 -0
  46. package/src/components/dialog/__workshop__/Panes.tsx +75 -0
  47. package/src/components/dialog/__workshop__/Position.tsx +30 -0
  48. package/src/components/dialog/__workshop__/Props.tsx +84 -0
  49. package/src/components/dialog/__workshop__/Provider.tsx +11 -0
  50. package/src/components/dialog/__workshop__/Wrapped.tsx +76 -0
  51. package/src/components/dialog/__workshop__/index.ts +21 -0
  52. package/src/components/dialog/isTargetWithinScope.ts +14 -0
  53. package/src/components/dialog/types.ts +2 -0
  54. package/src/components/dialog/useDialog.ts +11 -0
  55. package/src/components/hotkeys/Hotkeys.tsx +70 -0
  56. package/src/components/hotkeys/__workshop__/Plain.tsx +9 -0
  57. package/src/components/hotkeys/__workshop__/index.ts +16 -0
  58. package/src/components/menu/Menu.test.tsx +125 -0
  59. package/src/components/menu/Menu.tsx +174 -0
  60. package/src/components/menu/MenuButton.tsx +231 -0
  61. package/src/components/menu/MenuContext.ts +19 -0
  62. package/src/components/menu/MenuDivider.tsx +32 -0
  63. package/src/components/menu/MenuGroup.tsx +240 -0
  64. package/src/components/menu/MenuItem.tsx +153 -0
  65. package/src/components/menu/__workshop__/AsComponent.tsx +45 -0
  66. package/src/components/menu/__workshop__/AvatarMenu.tsx +36 -0
  67. package/src/components/menu/__workshop__/ClosableMenuButton.tsx +47 -0
  68. package/src/components/menu/__workshop__/ConstrainedInBoundary.tsx +133 -0
  69. package/src/components/menu/__workshop__/CustomMenuItem.tsx +47 -0
  70. package/src/components/menu/__workshop__/CustomSelectedState.tsx +35 -0
  71. package/src/components/menu/__workshop__/DataProps.tsx +28 -0
  72. package/src/components/menu/__workshop__/DisableFocusOnClose.tsx +40 -0
  73. package/src/components/menu/__workshop__/Groups.tsx +164 -0
  74. package/src/components/menu/__workshop__/MenuButton.tsx +79 -0
  75. package/src/components/menu/__workshop__/MenuGroupRight.tsx +73 -0
  76. package/src/components/menu/__workshop__/NestedMenu.tsx +22 -0
  77. package/src/components/menu/__workshop__/OnCloseMenuButton.tsx +50 -0
  78. package/src/components/menu/__workshop__/SelectedItem.tsx +69 -0
  79. package/src/components/menu/__workshop__/ShouldFocus.tsx +42 -0
  80. package/src/components/menu/__workshop__/Tones.tsx +20 -0
  81. package/src/components/menu/__workshop__/index.ts +91 -0
  82. package/src/components/menu/helpers.ts +82 -0
  83. package/src/components/menu/useMenu.ts +21 -0
  84. package/src/components/menu/useMenuController.ts +245 -0
  85. package/src/components/tab/Tab.tsx +135 -0
  86. package/src/components/tab/TabList.tsx +157 -0
  87. package/src/components/tab/TabListContext.ts +10 -0
  88. package/src/components/tab/TabPanel.tsx +94 -0
  89. package/src/components/tab/__workshop__/Example.tsx +135 -0
  90. package/src/components/tab/__workshop__/index.ts +16 -0
  91. package/src/components/tab/types.ts +11 -0
  92. package/src/components/toast/Toast.test.tsx +103 -0
  93. package/src/components/toast/Toast.tsx +191 -0
  94. package/src/components/toast/ToastContext.ts +7 -0
  95. package/src/components/toast/ToastLayer.tsx +54 -0
  96. package/src/components/toast/ToastProvider.tsx +127 -0
  97. package/src/components/toast/__workshop__/Hook.tsx +71 -0
  98. package/src/components/toast/__workshop__/Toast.tsx +26 -0
  99. package/src/components/toast/__workshop__/index.ts +21 -0
  100. package/src/components/toast/types.ts +24 -0
  101. package/src/components/toast/useToast.ts +23 -0
  102. package/src/components/tree/Tree.tsx +248 -0
  103. package/src/components/tree/TreeContext.ts +10 -0
  104. package/src/components/tree/TreeGroup.tsx +46 -0
  105. package/src/components/tree/TreeItem.tsx +236 -0
  106. package/src/components/tree/__workshop__/Basic.tsx +109 -0
  107. package/src/components/tree/__workshop__/TabFromElement.tsx +84 -0
  108. package/src/components/tree/__workshop__/basic.perf.ts +19 -0
  109. package/src/components/tree/__workshop__/index.ts +23 -0
  110. package/src/components/tree/helpers.ts +105 -0
  111. package/src/components/tree/types.ts +24 -0
  112. package/src/components/tree/useTree.ts +17 -0
  113. package/src/components/virtualList/VirtualList.tsx +254 -0
  114. package/src/components/virtualList/__workshop__/ChangingProps.tsx +41 -0
  115. package/src/components/virtualList/__workshop__/ElementScroll.tsx +43 -0
  116. package/src/components/virtualList/__workshop__/InfiniteList.tsx +40 -0
  117. package/src/components/virtualList/__workshop__/WindowScrolll.tsx +23 -0
  118. package/src/components/virtualList/__workshop__/index.ts +31 -0
  119. package/src/core/_keys.ts +26 -0
  120. package/src/core/constants.ts +4 -16
  121. package/src/core/getElementRef.ts +29 -0
  122. package/src/core/helpers/animation.ts +4 -5
  123. package/src/core/helpers/focus.ts +0 -8
  124. package/src/core/helpers/props.ts +51 -0
  125. package/src/core/lib/createGlobalScopedContext.ts +7 -4
  126. package/src/core/lib/globalScope.ts +1 -1
  127. package/src/core/lib/isArray.ts +3 -0
  128. package/src/core/types.ts +57 -0
  129. package/src/hooks/useClickOutsideEvent.test.tsx +114 -0
  130. package/src/hooks/useClickOutsideEvent.ts +66 -0
  131. package/src/hooks/useElementSize.ts +19 -0
  132. package/src/hooks/useGlobalKeyDown.ts +23 -0
  133. package/src/hooks/useMatchMedia.ts +28 -0
  134. package/src/hooks/useMediaIndex/__workshop__/Test.tsx +14 -0
  135. package/src/hooks/useMediaIndex/__workshop__/index.ts +16 -0
  136. package/src/hooks/useMediaIndex/useMediaIndex.test.tsx +21 -0
  137. package/src/hooks/useMediaIndex/useMediaIndex.ts +111 -0
  138. package/src/hooks/usePrefersDark.hydration.test.tsx +56 -0
  139. package/src/hooks/usePrefersDark.test.tsx +20 -0
  140. package/src/hooks/usePrefersDark.ts +16 -0
  141. package/src/hooks/usePrefersReducedMotion.hydration.test.tsx +56 -0
  142. package/src/hooks/usePrefersReducedMotion.test.tsx +20 -0
  143. package/src/hooks/usePrefersReducedMotion.ts +16 -0
  144. package/src/hooks/useResponsiveProp.ts +14 -0
  145. package/src/hooks/useUnique.ts +54 -0
  146. package/src/middleware/origin.ts +47 -0
  147. package/src/observers/elementSize.ts +114 -0
  148. package/src/primitives/_syntax/LazySyntax.tsx +4 -0
  149. package/src/primitives/_syntax/Syntax.tsx +26 -0
  150. package/src/primitives/avatar/Avatar.tsx +145 -0
  151. package/src/primitives/avatar/AvatarCounter.tsx +69 -0
  152. package/src/primitives/avatar/AvatarStack.tsx +77 -0
  153. package/src/primitives/avatar/__workshop__/AsButton.tsx +13 -0
  154. package/src/primitives/avatar/__workshop__/PropsStory.tsx +25 -0
  155. package/src/primitives/avatar/__workshop__/Stack.tsx +28 -0
  156. package/src/primitives/avatar/__workshop__/WithinButton.tsx +51 -0
  157. package/src/primitives/avatar/__workshop__/WithinMenuItem.tsx +52 -0
  158. package/src/primitives/avatar/__workshop__/index.ts +36 -0
  159. package/src/primitives/avatar/types.ts +2 -0
  160. package/src/primitives/badge/Badge.test.tsx +16 -0
  161. package/src/primitives/badge/Badge.tsx +53 -0
  162. package/src/primitives/badge/__workshop__/Props.tsx +28 -0
  163. package/src/primitives/badge/__workshop__/Tones.tsx +16 -0
  164. package/src/primitives/badge/__workshop__/index.ts +26 -0
  165. package/src/primitives/badge/__workshop__/within-button.tsx +36 -0
  166. package/src/primitives/box/Box.tsx +73 -0
  167. package/src/primitives/box/__workshop__/Props.tsx +26 -0
  168. package/src/primitives/box/__workshop__/Responsive.tsx +20 -0
  169. package/src/primitives/box/__workshop__/index.ts +21 -0
  170. package/src/primitives/button/Button.test.tsx +30 -0
  171. package/src/primitives/button/Button.tsx +145 -0
  172. package/src/primitives/button/__workshop__/Custom.tsx +29 -0
  173. package/src/primitives/button/__workshop__/CustomIcons.tsx +38 -0
  174. package/src/primitives/button/__workshop__/DataProps.tsx +19 -0
  175. package/src/primitives/button/__workshop__/Disabled.tsx +43 -0
  176. package/src/primitives/button/__workshop__/MixedChildren.tsx +12 -0
  177. package/src/primitives/button/__workshop__/Props.tsx +60 -0
  178. package/src/primitives/button/__workshop__/Stacked.tsx +51 -0
  179. package/src/primitives/button/__workshop__/Styled1.css.ts +7 -0
  180. package/src/primitives/button/__workshop__/Styled1.tsx +11 -0
  181. package/src/primitives/button/__workshop__/TextOverflow.tsx +17 -0
  182. package/src/primitives/button/__workshop__/UploadButton.tsx +28 -0
  183. package/src/primitives/button/__workshop__/index.ts +61 -0
  184. package/src/primitives/button/types.ts +2 -0
  185. package/src/primitives/card/Card.tsx +124 -0
  186. package/src/primitives/card/CardContext.ts +10 -0
  187. package/src/primitives/card/CardInternalContext.ts +10 -0
  188. package/src/primitives/card/CardInternalProvider.tsx +15 -0
  189. package/src/primitives/card/CardProvider.tsx +16 -0
  190. package/src/primitives/card/__workshop__/AsButton.tsx +104 -0
  191. package/src/primitives/card/__workshop__/AsComponent.tsx +25 -0
  192. package/src/primitives/card/__workshop__/Checkered.tsx +26 -0
  193. package/src/primitives/card/__workshop__/DataProps.tsx +25 -0
  194. package/src/primitives/card/__workshop__/Interactive.tsx +29 -0
  195. package/src/primitives/card/__workshop__/ListNavigation.tsx +78 -0
  196. package/src/primitives/card/__workshop__/Props.tsx +49 -0
  197. package/src/primitives/card/__workshop__/Selected.tsx +62 -0
  198. package/src/primitives/card/__workshop__/Styled.tsx +11 -0
  199. package/src/primitives/card/__workshop__/Tones.tsx +27 -0
  200. package/src/primitives/card/__workshop__/index.ts +21 -0
  201. package/src/primitives/card/types.ts +21 -0
  202. package/src/primitives/card/useCard.ts +20 -0
  203. package/src/primitives/checkbox/Checkbox.tsx +80 -0
  204. package/src/primitives/checkbox/__workshop__/Example.tsx +25 -0
  205. package/src/primitives/checkbox/__workshop__/Props.tsx +35 -0
  206. package/src/primitives/checkbox/__workshop__/ReadOnly.tsx +16 -0
  207. package/src/primitives/checkbox/__workshop__/Tones.tsx +27 -0
  208. package/src/primitives/checkbox/__workshop__/index.ts +15 -0
  209. package/src/primitives/code/Code.tsx +47 -0
  210. package/src/primitives/code/__workshop__/OpticalAlignment.tsx +26 -0
  211. package/src/primitives/code/__workshop__/Props.tsx +19 -0
  212. package/src/primitives/code/__workshop__/index.ts +21 -0
  213. package/src/primitives/container/Container.tsx +43 -0
  214. package/src/primitives/container/__workshop__/Example.tsx +17 -0
  215. package/src/primitives/container/__workshop__/index.ts +16 -0
  216. package/src/primitives/flex/Flex.tsx +38 -0
  217. package/src/primitives/flex/__workshop__/Example.tsx +26 -0
  218. package/src/primitives/flex/__workshop__/Gap.tsx +25 -0
  219. package/src/primitives/flex/__workshop__/index.ts +13 -0
  220. package/src/primitives/flex/__workshop__/styles.css.ts +12 -0
  221. package/src/primitives/grid/Grid.tsx +38 -0
  222. package/src/primitives/grid/__workshop__/Responsive.tsx +54 -0
  223. package/src/primitives/grid/__workshop__/index.ts +12 -0
  224. package/src/primitives/heading/Heading.tsx +68 -0
  225. package/src/primitives/heading/__workshop__/OpticalAlignment.tsx +28 -0
  226. package/src/primitives/heading/__workshop__/Plain.tsx +26 -0
  227. package/src/primitives/heading/__workshop__/index.ts +21 -0
  228. package/src/primitives/inline/Inline.tsx +37 -0
  229. package/src/primitives/inline/__workshop__/Plain.tsx +23 -0
  230. package/src/primitives/inline/__workshop__/index.ts +10 -0
  231. package/src/primitives/kbd/Kbd.tsx +36 -0
  232. package/src/primitives/kbd/__workshop__/Plain.tsx +9 -0
  233. package/src/primitives/kbd/__workshop__/index.ts +10 -0
  234. package/src/primitives/label/Label.tsx +67 -0
  235. package/src/primitives/label/__workshop__/OpticalAlignment.tsx +28 -0
  236. package/src/primitives/label/__workshop__/Plain.tsx +28 -0
  237. package/src/primitives/label/__workshop__/index.ts +21 -0
  238. package/src/primitives/layer/Layer.test.tsx +110 -0
  239. package/src/primitives/layer/Layer.tsx +35 -0
  240. package/src/primitives/layer/LayerCard.tsx +90 -0
  241. package/src/primitives/layer/LayerContext.ts +7 -0
  242. package/src/primitives/layer/LayerProvider.tsx +106 -0
  243. package/src/primitives/layer/__workshop__/MultipleRoots.tsx +49 -0
  244. package/src/primitives/layer/__workshop__/Nested.tsx +107 -0
  245. package/src/primitives/layer/__workshop__/ResponsiveZOffset.tsx +17 -0
  246. package/src/primitives/layer/__workshop__/_debug.tsx +17 -0
  247. package/src/primitives/layer/__workshop__/index.ts +26 -0
  248. package/src/primitives/layer/getLayerContext.test.ts +32 -0
  249. package/src/primitives/layer/getLayerContext.ts +21 -0
  250. package/src/primitives/layer/useLayer.ts +24 -0
  251. package/src/primitives/popover/Popover.tsx +291 -0
  252. package/src/primitives/popover/PopoverLayer.tsx +101 -0
  253. package/src/primitives/popover/__workshop__/AlignedStory.tsx +76 -0
  254. package/src/primitives/popover/__workshop__/MarginsStory.tsx +31 -0
  255. package/src/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +32 -0
  256. package/src/primitives/popover/__workshop__/OpenOnMountStory.tsx +11 -0
  257. package/src/primitives/popover/__workshop__/PlainStory.tsx +68 -0
  258. package/src/primitives/popover/__workshop__/RecursiveStory.tsx +71 -0
  259. package/src/primitives/popover/__workshop__/SidePanelStory.tsx +94 -0
  260. package/src/primitives/popover/__workshop__/TestStory.tsx +97 -0
  261. package/src/primitives/popover/__workshop__/index.ts +56 -0
  262. package/src/primitives/popover/__workshop__/portal-inheritance.tsx +15 -0
  263. package/src/primitives/popover/constants.ts +20 -0
  264. package/src/primitives/popover/floating-ui/size.ts +75 -0
  265. package/src/primitives/popover/types.ts +12 -0
  266. package/src/primitives/popover/useMiddleware.ts +126 -0
  267. package/src/primitives/radio/Radio.tsx +64 -0
  268. package/src/primitives/radio/__workshop__/Example.tsx +63 -0
  269. package/src/primitives/radio/__workshop__/Plain.tsx +28 -0
  270. package/src/primitives/radio/__workshop__/index.ts +13 -0
  271. package/src/primitives/select/Select.tsx +76 -0
  272. package/src/primitives/select/__workshop__/Plain.tsx +38 -0
  273. package/src/primitives/select/__workshop__/ReadOnly.tsx +23 -0
  274. package/src/primitives/select/__workshop__/index.ts +13 -0
  275. package/src/primitives/selectable/Selectable.tsx +48 -0
  276. package/src/primitives/selectable/__workshop__/DataProps.tsx +24 -0
  277. package/src/primitives/selectable/__workshop__/as-link.tsx +13 -0
  278. package/src/primitives/selectable/__workshop__/index.ts +19 -0
  279. package/src/primitives/skeleton/CodeSkeleton.tsx +49 -0
  280. package/src/primitives/skeleton/HeadingSkeleton.tsx +48 -0
  281. package/src/primitives/skeleton/LabelSkeleton.tsx +47 -0
  282. package/src/primitives/skeleton/Skeleton.tsx +70 -0
  283. package/src/primitives/skeleton/TextSkeleton.tsx +49 -0
  284. package/src/primitives/skeleton/__workshop__/Delay.tsx +69 -0
  285. package/src/primitives/skeleton/__workshop__/Skeleton.tsx +63 -0
  286. package/src/primitives/skeleton/__workshop__/index.ts +13 -0
  287. package/src/primitives/spinner/Spinner.tsx +45 -0
  288. package/src/primitives/spinner/SpinnerAnimatedIcon.tsx +14 -0
  289. package/src/primitives/spinner/__workshop__/Props.tsx +14 -0
  290. package/src/primitives/spinner/__workshop__/index.ts +16 -0
  291. package/src/primitives/srOnly/SrOnly.tsx +33 -0
  292. package/src/primitives/stack/Stack.tsx +38 -0
  293. package/src/primitives/stack/__workshop__/Plain.tsx +31 -0
  294. package/src/primitives/stack/__workshop__/index.ts +16 -0
  295. package/src/primitives/switch/Switch.tsx +76 -0
  296. package/src/primitives/switch/__workshop__/Example.tsx +25 -0
  297. package/src/primitives/switch/__workshop__/Props.tsx +23 -0
  298. package/src/primitives/switch/__workshop__/index.ts +13 -0
  299. package/src/primitives/text/InlineCode.tsx +25 -0
  300. package/src/primitives/text/Text.tsx +68 -0
  301. package/src/primitives/text/__workshop__/Example.tsx +27 -0
  302. package/src/primitives/text/__workshop__/OpticalAlignment.tsx +28 -0
  303. package/src/primitives/text/__workshop__/index.ts +26 -0
  304. package/src/primitives/text/__workshop__/inline-code.tsx +13 -0
  305. package/src/primitives/textArea/TextArea.tsx +97 -0
  306. package/src/primitives/textArea/__workshop__/Plain.tsx +47 -0
  307. package/src/primitives/textArea/__workshop__/index.ts +16 -0
  308. package/src/primitives/textInput/TextInput.tsx +279 -0
  309. package/src/primitives/textInput/__workshop__/ClearButton.tsx +32 -0
  310. package/src/primitives/textInput/__workshop__/CustomValidity.tsx +17 -0
  311. package/src/primitives/textInput/__workshop__/Plain.tsx +103 -0
  312. package/src/primitives/textInput/__workshop__/ReadOnly.tsx +14 -0
  313. package/src/primitives/textInput/__workshop__/States.tsx +53 -0
  314. package/src/primitives/textInput/__workshop__/Tones.tsx +41 -0
  315. package/src/primitives/textInput/__workshop__/Typed.tsx +23 -0
  316. package/src/primitives/textInput/__workshop__/index.ts +46 -0
  317. package/src/primitives/tooltip/Tooltip.test.tsx +496 -0
  318. package/src/primitives/tooltip/Tooltip.tsx +546 -0
  319. package/src/primitives/tooltip/TooltipLayer.tsx +72 -0
  320. package/src/primitives/tooltip/__workshop__/CustomPortal.tsx +102 -0
  321. package/src/primitives/tooltip/__workshop__/OverflowingBoundary.tsx +74 -0
  322. package/src/primitives/tooltip/__workshop__/Props.tsx +99 -0
  323. package/src/primitives/tooltip/__workshop__/ResizableBoundary.tsx +91 -0
  324. package/src/primitives/tooltip/__workshop__/index.ts +31 -0
  325. package/src/primitives/tooltip/constants.ts +24 -0
  326. package/src/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupContext.tsx +13 -0
  327. package/src/primitives/tooltip/tooltipDelayGroup/TooltipDelayGroupProvider.tsx +96 -0
  328. package/src/primitives/tooltip/tooltipDelayGroup/types.ts +7 -0
  329. package/src/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +13 -0
  330. package/src/root/Root.tsx +93 -0
  331. package/src/root/RootProvider.tsx +37 -0
  332. package/src/root/__workshop__/Boundary.tsx +43 -0
  333. package/src/root/__workshop__/index.ts +24 -0
  334. package/src/root/__workshop__/primitives.tsx +49 -0
  335. package/src/root/__workshop__/tone-inheritance.tsx +65 -0
  336. package/src/utils/ErrorBoundary.tsx +50 -0
  337. package/src/utils/boundaryElement/BoundaryElementContext.ts +7 -0
  338. package/src/utils/boundaryElement/BoundaryElementProvider.tsx +16 -0
  339. package/src/utils/boundaryElement/__workshop__/Plain.tsx +49 -0
  340. package/src/utils/boundaryElement/__workshop__/index.ts +16 -0
  341. package/src/utils/boundaryElement/types.ts +2 -0
  342. package/src/utils/boundaryElement/useBoundaryElement.ts +12 -0
  343. package/src/utils/elementQuery/ElementQuery.tsx +75 -0
  344. package/src/utils/elementQuery/__workshop__/CustomMedia.tsx +19 -0
  345. package/src/utils/elementQuery/__workshop__/index.ts +16 -0
  346. package/src/utils/elementQuery/__workshop__/styles.css.ts +31 -0
  347. package/src/utils/portal/Portal.test.tsx +105 -0
  348. package/src/utils/portal/Portal.tsx +42 -0
  349. package/src/utils/portal/PortalContext.ts +37 -0
  350. package/src/utils/portal/PortalProvider.tsx +38 -0
  351. package/src/utils/portal/__workshop__/Named.tsx +69 -0
  352. package/src/utils/portal/__workshop__/index.ts +16 -0
  353. package/src/utils/portal/types.ts +7 -0
  354. package/src/utils/portal/usePortal.ts +30 -0
  355. package/dist/_chunks-cjs/_visual-editing.js +0 -5864
  356. package/dist/_chunks-cjs/_visual-editing.js.map +0 -1
  357. package/dist/_chunks-cjs/refractor.js +0 -23
  358. package/dist/_chunks-cjs/refractor.js.map +0 -1
  359. package/dist/_chunks-es/_visual-editing.mjs +0 -5870
  360. package/dist/_chunks-es/_visual-editing.mjs.map +0 -1
  361. package/dist/_chunks-es/refractor.mjs +0 -26
  362. package/dist/_chunks-es/refractor.mjs.map +0 -1
  363. package/dist/_visual-editing.d.mts +0 -1007
  364. package/dist/_visual-editing.d.ts +0 -1007
  365. package/dist/_visual-editing.js +0 -31
  366. package/dist/_visual-editing.js.map +0 -1
  367. package/dist/_visual-editing.mjs +0 -31
  368. package/dist/_visual-editing.mjs.map +0 -1
  369. package/dist/index.d.mts +0 -2972
  370. package/dist/index.mjs +0 -2041
  371. package/dist/index.mjs.map +0 -1
  372. package/dist/theme.d.mts +0 -1500
  373. package/dist/theme.d.ts +0 -1500
  374. package/dist/theme.js +0 -4127
  375. package/dist/theme.js.map +0 -1
  376. package/dist/theme.mjs +0 -4127
  377. package/dist/theme.mjs.map +0 -1
  378. package/exports/_visual-editing.ts +0 -31
  379. package/exports/theme.ts +0 -1
  380. package/src/core/__workshop__/constants.ts +0 -293
  381. package/src/core/_compat.ts +0 -264
  382. package/src/core/components/autocomplete/__mocks__/apiStore.ts +0 -49
  383. package/src/core/components/autocomplete/__mocks__/countries.ts +0 -245
  384. package/src/core/components/autocomplete/__workshop__/async.tsx +0 -156
  385. package/src/core/components/autocomplete/__workshop__/constrainedHeight.tsx +0 -137
  386. package/src/core/components/autocomplete/__workshop__/custom.tsx +0 -89
  387. package/src/core/components/autocomplete/__workshop__/example.tsx +0 -79
  388. package/src/core/components/autocomplete/__workshop__/focusAndBlur.tsx +0 -36
  389. package/src/core/components/autocomplete/__workshop__/fullscreen.tsx +0 -294
  390. package/src/core/components/autocomplete/__workshop__/index.ts +0 -39
  391. package/src/core/components/autocomplete/autocomplete.styles.tsx +0 -39
  392. package/src/core/components/autocomplete/autocomplete.tsx +0 -767
  393. package/src/core/components/autocomplete/autocompleteOption.tsx +0 -45
  394. package/src/core/components/autocomplete/autocompleteReducer.ts +0 -47
  395. package/src/core/components/autocomplete/constants.ts +0 -28
  396. package/src/core/components/autocomplete/index.ts +0 -2
  397. package/src/core/components/autocomplete/types.ts +0 -108
  398. package/src/core/components/breadcrumbs/__workshop__/example.tsx +0 -62
  399. package/src/core/components/breadcrumbs/__workshop__/index.ts +0 -14
  400. package/src/core/components/breadcrumbs/breadcrumbs.styles.ts +0 -18
  401. package/src/core/components/breadcrumbs/breadcrumbs.tsx +0 -129
  402. package/src/core/components/breadcrumbs/index.ts +0 -1
  403. package/src/core/components/dialog/__workshop__/activate.tsx +0 -134
  404. package/src/core/components/dialog/__workshop__/autoFocus.tsx +0 -29
  405. package/src/core/components/dialog/__workshop__/index.ts +0 -19
  406. package/src/core/components/dialog/__workshop__/layering.tsx +0 -41
  407. package/src/core/components/dialog/__workshop__/nested.tsx +0 -72
  408. package/src/core/components/dialog/__workshop__/onScroll.tsx +0 -39
  409. package/src/core/components/dialog/__workshop__/panes.tsx +0 -82
  410. package/src/core/components/dialog/__workshop__/position.tsx +0 -30
  411. package/src/core/components/dialog/__workshop__/props.tsx +0 -75
  412. package/src/core/components/dialog/__workshop__/provider.tsx +0 -11
  413. package/src/core/components/dialog/__workshop__/wrapped.tsx +0 -76
  414. package/src/core/components/dialog/dialog.tsx +0 -430
  415. package/src/core/components/dialog/dialogContext.ts +0 -20
  416. package/src/core/components/dialog/dialogProvider.tsx +0 -35
  417. package/src/core/components/dialog/index.ts +0 -4
  418. package/src/core/components/dialog/styles.ts +0 -77
  419. package/src/core/components/dialog/useDialog.ts +0 -11
  420. package/src/core/components/hotkeys/__workshop__/index.ts +0 -14
  421. package/src/core/components/hotkeys/__workshop__/plain.tsx +0 -9
  422. package/src/core/components/hotkeys/hotkeys.tsx +0 -62
  423. package/src/core/components/hotkeys/index.ts +0 -1
  424. package/src/core/components/index.ts +0 -9
  425. package/src/core/components/menu/__workshop__/asComponent.tsx +0 -45
  426. package/src/core/components/menu/__workshop__/avatarMenu.tsx +0 -51
  427. package/src/core/components/menu/__workshop__/closableMenuButton.tsx +0 -46
  428. package/src/core/components/menu/__workshop__/constrainedInBoundary.tsx +0 -134
  429. package/src/core/components/menu/__workshop__/customMenuItem.tsx +0 -45
  430. package/src/core/components/menu/__workshop__/customSelectedState.tsx +0 -39
  431. package/src/core/components/menu/__workshop__/disableFocusOnClose.tsx +0 -40
  432. package/src/core/components/menu/__workshop__/groups.tsx +0 -156
  433. package/src/core/components/menu/__workshop__/index.ts +0 -89
  434. package/src/core/components/menu/__workshop__/menuButton.tsx +0 -80
  435. package/src/core/components/menu/__workshop__/menuGroupRight.tsx +0 -65
  436. package/src/core/components/menu/__workshop__/nestedMenu.tsx +0 -22
  437. package/src/core/components/menu/__workshop__/onCloseMenuButton.tsx +0 -41
  438. package/src/core/components/menu/__workshop__/selectedItem.tsx +0 -69
  439. package/src/core/components/menu/__workshop__/shouldFocus.tsx +0 -47
  440. package/src/core/components/menu/__workshop__/tones.tsx +0 -25
  441. package/src/core/components/menu/__workshop__/withoutArrow.tsx +0 -32
  442. package/src/core/components/menu/helpers.ts +0 -82
  443. package/src/core/components/menu/index.ts +0 -5
  444. package/src/core/components/menu/menu.test.tsx +0 -125
  445. package/src/core/components/menu/menu.tsx +0 -172
  446. package/src/core/components/menu/menuButton.tsx +0 -268
  447. package/src/core/components/menu/menuContext.ts +0 -18
  448. package/src/core/components/menu/menuDivider.ts +0 -12
  449. package/src/core/components/menu/menuGroup.tsx +0 -219
  450. package/src/core/components/menu/menuItem.tsx +0 -180
  451. package/src/core/components/menu/useMenu.ts +0 -21
  452. package/src/core/components/menu/useMenuController.ts +0 -231
  453. package/src/core/components/skeleton/__workshop__/delay.tsx +0 -70
  454. package/src/core/components/skeleton/__workshop__/index.ts +0 -11
  455. package/src/core/components/skeleton/__workshop__/skeleton.tsx +0 -64
  456. package/src/core/components/skeleton/index.ts +0 -2
  457. package/src/core/components/skeleton/skeleton.tsx +0 -57
  458. package/src/core/components/skeleton/styles.ts +0 -50
  459. package/src/core/components/skeleton/textSkeleton.tsx +0 -122
  460. package/src/core/components/tab/__workshop__/example.tsx +0 -79
  461. package/src/core/components/tab/__workshop__/index.ts +0 -14
  462. package/src/core/components/tab/index.ts +0 -3
  463. package/src/core/components/tab/tab.tsx +0 -101
  464. package/src/core/components/tab/tabList.tsx +0 -70
  465. package/src/core/components/tab/tabPanel.tsx +0 -39
  466. package/src/core/components/toast/__workshop__/hook.tsx +0 -71
  467. package/src/core/components/toast/__workshop__/index.ts +0 -19
  468. package/src/core/components/toast/__workshop__/toast.tsx +0 -26
  469. package/src/core/components/toast/index.ts +0 -4
  470. package/src/core/components/toast/styles.ts +0 -77
  471. package/src/core/components/toast/toast.test.tsx +0 -101
  472. package/src/core/components/toast/toast.tsx +0 -198
  473. package/src/core/components/toast/toastContext.ts +0 -7
  474. package/src/core/components/toast/toastLayer.tsx +0 -51
  475. package/src/core/components/toast/toastProvider.tsx +0 -113
  476. package/src/core/components/toast/types.ts +0 -26
  477. package/src/core/components/toast/useToast.ts +0 -25
  478. package/src/core/components/tree/__workshop__/basic.perf.ts +0 -19
  479. package/src/core/components/tree/__workshop__/basic.tsx +0 -105
  480. package/src/core/components/tree/__workshop__/index.ts +0 -21
  481. package/src/core/components/tree/__workshop__/tabFromElement.tsx +0 -84
  482. package/src/core/components/tree/helpers.ts +0 -105
  483. package/src/core/components/tree/index.ts +0 -4
  484. package/src/core/components/tree/style.ts +0 -105
  485. package/src/core/components/tree/tree.tsx +0 -231
  486. package/src/core/components/tree/treeContext.ts +0 -10
  487. package/src/core/components/tree/treeGroup.tsx +0 -28
  488. package/src/core/components/tree/treeItem.tsx +0 -217
  489. package/src/core/components/tree/types.ts +0 -21
  490. package/src/core/components/tree/useTree.ts +0 -17
  491. package/src/core/helpers/index.ts +0 -4
  492. package/src/core/hooks/index.ts +0 -12
  493. package/src/core/hooks/useArrayProp.ts +0 -17
  494. package/src/core/hooks/useClickOutside.test.tsx +0 -482
  495. package/src/core/hooks/useClickOutside.ts +0 -118
  496. package/src/core/hooks/useClickOutsideEvent.test.tsx +0 -115
  497. package/src/core/hooks/useClickOutsideEvent.ts +0 -73
  498. package/src/core/hooks/useDelayed.test.ts +0 -68
  499. package/src/core/hooks/useDelayedState.ts +0 -28
  500. package/src/core/hooks/useElementRect/__workshop__/example.tsx +0 -32
  501. package/src/core/hooks/useElementRect/__workshop__/index.ts +0 -14
  502. package/src/core/hooks/useElementRect/index.ts +0 -1
  503. package/src/core/hooks/useElementRect/useElementRect.ts +0 -13
  504. package/src/core/hooks/useElementSize.ts +0 -19
  505. package/src/core/hooks/useForwardedRef.ts +0 -19
  506. package/src/core/hooks/useGlobalKeyDown.ts +0 -24
  507. package/src/core/hooks/useIsomorphicEffect.ts +0 -7
  508. package/src/core/hooks/useMatchMedia.ts +0 -28
  509. package/src/core/hooks/useMediaIndex/__workshop__/index.ts +0 -14
  510. package/src/core/hooks/useMediaIndex/__workshop__/test.tsx +0 -14
  511. package/src/core/hooks/useMediaIndex/index.ts +0 -1
  512. package/src/core/hooks/useMediaIndex/useMediaIndex.test.tsx +0 -36
  513. package/src/core/hooks/useMediaIndex/useMediaIndex.ts +0 -102
  514. package/src/core/hooks/usePrefersDark.hydration.test.tsx +0 -56
  515. package/src/core/hooks/usePrefersDark.test.tsx +0 -19
  516. package/src/core/hooks/usePrefersDark.ts +0 -16
  517. package/src/core/hooks/usePrefersReducedMotion.hydration.test.tsx +0 -56
  518. package/src/core/hooks/usePrefersReducedMotion.test.tsx +0 -19
  519. package/src/core/hooks/usePrefersReducedMotion.ts +0 -16
  520. package/src/core/index.ts +0 -10
  521. package/src/core/middleware/origin.ts +0 -47
  522. package/src/core/observers/elementSizeObserver.ts +0 -116
  523. package/src/core/observers/index.ts +0 -2
  524. package/src/core/observers/resizeObserver.ts +0 -9
  525. package/src/core/primitives/_selectable/index.ts +0 -1
  526. package/src/core/primitives/_selectable/selectable.tsx +0 -15
  527. package/src/core/primitives/_selectable/style.ts +0 -115
  528. package/src/core/primitives/avatar/__workshop__/asButton.tsx +0 -14
  529. package/src/core/primitives/avatar/__workshop__/index.ts +0 -29
  530. package/src/core/primitives/avatar/__workshop__/stack.tsx +0 -25
  531. package/src/core/primitives/avatar/__workshop__/withinButton.tsx +0 -63
  532. package/src/core/primitives/avatar/__workshop__/withinMenuItem.tsx +0 -70
  533. package/src/core/primitives/avatar/avatar.tsx +0 -192
  534. package/src/core/primitives/avatar/avatarCounter.tsx +0 -91
  535. package/src/core/primitives/avatar/avatarStack.tsx +0 -100
  536. package/src/core/primitives/avatar/index.ts +0 -4
  537. package/src/core/primitives/avatar/styles.ts +0 -167
  538. package/src/core/primitives/avatar/types.ts +0 -17
  539. package/src/core/primitives/badge/__workshop__/index.ts +0 -19
  540. package/src/core/primitives/badge/__workshop__/props.tsx +0 -30
  541. package/src/core/primitives/badge/__workshop__/tones.tsx +0 -21
  542. package/src/core/primitives/badge/badge.test.tsx +0 -16
  543. package/src/core/primitives/badge/badge.tsx +0 -62
  544. package/src/core/primitives/badge/index.ts +0 -1
  545. package/src/core/primitives/badge/styles.ts +0 -20
  546. package/src/core/primitives/badge/types.ts +0 -8
  547. package/src/core/primitives/box/__workshop__/index.ts +0 -19
  548. package/src/core/primitives/box/__workshop__/props.tsx +0 -20
  549. package/src/core/primitives/box/__workshop__/responsive.tsx +0 -20
  550. package/src/core/primitives/box/box.tsx +0 -131
  551. package/src/core/primitives/box/index.ts +0 -1
  552. package/src/core/primitives/button/__workshop__/custom.tsx +0 -51
  553. package/src/core/primitives/button/__workshop__/customIcons.tsx +0 -30
  554. package/src/core/primitives/button/__workshop__/disabled.tsx +0 -74
  555. package/src/core/primitives/button/__workshop__/index.ts +0 -59
  556. package/src/core/primitives/button/__workshop__/mixedChildren.tsx +0 -12
  557. package/src/core/primitives/button/__workshop__/props.tsx +0 -55
  558. package/src/core/primitives/button/__workshop__/sanityUploadButton.tsx +0 -36
  559. package/src/core/primitives/button/__workshop__/stacked.tsx +0 -58
  560. package/src/core/primitives/button/__workshop__/styled1.tsx +0 -17
  561. package/src/core/primitives/button/__workshop__/styled2.tsx +0 -19
  562. package/src/core/primitives/button/__workshop__/uploadButton.tsx +0 -28
  563. package/src/core/primitives/button/button.test.tsx +0 -44
  564. package/src/core/primitives/button/button.tsx +0 -186
  565. package/src/core/primitives/button/index.ts +0 -1
  566. package/src/core/primitives/button/styles.ts +0 -117
  567. package/src/core/primitives/card/__workshop__/allTones.tsx +0 -25
  568. package/src/core/primitives/card/__workshop__/asButton.tsx +0 -107
  569. package/src/core/primitives/card/__workshop__/asComponent.tsx +0 -27
  570. package/src/core/primitives/card/__workshop__/checkered.tsx +0 -26
  571. package/src/core/primitives/card/__workshop__/index.ts +0 -18
  572. package/src/core/primitives/card/__workshop__/interactive.tsx +0 -30
  573. package/src/core/primitives/card/__workshop__/listNavigation.tsx +0 -80
  574. package/src/core/primitives/card/__workshop__/props.tsx +0 -53
  575. package/src/core/primitives/card/__workshop__/selected.tsx +0 -94
  576. package/src/core/primitives/card/__workshop__/styled.tsx +0 -14
  577. package/src/core/primitives/card/card.tsx +0 -117
  578. package/src/core/primitives/card/index.ts +0 -2
  579. package/src/core/primitives/card/styles.ts +0 -147
  580. package/src/core/primitives/card/types.ts +0 -11
  581. package/src/core/primitives/checkbox/__workshop__/example.tsx +0 -25
  582. package/src/core/primitives/checkbox/__workshop__/index.ts +0 -13
  583. package/src/core/primitives/checkbox/__workshop__/props.tsx +0 -33
  584. package/src/core/primitives/checkbox/__workshop__/readOnly.tsx +0 -16
  585. package/src/core/primitives/checkbox/__workshop__/tones.tsx +0 -28
  586. package/src/core/primitives/checkbox/checkbox.tsx +0 -73
  587. package/src/core/primitives/checkbox/index.ts +0 -1
  588. package/src/core/primitives/checkbox/styles.ts +0 -128
  589. package/src/core/primitives/code/__workshop__/index.ts +0 -19
  590. package/src/core/primitives/code/__workshop__/opticalAlignment.tsx +0 -48
  591. package/src/core/primitives/code/__workshop__/props.tsx +0 -21
  592. package/src/core/primitives/code/code.tsx +0 -46
  593. package/src/core/primitives/code/index.ts +0 -1
  594. package/src/core/primitives/code/refractor.tsx +0 -20
  595. package/src/core/primitives/code/styles.ts +0 -77
  596. package/src/core/primitives/container/__workshop__/example.tsx +0 -20
  597. package/src/core/primitives/container/__workshop__/index.ts +0 -8
  598. package/src/core/primitives/container/container.tsx +0 -41
  599. package/src/core/primitives/container/index.ts +0 -2
  600. package/src/core/primitives/container/styles.ts +0 -23
  601. package/src/core/primitives/flex/__workshop__/example.tsx +0 -34
  602. package/src/core/primitives/flex/__workshop__/gap.tsx +0 -25
  603. package/src/core/primitives/flex/__workshop__/index.ts +0 -11
  604. package/src/core/primitives/flex/flex.tsx +0 -54
  605. package/src/core/primitives/flex/index.ts +0 -1
  606. package/src/core/primitives/grid/__workshop__/index.ts +0 -10
  607. package/src/core/primitives/grid/__workshop__/responsive.tsx +0 -54
  608. package/src/core/primitives/grid/grid.tsx +0 -48
  609. package/src/core/primitives/grid/index.ts +0 -1
  610. package/src/core/primitives/heading/__workshop__/index.ts +0 -19
  611. package/src/core/primitives/heading/__workshop__/opticalAlignment.tsx +0 -54
  612. package/src/core/primitives/heading/__workshop__/plain.tsx +0 -32
  613. package/src/core/primitives/heading/heading.tsx +0 -80
  614. package/src/core/primitives/heading/index.ts +0 -1
  615. package/src/core/primitives/heading/styles.ts +0 -64
  616. package/src/core/primitives/heading/types.ts +0 -7
  617. package/src/core/primitives/index.ts +0 -27
  618. package/src/core/primitives/inline/__workshop__/index.ts +0 -8
  619. package/src/core/primitives/inline/__workshop__/plain.tsx +0 -27
  620. package/src/core/primitives/inline/index.ts +0 -1
  621. package/src/core/primitives/inline/inline.tsx +0 -47
  622. package/src/core/primitives/inline/styles.ts +0 -32
  623. package/src/core/primitives/inline/types.ts +0 -6
  624. package/src/core/primitives/kbd/__workshop__/index.ts +0 -8
  625. package/src/core/primitives/kbd/__workshop__/plain.tsx +0 -9
  626. package/src/core/primitives/kbd/index.ts +0 -1
  627. package/src/core/primitives/kbd/kbd.tsx +0 -61
  628. package/src/core/primitives/label/__workshop__/index.ts +0 -19
  629. package/src/core/primitives/label/__workshop__/opticalAlignment.tsx +0 -48
  630. package/src/core/primitives/label/__workshop__/plain.tsx +0 -24
  631. package/src/core/primitives/label/index.ts +0 -1
  632. package/src/core/primitives/label/label.tsx +0 -79
  633. package/src/core/primitives/label/styles.ts +0 -45
  634. package/src/core/primitives/popover/__workshop__/AlignedStory.tsx +0 -77
  635. package/src/core/primitives/popover/__workshop__/MarginsStory.tsx +0 -31
  636. package/src/core/primitives/popover/__workshop__/MatchReferenceWidthStory.tsx +0 -32
  637. package/src/core/primitives/popover/__workshop__/OpenOnMountStory.tsx +0 -11
  638. package/src/core/primitives/popover/__workshop__/PlainStory.tsx +0 -71
  639. package/src/core/primitives/popover/__workshop__/RecursiveStory.tsx +0 -71
  640. package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx +0 -89
  641. package/src/core/primitives/popover/__workshop__/TestStory.tsx +0 -97
  642. package/src/core/primitives/popover/__workshop__/index.ts +0 -49
  643. package/src/core/primitives/popover/constants.ts +0 -22
  644. package/src/core/primitives/popover/floating-ui/size.ts +0 -99
  645. package/src/core/primitives/popover/helpers.ts +0 -31
  646. package/src/core/primitives/popover/index.ts +0 -2
  647. package/src/core/primitives/popover/popover.tsx +0 -511
  648. package/src/core/primitives/popover/popoverCard.tsx +0 -166
  649. package/src/core/primitives/popover/types.ts +0 -7
  650. package/src/core/primitives/radio/__workshop__/example.tsx +0 -63
  651. package/src/core/primitives/radio/__workshop__/index.ts +0 -11
  652. package/src/core/primitives/radio/__workshop__/plain.tsx +0 -28
  653. package/src/core/primitives/radio/index.ts +0 -1
  654. package/src/core/primitives/radio/radio.tsx +0 -51
  655. package/src/core/primitives/radio/styles.ts +0 -117
  656. package/src/core/primitives/select/__workshop__/index.ts +0 -11
  657. package/src/core/primitives/select/__workshop__/plain.tsx +0 -27
  658. package/src/core/primitives/select/__workshop__/readOnly.tsx +0 -23
  659. package/src/core/primitives/select/index.ts +0 -1
  660. package/src/core/primitives/select/select.tsx +0 -88
  661. package/src/core/primitives/select/styles.ts +0 -166
  662. package/src/core/primitives/spinner/__workshop__/Props.tsx +0 -15
  663. package/src/core/primitives/spinner/__workshop__/index.ts +0 -14
  664. package/src/core/primitives/spinner/index.ts +0 -1
  665. package/src/core/primitives/spinner/spinner.tsx +0 -46
  666. package/src/core/primitives/stack/__workshop__/index.ts +0 -14
  667. package/src/core/primitives/stack/__workshop__/plain.tsx +0 -32
  668. package/src/core/primitives/stack/index.ts +0 -1
  669. package/src/core/primitives/stack/stack.tsx +0 -43
  670. package/src/core/primitives/stack/styles.ts +0 -32
  671. package/src/core/primitives/switch/__workshop__/example.tsx +0 -23
  672. package/src/core/primitives/switch/__workshop__/index.ts +0 -11
  673. package/src/core/primitives/switch/__workshop__/props.tsx +0 -21
  674. package/src/core/primitives/switch/index.ts +0 -1
  675. package/src/core/primitives/switch/styles.ts +0 -173
  676. package/src/core/primitives/switch/switch.tsx +0 -68
  677. package/src/core/primitives/text/__workshop__/colored.tsx +0 -30
  678. package/src/core/primitives/text/__workshop__/example.tsx +0 -39
  679. package/src/core/primitives/text/__workshop__/index.ts +0 -24
  680. package/src/core/primitives/text/__workshop__/opticalAlignment.tsx +0 -48
  681. package/src/core/primitives/text/index.ts +0 -1
  682. package/src/core/primitives/text/styles.ts +0 -74
  683. package/src/core/primitives/text/text.tsx +0 -81
  684. package/src/core/primitives/textArea/__workshop__/index.ts +0 -14
  685. package/src/core/primitives/textArea/__workshop__/plain.tsx +0 -50
  686. package/src/core/primitives/textArea/index.ts +0 -1
  687. package/src/core/primitives/textArea/textArea.tsx +0 -120
  688. package/src/core/primitives/textInput/__workshop__/clearButton.tsx +0 -30
  689. package/src/core/primitives/textInput/__workshop__/customValidity.tsx +0 -17
  690. package/src/core/primitives/textInput/__workshop__/index.ts +0 -44
  691. package/src/core/primitives/textInput/__workshop__/plain.tsx +0 -98
  692. package/src/core/primitives/textInput/__workshop__/readOnly.tsx +0 -9
  693. package/src/core/primitives/textInput/__workshop__/states.tsx +0 -53
  694. package/src/core/primitives/textInput/__workshop__/tones.tsx +0 -277
  695. package/src/core/primitives/textInput/__workshop__/typed.tsx +0 -23
  696. package/src/core/primitives/textInput/index.ts +0 -1
  697. package/src/core/primitives/textInput/textInput.tsx +0 -390
  698. package/src/core/primitives/tooltip/__workshop__/customPortal.tsx +0 -102
  699. package/src/core/primitives/tooltip/__workshop__/index.ts +0 -29
  700. package/src/core/primitives/tooltip/__workshop__/overflowingBoundary.tsx +0 -74
  701. package/src/core/primitives/tooltip/__workshop__/props.tsx +0 -107
  702. package/src/core/primitives/tooltip/__workshop__/resizableBoundary.tsx +0 -86
  703. package/src/core/primitives/tooltip/constants.ts +0 -23
  704. package/src/core/primitives/tooltip/index.ts +0 -2
  705. package/src/core/primitives/tooltip/tooltip.test.tsx +0 -452
  706. package/src/core/primitives/tooltip/tooltip.tsx +0 -495
  707. package/src/core/primitives/tooltip/tooltipCard.tsx +0 -109
  708. package/src/core/primitives/tooltip/tooltipDelayGroup/index.ts +0 -4
  709. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx +0 -11
  710. package/src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx +0 -57
  711. package/src/core/primitives/tooltip/tooltipDelayGroup/types.ts +0 -10
  712. package/src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts +0 -13
  713. package/src/core/primitives/types.ts +0 -146
  714. package/src/core/styles/border/borderStyle.ts +0 -56
  715. package/src/core/styles/border/index.ts +0 -2
  716. package/src/core/styles/border/types.ts +0 -10
  717. package/src/core/styles/box/boxStyle.ts +0 -69
  718. package/src/core/styles/box/index.ts +0 -2
  719. package/src/core/styles/box/types.ts +0 -11
  720. package/src/core/styles/card/_cardColorStyle.ts +0 -108
  721. package/src/core/styles/card/index.ts +0 -1
  722. package/src/core/styles/flex/flexItemStyle.ts +0 -27
  723. package/src/core/styles/flex/flexStyle.ts +0 -70
  724. package/src/core/styles/flex/index.ts +0 -3
  725. package/src/core/styles/flex/types.ts +0 -25
  726. package/src/core/styles/focusRing/index.ts +0 -25
  727. package/src/core/styles/font/codeFontStyle.ts +0 -13
  728. package/src/core/styles/font/headingFontStyle.ts +0 -13
  729. package/src/core/styles/font/index.ts +0 -6
  730. package/src/core/styles/font/labelFontStyle.ts +0 -13
  731. package/src/core/styles/font/responsiveFont.ts +0 -103
  732. package/src/core/styles/font/textAlignStyle.ts +0 -19
  733. package/src/core/styles/font/textFontStyle.ts +0 -13
  734. package/src/core/styles/font/types.ts +0 -35
  735. package/src/core/styles/grid/gridItemStyle.ts +0 -82
  736. package/src/core/styles/grid/gridStyle.ts +0 -108
  737. package/src/core/styles/grid/index.ts +0 -3
  738. package/src/core/styles/grid/types.ts +0 -37
  739. package/src/core/styles/helpers.ts +0 -72
  740. package/src/core/styles/index.ts +0 -5
  741. package/src/core/styles/input/index.ts +0 -2
  742. package/src/core/styles/input/responsiveInputPaddingStyle.ts +0 -78
  743. package/src/core/styles/input/textInputStyle.ts +0 -263
  744. package/src/core/styles/internal.ts +0 -12
  745. package/src/core/styles/margin/index.ts +0 -2
  746. package/src/core/styles/margin/marginStyle.ts +0 -21
  747. package/src/core/styles/margin/marginsStyle.test.ts +0 -33
  748. package/src/core/styles/margin/types.ts +0 -9
  749. package/src/core/styles/padding/index.ts +0 -2
  750. package/src/core/styles/padding/paddingStyle.test.ts +0 -33
  751. package/src/core/styles/padding/paddingStyle.ts +0 -21
  752. package/src/core/styles/padding/types.ts +0 -12
  753. package/src/core/styles/radius/index.ts +0 -2
  754. package/src/core/styles/radius/radiusStyle.ts +0 -23
  755. package/src/core/styles/radius/types.ts +0 -8
  756. package/src/core/styles/shadow/index.ts +0 -2
  757. package/src/core/styles/shadow/shadowStyle.ts +0 -29
  758. package/src/core/styles/shadow/types.ts +0 -6
  759. package/src/core/styles/types.ts +0 -8
  760. package/src/core/theme/__workshop__/build/Root.tsx +0 -367
  761. package/src/core/theme/__workshop__/build/helpers.ts +0 -46
  762. package/src/core/theme/__workshop__/build/story.tsx +0 -465
  763. package/src/core/theme/__workshop__/canvas.tsx +0 -352
  764. package/src/core/theme/__workshop__/color.tsx +0 -62
  765. package/src/core/theme/__workshop__/debug/story.tsx +0 -408
  766. package/src/core/theme/__workshop__/index.ts +0 -39
  767. package/src/core/theme/__workshop__/layer.tsx +0 -78
  768. package/src/core/theme/__workshop__/nestedProvider.tsx +0 -15
  769. package/src/core/theme/index.ts +0 -5
  770. package/src/core/theme/theme.test.tsx +0 -73
  771. package/src/core/theme/themeColorProvider.tsx +0 -29
  772. package/src/core/theme/themeContext.ts +0 -10
  773. package/src/core/theme/themeProvider.tsx +0 -62
  774. package/src/core/theme/types.ts +0 -12
  775. package/src/core/theme/useRootTheme.ts +0 -17
  776. package/src/core/theme/useTheme.ts +0 -16
  777. package/src/core/types/avatar.ts +0 -14
  778. package/src/core/types/badge.ts +0 -12
  779. package/src/core/types/box.ts +0 -19
  780. package/src/core/types/button.ts +0 -21
  781. package/src/core/types/card.ts +0 -6
  782. package/src/core/types/dialog.ts +0 -4
  783. package/src/core/types/flex.ts +0 -30
  784. package/src/core/types/grid.ts +0 -14
  785. package/src/core/types/gridItem.ts +0 -29
  786. package/src/core/types/index.ts +0 -14
  787. package/src/core/types/placement.ts +0 -18
  788. package/src/core/types/popover.ts +0 -4
  789. package/src/core/types/radius.ts +0 -4
  790. package/src/core/types/selectable.ts +0 -6
  791. package/src/core/types/text.ts +0 -4
  792. package/src/core/utils/arrow/arrow.tsx +0 -123
  793. package/src/core/utils/arrow/cmds.ts +0 -91
  794. package/src/core/utils/arrow/index.ts +0 -1
  795. package/src/core/utils/boundaryElement/__workshop__/index.ts +0 -14
  796. package/src/core/utils/boundaryElement/__workshop__/plain.tsx +0 -19
  797. package/src/core/utils/boundaryElement/boundaryElement.test.tsx +0 -100
  798. package/src/core/utils/boundaryElement/boundaryElementContext.ts +0 -7
  799. package/src/core/utils/boundaryElement/boundaryElementProvider.tsx +0 -24
  800. package/src/core/utils/boundaryElement/index.ts +0 -3
  801. package/src/core/utils/boundaryElement/types.ts +0 -7
  802. package/src/core/utils/boundaryElement/useBoundaryElement.ts +0 -26
  803. package/src/core/utils/conditionalWrapper/conditionalWrapper.tsx +0 -21
  804. package/src/core/utils/conditionalWrapper/index.ts +0 -1
  805. package/src/core/utils/elementQuery/__workshop__/customMedia.tsx +0 -30
  806. package/src/core/utils/elementQuery/__workshop__/index.ts +0 -14
  807. package/src/core/utils/elementQuery/elementQuery.tsx +0 -53
  808. package/src/core/utils/elementQuery/index.ts +0 -1
  809. package/src/core/utils/errorBoundary.tsx +0 -48
  810. package/src/core/utils/getElementRef.ts +0 -26
  811. package/src/core/utils/index.ts +0 -9
  812. package/src/core/utils/layer/__workshop__/_debug.tsx +0 -17
  813. package/src/core/utils/layer/__workshop__/index.ts +0 -24
  814. package/src/core/utils/layer/__workshop__/multipleRoots.tsx +0 -49
  815. package/src/core/utils/layer/__workshop__/nested.tsx +0 -98
  816. package/src/core/utils/layer/__workshop__/responsiveZOffset.tsx +0 -13
  817. package/src/core/utils/layer/getLayerContext.test.ts +0 -30
  818. package/src/core/utils/layer/getLayerContext.ts +0 -21
  819. package/src/core/utils/layer/index.ts +0 -4
  820. package/src/core/utils/layer/layer.test.tsx +0 -108
  821. package/src/core/utils/layer/layer.tsx +0 -98
  822. package/src/core/utils/layer/layerContext.ts +0 -7
  823. package/src/core/utils/layer/layerProvider.tsx +0 -111
  824. package/src/core/utils/layer/useLayer.ts +0 -26
  825. package/src/core/utils/portal/__workshop__/index.ts +0 -14
  826. package/src/core/utils/portal/__workshop__/named.tsx +0 -63
  827. package/src/core/utils/portal/index.ts +0 -4
  828. package/src/core/utils/portal/portal.test.tsx +0 -103
  829. package/src/core/utils/portal/portal.ts +0 -32
  830. package/src/core/utils/portal/portalContext.ts +0 -31
  831. package/src/core/utils/portal/portalProvider.tsx +0 -47
  832. package/src/core/utils/portal/types.ts +0 -9
  833. package/src/core/utils/portal/usePortal.ts +0 -25
  834. package/src/core/utils/spanWithTextOverflow.tsx +0 -10
  835. package/src/core/utils/srOnly/index.ts +0 -1
  836. package/src/core/utils/srOnly/srOnly.tsx +0 -36
  837. package/src/core/utils/virtualList/__workshop__/changingProps.tsx +0 -36
  838. package/src/core/utils/virtualList/__workshop__/elementScroll.tsx +0 -24
  839. package/src/core/utils/virtualList/__workshop__/index.ts +0 -29
  840. package/src/core/utils/virtualList/__workshop__/infiniteList.tsx +0 -48
  841. package/src/core/utils/virtualList/__workshop__/windowScrolll.tsx +0 -22
  842. package/src/core/utils/virtualList/index.ts +0 -1
  843. package/src/core/utils/virtualList/virtualList.tsx +0 -200
  844. package/src/theme/build/_deprecated/color/_selectable/createSelectableTones.ts +0 -76
  845. package/src/theme/build/_deprecated/color/_solid/createSolidTones.ts +0 -54
  846. package/src/theme/build/_deprecated/color/button/createButtonModes.ts +0 -22
  847. package/src/theme/build/_deprecated/color/button/createButtonTones.ts +0 -55
  848. package/src/theme/build/_deprecated/color/card/createCardStates.ts +0 -60
  849. package/src/theme/build/_deprecated/color/color.test.ts +0 -63
  850. package/src/theme/build/_deprecated/color/defaults.ts +0 -390
  851. package/src/theme/build/_deprecated/color/factory.ts +0 -142
  852. package/src/theme/build/_deprecated/color/index.ts +0 -1
  853. package/src/theme/build/_deprecated/color/input/createInputModes.ts +0 -81
  854. package/src/theme/build/_deprecated/color/muted/createMuted.ts +0 -54
  855. package/src/theme/build/_deprecated/color/spot/createSpot.ts +0 -20
  856. package/src/theme/build/buildColorTheme.test.ts +0 -183
  857. package/src/theme/build/buildColorTheme.ts +0 -499
  858. package/src/theme/build/buildTheme.test.ts +0 -87
  859. package/src/theme/build/buildTheme.ts +0 -36
  860. package/src/theme/build/colorToken/colorToken.ts +0 -19
  861. package/src/theme/build/colorToken/compileColorToken.ts +0 -21
  862. package/src/theme/build/colorToken/index.ts +0 -2
  863. package/src/theme/build/colorToken/types.ts +0 -6
  864. package/src/theme/build/index.ts +0 -3
  865. package/src/theme/build/lib/color-fns/blend/index.ts +0 -3
  866. package/src/theme/build/lib/color-fns/blend/mix.ts +0 -21
  867. package/src/theme/build/lib/color-fns/blend/multiply.ts +0 -18
  868. package/src/theme/build/lib/color-fns/blend/screen.ts +0 -18
  869. package/src/theme/build/lib/color-fns/color-fns.test.ts +0 -68
  870. package/src/theme/build/lib/color-fns/contrastRatio.ts +0 -31
  871. package/src/theme/build/lib/color-fns/convert.ts +0 -150
  872. package/src/theme/build/lib/color-fns/index.ts +0 -6
  873. package/src/theme/build/lib/color-fns/parse.ts +0 -60
  874. package/src/theme/build/lib/color-fns/rgba.ts +0 -10
  875. package/src/theme/build/lib/color-fns/types.ts +0 -28
  876. package/src/theme/build/lib/isRecord.ts +0 -3
  877. package/src/theme/build/lib/lazy.ts +0 -30
  878. package/src/theme/build/lib/utils.ts +0 -19
  879. package/src/theme/build/merge.ts +0 -26
  880. package/src/theme/build/mixThemeColor.test.ts +0 -21
  881. package/src/theme/build/mixThemeColor.ts +0 -53
  882. package/src/theme/build/renderColorTheme.ts +0 -532
  883. package/src/theme/build/renderColorValue.ts +0 -85
  884. package/src/theme/build/resolveColorTokens.ts +0 -268
  885. package/src/theme/build/theme.test.ts +0 -27
  886. package/src/theme/config/helpers.ts +0 -55
  887. package/src/theme/config/index.ts +0 -4
  888. package/src/theme/config/system.ts +0 -115
  889. package/src/theme/config/tokens/color/index.ts +0 -1
  890. package/src/theme/config/tokens/color/types.ts +0 -133
  891. package/src/theme/config/tokens/index.ts +0 -4
  892. package/src/theme/config/tokens/parseTokenKey.test.ts +0 -64
  893. package/src/theme/config/tokens/parseTokenKey.ts +0 -67
  894. package/src/theme/config/tokens/parseTokenValue.test.ts +0 -42
  895. package/src/theme/config/tokens/parseTokenValue.ts +0 -133
  896. package/src/theme/config/tokens/types.ts +0 -53
  897. package/src/theme/config/types.ts +0 -46
  898. package/src/theme/defaults/colorPalette.ts +0 -5
  899. package/src/theme/defaults/colorTokens.ts +0 -648
  900. package/src/theme/defaults/config.ts +0 -84
  901. package/src/theme/defaults/fonts.ts +0 -227
  902. package/src/theme/getScopedTheme.ts +0 -98
  903. package/src/theme/index.ts +0 -5
  904. package/src/theme/system/avatar.ts +0 -14
  905. package/src/theme/system/color/_constants.ts +0 -45
  906. package/src/theme/system/color/_helpers.ts +0 -24
  907. package/src/theme/system/color/_system.ts +0 -40
  908. package/src/theme/system/color/avatar.ts +0 -15
  909. package/src/theme/system/color/badge.ts +0 -16
  910. package/src/theme/system/color/button.ts +0 -17
  911. package/src/theme/system/color/color.ts +0 -34
  912. package/src/theme/system/color/index.ts +0 -13
  913. package/src/theme/system/color/input.ts +0 -25
  914. package/src/theme/system/color/kbd.ts +0 -8
  915. package/src/theme/system/color/selectable.ts +0 -12
  916. package/src/theme/system/color/shadow.ts +0 -7
  917. package/src/theme/system/color/state.ts +0 -43
  918. package/src/theme/system/color/syntax.ts +0 -41
  919. package/src/theme/system/css.ts +0 -8
  920. package/src/theme/system/focusRing.ts +0 -7
  921. package/src/theme/system/font.ts +0 -52
  922. package/src/theme/system/index.ts +0 -11
  923. package/src/theme/system/input.ts +0 -33
  924. package/src/theme/system/layer.ts +0 -8
  925. package/src/theme/system/shadow.ts +0 -19
  926. package/src/theme/system/styles.ts +0 -13
  927. package/src/theme/system/theme.ts +0 -138
  928. package/src/theme/system/v0/avatar.ts +0 -10
  929. package/src/theme/system/v0/color/_generic.ts +0 -35
  930. package/src/theme/system/v0/color/_system.ts +0 -17
  931. package/src/theme/system/v0/color/base.ts +0 -21
  932. package/src/theme/system/v0/color/button.ts +0 -42
  933. package/src/theme/system/v0/color/card.ts +0 -19
  934. package/src/theme/system/v0/color/color.ts +0 -40
  935. package/src/theme/system/v0/color/index.ts +0 -11
  936. package/src/theme/system/v0/color/input.ts +0 -34
  937. package/src/theme/system/v0/color/muted.ts +0 -26
  938. package/src/theme/system/v0/color/selectable.ts +0 -31
  939. package/src/theme/system/v0/color/solid.ts +0 -26
  940. package/src/theme/system/v0/color/spot.ts +0 -13
  941. package/src/theme/system/v0/index.ts +0 -3
  942. package/src/theme/system/v0/input.ts +0 -23
  943. package/src/theme/versioning/getTheme_v2.ts +0 -57
  944. package/src/theme/versioning/index.ts +0 -5
  945. package/src/theme/versioning/is_v0.ts +0 -6
  946. package/src/theme/versioning/is_v2.ts +0 -6
  947. package/src/theme/versioning/themeColor_v0_v2.ts +0 -243
  948. package/src/theme/versioning/themeColor_v2_v2_9.ts +0 -49
  949. package/src/theme/versioning/v0_v2.ts +0 -94
  950. package/src/theme/versioning/v2_v0.ts +0 -135
  951. /package/src/{core/components → components}/autocomplete/__workshop__/types.ts +0 -0
  952. /package/src/{core/components → components}/toast/toastState.ts +0 -0
  953. /package/src/{core/hooks → hooks}/useCustomValidity.ts +0 -0
  954. /package/src/{core/hooks → hooks}/useMounted.ts +0 -0
  955. /package/src/{core/primitives → primitives}/container/types.ts +0 -0
  956. /package/src/{core/utils → primitives}/layer/types.ts +0 -0
  957. /package/src/{core/utils → utils}/elementQuery/helpers.ts +0 -0
package/src/core/theme/__workshop__/build/story.tsx DELETED
@@ -1,465 +0,0 @@
1
- import {
2
- buildTheme,
3
- THEME_COLOR_BUTTON_MODES,
4
- THEME_COLOR_CARD_TONES,
5
- THEME_COLOR_INPUT_MODES,
6
- THEME_COLOR_STATE_TONES,
7
- ThemeColorButtonTone_v2,
8
- ThemeColorCard_v2,
9
- ThemeColorCardToneKey,
10
- ThemeColorInputMode_v2,
11
- ThemeColorInputModeKey,
12
- ThemeColorState_v2,
13
- } from '@sanity/ui/theme'
14
-
15
- import {rem} from '../../../styles'
16
- import {useTheme_v2} from '../../useTheme'
17
- import {getCSSProps} from './helpers'
18
- import {Root} from './Root'
19
-
20
- const theme = buildTheme()
21
-
22
- export default function BuildStory(): React.JSX.Element {
23
- return (
24
- <Root>
25
- <div
26
- style={{
27
- display: 'flex',
28
- ...getCSSProps({
29
- radius: theme.radius.map((r) => rem(r)),
30
- shadows: theme.shadows.map((s) =>
31
- s
32
- ? {
33
- umbra: s.umbra.join(' '),
34
- penumbra: s.penumbra.join(' '),
35
- ambient: s.ambient.join(' '),
36
- }
37
- : {},
38
- ),
39
- space: theme.space.map((s) => rem(s)),
40
- }),
41
- }}
42
- >
43
- <div style={{flex: 1}}>
44
- {THEME_COLOR_CARD_TONES.map((baseTone) => (
45
- <BaseTonePreview
46
- baseTone={baseTone}
47
- key={baseTone}
48
- scheme="light"
49
- theme={theme.v2!.color.light[baseTone]}
50
- />
51
- ))}
52
- </div>
53
- <div style={{flex: 1}}>
54
- {THEME_COLOR_CARD_TONES.map((baseTone) => (
55
- <BaseTonePreview
56
- baseTone={baseTone}
57
- key={baseTone}
58
- scheme="dark"
59
- theme={theme.v2!.color.dark[baseTone]}
60
- />
61
- ))}
62
- </div>
63
- </div>
64
- </Root>
65
- )
66
- }
67
-
68
- function BaseTonePreview(props: {
69
- baseTone: ThemeColorCardToneKey
70
- scheme: 'light' | 'dark'
71
- theme: ThemeColorCard_v2
72
- }) {
73
- const {baseTone, scheme, theme: color} = props
74
- const theme = useTheme_v2()
75
-
76
- return (
77
- <div className="base" style={getCSSProps(color as unknown as Record<string, unknown>)}>
78
- <div
79
- style={{
80
- maxWidth: 600,
81
- margin: 'auto',
82
- padding: 'var(--space-4)',
83
- }}
84
- >
85
- <pre style={{padding: 12}}>
86
- color/{scheme}/{baseTone}
87
- </pre>
88
- <div style={{padding: 12}}>
89
- <div
90
- style={{
91
- boxShadow: [
92
- `0 0 0 ${theme.card.shadow.outline}px var(--shadow-outline)`,
93
- `0 6px 8px -4px var(--shadow-umbra)`,
94
- `0 12px 17px 2px var(--shadow-penumbra)`,
95
- `0 5px 22px 4px var(--shadow-ambient)`,
96
- ].join(', '),
97
- padding: 'var(--space-3)',
98
- borderRadius: 'var(--radius-2)',
99
- }}
100
- >
101
- Shadow
102
- </div>
103
- </div>
104
- <div style={{padding: 'var(--space-3)'}}>
105
- <StatePreview theme={color.selectable.default.enabled} />
106
- </div>
107
- <div
108
- style={{
109
- padding: 'var(--space-3)',
110
- display: 'flex',
111
- flexDirection: 'column',
112
- gap: 'var(--space-4)',
113
- }}
114
- >
115
- {THEME_COLOR_INPUT_MODES.map((mode) => (
116
- <InputPreview key={mode} mode={mode} theme={color.input[mode]} />
117
- ))}
118
- </div>
119
- <div
120
- style={{
121
- marginTop: 'var(--space-4)',
122
- padding: '1px 12px 12px 12px',
123
- display: 'flex',
124
- flexDirection: 'column',
125
- gap: 'var(--space-4)',
126
- }}
127
- >
128
- {THEME_COLOR_BUTTON_MODES.map((mode) => (
129
- <div
130
- key={mode}
131
- style={{display: 'flex', flexDirection: 'column', gap: 'var(--space-1)'}}
132
- >
133
- {THEME_COLOR_STATE_TONES.map((tone) => {
134
- return <ButtonPreview key={tone} theme={color.button[mode][tone]} />
135
- })}
136
- </div>
137
- ))}
138
- </div>
139
- </div>
140
- </div>
141
- )
142
- }
143
-
144
- function StatePreview(props: {theme: ThemeColorState_v2}) {
145
- const {theme: card} = props
146
-
147
- return (
148
- <div
149
- style={
150
- {
151
- ...getCSSProps({card}),
152
-
153
- display: 'flex',
154
- flexDirection: 'column',
155
- marginTop: -1,
156
- } as any
157
- }
158
- >
159
- <div
160
- style={{
161
- display: 'flex',
162
- gap: 4,
163
- }}
164
- >
165
- <div
166
- className="card"
167
- style={{
168
- flex: 1,
169
- padding: 'var(--space-2)',
170
- display: 'flex',
171
- gap: 'var(--space-1)',
172
- }}
173
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
174
- tabIndex={0}
175
- >
176
- <div style={{flex: 'none'}}>Card</div>
177
- <div className="icon" style={{flex: 'none'}}>
178
- &copy;
179
- </div>
180
- <div className="muted-fg" style={{flex: 'none'}}>
181
- m
182
- </div>
183
- <div className="accent-fg" style={{flex: 'none'}}>
184
- a
185
- </div>
186
- <div className="link-fg" style={{flex: 'none'}}>
187
- l
188
- </div>
189
- <div className="code" style={{flex: 'none'}}>
190
- c
191
- </div>
192
- <div style={{flex: 'none'}}>
193
- <CheckeredBackground />
194
- </div>
195
- <div style={{flex: 'none'}}>
196
- <Skeleton />
197
- </div>
198
- </div>
199
- <div
200
- className="card selected"
201
- style={{
202
- flex: 1,
203
- padding: 'var(--space-2)',
204
- display: 'flex',
205
- gap: 4,
206
- }}
207
- >
208
- <div style={{flex: 'none'}}>Card</div>
209
- <div className="icon" style={{flex: 'none'}}>
210
- &copy;
211
- </div>
212
- <div className="muted-fg" style={{flex: 'none'}}>
213
- m
214
- </div>
215
- <div className="accent-fg" style={{flex: 'none'}}>
216
- a
217
- </div>
218
- <div className="link-fg" style={{flex: 'none'}}>
219
- l
220
- </div>
221
- <div className="code" style={{flex: 'none'}}>
222
- c
223
- </div>
224
- <div style={{flex: 'none'}}>
225
- <CheckeredBackground />
226
- </div>
227
- <div style={{flex: 'none'}}>
228
- <Skeleton />
229
- </div>
230
- </div>
231
- <div
232
- className="card disabled"
233
- style={{
234
- flex: 1,
235
- padding: 'var(--space-2)',
236
- display: 'flex',
237
- gap: 4,
238
- }}
239
- >
240
- <div style={{flex: 'none'}}>Card</div>
241
- <div className="icon" style={{flex: 'none'}}>
242
- &copy;
243
- </div>
244
- <div className="muted-fg" style={{flex: 'none'}}>
245
- m
246
- </div>
247
- <div className="accent-fg" style={{flex: 'none'}}>
248
- a
249
- </div>
250
- <div className="link-fg" style={{flex: 'none'}}>
251
- l
252
- </div>
253
- <div className="code" style={{flex: 'none'}}>
254
- c
255
- </div>
256
- <div style={{flex: 'none'}}>
257
- <CheckeredBackground />
258
- </div>
259
- <div style={{flex: 'none'}}>
260
- <Skeleton />
261
- </div>
262
- </div>
263
- </div>
264
- </div>
265
- )
266
- }
267
-
268
- function ButtonPreview(props: {theme: ThemeColorButtonTone_v2}) {
269
- const {theme: button} = props
270
-
271
- return (
272
- <div
273
- style={{
274
- ...getCSSProps({button}),
275
-
276
- display: 'flex',
277
- gap: 4,
278
- }}
279
- >
280
- <div
281
- className="button"
282
- style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
283
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
284
- tabIndex={0}
285
- >
286
- <div style={{flex: 'none'}}>Button</div>
287
- <div className="icon" style={{flex: 'none'}}>
288
- &copy;
289
- </div>
290
- <div className="muted" style={{flex: 'none'}}>
291
- m
292
- </div>
293
- <div className="accent" style={{flex: 'none'}}>
294
- a
295
- </div>
296
- <div className="link" style={{flex: 'none'}}>
297
- l
298
- </div>
299
- <div className="code" style={{flex: 'none'}}>
300
- c
301
- </div>
302
- <div className="kbd" style={{flex: 'none'}}>
303
- k
304
- </div>
305
- <div className="badge badge--default" style={{flex: 'none'}}>
306
- b
307
- </div>
308
- <div style={{flex: 'none'}}>
309
- <CheckeredBackground />
310
- </div>
311
- <div style={{flex: 'none'}}>
312
- <Skeleton />
313
- </div>
314
- </div>
315
- <div
316
- className="button selected"
317
- style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
318
- >
319
- <div style={{flex: 'none'}}>Button</div>
320
- <div className="icon" style={{flex: 'none'}}>
321
- &copy;
322
- </div>
323
- <div className="muted-fg" style={{flex: 'none'}}>
324
- m
325
- </div>
326
- <div className="accent-fg" style={{flex: 'none'}}>
327
- a
328
- </div>
329
- <div className="link-fg" style={{flex: 'none'}}>
330
- l
331
- </div>
332
- <div className="code" style={{flex: 'none'}}>
333
- c
334
- </div>
335
- <div style={{flex: 'none'}}>
336
- <CheckeredBackground />
337
- </div>
338
- <div style={{flex: 'none'}}>
339
- <Skeleton />
340
- </div>
341
- </div>
342
- <div
343
- className="button disabled"
344
- style={{flex: 1, padding: 'var(--space-2)', display: 'flex', gap: 4}}
345
- >
346
- <div style={{flex: 'none'}}>Button</div>
347
- <div className="icon" style={{flex: 'none'}}>
348
- &copy;
349
- </div>
350
- <div className="muted-fg" style={{flex: 'none'}}>
351
- m
352
- </div>
353
- <div className="accent-fg" style={{flex: 'none'}}>
354
- a
355
- </div>
356
- <div className="link-fg" style={{flex: 'none'}}>
357
- l
358
- </div>
359
- <div className="code" style={{flex: 'none'}}>
360
- c
361
- </div>
362
- <div style={{flex: 'none'}}>
363
- <CheckeredBackground />
364
- </div>
365
- <div style={{flex: 'none'}}>
366
- <Skeleton />
367
- </div>
368
- </div>
369
- </div>
370
- )
371
- }
372
-
373
- function CheckeredBackground() {
374
- return (
375
- <div className="border" style={{display: 'flex', flexDirection: 'column'}}>
376
- <div style={{display: 'flex'}}>
377
- <div
378
- style={{
379
- width: 8,
380
- height: 8,
381
- }}
382
- />
383
- <div
384
- className="bg2"
385
- style={{
386
- width: 8,
387
- height: 8,
388
- }}
389
- />
390
- </div>
391
- <div style={{display: 'flex'}}>
392
- <div
393
- className="bg2"
394
- style={{
395
- width: 8,
396
- height: 8,
397
- }}
398
- />
399
- <div
400
- style={{
401
- width: 8,
402
- height: 8,
403
- }}
404
- />
405
- </div>
406
- </div>
407
- )
408
- }
409
-
410
- function Skeleton() {
411
- return (
412
- <div className="border" style={{display: 'flex'}}>
413
- <div
414
- className="skeleton-from"
415
- style={{
416
- width: 8,
417
- height: 16,
418
- }}
419
- />
420
- <div
421
- className="skeleton-to"
422
- style={{
423
- width: 8,
424
- height: 16,
425
- }}
426
- />
427
- </div>
428
- )
429
- }
430
-
431
- function InputPreview(props: {mode: ThemeColorInputModeKey; theme: ThemeColorInputMode_v2}) {
432
- const {mode, theme: input} = props
433
-
434
- return (
435
- <div
436
- style={
437
- {
438
- ...getCSSProps({input}),
439
-
440
- display: 'flex',
441
- flexDirection: 'column',
442
- gap: 8,
443
- } as any
444
- }
445
- >
446
- <div
447
- className="input"
448
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
449
- tabIndex={0}
450
- >
451
- <span>Text ({mode})</span> <span className="placeholder">Placeholder</span>
452
- </div>
453
- <div
454
- className="input readOnly"
455
- // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
456
- tabIndex={0}
457
- >
458
- <span>Text ({mode})</span>
459
- </div>
460
- <div className="input disabled">
461
- <span>Text ({mode})</span>
462
- </div>
463
- </div>
464
- )
465
- }