@sanity/ui 3.0.2 → 4.0.0-static.2

package/src/css/props/gridTemplateRows/gridTemplateRows.css.ts

@@ -0,0 +1,43 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridTemplateRows} from './types'
+
+export const options: ResponsiveRuleOptions<GridTemplateRows> = {
+  1: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(1, 1fr)',
+  }),
+  2: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(2, 1fr)',
+  }),
+  3: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(3, 1fr)',
+  }),
+  4: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(4, 1fr)',
+  }),
+  5: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(5, 1fr)',
+  }),
+  6: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(6, 1fr)',
+  }),
+  7: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(7, 1fr)',
+  }),
+  8: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(8, 1fr)',
+  }),
+  9: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(9, 1fr)',
+  }),
+  10: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(10, 1fr)',
+  }),
+  11: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(11, 1fr)',
+  }),
+  12: _responsiveStyle(layers.props, {
+    gridTemplateRows: 'repeat(12, 1fr)',
+  }),
+}

package/src/css/props/gridTemplateRows/gridTemplateRows.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridTemplateRows.css'
+import type {GridTemplateRowsStyleProps} from './types'
+
+/** @public */
+export function gridTemplateRows(props: GridTemplateRowsStyleProps): string | undefined {
+  return _responsiveClassName(options, props.gridTemplateRows)
+}

package/src/css/props/gridTemplateRows/types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridTemplateRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/** @public */
+export interface GridTemplateRowsStyleProps {
+  gridTemplateRows?: ResponsiveProp<GridTemplateRows>
+}

package/src/css/props/height/height.css.ts

@@ -0,0 +1,25 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Height} from './types'
+
+export const options: ResponsiveRuleOptions<Height> = {
+  fill: _responsiveStyle(layers.props, {
+    height: '100%',
+  }),
+  auto: _responsiveStyle(layers.props, {
+    height: 'auto',
+  }),
+  min: _responsiveStyle(layers.props, {
+    height: 'min-content',
+  }),
+  max: _responsiveStyle(layers.props, {
+    height: 'max-content',
+  }),
+  fit: _responsiveStyle(layers.props, {
+    height: 'fit-content',
+  }),
+  stretch: _responsiveStyle(layers.props, {
+    height: 'stretch',
+  }),
+}

package/src/css/props/height/height.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './height.css'
+import type {HeightStyleProps} from './types'
+
+/** @public */
+export function height(props: HeightStyleProps): string | undefined {
+  return _responsiveClassName(options, props.height)
+}

package/src/css/props/height/types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Height = 'fill' | 'auto' | 'min' | 'max' | 'fit' | 'stretch'
+
+/** @public */
+export interface HeightStyleProps {
+  height?: ResponsiveProp<Height>
+}

package/src/css/props/inset/inset.css.ts

@@ -0,0 +1,37 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Inset} from './types'
+
+export const insetOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.props, {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  }),
+}
+
+export const insetTopOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.props, {
+    top: 0,
+  }),
+}
+
+export const insetRightOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.props, {
+    right: 0,
+  }),
+}
+
+export const insetBottomOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.props, {
+    bottom: 0,
+  }),
+}
+
+export const insetLeftOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.props, {
+    left: 0,
+  }),
+}

package/src/css/props/inset/inset.ts

@@ -0,0 +1,21 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {
+  insetBottomOptions,
+  insetLeftOptions,
+  insetOptions,
+  insetRightOptions,
+  insetTopOptions,
+} from './inset.css'
+import type {InsetStyleProps} from './types'
+
+/** @public */
+export function inset(props: InsetStyleProps): string | undefined {
+  return _composeClassNames(
+    _responsiveClassName(insetOptions, props.inset),
+    _responsiveClassName(insetTopOptions, props.insetTop),
+    _responsiveClassName(insetRightOptions, props.insetRight),
+    _responsiveClassName(insetBottomOptions, props.insetBottom),
+    _responsiveClassName(insetLeftOptions, props.insetLeft),
+  )
+}

package/src/css/props/inset/types.ts

@@ -0,0 +1,13 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Inset = 0
+
+/** @public */
+export interface InsetStyleProps {
+  inset?: ResponsiveProp<Inset>
+  insetTop?: ResponsiveProp<Inset>
+  insetRight?: ResponsiveProp<Inset>
+  insetBottom?: ResponsiveProp<Inset>
+  insetLeft?: ResponsiveProp<Inset>
+}

package/src/css/props/justifyContent/justifyContent.css.ts

