@sanity/ui 3.0.0-static.2 → 3.0.0-static.4

package/dist/index.d.mts

@@ -6,9 +6,11 @@ import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import {BoxStyleProps} from '@sanity/ui/css'
 import {ButtonStyleProps} from '@sanity/ui/css'
+import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
 import type {ComponentProps} from 'react'
+import {ComponentType} from 'react'
 import {ContainerStyleProps} from '@sanity/ui/css'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
@@ -46,6 +48,7 @@ import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
 import {InputStyleProps} from '@sanity/ui/css'
 import {InsetStyleProps} from '@sanity/ui/css'
+import {JSX} from 'react'
 import {LabelSize} from '@sanity/ui/css'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
@@ -625,6 +628,20 @@ export declare const Card: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
+export declare type CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}>
+
+/** @internal */
+export declare interface CardContextValue {
+  compat_provider?: CardCompatProviderComponent
+  rendered: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}
+
 /**
  * @public
  */
@@ -646,15 +663,23 @@ export declare interface CardProps extends BoxProps, CardStyleProps_2 {
   target?: string
 }
 
+export declare function CardProvider(props: {
+  compat_provider?: CardCompatProviderComponent
+  children?: ReactNode
+  rendered?: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}): JSX.Element
+
 /**
  * @internal
- * @deprecated
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
  */
 export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $muted: boolean
-  $tone: ThemeColorToneKey
+  $tone: ThemeColorCardToneKey
 }
 
 /**
@@ -1976,7 +2001,9 @@ export declare interface StackProps
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export declare const studioTheme: RootTheme_2
+export declare const studioTheme: {
+  readonly value: RootTheme_2
+}
 
 /**
  * @public
@@ -2642,6 +2669,8 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
  */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
+export declare function useCard(): CardContextValue_2 | null
+
 /**
  * @public
  * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:

package/dist/index.d.ts

@@ -6,9 +6,11 @@ import {BoxOverflow} from '@sanity/ui/css'
 import {BoxSizing} from '@sanity/ui/css'
 import {BoxStyleProps} from '@sanity/ui/css'
 import {ButtonStyleProps} from '@sanity/ui/css'
+import {CardContextValue as CardContextValue_2} from './types'
 import {CardStyleProps as CardStyleProps_2} from '@sanity/ui/css'
 import {Component} from 'react'
 import type {ComponentProps} from 'react'
+import {ComponentType} from 'react'
 import {ContainerStyleProps} from '@sanity/ui/css'
 import {Context} from 'react'
 import {createColorTheme as createColorTheme_2} from '@sanity/ui/theme'
@@ -46,6 +48,7 @@ import {HSL as HSL_2} from '@sanity/ui/theme'
 import {hslToRgb as hslToRgb_2} from '@sanity/ui/theme'
 import {InputStyleProps} from '@sanity/ui/css'
 import {InsetStyleProps} from '@sanity/ui/css'
+import {JSX} from 'react'
 import {LabelSize} from '@sanity/ui/css'
 import {multiply as multiply_2} from '@sanity/ui/theme'
 import {MutableRefObject} from 'react'
@@ -625,6 +628,20 @@ export declare const Card: ForwardRefExoticComponent<
     RefAttributes<HTMLDivElement>
 >
 
+export declare type CardCompatProviderComponent = ComponentType<{
+  children?: ReactNode
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}>
+
+/** @internal */
+export declare interface CardContextValue {
+  compat_provider?: CardCompatProviderComponent
+  rendered: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}
+
 /**
  * @public
  */
@@ -646,15 +663,23 @@ export declare interface CardProps extends BoxProps, CardStyleProps_2 {
   target?: string
 }
 
+export declare function CardProvider(props: {
+  compat_provider?: CardCompatProviderComponent
+  children?: ReactNode
+  rendered?: boolean
+  tone: ThemeColorCardToneKey
+  scheme: ThemeColorSchemeKey_2
+}): JSX.Element
+
 /**
  * @internal
- * @deprecated
+ * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.
  */
 export declare interface CardStyleProps {
   $checkered: boolean
   $focusRing: boolean
   $muted: boolean
-  $tone: ThemeColorToneKey
+  $tone: ThemeColorCardToneKey
 }
 
 /**
@@ -1976,7 +2001,9 @@ export declare interface StackProps
  * @public
  * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
  */
