@sanity/ui 4.2.0 → 5.0.0-alpha.10

package/src/props/height.ts

@@ -0,0 +1,29 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type HeightProps = {
+  /** CSS **height** property */
+  height?: Responsive<string>
+  /** CSS **min-height** property */
+  minHeight?: Responsive<string>
+  /** CSS **max-height** property */
+  maxHeight?: Responsive<string>
+}
+
+export const heightProps: Record<string, PropDef> = {
+  height: {
+    type: 'string',
+    className: 'height',
+    variable: '--height',
+  },
+  minHeight: {
+    type: 'string',
+    className: 'min-height',
+    variable: '--min-height',
+  },
+  maxHeight: {
+    type: 'string',
+    className: 'max-height',
+    variable: '--max-height',
+  },
+}

package/src/props/layout.ts

@@ -0,0 +1,44 @@
+import {type PropDef} from '../types/PropDef'
+import {type BorderProps, borderProps} from './border'
+import {type FlexChildProps, flexChildProps} from './flexChild'
+import {type GridChildProps, gridChildProps} from './gridChild'
+import {type HeightProps, heightProps} from './height'
+import {type MarginProps, marginProps} from './margin'
+import {type OverflowProps, overflowProps} from './overflow'
+import {type PaddingProps, paddingProps} from './padding'
+import {type PositionProps, positionProps} from './position'
+import {type ShadowProps, shadowProps} from './shadow'
+import {type ToneProps, toneProps} from './tone'
+import {type WidthProps, widthProps} from './width'
+import {type ZIndexProps, zIndexProps} from './zIndex'
+
+/** @public */
+export interface LayoutProps
+  extends
+    ToneProps,
+    WidthProps,
+    HeightProps,
+    MarginProps,
+    BorderProps,
+    PaddingProps,
+    PositionProps,
+    OverflowProps,
+    FlexChildProps,
+    GridChildProps,
+    ZIndexProps,
+    ShadowProps {}
+
+export const layoutProps: Record<string, PropDef> = {
+  ...toneProps,
+  ...widthProps,
+  ...heightProps,
+  ...marginProps,
+  ...borderProps,
+  ...paddingProps,
+  ...positionProps,
+  ...overflowProps,
+  ...flexChildProps,
+  ...gridChildProps,
+  ...shadowProps,
+  ...zIndexProps,
+}

package/src/props/margin.ts

