@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/types/Radius.ts

@@ -0,0 +1,3 @@
+export const RADIUS = [0, 1, 2, 3, 4, 5, 6, 'full'] as const
+/** @public */
+export type Radius = (typeof RADIUS)[number]

package/src/types/Responsive.ts

@@ -0,0 +1,10 @@
+/** @public */
+export type Responsive<T> =
+  | T
+  | []
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 1})
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 2})
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 3})
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 4})
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 5})
+  | ([T | undefined | null, ...(T | undefined | null)[]] & {length: 6})

package/src/types/Shadow.ts

@@ -0,0 +1,3 @@
+export const SHADOW = [0, 1, 2, 3, 4, 5] as const
+/** @public */
+export type Shadow = (typeof SHADOW)[number]

package/src/types/Space.ts

@@ -0,0 +1,15 @@
+export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+/** @public */
+export type Space = (typeof SPACE)[number]
+
+export const SPACE_AUTO = [...SPACE, 'auto'] as const
+/** @public */
+export type SpaceAuto = (typeof SPACE_AUTO)[number]
+
+export const SPACE_INHERIT = [...SPACE, 'inherit'] as const
+/** @public */
+export type SpaceInherit = (typeof SPACE_INHERIT)[number]
+
+export const SPACE_AUTO_NEGATIVE = [-9, -8, -7, -6, -5, -4, -3, -2, -1, ...SPACE, 'auto'] as const
+/** @public */
+export type SpaceAutoNegative = (typeof SPACE_AUTO_NEGATIVE)[number]

package/src/types/Text.ts

@@ -0,0 +1,3 @@
+export const TEXT_SIZE = [0, 1, 2, 3, 4] as const
+/** @public */
+export type TextSize = (typeof TEXT_SIZE)[number]

package/src/types/TextAlign.ts

@@ -0,0 +1,3 @@
+export const TEXT_ALIGN = ['left', 'center', 'right', 'justify'] as const
+/** @public */
+export type TextAlign = (typeof TEXT_ALIGN)[number]

package/src/types/Tone.ts

@@ -0,0 +1,3 @@
+export const TONE = ['neutral', 'positive', 'suggest', 'caution', 'critical'] as const
+/** @public */
+export type Tone = (typeof TONE)[number]

package/src/utils/getProps.test.ts