-export declare const studioTheme: RootTheme_2
+export declare const studioTheme: {
+  readonly value: RootTheme_2
+}
 
 /**
  * @public
@@ -2642,6 +2669,8 @@ export declare function useArrayProp<T>(val: T | T[] | undefined, defaultVal?: T
  */
 export declare function useBoundaryElement(): BoundaryElementContextValue
 
+export declare function useCard(): CardContextValue_2 | null
+
 /**
  * @public
  * @deprecated replaced by the new `useClickOutsideEvent` hook, instead of:

package/dist/index.js

@@ -246,7 +246,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
       as: "button",
       padding: paddingProp,
       radius: 2,
-      tone: "inherit",
+      selectable: !0,
       children: /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Text, { size: fontSize, textOverflow: "ellipsis", children: value_0 })
     }
   ), [fontSize, paddingProp]), renderOption = typeof renderOptionProp == "function" ? renderOptionProp : defaultRenderOption, filterOption = typeof filterOptionProp == "function" ? filterOptionProp : DEFAULT_FILTER_OPTION, rootElementRef = react.useRef(null), resultsPopoverElementRef = react.useRef(null), inputElementRef = react.useRef(null), listBoxElementRef = react.useRef(null), listFocusedRef = react.useRef(!1), valueRef = react.useRef(value), valuePropRef = react.useRef(valueProp), popoverMouseWithinRef = react.useRef(!1);
@@ -384,6 +384,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     return /* @__PURE__ */ jsxRuntime.jsx(AutocompleteOption, { id: `${id}-option-${option_0.value}`, onSelect: handleOptionSelect, selected: active, value: option_0.value, children: react.cloneElement(renderOption(option_0), {
       disabled: loading,
       selected: active,
+      selectable: !0,
       tabIndex: listFocused && active ? 0 : -1
     }) }, option_0.value);
   }) }) }), [activeValue, currentOption, filteredOptions, handleOptionSelect, handleListBoxKeyDown, id, listBox, listBoxId, listFocused, loading, renderOption]), results = react.useMemo(() => renderPopover ? renderPopover({
@@ -392,7 +393,7 @@ const AUTOCOMPLETE_LISTBOX_IGNORE_KEYS = ["Control", "Shift", "Alt", "Enter", "H
     inputElement: inputElementRef.current,
     onMouseEnter: handlePopoverMouseEnter,
     onMouseLeave: handlePopoverMouseLeave
-  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
+  }, resultsPopoverElementRef) : filteredOptionsLen === 0 ? null : /* @__PURE__ */ jsxRuntime.jsx(_visualEditing.Popover, { arrow: !1, constrainSize: !0, content: content2, fallbackPlacements: AUTOCOMPLETE_POPOVER_FALLBACK_PLACEMENTS, matchReferenceWidth: !0, onMouseEnter: handlePopoverMouseEnter, onMouseLeave: handlePopoverMouseLeave, open: expanded, overflow: "auto", placement: AUTOCOMPLETE_POPOVER_PLACEMENT, portal: !0, radius: 3, ref: resultsPopoverElementRef, referenceElement: inputElementRef.current, ...popover }), [content2, expanded, filteredOptionsLen, handlePopoverMouseEnter, handlePopoverMouseLeave, popover, radius, renderPopover]);
   return (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-ui": "Autocomplete", onBlur: handleRootBlur, onFocus: handleRootFocus, onKeyDown: handleRootKeyDown, ref: rootElementRef, children: [
@@ -951,7 +952,7 @@ function Toast(props) {
     }, onAnimationComplete: onClose }, `progress-${updatedAt}`)
   ] }), $[32] = cardTone, $[33] = duration, $[34] = hasDuration, $[35] = onClose, $[36] = radius, $[37] = transition, $[38] = updatedAt, $[39] = visualDuration, $[40] = t12) : t12 = $[40];
   let t13;
