@sanity/ui 2.0.0-alpha.16 → 2.0.0-alpha.17

package/dist/index.d.ts

@@ -44,6 +44,9 @@ export declare type ArrayPropPrimitive = string | number | boolean | undefined |
 export declare function attemptFocus(element: HTMLElement): boolean
 
 /**
+ * The Autocomplete component is typically used for search components.
+ * It consists of a text input for writing a query, and properties for rendering suggestions.
+ *
  * @public
  */
 export declare const Autocomplete: <Option extends BaseAutocompleteOption>(
@@ -128,6 +131,7 @@ export declare interface AutocompleteProps<
   onSelect?: (value: string) => void
   /** @beta */
   openButton?: boolean | AutocompleteOpenButtonProps
+  /** The options to render. */
   options?: Option[]
   padding?: number | number[]
   popover?: Omit<PopoverProps, 'content' | 'onMouseEnter' | 'onMouseLeave' | 'open'> &
@@ -136,6 +140,7 @@ export declare interface AutocompleteProps<
   radius?: Radius | Radius[]
   /** @beta */
   relatedElements?: HTMLElement[]
+  /** The callback function for rendering each option. */
   renderOption?: (option: Option) => ReactElement
   /** @beta */
   renderPopover?: (
@@ -150,6 +155,7 @@ export declare interface AutocompleteProps<
   ) => ReactNode
   renderValue?: (value: string, option?: Option) => string
   suffix?: ReactNode
+  /** The current value. */
   value?: string
 }
 
@@ -219,6 +225,8 @@ export declare interface AutocompleteValueChangeMsg {
 }
 
 /**
+ * Avatars are used to represent people and other agents (e.g. bots).
+ *
  * @public
  */
 export declare const Avatar: ForwardRefExoticComponent<
