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

package/dist/index.mjs

@@ -1,13 +1,14 @@
-import { isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, createGlobalScopedContext, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Container, usePrefersReducedMotion, Z_OFFSETS, Portal, Layer, containsOrEqualsElement, Grid, LayerProvider, isRecord, Selectable } from "./_chunks-es/_visual-editing.mjs";
-import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, createColorTheme, hexToRgb, hslToRgb, multiply, parseColor, rgbToHex, rgbToHsl, rgba, screen, studioTheme, useCard, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
-import { composeClassNames, breadcrumbs, dialogContainer, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, skeleton, textSkeleton, labelSkeleton, headingSkeleton, codeSkeleton, toast, toastLoadingBar, toastLoadingBarMask, toastLoadingBarProgress, toastLayer, treeItem, compilePalette, compileTheme, compileSystem } from "@sanity/ui/css";
-import { px, rem } from "@sanity/ui/css";
+import { createColorTheme as createColorTheme$1, hexToRgb as hexToRgb$1, hslToRgb as hslToRgb$1, multiply as multiply$1, parseColor as parseColor$1, rgbToHex as rgbToHex$1, rgbToHsl as rgbToHsl$1, rgba as rgba$1, screen as screen$1, buildTheme_v3 } from "@sanity/ui/theme";
+import { isHTMLElement, isHTMLAnchorElement, isHTMLInputElement, isHTMLButtonElement, isHTMLSelectElement, isHTMLTextAreaElement, EMPTY_ARRAY, useElementSize, Code, _isEnterToClickElement, Card, Text, useArrayProp, EMPTY_RECORD, Box, Button, Stack, Popover, TextInput, AnimatedSpinnerIcon, useClickOutsideEvent, Flex, createGlobalScopedContext, usePortal, useBoundaryElement, useLayer, useGlobalKeyDown, Container, usePrefersReducedMotion, Z_OFFSETS, Portal, Layer, containsOrEqualsElement, Grid, LayerProvider, isRecord, Selectable, useCard } from "./_chunks-es/_visual-editing.mjs";
+import { Arrow, Avatar, AvatarCounter, AvatarStack, Badge, BoundaryElementProvider, CardProvider, Checkbox, ConditionalWrapper, ElementQuery, Heading, Hotkeys, Inline, KBD, Label, Menu, MenuDivider, MenuGroup, MenuItem, PortalProvider, Radio, Select, Spinner, SrOnly, Switch, Tab, TabList, TextArea, ThemeColorProvider, ThemeProvider, Tooltip, TooltipDelayGroupContext, TooltipDelayGroupProvider, VirtualList, _ResizeObserver, _elementSizeObserver, _getArrayProp, _isScrollable, studioTheme, useCustomValidity, useMatchMedia, useMediaIndex, usePrefersDark, useRootTheme, useTheme, useTheme_v2, useTooltipDelayGroup } from "./_chunks-es/_visual-editing.mjs";
 import { jsx, jsxs, Fragment as Fragment$1 } from "react/jsx-runtime";
 import { ChevronDownIcon, CloseIcon, ToggleArrowRightIcon } from "@sanity/icons";
 import { useState, useRef, useEffect, useImperativeHandle, Component, forwardRef, useReducer, useCallback, useMemo, cloneElement, Children, isValidElement, Fragment, useContext, useSyncExternalStore, startTransition, memo, useId } from "react";
 import { c } from "react-compiler-runtime";
+import { composeClassNames, breadcrumbs, dialogContainer, dialogCardRoot, dialogLayout, dialogHeader, dialogContent, dialogFooter, dialog, skeleton, textSkeleton, labelSkeleton, headingSkeleton, codeSkeleton, toast, toastLoadingBar, toastLoadingBarMask, toastLoadingBarProgress, toastLayer, treeItem, scopeClassName, card, compilePalette, compileTheme, compileSystem } from "@sanity/ui/css";
+import { px, rem } from "@sanity/ui/css";
 import { motion, AnimatePresence } from "framer-motion";