-  return $[41] !== cardTone || $[42] !== radius || $[43] !== restProps || $[44] !== role || $[45] !== t11 || $[46] !== t12 || $[47] !== t6 || $[48] !== transition || $[49] !== visualDuration ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { as: "li", className: t5, "data-ui": "Toast", role, ...restProps, "data-has-duration": t6, custom: visualDuration, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, width: "fill", position: "relative", children: [
+  return $[41] !== cardTone || $[42] !== radius || $[43] !== restProps || $[44] !== role || $[45] !== t11 || $[46] !== t12 || $[47] !== t6 || $[48] !== transition || $[49] !== visualDuration ? (t13 = /* @__PURE__ */ jsxRuntime.jsxs(MotionCard, { as: "li", className: t5, "data-ui": "Toast", role, ...restProps, "data-has-duration": t6, custom: visualDuration, radius, shadow: 2, tone: cardTone, layout: "position", variants: container, initial, animate, exit, transition, position: "relative", children: [
     t11,
     t12
   ] }), $[41] = cardTone, $[42] = radius, $[43] = restProps, $[44] = role, $[45] = t11, $[46] = t12, $[47] = t6, $[48] = transition, $[49] = visualDuration, $[50] = t13) : t13 = $[50], t13;
@@ -1386,30 +1387,28 @@ const TreeGroup = react.memo(function(props) {
 });
 TreeItem.displayName = "Memo(TreeItem)";
 function StyleTags(props) {
-  const $ = reactCompilerRuntime.c(14), {
+  const $ = reactCompilerRuntime.c(10), {
     theme: themeProp
   } = props;
   let t0;
   $[0] !== themeProp ? (t0 = themeProp ?? theme.buildTheme_v3(), $[0] = themeProp, $[1] = t0) : t0 = $[1];
   const theme$1 = t0;
   let t1;
-  $[2] !== theme$1._palette ? (t1 = css.compilePalette(theme$1._palette), $[2] = theme$1._palette, $[3] = t1) : t1 = $[3];
+  $[2] === Symbol.for("react.memo_cache_sentinel") ? (t1 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-palette", precedence: "palette", children: css.compilePalette() }), $[2] = t1) : t1 = $[2];
   let t2;
-  $[4] !== t1 ? (t2 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-palette", precedence: "palette", children: t1 }), $[4] = t1, $[5] = t2) : t2 = $[5];
-  let t3;
-  $[6] !== theme$1 ? (t3 = css.compileTheme({
+  $[3] !== theme$1 ? (t2 = css.compileTheme({
     v3: theme$1
-  }), $[6] = theme$1, $[7] = t3) : t3 = $[7];
+  }), $[3] = theme$1, $[4] = t2) : t2 = $[4];
+  let t3;
+  $[5] !== t2 ? (t3 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-theme", precedence: "theme", children: t2 }), $[5] = t2, $[6] = t3) : t3 = $[6];
   let t4;
-  $[8] !== t3 ? (t4 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-theme", precedence: "theme", children: t3 }), $[8] = t3, $[9] = t4) : t4 = $[9];
+  $[7] === Symbol.for("react.memo_cache_sentinel") ? (t4 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-system", precedence: "system", children: css.compileSystem() }), $[7] = t4) : t4 = $[7];
   let t5;
-  $[10] === Symbol.for("react.memo_cache_sentinel") ? (t5 = /* @__PURE__ */ jsxRuntime.jsx("style", { href: "sanity-system", precedence: "system", children: css.compileSystem() }), $[10] = t5) : t5 = $[10];
-  let t6;
-  return $[11] !== t2 || $[12] !== t4 ? (t6 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    t2,
-    t4,
-    t5
-  ] }), $[11] = t2, $[12] = t4, $[13] = t6) : t6 = $[13], t6;
+  return $[8] !== t3 ? (t5 = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    t1,
+    t3,
+    t4
+  ] }), $[8] = t3, $[9] = t5) : t5 = $[9], t5;
 }
 exports.Arrow = _visualEditing.Arrow;
 exports.Avatar = _visualEditing.Avatar;
@@ -1420,6 +1419,7 @@ exports.BoundaryElementProvider = _visualEditing.BoundaryElementProvider;
 exports.Box = _visualEditing.Box;
 exports.Button = _visualEditing.Button;
 exports.Card = _visualEditing.Card;
+exports.CardProvider = _visualEditing.CardProvider;
 exports.Checkbox = _visualEditing.Checkbox;
 exports.Code = _visualEditing.Code;
 exports.ConditionalWrapper = _visualEditing.ConditionalWrapper;
@@ -1482,6 +1482,7 @@ exports.screen = _visualEditing.screen;
 exports.studioTheme = _visualEditing.studioTheme;
 exports.useArrayProp = _visualEditing.useArrayProp;
 exports.useBoundaryElement = _visualEditing.useBoundaryElement;
+exports.useCard = _visualEditing.useCard;
 exports.useClickOutsideEvent = _visualEditing.useClickOutsideEvent;
 exports.useCustomValidity = _visualEditing.useCustomValidity;
 exports.useElementSize = _visualEditing.useElementSize;