@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

package/src/css/props/gridRowStart/gridRowStart.css.ts

@@ -0,0 +1,46 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridRowStart} from './types'
+
+export const options: ResponsiveRuleOptions<GridRowStart> = {
+  auto: _responsiveStyle(layers.utils, {
+    gridRowStart: 'auto',
+  }),
+  1: _responsiveStyle(layers.utils, {
+    gridRowStart: '1',
+  }),
+  2: _responsiveStyle(layers.utils, {
+    gridRowStart: '2',
+  }),
+  3: _responsiveStyle(layers.utils, {
+    gridRowStart: '3',
+  }),
+  4: _responsiveStyle(layers.utils, {
+    gridRowStart: '4',
+  }),
+  5: _responsiveStyle(layers.utils, {
+    gridRowStart: '5',
+  }),
+  6: _responsiveStyle(layers.utils, {
+    gridRowStart: '6',
+  }),
+  7: _responsiveStyle(layers.utils, {
+    gridRowStart: '7',
+  }),
+  8: _responsiveStyle(layers.utils, {
+    gridRowStart: '8',
+  }),
+  9: _responsiveStyle(layers.utils, {
+    gridRowStart: '9',
+  }),
+  10: _responsiveStyle(layers.utils, {
+    gridRowStart: '10',
+  }),
+  11: _responsiveStyle(layers.utils, {
+    gridRowStart: '11',
+  }),
+  12: _responsiveStyle(layers.utils, {
+    gridRowStart: '12',
+  }),
+}

package/src/css/props/gridRowStart/gridRowStart.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridRowStart.css'
+import type {GridRowStart, GridRowStartStyleProps} from './types'
+
+/** @public */
+export function gridRowStart(props: GridRowStartStyleProps) {
+  return _responsiveClassName(options, props.gridRowStart ?? (props.rowStart as GridRowStart))
+}

package/src/css/props/gridRowStart/index.ts

@@ -0,0 +1,2 @@
+export * from './gridRowStart'
+export * from './types'

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

@@ -0,0 +1,19 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridRowStart = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/**
+ * @public
+ * @deprecated Use `GridRowStart` instead
+ */
+export type GridItemRowStart = 'auto' | number
+
+/** @public */
+export interface GridRowStartStyleProps {
+  /**
+   * @deprecated Use `gridRowStart` instead
+   */
+  rowStart?: ResponsiveProp<GridItemRowStart>
+  gridRowStart?: ResponsiveProp<GridRowStart>
+}

package/src/css/props/gridTemplateColumns/gridTemplateColumns.css.ts

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

package/src/css/props/gridTemplateColumns/gridTemplateColumns.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridTemplateColumns.css'
+import type {GridTemplateColumnsStyleProps} from './types'
+
+/** @public */
+export function gridTemplateColumns(props: GridTemplateColumnsStyleProps) {
+  return _responsiveClassName(options, props.gridTemplateColumns ?? props.columns)
+}

package/src/css/props/gridTemplateColumns/index.ts

@@ -0,0 +1,2 @@
+export * from './gridTemplateColumns'
+export * from './types'

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

