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

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

@@ -0,0 +1,13 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
+
+/** @public */
+export interface GridAutoFlowStyleProps {
+  /**
+   * @deprecated Use `gridAutoFlow` instead
+   */
+  autoFlow?: ResponsiveProp<GridAutoFlow>
+  gridAutoFlow?: ResponsiveProp<GridAutoFlow>
+}

package/src/css/props/gridAutoRows/gridAutoRows.css.ts

@@ -0,0 +1,19 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridAutoRows} from './types'
+
+export const options: ResponsiveRuleOptions<GridAutoRows> = {
+  auto: _responsiveStyle(layers.utils, {
+    gridAutoRows: 'auto',
+  }),
+  min: _responsiveStyle(layers.utils, {
+    gridAutoRows: 'min-content',
+  }),
+  max: _responsiveStyle(layers.utils, {
+    gridAutoRows: 'max-content',
+  }),
+  fr: _responsiveStyle(layers.utils, {
+    gridAutoRows: 'minmax(0, 1fr)',
+  }),
+}

package/src/css/props/gridAutoRows/gridAutoRows.ts

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

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

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

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

@@ -0,0 +1,13 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoRows = 'auto' | 'min' | 'max' | 'fr'
+
+/** @public */
+export interface GridAutoRowsStyleProps {
+  /**
+   * @deprecated Use `gridAutoRows` instead
+   */
+  autoRows?: ResponsiveProp<GridAutoRows>
+  gridAutoRows?: ResponsiveProp<GridAutoRows>
+}

package/src/css/props/gridColumn/gridColumn.css.ts

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

package/src/css/props/gridColumn/gridColumn.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridColumn.css'
+import type {GridColumn, GridColumnStyleProps} from './types'
+
+/** @public */
+export function gridColumn(props: GridColumnStyleProps) {
+  return _responsiveClassName(options, props.gridColumn ?? (props.column as GridColumn))
+}

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

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

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

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

package/src/css/props/gridColumnEnd/gridColumnEnd.css.ts

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

package/src/css/props/gridColumnEnd/gridColumnEnd.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridColumnEnd.css'
+import type {GridColumnEnd, GridColumnEndStyleProps} from './types'
+
+/** @public */
+export function gridColumnEnd(props: GridColumnEndStyleProps) {
+  return _responsiveClassName(options, props.gridColumnEnd ?? (props.columnEnd as GridColumnEnd))
+}

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

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

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

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

package/src/css/props/gridColumnStart/gridColumnStart.css.ts

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

package/src/css/props/gridColumnStart/gridColumnStart.ts

@@ -0,0 +1,11 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridColumnStart.css'
+import type {GridColumnStart, GridColumnStartStyleProps} from './types'
+
+/** @public */
+export function gridColumnStart(props: GridColumnStartStyleProps) {
+  return _responsiveClassName(
+    options,
+    props.gridColumnStart ?? (props.columnStart as GridColumnStart),
+  )
+}

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

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

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

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

package/src/css/props/gridRow/gridRow.css.ts

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

package/src/css/props/gridRow/gridRow.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridRow.css'
+import type {GridRow, GridRowStyleProps} from './types'
+
+/** @public */
+export function gridRow(props: GridRowStyleProps) {
+  return _responsiveClassName(options, props.gridRow ?? (props.row as GridRow))
+}

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

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

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

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

package/src/css/props/gridRowEnd/gridRowEnd.css.ts

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

package/src/css/props/gridRowEnd/gridRowEnd.ts

@@ -0,0 +1,8 @@
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {options} from './gridRowEnd.css'
+import type {GridRowEnd, GridRowEndStyleProps} from './types'
+
+/** @public */
+export function gridRowEnd(props: GridRowEndStyleProps) {
+  return _responsiveClassName(options, props.gridRowEnd ?? (props.rowEnd as GridRowEnd))
+}

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

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

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

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

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