@sanity-labs/ui-poc 0.0.1-alpha.0

package/src/props/flexParent.ts

@@ -0,0 +1,46 @@
+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'
+
+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-wrap',
+    values: FLEX_WRAP,
+  },
+}

package/src/props/gap.ts

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

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,44 @@
+import {GRID_AUTO_FLOW, type GridAutoFlow} from '../types/Grid'
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+
+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,37 @@
+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 ToneProps, toneProps} from './tone'
+import {type WidthProps, widthProps} from './width'
+
+export interface LayoutProps
+  extends
+    ToneProps,
+    WidthProps,
+    HeightProps,
+    MarginProps,
+    BorderProps,
+    PaddingProps,
+    PositionProps,
+    OverflowProps,
+    FlexChildProps,
+    GridChildProps {}
+
+export const layoutProps: Record<string, PropDef> = {
+  ...toneProps,
+  ...widthProps,
+  ...heightProps,
+  ...marginProps,
+  ...borderProps,
+  ...paddingProps,
+  ...positionProps,
+  ...overflowProps,
+  ...flexChildProps,
+  ...gridChildProps,
+}

package/src/props/margin.ts

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

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,58 @@
+import {type PropDef} from '../types/PropDef'
+import {type Responsive} from '../types/Responsive'
+import {SPACE, type Space} from '../types/Space'
+
+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/position.ts

@@ -0,0 +1,59 @@
+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>
+  /** CSS **z-index** property */
+  zIndex?: Responsive<number>
+}
+
+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,
+  },
+  zIndex: {
+    type: 'number',
+    className: 'z-index',
+    variable: '--z-index',
+  },
+}

package/src/props/tone.ts

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

package/src/props/typography.ts

@@ -0,0 +1,46 @@
+import {FONT_WEIGHT, type FontWeight} from '../types/FontWeight'
+import {type PropDef} from '../types/PropDef'
+import {TEXT_ALIGN, type TextAlign} from '../types/TextAlign'
+import {type MarginProps, marginProps} from './margin'
+
+export interface TypographyProps extends MarginProps {
+  /** CSS **text-align** property */
+  align?: TextAlign
+  /** CSS **-webkit-line-clamp** property */
+  lineClamp?: number
+  /** CSS **color** property */
+  muted?: boolean
+  /** CSS **text-box-trim** property */
+  trim?: boolean
+  /** CSS **font-weight** property */
+  weight?: FontWeight
+}
+
+export const typographyProps: Record<string, PropDef> = {
+  align: {
+    type: 'union',
+    className: 'text',
+    values: TEXT_ALIGN,
+  },
+  lineClamp: {
+    type: 'number',
+    className: 'line-clamp',
+    variable: '--line-clamp',
+  },
+  muted: {
+    type: 'boolean',
+    className: 'text-muted',
+    inverse: 'text-default',
+  },
+  trim: {
+    type: 'boolean',
+    className: 'text-trim',
+    inverse: 'text-trim-none',
+  },
+  weight: {
+    type: 'union',
+    className: 'weight',
+    values: FONT_WEIGHT,
+  },
+  ...marginProps,
+}

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/types/Display.ts

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

package/src/types/Flex.ts

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

package/src/types/FontWeight.ts

@@ -0,0 +1,2 @@
+export const FONT_WEIGHT = ['regular', 'medium', 'semibold', 'bold']
+export type FontWeight = (typeof FONT_WEIGHT)[number]

package/src/types/Grid.ts

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

package/src/types/Overflow.ts

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

package/src/types/Position.ts

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

package/src/types/PropDef.ts

@@ -0,0 +1,25 @@
+type BooleanPropDef = {
+  type: 'boolean'
+  className: string
+  inverse: string
+}
+
+type NumberPropDef = {
+  type: 'number'
+  className: string
+  variable: string
+}
+
+type StringPropDef = {
+  type: 'string'
+  className?: string
+  variable?: string
+}
+
+type UnionPropDef<T> = {
+  type: 'union'
+  className: string
+  values: readonly T[]
+}
+
+export type PropDef<T = unknown> = BooleanPropDef | NumberPropDef | StringPropDef | UnionPropDef<T>

package/src/types/Radius.ts

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

package/src/types/Responsive.ts

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

package/src/types/Space.ts

@@ -0,0 +1,5 @@
+export const SPACE = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9] as const
+export type Space = (typeof SPACE)[number]
+
+export const SPACE_AUTO = [...SPACE, 'auto'] as const
+export type SpaceAuto = (typeof SPACE_AUTO)[number]

package/src/types/Text.ts

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

package/src/types/TextAlign.ts

@@ -0,0 +1,2 @@
+export const TEXT_ALIGN = ['left', 'center', 'right', 'justify']
+export type TextAlign = (typeof TEXT_ALIGN)[number]

package/src/types/Tone.ts

@@ -0,0 +1,2 @@
+export const TONE = ['default', 'neutral', 'primary', 'suggest', 'positive', 'caution', 'critical']
+export type Tone = (typeof TONE)[number]