@@ -0,0 +1,25 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {JustifyContent} from './types'
+
+export const options: ResponsiveRuleOptions<JustifyContent> = {
+  'flex-start': _responsiveStyle(layers.props, {
+    justifyContent: 'flex-start',
+  }),
+  'flex-end': _responsiveStyle(layers.props, {
+    justifyContent: 'flex-end',
+  }),
+  'center': _responsiveStyle(layers.props, {
+    justifyContent: 'center',
+  }),
+  'space-between': _responsiveStyle(layers.props, {
+    justifyContent: 'space-between',
+  }),
+  'space-around': _responsiveStyle(layers.props, {
+    justifyContent: 'space-around',
+  }),
+  'space-evenly': _responsiveStyle(layers.props, {
+    justifyContent: 'space-evenly',
+  }),
+}

package/src/css/props/justifyContent/justifyContent.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './justifyContent.css'
+import type {JustifyContentStyleProps} from './types'
+
+/** @public */
+export function justifyContent(props: JustifyContentStyleProps): string | undefined {
+  return _responsiveClassName(options, props.justifyContent)
+}

package/src/css/props/justifyContent/types.ts

@@ -0,0 +1,15 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type JustifyContent =
+  | 'flex-start'
+  | 'flex-end'
+  | 'center'
+  | 'space-between'
+  | 'space-around'
+  | 'space-evenly'
+
+/** @public */
+export interface JustifyContentStyleProps {
+  justifyContent?: ResponsiveProp<JustifyContent>
+}

package/src/css/props/margin/margin.css.ts

@@ -0,0 +1,117 @@
+import {SPACE} from '@sanity/ui/theme'
+
+import {_fromEntries} from '../../_fromEntries'
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+import type {Margin} from './types'
+
+export const marginOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    margin: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        margin: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginXOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginLeft: vars.space[index],
+        marginRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginYOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginTop: 'auto',
+    marginBottom: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginTop: vars.space[index],
+        marginBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginTopOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginTop: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginTop: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginRightOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginRight: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginBottomOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginBottom: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginLeftOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.props, {
+    marginLeft: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        marginLeft: vars.space[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/margin/margin.ts

@@ -0,0 +1,25 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {
+  marginBottomOptions,
+  marginLeftOptions,
+  marginOptions,
+  marginRightOptions,
+  marginTopOptions,
+  marginXOptions,
+  marginYOptions,
+} from './margin.css'
+import type {MarginStyleProps} from './types'
+
+/** @public */
+export function margin(props: MarginStyleProps): string | undefined {
+  return _composeClassNames(
+    _responsiveClassName(marginOptions, props.margin),
+    _responsiveClassName(marginXOptions, props.marginX),
+    _responsiveClassName(marginYOptions, props.marginY),
+    _responsiveClassName(marginTopOptions, props.marginTop),
+    _responsiveClassName(marginRightOptions, props.marginRight),
+    _responsiveClassName(marginBottomOptions, props.marginBottom),
+    _responsiveClassName(marginLeftOptions, props.marginLeft),
+  )
+}

package/src/css/props/margin/types.ts

@@ -0,0 +1,17 @@
+import type {Space} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Margin = Space | 'auto'
+
+/** @public */
+export interface MarginStyleProps {
+  margin?: ResponsiveProp<Margin>
+  marginX?: ResponsiveProp<Margin>
+  marginY?: ResponsiveProp<Margin>
+  marginTop?: ResponsiveProp<Margin>
+  marginRight?: ResponsiveProp<Margin>
+  marginBottom?: ResponsiveProp<Margin>
+  marginLeft?: ResponsiveProp<Margin>
+}

package/src/css/props/maxWidth/maxWidth.css.ts

@@ -0,0 +1,32 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import {vars} from '../../vars.css'
+import type {MaxWidth} from './types'
+
+export const options: ResponsiveRuleOptions<MaxWidth> = {
+  auto: _responsiveStyle(layers.props, {
+    maxWidth: 'none',
+  }),
+  fill: _responsiveStyle(layers.props, {
+    maxWidth: '100%',
+  }),
+  0: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[0],
+  }),
+  1: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[1],
+  }),
+  2: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[2],
+  }),
+  3: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[3],
+  }),
+  4: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[4],
+  }),
+  5: _responsiveStyle(layers.props, {
+    maxWidth: vars.container[5],
+  }),
+}

