@sanity/ui 3.0.0-static.10 → 3.0.0-static.12

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 (275) hide show
  1. package/dist/_chunks-cjs/_visual-editing.js +1300 -1269
  2. package/dist/_chunks-cjs/_visual-editing.js.map +1 -1
  3. package/dist/_chunks-cjs/buildCommand.js +28 -10
  4. package/dist/_chunks-cjs/buildCommand.js.map +1 -1
  5. package/dist/_chunks-es/_visual-editing.mjs +1298 -1263
  6. package/dist/_chunks-es/_visual-editing.mjs.map +1 -1
  7. package/dist/_visual-editing.d.mts +516 -360
  8. package/dist/_visual-editing.d.ts +516 -360
  9. package/dist/cli.js +1 -1
  10. package/dist/css.d.mts +258 -75
  11. package/dist/css.d.ts +258 -75
  12. package/dist/css.js +746 -752
  13. package/dist/css.js.map +1 -1
  14. package/dist/css.mjs +748 -754
  15. package/dist/css.mjs.map +1 -1
  16. package/dist/index.d.mts +1342 -871
  17. package/dist/index.d.ts +1342 -871
  18. package/dist/index.js +433 -325
  19. package/dist/index.js.map +1 -1
  20. package/dist/index.mjs +429 -321
  21. package/dist/index.mjs.map +1 -1
  22. package/dist/sanity-palette.css +105 -1
  23. package/dist/sanity-palette.min.css +1 -0
  24. package/dist/sanity-theme.css +4571 -1
  25. package/dist/sanity-theme.min.css +1 -0
  26. package/dist/system.css +22053 -21710
  27. package/dist/system.min.css +1 -0
  28. package/dist/theme.d.mts +51 -106
  29. package/dist/theme.d.ts +51 -106
  30. package/dist/theme.js +19 -20
  31. package/dist/theme.js.map +1 -1
  32. package/dist/theme.mjs +19 -20
  33. package/dist/theme.mjs.map +1 -1
  34. package/package.json +10 -5
  35. package/src/cli/buildCommand.ts +46 -19
  36. package/src/css/_comp.ts +2 -2
  37. package/src/css/{compile/compileStyle.ts → _compileStyle.ts} +7 -7
  38. package/src/css/_resp.ts +0 -1
  39. package/src/css/{system.style.ts → _system.style.ts} +3 -2
  40. package/src/css/aspects/display/display.ts +1 -0
  41. package/src/css/aspects/display/types.ts +2 -3
  42. package/src/css/aspects/flex/types.ts +4 -12
  43. package/src/css/aspects/flexItem/types.ts +1 -3
  44. package/src/css/aspects/font/font.style.ts +7 -66
  45. package/src/css/aspects/font/types.ts +1 -3
  46. package/src/css/aspects/grid/grid.ts +1 -0
  47. package/src/css/aspects/grid/types.ts +5 -9
  48. package/src/css/aspects/gridItem/gridItem.ts +1 -1
  49. package/src/css/aspects/gridItem/types.ts +7 -18
  50. package/src/css/aspects/height/height.ts +3 -4
  51. package/src/css/aspects/inset/inset.ts +1 -0
  52. package/src/css/aspects/margin/margin.ts +1 -0
  53. package/src/css/aspects/margin/types.ts +1 -0
  54. package/src/css/aspects/maxWidth/maxWidth.ts +1 -0
  55. package/src/css/aspects/maxWidth/types.ts +1 -0
  56. package/src/css/aspects/minWidth/minWidth.ts +1 -0
  57. package/src/css/aspects/minWidth/types.ts +2 -0
  58. package/src/css/aspects/overflow/overflow.ts +1 -0
  59. package/src/css/aspects/padding/padding.ts +1 -0
  60. package/src/css/aspects/pointerEvents/pointerEvents.ts +1 -0
  61. package/src/css/aspects/position/position.ts +1 -0
  62. package/src/css/aspects/shadow/shadow.style.ts +16 -41
  63. package/src/css/aspects/shadow/shadow.ts +1 -0
  64. package/src/css/aspects/textOverflow/textOverflow.ts +1 -0
  65. package/src/css/aspects/textOverflow/types.ts +1 -0
  66. package/src/css/aspects/width/types.ts +2 -0
  67. package/src/css/aspects/width/width.ts +1 -0
  68. package/src/css/compilePalette.ts +32 -0
  69. package/src/css/compileSystem.ts +7 -0
  70. package/src/css/{compile/compileTheme.ts → compileTheme.ts} +1 -0
  71. package/src/css/compileTheme_v3.ts +434 -0
  72. package/src/css/components/breadcrumbs/breadcrumbs.ts +1 -0
  73. package/src/css/components/dialog/dialog.ts +7 -0
  74. package/src/css/components/menu/menu.ts +2 -0
  75. package/src/css/components/skeleton/skeleton.style.ts +8 -4
  76. package/src/css/components/skeleton/skeleton.ts +4 -0
  77. package/src/css/components/skeleton/types.ts +4 -0
  78. package/src/css/components/toast/toast.ts +5 -0
  79. package/src/css/components/tree/tree.ts +1 -0
  80. package/src/css/composeClassNames.ts +4 -2
  81. package/src/css/constants.ts +11 -0
  82. package/src/css/index.ts +4 -3
  83. package/src/css/primitives/_arrow/_arrow.style.ts +6 -8
  84. package/src/css/primitives/_arrow/_arrow.ts +7 -0
  85. package/src/css/primitives/_input/input.ts +2 -0
  86. package/src/css/primitives/_selectable/_selectable.style.ts +24 -25
  87. package/src/css/primitives/_selectable/selectable.ts +1 -2
  88. package/src/css/primitives/avatar/avatar.style.ts +5 -8
  89. package/src/css/primitives/avatar/avatar.ts +6 -0
  90. package/src/css/primitives/avatar/types.ts +1 -0
  91. package/src/css/primitives/box/types.ts +1 -3
  92. package/src/css/primitives/button/button.style.ts +48 -15
  93. package/src/css/primitives/button/button.ts +4 -21
  94. package/src/css/primitives/button/index.ts +1 -0
  95. package/src/css/primitives/button/types.ts +18 -0
  96. package/src/css/primitives/card/card.style.ts +4 -7
  97. package/src/css/primitives/card/card.ts +2 -2
  98. package/src/css/primitives/card/types.ts +2 -2
  99. package/src/css/primitives/checkbox/checkbox.ts +2 -0
  100. package/src/css/primitives/container/container.ts +1 -0
  101. package/src/css/primitives/container/types.ts +1 -0
  102. package/src/css/primitives/kbd/kbd.ts +1 -0
  103. package/src/css/primitives/label/types.ts +7 -2
  104. package/src/css/primitives/popover/popover.ts +2 -0
  105. package/src/css/primitives/radio/radio.ts +1 -0
  106. package/src/css/primitives/select/select.ts +2 -0
  107. package/src/css/primitives/spinner/spinner.ts +2 -0
  108. package/src/css/primitives/switch/switch.ts +5 -0
  109. package/src/css/primitives/text/types.ts +4 -0
  110. package/src/css/primitives/textArea/textArea.ts +1 -0
  111. package/src/css/primitives/textInput/textInput.ts +1 -0
  112. package/src/css/primitives/token/token.style.ts +37 -36
  113. package/src/css/primitives/tooltip/tooltip.ts +2 -0
  114. package/src/css/responsiveRules.ts +12 -19
  115. package/src/css/scopeClassName.ts +1 -0
  116. package/src/css/types.ts +115 -15
  117. package/src/css/util.ts +5 -0
  118. package/src/css/utils/srOnly/srOnly.ts +1 -0
  119. package/src/css/varNames.ts +230 -143
  120. package/src/css/vars.ts +53 -22
  121. package/src/theme/palette/constants.ts +2 -0
  122. package/src/theme/palette/types.ts +3 -0
  123. package/src/theme/types.ts +2 -6
  124. package/src/theme/v0/focusRing.ts +1 -3
  125. package/src/theme/v0/font.ts +6 -18
  126. package/src/theme/v0/layer.ts +1 -3
  127. package/src/theme/v0/shadow.ts +2 -6
  128. package/src/theme/v2/avatar.ts +1 -3
  129. package/src/theme/v2/color/_system.ts +1 -3
  130. package/src/theme/v2/color/avatar.ts +2 -6
  131. package/src/theme/v2/color/badge.ts +2 -6
  132. package/src/theme/v2/color/button.ts +3 -9
  133. package/src/theme/v2/color/color.ts +3 -9
  134. package/src/theme/v2/color/input.ts +3 -9
  135. package/src/theme/v2/color/kbd.ts +1 -3
  136. package/src/theme/v2/color/selectable.ts +2 -6
  137. package/src/theme/v2/color/state.ts +1 -3
  138. package/src/theme/v2/color/syntax.ts +1 -3
  139. package/src/theme/v2/input.ts +1 -3
  140. package/src/theme/v2/theme.ts +2 -6
  141. package/src/theme/v3/buildTheme_v3.ts +2 -1
  142. package/src/theme/v3/color/color.ts +6 -4
  143. package/src/theme/v3/color/renderColor.ts +4 -1
  144. package/src/theme/v3/{defaults.ts → defaultTokens.ts} +2 -2
  145. package/src/theme/v3/index.ts +1 -1
  146. package/src/theme/v3/resolveTokens.ts +18 -18
  147. package/src/ui/RootClassNames.tsx +44 -0
  148. package/src/ui/StyleTags.tsx +3 -1
  149. package/src/ui/_compat/helpers.ts +72 -0
  150. package/src/ui/_compat/index.ts +2 -6
  151. package/src/ui/_compat/studioTheme.ts +7 -0
  152. package/src/ui/_compat/theme/themeColorProvider.tsx +2 -6
  153. package/src/ui/_compat/theme/themeProvider.tsx +2 -6
  154. package/src/ui/_compat/theme/types.ts +1 -3
  155. package/src/ui/_compat/theme/useRootTheme.ts +1 -3
  156. package/src/ui/_compat/theme/useTheme.ts +2 -6
  157. package/src/ui/_compat/types.ts +0 -83
  158. package/src/ui/components/autocomplete/__workshop__/constrainedHeight.tsx +2 -2
  159. package/src/ui/components/autocomplete/autocomplete.tsx +86 -114
  160. package/src/ui/components/autocomplete/autocompleteOption.tsx +2 -0
  161. package/src/ui/components/autocomplete/types.ts +3 -8
  162. package/src/ui/components/breadcrumbs/breadcrumbs.tsx +27 -21
  163. package/src/ui/components/dialog/dialog.tsx +89 -291
  164. package/src/ui/components/dialog/dialogCard.tsx +183 -0
  165. package/src/ui/components/dialog/isTargetWithinScope.ts +14 -0
  166. package/src/ui/components/hotkeys/hotkeys.tsx +33 -15
  167. package/src/ui/components/menu/__workshop__/asComponent.tsx +6 -6
  168. package/src/ui/components/menu/menu.tsx +27 -33
  169. package/src/ui/components/menu/menuButton.tsx +10 -14
  170. package/src/ui/components/menu/menuDivider.tsx +25 -13
  171. package/src/ui/components/menu/menuGroup.tsx +34 -26
  172. package/src/ui/components/menu/menuItem.tsx +51 -40
  173. package/src/ui/components/skeleton/codeSkeleton.tsx +53 -0
  174. package/src/ui/components/skeleton/headingSkeleton.tsx +52 -0
  175. package/src/ui/components/skeleton/index.ts +3 -0
  176. package/src/ui/components/skeleton/labelSkeleton.tsx +51 -0
  177. package/src/ui/components/skeleton/skeleton.tsx +39 -16
  178. package/src/ui/components/skeleton/textSkeleton.tsx +31 -110
  179. package/src/ui/components/tab/tab.tsx +23 -19
  180. package/src/ui/components/tab/tabList.tsx +34 -33
  181. package/src/ui/components/tab/tabPanel.tsx +25 -19
  182. package/src/ui/components/toast/toast.tsx +21 -16
  183. package/src/ui/components/toast/toastLayer.tsx +28 -10
  184. package/src/ui/components/toast/toastProvider.tsx +2 -6
  185. package/src/ui/components/toast/types.ts +2 -6
  186. package/src/ui/components/toast/useToast.ts +1 -3
  187. package/src/ui/components/tree/tree.tsx +194 -187
  188. package/src/ui/components/tree/treeGroup.tsx +25 -5
  189. package/src/ui/components/tree/treeItem.tsx +35 -23
  190. package/src/ui/hooks/useClickOutside.ts +2 -6
  191. package/src/ui/hooks/useClickOutsideEvent.ts +3 -9
  192. package/src/ui/index.ts +1 -0
  193. package/src/ui/primitives/_selectable/selectable.tsx +33 -20
  194. package/src/ui/primitives/avatar/avatar.tsx +28 -31
  195. package/src/ui/primitives/avatar/avatarCounter.tsx +33 -25
  196. package/src/ui/primitives/avatar/avatarStack.tsx +31 -24
  197. package/src/ui/primitives/avatar/types.ts +2 -0
  198. package/src/ui/primitives/badge/__workshop__/props.tsx +1 -9
  199. package/src/ui/primitives/badge/__workshop__/tones.tsx +1 -6
  200. package/src/ui/primitives/badge/badge.tsx +33 -32
  201. package/src/ui/primitives/badge/types.ts +2 -1
  202. package/src/ui/primitives/box/box.tsx +59 -29
  203. package/src/ui/primitives/button/__workshop__/sanityUploadButton.tsx +3 -3
  204. package/src/ui/primitives/button/__workshop__/uploadButton.tsx +2 -1
  205. package/src/ui/primitives/button/button.test.tsx +1 -15
  206. package/src/ui/primitives/button/button.tsx +63 -70
  207. package/src/ui/primitives/card/__workshop__/asComponent.tsx +3 -3
  208. package/src/ui/primitives/card/card.tsx +22 -22
  209. package/src/ui/primitives/card/cardProvider.tsx +2 -0
  210. package/src/ui/primitives/checkbox/checkbox.tsx +26 -15
  211. package/src/ui/primitives/code/code.tsx +24 -22
  212. package/src/ui/primitives/container/container.tsx +26 -15
  213. package/src/ui/primitives/flex/flex.tsx +21 -19
  214. package/src/ui/primitives/grid/grid.tsx +21 -16
  215. package/src/ui/primitives/heading/heading.tsx +42 -19
  216. package/src/ui/primitives/inline/inline.tsx +26 -23
  217. package/src/ui/primitives/kbd/kbd.tsx +25 -23
  218. package/src/ui/primitives/label/label.tsx +29 -26
  219. package/src/ui/primitives/popover/popover.tsx +293 -271
  220. package/src/ui/primitives/popover/popoverCard.tsx +122 -120
  221. package/src/ui/primitives/radio/radio.tsx +30 -14
  222. package/src/ui/primitives/select/select.tsx +24 -16
  223. package/src/ui/primitives/spinner/animatedSpinnerIcon.tsx +4 -2
  224. package/src/ui/primitives/spinner/spinner.tsx +24 -12
  225. package/src/ui/primitives/stack/stack.tsx +27 -18
  226. package/src/ui/primitives/switch/switch.tsx +31 -14
  227. package/src/ui/primitives/text/text.tsx +30 -24
  228. package/src/ui/primitives/textArea/textArea.tsx +33 -18
  229. package/src/ui/primitives/textInput/textInput.tsx +28 -40
  230. package/src/ui/primitives/tooltip/constants.ts +1 -1
  231. package/src/ui/primitives/tooltip/tooltip.tsx +85 -61
  232. package/src/ui/primitives/tooltip/tooltipCard.tsx +89 -82
  233. package/src/ui/primitives/types.ts +1 -3
  234. package/src/ui/types/avatar.ts +3 -6
  235. package/src/ui/types/badge.ts +1 -3
  236. package/src/ui/types/button.ts +1 -3
  237. package/src/ui/types/card.ts +1 -3
  238. package/src/ui/types/dialog.ts +1 -3
  239. package/src/ui/types/props.ts +20 -10
  240. package/src/ui/utils/arrow/arrow.tsx +43 -25
  241. package/src/ui/utils/boundaryElement/boundaryElementProvider.tsx +2 -6
  242. package/src/ui/utils/boundaryElement/types.ts +1 -3
  243. package/src/ui/utils/boundaryElement/useBoundaryElement.ts +1 -3
  244. package/src/ui/utils/elementQuery/elementQuery.tsx +43 -19
  245. package/src/ui/utils/errorBoundary.tsx +2 -0
  246. package/src/ui/utils/index.ts +0 -1
  247. package/src/ui/utils/layer/layer.tsx +23 -93
  248. package/src/ui/utils/layer/layerCard.tsx +92 -0
  249. package/src/ui/utils/layer/layerProvider.tsx +2 -6
  250. package/src/ui/utils/layer/useLayer.ts +1 -3
  251. package/src/ui/utils/portal/portal.ts +2 -6
  252. package/src/ui/utils/portal/portalProvider.tsx +2 -6
  253. package/src/ui/utils/portal/types.ts +1 -3
  254. package/src/ui/utils/portal/usePortal.ts +1 -3
  255. package/src/ui/utils/srOnly/srOnly.tsx +25 -20
  256. package/src/ui/utils/virtualList/virtualList.tsx +69 -50
  257. package/src/css/compile/compilePalette.ts +0 -27
  258. package/src/css/compile/compileRule.ts +0 -97
  259. package/src/css/compile/compileRules.test.ts +0 -36
  260. package/src/css/compile/compileRules.ts +0 -43
  261. package/src/css/compile/compileSystem.ts +0 -10
  262. package/src/css/compile/compileTheme_v3.ts +0 -401
  263. package/src/css/compile/types.ts +0 -6
  264. package/src/css/components/breadcrumbs/rules.ts +0 -25
  265. package/src/css/components/dialog/rules.ts +0 -78
  266. package/src/css/components/skeleton/rules.ts +0 -113
  267. package/src/css/components/toast/rules.ts +0 -18
  268. package/src/css/components/tree/rules.ts +0 -168
  269. package/src/css/primitives/_selectable/_contants.ts +0 -11
  270. package/src/css/primitives/card/_constants.ts +0 -13
  271. package/src/css/primitives/popover/rules.ts +0 -5
  272. package/src/css/primitives/spinner/rules.ts +0 -21
  273. package/src/css/primitives/token/rules.ts +0 -45
  274. package/src/ui/utils/conditionalWrapper/conditionalWrapper.tsx +0 -23
  275. package/src/ui/utils/conditionalWrapper/index.ts +0 -1