@@ -0,0 +1,59 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE_AUTO_NEGATIVE, type SpaceAutoNegative} from '../types/Space'
+
+/** @public */
+export type MarginProps = {
+  /** CSS **margin** property */
+  margin?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-left** and **margin-right** properties */
+  marginX?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-top** and **margin-bottom** properties */
+  marginY?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-top** property */
+  marginTop?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-right** property */
+  marginRight?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-bottom** property */
+  marginBottom?: Responsive<SpaceAutoNegative>
+  /** CSS **margin-left** property */
+  marginLeft?: Responsive<SpaceAutoNegative>
+}
+
+export const marginProps: Record<string, PropDef> = {
+  margin: {
+    type: 'union',
+    className: 'm',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginX: {
+    type: 'union',
+    className: 'mx',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginY: {
+    type: 'union',
+    className: 'my',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginTop: {
+    type: 'union',
+    className: 'mt',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginRight: {
+    type: 'union',
+    className: 'mr',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginBottom: {
+    type: 'union',
+    className: 'mb',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+  marginLeft: {
+    type: 'union',
+    className: 'ml',
+    values: SPACE_AUTO_NEGATIVE,
+  },
+}

package/src/props/overflow.ts

@@ -0,0 +1,30 @@
+import {OVERFLOW, type Overflow} from '../types/Overflow'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type OverflowProps = {
+  /** CSS **overflow** property */
+  overflow?: Responsive<Overflow>
+  /** CSS **overflow-x** property */
+  overflowX?: Responsive<Overflow>
+  /** CSS **overflow-y** property */
+  overflowY?: Responsive<Overflow>
+}
+
+export const overflowProps: Record<string, PropDef> = {
+  overflow: {
+    type: 'union',
+    className: 'overflow',
+    values: OVERFLOW,
+  },
+  overflowX: {
+    type: 'union',
+    className: 'overflow-x',
+    values: OVERFLOW,
+  },
+  overflowY: {
+    type: 'union',
+    className: 'overflow-y',
+    values: OVERFLOW,
+  },
+}

package/src/props/padding.ts

@@ -0,0 +1,59 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE, type Space} from '../types/Space'
+
+/** @public */
+export interface PaddingProps {
+  /** CSS **padding** property */
+  padding?: Responsive<Space>
+  /** CSS **padding-left** and **padding-right** properties */
+  paddingX?: Responsive<Space>
+  /** CSS **padding-top** and **padding-bottom** properties */
+  paddingY?: Responsive<Space>
+  /** CSS **padding-top** property */
+  paddingTop?: Responsive<Space>
+  /** CSS **padding-right** property */
+  paddingRight?: Responsive<Space>
+  /** CSS **padding-bottom** property */
+  paddingBottom?: Responsive<Space>
+  /** CSS **padding-left** property */
+  paddingLeft?: Responsive<Space>
+}
+
+export const paddingProps: Record<string, PropDef> = {
+  padding: {
+    type: 'union',
+    className: 'p',
+    values: SPACE,
+  },
+  paddingX: {
+    type: 'union',
+    className: 'px',
+    values: SPACE,
+  },
+  paddingY: {
+    type: 'union',
+    className: 'py',
+    values: SPACE,
+  },
+  paddingTop: {
+    type: 'union',
+    className: 'pt',
+    values: SPACE,
+  },
+  paddingRight: {
+    type: 'union',
+    className: 'pr',
+    values: SPACE,
+  },
+  paddingBottom: {
+    type: 'union',
+    className: 'pb',
+    values: SPACE,
+  },
+  paddingLeft: {
+    type: 'union',
+    className: 'pl',
+    values: SPACE,
+  },
+}

package/src/props/placement.ts

@@ -0,0 +1,16 @@
+import {PLACEMENT, type Placement} from '../types/Placement'
+import {type PropDef} from '../types/PropDef'
+
+/** @public */
+export type PlacementProps = {
+  /** Placement relative to anchor */
+  placement?: Placement
+}
+
+export const placementProps: Record<string, PropDef> = {
+  placement: {
+    type: 'union',
+    className: 'placement',
+    values: PLACEMENT,
+  },
+}

package/src/props/position.ts

@@ -0,0 +1,52 @@
+import {POSITION, type Position} from '../types/Position'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE_AUTO, type SpaceAuto} from '../types/Space'
+
+export type PositionProps = {
+  /** CSS **position** property */
+  position?: Responsive<Position>
+  /** CSS **inset** property */
+  inset?: Responsive<SpaceAuto>
+  /** CSS **top** property */
+  top?: Responsive<SpaceAuto>
+  /** CSS **right** property */
+  right?: Responsive<SpaceAuto>
+  /** CSS **bottom** property */
+  bottom?: Responsive<SpaceAuto>
+  /** CSS **left** property */
+  left?: Responsive<SpaceAuto>
+}
+
+export const positionProps: Record<string, PropDef> = {
+  position: {
+    type: 'union',
+    className: 'position',
+    values: POSITION,
+  },
+  inset: {
+    type: 'union',
+    className: 'inset',
+    values: SPACE_AUTO,
+  },
+  top: {
+    type: 'union',
+    className: 'top',
+    values: SPACE_AUTO,
+  },
+  right: {
+    type: 'union',
+    className: 'right',
+    values: SPACE_AUTO,
+  },
+  bottom: {
+    type: 'union',
+    className: 'bottom',
+    values: SPACE_AUTO,
+  },
+  left: {
+    type: 'union',
+    className: 'left',
+    values: SPACE_AUTO,
+  },
+}

package/src/props/shadow.ts

@@ -0,0 +1,15 @@
+import {type PropDef} from '../types/PropDef'
+import {SHADOW, type Shadow} from '../types/Shadow'
+
+export type ShadowProps = {
+  /** CSS **box-shadow** property */
+  shadow?: Shadow
+}
+
+export const shadowProps: Record<string, PropDef> = {
+  shadow: {
+    type: 'union',
+    className: 'shadow',
+    values: SHADOW,
+  },
+}

package/src/props/tone.ts

@@ -0,0 +1,15 @@
+import {type PropDef} from '../types/PropDef'
+import {TONE, type Tone} from '../types/Tone'
+
+export type ToneProps = {
+  /** CSS **background-color** property */
+  tone?: Tone
+}
+
+export const toneProps: Record<string, PropDef> = {
+  tone: {
+    type: 'union',
+    className: 'tone',
+    values: TONE,
+  },
+}

package/src/props/typography.ts

@@ -0,0 +1,62 @@
+import {FONT_WEIGHT, type FontWeight} from '../types/FontWeight'
+import {type PropDef} from '../types/PropDef'
+import type {Responsive} from '../types/Responsive'
+import {TEXT_ALIGN, type TextAlign} from '../types/TextAlign'
+import {type MarginProps, marginProps} from './margin'
+import {type ToneProps, toneProps} from './tone'
+
+/** @public */
+export interface TypographyProps extends MarginProps, ToneProps {
+  /** CSS **text-align** property */
+  align?: Responsive<TextAlign>
+  /** CSS **color** property */
+  muted?: boolean
+  /** CSS **text-box-trim** property */
+  trim?: boolean
+  /** Number of lines to truncate */
+  truncate?: Responsive<number>
+  /** CSS **font-weight** property */
+  weight?: FontWeight
+}
+
+export const typographyProps: Record<string, PropDef> = {
+  align: {
+    type: 'union',
+    className: 'text',
+    values: TEXT_ALIGN,
+  },
+  muted: {
+    type: 'boolean',
+    className: 'text-muted',
+    inverseClassName: 'text-default',
+  },
+  trim: {
+    type: 'boolean',
+    className: 'text-trim',
+    inverseClassName: 'text-trim-none',
+  },
+  truncate: {
+    type: 'conditional',
+    resolve: (value) => {
+      if (value === 1) {
+        return {
+          type: 'number',
+          className: 'text-overflow',
+        }
+      } else {
+        return {
+          type: 'number',
+          className: 'line-clamp',
+          variable: '--line-clamp',
+        }
+      }
+    },
+  },
+  weight: {
+    type: 'union',
+    className: 'weight',
+    values: FONT_WEIGHT,
+  },
+  ...marginProps,
+  ...toneProps,
+}

package/src/props/width.ts

@@ -0,0 +1,29 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type WidthProps = {
+  /** CSS **width** property */
+  width?: Responsive<string>
+  /** CSS **min-width** property */
+  minWidth?: Responsive<string>
+  /** CSS **max-width** property */
+  maxWidth?: Responsive<string>
+}
+
+export const widthProps: Record<string, PropDef> = {
+  width: {
+    type: 'string',
+    className: 'width',
+    variable: '--width',
+  },
+  minWidth: {
+    type: 'string',
+    className: 'min-width',
+    variable: '--min-width',
+  },
+  maxWidth: {
+    type: 'string',
+    className: 'max-width',
+    variable: '--max-width',
+  },
+}

package/src/props/zIndex.ts

@@ -0,0 +1,15 @@
+import type {PropDef} from '../types/PropDef'
+import type {Responsive} from '../types/Responsive'
+
+export type ZIndexProps = {
+  /** CSS z-index property */
+  zIndex?: Responsive<number>
+}
+
+export const zIndexProps: Record<string, PropDef> = {
+  zIndex: {
+    type: 'number',
+    className: 'z-index',
+    variable: '--z-index',
+  },
+}

package/src/styles.css.d.ts

@@ -0,0 +1 @@
+export {}

package/src/styles.css.node.js

@@ -0,0 +1,2 @@
+// No-op shim for `styles.css` in runtimes that do not import `.css` file
+export default ''

package/src/styles.css.test.ts

@@ -0,0 +1,24 @@
+import {existsSync} from 'node:fs'
+import {createRequire} from 'node:module'
+import {dirname, join} from 'node:path'
+
+import {describe, expect, it} from 'vitest'
+
+const require = createRequire(import.meta.url)
+
+describe('@sanity/ui/styles.css', () => {
+  it('resolves to a Node-safe shim under the node condition', () => {
+    const path = require.resolve('@sanity/ui/styles.css')
+    expect(path).toMatch(/styles\.css\.node\.js$/)
+  })
+
+  it('imports without throwing in Node ESM', async () => {
+    const mod = await import('@sanity/ui/styles.css')
+    expect(mod.default).toBe('')
+  })
+
+  it('ships the real stylesheet for browser/style resolution', () => {
+    const pkgRoot = dirname(require.resolve('@sanity/ui/package.json'))
+    expect(existsSync(join(pkgRoot, 'dist/styles.css'))).toBe(true)
+  })
+})

package/src/types/Button.ts

@@ -0,0 +1,8 @@
+export const BUTTON_DENSITY = ['regular', 'loose'] as const
+export type ButtonDensity = (typeof BUTTON_DENSITY)[number]
+
+export const BUTTON_LEVEL = ['primary', 'secondary', 'tertiary'] as const
+export type ButtonLevel = (typeof BUTTON_LEVEL)[number]
+
+export const BUTTON_TONE = ['neutral', 'critical'] as const
+export type ButtonTone = (typeof BUTTON_TONE)[number]

package/src/types/Code.ts

@@ -0,0 +1,6 @@
+export const CODE_TAG = ['pre', 'span'] as const
+export type CodeTag = (typeof CODE_TAG)[number]
+
+export const CODE_SIZE = [0, 1, 2, 3, 4] as const
+/** @public */
+export type CodeSize = (typeof CODE_SIZE)[number]

package/src/types/Container.ts

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

package/src/types/Density.ts

@@ -0,0 +1,3 @@
+export const DENSITY = ['compact', 'regular', 'loose'] as const
+/** @public */
+export type Density = (typeof DENSITY)[number]

package/src/types/Display.ts

@@ -0,0 +1,11 @@
+export const DISPLAY_BLOCK = ['block', 'inline-block', 'none'] as const
+/** @public */
+export type DisplayBlock = (typeof DISPLAY_BLOCK)[number]
+
+export const DISPLAY_FLEX = ['flex', 'inline-flex', 'none'] as const
+/** @public */
+export type DisplayFlex = (typeof DISPLAY_FLEX)[number]
+
+export const DISPLAY_GRID = ['grid', 'inline-grid', 'none'] as const
+/** @public */
+export type DisplayGrid = (typeof DISPLAY_GRID)[number]

package/src/types/Eyebrow.ts

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

package/src/types/Flex.ts

@@ -0,0 +1,22 @@
+export const ALIGN_ITEMS = ['baseline', 'center', 'flex-end', 'flex-start', 'stretch'] as const
+/** @public */
+export type AlignItems = (typeof ALIGN_ITEMS)[number]
+
+export const JUSTIFY_CONTENT = [
+  'flex-start',
+  'flex-end',
+  'center',
+  'space-between',
+  'space-around',
+  'space-evenly',
+] as const
+/** @public */
+export type JustifyContent = (typeof JUSTIFY_CONTENT)[number]
+
+export const FLEX_DIRECTION = ['row', 'row-reverse', 'column', 'column-reverse'] as const
+/** @public */
+export type FlexDirection = (typeof FLEX_DIRECTION)[number]
+
+export const FLEX_WRAP = ['wrap', 'wrap-reverse', 'nowrap'] as const
+/** @public */
+export type FlexWrap = (typeof FLEX_WRAP)[number]

package/src/types/FontWeight.ts

@@ -0,0 +1,3 @@
+export const FONT_WEIGHT = ['regular', 'medium', 'semibold', 'bold'] as const
+/** @public */
+export type FontWeight = (typeof FONT_WEIGHT)[number]

package/src/types/Grid.ts

@@ -0,0 +1,3 @@
+export const GRID_AUTO_FLOW = ['row', 'column', 'row dense', 'column dense', 'dense'] as const
+/** @public */
+export type GridAutoFlow = (typeof GRID_AUTO_FLOW)[number]

package/src/types/Heading.ts

@@ -0,0 +1,6 @@
+export const HEADING_TAG = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] as const
+export type HeadingTag = (typeof HEADING_TAG)[number]
+
+export const HEADING_SIZE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+/** @public */
+export type HeadingSize = (typeof HEADING_SIZE)[number]

package/src/types/Icon.ts

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

package/src/types/Interactive.ts

@@ -0,0 +1,8 @@
+export const INTERACTIVE_TAG = ['button', 'a'] as const
+export type InteractiveTag = (typeof INTERACTIVE_TAG)[number]
+
+export type InteractiveAs<T extends React.ElementType> = T extends InteractiveTag
+  ? T
+  : T extends string
+    ? never
+    : T

package/src/types/List.ts

@@ -0,0 +1,2 @@
+export const LIST_TAG = ['ol', 'ul'] as const
+export type ListTag = (typeof LIST_TAG)[number]

package/src/types/Overflow.ts

@@ -0,0 +1,3 @@
+export const OVERFLOW = ['visible', 'hidden', 'auto', 'scroll', 'clip'] as const
+/** @public */
+export type Overflow = (typeof OVERFLOW)[number]

package/src/types/Placement.ts

@@ -0,0 +1,16 @@
+export const PLACEMENT = [
+  'top',
+  'top-start',
+  'top-end',
+  'right',
+  'right-start',
+  'right-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'left',
+  'left-start',
+  'left-end',
+] as const
+/** @public */
+export type Placement = (typeof PLACEMENT)[number]

package/src/types/Position.ts

@@ -0,0 +1,3 @@
+export const POSITION = ['absolute', 'fixed', 'relative', 'static', 'sticky'] as const
+/** @public */
+export type Position = (typeof POSITION)[number]

package/src/types/PropDef.ts

@@ -0,0 +1,73 @@
+/**
+ * Prop is a boolean. If used for styling, provide a className
+ * to apply CSS and an inverseClassName to reset it.
+ */
+type BooleanPropDef = {
+  type: 'boolean'
+  className?: string
+  inverseClassName?: string
+}
+
+/**
+ * Prop is a number. If used for styling, provide a className
+ * that references the variable for dynamic values.
+ */
+type NumberPropDef = {
+  type: 'number'
+  className?: string
+  variable?: string
+}
+
+/**
+ * Prop is a string. If used for styling, provide a className
+ * that references the variable for dynamic values.
+ */
+type StringPropDef = {
+  type: 'string'
+  className?: string
+  variable?: string
+}
+
+/**
+ * Prop is a union of values. Values are always required. If
+ * used for styling, provide a className.
+ */
+type UnionPropDef<T> = {
+  type: 'union'
+  className?: string
+  values: readonly T[]
+}
+
+/**
+ * Prop is a composite of other props. Requires a union of values and
+ * a composition object which defines the props and their mappings.
+ * The values should map to the composition object's mapping keys.
+ */
+type CompositePropDef<T> = {
+  type: 'composite'
+  values: readonly T[]
+  composition: Record<
+    string,
+    {
+      propDef: PropDef
+      mapping: Record<T & PropertyKey, unknown>
+    }
+  >
+}
+
+/**
+ * Prop is a composite of other props. Requires a resolve callback with
+ * a value param that returns another prop def.
+ */
+type ConditionalPropDef<T> = {
+  type: 'conditional'
+  resolve: (value: T) => PropDef<T>
+}
+
+export type PropDef<T = unknown> =
+  | BooleanPropDef
+  | NumberPropDef
+  | StringPropDef
+  | UnionPropDef<T>
+  | CompositePropDef<T>
+  | ConditionalPropDef<T>