package/src/css/props/maxWidth/maxWidth.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './maxWidth.css'
+import type {MaxWidthStyleProps} from './types'
+
+/** @public */
+export function maxWidth(props: MaxWidthStyleProps): string | undefined {
+  return _responsiveClassName(options, props.maxWidth)
+}

package/src/css/props/maxWidth/types.ts

@@ -0,0 +1,11 @@
+import type {ContainerWidth} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type MaxWidth = ContainerWidth | 'auto' | 'fill'
+
+/** @public */
+export interface MaxWidthStyleProps {
+  maxWidth?: ResponsiveProp<MaxWidth>
+}

package/src/css/props/minHeight/minHeight.css.ts

@@ -0,0 +1,13 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {MinHeight} from './types'
+
+export const options: ResponsiveRuleOptions<MinHeight> = {
+  full: _responsiveStyle(layers.props, {
+    minHeight: '100%',
+  }),
+  0: _responsiveStyle(layers.props, {
+    minHeight: 0,
+  }),
+}

package/src/css/props/minHeight/minHeight.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './minHeight.css'
+import type {MinHeightStyleProps} from './types'
+
+/** @public */
+export function minHeight(props: MinHeightStyleProps): string | undefined {
+  return _responsiveClassName(options, props.minHeight)
+}

package/src/css/props/minHeight/types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type MinHeight = 0 | 'full'
+
+/** @public */
+export interface MinHeightStyleProps {
+  minHeight?: ResponsiveProp<MinHeight>
+}

package/src/css/props/minWidth/minWidth.css.ts

@@ -0,0 +1,25 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {MinWidth} from './types'
+
+export const options: ResponsiveRuleOptions<MinWidth> = {
+  0: _responsiveStyle(layers.props, {
+    minWidth: 0,
+  }),
+  auto: _responsiveStyle(layers.props, {
+    minWidth: 'auto',
+  }),
+  full: _responsiveStyle(layers.props, {
+    minWidth: '100%',
+  }),
+  min: _responsiveStyle(layers.props, {
+    minWidth: 'min-content',
+  }),
+  max: _responsiveStyle(layers.props, {
+    minWidth: 'max-content',
+  }),
+  fit: _responsiveStyle(layers.props, {
+    minWidth: 'fit-content',
+  }),
+}

package/src/css/props/minWidth/minWidth.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './minWidth.css'
+import type {MinWidthStyleProps} from './types'
+
+/** @public */
+export function minWidth(props: MinWidthStyleProps): string | undefined {
+  return _responsiveClassName(options, props.minWidth)
+}

package/src/css/props/minWidth/types.ts

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+/** @public */
+export interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}

package/src/css/props/outline/outline.css.ts

@@ -0,0 +1,10 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Outline} from './types'
+
+export const options: ResponsiveRuleOptions<Outline> = {
+  none: _responsiveStyle(layers.props, {
+    outline: 'none',
+  }),
+}

package/src/css/props/outline/outline.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './outline.css'
+import type {OutlineStyleProps} from './types'
+
+/** @public */
+export function outline(props: OutlineStyleProps): string | undefined {
+  return _responsiveClassName(options, props.outline)
+}

package/src/css/props/outline/types.ts

@@ -0,0 +1,7 @@
+/** @public */
+export type Outline = 'none'
+
+/** @public */
+export interface OutlineStyleProps {
+  outline?: Outline
+}

package/src/css/props/overflow/overflow.css.ts

@@ -0,0 +1,16 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Overflow} from './types'
+
+export const options: ResponsiveRuleOptions<Overflow> = {
+  visible: _responsiveStyle(layers.props, {
+    overflow: 'visible',
+  }),
+  hidden: _responsiveStyle(layers.props, {
+    overflow: 'hidden',
+  }),
+  auto: _responsiveStyle(layers.props, {
+    overflow: 'auto',
+  }),
+}

package/src/css/props/overflow/overflow.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './overflow.css'
+import type {OverflowStyleProps} from './types'
+
+/** @public */
+export function overflow(props: OverflowStyleProps): string | undefined {
+  return _responsiveClassName(options, props.overflow)
+}

package/src/css/props/overflow/types.ts

@@ -0,0 +1,11 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Overflow = 'visible' | 'hidden' | 'auto'
+
+/** @public */
+export interface OverflowStyleProps {
+  overflow?: ResponsiveProp<Overflow>
+  overflowX?: ResponsiveProp<Overflow>
+  overflowY?: ResponsiveProp<Overflow>
+}