@sanity/ui 5.0.0-alpha.6 → 5.0.0-alpha.8

package/src/components/list/list.props.ts

@@ -11,7 +11,9 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @beta */
 export interface ListProps<T extends ListTag = 'ul'> extends Pick<GapProps, 'gap'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
 }
 
@@ -24,11 +26,17 @@ export const listProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListItemProps extends React.ComponentProps<'li'> {
-  /** Composite prop for setting padding and gap */
+  /**
+   * Sets horizontal padding, gap, and minimum row height together.
+   */
   density?: Responsive<Density>
-  /** Starting slot */
+  /**
+   * Slot at the left edge of the row.
+   */
   start?: React.ReactNode
-  /** Ending slot */
+  /**
+   * Slot at the right edge of the row.
+   */
   end?: React.ReactNode
 }
 
@@ -73,9 +81,13 @@ export const listItemProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListButtonItemProps<T extends React.ElementType = 'button'> extends ListItemProps {
-  /** Element to render */
+  /**
+   * Element or component to render for the press target.
+   */
   as?: InteractiveAs<T>
-  /** Selected state */
+  /**
+   * Marks the row as the current selection.
+   */
   selected?: boolean
 }
 
@@ -91,11 +103,17 @@ export const listButtonItemProps: Record<string, PropDef> = {
 
 /** @beta */
 export interface ListItemTextProps<T extends React.ElementType = 'div'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** Title text */
+  /**
+   * Main label.
+   */
   title?: React.ReactNode
-  /** Subtitle text */
+  /**
+   * Text below the title.
+   */
   subtitle?: React.ReactNode
 }
 

package/src/components/popover/popover.props.ts

@@ -4,13 +4,23 @@ import {type PropDef} from '../../types/PropDef'
 /** @beta */
 export interface PopoverProps
   extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
-  /** Anchor name for positioning */
+  /**
+   * Shared anchor identifier.
+   * @remarks Set the same value on a Tooltip and a Popover to point both at one trigger.
+   */
   anchorName?: React.ReactNode
-  /** Focusable trigger element */
+  /**
+   * The trigger element.
+   * @remarks Popover clones it and attaches the `popovertarget` attribute that opens the floating layer.
+   */
   children: React.ReactElement<Record<string, unknown>>
-  /** Popover content */
+  /**
+   * The floating content.
+   */
   content?: React.ReactNode
-  /** Render tooltip in portal */
+  /**
+   * Renders the content into `document.body` through a React portal instead of inline.
+   */
   portal?: boolean
 }
 

package/src/components/press-area/pressArea.props.ts

@@ -3,7 +3,9 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface PressAreaProps<T extends React.ElementType = 'button'> {
-  /** Element to render */
+  /**
+   * Element or component to render.
+   */
   as?: InteractiveAs<T>
 }
 

package/src/components/radio/radio.props.ts

@@ -3,9 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface RadioProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the radio mark.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean
-  /** Input label */
+  /**
+   * Visible label next to the radio.
+   */
   label: React.ReactNode
 }
 

package/src/components/skip-to-content/skipToContent.props.ts

@@ -3,12 +3,18 @@ import {type PropDef} from '../../types/PropDef'
 /** @beta */
 export interface SkipToContentProps extends React.ComponentProps<'a'> {
   /**
-   * Anchor href. The target element should be focusable or have `tabindex="-1"`.
+   * Same-page fragment to jump to.
+   * @remarks Note: The hash character # is required for proper linking.
    */
   href: string
-  /** Visible/announced label */
+  /**
+   * Visible and announced text.
+   */
   label: string
-  /** Use label instead */
+  /**
+   * Not accepted.
+   * @remarks Pass text via `label`.
+   */
   children?: never
 }
 

package/src/components/spinner/Spinner.tsx

@@ -1,4 +1,4 @@
-import {SpinnerIcon} from '@sanity/icons'
+import {SpinnerIcon} from '@sanity/icons/Spinner'
 import clsx from 'clsx'
 
 import {getProps} from '../../utils/getProps'

package/src/components/spinner/spinner.props.ts

@@ -4,6 +4,9 @@ import type {Responsive} from '../../types/Responsive'
 
 /** @public */
 export interface SpinnerProps extends React.ComponentProps<'svg'> {
+  /**
+   * Size of the spinner icon.
+   */
   size?: Responsive<IconSize>
 }
 

package/src/components/switch/switch.props.ts

