@sanity/ui 4.2.0 → 5.0.0-alpha.10

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 (339) hide show
  1. package/README.md +194 -28
  2. package/bin/sanity-ui.js +14 -0
  3. package/dist/_chunks-es/LazyRefractor.js +20 -0
  4. package/dist/_chunks-es/LazyRefractor.js.map +1 -0
  5. package/dist/cli/checks.js +148 -0
  6. package/dist/cli/config.js +23 -0
  7. package/dist/cli/detect.js +181 -0
  8. package/dist/cli/doctor.js +49 -0
  9. package/dist/cli/index.js +69 -0
  10. package/dist/cli/init.js +189 -0
  11. package/dist/cli/install.js +79 -0
  12. package/dist/cli/log.js +66 -0
  13. package/dist/cli/selfPackage.js +11 -0
  14. package/dist/cli/styles.js +185 -0
  15. package/dist/cli/test-utils.js +8 -0
  16. package/dist/cli/tsconfig.js +236 -0
  17. package/dist/cli/types.js +1 -0
  18. package/dist/cli/versions.js +45 -0
  19. package/dist/index.d.ts +1203 -1469
  20. package/dist/index.js +2123 -1989
  21. package/dist/index.js.map +1 -1
  22. package/dist/polyfills.d.ts +1 -0
  23. package/dist/polyfills.js +5 -0
  24. package/dist/polyfills.js.map +1 -0
  25. package/dist/styles.css +1 -547
  26. package/package.json +57 -58
  27. package/src/cli/checks.test.ts +38 -0
  28. package/src/cli/checks.ts +200 -0
  29. package/src/cli/config.ts +44 -0
  30. package/src/cli/detect.test.ts +191 -0
  31. package/src/cli/detect.ts +205 -0
  32. package/src/cli/doctor.test.ts +52 -0
  33. package/src/cli/doctor.ts +65 -0
  34. package/src/cli/index.ts +77 -0
  35. package/src/cli/init.ts +225 -0
  36. package/src/cli/install.test.ts +52 -0
  37. package/src/cli/install.ts +108 -0
  38. package/src/cli/log.ts +79 -0
  39. package/src/cli/selfPackage.ts +14 -0
  40. package/src/cli/styles.test.ts +130 -0
  41. package/src/cli/styles.ts +205 -0
  42. package/src/cli/test-utils.ts +10 -0
  43. package/src/cli/tsconfig.test.ts +174 -0
  44. package/src/cli/tsconfig.ts +282 -0
  45. package/src/cli/types.ts +77 -0
  46. package/src/cli/versions.test.ts +35 -0
  47. package/src/cli/versions.ts +41 -0
  48. package/src/components/badge/Badge.tsx +53 -0
  49. package/src/components/badge/badge.css +6 -0
  50. package/src/components/badge/badge.props.ts +31 -0
  51. package/src/components/box/Box.tsx +30 -0
  52. package/src/components/box/box.css +4 -0
  53. package/src/components/box/box.props.ts +29 -0
  54. package/src/components/button/Button.tsx +78 -0
  55. package/src/components/button/button.css +72 -0
  56. package/src/components/button/button.props.ts +122 -0
  57. package/src/components/card/Card.tsx +31 -0
  58. package/src/components/card/card.css +4 -0
  59. package/src/components/card/card.props.ts +58 -0
  60. package/src/components/checkbox/Checkbox.tsx +64 -0
  61. package/src/components/checkbox/checkbox.css +100 -0
  62. package/src/components/checkbox/checkbox.props.ts +33 -0
  63. package/src/components/code/Code.tsx +38 -0
  64. package/src/components/code/LazyRefractor.tsx +9 -0
  65. package/src/components/code/code.css +40 -0
  66. package/src/components/code/code.props.ts +44 -0
  67. package/src/components/container/Container.tsx +30 -0
  68. package/src/components/container/container.css +4 -0
  69. package/src/components/container/container.props.ts +28 -0
  70. package/src/components/dialog/Dialog.tsx +139 -0
  71. package/src/components/dialog/dialog.css +49 -0
  72. package/src/components/dialog/dialog.props.ts +45 -0
  73. package/src/components/divider/Divider.tsx +23 -0
  74. package/src/components/divider/divider.props.ts +9 -0
  75. package/src/components/eyebrow/Eyebrow.tsx +54 -0
  76. package/src/components/eyebrow/eyebrow.css +11 -0
  77. package/src/components/eyebrow/eyebrow.props.ts +28 -0
  78. package/src/components/flex/Flex.tsx +30 -0
  79. package/src/components/flex/flex.css +4 -0
  80. package/src/components/flex/flex.props.ts +33 -0
  81. package/src/components/grid/Grid.tsx +30 -0
  82. package/src/components/grid/grid.css +4 -0
  83. package/src/components/grid/grid.props.ts +33 -0
  84. package/src/components/h-stack/HStack.tsx +34 -0
  85. package/src/components/h-stack/hStack.props.ts +17 -0
  86. package/src/components/heading/Heading.tsx +54 -0
  87. package/src/components/heading/heading.css +9 -0
  88. package/src/components/heading/heading.props.ts +31 -0
  89. package/src/components/icon/Icon.tsx +24 -0
  90. package/src/components/icon/icon.css +17 -0
  91. package/src/components/icon/icon.props.ts +35 -0
  92. package/src/components/icon-button/IconButton.tsx +32 -0
  93. package/src/components/icon-button/iconButton.props.ts +31 -0
  94. package/src/components/index.css +28 -0
  95. package/src/components/indicator/Indicator.tsx +42 -0
  96. package/src/components/indicator/indicator.css +4 -0
  97. package/src/components/indicator/indicator.props.ts +24 -0
  98. package/src/components/indicator-stack/IndicatorStack.tsx +31 -0
  99. package/src/components/indicator-stack/indicator-stack.css +7 -0
  100. package/src/components/indicator-stack/indicatorStack.props.ts +15 -0
  101. package/src/components/inline/Inline.tsx +38 -0
  102. package/src/components/inline/inline.css +4 -0
  103. package/src/components/inline/inline.props.ts +100 -0
  104. package/src/components/label/Label.tsx +34 -0
  105. package/src/components/label/label.css +3 -0
  106. package/src/components/label/label.props.ts +25 -0
  107. package/src/components/link/Link.tsx +29 -0
  108. package/src/components/link/link.css +12 -0
  109. package/src/components/link/link.props.ts +23 -0
  110. package/src/components/list/List.tsx +167 -0
  111. package/src/components/list/list.css +25 -0
  112. package/src/components/list/list.props.ts +130 -0
  113. package/src/components/popover/Popover.tsx +85 -0
  114. package/src/components/popover/popover.css +21 -0
  115. package/src/components/popover/popover.props.ts +38 -0
  116. package/src/components/press-area/PressArea.tsx +29 -0
  117. package/src/components/press-area/press-area.css +22 -0
  118. package/src/components/press-area/pressArea.props.ts +16 -0
  119. package/src/components/radio/Radio.tsx +48 -0
  120. package/src/components/radio/radio.css +97 -0
  121. package/src/components/radio/radio.props.ts +25 -0
  122. package/src/components/skip-to-content/SkipToContent.tsx +35 -0
  123. package/src/components/skip-to-content/skip-to-content.css +9 -0
  124. package/src/components/skip-to-content/skipToContent.props.ts +25 -0
  125. package/src/components/spinner/Spinner.tsx +28 -0
  126. package/src/components/spinner/spinner.css +10 -0
  127. package/src/components/spinner/spinner.props.ts +19 -0
  128. package/src/components/switch/Switch.tsx +48 -0
  129. package/src/components/switch/switch.css +119 -0
  130. package/src/components/switch/switch.props.ts +25 -0
  131. package/src/components/text/Text.tsx +53 -0
  132. package/src/components/text/text.css +9 -0
  133. package/src/components/text/text.props.ts +28 -0
  134. package/src/components/tooltip/Tooltip.tsx +97 -0
  135. package/src/components/tooltip/tooltip.css +31 -0
  136. package/src/components/tooltip/tooltip.props.ts +36 -0
  137. package/src/components/tooltip-group/TooltipGroup.tsx +64 -0
  138. package/src/components/tooltip-group/tooltipGroup.props.ts +15 -0
  139. package/src/components/v-stack/VStack.tsx +32 -0
  140. package/src/components/v-stack/vStack.props.ts +17 -0
  141. package/src/components/visually-hidden/VisuallyHidden.tsx +29 -0
  142. package/src/components/visually-hidden/visually-hidden.css +9 -0
  143. package/src/components/visually-hidden/visuallyHidden.props.ts +23 -0
  144. package/src/css/classes/dynamic/flex-child.css +5 -0
  145. package/src/css/classes/dynamic/grid-child.css +8 -0
  146. package/src/css/classes/dynamic/grid-parent.css +6 -0
  147. package/src/css/classes/dynamic/height.css +5 -0
  148. package/src/css/classes/dynamic/index.css +7 -0
  149. package/src/css/classes/dynamic/line-clamp.css +5 -0
  150. package/src/css/classes/dynamic/readme.md +3 -0
  151. package/src/css/classes/dynamic/width.css +7 -0
  152. package/src/css/classes/dynamic/z-index.css +3 -0
  153. package/src/css/classes/generic/display.css +10 -0
  154. package/src/css/classes/generic/flex.css +24 -0
  155. package/src/css/classes/generic/grid.css +7 -0
  156. package/src/css/classes/generic/index.css +7 -0
  157. package/src/css/classes/generic/overflow.css +19 -0
  158. package/src/css/classes/generic/placement.css +202 -0
  159. package/src/css/classes/generic/position.css +7 -0
  160. package/src/css/classes/generic/readme.md +3 -0
  161. package/src/css/classes/generic/text-align.css +5 -0
  162. package/src/css/classes/index.css +4 -0
  163. package/src/css/classes/local/animation.css +4 -0
  164. package/src/css/classes/local/border.css +20 -0
  165. package/src/css/classes/local/index.css +6 -0
  166. package/src/css/classes/local/readme.md +3 -0
  167. package/src/css/classes/local/text-overflow.css +5 -0
  168. package/src/css/classes/local/text-trim.css +45 -0
  169. package/src/css/classes/local/tone.css +75 -0
  170. package/src/css/classes/local/top-anchor.css +4 -0
  171. package/src/css/classes/system/color.css +223 -0
  172. package/src/css/classes/system/container.css +8 -0
  173. package/src/css/classes/system/font-family.css +2 -0
  174. package/src/css/classes/system/font-weight.css +4 -0
  175. package/src/css/classes/system/gap.css +37 -0
  176. package/src/css/classes/system/index.css +10 -0
  177. package/src/css/classes/system/inset.css +56 -0
  178. package/src/css/classes/system/margin.css +148 -0
  179. package/src/css/classes/system/padding.css +78 -0
  180. package/src/css/classes/system/radius.css +10 -0
  181. package/src/css/classes/system/readme.md +3 -0
  182. package/src/css/classes/system/shadow.css +6 -0
  183. package/src/css/classes/system/typography.css +31 -0
  184. package/src/css/global/font-face.css +20 -0
  185. package/src/css/global/index.css +2 -0
  186. package/src/css/global/reset.css +76 -0
  187. package/src/css/tokens/index.css +3 -0
  188. package/src/css/tokens/opacity.css +6 -0
  189. package/src/css/tokens/semantic.css +25 -0
  190. package/src/css/tokens/surface.css +27 -0
  191. package/src/hooks/useIsClient.ts +10 -0
  192. package/src/index.css +18 -0
  193. package/src/index.ts +65 -0
  194. package/src/polyfills.ts +15 -0
  195. package/src/props/border.ts +51 -0
  196. package/src/props/flexChild.ts +29 -0
  197. package/src/props/flexParent.ts +47 -0
  198. package/src/props/gap.ts +31 -0
  199. package/src/props/gridChild.ts +50 -0
  200. package/src/props/gridParent.ts +45 -0
  201. package/src/props/height.ts +29 -0
  202. package/src/props/layout.ts +44 -0
  203. package/src/props/margin.ts +59 -0
  204. package/src/props/overflow.ts +30 -0
  205. package/src/props/padding.ts +59 -0
  206. package/src/props/placement.ts +16 -0
  207. package/src/props/position.ts +52 -0
  208. package/src/props/shadow.ts +15 -0
  209. package/src/props/tone.ts +15 -0
  210. package/src/props/typography.ts +62 -0
  211. package/src/props/width.ts +29 -0
  212. package/src/props/zIndex.ts +15 -0
  213. package/src/styles.css.d.ts +1 -0
  214. package/src/styles.css.node.js +2 -0
  215. package/src/styles.css.test.ts +24 -0
  216. package/src/types/Button.ts +8 -0
  217. package/src/types/Code.ts +6 -0
  218. package/src/types/Container.ts +3 -0
  219. package/src/types/Density.ts +3 -0
  220. package/src/types/Display.ts +11 -0
  221. package/src/types/Eyebrow.ts +3 -0
  222. package/src/types/Flex.ts +22 -0
  223. package/src/types/FontWeight.ts +3 -0
  224. package/src/types/Grid.ts +3 -0
  225. package/src/types/Heading.ts +6 -0
  226. package/src/types/Icon.ts +3 -0
  227. package/src/types/Interactive.ts +8 -0
  228. package/src/types/List.ts +2 -0
  229. package/src/types/Overflow.ts +3 -0
  230. package/src/types/Placement.ts +16 -0
  231. package/src/types/Position.ts +3 -0
  232. package/src/types/PropDef.ts +73 -0
  233. package/src/types/Radius.ts +3 -0
  234. package/src/types/Responsive.ts +10 -0
  235. package/src/types/Shadow.ts +3 -0
  236. package/src/types/Space.ts +15 -0
  237. package/src/types/Text.ts +3 -0
  238. package/src/types/TextAlign.ts +3 -0
  239. package/src/types/Tone.ts +3 -0
  240. package/src/utils/getProps.test.ts +156 -0
  241. package/src/utils/getProps.ts +156 -0
  242. package/src/utils/mergeTriggerProps.ts +66 -0
  243. package/src/utils/renderPortal.tsx +14 -0
  244. package/src/utils/suffixClassName.ts +5 -0
  245. package/src/version.ts +3 -0
  246. package/LICENSE +0 -21
  247. package/dist/_system-CTe2lb5l.d.ts +0 -40
  248. package/dist/_system-CTe2lb5l.d.ts.map +0 -1
  249. package/dist/arrow-BmX6qbAS.js +0 -170
  250. package/dist/arrow-BmX6qbAS.js.map +0 -1
  251. package/dist/autocomplete.d.ts +0 -140
  252. package/dist/autocomplete.d.ts.map +0 -1
  253. package/dist/autocomplete.js +0 -470
  254. package/dist/autocomplete.js.map +0 -1
  255. package/dist/breadcrumbs.d.ts +0 -18
  256. package/dist/breadcrumbs.d.ts.map +0 -1
  257. package/dist/breadcrumbs.js +0 -119
  258. package/dist/breadcrumbs.js.map +0 -1
  259. package/dist/button-BNyKSDyA.js +0 -180
  260. package/dist/button-BNyKSDyA.js.map +0 -1
  261. package/dist/button-dnqMFkWg.d.ts +0 -76
  262. package/dist/button-dnqMFkWg.d.ts.map +0 -1
  263. package/dist/card-C0a0wQTc.d.ts +0 -7
  264. package/dist/card-C0a0wQTc.d.ts.map +0 -1
  265. package/dist/code.d.ts +0 -20
  266. package/dist/code.d.ts.map +0 -1
  267. package/dist/code.js +0 -90
  268. package/dist/code.js.map +0 -1
  269. package/dist/codeFontStyle-84SMhFtI.js +0 -11
  270. package/dist/codeFontStyle-84SMhFtI.js.map +0 -1
  271. package/dist/component-DVlwaWB-.d.ts +0 -25
  272. package/dist/component-DVlwaWB-.d.ts.map +0 -1
  273. package/dist/element-BYgCE_iK.js +0 -51
  274. package/dist/element-BYgCE_iK.js.map +0 -1
  275. package/dist/factory-BzXTX8_Q.js +0 -3056
  276. package/dist/factory-BzXTX8_Q.js.map +0 -1
  277. package/dist/flex-DmbDG2ks.js +0 -76
  278. package/dist/flex-DmbDG2ks.js.map +0 -1
  279. package/dist/font-EtfxKPUz.d.ts +0 -49
  280. package/dist/font-EtfxKPUz.d.ts.map +0 -1
  281. package/dist/getElementRef-Jw7gY0eV.js +0 -102
  282. package/dist/getElementRef-Jw7gY0eV.js.map +0 -1
  283. package/dist/getScopedTheme-C-sZsyAz.js +0 -267
  284. package/dist/getScopedTheme-C-sZsyAz.js.map +0 -1
  285. package/dist/getTheme_v2-y09KqtEb.js +0 -487
  286. package/dist/getTheme_v2-y09KqtEb.js.map +0 -1
  287. package/dist/grid-6JSgMj1O.js +0 -115
  288. package/dist/grid-6JSgMj1O.js.map +0 -1
  289. package/dist/helpers-C8xxXAQC.js +0 -63
  290. package/dist/helpers-C8xxXAQC.js.map +0 -1
  291. package/dist/hotkeys-CaHsQlsO.js +0 -168
  292. package/dist/hotkeys-CaHsQlsO.js.map +0 -1
  293. package/dist/index.d.ts.map +0 -1
  294. package/dist/layer-Bl5R3uNR.js +0 -61
  295. package/dist/layer-Bl5R3uNR.js.map +0 -1
  296. package/dist/layer-ChlP9Ik6.d.ts +0 -242
  297. package/dist/layer-ChlP9Ik6.d.ts.map +0 -1
  298. package/dist/menu.d.ts +0 -146
  299. package/dist/menu.d.ts.map +0 -1
  300. package/dist/menu.js +0 -626
  301. package/dist/menu.js.map +0 -1
  302. package/dist/popover-B7-28L8y.js +0 -408
  303. package/dist/popover-B7-28L8y.js.map +0 -1
  304. package/dist/popover-CMlQeKn0.d.ts +0 -96
  305. package/dist/popover-CMlQeKn0.d.ts.map +0 -1
  306. package/dist/popover.d.ts +0 -2
  307. package/dist/popover.js +0 -3
  308. package/dist/refractor-CC48DwHi.js +0 -20
  309. package/dist/refractor-CC48DwHi.js.map +0 -1
  310. package/dist/responsiveFont-CilwaORG.js +0 -55
  311. package/dist/responsiveFont-CilwaORG.js.map +0 -1
  312. package/dist/rgba-BSYaEUW6.d.ts +0 -846
  313. package/dist/rgba-BSYaEUW6.d.ts.map +0 -1
  314. package/dist/selectable-B0GUIL74.d.ts +0 -7
  315. package/dist/selectable-B0GUIL74.d.ts.map +0 -1
  316. package/dist/stack-rsNFPq2-.js +0 -112
  317. package/dist/stack-rsNFPq2-.js.map +0 -1
  318. package/dist/styles-css.d.ts +0 -2
  319. package/dist/styles-css.js +0 -4
  320. package/dist/textInput-pSfQjkmx.js +0 -313
  321. package/dist/textInput-pSfQjkmx.js.map +0 -1
  322. package/dist/theme.d.ts +0 -280
  323. package/dist/theme.d.ts.map +0 -1
  324. package/dist/theme.js +0 -55
  325. package/dist/theme.js.map +0 -1
  326. package/dist/toast.d.ts +0 -73
  327. package/dist/toast.d.ts.map +0 -1
  328. package/dist/toast.js +0 -302
  329. package/dist/toast.js.map +0 -1
  330. package/dist/tooltip.d.ts +0 -88
  331. package/dist/tooltip.d.ts.map +0 -1
  332. package/dist/tooltip.js +0 -435
  333. package/dist/tooltip.js.map +0 -1
  334. package/dist/useClickOutsideEvent-wGLGWBZN.js +0 -36
  335. package/dist/useClickOutsideEvent-wGLGWBZN.js.map +0 -1
  336. package/dist/useElementSize-BJvbGHq8.js +0 -51
  337. package/dist/useElementSize-BJvbGHq8.js.map +0 -1
  338. package/dist/useLayer-D1usxIE0.js +0 -712
  339. package/dist/useLayer-D1usxIE0.js.map +0 -1
