@sanity/ui 5.0.0-alpha.10 → 5.0.0-alpha.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.11",
   "description": "Sanity UI Library",
   "keywords": [
     "components",
@@ -48,7 +48,7 @@
     }
   },
   "dependencies": {
-    "@sanity-labs/design-tokens": "0.0.2-alpha.4",
+    "@sanity-labs/design-tokens": "0.0.2-alpha.5",
     "@sanity/icons": "^5.2.1",
     "clsx": "^2.1.1",
     "comment-json": "^5.0.0",
@@ -58,24 +58,25 @@
   },
   "devDependencies": {
     "@sanity/browserslist-config": "^1.0.5",
-    "@sanity/pkg-utils": "^10.8.2",
     "@sanity/tsconfig": "^1.0.0",
+    "@sanity/tsdown-config": "^0.28.0",
     "@types/node": "^25.5.2",
     "@types/postcss-import": "^14.0.3",
     "@types/postcss-prefix-selector": "^1.16.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "autoprefixer": "^10.4.27",
-    "babel-plugin-react-compiler": "^1.0.0",
     "concurrently": "^9.2.1",
     "cssnano": "^8.0.0",
+    "oxc-transform-react": "^0.149.0",
     "postcss": "^8.5.14",
     "postcss-cli": "^11.0.1",
     "postcss-import": "^16.1.1",
     "postcss-prefix-selector": "^2.1.1",
     "postcss-selector-parser": "^7.1.1",
     "rimraf": "^6.1.3",
-    "typescript": "^5.9.3",
+    "tsdown": "^0.23.0",
+    "typescript": "~6.0.2",
     "vitest": "^4.1.1"
   },
   "peerDependencies": {
@@ -89,11 +90,11 @@
     "build": "pnpm run sync-version && pnpm run clean && pnpm run build:css && pnpm run build:js && pnpm run build:cli",
     "build:cli": "tsc -p tsconfig.cli.json",
     "build:css": "NODE_ENV=production postcss src/index.css -o dist/styles.css",
-    "build:js": "pkg build --strict --check",
+    "build:js": "tsdown",
     "clean": "rimraf dist",
     "dev": "concurrently -n css,js \"pnpm run dev:css\" \"pnpm run dev:js\"",
     "dev:css": "postcss src/index.css -o dist/styles.css --watch",
-    "dev:js": "pkg watch",
+    "dev:js": "tsdown --watch",
     "sync-version": "node scripts/write-version.js",
     "test": "vitest run",
     "ts:check": "tsc --noEmit"

package/src/components/box/Box.tsx

@@ -10,14 +10,9 @@ const boxClassName = suffixClassName('sui-Box')
 /** @public */
 export function Box<T extends ElementType = 'div'>({
   display = 'block',
-  minHeight = '0',
-  minWidth = '0',
   ...props
 }: BoxProps<T> & Omit<ComponentPropsWithRef<T>, keyof BoxProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps(
-    {display, minHeight, minWidth, ...props},
-    boxProps,
-  )
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, boxProps)
   const Component = as || 'div'
 
   return (

package/src/components/box/box.css

@@ -1,3 +1,8 @@
+.sui-Box {
+  min-width: 0;
+  min-height: 0;
+}
+
 .sui-Box[class*='sui-tone'] {
   --box-background: var(--background-low);
   background-color: var(--box-background);

package/src/components/checkbox/Checkbox.tsx

@@ -26,7 +26,7 @@ export function Checkbox(props: CheckboxProps) {
     if (inputRef.current) {
       inputRef.current.indeterminate = indeterminate
     }
-  }, [indeterminate])
+  }, [indeterminate, inputRef])
 
   return (
     <Label

package/src/components/container/Container.tsx

@@ -10,9 +10,13 @@ const containerClassName = suffixClassName('sui-Container')
 /** @public */
 export function Container<T extends ElementType = 'div'>({
   marginX = 'auto',
+  size = 2,
   ...props
 }: ContainerProps<T> & Omit<ComponentPropsWithRef<T>, keyof ContainerProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps({marginX, ...props}, containerProps)
+  const {as, children, className, style, ...rest} = getProps(
+    {marginX, size, ...props},
+    containerProps,
+  )
   const Component = as || 'div'
 
   return (

package/src/components/container/container.css

@@ -1,3 +1,7 @@
+.sui-Container {
+  width: 100%;
+}
+
 .sui-Container[class*='sui-tone'] {
   --container-background: var(--background-low);
   background-color: var(--container-background);

package/src/components/flex/Flex.tsx

@@ -10,14 +10,9 @@ const flexClassName = suffixClassName('sui-Flex')
 /** @public */
 export function Flex<T extends ElementType = 'div'>({
   display = 'flex',
-  minHeight = '0',
-  minWidth = '0',
   ...props
 }: FlexProps<T> & Omit<ComponentPropsWithRef<T>, keyof FlexProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps(
-    {display, minHeight, minWidth, ...props},
-    flexProps,
-  )
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, flexProps)
   const Component = as || 'div'
 
   return (

package/src/components/flex/flex.css

@@ -1,3 +1,8 @@
+.sui-Flex {
+  min-width: 0;
+  min-height: 0;
+}
+
 .sui-Flex[class*='sui-tone'] {
   --flex-background: var(--background-low);
   background-color: var(--flex-background);

package/src/components/grid/Grid.tsx

@@ -10,14 +10,9 @@ const gridClassName = suffixClassName('sui-Grid')
 /** @public */
 export function Grid<T extends ElementType = 'div'>({
   display = 'grid',
-  minHeight = '0',
-  minWidth = '0',
   ...props
 }: GridProps<T> & Omit<ComponentPropsWithRef<T>, keyof GridProps<T>>) {
-  const {as, children, className, style, ...rest} = getProps(
-    {display, minHeight, minWidth, ...props},
-    gridProps,
-  )
+  const {as, children, className, style, ...rest} = getProps({display, ...props}, gridProps)
   const Component = as || 'div'
 
   return (

package/src/components/grid/grid.css

@@ -1,3 +1,8 @@
+.sui-Grid {
+  min-width: 0;
+  min-height: 0;
+}
+
 .sui-Grid[class*='sui-tone'] {
   --grid-background: var(--background-low);
   background-color: var(--grid-background);

package/src/components/h-stack/HStack.tsx

@@ -1,33 +1,27 @@
 import clsx from 'clsx'
 import type {ComponentPropsWithRef, ElementType} from 'react'
 
-import {getProps} from '../../utils/getProps'
+import {type ComponentProps} from '../../utils/getProps'
 import {suffixClassName} from '../../utils/suffixClassName'
 import {Flex} from '../flex/Flex'
-import {type HStackProps, hStackProps} from './hStack.props'
+import {type HStackProps} from './hStack.props'
 
 const hStackClassName = suffixClassName('sui-HStack')
 
 /** @public */
-export function HStack<T extends ElementType = 'div'>(
-  props: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>,
-) {
-  const {as, children, className, style, ...rest} = getProps(props, hStackProps)
-  const Component = as || 'div'
-
+export function HStack<T extends ElementType = 'div'>({
+  className,
+  ...props
+}: HStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof HStackProps<T>>) {
   return (
     <Flex
-      as={Component}
       className={clsx(hStackClassName, className)}
-      style={style}
       data-ui="HStack"
       display="inline-flex"
       alignItems="center"
       flexWrap="wrap"
-      {...rest}
-    >
-      {children}
-    </Flex>
+      {...(props as ComponentProps)}
+    />
   )
 }
 

package/src/components/h-stack/hStack.props.ts

@@ -1,17 +1,7 @@
-import {type GapProps, gapProps} from '../../props/gap'
-import {type PropDef} from '../../types/PropDef'
+import type {FlexProps} from '../flex/flex.props'
 
 /** @public */
-export interface HStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
-  /**
-   * HTML element or component to render.
-   */
-  as?: T
-}
-
-export const hStackProps: Record<string, PropDef> = {
-  as: {
-    type: 'string',
-  },
-  gap: gapProps['gap'] as PropDef,
-}
+export interface HStackProps<T extends React.ElementType = 'div'> extends Pick<
+  FlexProps<T>,
+  'as' | 'gap'
+> {}

package/src/components/index.css

@@ -20,6 +20,7 @@
 @import './popover/popover.css';
 @import './press-area/press-area.css';
 @import './radio/radio.css';
+@import './select/select.css';
 @import './spinner/spinner.css';
 @import './skip-to-content/skip-to-content.css';
 @import './switch/switch.css';

package/src/components/select/Select.tsx

@@ -0,0 +1,47 @@
+import SelectIcon from '@sanity/icons/Select'
+import clsx from 'clsx'
+import {useId} from 'react'
+
+import {getProps} from '../../utils/getProps'
+import {suffixClassName} from '../../utils/suffixClassName'
+import {Icon} from '../icon/Icon'
+import {type SelectProps, selectProps} from './select.props'
+
+const selectClassName = suffixClassName('sui-Select')
+
+/** @public */
+export function Select({density = 'regular', hasError = false, ...props}: SelectProps) {
+  const {children, className, style, ...rest} = getProps({density, ...props}, selectProps)
+
+  const anchorId = useId()
+  const anchorName = `--anchor-${anchorId}`
+
+  const selectClasses = clsx(
+    selectClassName,
+    hasError && 'sui-error',
+    'sui-radius2',
+    'sui-width-full',
+    className,
+  )
+
+  const iconClasses = `sui-position-absolute sui-display-flex sui-align-items-center sui-px1`
+
+  return (
+    <>
+      <select
+        data-ui="Select"
+        className={selectClasses}
+        style={{...style, anchorName}}
+        {...rest}
+        aria-invalid={hasError || undefined}
+      >
+        {children}
+      </select>
+      <div className={iconClasses} data-ui="Select-icon" style={{positionAnchor: anchorName}}>
+        <Icon icon={SelectIcon} size={1} />
+      </div>
+    </>
+  )
+}
+
+export type {SelectProps}

package/src/components/select/select.css

@@ -0,0 +1,67 @@
+.sui-Select {
+  --background-color: var(--backdrop);
+  --border-color: var(--separator-high);
+  --color: var(--foreground-high);
+  background-color: var(--background-color);
+  border: 1px solid var(--border-color);
+  font: var(--form-element-text);
+  color: var(--color);
+}
+
+[data-ui="Select-icon"] {
+  --background-color: var(--backdrop);
+  background-color: var(--background-color);
+  pointer-events: none;
+  /* reduce block size by 1px at each end and inset from right to not interrupt Select’s border */
+  top: calc(anchor(top) + 1px);
+  bottom: calc(anchor(bottom) + 1px);
+  right: calc(anchor(right) + 2px);
+}
+
+/**
+  * Error
+  */
+.sui-Select.sui-error {
+  --border-color: var(--error-separator);
+  --color: var(--error-foreground);
+}
+
+.sui-Select.sui-error + [data-ui="Select-icon"] svg {
+  color: var(--error-foreground);
+}
+
+/**
+  * Hover - uses relative border/background colours to darken/lighten in both normal & error state
+  */
+.sui-Select:hover {
+  border-color: light-dark(
+    oklch(from var(--border-color) calc(l - var(--hover-lightness-delta)) c h),
+    oklch(from var(--border-color) calc(l + var(--hover-lightness-delta)) c h)
+  );
+}
+
+/**
+  * Disabled
+  */
+.sui-Select:disabled {
+  --background-color: var(--inert-background);
+  --border-color: var(--separator-low);
+  --color: var(--inert-foreground);
+  pointer-events: none;
+}
+
+.sui-Select:disabled + [data-ui="Select-icon"] {
+  --background-color: var(--inert-background);
+}
+
+.sui-Select:disabled + [data-ui="Select-icon"] svg {
+  color: var(--inert-foreground);
+}
+
+/**
+  * Focus
+  */
+.sui-Select:focus-visible {
+  outline: var(--focus-outline);
+  outline-offset: var(--focus-offset);
+}

package/src/components/select/select.props.ts

@@ -0,0 +1,25 @@
+import {formElementDensityProps, type FormElementDensityProps} from '../../props/formElement'
+import {type PropDef} from '../../types/PropDef'
+
+/** @public */
+export type SelectProps = React.ComponentProps<'select'> &
+  FormElementDensityProps & {
+    /**
+     * Disables the select element, blocking interactions and hiding it from screen readers.
+     */
+    disabled?: boolean
+    /**
+     * Used to trigger styling for invalid states.
+     */
+    hasError?: boolean
+  }
+
+export const selectProps: Record<string, PropDef> = {
+  disabled: {
+    type: 'boolean',
+  },
+  hasError: {
+    type: 'boolean',
+  },
+  ...formElementDensityProps,
+}

package/src/components/v-stack/VStack.tsx

@@ -1,31 +1,25 @@
 import clsx from 'clsx'
 import type {ComponentPropsWithRef, ElementType} from 'react'
 
-import {getProps} from '../../utils/getProps'
+import type {ComponentProps} from '../../utils/getProps'
 import {suffixClassName} from '../../utils/suffixClassName'
 import {Flex} from '../flex/Flex'
-import {type VStackProps, vStackProps} from './vStack.props'
+import {type VStackProps} from './vStack.props'
 
 const vStackClassName = suffixClassName('sui-VStack')
 
 /** @public */
-export function VStack<T extends ElementType = 'div'>(
-  props: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>,
-) {
-  const {as, children, className, style, ...rest} = getProps(props, vStackProps)
-  const Component = as || 'div'
-
+export function VStack<T extends ElementType = 'div'>({
+  className,
+  ...props
+}: VStackProps<T> & Omit<ComponentPropsWithRef<T>, keyof VStackProps<T>>) {
   return (
     <Flex
-      as={Component}
       className={clsx(vStackClassName, className)}
-      style={style}
       data-ui="VStack"
       flexDirection="column"
-      {...rest}
-    >
-      {children}
-    </Flex>
+      {...(props as ComponentProps)}
+    />
   )
 }
 

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

@@ -1,17 +1,7 @@
-import {type GapProps, gapProps} from '../../props/gap'
-import {type PropDef} from '../../types/PropDef'
+import type {FlexProps} from '../flex/flex.props'
 
 /** @public */
-export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<GapProps, 'gap'> {
-  /**
-   * HTML element or component to render.
-   */
-  as?: T
-}
-
-export const vStackProps: Record<string, PropDef> = {
-  as: {
-    type: 'string',
-  },
-  gap: gapProps['gap'] as PropDef,
-}
+export interface VStackProps<T extends React.ElementType = 'div'> extends Pick<
+  FlexProps<T>,
+  'as' | 'gap'
+> {}

package/src/css/classes/system/shadow.css

@@ -1,6 +1,6 @@
-.sui-shadow0 { box-shadow: var(--shadow0); }
-.sui-shadow1 { box-shadow: var(--shadow1); }
-.sui-shadow2 { box-shadow: var(--shadow2); }
-.sui-shadow3 { box-shadow: var(--shadow3); }
-.sui-shadow4 { box-shadow: var(--shadow4); }
-.sui-shadow5 { box-shadow: var(--shadow5); }
+.sui-shadow0 { box-shadow: var(--shadow-0); }
+.sui-shadow1 { box-shadow: var(--shadow-1); }
+.sui-shadow2 { box-shadow: var(--shadow-2); }
+.sui-shadow3 { box-shadow: var(--shadow-3); }
+.sui-shadow4 { box-shadow: var(--shadow-4); }
+.sui-shadow5 { box-shadow: var(--shadow-5); }

package/src/css/global/reset.css

@@ -52,9 +52,20 @@
   select,
   textarea
 ) {
+  appearance: none;
+  color: inherit;
   font: inherit;
   line-height: inherit;
-  color: inherit;
+}
+
+/* Remove user agent reduced opacity on disabled form elements */
+:where(
+  button,
+  input,
+  select,
+  textarea
+):disabled {
+  opacity: 1;
 }
 
 /* Remove excess space for table borders */

package/src/css/tokens/surface.css

@@ -10,6 +10,8 @@
   --foreground-high-emphasized: light-dark(var(--white), var(--black));
   --foreground-low: light-dark(var(--gray-600), var(--gray-400));
   --foreground-low-emphasized: light-dark(var(--gray-100), var(--gray-900));
+  /* Used to create equivalent text + block size for form elements vs UI v3/4. Can drop once migration is complete. */
+  --form-element-text: var(--regular) 13px / 1.15 var(--sans);
 }
 
 [class*='sui-tone'] {

package/src/index.ts

@@ -1,3 +1,5 @@
+'use client'
+
 export * from './components/box/Box'
 export * from './components/button/Button'
 export * from './components/card/Card'
@@ -22,6 +24,7 @@ export * from './components/list/List'
 export * from './components/popover/Popover'
 export * from './components/press-area/PressArea'
 export * from './components/radio/Radio'
+export * from './components/select/Select'
 export * from './components/skip-to-content/SkipToContent'
 export * from './components/spinner/Spinner'
 export * from './components/switch/Switch'

package/src/polyfills.ts

@@ -1,3 +1,5 @@
+'use client'
+
 import {
   apply as applyClosedByPolyfill,
   isSupported as isClosedBySupported,

package/src/props/formElement.ts

@@ -0,0 +1,34 @@
+import {FORM_ELEMENT_DENSITY, type FormElementDensity} from '../types/FormElement'
+import type {PropDef} from '../types/PropDef'
+import {paddingProps} from './padding'
+
+/** @public */
+export type FormElementDensityProps = {
+  /**
+   * Sets padding, gap, and other spacing values on the form element.
+   */
+  density?: FormElementDensity
+}
+
+export const formElementDensityProps: Record<string, PropDef> = {
+  density: {
+    type: 'composite',
+    values: FORM_ELEMENT_DENSITY,
+    composition: {
+      paddingX: {
+        propDef: paddingProps['paddingX'] as PropDef,
+        mapping: {
+          regular: 2,
+          loose: 3,
+        },
+      },
+      paddingY: {
+        propDef: paddingProps['paddingY'] as PropDef,
+        mapping: {
+          regular: 1,
+          loose: 2,
+        },
+      },
+    },
+  },
+}

package/src/types/FormElement.ts

@@ -0,0 +1,2 @@
+export const FORM_ELEMENT_DENSITY = ['regular', 'loose'] as const
+export type FormElementDensity = (typeof FORM_ELEMENT_DENSITY)[number]

package/src/utils/getProps.ts

@@ -5,7 +5,7 @@ import {type PropDef} from '../types/PropDef'
 const PREFIX = 'sui'
 const BREAKPOINTS_LENGTH = 6
 
-interface ComponentProps {
+export interface ComponentProps {
   className?: string | undefined
   style?: React.CSSProperties | undefined
   [key: string]: any

package/src/version.ts

@@ -1,3 +1,3 @@
 // This file is generated by scripts/write-version.js. Do not edit.
-export const VERSION = '500alpha10'
-export const HASH = 'ad9fa1'
+export const VERSION = '500alpha11'
+export const HASH = '8b95a0'

package/dist/_chunks-es/LazyRefractor.js

@@ -1,20 +0,0 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { c } from "react/compiler-runtime";
-import { hasLanguage, Refractor } from "react-refractor";
-function LazyRefractor(t0) {
-  const $ = c(5), {
-    language,
-    value
-  } = t0;
-  if (!hasLanguage(language)) {
-    let t12;
-    return $[0] !== value ? (t12 = /* @__PURE__ */ jsx("code", { children: value }), $[0] = value, $[1] = t12) : t12 = $[1], t12;
-  }
-  let t1;
-  return $[2] !== language || $[3] !== value ? (t1 = /* @__PURE__ */ jsx(Refractor, { inline: !0, language, value }), $[2] = language, $[3] = value, $[4] = t1) : t1 = $[4], t1;
-}
-export {
-  LazyRefractor as default
-};
-//# sourceMappingURL=LazyRefractor.js.map

package/dist/_chunks-es/LazyRefractor.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LazyRefractor.js","sources":["../../src/components/code/LazyRefractor.tsx"],"sourcesContent":["import {hasLanguage, Refractor, type RefractorProps} from 'react-refractor'\n\nexport default function LazyRefractor({language, value}: RefractorProps) {\n  if (!hasLanguage(language)) {\n    return <code>{value}</code>\n  }\n\n  return <Refractor inline language={language} value={value} />\n}\n"],"names":["LazyRefractor","t0","$","_c","language","value","hasLanguage","t1"],"mappings":";;;;AAEA,SAAeA,cAAAC,IAAA;AAAA,QAAAC,IAAAC,EAAA,CAAA,GAAuB;AAAA,IAAAC;AAAAA,IAAAC;AAAAA,EAAAA,IAAAJ;AACpC,MAAI,CAACK,YAAYF,QAAQ,GAAC;AAAA,QAAAG;AAAA,WAAAL,SAAAG,SACjBE,MAAA,oBAAA,QAAA,EAAOF,iBAAM,GAAOH,OAAAG,OAAAH,OAAAK,OAAAA,MAAAL,EAAA,CAAA,GAApBK;AAAAA,EAAoB;AAC5B,MAAAA;AAAA,SAAAL,EAAA,CAAA,MAAAE,YAAAF,SAAAG,SAEME,yBAAC,WAAA,EAAU,YAAiBH,UAAiBC,MAAAA,CAAK,GAAIH,OAAAE,UAAAF,OAAAG,OAAAH,OAAAK,MAAAA,KAAAL,EAAA,CAAA,GAAtDK;AAAsD;"}