@sanity/ui 4.0.0-v4.1 → 5.0.0-alpha.2

package/src/props/border.ts

@@ -0,0 +1,51 @@
+import {type PropDef} from '../types/PropDef'
+import {RADIUS, type Radius} from '../types/Radius'
+import {type Responsive} from '../types/Responsive'
+
+export type BorderProps = {
+  /** CSS **border** property */
+  border?: Responsive<boolean>
+  /** CSS **border-top** property */
+  borderTop?: Responsive<boolean>
+  /** CSS **border-right** property */
+  borderRight?: Responsive<boolean>
+  /** CSS **border-bottom** property */
+  borderBottom?: Responsive<boolean>
+  /** CSS **border-left** property */
+  borderLeft?: Responsive<boolean>
+  /** CSS **border-radius** property */
+  radius?: Responsive<Radius>
+}
+
+export const borderProps: Record<string, PropDef> = {
+  border: {
+    type: 'boolean',
+    className: 'border',
+    inverseClassName: 'border-none',
+  },
+  borderTop: {
+    type: 'boolean',
+    className: 'border-top',
+    inverseClassName: 'border-top-none',
+  },
+  borderRight: {
+    type: 'boolean',
+    className: 'border-right',
+    inverseClassName: 'border-right-none',
+  },
+  borderBottom: {
+    type: 'boolean',
+    className: 'border-bottom',
+    inverseClassName: 'border-bottom-none',
+  },
+  borderLeft: {
+    type: 'boolean',
+    className: 'border-left',
+    inverseClassName: 'border-left-none',
+  },
+  radius: {
+    type: 'union',
+    className: 'radius',
+    values: RADIUS,
+  },
+}

package/src/props/flexChild.ts

@@ -0,0 +1,29 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type FlexChildProps = {
+  /** CSS **flex-basis** property */
+  flexBasis?: Responsive<string>
+  /** CSS **flex-grow** property */
+  flexGrow?: Responsive<number>
+  /** CSS **flex-shrink** property */
+  flexShrink?: Responsive<number>
+}
+
+export const flexChildProps: Record<string, PropDef> = {
+  flexBasis: {
+    type: 'string',
+    className: 'flex-basis',
+    variable: '--flex-basis',
+  },
+  flexGrow: {
+    type: 'number',
+    className: 'flex-grow',
+    variable: '--flex-grow',
+  },
+  flexShrink: {
+    type: 'number',
+    className: 'flex-shrink',
+    variable: '--flex-shrink',
+  },
+}

package/src/props/flexParent.ts

@@ -0,0 +1,47 @@
+import {
+  ALIGN_ITEMS,
+  type AlignItems,
+  FLEX_DIRECTION,
+  FLEX_WRAP,
+  type FlexDirection,
+  type FlexWrap,
+  JUSTIFY_CONTENT,
+  type JustifyContent,
+} from '../types/Flex'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+/** @public */
+export type FlexParentProps = {
+  /** CSS **align-items** property */
+  alignItems?: Responsive<AlignItems>
+  /** CSS **justify-content** property */
+  justifyContent?: Responsive<JustifyContent>
+  /** CSS **flex-direction** property */
+  flexDirection?: Responsive<FlexDirection>
+  /** CSS **flex-wrap** property */
+  flexWrap?: Responsive<FlexWrap>
+}
+
+export const flexParentProps: Record<string, PropDef> = {
+  alignItems: {
+    type: 'union',
+    className: 'align-items',
+    values: ALIGN_ITEMS,
+  },
+  justifyContent: {
+    type: 'union',
+    className: 'justify-content',
+    values: JUSTIFY_CONTENT,
+  },
+  flexDirection: {
+    type: 'union',
+    className: 'flex-direction',
+    values: FLEX_DIRECTION,
+  },
+  flexWrap: {
+    type: 'union',
+    className: 'flex',
+    values: FLEX_WRAP,
+  },
+}

package/src/props/gap.ts