package/dist/theme.mjs CHANGED
@@ -1695,7 +1695,6 @@ function buildColorElement_v3(tokens, options) {
1695
1695
  const defaultTokens = {
1696
1696
  color: {
1697
1697
  "*": {
1698
- // backdrop: ['black/0.2', '200/0.2'],
1699
1698
  backdrop: ["black/0.5", "gray/100/0.5"],
1700
1699
  code: {
1701
1700
  bg: ["950", "50"],
@@ -1753,7 +1752,7 @@ const defaultTokens = {
1753
1752
  "*": {
1754
1753
  bg: {
1755
1754
  0: ["950", "50"],
1756
- 4: ["800", "200"]
1755
+ 4: ["700", "300"]
1757
1756
  },
1758
1757
  border: {
1759
1758
  0: ["700", "100"],
@@ -1936,48 +1935,48 @@ function resolveCardColorTokens(tokens) {
1936
1935
  avatar: {
1937
1936
  gray: {
1938
1937
  _hue: tokens?.avatar?.gray?._hue ?? "gray",
1939
- bg: tokens?.avatar?.gray?.bg ?? ["400", "400"],
1940
- fg: tokens?.avatar?.gray?.fg ?? ["900", "900"]
1938
+ bg: tokens?.avatar?.gray?.bg ?? ["400", "500"],
1939
+ fg: tokens?.avatar?.gray?.fg ?? ["900", "white"]
1941
1940
  },
1942
1941
  blue: {
1943
1942
  _hue: tokens?.avatar?.blue?._hue ?? "blue",
1944
- bg: tokens?.avatar?.blue?.bg ?? ["400", "400"],
1945
- fg: tokens?.avatar?.blue?.fg ?? ["900", "900"]
1943
+ bg: tokens?.avatar?.blue?.bg ?? ["400", "500"],
1944
+ fg: tokens?.avatar?.blue?.fg ?? ["900", "white"]
1946
1945
  },
1947
1946
  purple: {
1948
1947
  _hue: tokens?.avatar?.purple?._hue ?? "purple",
1949
- bg: tokens?.avatar?.purple?.bg ?? ["400", "400"],
1950
- fg: tokens?.avatar?.purple?.fg ?? ["900", "900"]
1948
+ bg: tokens?.avatar?.purple?.bg ?? ["400", "500"],
1949
+ fg: tokens?.avatar?.purple?.fg ?? ["900", "white"]
1951
1950
  },
1952
1951
  magenta: {
1953
1952
  _hue: tokens?.avatar?.magenta?._hue ?? "magenta",
1954
- bg: tokens?.avatar?.magenta?.bg ?? ["400", "400"],
1955
- fg: tokens?.avatar?.magenta?.fg ?? ["900", "900"]
1953
+ bg: tokens?.avatar?.magenta?.bg ?? ["400", "500"],
1954
+ fg: tokens?.avatar?.magenta?.fg ?? ["900", "white"]
1956
1955
  },
1957
1956
  red: {
1958
1957
  _hue: tokens?.avatar?.red?._hue ?? "red",
1959
- bg: tokens?.avatar?.red?.bg ?? ["400", "400"],
1960
- fg: tokens?.avatar?.red?.fg ?? ["900", "900"]
1958
+ bg: tokens?.avatar?.red?.bg ?? ["400", "500"],
1959
+ fg: tokens?.avatar?.red?.fg ?? ["900", "white"]
1961
1960
  },
1962
1961
  orange: {
1963
1962
  _hue: tokens?.avatar?.orange?._hue ?? "orange",
1964
- bg: tokens?.avatar?.orange?.bg ?? ["400", "400"],
1965
- fg: tokens?.avatar?.orange?.fg ?? ["900", "900"]
1963
+ bg: tokens?.avatar?.orange?.bg ?? ["400", "500"],
1964
+ fg: tokens?.avatar?.orange?.fg ?? ["900", "white"]
1966
1965
  },
1967
1966
  yellow: {
1968
1967
  _hue: tokens?.avatar?.yellow?._hue ?? "yellow",
1969
- bg: tokens?.avatar?.yellow?.bg ?? ["400", "400"],
1970
- fg: tokens?.avatar?.yellow?.fg ?? ["900", "900"]
1968
+ bg: tokens?.avatar?.yellow?.bg ?? ["400", "500"],
1969
+ fg: tokens?.avatar?.yellow?.fg ?? ["900", "white"]
1971
1970
  },
1972
1971
  green: {
1973
1972
  _hue: tokens?.avatar?.green?._hue ?? "green",
1974
- bg: tokens?.avatar?.green?.bg ?? ["400", "400"],
1975
- fg: tokens?.avatar?.green?.fg ?? ["900", "900"]
1973
+ bg: tokens?.avatar?.green?.bg ?? ["400", "500"],
1974
+ fg: tokens?.avatar?.green?.fg ?? ["900", "white"]
1976
1975
  },
1977
1976
  cyan: {
1978
1977
  _hue: tokens?.avatar?.cyan?._hue ?? "cyan",
1979
- bg: tokens?.avatar?.cyan?.bg ?? ["400", "400"],
1980
- fg: tokens?.avatar?.cyan?.fg ?? ["900", "900"]
1978
+ bg: tokens?.avatar?.cyan?.bg ?? ["400", "500"],
1979
+ fg: tokens?.avatar?.cyan?.fg ?? ["900", "white"]
1981
1980
  }
1982
1981
  },
1983
1982
  backdrop: tokens?.backdrop ?? ["900", "100"],