@@ -0,0 +1,156 @@
+import {describe, expect, it} from 'vitest'
+
+import {cardProps} from '../components/card/card.props'
+import {layoutProps} from '../props/layout'
+import {typographyProps} from '../props/typography'
+import {getProps} from './getProps'
+
+describe('getProps', () => {
+  it('generates className based on an union', () => {
+    const result = getProps({padding: 1}, layoutProps)
+    expect(result.className).toBe('sui-p1')
+    expect(result.style).toEqual({})
+  })
+
+  it('does not generate className based on union if value is unsupported', () => {
+    const result = getProps({padding: 10}, layoutProps)
+    expect(result.className).toBe('')
+    expect(result.style).toEqual({})
+  })
+
+  it('merges existing className', () => {
+    const result = getProps({className: 'test', padding: 1}, layoutProps)
+    expect(result.className).toBe('test sui-p1')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className and style based on a string', () => {
+    const result = getProps({width: '100px'}, layoutProps)
+    expect(result.className).toBe('sui-width')
+    expect(result.style).toEqual({'--width': '100px'})
+  })
+
+  it('merges existing style', () => {
+    const result = getProps({width: '100px', style: {display: 'block'}}, layoutProps)
+    expect(result.className).toBe('sui-width')
+    expect(result.style).toEqual({'--width': '100px', 'display': 'block'})
+  })
+
+  it('generates className based on a boolean', () => {
+    const result = getProps({border: true}, layoutProps)
+    expect(result.className).toBe('sui-border')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className based on a number', () => {
+    const result = getProps({flexGrow: 1.5}, layoutProps)
+    expect(result.className).toBe('sui-flex-grow')
+    expect(result.style).toEqual({'--flex-grow': 1.5})
+  })
+
+  it('generates className based on a composite', () => {
+    const result = getProps({density: 'regular'}, cardProps)
+    expect(result.className).toBe('sui-gap3 sui-p4 sui-radius3')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates multiple classNames', () => {
+    const result = getProps({border: true, padding: 1}, layoutProps)
+    expect(result.className).toBe('sui-border sui-p1')
+    expect(result.style).toEqual({})
+  })
+
+  it('preserves undefined props', () => {
+    const result = getProps({padding: 1, id: 'test'}, layoutProps)
+    expect(result.className).toBe('sui-p1')
+    expect(result['id']).toEqual('test')
+  })
+
+  it('preserves non-styling props', () => {
+    const result = getProps({padding: 1, as: 'div'}, layoutProps)
+    expect(result.className).toBe('sui-p1')
+    expect(result.style).toEqual({})
+    expect(result['as']).toEqual('div')
+  })
+
+  it('preserves non-styling responsive props', () => {
+    const result = getProps({padding: 1, items: [{label: 'One'}, {label: 'Two'}]}, layoutProps)
+    expect(result.className).toBe('sui-p1')
+    expect(result.style).toEqual({})
+    expect(result['items']).toEqual([{label: 'One'}, {label: 'Two'}])
+  })
+
+  it('generates responsive className based on unions', () => {
+    const result = getProps({padding: [1, 2, 3]}, layoutProps)
+    expect(result.className).toBe('sui-p1 sui-p2-bp-1 sui-p3-bp-2')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className and style based on strings', () => {
+    const result = getProps({width: ['100px', '200px', '300px']}, layoutProps)
+    expect(result.className).toBe('sui-width sui-width-bp-1 sui-width-bp-2')
+    expect(result.style).toEqual({
+      '--width': '100px',
+      '--width-bp-1': '200px',
+      '--width-bp-2': '300px',
+    })
+  })
+
+  it('generates responsive className based on booleans', () => {
+    const result = getProps({border: [true, false, true]}, layoutProps)
+    expect(result.className).toBe('sui-border sui-border-none-bp-1 sui-border-bp-2')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className based on composites', () => {
+    const result = getProps({density: ['compact', 'regular']}, cardProps)
+    expect(result.className).toBe(
+      'sui-gap2 sui-gap3-bp-1 sui-p3 sui-p4-bp-1 sui-radius2 sui-radius3-bp-1',
+    )
+    expect(result.style).toEqual({})
+  })
+
+  it('does not generate responsive className with more values than breakpoints', () => {
+    const result = getProps({padding: [1, 2, 3, 4, 5, 6, 7, 8]}, layoutProps)
+    expect(result.className).toBe(
+      'sui-p1 sui-p2-bp-1 sui-p3-bp-2 sui-p4-bp-3 sui-p5-bp-4 sui-p6-bp-5',
+    )
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className with undefined values', () => {
+    const result = getProps({padding: [1, 2, undefined, 3]}, layoutProps)
+    expect(result.className).toBe('sui-p1 sui-p2-bp-1 sui-p3-bp-3')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className with null values', () => {
+    const result = getProps({padding: [1, 2, null, 3]}, layoutProps)
+    expect(result.className).toBe('sui-p1 sui-p2-bp-1 sui-p3-bp-3')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates responsive className without unsupported values', () => {
+    const result = getProps({padding: [1, 2, 10, 3]}, layoutProps)
+    expect(result.className).toBe('sui-p1 sui-p2-bp-1 sui-p3-bp-3')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className based on a conditional', () => {
+    const result = getProps({truncate: 1}, typographyProps)
+    expect(result.className).toBe('sui-text-overflow')
+    expect(result.style).toEqual({})
+  })
+
+  it('generates className and style based on a conditional', () => {
+    const result = getProps({truncate: 3}, typographyProps)
+    expect(result.className).toBe('sui-line-clamp')
+    expect(result.style).toEqual({'--line-clamp': 3})
+  })
+
+  it('generates responsive className and style based on a conditional', () => {
+    const result = getProps({truncate: [1, 3]}, typographyProps)
+    expect(result.className).toBe('sui-text-overflow sui-line-clamp-bp-1')
+    expect(result.style).toEqual({'--line-clamp-bp-1': 3})
+  })
+})

