@sanity/ui 2.0.0-alpha.12 → 2.0.0-alpha.13

package/dist/index.d.ts

@@ -460,7 +460,7 @@ export declare interface BreadcrumbsProps {
  * @public
  */
 export declare const Button: ForwardRefExoticComponent<
-  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'as'>, 'ref'> &
+  Omit<ButtonProps & Omit<HTMLProps<HTMLButtonElement>, 'width' | 'as'>, 'ref'> &
     RefAttributes<HTMLButtonElement>
 >
 
@@ -490,6 +490,7 @@ export declare interface ButtonProps extends ResponsivePaddingProps, ResponsiveR
   text?: React.ReactNode
   tone?: ButtonTone
   type?: 'button' | 'reset' | 'submit'
+  width?: ButtonWidth
 }
 
 /**
@@ -502,6 +503,11 @@ export declare type ButtonTextAlign = 'left' | 'right' | 'center'
  */
 export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution' | 'critical'
 
+/**
+ * @public
+ */
+export declare type ButtonWidth = 'fill'
+
 /**
  * @public
  */
@@ -2217,7 +2223,11 @@ export declare interface SwitchProps {
  */
 export declare const Tab: ForwardRefExoticComponent<
   Omit<
-    TabProps & Omit<HTMLProps<HTMLButtonElement>, 'label' | 'id' | 'aria-controls' | 'as' | 'type'>,
+    TabProps &
+      Omit<
+        HTMLProps<HTMLButtonElement>,
+        'label' | 'width' | 'id' | 'aria-controls' | 'as' | 'type'
+      >,
     'ref'
   > &
     RefAttributes<HTMLButtonElement>

package/dist/index.esm.js

@@ -3883,7 +3883,7 @@ var __defProp$E = Object.defineProperty;
 var __template$D = (cooked, raw) => __freeze$D(__defProp$E(cooked, "raw", {
   value: __freeze$D(raw || cooked.slice())
 }));
-var _a$D, _b$m, _c$d;
+var _a$D, _b$n, _c$d;
 const ROOT_STYLE = css(_a$D || (_a$D = __template$D(["\n  &:not([hidden]) {\n    display: flex;\n  }\n\n  align-items: center;\n"])));
 function textInputRootStyle() {
   return ROOT_STYLE;
@@ -3897,7 +3897,7 @@ function textInputBaseStyle(props) {
   } = props;
   const font = theme.sanity.fonts.text;
   const color = theme.sanity.color.input;
-  return css(_b$m || (_b$m = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
+  return css(_b$n || (_b$n = __template$D(["\n    appearance: none;\n    background: none;\n    border: 0;\n    border-radius: 0;\n    outline: none;\n    width: 100%;\n    box-sizing: border-box;\n    font-family: ", ";\n    font-weight: ", ";\n    margin: 0;\n    position: relative;\n    z-index: 1;\n    display: block;\n\n    /* NOTE: This is a hack to disable Chrome\u2019s autofill styles */\n    &:-webkit-autofill,\n    &:-webkit-autofill:hover,\n    &:-webkit-autofill:focus,\n    &:-webkit-autofill:active {\n      -webkit-text-fill-color: var(--input-fg-color) !important;\n      transition: background-color 5000s;\n      transition-delay: 86400s /* 24h */;\n    }\n\n    /* &:is(textarea) */\n    &[data-as='textarea'] {\n      resize: none;\n    }\n\n    color: var(--input-fg-color);\n\n    &::placeholder {\n      color: var(--input-placeholder-color);\n    }\n\n    &[data-scheme='", "'][data-tone='", "'] {\n      --input-fg-color: ", ";\n      --input-placeholder-color: ", ";\n\n      /* enabled */\n      &:not(:invalid):not(:disabled):not(:read-only) {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* disabled */\n      &:not(:invalid):disabled {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* invalid */\n      &:invalid {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n\n      /* readOnly */\n      &:read-only {\n        --input-fg-color: ", ";\n        --input-placeholder-color: ", ";\n      }\n    }\n  "])), font.family, $weight && font.weights[$weight] || font.weights.regular, $scheme, $tone, color.default.enabled.fg, color.default.enabled.placeholder, color.default.enabled.fg, color.default.enabled.placeholder, color.default.disabled.fg, color.default.disabled.placeholder, color.invalid.enabled.fg, color.invalid.enabled.placeholder, color.default.readOnly.fg, color.default.readOnly.placeholder);
 }
 function textInputFontSizeStyle(props) {
   const {
@@ -4013,7 +4013,7 @@ var __defProp$D = Object.defineProperty;
 var __template$C = (cooked, raw) => __freeze$C(__defProp$D(cooked, "raw", {
   value: __freeze$C(raw || cooked.slice())
 }));
-var _a$C, _b$l, _c$c;
+var _a$C, _b$m, _c$c;
 function textBaseStyle(props) {
   const {
     $accent,
@@ -4023,7 +4023,7 @@ function textBaseStyle(props) {
   const {
     weights
   } = theme.sanity.fonts.text;
-  return css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$l || (_b$l = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
+  return css(_c$c || (_c$c = __template$C(["\n    color: var(--card-fg-color);\n\n    ", "\n\n    ", "\n\n    & code {\n      font-family: ", ";\n      border-radius: 1px;\n      background-color: var(--card-code-bg-color);\n      color: var(--card-code-fg-color);\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      color: var(--card-icon-color);\n    }\n  "])), $accent && css(_a$C || (_a$C = __template$C(["\n      color: var(--card-accent-fg-color);\n    "]))), $muted && css(_b$m || (_b$m = __template$C(["\n      color: var(--card-muted-fg-color);\n    "]))), theme.sanity.fonts.code.family, weights.bold);
 }
 var __freeze$B = Object.freeze;
 var __defProp$C = Object.defineProperty;
@@ -4588,9 +4588,9 @@ var __defProp$z = Object.defineProperty;
 var __template$y = (cooked, raw) => __freeze$y(__defProp$z(cooked, "raw", {
   value: __freeze$y(raw || cooked.slice())
 }));
-var _a$y, _b$k;
+var _a$y, _b$l;
 const rotate$1 = keyframes(_a$y || (_a$y = __template$y(["\n  from {\n    transform: rotate(0deg);\n  }\n\n  to {\n    transform: rotate(360deg);\n  }\n"])));
-const Root$x = styled(Text)(_b$k || (_b$k = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
+const Root$x = styled(Text)(_b$l || (_b$l = __template$y(["\n  & > span > svg {\n    animation: ", " 500ms linear infinite;\n  }\n"])), rotate$1);
 const Spinner = forwardRef(function Spinner2(props, ref) {
   return /* @__PURE__ */jsx(Root$x, {
     "data-ui": "Spinner",
@@ -4635,9 +4635,12 @@ var __defProp$y = Object.defineProperty;
 var __template$x = (cooked, raw) => __freeze$x(__defProp$y(cooked, "raw", {
   value: __freeze$x(raw || cooked.slice())
 }));
-var _a$x;
-function buttonBaseStyles() {
-  return css(_a$x || (_a$x = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])));
+var _a$x, _b$k;
+function buttonBaseStyles(_ref20) {
+  let {
+    $width
+  } = _ref20;
+  return css(_b$k || (_b$k = __template$x(["\n    -webkit-font-smoothing: inherit;\n    appearance: none;\n    display: inline-flex;\n    align-items: center;\n    font: inherit;\n    border: 0;\n    outline: none;\n    user-select: none;\n    text-decoration: none;\n    border: 0;\n    box-sizing: border-box;\n    padding: 0;\n    margin: 0;\n    white-space: nowrap;\n    text-align: left;\n    position: relative;\n\n    ", "\n\n    & > span {\n      display: block;\n      flex: 1;\n      min-width: 0;\n      border-radius: inherit;\n    }\n\n    &::-moz-focus-inner {\n      border: 0;\n      padding: 0;\n    }\n  "])), $width === "fill" && css(_a$x || (_a$x = __template$x(["\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
   border: {
@@ -4652,7 +4655,7 @@ function combineBoxShadow() {
   return boxShadows.filter(Boolean).join(",");
 }
 function buttonColorStyles(props) {
-  var _a2, _b;
+  var _a2, _b2;
   const {
     $mode,
     theme
@@ -4695,7 +4698,7 @@ function buttonColorStyles(props) {
       },
       "&[data-selected]": _colorVarsStyle(base, color.pressed)
     }
-  }, (_b = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b.root].filter(Boolean);
+  }, (_b2 = (_a2 = theme.sanity.styles) == null ? void 0 : _a2.button) == null ? void 0 : _b2.root].filter(Boolean);
 }
 var __freeze$w = Object.freeze;
 var __defProp$x = Object.defineProperty;
@@ -4730,6 +4733,7 @@ const Button = forwardRef(function Button2(props, ref) {
     tone = "default",
     type = "button",
     muted = false,
+    width,
     ...restProps
   } = props;
   const justify = useArrayProp(justifyProp);
@@ -4764,6 +4768,7 @@ const Button = forwardRef(function Button2(props, ref) {
     disabled: Boolean(loading || disabled),
     ref,
     type,
+    $width: width,
     children: [Boolean(loading) && /* @__PURE__ */jsx(LoadingBox, {
       children: /* @__PURE__ */jsx(Spinner, {})
     }), (icon || text || iconRight) && /* @__PURE__ */jsx(Box, {
@@ -4992,10 +4997,10 @@ var __template$t = (cooked, raw) => __freeze$t(__defProp$u(cooked, "raw", {
   value: __freeze$t(raw || cooked.slice())
 }));
 var _a$t;
-function codeSyntaxHighlightingStyle(_ref20) {
+function codeSyntaxHighlightingStyle(_ref21) {
   let {
     theme
-  } = _ref20;
+  } = _ref21;
   const color = theme.sanity.color.syntax;
   return {
     "&.atrule": {
@@ -6303,13 +6308,13 @@ const Popover = memo(forwardRef(function Popover2(props, ref) {
     }));
     if (constrainSize || matchReferenceWidth) {
       ret.push(size({
-        apply(_ref21) {
+        apply(_ref22) {
           let {
             availableWidth,
             availableHeight,
             elements,
             referenceWidth
-          } = _ref21;
+          } = _ref22;
           referenceWidthRef.current = referenceWidth;
           const _currentWidth = widthRef.current;
           const _maxWidth = maxWidthRef.current;
@@ -7118,12 +7123,12 @@ const Tooltip = forwardRef(function Tooltip2(props, ref) {
       mainAxis: 3
     }));
     ret.push(size$2({
-      apply(_ref22) {
+      apply(_ref23) {
         let {
           availableWidth,
           availableHeight,
           elements
-        } = _ref22;
+        } = _ref23;
         Object.assign(elements.floating.style, {
           maxWidth: "".concat(availableWidth - 4 * 2, "px"),
           // the padding is `4px`
@@ -7429,10 +7434,10 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete2(props, ref) {
     query,
     value
   } = state;
-  const defaultRenderOption = useCallback(_ref23 => {
+  const defaultRenderOption = useCallback(_ref24 => {
     let {
       value: value2
-    } = _ref23;
+    } = _ref24;
     return /* @__PURE__ */jsx(Card, {
       "data-as": "button",
       padding: paddingProp,
@@ -7886,10 +7891,10 @@ const Breadcrumbs = forwardRef(function Breadcrumbs2(props, ref) {
   });
 });
 const BORDER_OFFSET_X = 12;
-function dialogStyle(_ref24) {
+function dialogStyle(_ref25) {
   let {
     theme
-  } = _ref24;
+  } = _ref25;
   const color = theme.sanity.color.base;
   return {
     "&:not([hidden])": {
@@ -8974,15 +8979,15 @@ var __template$6 = (cooked, raw) => __freeze$6(__defProp$6(cooked, "raw", {
 var _a$6, _b$3, _c$1, _d;
 const keyframe = keyframes(_a$6 || (_a$6 = __template$6(["\n  0% {\n    background-position: 100%;\n  }\n  100% {\n    background-position: -100%;\n  }\n"])));
 const animation = css(_b$3 || (_b$3 = __template$6(["\n  background-image: linear-gradient(\n    to right,\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-to),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from),\n    var(--card-skeleton-color-from)\n  );\n  background-position: 100%;\n  background-size: 200% 100%;\n  background-attachment: fixed;\n  animation-name: ", ";\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n  animation-duration: 2000ms;\n"])), keyframe);
-const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref25 => {
+const skeletonStyle = css(_d || (_d = __template$6(["\n  opacity: ", ";\n  transition: opacity 200ms ease-in;\n\n  @media screen and (prefers-reduced-motion: no-preference) {\n    ", "\n  }\n\n  @media screen and (prefers-reduced-motion: reduce) {\n    background-color: var(--card-skeleton-color-from);\n  }\n"])), _ref26 => {
   let {
     $visible
-  } = _ref25;
+  } = _ref26;
   return $visible ? 1 : 0;
-}, _ref26 => {
+}, _ref27 => {
   let {
     $animated
-  } = _ref26;
+  } = _ref27;
   return $animated ? animation : css(_c$1 || (_c$1 = __template$6(["\n            background-color: var(--card-skeleton-color-from);\n          "])));
 });
 const Root$4 = styled(Box)(responsiveRadiusStyle, skeletonStyle);
@@ -9013,12 +9018,12 @@ const Skeleton = forwardRef(function Skeleton2(props, ref) {
     ref
   });
 });
-const Root$3 = styled(Skeleton)(_ref27 => {
+const Root$3 = styled(Skeleton)(_ref28 => {
   let {
     $size,
     $style,
     theme
-  } = _ref27;
+  } = _ref28;
   const {
     media
   } = theme.sanity;
@@ -9366,12 +9371,12 @@ function ToastProvider(props) {
           paddingY,
           children: /* @__PURE__ */jsx(AnimatePresence, {
             initial: false,
-            children: state.map(_ref28 => {
+            children: state.map(_ref29 => {
               let {
                 dismiss,
                 id,
                 params
-              } = _ref28;
+              } = _ref29;
               return /* @__PURE__ */jsx(motion.div, {
                 animate: {
                   opacity: 1,