@sanity/ui 3.0.0-static.1 → 3.0.0-static.11

package/dist/_visual-editing.d.mts

@@ -0,0 +1,809 @@
+import {BoxStyleProps} from '@sanity/ui/css'
+import {ButtonStyleProps} from '@sanity/ui/css'
+import {CardStyleProps} from '@sanity/ui/css'
+import type {ComponentProps} from 'react'
+import {DisplayStyleProps} from '@sanity/ui/css'
+import {ElementProps} from '../..'
+import {ElementType} from 'react'
+import {FlexStyleProps} from '@sanity/ui/css'
+import {FontTextSize} from '@sanity/ui/theme'
+import {ForwardedRef} from 'react'
+import {ForwardRefExoticComponent} from 'react'
+import {GapStyleProps} from '@sanity/ui/css'
+import {InputStyleProps} from '@sanity/ui/css'
+import {InsetStyleProps} from '@sanity/ui/css'
+import {MutableRefObject} from 'react'
+import {NamedExoticComponent} from 'react'
+import {PaddingStyleProps} from '@sanity/ui/css'
+import {PolymorphicProps} from '../..'
+import {PositionStyleProps} from '@sanity/ui/css'
+import {Radius} from '@sanity/ui/theme'
+import {RadiusStyleProps} from '@sanity/ui/css'
+import {ReactElement} from 'react'
+import {ReactNode} from 'react'
+import {ReactPortal} from 'react'
+import {RefAttributes} from 'react'
+import {RefCallback} from 'react'
+import {ResponsiveProp} from '@sanity/ui/css'
+import {RootTheme} from '@sanity/ui/theme'
+import {ShadowStyleProps} from '@sanity/ui/css'
+import {Space} from '@sanity/ui/theme'
+import {TextOverflowStyleProps} from '@sanity/ui/css'
+import {TextStyleProps} from '@sanity/ui/css'
+import {Theme_v2} from '@sanity/ui/theme'
+import {ThemeColorButtonModeKey} from '@sanity/ui/theme'
+import {ThemeColorCardToneKey} from '@sanity/ui/theme'
+import {ThemeColorSchemeKey} from '@sanity/ui/theme'
+import {ThemeColorStateToneKey} from '@sanity/ui/theme'
+import {ThemeFontWeightKey} from '@sanity/ui/theme'
+import {Width} from '@sanity/ui/css'
+
+/** @public */
+declare type Assign<T, U> = Omit<T, keyof U> & U
+
+/**
+ * The `Box` component is a basic layout wrapper component which provides utility properties
+ * for flex, margins and padding.
+ *
+ * @public
+ */
+export declare const Box: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof BoxProps> &
+    BoxProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface BoxProps
+  extends BoxStyleProps,
+    GapStyleProps,
+    InsetStyleProps,
+    PositionStyleProps {}
+
+/**
+ * @public
+ */
+export declare const Button: ForwardRefExoticComponent<
+  Omit<ElementProps<'button'> & PolymorphicProps, keyof ButtonProps> &
+    ButtonProps &
+    RefAttributes<HTMLButtonElement>
+>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorButtonModeKey` instead
+ */
+declare type ButtonMode = ThemeColorButtonModeKey
+
+/**
+ * @public
+ */
+export declare interface ButtonProps
+  extends ButtonStyleProps,
+    DisplayStyleProps,
+    FlexStyleProps,
+    GapStyleProps,
+    PaddingStyleProps {
+  'data-ui'?: string
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'href'?: string
+  'mode'?: ButtonMode
+  'icon'?: ElementType | ReactNode
+  'iconRight'?: ElementType | ReactNode
+  /** @beta Do not use in production, as this might change.*/
+  'loading'?: boolean
+  'selected'?: boolean
+  /** @deprecated Use `gap` instead. */
+  'space'?: ResponsiveProp<Space>
+  'textAlign'?: ButtonTextAlign
+  'muted'?: boolean
+  'target'?: string
+  'text'?: ReactNode
+  'textOverflow'?: TextProps['textOverflow']
+  'textWeight'?: TextProps['weight']
+  'tone'?: ButtonTone
+  'type'?: 'button' | 'reset' | 'submit'
+  'width'?: ResponsiveProp<Width>
+}
+
+/**
+ * @public
+ */
+declare type ButtonTextAlign = 'left' | 'right' | 'center'
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
+ */
+declare type ButtonTone = ThemeColorStateToneKey
+
+/**
+ * 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<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof CardProps> &
+    CardProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface CardProps extends BoxProps, CardStyleProps {
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_checkered?: boolean
+  /**
+   * Do not use in production.
+   * @beta
+   */
+  __unstable_focusRing?: boolean
+  disabled?: boolean
+  href?: string
+  pressed?: boolean
+  selected?: boolean
+  target?: string
+}
+
+/**
+ * @public
+ */
+declare type Delay =
+  | number
+  | Partial<{
+      open: number
+      close: number
+    }>
+
+/** @public */
+declare type ElementProps_2<E extends ElementType> = Omit<ComponentProps<E>, 'as' | 'ref'>
+
+/**
+ * The `Flex` component is a wrapper component for flexible elements (`Box`, `Card` and `Flex`).
+ *
+ * @public
+ */
+export declare const Flex: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof FlexProps> &
+    FlexProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface FlexProps extends Omit<BoxProps, 'display'> {
+  htmlFor?: string
+}
+
+/**
+ * The `Grid` component is for building 2-dimensional layers (based on CSS grid).
+ *
+ * @public
+ */
+export declare const Grid: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof GridProps> &
+    GridProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface GridProps extends Omit<BoxProps, 'display'> {}
+
+/**
+ * Represent hotkeys (a keyboard combination) with semantic `<kbd>` elements.
+ *
+ * @public
+ */
+export declare const Hotkeys: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof HotkeysProps> &
+    HotkeysProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface HotkeysProps extends GapStyleProps, RadiusStyleProps {
+  fontSize?: ResponsiveProp<FontTextSize>
+  padding?: ResponsiveProp<Space>
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  keys?: string[]
+}
+
+/**
+ * @public
+ */
+declare interface InlineProps extends Omit<BoxProps, 'align' | 'display' | 'justify'> {
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/**
+ * @internal
+ */
+export declare function isHTMLAnchorElement(element: unknown): element is HTMLAnchorElement
+
+/**
+ * @internal
+ */
+export declare function isHTMLElement(node: unknown): node is HTMLElement
+
+/**
+ * @public
+ */
+declare interface LayerProps extends BoxProps {
+  /** A callback that fires when the layer becomes the top layer when it was not the top layer before. */
+  onActivate?: (props: {activeElement: HTMLElement | null}) => void
+  zOffset?: number | number[]
+}
+
+/**
+ * @public
+ */
+export declare function LayerProvider(props: LayerProviderProps): ReactElement
+
+export declare namespace LayerProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+declare interface LayerProviderProps {
+  children?: ReactNode
+  zOffset?: number | number[]
+}
+
+/**
+ * The `Menu` component is a building block for application menus.
+ *
+ * @public
+ */
+export declare const Menu: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof MenuProps> &
+    MenuProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare const MenuDivider: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, never> &
+    MenuDividerProps &
+    RefAttributes<HTMLHRElement>
+>
+
+/** @public */
+declare interface MenuDividerProps {}
+
+/**
+ * @public
+ */
+export declare function MenuGroup(props: Props<MenuGroupProps, 'div'>): ReactElement
+
+export declare namespace MenuGroup {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface MenuGroupProps extends GapStyleProps {
+  disabled?: boolean
+  fontSize?: ResponsiveProp<FontTextSize>
+  icon?: ElementType | ReactNode
+  menu?: Omit<
+    MenuProps,
+    | 'onClickOutside'
+    | 'onEscape'
+    | 'onItemClick'
+    | 'onKeyDown'
+    | 'onMouseEnter'
+    | 'registerElement'
+    | 'shouldFocus'
+    | 'onBlurCapture'
+  >
+  padding?: ResponsiveProp<Space>
+  popover?: Omit<PopoverProps, 'content' | 'open'>
+  radius?: Radius | Radius[]
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  text: ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export declare const MenuItem: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof MenuItemProps> &
+    MenuItemProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface MenuItemProps extends GapStyleProps, PaddingStyleProps, RadiusStyleProps {
+  disabled?: boolean
+  fontSize?: number | number[]
+  hotkeys?: string[]
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
+  pressed?: boolean
+  selected?: boolean
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  text?: ReactNode
+  tone?: SelectableTone
+}
+
+/**
+ * @public
+ */
+export declare interface MenuProps extends PaddingStyleProps, Pick<GapStyleProps, 'gap'> {
+  /**
+   * @deprecated Use `shouldFocus="first"` instead.
+   */
+  'focusFirst'?: boolean
+  /**
+   * @deprecated Use `shouldFocus="last"` instead.
+   */
+  'focusLast'?: boolean
+  'onClickOutside'?: (event: MouseEvent) => void
+  'onEscape'?: () => void
+  'onItemClick'?: () => void
+  'onItemSelect'?: (index: number) => void
+  'originElement'?: HTMLElement | null
+  'registerElement'?: (el: HTMLElement) => () => void
+  'shouldFocus'?: 'first' | 'last' | null
+  /** @deprecated Use `gap` property instead. */
+  'space'?: ResponsiveProp<Space>
+  'aria-labelledby'?: string
+}
+
+/**
+ * Placement of floating UI elements.
+ *
+ * @public
+ */
+declare type Placement =
+  | 'top'
+  | 'top-start'
+  | 'top-end'
+  | 'right'
+  | 'right-start'
+  | 'right-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'bottom-end'
+  | 'left'
+  | 'left-start'
+  | 'left-end'
+
+declare interface PolymorphicProps_2 {
+  as?: ElementType
+}
+
+/**
+ * The `Popover` component is used to display some content on top of another.
+ *
+ * @public
+ */
+export declare const Popover: NamedExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof PopoverProps> &
+    PopoverProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @beta
+ */
+export declare type PopoverMargins = [number, number, number, number]
+
+/** @public */
+export declare interface PopoverProps extends CardProps, LayerProps {
+  /** @beta */
+  __unstable_margins?: PopoverMargins
+  /**
+   * Whether the popover should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
+  arrow?: boolean
+  /** @deprecated Use `floatingBoundary` and/or `referenceBoundary` instead */
+  boundaryElement?: HTMLElement | null
+  children?: ReactElement<{
+    ref: ForwardedRef<HTMLElement>
+  }>
+  /**
+   * When `true`, prevent overflow within the current boundary:
+   * - by flipping on its side axis
+   * - by resizing
+   *
+   * Note that:
+   * - setting `preventOverflow` to `true` also prevents overflow on its side axis
+   * - setting `matchReferenceWidth` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
+  constrainSize?: boolean
+  content?: ReactNode
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  floatingBoundary?: HTMLElement | null
+  /**
+   * When `true`, set the maximum width to match the reference element, and also prevent overflow within
+   * the current boundary by resizing.
+   *
+   * Note that setting `constrainSize` to `true` also causes the popover to resize
+   *
+   * @defaultValue false
+   */
+  matchReferenceWidth?: boolean
+  /**
+   * When true, blocks all pointer interaction with elements beneath the popover until closed.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  modal?: boolean
+  open?: boolean
+  placement?: Placement
+  /** Whether or not to render the popover in a portal element. */
+  portal?: boolean | string
+  preventOverflow?: boolean
+  referenceBoundary?: HTMLElement | null
+  /**
+   * When defined, the popover will be positioned relative to this element.
+   * The children of the popover won't be rendered.
+   */
+  referenceElement?: HTMLElement | null
+  /** @beta */
+  updateRef?:
+    | MutableRefObject<PopoverUpdateCallback | undefined>
+    | RefCallback<PopoverUpdateCallback | undefined>
+}
+
+/** @beta */
+declare type PopoverUpdateCallback = () => void
+
+/**
+ * @public
+ */
+export declare function Portal(props: PortalProps): ReactPortal | null
+
+export declare namespace Portal {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface PortalProps {
+  children: ReactNode
+  /**
+   * @beta This API might change. DO NOT USE IN PRODUCTION.
+   */
+  __unstable_name?: string
+}
+
+/**
+ * @public
+ */
+export declare function PortalProvider(props: PortalProviderProps): ReactElement
+
+export declare namespace PortalProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface PortalProviderProps {
+  /**
+   * @deprecated Use `<BoundaryElementProvider element={...} />` instead
+   */
+  boundaryElement?: HTMLElement | null
+  children: ReactNode
+  element?: HTMLElement | null
+  /**
+   * @beta
+   */
+  __unstable_elements?: Record<string, HTMLElement | null | undefined>
+}
+
+/** @public */
+declare type Props<P extends {} = {}, E extends ElementType = ElementType> = Assign<
+  ElementProps_2<E> & PolymorphicProps_2,
+  P
+>
+
+/**
+ * @public
+ * @deprecated Use `ThemeColorStateToneKey` instead
+ */
+declare type SelectableTone = ThemeColorStateToneKey
+
+/**
+ * Indicate that something is loading for an indeterminate amount of time.
+ *
+ * @public
+ */
+export declare const Spinner: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof SpinnerProps> &
+    SpinnerProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface SpinnerProps {
+  muted?: boolean
+  size?: ResponsiveProp<FontTextSize>
+}
+
+/**
+ * The `Stack` component is used to place elements on top of each other.
+ *
+ * @public
+ */
+export declare const Stack: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof StackProps> &
+    StackProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface StackProps
+  extends Omit<
+    BoxProps,
+    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+  > {
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+}
+
+/**
+ * @public
+ * @deprecated Use `buildTheme` from `@sanity/ui/theme` instead.
+ */
+export declare const studioTheme: RootTheme
+
+/**
+ * @public
+ */
+export declare const Tab: ForwardRefExoticComponent<
+  Omit<ElementProps<'button'> & PolymorphicProps, keyof TabProps> &
+    TabProps &
+    RefAttributes<HTMLButtonElement>
+>
+
+/**
+ * @public
+ */
+export declare const TabList: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof TabListProps> &
+    TabListProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+declare type TabListChild = ReactElement<Props<TabProps, 'button'>> | null | undefined | false
+
+/**
+ * @public
+ */
+export declare interface TabListProps extends Omit<InlineProps, 'as' | 'height'> {
+  children: TabListChild[]
+}
+
+/**
+ * @public
+ */
+export declare interface TabProps {
+  /**
+   * The `id` of the corresponding `TabPanel` component.
+   */
+  'aria-controls': string
+  'id': string
+  'icon'?: ElementType | ReactNode
+  'focused'?: boolean
+  'fontSize'?: ResponsiveProp<FontTextSize>
+  'label'?: ReactNode
+  'padding'?: ResponsiveProp<Space>
+  'selected'?: boolean
+  'tone'?: ButtonTone
+}
+
+/**
+ * The `Text` component is an agile, themed typographic element.
+ *
+ * @public
+ */
+declare const Text_2: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof TextProps> &
+    TextProps &
+    RefAttributes<HTMLDivElement>
+>
+export {Text_2 as Text}
+
+/**
+ * Single line text input.
+ *
+ * @public
+ */
+export declare const TextInput: ForwardRefExoticComponent<
+  Omit<ElementProps<'input'> & PolymorphicProps, keyof TextInputProps> &
+    TextInputProps &
+    RefAttributes<HTMLInputElement>
+>
+
+/**
+ * @public
+ */
+declare type TextInputClearButtonProps = Omit<
+  Props<ButtonProps, 'button'>,
+  'as' | 'onClick' | 'onMouseDown'
+>
+
+/**
+ * @public
+ */
+export declare interface TextInputProps extends InputStyleProps {
+  /**
+   * @beta
+   */
+  __unstable_disableFocusRing?: boolean
+  /**
+   * @beta
+   */
+  clearButton?: boolean | TextInputClearButtonProps
+  customValidity?: string
+  icon?: ElementType | ReactNode
+  iconRight?: ElementType | ReactNode
+  /**
+   * @beta
+   */
+  onClear?: () => void
+  prefix?: ReactNode
+  /** @deprecated Use `gap` instead. */
+  space?: ResponsiveProp<Space>
+  suffix?: ReactNode
+  type?: TextInputType
+  weight?: ThemeFontWeightKey
+}
+
+/**
+ * @public
+ */
+declare type TextInputType =
+  | 'search'
+  | 'date'
+  | 'datetime-local'
+  | 'email'
+  | 'url'
+  | 'month'
+  | 'number'
+  | 'password'
+  | 'tel'
+  | 'time'
+  | 'text'
+  | 'week'
+  | 'color'
+
+/**
+ * @public
+ */
+export declare interface TextProps extends TextStyleProps, TextOverflowStyleProps {
+  htmlFor?: string
+}
+
+/**
+ * @public
+ */
+export declare function ThemeProvider(props: ThemeProviderProps): ReactElement
+
+export declare namespace ThemeProvider {
+  var displayName: string
+}
+
+/**
+ * @public
+ */
+export declare interface ThemeProviderProps {
+  children?: ReactNode
+  scheme?: ThemeColorSchemeKey
+  theme?: RootTheme
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * Tooltips display information when hovering, focusing or tapping.
+ *
+ * @public
+ */
+export declare const Tooltip: ForwardRefExoticComponent<
+  Omit<ElementProps<'div'> & PolymorphicProps, keyof TooltipProps> &
+    TooltipProps &
+    RefAttributes<HTMLDivElement>
+>
+
+/**
+ * @public
+ */
+export declare interface TooltipProps
+  extends Omit<LayerProps, 'as'>,
+    RadiusStyleProps,
+    ShadowStyleProps {
+  /** @deprecated Use `fallbackPlacements` instead. */
+  allowedAutoPlacements?: Placement[]
+  /**
+   * Whether the tooltip should animate in and out.
+   *
+   * @beta
+   * @defaultValue false
+   */
+  animate?: boolean
+  arrow?: boolean
+  boundaryElement?: HTMLElement | null
+  children?: ReactElement<Props>
+  content?: ReactNode
+  /**
+   * Adds a delay to open or close the tooltip.
+   *
+   * If only a `number` is passed, it will be used for both opening and closing.
+   *
+   * If an object `{open: number; close:number}` is passed, it can be used to set different delays for each action.
+   *
+   * @public
+   * @defaultValue 0
+   */
+  delay?: Delay
+  disabled?: boolean
+  fallbackPlacements?: Placement[]
+  placement?: Placement
+  /** Whether or not to render the tooltip in a portal element. */
+  portal?: boolean | string
+  scheme?: ThemeColorSchemeKey
+  tone?: ThemeColorCardToneKey
+}
+
+/**
+ * Returns true if a dark color scheme is preferred, false if a light color scheme is preferred or the preference is not known.
+ *
+ * @param getServerSnapshot - Only called during server-side rendering, and hydration if using hydrateRoot. Since the server environment doesn't have access to the DOM, we can't determine the current value of the media query and we assume `(prefers-color-scheme: light)` since it's the most common scheme (https://dev/reference/react/useSyncExternalStore#adding-support-for-server-rendering)
+ *
+ * If you persist the detected preference in a cookie or a header then you may implement your own server snapshot to read it.
+ * Chrome supports reading the `prefers-color-scheme` media query from a header if the server response: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Sec-CH-Prefers-Color-Scheme
+ * @example https://gist.github.com/stipsan/13c0cccf8dfc34f4b44bb1b984baf7df
+ *
+ * @public
+ */
+export declare function usePrefersDark(getServerSnapshot?: () => boolean): boolean
+
+/**
+ * @public
+ */
+export declare function useTheme_v2(): Theme_v2
+
+export {}