@@ -0,0 +1,19 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridTemplateColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/**
+ * @public
+ * @deprecated Use `GridTemplateColumns` instead
+ */
+export type Columns = GridTemplateColumns
+
+/** @public */
+export interface GridTemplateColumnsStyleProps {
+  /**
+   * @deprecated Use `gridTemplateColumns` instead
+   */
+  columns?: ResponsiveProp<Columns>
+  gridTemplateColumns?: ResponsiveProp<GridTemplateColumns>
+}

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.utils, {
+    gridTemplateRows: 'repeat(1, 1fr)',
+  }),
+  2: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(2, 1fr)',
+  }),
+  3: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(3, 1fr)',
+  }),
+  4: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(4, 1fr)',
+  }),
+  5: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(5, 1fr)',
+  }),
+  6: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(6, 1fr)',
+  }),
+  7: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(7, 1fr)',
+  }),
+  8: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(8, 1fr)',
+  }),
+  9: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(9, 1fr)',
+  }),
+  10: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(10, 1fr)',
+  }),
+  11: _responsiveStyle(layers.utils, {
+    gridTemplateRows: 'repeat(11, 1fr)',
+  }),
+  12: _responsiveStyle(layers.utils, {
+    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) {
+  return _responsiveClassName(options, props.gridTemplateRows ?? props.rows)
+}

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

@@ -0,0 +1,2 @@
+export * from './gridTemplateRows'
+export * from './types'

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

@@ -0,0 +1,19 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridTemplateRows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+
+/**
+ * @public
+ * @deprecated Use `GridTemplateRows` instead
+ */
+export type Rows = GridTemplateRows
+
+/** @public */
+export interface GridTemplateRowsStyleProps {
+  /**
+   * @deprecated Use `gridTemplateRows` instead
+   */
+  rows?: ResponsiveProp<Rows>
+  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.utils, {
+    height: '100%',
+  }),
+  auto: _responsiveStyle(layers.utils, {
+    height: 'auto',
+  }),
+  min: _responsiveStyle(layers.utils, {
+    height: 'min-content',
+  }),
+  max: _responsiveStyle(layers.utils, {
+    height: 'max-content',
+  }),
+  fit: _responsiveStyle(layers.utils, {
+    height: 'fit-content',
+  }),
+  stretch: _responsiveStyle(layers.utils, {
+    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) {
+  return _responsiveClassName(options, props.height)
+}

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

@@ -0,0 +1,2 @@
+export * from './height'
+export * from './types'

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

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

package/src/css/props/index.ts

@@ -0,0 +1,37 @@
+export * from './alignItems'
+export * from './border'
+export * from './boxSizing'
+export * from './display'
+export * from './flex'
+export * from './flexDirection'
+export * from './flexWrap'
+export * from './font'
+export * from './gap'
+export * from './gridAutoColumns'
+export * from './gridAutoFlow'
+export * from './gridAutoRows'
+export * from './gridColumn'
+export * from './gridColumnEnd'
+export * from './gridColumnStart'
+export * from './gridRow'
+export * from './gridRowEnd'
+export * from './gridRowStart'
+export * from './gridTemplateColumns'
+export * from './gridTemplateRows'
+export * from './height'
+export * from './inset'
+export * from './justifyContent'
+export * from './margin'
+export * from './maxWidth'
+export * from './minHeight'
+export * from './minWidth'
+export * from './outline'
+export * from './overflow'
+export * from './padding'
+export * from './pointerEvents'
+export * from './position'
+export * from './radius'
+export * from './shadow'
+export * from './textAlign'
+export * from './textOverflow'
+export * from './width'

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.utils, {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+  }),
+}
+
+export const insetTopOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.utils, {
+    top: 0,
+  }),
+}
+
+export const insetRightOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.utils, {
+    right: 0,
+  }),
+}
+
+export const insetBottomOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.utils, {
+    bottom: 0,
+  }),
+}
+
+export const insetLeftOptions: ResponsiveRuleOptions<Inset> = {
+  0: _responsiveStyle(layers.utils, {
+    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) {
+  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/{styles → props}/inset/types.ts

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Inset = 0

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

@@ -0,0 +1,2 @@
+export * from './justifyContent'
+export * from './types'

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.utils, {
+    justifyContent: 'flex-start',
+  }),
+  'flex-end': _responsiveStyle(layers.utils, {
+    justifyContent: 'flex-end',
+  }),
+  'center': _responsiveStyle(layers.utils, {
+    justifyContent: 'center',
+  }),
+  'space-between': _responsiveStyle(layers.utils, {
+    justifyContent: 'space-between',
+  }),
+  'space-around': _responsiveStyle(layers.utils, {
+    justifyContent: 'space-around',
+  }),
+  'space-evenly': _responsiveStyle(layers.utils, {
+    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) {
+  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.utils, {
+    margin: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        margin: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginXOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginLeft: 'auto',
+    marginRight: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        marginLeft: vars.space[index],
+        marginRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginYOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginTop: 'auto',
+    marginBottom: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        marginTop: vars.space[index],
+        marginBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginTopOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginTop: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        marginTop: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginRightOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginRight: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        marginRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginBottomOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginBottom: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        marginBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const marginLeftOptions: ResponsiveRuleOptions<Margin> = {
+  auto: _responsiveStyle(layers.utils, {
+    marginLeft: 'auto',
+  }),
+
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        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) {
+  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.utils, {
+    maxWidth: 'none',
+  }),
+  fill: _responsiveStyle(layers.utils, {
+    maxWidth: '100%',
+  }),
+  0: _responsiveStyle(layers.utils, {
+    maxWidth: vars.container[0],
+  }),
+  1: _responsiveStyle(layers.utils, {
+    maxWidth: vars.container[1],
+  }),
+  2: _responsiveStyle(layers.utils, {
+    maxWidth: vars.container[2],
+  }),
+  3: _responsiveStyle(layers.utils, {
+    maxWidth: vars.container[3],
+  }),
+  4: _responsiveStyle(layers.utils, {
+    maxWidth: vars.container[4],
+  }),
+  5: _responsiveStyle(layers.utils, {
+    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) {
+  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>
+}