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

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/{aspects → props}/height/index.ts

@@ -1 +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/{aspects → props}/index.ts

@@ -1,18 +1,31 @@
+export * from './alignItems'
 export * from './border'
 export * from './boxSizing'
 export * from './display'
 export * from './flex'
-export * from './flexItem'
+export * from './flexDirection'
+export * from './flexWrap'
 export * from './font'
 export * from './gap'
-export * from './grid'
-export * from './gridItem'
+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'

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/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/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/{aspects → props}/maxWidth/types.ts

@@ -2,7 +2,10 @@ 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<ContainerWidth | 'auto' | 'fill'>
+  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.utils, {
+    minHeight: '100%',
+  }),
+  0: _responsiveStyle(layers.utils, {
+    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) {
+  return _responsiveClassName(options, props.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.utils, {
+    minWidth: 0,
+  }),
+  auto: _responsiveStyle(layers.utils, {
+    minWidth: 'auto',
+  }),
+  full: _responsiveStyle(layers.utils, {
+    minWidth: '100%',
+  }),
+  min: _responsiveStyle(layers.utils, {
+    minWidth: 'min-content',
+  }),
+  max: _responsiveStyle(layers.utils, {
+    minWidth: 'max-content',
+  }),
+  fit: _responsiveStyle(layers.utils, {
+    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) {
+  return _responsiveClassName(options, props.minWidth)
+}

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

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

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.utils, {
+    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) {
+  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.utils, {
+    overflow: 'visible',
+  }),
+  hidden: _responsiveStyle(layers.utils, {
+    overflow: 'hidden',
+  }),
+  auto: _responsiveStyle(layers.utils, {
+    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) {
+  return _responsiveClassName(options, props.overflow)
+}

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

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