@sanity/ui 2.3.6 → 2.4.0

package/dist/index.mjs

@@ -8,6 +8,7 @@ import Refractor from "react-refractor";
 import { detectOverflow, flip, offset, shift, arrow, hide, useFloating, autoUpdate } from "@floating-ui/react-dom";
 import { motion, AnimatePresence } from "framer-motion";
 import { createPortal } from "react-dom";
+import { getTheme_v2 as getTheme_v2$1 } from "./_chunks-es/getTheme_v2.mjs";
 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, studioTheme = buildTheme(), EMPTY_ARRAY = [], EMPTY_RECORD = {}, POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity", POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
@@ -6142,7 +6143,49 @@ const CustomInline = styled(Inline)`
       children: props.children
     }
   );
-}), STATUS_CARD_TONE = {
+}), TextBox = styled(Flex)`
+  overflow-x: auto;
+`, loadingAnimation = keyframes`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  } 
+`, LOADING_BAR_HEIGHT = 2;
+function rootStyles(props) {
+  const { color } = getTheme_v2$1(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
+  return props.$duration ? css`
+    pointer-events: all;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    overflow: clip;
+    padding-bottom: ${LOADING_BAR_HEIGHT}px;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0px;
+      height: ${LOADING_BAR_HEIGHT}px;
+      background: ${loadingBarColor};
+      animation-name: ${loadingAnimation};
+      animation-duration: ${props.$duration}ms;
+      animation-fill-mode: both;
+    }
+
+    & > * {
+      opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+      will-change: opacity;
+    }
+  ` : css`
+      pointer-events: all;
+      & > * {
+        opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
+        will-change: opacity;
+      }
+    `;
+}
+const STATUS_CARD_TONE = {
   error: "critical",
   warning: "caution",
   success: "positive",
@@ -6157,17 +6200,11 @@ const CustomInline = styled(Inline)`
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styled(Card)`
-  pointer-events: all;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TextBox = styled(Flex)`
-  overflow-x: auto;
-`;
+}, Root$2 = styled(Card)(
+  rootStyles
+);
 function Toast(props) {
-  const { closable, description, onClose, radius = 3, title, status, ...restProps } = props, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
+  const { closable, description, duration, onClose, radius = 3, title, status, ...restProps } = props, cardTone = status ? STATUS_CARD_TONE[status] : "default", buttonTone = status ? BUTTON_TONE[status] : "default", role = status ? ROLES[status] : "status";
   return /* @__PURE__ */ jsx(
     Root$2,
     {
@@ -6178,6 +6215,7 @@ function Toast(props) {
       radius,
       shadow: 2,
       tone: cardTone,
+      $duration: duration,
       children: /* @__PURE__ */ jsxs(Flex, { align: "flex-start", children: [
         /* @__PURE__ */ jsx(TextBox, { flex: 1, padding: 3, children: /* @__PURE__ */ jsxs(Stack, { space: 3, children: [
           title && /* @__PURE__ */ jsx(Text, { size: 1, weight: "medium", children: title }),
@@ -6293,7 +6331,8 @@ function ToastProvider(props) {
             description: params.description,
             onClose: dismiss,
             status: params.status,
-            title: params.title
+            title: params.title,
+            duration: params.duration
           }
         )
       },