@sanity/ui 3.0.0-static.11 → 3.0.0-static.13

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