@@ -303,6 +311,8 @@ export declare interface AvatarStackProps {
 export declare type AvatarStatus = 'online' | 'editing' | 'inactive'
 
 /**
+ * Badges are used to tag resources.
+ *
  * @public
  */
 export declare const Badge: ForwardRefExoticComponent<
@@ -412,6 +422,9 @@ export declare interface BoundaryElementProviderProps {
 }
 
 /**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
  * @public
  */
 export declare const Box: ForwardRefExoticComponent<
@@ -539,6 +552,9 @@ export declare type ButtonTone = 'default' | 'primary' | 'positive' | 'caution'
 export declare type ButtonWidth = 'fill'
 
 /**
+ * The `Card` component acts much like a `Box`, but with a background and foreground color.
+ * Components within a `Card` inherit its colors.
+ *
  * @public
  */
 export declare const Card: ForwardRefExoticComponent<
@@ -584,6 +600,8 @@ export declare interface CardStyleProps {
 export declare type CardTone = ThemeColorToneKey | 'inherit'
 
 /**
+ * Checkboxes allow the user to select one or more items from a set.
+ *
  * @public
  */
 export declare const Checkbox: ForwardRefExoticComponent<
@@ -616,6 +634,7 @@ export declare const Code: ForwardRefExoticComponent<
  */
 export declare interface CodeProps {
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** Define the language to use for syntax highlighting. */
   language?: string
   size?: number | number[]
   weight?: string
@@ -801,6 +820,8 @@ export declare interface ColorTokens extends Partial<Record<ColorConfigBaseTone,
 export declare type ColorTokenValue = [ColorConfigValue, ColorConfigValue]
 
 /**
+ * The `Container` component wraps content layout in a defined set of widths.
+ *
  * @public
  */
 export declare const Container: ForwardRefExoticComponent<
@@ -839,6 +860,8 @@ export declare type Delay =
     }>
 
 /**
+ * The Dialog component.
+ *
  * @public
  */
 export declare const Dialog: ForwardRefExoticComponent<
@@ -997,6 +1020,8 @@ export declare function _fillCSSObject(
 ): CSSObject
 
 /**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
  * @public
  */
 export declare const Flex: ForwardRefExoticComponent<
@@ -1085,6 +1110,8 @@ export declare function _getResponsiveSpace(
 ): CSSObject[] | null
 
 /**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
  * @public
  */
 export declare const Grid: ForwardRefExoticComponent<
@@ -1148,6 +1175,8 @@ export declare interface GridProps extends Omit<BoxProps, 'display'>, Responsive
 export declare function _hasFocus(element: HTMLElement): boolean
 
 /**
+ * Typographic headings.
+ *
  * @public
  */
 export declare const Heading: ForwardRefExoticComponent<
@@ -1199,6 +1228,8 @@ export declare interface HeadingSkeletonProps extends SkeletonProps {
 export declare function hexToRgb(hex: string): RGB
 
 /**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
  * @public
  */
 export declare const Hotkeys: ForwardRefExoticComponent<
@@ -1231,6 +1262,8 @@ export declare interface HSL {
 export declare function hslToRgb(hsl: HSL): RGB
 
 /**
+ * The `Inline` component is a layout utility for aligning and spacing items horizontally.
+ *
  * @public
  */
 export declare const Inline: ForwardRefExoticComponent<
@@ -1241,6 +1274,7 @@ export declare const Inline: ForwardRefExoticComponent<
  * @public
  */
 export declare interface InlineProps extends Omit<BoxProps, 'display'> {
+  /** The spacing between children. */
   space?: number | number[]
 }
 
@@ -1314,6 +1348,8 @@ export declare function isHTMLTextAreaElement(element: unknown): element is HTML
 export declare function _isScrollable(el: Node): boolean
 
 /**
+ * Used to define some text as keyboard input.
+ *
  * @public
  */
 export declare const KBD: ForwardRefExoticComponent<
@@ -1331,6 +1367,8 @@ export declare interface KBDProps {
 }
 
 /**
+ * Typographic labels.
+ *
  * @public
  */
 export declare const Label: ForwardRefExoticComponent<
@@ -1434,6 +1472,8 @@ export declare interface _MediaStore {
 }
 
 /**
+ * The `Menu` component is a building block for application menus.
+ *
  * @public
  */
 export declare const Menu: ForwardRefExoticComponent<
@@ -1442,6 +1482,8 @@ export declare const Menu: ForwardRefExoticComponent<
 >
 
 /**
+ * The `MenuButton` component follows the WAI-ARIA specification for menu buttons.
+ *
  * @public
  */
 export declare const MenuButton: ForwardRefExoticComponent<
@@ -1918,7 +1960,11 @@ export declare type Placement =
   | 'left-start'
   | 'left-end'
 
-/** @public */
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
 export declare const Popover: MemoExoticComponent<
   ForwardRefExoticComponent<
     Omit<
@@ -1955,6 +2001,7 @@ export declare interface PopoverProps
   overflow?: BoxOverflow
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
   portal?: boolean | string
   preventOverflow?: boolean
   referenceBoundary?: HTMLElement | null
@@ -2022,6 +2069,8 @@ export declare interface PortalProviderProps {
 }
 
 /**
+ * The `Radio` component allows the user to select one option from a set.
+ *
  * @public
  */
 export declare const Radio: ForwardRefExoticComponent<
@@ -2110,6 +2159,7 @@ export declare function responsiveCodeFontStyle(
  * @public
  */
 export declare interface ResponsiveFlexItemProps {
+  /** Sets the flex CSS attribute. The property is responsive. */
   flex?: FlexValue | FlexValue[]
 }
 
@@ -2187,8 +2237,11 @@ export declare function responsiveLabelFont(
  * @public
  */
 export declare interface ResponsiveMarginProps {
+  /** Applies margins to all sides. The property is responsive. */
   margin?: number | number[]
+  /** Applies margins to the left and right sides. The property is responsive. */
   marginX?: number | number[]
+  /** Applies margins to the top and bottom sides. The property is responsive. */
   marginY?: number | number[]
   marginTop?: number | number[]
   marginRight?: number | number[]
@@ -2315,6 +2368,8 @@ declare function screen_2(b: RGB | RGBA, s: RGB | RGBA): RGB
 export {screen_2 as screen}
 
 /**
+ * The `Select` component provides control of options.
+ *
  * @public
  */
 export declare const Select: ForwardRefExoticComponent<
@@ -2356,6 +2411,8 @@ export declare interface SkeletonProps extends ResponsiveRadiusProps, Omit<BoxPr
 }
 
 /**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
  * @public
  */
 export declare const Spinner: ForwardRefExoticComponent<
@@ -2388,6 +2445,8 @@ export declare interface SrOnlyProps {
 }
 
 /**
+ * The `Stack` component is used to place elements on top of each other.
+ *
  * @public
  */
 export declare const Stack: ForwardRefExoticComponent<
@@ -2447,6 +2506,10 @@ export declare interface Styles {
 }
 
 /**
+ * The `Switch` component allows the user to toggle a setting on and off.
+ *
+ * Extends all properties of an `<input type="checkbox" />` element, except type.
+ *
  * @public
  */
 export declare const Switch: ForwardRefExoticComponent<
@@ -2532,6 +2595,8 @@ export declare interface TabProps {
 }
 
 /**
+ * The `Text` component is an agile, themed typographic element.
+ *
  * @public
  */
 declare const Text_2: ForwardRefExoticComponent<
@@ -2546,6 +2611,9 @@ export {Text_2 as Text}
 export declare type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
 
 /**
+ * A multiline text input.
+ *
+
  * @public
  */
 export declare const TextArea: ForwardRefExoticComponent<
@@ -2565,6 +2633,8 @@ export declare interface TextAreaProps extends ResponsiveRadiusProps {
 }
 
 /**
+ * Single line text input.
+ *
  * @public
  */
 export declare const TextInput: ForwardRefExoticComponent<
@@ -2628,6 +2698,7 @@ export declare interface TextProps {
   accent?: boolean
   align?: TextAlign | TextAlign[]
   as?: React.ElementType | keyof JSX.IntrinsicElements
+  /** When `true` the text color will be muted. */
   muted?: boolean
   size?: number | number[]
   /**
@@ -3309,6 +3380,10 @@ export declare interface TMP_Theme {
 }
 
 /**
+ * The `Toast` component gives feedback to users when an action has taken place.
+ *
+ * Toasts can be closed with a close button, or auto-dismiss after a certain timeout.
+ *
  * @public
  */
 export declare function Toast(
@@ -3402,6 +3477,8 @@ export declare type TokenValueNode =
   | TokenBlendModeValueNode
 
 /**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
  * @public
  */
 export declare const Tooltip: ForwardRefExoticComponent<
@@ -3463,6 +3540,7 @@ export declare interface TooltipProps extends Omit<LayerProps, 'as'> {
   fallbackPlacements?: Placement[]
   padding?: number | number[]
   placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
   portal?: boolean | string
   scheme?: ThemeColorSchemeKey
   shadow?: number | number[]

package/dist/index.esm.js

@@ -5439,7 +5439,7 @@ function buttonBaseStyles(_ref24) {
   let {
     $width
   } = _ref24;
-  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    "]))));
+  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: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    "]))));
 }
 const buttonTheme = {
   border: {
@@ -5617,7 +5617,7 @@ function cardBaseStyle(props) {
     theme
   } = props;
   const space = theme.sanity.space;
-  return css(_b$j || (_b$j = __template$v(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
+  return css(_b$j || (_b$j = __template$v(["\n    ", "\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      outline: none;\n      text-decoration: none;\n    }\n\n    /* &:is(pre) */\n    &[data-as='pre'] {\n      font: inherit;\n    }\n  "])), $checkered && css(_a$v || (_a$v = __template$v(["\n      background-size: ", "px ", "px;\n      background-position: 50% 50%;\n      background-image: var(--card-bg-image);\n    "])), space[3], space[3]));
 }
 function cardColorStyle(props) {
   var _a2, _b2;
@@ -7315,7 +7315,7 @@ var __template$j = (cooked, raw) => __freeze$j(__defProp$j(cooked, "raw", {
 }));
 var _a$j, _b$c, _c$7, _d$5;
 function rootStyle() {
-  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
+  return css(_a$j || (_a$j = __template$j(["\n    position: relative;\n    width: -moz-available;\n    width: -webkit-fill-available;\n    width: stretch;\n\n    &:not([hidden]) {\n      display: inline-block;\n    }\n  "])));
 }
 function inputBaseStyle(props) {
   const {
@@ -9497,7 +9497,7 @@ var __template$7 = (cooked, raw) => __freeze$7(__defProp$7(cooked, "raw", {
 }));
 var _a$7, _b$4;
 function selectableBaseStyle() {
-  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
+  return css(_a$7 || (_a$7 = __template$7(["\n    background-color: inherit;\n    color: inherit;\n\n    &[data-as='button'] {\n      -webkit-font-smoothing: inherit;\n      appearance: none;\n      outline: none;\n      font: inherit;\n      text-align: inherit;\n      border: 0;\n      width: -moz-available;\n      width: -webkit-fill-available;\n      width: stretch;\n    }\n\n    /* &:is(a) */\n    &[data-as='a'] {\n      text-decoration: none;\n    }\n  "])));
 }
 function selectableColorStyle(props) {
   var _a2, _b2;