@sanity-labs/ui-poc 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/index.d.ts

@@ -1,5 +1,8 @@
+import type {ComponentProps} from 'react'
+import {ComponentPropsWithRef} from 'react'
+import {ElementType} from 'react'
 import {JSX} from 'react/jsx-runtime'
-import {default as React_2} from 'react'
+import type {SVGProps} from 'react'
 
 declare const ALIGN_ITEMS: readonly ['baseline', 'center', 'flex-end', 'flex-start', 'stretch']
 
@@ -21,10 +24,10 @@ declare type BorderProps = {
 }
 
 /** @public */
-export declare function Box<T extends React_2.ElementType = 'div'>({
+export declare function Box<T extends ElementType = 'div'>({
   display,
   ...props
-}: BoxProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
+}: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>): JSX.Element
 
 /** @public */
 declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
@@ -35,11 +38,11 @@ declare interface BoxProps<T extends React.ElementType> extends LayoutProps {
 }
 
 /** @public */
-export declare function Card<T extends React_2.ElementType = 'div'>({
+export declare function Card<T extends ElementType = 'div'>({
   density,
   tone,
   ...props
-}: CardProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
+}: CardProps<T> & Omit<ComponentPropsWithRef<T>, keyof CardProps<T>>): JSX.Element
 
 /** @public */
 declare interface CardProps<T extends React.ElementType> extends MarginProps, ToneProps {
@@ -49,6 +52,17 @@ declare interface CardProps<T extends React.ElementType> extends MarginProps, To
   density?: Responsive<Density>
 }
 
+/** @beta */
+export declare function Checkbox(props: CheckboxProps): JSX.Element
+
+/** @beta */
+declare interface CheckboxProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
 /** @public */
 export declare function Code<T extends React.ElementType = 'pre'>({
   size,
@@ -75,10 +89,10 @@ declare type CodeSize = (typeof CODE_SIZE)[number]
 declare type CodeTag = (typeof CODE_TAG)[number]
 
 /** @public */
-export declare function Container<T extends React_2.ElementType = 'div'>({
+export declare function Container<T extends ElementType = 'div'>({
   marginX,
   ...props
-}: ContainerProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
+}: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>): JSX.Element
 
 declare const CONTAINER_SIZE: readonly [0, 1, 2, 3, 4, 5]
 
@@ -115,10 +129,10 @@ export declare function Divider(props: DividerProps): JSX.Element
 declare interface DividerProps extends React.ComponentProps<'hr'>, MarginProps {}
 
 /** @public */
-export declare function Flex<T extends React_2.ElementType = 'div'>({
+export declare function Flex<T extends ElementType = 'div'>({
   display,
   ...props
-}: FlexProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
+}: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>): JSX.Element
 
 declare const FLEX_DIRECTION: readonly ['row', 'row-reverse', 'column', 'column-reverse']
 
@@ -163,18 +177,18 @@ declare type FontWeight = (typeof FONT_WEIGHT)[number]
 
 declare type GapProps = {
   /** CSS **gap** property */
-  gap?: Responsive<Space>
+  gap?: Responsive<SpaceInherit>
   /** CSS **row-gap** property */
-  rowGap?: Responsive<Space>
+  rowGap?: Responsive<SpaceInherit>
   /** CSS **column-gap** property */
-  columnGap?: Responsive<Space>
+  columnGap?: Responsive<SpaceInherit>
 }
 
 /** @public */
-export declare function Grid<T extends React_2.ElementType = 'div'>({
+export declare function Grid<T extends ElementType = 'div'>({
   display,
   ...props
-}: GridProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
+}: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>): JSX.Element
 
 declare const GRID_AUTO_FLOW: readonly ['row', 'column', 'row dense', 'column dense', 'dense']
 
@@ -218,11 +232,11 @@ declare interface GridProps<T extends React.ElementType>
 }
 
 /** @public */
-export declare function Heading<T extends React_2.ElementType = 'h2'>({
+export declare function Heading<T extends ElementType = 'h2'>({
   size,
   weight,
   ...props
-}: HeadingProps & Omit<React_2.ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
+}: HeadingProps & Omit<ComponentPropsWithRef<T>, keyof HeadingProps>): JSX.Element
 
 declare const HEADING_SIZE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
@@ -249,15 +263,26 @@ declare type HeightProps = {
   maxHeight?: Responsive<string>
 }
 
+/** @public */
+export declare function HStack<T extends ElementType = 'div'>(
+  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface HStackProps<T extends React.ElementType> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
+}
+
 /** @public */
 export declare function Icon({icon: Component, size, ...props}: IconProps): JSX.Element
 
 declare const ICON_SIZE: readonly [0, 1, 2, 3, 4]
 
 /** @public */
-declare interface IconProps extends React_2.ComponentProps<'svg'>, MarginProps, ToneProps {
+declare interface IconProps extends ComponentProps<'svg'>, MarginProps, ToneProps {
   /** Icon to render */
-  icon: React_2.ComponentType<React_2.SVGProps<SVGSVGElement>>
+  icon: React.ComponentType<SVGProps<SVGSVGElement>>
   /** CSS **font-size** property */
   size?: Responsive<IconSize>
   /** CSS **color** property */
@@ -266,6 +291,21 @@ declare interface IconProps extends React_2.ComponentProps<'svg'>, MarginProps,
 
 declare type IconSize = (typeof ICON_SIZE)[number]
 
+/** @deprecated Use HStack component instead */
+/** @public */
+export declare function Inline<T extends ElementType = 'div'>(
+  props: InlineProps<T> & Omit<ComponentPropsWithRef<T>, keyof InlineProps<T>>,
+): JSX.Element
+
+/** @deprecated Use HStack component instead */
+/** @public */
+declare interface InlineProps<T extends React.ElementType> extends PaddingProps {
+  /** Element to render */
+  as?: T
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>
+}
+
 declare const JUSTIFY_CONTENT: readonly [
   'flex-start',
   'flex-end',
@@ -277,6 +317,15 @@ declare const JUSTIFY_CONTENT: readonly [
 
 declare type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
 
+/** @beta */
+export declare function Label(props: LabelProps): JSX.Element
+
+/** @beta */
+declare interface LabelProps extends React.ComponentProps<'label'>, MarginProps {
+  /** Element to render */
+  disabled?: boolean
+}
+
 declare interface LayoutProps
   extends
     ToneProps,
@@ -292,21 +341,36 @@ declare interface LayoutProps
     ZIndexProps,
     ShadowProps {}
 
+/** @beta */
+export declare function Link({underlined, ...props}: LinkProps): JSX.Element
+
+/** @beta */
+declare interface LinkProps extends React.ComponentProps<'a'> {
+  /** If true, sets `target="_blank"` and `rel="noopener noreferrer"` */
+  openInNewTab?: boolean
+  /**
+   * If true, sets `text-decoration: underline`
+   *
+   * @defaultValue true
+   */
+  underlined?: boolean
+}
+
 declare type MarginProps = {
   /** CSS **margin** property */
-  margin?: Responsive<SpaceAuto>
+  margin?: Responsive<SpaceAutoNegative>
   /** CSS **margin-left** and **margin-right** properties */
-  marginX?: Responsive<SpaceAuto>
+  marginX?: Responsive<SpaceAutoNegative>
   /** CSS **margin-top** and **margin-bottom** properties */
-  marginY?: Responsive<SpaceAuto>
+  marginY?: Responsive<SpaceAutoNegative>
   /** CSS **margin-top** property */
-  marginTop?: Responsive<SpaceAuto>
+  marginTop?: Responsive<SpaceAutoNegative>
   /** CSS **margin-right** property */
-  marginRight?: Responsive<SpaceAuto>
+  marginRight?: Responsive<SpaceAutoNegative>
   /** CSS **margin-bottom** property */
-  marginBottom?: Responsive<SpaceAuto>
+  marginBottom?: Responsive<SpaceAutoNegative>
   /** CSS **margin-left** property */
-  marginLeft?: Responsive<SpaceAuto>
+  marginLeft?: Responsive<SpaceAutoNegative>
 }
 
 declare const OVERFLOW: readonly ['visible', 'hidden', 'auto', 'scroll', 'clip']
@@ -358,6 +422,15 @@ declare type PositionProps = {
   left?: Responsive<SpaceAuto>
 }
 
+/** @beta */
+export declare function Radio(props: RadioProps): JSX.Element
+
+/** @beta */
+declare interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+}
+
 declare const RADIUS: readonly [0, 1, 2, 3, 4, 5, 6, 'full']
 
 declare type Radius = (typeof RADIUS)[number]
@@ -389,19 +462,76 @@ declare type ShadowProps = {
   shadow?: string
 }
 
+/** @beta */
+export declare function SkipToContent(props: SkipToContentProps): JSX.Element
+
+/** @beta */
+declare interface SkipToContentProps extends React.ComponentProps<'a'> {
+  /**
+   * Anchor hash. The target element should be focusable or have `tabindex="-1"` applied.
+   */
+  hash: string
+  /** Use href instead */
+  href?: never
+  /** Visible/announced label */
+  label: string
+  /** Use label instead */
+  children?: never
+}
+
 declare const SPACE: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 
 declare type Space = (typeof SPACE)[number]
 
 declare const SPACE_AUTO: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'auto']
 
+declare const SPACE_AUTO_NEGATIVE: readonly [
+  -9,
+  -8,
+  -7,
+  -6,
+  -5,
+  -4,
+  -3,
+  -2,
+  -1,
+  0,
+  1,
+  2,
+  3,
+  4,
+  5,
+  6,
+  7,
+  8,
+  9,
+  'auto',
+]
+
+declare const SPACE_INHERIT: readonly [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'inherit']
+
 declare type SpaceAuto = (typeof SPACE_AUTO)[number]
 
+declare type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number]
+
+declare type SpaceInherit = (typeof SPACE_INHERIT)[number]
+
+/** @beta */
+export declare function Switch(props: SwitchProps): JSX.Element
+
+/** @beta */
+declare interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
+  /** Input label */
+  label: React.ReactNode
+  /** Indeterminate state */
+  indeterminate?: boolean
+}
+
 /** @public */
-declare function Text_2<T extends React_2.ElementType = 'span'>({
+declare function Text_2<T extends ElementType = 'span'>({
   size,
   ...props
-}: TextProps<T> & Omit<React_2.ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
+}: TextProps<T> & Omit<ComponentPropsWithRef<T>, keyof TextProps<T>>): JSX.Element
 export {Text_2 as Text}
 
 declare const TEXT_ALIGN: readonly ['left', 'center', 'right', 'justify']
@@ -420,15 +550,7 @@ declare interface TextProps<T extends React.ElementType> extends TypographyProps
 
 declare type TextSize = (typeof TEXT_SIZE)[number]
 
-declare const TONE: readonly [
-  'none',
-  'neutral',
-  'primary',
-  'positive',
-  'suggest',
-  'caution',
-  'critical',
-]
+declare const TONE: readonly ['neutral', 'positive', 'suggest', 'caution', 'critical']
 
 declare type Tone = (typeof TONE)[number]
 
@@ -450,6 +572,30 @@ declare interface TypographyProps extends MarginProps, ToneProps {
   weight?: FontWeight
 }
 
+/** @public */
+export declare function VisuallyHidden<T extends ElementType = 'span'>(
+  props: VisuallyHiddenProps<T> & Omit<ComponentPropsWithRef<T>, keyof VisuallyHiddenProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface VisuallyHiddenProps<T extends React.ElementType> {
+  /** Element to render */
+  as?: T
+  /** If true, element is visible on :focus-visible */
+  visibleOnFocus?: boolean
+}
+
+/** @public */
+export declare function VStack<T extends ElementType = 'div'>(
+  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
+): JSX.Element
+
+/** @public */
+declare interface VStackProps<T extends React.ElementType> extends Pick<GapProps, 'gap'> {
+  /** Element to render */
+  as?: T
+}
+
 declare type WidthProps = {
   /** CSS **width** property */
   width?: Responsive<string>