-import { buildTheme_v3 } from "@sanity/ui/theme";
+const createColorTheme = createColorTheme$1, hexToRgb = hexToRgb$1, hslToRgb = hslToRgb$1, multiply = multiply$1, parseColor = parseColor$1, rgbToHex = rgbToHex$1, rgbToHsl = rgbToHsl$1, rgba = rgba$1, screen = screen$1;
 function _responsive(media, values, callback) {
   return (values?.map(callback) || []).map((statement, mediaIndex) => mediaIndex === 0 ? statement : {
     [`@media screen and (min-width: ${media[mediaIndex - 1]}px)`]: statement
@@ -639,7 +640,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
   }, t8 = [open], $[9] = open, $[10] = t7, $[11] = t8) : (t7 = $[10], t8 = $[11]), useEffect(t7, t8);
   let t9;
   $[12] === Symbol.for("react.memo_cache_sentinel") ? (t9 = () => {
-    setOpen(_temp$2), setShouldFocus(null);
+    setOpen(_temp$3), setShouldFocus(null);
   }, $[12] = t9) : t9 = $[12];
   const handleButtonClick = t9;
   let t10;
@@ -749,7 +750,7 @@ const MenuButton = forwardRef(function(props, forwardedRef) {
   return $[58] !== menu || $[59] !== open || $[60] !== popoverProps || $[61] !== t24 ? (t25 = /* @__PURE__ */ jsx(Popover, { "data-ui": "MenuButton__popover", ...popoverProps, content: menu, open, children: t24 }), $[58] = menu, $[59] = open, $[60] = popoverProps, $[61] = t24, $[62] = t25) : t25 = $[62], t25;
 });
 MenuButton.displayName = "ForwardRef(MenuButton)";
-function _temp$2(v) {
+function _temp$3(v) {
   return !v;
 }
 const Skeleton = forwardRef(function(props, ref) {
@@ -992,12 +993,12 @@ const container = {
   }
 }, MotionCard = motion.create(Card), MotionFlex = motion.create(Flex), MotionText = motion.create(Text), MotionBox = motion.create(Box);
 function useMounted() {
-  return useSyncExternalStore(subscribe, _temp$1, _temp2);
+  return useSyncExternalStore(subscribe, _temp$2, _temp2$1);
 }
-function _temp2() {
+function _temp2$1() {
   return !1;
 }
-function _temp$1() {
+function _temp$2() {
   return !0;
 }
 const subscribe = () => () => {
@@ -1063,14 +1064,14 @@ function ToastProvider(props) {
   }, $[1] = t3) : t3 = $[1], t2 = t3;
   const value = t2;
   let t4;
-  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t4) : t4 = $[9];
+  $[2] !== gap || $[3] !== mounted || $[4] !== padding || $[5] !== paddingX || $[6] !== paddingY || $[7] !== state || $[8] !== zOffset ? (t4 = mounted && /* @__PURE__ */ jsx(LayerProvider, { zOffset, children: /* @__PURE__ */ jsx(ToastLayer, { padding, paddingX, paddingY, gap, children: /* @__PURE__ */ jsx(AnimatePresence, { initial: !1, mode: "popLayout", children: state.map(_temp$1) }) }) }), $[2] = gap, $[3] = mounted, $[4] = padding, $[5] = paddingX, $[6] = paddingY, $[7] = state, $[8] = zOffset, $[9] = t4) : t4 = $[9];
   let t5;
   return $[10] !== children || $[11] !== t4 ? (t5 = /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
     children,
     t4
   ] }), $[10] = children, $[11] = t4, $[12] = t5) : t5 = $[12], t5;
 }
-function _temp(t0) {
+function _temp$1(t0) {
   const {
     dismiss: dismiss_0,
     id: id_0,
@@ -1381,6 +1382,37 @@ const TreeGroup = memo(function(props) {
   ] });
 });
 TreeItem.displayName = "Memo(TreeItem)";
+function RootClassNames(props) {
+  const $ = c(7), {
+    element
+  } = props, {
+    scheme,
+    tone
+  } = useCard() ?? {};
+  let t0;
+  $[0] !== scheme || $[1] !== tone ? (t0 = () => {
+    const els = document.querySelectorAll([scopeClassName("button"), scopeClassName("card"), scopeClassName("font")].map(_temp).join(", "));
+    for (const el of els)
+      el instanceof HTMLElement && (el.style.transition = "none");
+    return _raf2(() => {
+      document.documentElement.className = card({
+        scheme,
+        tone
+      }) ?? "", _raf2(() => {
+        for (const el_0 of els)
+          el_0 instanceof HTMLElement && (el_0.style.transition = "");
+      });
+    }), _temp2;
+  }, $[0] = scheme, $[1] = tone, $[2] = t0) : t0 = $[2];
+  let t1;
+  return $[3] !== element || $[4] !== scheme || $[5] !== tone ? (t1 = [element, scheme, tone], $[3] = element, $[4] = scheme, $[5] = tone, $[6] = t1) : t1 = $[6], useEffect(t0, t1), null;
+}
+function _temp2() {
+  document.documentElement.className = "";
+}
+function _temp(n) {
+  return `.${n}`;
+}
 function StyleTags(props) {
   const $ = c(10), {
     theme: themeProp
@@ -1448,6 +1480,7 @@ export {
   Portal,
   PortalProvider,
   Radio,
+  RootClassNames,
   Select,
   Skeleton,
   Spinner,