package/dist/toast.js DELETED
@@ -1,302 +0,0 @@
1
- "use client";
2
- import { _ as useTheme_v2, d as createGlobalScopedContext, i as usePrefersReducedMotion, n as LayerProvider, r as isRecord, s as Card, t as useLayer, y as Box } from "./useLayer-D1usxIE0.js";
3
- import { t as Flex } from "./flex-DmbDG2ks.js";
4
- import { n as Text, t as Stack } from "./stack-rsNFPq2-.js";
5
- import { t as Button } from "./button-BNyKSDyA.js";
6
- import { t as Grid } from "./grid-6JSgMj1O.js";
7
- import { c } from "react/compiler-runtime";
8
- import { clsx } from "clsx/lite";
9
- import { startTransition, useContext, useState, useSyncExternalStore } from "react";
10
- import { jsx, jsxs } from "react/jsx-runtime";
11
- import { AnimatePresence, motion, stagger } from "motion/react";
12
- import { CloseIcon } from "@sanity/icons/Close";
13
- const STATUS_CARD_TONE = {
14
- error: "critical",
15
- warning: "caution",
16
- success: "positive",
17
- info: "neutral"
18
- }, BUTTON_TONE = {
19
- error: "critical",
20
- warning: "caution",
21
- success: "positive",
22
- info: "neutral"
23
- };
24
- var loadingBarProgress = "_1a5lj7y4", toast = "_1a5lj7y0", toastText = "_1a5lj7y1";
25
- const ROLES = {
26
- error: "alert",
27
- warning: "alert",
28
- success: "alert",
29
- info: "alert"
30
- };
31
- /**
32
- * The `Toast` component gives feedback to users when an action has taken place.
33
- *
34
- * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
35
- *
36
- * @public
37
- */
38
- function Toast(props) {
39
- let $ = c(54), className, closable, description, duration, onClose, restProps, status, t0, title, updatedAt;
40
- $[0] === props ? (className = $[1], closable = $[2], description = $[3], duration = $[4], onClose = $[5], restProps = $[6], status = $[7], t0 = $[8], title = $[9], updatedAt = $[10]) : ({className, closable, description, duration, onClose, radius: t0, title, status, updatedAt, ...restProps} = props, $[0] = props, $[1] = className, $[2] = closable, $[3] = description, $[4] = duration, $[5] = onClose, $[6] = restProps, $[7] = status, $[8] = t0, $[9] = title, $[10] = updatedAt);
41
- let radius = t0 === void 0 ? 3 : t0, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status", visualDuration = usePrefersReducedMotion() ? 0 : .26, t1;
42
- $[11] === visualDuration ? t1 = $[12] : (t1 = visualDuration ? {
43
- type: "spring",
44
- visualDuration,
45
- bounce: .25
46
- } : { duration: 0 }, $[11] = visualDuration, $[12] = t1);
47
- let transition = t1, hasDuration = duration && isFinite(duration) && duration < 20736e5, t2;
48
- $[13] === Symbol.for("react.memo_cache_sentinel") ? (t2 = ["hidden", "initial"], $[13] = t2) : t2 = $[13];
49
- let initial = t2, t3;
50
- $[14] === Symbol.for("react.memo_cache_sentinel") ? (t3 = ["visible", "slideIn"], $[14] = t3) : t3 = $[14];
51
- let animate = t3, t4;
52
- $[15] === Symbol.for("react.memo_cache_sentinel") ? (t4 = ["hidden", "slideOut"], $[15] = t4) : t4 = $[15];
53
- let exit = t4, t5;
54
- $[16] === className ? t5 = $[17] : (t5 = clsx(toast, className), $[16] = className, $[17] = t5);
55
- let t6 = hasDuration ? "" : void 0, t7;
56
- $[18] === title ? t7 = $[19] : (t7 = title && /* @__PURE__ */ jsx(Text, {
57
- size: 1,
58
- weight: "medium",
59
- children: title
60
- }), $[18] = title, $[19] = t7);
61
- let t8;
62
- $[20] !== description || $[21] !== transition ? (t8 = description && /* @__PURE__ */ jsx(MotionText, {
63
- muted: !0,
64
- size: 1,
65
- variants: content,
66
- transition,
67
- children: description
68
- }), $[20] = description, $[21] = transition, $[22] = t8) : t8 = $[22];
69
- let t9;
70
- $[23] !== t7 || $[24] !== t8 ? (t9 = /* @__PURE__ */ jsx(Flex, {
71
- className: toastText,
72
- flex: 1,
73
- padding: 3,
74
- children: /* @__PURE__ */ jsxs(Stack, {
75
- gap: 3,
76
- children: [t7, t8]
77
- })
78
- }), $[23] = t7, $[24] = t8, $[25] = t9) : t9 = $[25];
79
- let t10;
80
- $[26] !== buttonTone || $[27] !== closable || $[28] !== onClose ? (t10 = closable && /* @__PURE__ */ jsx(Box, {
81
- padding: 1,
82
- children: /* @__PURE__ */ jsx(Button, {
83
- as: "button",
84
- icon: CloseIcon,
85
- mode: "bleed",
86
- padding: 2,
87
- tone: buttonTone,
88
- onClick: onClose,
89
- style: { verticalAlign: "top" }
90
- })
91
- }), $[26] = buttonTone, $[27] = closable, $[28] = onClose, $[29] = t10) : t10 = $[29];
92
- let t11;
93
- $[30] !== t10 || $[31] !== t9 || $[32] !== transition ? (t11 = /* @__PURE__ */ jsxs(MotionFlex, {
94
- align: "flex-start",
95
- variants: content,
96
- transition,
97
- children: [t9, t10]
98
- }), $[30] = t10, $[31] = t9, $[32] = transition, $[33] = t11) : t11 = $[33];
99
- let t12;
100
- $[34] !== cardTone || $[35] !== duration || $[36] !== hasDuration || $[37] !== onClose || $[38] !== radius || $[39] !== transition || $[40] !== updatedAt || $[41] !== visualDuration ? (t12 = hasDuration && /* @__PURE__ */ jsxs(motion.div, {
101
- className: "_1a5lj7y2",
102
- "data-ui": "ToastLoadingBar",
103
- variants: content,
104
- transition,
105
- children: [/* @__PURE__ */ jsx(Card, {
106
- className: "_1a5lj7y3",
107
- tone: cardTone,
108
- radius
109
- }), /* @__PURE__ */ jsx(LoadingBarProgress, {
110
- duration,
111
- onComplete: onClose,
112
- tone: cardTone,
113
- visualDuration
114
- }, `progress-${updatedAt}`)]
115
- }), $[34] = cardTone, $[35] = duration, $[36] = hasDuration, $[37] = onClose, $[38] = radius, $[39] = transition, $[40] = updatedAt, $[41] = visualDuration, $[42] = t12) : t12 = $[42];
116
- let t13;
117
- return $[43] !== cardTone || $[44] !== radius || $[45] !== restProps || $[46] !== role || $[47] !== t11 || $[48] !== t12 || $[49] !== t5 || $[50] !== t6 || $[51] !== transition || $[52] !== visualDuration ? (t13 = /* @__PURE__ */ jsxs(MotionCard, {
118
- className: t5,
119
- "data-ui": "Toast",
120
- role,
121
- ...restProps,
122
- "data-has-duration": t6,
123
- custom: visualDuration,
124
- radius,
125
- shadow: 2,
126
- tone: cardTone,
127
- as: "li",
128
- layout: "position",
129
- variants: container,
130
- initial,
131
- animate,
132
- exit,
133
- transition,
134
- children: [t11, t12]
135
- }), $[43] = cardTone, $[44] = radius, $[45] = restProps, $[46] = role, $[47] = t11, $[48] = t12, $[49] = t5, $[50] = t6, $[51] = transition, $[52] = visualDuration, $[53] = t13) : t13 = $[53], t13;
136
- }
137
- function LoadingBarProgress(props) {
138
- let $ = c(12), { duration, onComplete, tone, visualDuration } = props, { color } = useTheme_v2(), t0 = color.button.default[tone], t1;
139
- $[0] === t0.enabled.bg ? t1 = $[1] : (t1 = { "--toast-loading-bar-bg": t0.enabled.bg }, $[0] = t0.enabled.bg, $[1] = t1);
140
- let t2, t3;
141
- $[2] === Symbol.for("react.memo_cache_sentinel") ? (t2 = { scaleX: 0 }, t3 = { scaleX: 1 }, $[2] = t2, $[3] = t3) : (t2 = $[2], t3 = $[3]);
142
- let t4 = duration / 1e3, t5;
143
- $[4] !== t4 || $[5] !== visualDuration ? (t5 = {
144
- delay: visualDuration,
145
- duration: t4,
146
- ease: "linear"
147
- }, $[4] = t4, $[5] = visualDuration, $[6] = t5) : t5 = $[6];
148
- let t6;
149
- return $[7] !== onComplete || $[8] !== t1 || $[9] !== t5 || $[10] !== tone ? (t6 = /* @__PURE__ */ jsx(MotionCard, {
150
- className: loadingBarProgress,
151
- tone,
152
- style: t1,
153
- initial: t2,
154
- animate: t3,
155
- transition: t5,
156
- onAnimationComplete: onComplete
157
- }), $[7] = onComplete, $[8] = t1, $[9] = t5, $[10] = tone, $[11] = t6) : t6 = $[11], t6;
158
- }
159
- const container = {
160
- initial: {
161
- y: 32,
162
- scale: .5,
163
- zIndex: 1
164
- },
165
- hidden: { opacity: 0 },
166
- visible: (visualDuration) => visualDuration ? {
167
- opacity: 1,
168
- transition: {
169
- when: "beforeChildren",
170
- delayChildren: stagger(visualDuration / 3),
171
- duration: visualDuration / 3
172
- }
173
- } : { opacity: 1 },
174
- slideIn: {
175
- y: 0,
176
- scale: 1
177
- },
178
- slideOut: {
179
- zIndex: 0,
180
- scale: .75
181
- }
182
- }, content = {
183
- initial: { willChange: "transform" },
184
- hidden: { opacity: 0 },
185
- visible: { opacity: 1 }
186
- }, MotionCard = motion.create(Card), MotionFlex = motion.create(Flex), MotionText = motion.create(Text);
187
- /**
188
- * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.
189
- * @public
190
- */
191
- function useMounted() {
192
- return useSyncExternalStore(subscribe, _temp$1, _temp2);
193
- }
194
- function _temp2() {
195
- return !1;
196
- }
197
- function _temp$1() {
198
- return !0;
199
- }
200
- const subscribe = () => () => {}, ToastContext = createGlobalScopedContext("@sanity/ui/context/toast", null);
201
- var toastLayer = "_1ojgmwx0";
202
- /**
203
- * @internal
204
- */
205
- function ToastLayer(props) {
206
- let $ = c(9), { children, padding: t0, paddingX, paddingY, gap: t1 } = props, padding = t0 === void 0 ? 4 : t0, gap = t1 === void 0 ? 3 : t1, { zIndex } = useLayer(), t2;
207
- $[0] === zIndex ? t2 = $[1] : (t2 = { zIndex }, $[0] = zIndex, $[1] = t2);
208
- let t3;
209
- return $[2] !== children || $[3] !== gap || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== t2 ? (t3 = /* @__PURE__ */ jsx(Grid, {
210
- as: "ul",
211
- className: toastLayer,
212
- "data-ui": "ToastProvider",
213
- padding,
214
- paddingX,
215
- paddingY,
216
- gap,
217
- gridTemplateColumns: 1,
218
- style: t2,
219
- children
220
- }), $[2] = children, $[3] = gap, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = t2, $[8] = t3) : t3 = $[8], t3;
221
- }
222
- let toastId = 0;
223
- /** @internal */
224
- function generateToastId() {
225
- return String(toastId++);
226
- }
227
- /**
228
- * @public
229
- */
230
- function ToastProvider(props) {
231
- let $ = c(13), { children, padding, paddingX, paddingY, gap, zOffset: t0 } = props, zOffset = t0 === void 0 ? 1 : t0, t1;
232
- $[0] === Symbol.for("react.memo_cache_sentinel") ? (t1 = [], $[0] = t1) : t1 = $[0];
233
- let [state, setState] = useState(t1), mounted = useMounted(), t2;
234
- if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
235
- let push = (params) => {
236
- let id = params.id || generateToastId(), duration = params.duration || 5e3;
237
- return startTransition(() => {
238
- setState((prevState) => {
239
- if (duration === .01) return prevState.filter((toast) => toast.id !== id);
240
- let dismiss = () => startTransition(() => setState((currentState) => currentState.filter((toast_0) => toast_0.id !== id)));
241
- return [...prevState.filter((toast_1) => toast_1.id !== id), {
242
- dismiss,
243
- id,
244
- updatedAt: Date.now(),
245
- params: {
246
- ...params,
247
- duration
248
- }
249
- }];
250
- });
251
- }), id;
252
- };
253
- t2 = {
254
- version: 0,
255
- push
256
- }, $[1] = t2;
257
- } else t2 = $[1];
258
- let value = t2, t3;
259
- $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t3 = mounted && /* @__PURE__ */ jsx(LayerProvider, {
260
- zOffset,
261
- children: /* @__PURE__ */ jsx(ToastLayer, {
262
- padding,
263
- paddingX,
264
- paddingY,
265
- gap,
266
- children: /* @__PURE__ */ jsx(AnimatePresence, {
267
- initial: !1,
268
- mode: "popLayout",
269
- children: state.map(_temp)
270
- })
271
- })
272
- }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t3) : t3 = $[9];
273
- let t4;
274
- return $[10] !== children || $[11] !== t3 ? (t4 = /* @__PURE__ */ jsxs(ToastContext.Provider, {
275
- value,
276
- children: [children, t3]
277
- }), $[10] = children, $[11] = t3, $[12] = t4) : t4 = $[12], t4;
278
- }
279
- function _temp(t0) {
280
- let { dismiss: dismiss_0, id: id_0, params: params_0, updatedAt } = t0;
281
- return /* @__PURE__ */ jsx(Toast, {
282
- closable: params_0.closable,
283
- description: params_0.description,
284
- onClose: dismiss_0,
285
- status: params_0.status,
286
- title: params_0.title,
287
- duration: params_0.duration,
288
- updatedAt
289
- }, id_0);
290
- }
291
- /**
292
- * @public
293
- */
294
- function useToast() {
295
- let value = useContext(ToastContext);
296
- if (!value) throw Error("useToast(): missing context value");
297
- if (!isRecord(value) || value.version !== 0) throw Error("useToast(): the context value is not compatible");
298
- return value;
299
- }
300
- export { Toast, ToastProvider, useToast };
301
-
302
- //# sourceMappingURL=toast.js.map
package/dist/toast.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"toast.js","names":["radius = 3","visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}","['hidden', 'initial']","['visible', 'slideIn']","['hidden', 'slideOut']","clsx(toast, className)","title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )","description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )","<Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>","closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )","<MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>","hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )","motion.div","<MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>","hasDuration ? '' : undefined","{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}","bg","color.button.default[tone]","{scaleX: 0}","{scaleX: 1}","{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}","duration / 1_000","<MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />","() => true","() => false","padding = 4","gap = 3","{zIndex}","<Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>","zOffset = 1","[]","{version: 0.0, push}","toast","useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])","mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )","({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n )","<ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>","ToastContext.Provider","{dismiss, id, params, updatedAt}","params","dismiss","id"],"sources":["../src/core/components/toast/styles.ts","../src/core/components/toast/toast.css.ts","../src/core/components/toast/toast.tsx","../src/core/hooks/useMounted.ts","../src/core/components/toast/toastContext.ts","../src/core/components/toast/toastLayer.css.ts","../src/core/components/toast/toastLayer.tsx","../src/core/components/toast/toastState.ts","../src/core/components/toast/toastProvider.tsx","../src/core/components/toast/useToast.ts"],"sourcesContent":["import {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport type {ButtonTone} from '../../types/button'\n\nexport const STATUS_CARD_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ThemeColorStateToneKey}\n\nexport const BUTTON_TONE = {\n error: 'critical',\n warning: 'caution',\n success: 'positive',\n info: 'neutral',\n} satisfies {[key: string]: ButtonTone}\n","import {style} from '@vanilla-extract/css'\n\nconst LOADING_BAR_HEIGHT = 2\n\nexport const toast = style({\n pointerEvents: 'all',\n width: '100%',\n position: 'relative',\n overflow: ['hidden', 'clip'],\n selectors: {\n '&[data-has-duration]': {\n paddingBottom: `calc(${LOADING_BAR_HEIGHT}px / 2)`,\n },\n },\n})\n\nexport const toastText = style({\n overflowX: 'auto',\n})\n\nexport const loadingBar = style({\n display: 'flex',\n position: 'absolute',\n bottom: '0px',\n top: '0px',\n left: '0px',\n right: '0px',\n pointerEvents: 'none',\n zIndex: -1,\n overflow: ['hidden', 'clip'],\n background: 'transparent',\n alignItems: 'flex-end',\n willChange: 'opacity',\n})\n\nexport const loadingBarMask = style({\n position: 'absolute',\n top: 0,\n left: `-${LOADING_BAR_HEIGHT}px`,\n right: `-${LOADING_BAR_HEIGHT}px`,\n bottom: `${LOADING_BAR_HEIGHT}px`,\n zIndex: 1,\n})\n\nexport const loadingBarProgress = style({\n display: 'block',\n height: '100%',\n width: '100%',\n transformOrigin: '0% 50%',\n selectors: {\n '&&': {\n backgroundColor: 'var(--toast-loading-bar-bg)',\n },\n },\n})\n","import {CloseIcon} from '@sanity/icons/Close'\nimport {clsx} from 'clsx/lite'\nimport {motion, stagger, type Variant, type Variants} from 'motion/react'\n\nimport {ThemeColorStateToneKey} from '../../../theme/system/color/_system'\nimport {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'\nimport {Box} from '../../primitives/box/box'\nimport {Button} from '../../primitives/button/button'\nimport {Card} from '../../primitives/card/card'\nimport {Flex} from '../../primitives/flex/flex'\nimport {Stack} from '../../primitives/stack/stack'\nimport {Text} from '../../primitives/text/text'\nimport {useTheme_v2} from '../../theme/useTheme'\nimport {BUTTON_TONE, STATUS_CARD_TONE} from './styles'\n\nimport {loadingBar, loadingBarMask, loadingBarProgress, toast, toastText} from './toast.css'\n\n/**\n * @public\n */\nexport interface ToastProps {\n closable?: boolean\n description?: React.ReactNode\n onClose: () => void\n radius?: number | number[]\n title?: React.ReactNode\n status?: 'error' | 'warning' | 'success' | 'info'\n duration?: number\n updatedAt?: number\n}\n\nconst ROLES = {\n error: 'alert',\n warning: 'alert',\n success: 'alert',\n info: 'alert',\n} as const\n\n// Support pattern used by Sanity Studio, that works around the lack of `duration: Infinity` support in older @sanity/ui versions\n// https://developer.mozilla.org/en-US/docs/Web/API/setTimeout#maximum_delay_value\nconst LONG_ENOUGH_BUT_NOT_TOO_LONG = 1000 * 60 * 60 * 24 * 24\n\n/**\n * The `Toast` component gives feedback to users when an action has taken place.\n *\n * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.\n *\n * @public\n */\nexport function Toast(\n props: ToastProps &\n Omit<\n React.HTMLProps<HTMLDivElement>,\n | 'as'\n | 'height'\n | 'ref'\n | 'title'\n | 'onAnimationStart'\n | 'onDragStart'\n | 'onDragEnd'\n | 'onDrag'\n >,\n): React.JSX.Element {\n const {\n className,\n closable,\n description,\n duration,\n onClose,\n radius = 3,\n title,\n status,\n updatedAt,\n ...restProps\n } = props\n const cardTone = status ? STATUS_CARD_TONE[status] : 'default'\n const buttonTone = status ? BUTTON_TONE[status] : 'default'\n const role = status ? ROLES[status] : 'status'\n\n const prefersReducedMotion = usePrefersReducedMotion()\n\n const visualDuration: number = prefersReducedMotion ? 0 : 0.26\n const transition = visualDuration\n ? {type: 'spring' as const, visualDuration, bounce: 0.25}\n : {duration: 0}\n\n const hasDuration = duration && isFinite(duration) && duration < LONG_ENOUGH_BUT_NOT_TOO_LONG\n const initial: ContainerVariants[] = ['hidden', 'initial']\n const animate: ContainerVariants[] = ['visible', 'slideIn']\n const exit: ContainerVariants[] = ['hidden', 'slideOut']\n\n return (\n <MotionCard\n className={clsx(toast, className)}\n data-ui=\"Toast\"\n role={role}\n {...restProps}\n data-has-duration={hasDuration ? '' : undefined}\n custom={visualDuration}\n radius={radius}\n shadow={2}\n tone={cardTone}\n as=\"li\"\n layout=\"position\"\n variants={container}\n initial={initial}\n animate={animate}\n exit={exit}\n transition={transition}\n >\n <MotionFlex align=\"flex-start\" variants={content} transition={transition}>\n <Flex className={toastText} flex={1} padding={3}>\n <Stack gap={3}>\n {title && (\n <Text size={1} weight=\"medium\">\n {title}\n </Text>\n )}\n {description && (\n <MotionText muted size={1} variants={content} transition={transition}>\n {description}\n </MotionText>\n )}\n </Stack>\n </Flex>\n\n {closable && (\n <Box padding={1}>\n <Button\n as=\"button\"\n icon={CloseIcon}\n mode=\"bleed\"\n padding={2}\n tone={buttonTone}\n onClick={onClose}\n style={{verticalAlign: 'top'}}\n />\n </Box>\n )}\n </MotionFlex>\n {hasDuration && (\n <motion.div\n className={loadingBar}\n data-ui=\"ToastLoadingBar\"\n variants={content}\n transition={transition}\n >\n <Card className={loadingBarMask} tone={cardTone} radius={radius} />\n <LoadingBarProgress\n key={`progress-${updatedAt}`}\n duration={duration}\n onComplete={onClose}\n tone={cardTone}\n visualDuration={visualDuration}\n />\n </motion.div>\n )}\n </MotionCard>\n )\n}\n\ninterface LoadingBarProgressProps {\n duration: number\n onComplete: () => void\n tone: ThemeColorStateToneKey\n visualDuration: number\n}\n\nfunction LoadingBarProgress(props: LoadingBarProgressProps) {\n const {duration, onComplete, tone, visualDuration} = props\n const {color} = useTheme_v2()\n\n return (\n <MotionCard\n className={loadingBarProgress}\n tone={tone}\n style={{'--toast-loading-bar-bg': color.button.default[tone].enabled.bg}}\n initial={{scaleX: 0}}\n animate={{scaleX: 1}}\n transition={{delay: visualDuration, duration: duration / 1_000, ease: 'linear'}}\n onAnimationComplete={onComplete}\n />\n )\n}\n\nconst container = {\n initial: {y: 32, scale: 0.5, zIndex: 1},\n hidden: {opacity: 0},\n visible: (visualDuration: number) => {\n if (!visualDuration) return {opacity: 1}\n\n return {\n opacity: 1,\n transition: {\n when: 'beforeChildren',\n delayChildren: stagger(visualDuration / 3),\n duration: visualDuration / 3,\n },\n }\n },\n slideIn: {\n y: 0,\n scale: 1,\n },\n slideOut: {\n zIndex: 0,\n scale: 0.75,\n },\n} satisfies Variants\ntype ContainerVariants = keyof typeof container\n\nconst content = {\n initial: {\n willChange: 'transform',\n },\n hidden: {\n opacity: 0,\n },\n visible: {\n opacity: 1,\n },\n} satisfies Partial<Record<ContainerVariants, Variant>>\n\nconst MotionCard = motion.create(Card)\nconst MotionFlex = motion.create(Flex)\nconst MotionText = motion.create(Text)\n","import {useSyncExternalStore} from 'react'\n\n/**\n * Some components should only render after mounting to the DOM, and not be rendered at all during SSR renderToString or equivalent.\n * @public\n */\nexport function useMounted(): boolean {\n return useSyncExternalStore(\n subscribe,\n () => true,\n () => false,\n )\n}\n\nconst subscribe = () => () => {}\n","import {createGlobalScopedContext} from '../../lib/createGlobalScopedContext'\nimport {ToastContextValue} from './types'\n\nexport const ToastContext = createGlobalScopedContext<ToastContextValue | null>(\n '@sanity/ui/context/toast',\n null,\n)\n","import {style} from '@vanilla-extract/css'\n\nexport const toastLayer = style({\n boxSizing: 'border-box',\n position: 'fixed',\n right: 0,\n bottom: 0,\n listStyle: 'none',\n pointerEvents: 'none',\n maxWidth: '420px',\n width: '100%',\n})\n","import {Grid} from '../../primitives/grid/grid'\nimport {useLayer} from '../../utils/layer/useLayer'\n\nimport {toastLayer} from './toastLayer.css'\n\n/**\n * @public\n */\nexport interface ToastLayerProps {\n children: React.ReactNode\n padding?: number | number[]\n paddingX?: number | number[]\n paddingY?: number | number[]\n gap?: number | number[]\n}\n\n/**\n * @internal\n */\nexport function ToastLayer(props: ToastLayerProps): React.JSX.Element {\n const {children, padding = 4, paddingX, paddingY, gap = 3} = props\n const {zIndex} = useLayer()\n\n return (\n <Grid\n as=\"ul\"\n className={toastLayer}\n data-ui=\"ToastProvider\"\n padding={padding}\n paddingX={paddingX}\n paddingY={paddingY}\n gap={gap}\n gridTemplateColumns={1}\n style={{zIndex}}\n >\n {children}\n </Grid>\n )\n}\n","let toastId = 0\n\n/** @internal */\nexport function generateToastId(): string {\n return String(toastId++)\n}\n","import {AnimatePresence} from 'motion/react'\nimport {startTransition, useMemo, useState} from 'react'\n\nimport {useMounted} from '../../hooks/useMounted'\nimport {LayerProvider} from '../../utils/layer/layerProvider'\nimport {Toast} from './toast'\nimport {ToastContext} from './toastContext'\nimport {ToastLayer, type ToastLayerProps} from './toastLayer'\nimport {generateToastId} from './toastState'\nimport {ToastContextValue, ToastParams} from './types'\n\ntype ToastState = {\n dismiss: () => void\n id: string\n updatedAt: number\n params: ToastParams\n}[]\n\n/**\n * @public\n */\nexport interface ToastProviderProps extends Omit<ToastLayerProps, 'children'> {\n children?: React.ReactNode\n zOffset?: number | number[]\n}\n\n/**\n * @public\n */\nexport function ToastProvider(props: ToastProviderProps): React.JSX.Element {\n const {children, padding, paddingX, paddingY, gap, zOffset = 1} = props\n const [state, setState] = useState<ToastState>([])\n const mounted = useMounted()\n\n const value: ToastContextValue = useMemo(() => {\n const push = (params: ToastParams) => {\n const id = params.id || generateToastId()\n const duration = params.duration || 5000\n\n startTransition(() => {\n setState((prevState): ToastState => {\n /**\n * Backwards compatibility for `sanity` patterns workaround a lack of programatically dismissible toasts.\n * It uses a super short duration that closes the toast immediately in previous versions of `@sanity/ui`.\n * We interpret this as a request to dismiss the toast immediately, and remove it from the state right away.\n * Even once we support programatic dismissal we'll need to keep this for backwards compatibility with v2 and v1.\n */\n if (duration === 0.01) {\n return prevState.filter((toast) => toast.id !== id)\n }\n\n /**\n * Creates a function to dismiss this specific toast.\n * This function will be passed to the Toast component\n * and called either on close button click or after duration.\n */\n const dismiss = () =>\n startTransition(() =>\n setState((currentState) => currentState.filter((toast) => toast.id !== id)),\n )\n\n /**\n * Create updated state by:\n * 1. Removing any existing toast with the same ID (prevents duplicates)\n * 2. Adding the new toast with its dismiss handler\n * 3. Updates the `updatedAt` timestamp, which resets progress bar count downs.\n */\n return [\n ...prevState.filter((toast) => toast.id !== id),\n {\n dismiss,\n id,\n updatedAt: Date.now(),\n params: {...params, duration},\n },\n ]\n })\n })\n\n return id\n }\n\n return {version: 0.0, push}\n }, [])\n\n return (\n <ToastContext.Provider value={value}>\n {children}\n {mounted && (\n <LayerProvider zOffset={zOffset}>\n <ToastLayer padding={padding} paddingX={paddingX} paddingY={paddingY} gap={gap}>\n <AnimatePresence initial={false} mode=\"popLayout\">\n {state.map(({dismiss, id, params, updatedAt}) => (\n <Toast\n key={id}\n closable={params.closable}\n description={params.description}\n onClose={dismiss}\n status={params.status}\n title={params.title}\n duration={params.duration}\n updatedAt={updatedAt}\n />\n ))}\n </AnimatePresence>\n </ToastLayer>\n </LayerProvider>\n )}\n </ToastContext.Provider>\n )\n}\n","import {useContext} from 'react'\n\nimport {isRecord} from '../../lib/isRecord'\nimport {ToastContext} from './toastContext'\nimport {ToastContextValue} from './types'\n\n/**\n * @public\n */\nexport function useToast(): ToastContextValue {\n const value = useContext(ToastContext)\n\n if (!value) {\n throw new Error('useToast(): missing context value')\n }\n\n // NOTE: This check is for future-compatiblity\n // - If the value is not an object, it’s not compatible with the current version\n // - If the value is an object, but doesn’t have `version: 0.0`, it’s not compatible with the current version\n if (!isRecord(value) || value.version !== 0.0) {\n throw new Error('useToast(): the context value is not compatible')\n }\n\n return value\n}\n"],"mappings":"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"}
package/dist/tooltip.d.ts DELETED
@@ -1,88 +0,0 @@
1
- import { i as Delay, n as LayerProps, r as Placement } from "./layer-ChlP9Ik6.js";
2
- import { s as ThemeColorSchemeKey } from "./_system-CTe2lb5l.js";
3
- /**
4
- * @public
5
- */
6
- interface TooltipProps extends Omit<LayerProps, 'as'> {
7
- /** @deprecated Use `fallbackPlacements` instead. */
8
- allowedAutoPlacements?: never;
9
- arrow?: boolean;
10
- boundaryElement?: HTMLElement | null;
11
- children?: React.JSX.Element;
12
- content?: React.ReactNode;
13
- disabled?: boolean;
14
- fallbackPlacements?: Placement[];
15
- padding?: number | number[];
16
- placement?: Placement;
17
- /** Whether or not to render the tooltip in a portal element. */
18
- portal?: boolean | string;
19
- radius?: number | number[];
20
- scheme?: ThemeColorSchemeKey;
21
- shadow?: number | number[];
22
- /**
23
- * Adds a delay to open or close the tooltip.
24
- *
25
- * If only a `number` is passed, it will be used for both opening and closing.
26
- *
27
- * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
28
- *
29
- * @public
30
- * @defaultValue 0
31
- */
32
- delay?: Delay;
33
- /**
34
- * Whether the tooltip should animate in and out.
35
- *
36
- * @beta
37
- * @defaultValue false
38
- */
39
- animate?: boolean;
40
- }
41
- /**
42
- * Tooltips display information when hovering, focusing or tapping.
43
- *
44
- * @public
45
- */
46
- export declare function Tooltip(props: TooltipProps & Omit<React.HTMLProps<HTMLDivElement>, 'as' | 'children' | 'content'>): import("react").JSX.Element;
47
- /**
48
- * @beta
49
- */
50
- interface TooltipDelayGroupContextValue {
51
- setIsGroupActive: (nextState: React.SetStateAction<boolean>, delay?: number | undefined) => void;
52
- setOpenTooltipId: (nextId: string | null, delay?: number | undefined) => void;
53
- openDelay: number;
54
- closeDelay: number;
55
- openTooltipId: string | null;
56
- }
57
- /**
58
- * @beta
59
- */
60
- export declare const TooltipDelayGroupContext: import("react").Context<TooltipDelayGroupContextValue | null>;
61
- /**
62
- * @public
63
- * */
64
- interface TooltipDelayGroupProviderProps {
65
- children?: React.ReactNode;
66
- /**
67
- * Handles the delays to open or close a tooltip inside a group
68
- *
69
- * If only a `number` is passed, it will be used for both opening and closing.
70
- *
71
- * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
72
- *
73
- * @public
74
- */
75
- delay: Delay;
76
- }
77
- /**
78
- * @public
79
- * Provides context for a group of tooltip elements that should share a delay
80
- * which temporarily becomes 1 ms after the first floating element of the group opens.
81
- */
82
- export declare function TooltipDelayGroupProvider(props: TooltipDelayGroupProviderProps): React.JSX.Element;
83
- /**
84
- * @beta
85
- */
86
- export declare function useTooltipDelayGroup(): TooltipDelayGroupContextValue | null;
87
- export type { TooltipDelayGroupContextValue, TooltipDelayGroupProviderProps, TooltipProps };
88
- //# sourceMappingURL=tooltip.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"tooltip.d.ts","names":[],"sources":["../src/core/primitives/tooltip/tooltip.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/types.ts","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupContext.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/tooltipDelayGroupProvider.tsx","../src/core/primitives/tooltip/tooltipDelayGroup/useTooltipDelayGroup.ts"],"mappings":";;;;;UAyDiB,qBAAqB,KAAK;;EAEzC;EACA;EACA,kBAAkB;EAClB,WAAW,MAAM,IAAI;EACrB,UAAU,MAAM;EAChB;EACA,qBAAqB;EACrB;EACA,YAAY;;EAEZ;EACA;EACA,SAAS;EACT;;;;;;;;;;;EAWA,QAAQ;;;;;;;EAOR;;;;;;;wBAQc,QACd,OAAO,eAAe,KAAK,MAAM,UAAU,kEAA+C,IAAA;;;;UChG3E;EAEf,mBAAmB,WAAW,MAAM,yBAAyB;EAE7D,mBAAmB,uBAAuB;EAC1C;EACA;EACA;;;;;qBCJW,0CAAwB,QAAA;;;;UCIpB;EACf,WAAW,MAAM;;;;;;;;;;EAUjB,OAAO;;;;;;;wBAQO,0BACd,OAAO,iCACN,MAAM,IAAI;;;;wBCvBG,wBAAwB"}