@sanity/ui 2.3.6 → 2.4.0

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: !0 });
-var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom");
+var theme = require("@sanity/ui/theme"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ReactIs = require("react-is"), styledComponents = require("styled-components"), icons = require("@sanity/icons"), Refractor = require("react-refractor"), reactDom$1 = require("@floating-ui/react-dom"), framerMotion = require("framer-motion"), reactDom = require("react-dom"), getTheme_v2 = require("./_chunks-cjs/getTheme_v2.js");
 function _interopDefaultCompat(e) {
   return e && typeof e == "object" && "default" in e ? e : { default: e };
 }
@@ -6139,7 +6139,49 @@ const CustomInline = styledComponents.styled(Inline)`
       children: props.children
     }
   );
-}), STATUS_CARD_TONE = {
+}), TextBox = styledComponents.styled(Flex)`
+  overflow-x: auto;
+`, loadingAnimation = styledComponents.keyframes`
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 100%;
+  } 
+`, LOADING_BAR_HEIGHT = 2;
+function rootStyles(props) {
+  const { color } = getTheme_v2.getTheme_v2(props.theme), loadingBarColor = color.button.default[props.tone].enabled.bg;
+  return props.$duration ? styledComponents.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;
+    }
+  ` : styledComponents.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",
@@ -6154,17 +6196,11 @@ const CustomInline = styledComponents.styled(Inline)`
   warning: "alert",
   success: "alert",
   info: "alert"
-}, Root$2 = styledComponents.styled(Card)`
-  pointer-events: all;
-  & > * {
-    opacity: var(${POPOVER_MOTION_CONTENT_OPACITY_PROPERTY}, 1);
-    will-change: opacity;
-  }
-`, TextBox = styledComponents.styled(Flex)`
-  overflow-x: auto;
-`;
+}, Root$2 = styledComponents.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__ */ jsxRuntime.jsx(
     Root$2,
     {
@@ -6175,6 +6211,7 @@ function Toast(props) {
       radius,
       shadow: 2,
       tone: cardTone,
+      $duration: duration,
       children: /* @__PURE__ */ jsxRuntime.jsxs(Flex, { align: "flex-start", children: [
         /* @__PURE__ */ jsxRuntime.jsx(TextBox, { flex: 1, padding: 3, children: /* @__PURE__ */ jsxRuntime.jsxs(Stack, { space: 3, children: [
           title && /* @__PURE__ */ jsxRuntime.jsx(Text, { size: 1, weight: "medium", children: title }),
@@ -6290,7 +6327,8 @@ function ToastProvider(props) {
             description: params.description,
             onClose: dismiss,
             status: params.status,
-            title: params.title
+            title: params.title,
+            duration: params.duration
           }
         )
       },