package/src/utils/getProps.ts

@@ -0,0 +1,156 @@
+import clsx from 'clsx'
+
+import {type PropDef} from '../types/PropDef'
+
+const PREFIX = 'sui'
+const BREAKPOINTS_LENGTH = 6
+
+interface ComponentProps {
+  className?: string | undefined
+  style?: React.CSSProperties | undefined
+  [key: string]: any
+}
+
+export function getProps(
+  componentProps?: ComponentProps,
+  propDefs?: Record<string, PropDef>,
+): ComponentProps {
+  const {allComponentProps, allPropDefs} = flattenCompositeProps(componentProps, propDefs)
+  const restProps: ComponentProps = {}
+  let className = componentProps?.className || ''
+  let style = componentProps?.style || {}
+
+  for (const key in allComponentProps) {
+    const propDef = allPropDefs?.[key]
+    const propValue = allComponentProps[key]
+
+    if (
+      !((propDef && 'className' in propDef && propDef.className) || propDef?.type === 'conditional')
+    ) {
+      restProps[key] = propValue
+      continue
+    }
+
+    if (Array.isArray(propValue)) {
+      // @TODO: consider fixing this O(n^2) time complexity
+      // oxlint-disable-next-line no-accumulating-spread
+      for (let i = 0, len = Math.min(propValue.length, BREAKPOINTS_LENGTH); i < len; i++) {
+        const resolvedPropDef = getResolvedPropDef(propValue[i], propDef)
+
+        if (!resolvedPropDef) {
+          continue
+        }
+
+        className = clsx(className, getClassName(propValue[i], resolvedPropDef, i))
+        style = {...style, ...getStyle(propValue[i], resolvedPropDef, i)}
+      }
+    } else {
+      const resolvedPropDef = getResolvedPropDef(propValue, propDef)
+
+      if (!resolvedPropDef) {
+        restProps[key] = propValue
+        continue
+      }
+
+      className = clsx(className, getClassName(propValue, resolvedPropDef))
+      style = {...style, ...getStyle(propValue, resolvedPropDef)}
+    }
+  }
+
+  return {...restProps, className, style}
+}
+
+function getResolvedPropDef(propValue: any, propDef?: PropDef) {
+  if (propDef?.type !== 'conditional') {
+    return propDef
+  }
+
+  const resolvedPropDef = propDef.resolve(propValue)
+
+  if (!(resolvedPropDef && 'className' in resolvedPropDef && resolvedPropDef.className)) {
+    return null
+  }
+
+  return resolvedPropDef
+}
+
+function getClassName(propValue: any, propDef: PropDef, bp?: number) {
+  if (propDef.type === 'union' && propDef.values?.includes(propValue)) {
+    /* Note: This may need updating depending on the final CSS classname formatting */
+    return `${PREFIX}-${propDef.className}${typeof propValue === 'string' ? `-${propValue}` : propValue}${bp ? `-bp-${bp}` : ''}`
+  }
+
+  if (propDef.type === 'string' || propDef.type === 'number') {
+    return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ''}`
+  }
+
+  if (propDef.type === 'boolean') {
+    if (propValue) {
+      return `${PREFIX}-${propDef.className}${bp ? `-bp-${bp}` : ''}`
+    }
+
+    if (!propValue && propDef.inverseClassName) {
+      return `${PREFIX}-${propDef.inverseClassName}${bp ? `-bp-${bp}` : ''}`
+    }
+  }
+
+  return ''
+}
+
+function getStyle(propValue: any, propDef: PropDef, bp?: number) {
+  if ((propDef.type === 'string' || propDef.type === 'number') && propDef.variable) {
+    return {
+      [`${propDef.variable}${bp ? `-bp-${bp}` : ''}`]: propValue,
+    }
+  }
+
+  return {}
+}
+
+export function flattenCompositeProps(
+  componentProps?: ComponentProps,
+  propDefs?: Record<string, PropDef>,
+) {
+  const props = {
+    allComponentProps: {} as ComponentProps,
+    allPropDefs: {} as Record<string, PropDef>,
+  }
+
+  for (const key in componentProps) {
+    if (propDefs?.[key] && propDefs?.[key].type === 'composite') {
+      for (const compositeKey in propDefs?.[key].composition) {
+        const compositeValue = getCompositeValue(componentProps[key], propDefs[key], compositeKey)
+
+        props.allComponentProps[compositeKey] = compositeValue
+        props.allPropDefs[compositeKey] = propDefs[key].composition[compositeKey]
+          ?.propDef as PropDef
+      }
+    } else {
+      props.allComponentProps[key] = componentProps[key]
+      props.allPropDefs[key] = propDefs?.[key] as PropDef
+    }
+  }
+
+  return props
+}
+
+function getCompositeValue(propValue: any, propDef: PropDef, key: string) {
+  if (!('composition' in propDef)) {
+    return
+  }
+
+  const mapping = propDef.composition[key]?.['mapping']
+  let compositeValue
+
+  if (Array.isArray(propValue)) {
+    compositeValue = []
+
+    for (let i = 0, len = propValue.length; i < len; i++) {
+      compositeValue[i] = mapping?.[propValue[i]]
+    }
+  } else {
+    compositeValue = mapping?.[propValue]
+  }
+
+  return compositeValue
+}

package/src/utils/mergeTriggerProps.ts

@@ -0,0 +1,66 @@
+function isReactEventHandler(key: string, value: unknown): value is (e: never) => void {
+  return /^on[A-Z]/.test(key) && typeof value === 'function'
+}
+
+function chainEventHandlers<E>(
+  ...handlers: (((e: E) => void) | undefined)[]
+): ((e: E) => void) | undefined {
+  const defined = handlers.filter(Boolean) as ((e: E) => void)[]
+
+  if (defined.length === 0) {
+    return undefined
+  }
+
+  if (defined.length === 1) {
+    return defined[0]
+  }
+
+  return (e: E) => {
+    for (const handler of defined) {
+      handler(e)
+    }
+  }
+}
+
+export function mergeTriggerProps(
+  childProps: Record<string, unknown>,
+  forwardedProps?: Record<string, unknown>,
+  ownProps?: Record<string, unknown>,
+) {
+  const result: Record<string, unknown> = {}
+
+  for (const source of [forwardedProps, ownProps]) {
+    if (!source) {
+      continue
+    }
+
+    for (const [key, value] of Object.entries(source)) {
+      if (key === 'style') {
+        continue
+      }
+
+      if (isReactEventHandler(key, value)) {
+        result[key] = chainEventHandlers(result[key] as (e: never) => void, value)
+        continue
+      }
+
+      if (value !== undefined) {
+        result[key] = value
+      }
+    }
+  }
+
+  result['style'] = {
+    ...(childProps['style'] as object),
+    ...(forwardedProps?.['style'] as object),
+    ...(ownProps?.['style'] as object),
+  }
+
+  for (const [key, value] of Object.entries(childProps)) {
+    if (isReactEventHandler(key, value)) {
+      result[key] = chainEventHandlers(result[key] as (e: never) => void, value)
+    }
+  }
+
+  return result
+}

package/src/utils/renderPortal.tsx

@@ -0,0 +1,14 @@
+import {type ReactNode} from 'react'
+import {createPortal} from 'react-dom'
+
+export function renderPortal(node: ReactNode, mounted: boolean, portal?: boolean) {
+  if (!portal) {
+    return node
+  }
+
+  if (!mounted) {
+    return null
+  }
+
+  return createPortal(node, document.body)
+}

package/src/utils/suffixClassName.ts

@@ -0,0 +1,5 @@
+import {HASH} from '../version'
+
+export function suffixClassName(className: string) {
+  return `${className}-${HASH}`
+}

package/src/version.ts

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

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Sanity.io
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.

package/dist/_system-CTe2lb5l.d.ts

@@ -1,40 +0,0 @@
-/** @public */
-declare const THEME_COLOR_SCHEMES: readonly ['light', 'dark'];
-/** @public */
-declare const THEME_COLOR_BLEND_MODES: readonly ['multiply', 'screen'];
-/** @public */
-declare const THEME_COLOR_CARD_TONES: readonly ['transparent', 'default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical'];
-/** @public */
-declare const THEME_COLOR_STATE_TONES: readonly ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical'];
-/** @public */
-declare const THEME_COLOR_STATES: readonly ['enabled', 'hovered', 'pressed', 'selected', 'disabled'];
-/** @public */
-declare const THEME_COLOR_BUTTON_MODES: readonly ['default', 'ghost', 'bleed'];
-/** @public */
-declare const THEME_COLOR_INPUT_MODES: readonly ['default', 'invalid'];
-/** @public */
-declare const THEME_COLOR_INPUT_STATES: readonly ['enabled', 'hovered', 'readOnly', 'disabled'];
-/** @public */
-declare const THEME_COLOR_AVATAR_COLORS: import("@sanity/color").ColorHueKey[];
-/**
- * @public
- */
-type ThemeColorSchemeKey = (typeof THEME_COLOR_SCHEMES)[number];
-/** @public */
-type ThemeColorBlendModeKey = (typeof THEME_COLOR_BLEND_MODES)[number];
-/** @public */
-type ThemeColorCardToneKey = (typeof THEME_COLOR_CARD_TONES)[number];
-/** @public */
-type ThemeColorButtonModeKey = (typeof THEME_COLOR_BUTTON_MODES)[number];
-/** @public */
-type ThemeColorStateKey = (typeof THEME_COLOR_STATES)[number];
-/** @public */
-type ThemeColorStateToneKey = (typeof THEME_COLOR_STATE_TONES)[number];
-/** @public */
-type ThemeColorInputModeKey = (typeof THEME_COLOR_INPUT_MODES)[number];
-/** @public */
-type ThemeColorInputStateKey = (typeof THEME_COLOR_INPUT_STATES)[number];
-/** @public */
-type ThemeColorAvatarColorKey = (typeof THEME_COLOR_AVATAR_COLORS)[number];
-export { THEME_COLOR_STATES as _, ThemeColorInputModeKey as a, ThemeColorStateKey as c, THEME_COLOR_BLEND_MODES as d, THEME_COLOR_BUTTON_MODES as f, THEME_COLOR_SCHEMES as g, THEME_COLOR_INPUT_STATES as h, ThemeColorCardToneKey as i, ThemeColorStateToneKey as l, THEME_COLOR_INPUT_MODES as m, ThemeColorBlendModeKey as n, ThemeColorInputStateKey as o, THEME_COLOR_CARD_TONES as p, ThemeColorButtonModeKey as r, ThemeColorSchemeKey as s, ThemeColorAvatarColorKey as t, THEME_COLOR_AVATAR_COLORS as u, THEME_COLOR_STATE_TONES as v };
-//# sourceMappingURL=_system-CTe2lb5l.d.ts.map

package/dist/_system-CTe2lb5l.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"_system-CTe2lb5l.d.ts","names":[],"sources":["../src/theme/system/color/_constants.ts","../src/theme/system/color/_system.ts"],"mappings":"AAGA;cAAa;;cAGA;;cAGA;;cAYA;;cAWA;;cAGA;;cAGA;;cAGA;;cAGA,mDAAyB;;;;KC7B1B,8BAA8B;;KAG9B,iCAAiC;;KAGjC,gCAAgC;;KAGhC,kCAAkC;;KAGlC,6BAA6B;;KAG7B,iCAAiC;;KAGjC,iCAAiC;;KAGjC,kCAAkC;;KAGlC,mCAAmC"}