@@ -0,0 +1,31 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE_INHERIT, type SpaceInherit} from '../types/Space'
+
+/** @public */
+export type GapProps = {
+  /** CSS **gap** property */
+  gap?: Responsive<SpaceInherit>
+  /** CSS **row-gap** property */
+  rowGap?: Responsive<SpaceInherit>
+  /** CSS **column-gap** property */
+  columnGap?: Responsive<SpaceInherit>
+}
+
+export const gapProps: Record<string, PropDef> = {
+  gap: {
+    type: 'union',
+    className: 'gap',
+    values: SPACE_INHERIT,
+  },
+  rowGap: {
+    type: 'union',
+    className: 'row-gap',
+    values: SPACE_INHERIT,
+  },
+  columnGap: {
+    type: 'union',
+    className: 'column-gap',
+    values: SPACE_INHERIT,
+  },
+}

package/src/props/gridChild.ts

@@ -0,0 +1,50 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+export type GridChildProps = {
+  /** CSS **grid-column** property */
+  gridColumn?: Responsive<string>
+  /** CSS **grid-column-start** property */
+  gridColumnStart?: Responsive<string>
+  /** CSS **grid-column-end** property */
+  gridColumnEnd?: Responsive<string>
+  /** CSS **grid-row** property */
+  gridRow?: Responsive<string>
+  /** CSS **grid-row-start** property */
+  gridRowStart?: Responsive<string>
+  /** CSS **grid-row-end** property */
+  gridRowEnd?: Responsive<string>
+}
+
+export const gridChildProps: Record<string, PropDef> = {
+  gridColumn: {
+    type: 'string',
+    className: 'grid-column',
+    variable: '--grid-column',
+  },
+  gridColumnStart: {
+    type: 'string',
+    className: 'grid-column-start',
+    variable: '--grid-column-start',
+  },
+  gridColumnEnd: {
+    type: 'string',
+    className: 'grid-column-end',
+    variable: '--grid-column-end',
+  },
+  gridRow: {
+    type: 'string',
+    className: 'grid-row',
+    variable: '--grid-row',
+  },
+  gridRowStart: {
+    type: 'string',
+    className: 'grid-row-start',
+    variable: '--grid-row-start',
+  },
+  gridRowEnd: {
+    type: 'string',
+    className: 'grid-row-end',
+    variable: '--grid-row-end',
+  },
+}

package/src/props/gridParent.ts

@@ -0,0 +1,45 @@
+import {GRID_AUTO_FLOW, type GridAutoFlow} from '../types/Grid'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+/** @public */
+export type GridParentProps = {
+  /** CSS **grid-auto-flow** property */
+  gridAutoFlow?: Responsive<GridAutoFlow>
+  /** CSS **grid-auto-columns** property */
+  gridAutoColumns?: Responsive<string>
+  /** CSS **grid-auto-row** property */
+  gridAutoRows?: Responsive<string>
+  /** CSS **grid-template-columns** property */
+  gridTemplateColumns?: Responsive<string>
+  /** CSS **grid-template-rows** property */
+  gridTemplateRows?: Responsive<string>
+}
+
+export const gridParentProps: Record<string, PropDef> = {
+  gridAutoFlow: {
+    type: 'union',
+    className: 'grid-auto-flow',
+    values: GRID_AUTO_FLOW,
+  },
+  gridAutoColumns: {
+    type: 'string',
+    className: 'grid-auto-columns',
+    variable: '--grid-auto-columns',
+  },
+  gridAutoRows: {
+    type: 'string',
+    className: 'grid-auto-rows',
+    variable: '--grid-auto-rows',
+  },
+  gridTemplateColumns: {
+    type: 'string',
+    className: 'grid-template-columns',
+    variable: '--grid-template-columns',
+  },
+  gridTemplateRows: {
+    type: 'string',
+    className: 'grid-template-rows',
+    variable: '--grid-template-rows',
+  },
+}

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',
+  },
+}