@@ -3,9 +3,14 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @beta */
 export interface SwitchProps extends React.ComponentProps<'input'>, MarginProps {
-  /** Error state */
+  /**
+   * Applies error styling to the switch track.
+   * @remarks Use when form validation fails. Pair with a visible error message. The prop is visual only.
+   */
   error?: boolean
-  /** Input label */
+  /**
+   * Visible label next to the switch.
+   */
   label: React.ReactNode
 }
 

package/src/components/text/text.props.ts

@@ -5,9 +5,13 @@ import {TEXT_SIZE, type TextSize} from '../../types/Text'
 
 /** @public */
 export interface TextProps<T extends React.ElementType = 'span'> extends TypographyProps {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** CSS **font-size** property */
+  /**
+   * Sets font size.
+   */
   size?: Responsive<TextSize>
 }
 

package/src/components/tooltip/tooltip.props.ts

@@ -4,13 +4,21 @@ import {type PropDef} from '../../types/PropDef'
 /** @beta */
 export interface TooltipProps
   extends Omit<React.ComponentProps<'div'>, 'children' | 'content'>, PlacementProps {
-  /** Anchor name for positioning */
+  /**
+   * Shared anchor identifier.
+   */
   anchorName?: React.ReactNode
-  /** Focusable trigger element */
+  /**
+   * The trigger element.
+   */
   children: React.ReactElement<Record<string, unknown>>
-  /** Tooltip content */
+  /**
+   * The tooltip label.
+   */
   content?: React.ReactNode
-  /** Render tooltip in portal */
+  /**
+   * Renders the label into `document.body` through a React portal instead of inline.
+   */
   portal?: boolean
 }
 

package/src/components/tooltip-group/tooltipGroup.props.ts

@@ -2,7 +2,9 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface TooltipGroupProps<T extends React.ElementType = 'div'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
 }
 

package/src/components/v-stack/vStack.props.ts

@@ -3,7 +3,9 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
-  /** Element to render */
+  /**
+   * HTML element or component to render.
+   */
   as?: T
 }
 

package/src/components/visually-hidden/visuallyHidden.props.ts

@@ -2,9 +2,13 @@ import {type PropDef} from '../../types/PropDef'
 
 /** @public */
 export interface VisuallyHiddenProps<T extends React.ElementType = 'span'> {
-  /** Element to render */
+  /**
+   * HTML element to render.
+   */
   as?: T
-  /** If true, element is visible on :focus-visible */
+  /**
+   * If true, the element becomes visible on `:focus-visible`.
+   */
   visibleOnFocus?: boolean
 }
 

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/card/Card'
 export * from './components/checkbox/Checkbox'
 export * from './components/code/Code'
 export * from './components/container/Container'
+export * from './components/dialog/Dialog'
 export * from './components/divider/Divider'
 export * from './components/eyebrow/Eyebrow'
 export * from './components/flex/Flex'
@@ -18,7 +19,6 @@ export * from './components/inline/Inline'
 export * from './components/label/Label'
 export * from './components/link/Link'
 export * from './components/list/List'
-export * from './components/modal/Modal'
 export * from './components/popover/Popover'
 export * from './components/press-area/PressArea'
 export * from './components/radio/Radio'

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha6'
-export const HASH = '71d7e5'
+export const VERSION = '500alpha8'
+export const HASH = 'ff7a34'

package/src/components/modal/modal.props.ts

@@ -1,29 +0,0 @@
-import {CONTAINER_SIZE, type ContainerSize} from '../../types/Container'
-import {type PropDef} from '../../types/PropDef'
-import type {Responsive} from '../../types/Responsive'
-
-/** @beta */
-export interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
-  /** Text to be displayed as the modal's heading; optional but recommended for optimal accessibility and presentation */
-  header?: string
-  /** Used to set the value of open to false. Fires whenever the modal is closed, either programmatically or by the user (via Esc key, clicking background, clicking the modal's close button, or any other means.)  */
-  onClose: React.ReactEventHandler<HTMLDialogElement>
-  /** Whether the modal is open; defaults to false. */
-  open?: boolean
-  /** Max width of the modal */
-  size?: Responsive<ContainerSize>
-}
-
-export const modalProps: Record<string, PropDef> = {
-  header: {
-    type: 'string',
-  },
-  open: {
-    type: 'boolean',
-  },
-  size: {
-    type: 'union',
-    className: 'container',
-    values: CONTAINER_SIZE,
-  },
-}