@sanity/ui 2.0.0-beta.9 → 2.0.0

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023–2024 Sanity.io
+Copyright (c) 2024–2024 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/dist/index.esm.js

@@ -20,17 +20,23 @@ const screen = screen$1;
 const studioTheme = buildTheme();
 const EMPTY_ARRAY = [];
 const EMPTY_RECORD = {};
+const POPOVER_MOTION_CONTENT_OPACITY_PROPERTY = "--motion-content-opacity";
 const POPOVER_MOTION_PROPS = {
   initial: {
     opacity: 0.5,
-    scale: 0.97
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
+    scale: 0.97,
+    willChange: "transform"
   },
   animate: {
-    opacity: 1,
+    opacity: [null, 1, 1],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, null, 1],
     scale: 1
   },
   exit: {
-    opacity: 0,
+    // @ts-expect-error -- passing null a second time is valid: https://github.com/framer/motion/blob/b9ce4c42914c3916ea523609c5b032dfc72718bb/packages/framer-motion/src/animation/utils/keyframes.ts#L34C22-L34C22
+    opacity: [null, null, 0],
+    [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [null, 0, 0],
     scale: 0.97
   },
   transition: {
@@ -1543,7 +1549,7 @@ function textInputRepresentationStyle(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
+  return css(_c$c || (_c$c = __template$F(["\n    --input-box-shadow: none;\n\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    display: block;\n    pointer-events: none;\n    z-index: 0;\n\n    background-color: var(--card-bg-color);\n    box-shadow: var(--input-box-shadow);\n\n    border-top-left-radius: ", ";\n    border-bottom-left-radius: ", ";\n    border-top-right-radius: ", ";\n    border-bottom-right-radius: ", ";\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --card-bg-color: ", ";\n      --card-fg-color: ", ";\n\n      /* enabled */\n      *:not(:disabled) + &[data-border] {\n        --input-box-shadow: ", ";\n      }\n\n      /* invalid */\n      *:not(:disabled):invalid + & {\n        --card-bg-color: ", ";\n        --card-fg-color: ", ";\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* focused */\n      *:not(:disabled):focus + & {\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        &:not([data-border]) {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* disabled */\n      *:not(:invalid):disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      *:invalid:disabled + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n        --card-icon-color: ", " !important;\n\n        &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n\n      /* readOnly */\n      *:not(:invalid):read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      *:invalid:read-only + & {\n        --card-bg-color: ", " !important;\n        --card-fg-color: ", " !important;\n      }\n\n      /* hovered */\n      @media (hover: hover) {\n        *:not(:disabled):not(:read-only):not(:invalid):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):hover + & {\n          --card-bg-color: ", ";\n          --card-fg-color: ", ";\n        }\n\n        *:not(:disabled):not(:read-only):not(:invalid):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n\n        *:invalid:not(:disabled):not(:read-only):not(:focus):hover + &[data-border] {\n          --input-box-shadow: ", ";\n        }\n      }\n    }\n  "])), $hasPrefix ? 0 : void 0, $hasPrefix ? 0 : void 0, $hasSuffix ? 0 : void 0, $hasSuffix ? 0 : void 0, $scheme, $tone, color.input.default.enabled.bg, color.input.default.enabled.fg, focusRingBorderStyle({
     color: color.input.default.enabled.border,
     width: input.border.width
   }), color.input.invalid.enabled.bg, color.input.invalid.enabled.fg, focusRingBorderStyle({
@@ -1557,12 +1563,18 @@ function textInputRepresentationStyle(props) {
     focusRing: input.text.focusRing
   }), $unstableDisableFocusRing ? void 0 : focusRingStyle({
     focusRing: input.text.focusRing
-  }), color.input.default.disabled.bg, color.input.default.disabled.fg, focusRingBorderStyle({
+  }), color.input.default.disabled.bg, color.input.default.disabled.fg, color.input.default.disabled.fg, focusRingBorderStyle({
     color: color.input.default.disabled.border,
     width: input.border.width
-  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, focusRingBorderStyle({
+  }), color.input.invalid.disabled.bg, color.input.invalid.disabled.fg, color.input.invalid.disabled.fg, focusRingBorderStyle({
+    color: color.input.invalid.disabled.border,
+    width: input.border.width
+  }), color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.invalid.readOnly.bg, color.input.invalid.readOnly.fg, color.input.default.hovered.bg, color.input.default.hovered.fg, color.input.invalid.hovered.bg, color.input.invalid.hovered.fg, focusRingBorderStyle({
     color: color.input.default.hovered.border,
     width: input.border.width
+  }), focusRingBorderStyle({
+    color: color.input.invalid.hovered.border,
+    width: input.border.width
   }));
 }
 function responsiveMarginStyle(props) {
@@ -2420,7 +2432,7 @@ const Button = forwardRef(function Button2(props, ref) {
     iconRight,
     justify: justifyProp = "center",
     loading,
-    mode = "ghost",
+    mode = "default",
     padding: paddingProp = 3,
     paddingX: paddingXProp,
     paddingY: paddingYProp,
@@ -2486,16 +2498,13 @@ const Button = forwardRef(function Button2(props, ref) {
         children: [icon && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
           children: [isValidElement(icon) && icon, isValidElementType(icon) && createElement(icon)]
-        }), text && /* @__PURE__ */jsx(Box, {
-          flex: iconRight ? 1 : void 0,
-          children: /* @__PURE__ */jsx(Text, {
-            muted,
-            align: textAlign,
-            size: fontSize,
-            textOverflow: "ellipsis",
-            weight: button.textWeight,
-            children: text
-          })
+        }), text && /* @__PURE__ */jsx(Text, {
+          muted,
+          align: textAlign,
+          size: fontSize,
+          textOverflow: "ellipsis",
+          weight: button.textWeight,
+          children: text
         }), iconRight && /* @__PURE__ */jsxs(Text, {
           size: fontSize,
           children: [isValidElement(iconRight) && iconRight, isValidElementType(iconRight) && createElement(iconRight)]
@@ -2922,7 +2931,7 @@ function headingBaseStyle(props) {
   const {
     font
   } = getTheme_v2(props.theme);
-  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family);
+  return css(_c$8 || (_c$8 = __template$s(["\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n    }\n\n    & a {\n      text-decoration: none;\n      border-radius: 1px;\n      color: var(--card-link-color);\n      outline: none;\n\n      @media (hover: hover) {\n        &:hover {\n          text-decoration: underline;\n        }\n      }\n\n      &:focus {\n        box-shadow:\n          0 0 0 1px var(--card-bg-color),\n          0 0 0 3px var(--card-focus-ring-color);\n      }\n\n      &:focus:not(:focus-visible) {\n        box-shadow: none;\n      }\n    }\n\n    & strong {\n      font-weight: ", ";\n    }\n\n    & svg {\n      /* Certain popular CSS libraries changes the defaults for SVG display */\n      /* Make sure SVGs are rendered as inline elements */\n      display: inline;\n    }\n\n    & [data-sanity-icon] {\n      vertical-align: baseline;\n    }\n  "])), $accent && css(_a$s || (_a$s = __template$s(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$g || (_b$g = __template$s(["\n      color: var(--card-muted-fg-color);\n    "]))), font.code.family, font.heading.weights.bold);
 }
 var __freeze$r = Object.freeze;
 var __defProp$s = Object.defineProperty;
@@ -3939,7 +3948,7 @@ var __template$m = (cooked, raw) => __freeze$m(__defProp$m(cooked, "raw", {
   value: __freeze$m(raw || cooked.slice())
 }));
 var _a$m;
-const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n"])));
+const MotionCard$1 = styled(motion(Card))(_a$m || (_a$m = __template$m(["\n  &:not([hidden]) {\n    display: flex;\n  }\n  flex-direction: column;\n  width: max-content;\n  min-width: min-content;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
   const {
     __unstable_margins: marginsProp,
@@ -3979,8 +3988,9 @@ const PopoverCard = memo(forwardRef(function PopoverCard2(props, ref) {
     top: y,
     width,
     zIndex,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, strategy, style, width, x, y, zIndex]);
+  }), [animate, originX, originY, strategy, style, width, x, y, zIndex]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -4492,9 +4502,9 @@ function switchRepresentationStyles(props) {
     color,
     input
   } = getTheme_v2(props.theme);
-  return css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
+  return css(_c$5 || (_c$5 = __template$j(["\n    --switch-bg-color: ", ";\n    --switch-fg-color: ", ";\n    --switch-box-shadow: none;\n\n    &:not([hidden]) {\n      display: block;\n    }\n    position: relative;\n    width: ", ";\n    height: ", ";\n    border-radius: ", ";\n\n    /* Make sure it\u2019s not possible to interact with the wrapper element */\n    pointer-events: none;\n\n    &:after {\n      content: '';\n      display: block;\n      position: absolute;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 1;\n      box-shadow: var(--switch-box-shadow);\n      border-radius: inherit;\n    }\n\n    /* Focus styles */\n    input:focus + && {\n      --switch-box-shadow: ", ";\n    }\n\n    input:focus:not(:focus-visible) + && {\n      --switch-box-shadow: none;\n    }\n\n    input:checked + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    @media (hover: hover) {\n      input:not(:disabled):hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n\n      input:not(:disabled):checked:hover + && {\n        --switch-bg-color: ", ";\n        --switch-fg-color: ", ";\n      }\n    }\n\n    input:not([data-read-only]):disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n\n    input:checked[data-read-only]:disabled + && {\n      --switch-bg-color: ", ";\n      --switch-fg-color: ", ";\n    }\n  "])), color.input.default.enabled.border, color.input.default.enabled.bg, rem(input.switch.width), rem(input.switch.height), rem(input.switch.height / 2), focusRingStyle({
     focusRing: input.switch.focusRing
-  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg);
+  }), color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.hovered.border, color.input.default.hovered.bg, color.input.default.enabled.fg, color.input.default.enabled.bg, color.input.default.disabled.border, color.input.default.disabled.bg, color.input.default.readOnly.border, color.input.default.readOnly.bg, color.input.default.readOnly.fg, color.input.default.readOnly.bg);
 }
 function switchTrackStyles(props) {
   const {
@@ -4827,7 +4837,7 @@ var __template$g = (cooked, raw) => __freeze$g(__defProp$g(cooked, "raw", {
   value: __freeze$g(raw || cooked.slice())
 }));
 var _a$g;
-const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g([""])));
+const MotionCard = styled(motion(Card))(_a$g || (_a$g = __template$g(["\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
   const {
     animate,
@@ -4849,8 +4859,9 @@ const TooltipCard = memo(forwardRef(function TooltipCard2(props, ref) {
   const rootStyle = useMemo(() => ({
     originX,
     originY,
+    willChange: animate ? "transform" : void 0,
     ...style
-  }), [originX, originY, style]);
+  }), [animate, originX, originY, style]);
   const arrowStyle = useMemo(() => ({
     left: arrowX !== null ? arrowX : void 0,
     top: arrowY !== null ? arrowY : void 0,
@@ -5808,7 +5819,7 @@ function responsiveDialogPositionStyle(props) {
   }));
 }
 function animationDialogStyle(props) {
-  if (!props.animate) return css(_a$c || (_a$c = __template$c([""])));
+  if (!props.$animate) return css(_a$c || (_a$c = __template$c([""])));
   return css(_b$7 || (_b$7 = __template$c(["\n    @keyframes zoomIn {\n      from {\n        opacity: 0;\n        transform: scale(0.95);\n      }\n      to {\n        opacity: 1;\n        transform: scale(1);\n      }\n    }\n    @keyframes fadeIn {\n      from {\n        opacity: 0;\n      }\n      to {\n        opacity: 1;\n      }\n    }\n\n    animation: fadeIn 200ms ease-out;\n    // Animates the dialog card.\n    & > [data-ui='DialogCard'] {\n      animation: zoomIn 200ms ease-out;\n    }\n  "])));
 }
 const key$3 = Symbol.for("@sanity/ui/context/dialog");
@@ -6031,6 +6042,7 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
     __unstable_name: portalProp,
     children: /* @__PURE__ */jsxs(Root$7, {
       ...restProps,
+      $animate: animate,
       $padding: padding,
       $position: position,
       "aria-labelledby": labelId,
@@ -6043,7 +6055,6 @@ const Dialog = forwardRef(function Dialog2(props, ref) {
       ref,
       role: "dialog",
       zOffset,
-      animate,
       children: [/* @__PURE__ */jsx("div", {
         ref: preDivRef,
         tabIndex: 0
@@ -7093,13 +7104,19 @@ const STATUS_CARD_TONE = {
   success: "positive",
   info: "primary"
 };
+const BUTTON_TONE = {
+  error: "critical",
+  warning: "caution",
+  success: "positive",
+  info: "primary"
+};
 const ROLES = {
   error: "alert",
   warning: "alert",
   success: "alert",
   info: "alert"
 };
-const Root$2 = styled(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n"])));
+const Root$2 = styled(Card)(_a$3 || (_a$3 = __template$3(["\n  pointer-events: all;\n  & > * {\n    opacity: var(", ", 1);\n    will-change: opacity;\n  }\n"])), POPOVER_MOTION_CONTENT_OPACITY_PROPERTY);
 const TextBox = styled(Flex)(_b$2 || (_b$2 = __template$3(["\n  overflow-x: auto;\n"])));
 function Toast(props) {
   const {
@@ -7112,6 +7129,7 @@ function Toast(props) {
     ...restProps
   } = props;
   const cardTone = status ? STATUS_CARD_TONE[status] : "default";
+  const buttonTone = status ? BUTTON_TONE[status] : "default";
   const role = status ? ROLES[status] : "status";
   return /* @__PURE__ */jsx(Root$2, {
     "data-ui": "Toast",
@@ -7145,6 +7163,7 @@ function Toast(props) {
           icon: CloseIcon,
           mode: "bleed",
           padding: 2,
+          tone: buttonTone,
           onClick: onClose,
           style: {
             verticalAlign: "top"
@@ -7254,12 +7273,14 @@ function ToastProvider(props) {
               } = _ref12;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
-                  opacity: 1,
+                  opacity: [0, 1, 1],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [0, 0, 1],
                   y: 0,
                   scale: 1
                 },
                 exit: {
-                  opacity: 0,
+                  opacity: [1, 1, 0],
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: [1, 0, 0],
                   scale: 0.5,
                   transition: {
                     duration: 0.2
@@ -7267,8 +7288,10 @@ function ToastProvider(props) {
                 },
                 initial: {
                   opacity: 0,
+                  [POPOVER_MOTION_CONTENT_OPACITY_PROPERTY]: 0,
                   y: 32,
-                  scale: 0.25
+                  scale: 0.25,
+                  willChange: "transform"
                 },
                 layout: "position",
                 transition: {