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

package/src/css/props/gap/gap.css.ts

@@ -0,0 +1,40 @@
+import {SPACE, type 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'
+
+export const gapOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        gap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapXOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        columnGap: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const gapYOptions: ResponsiveRuleOptions<Space> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        rowGap: vars.space[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/gap/gap.ts

@@ -0,0 +1,13 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {gapOptions, gapXOptions, gapYOptions} from './gap.css'
+import type {GapStyleProps} from './types'
+
+/** @public */
+export function gap(props: GapStyleProps) {
+  return _composeClassNames(
+    _responsiveClassName(gapOptions, props.gap),
+    _responsiveClassName(gapXOptions, props.gapX),
+    _responsiveClassName(gapYOptions, props.gapY),
+  )
+}

package/src/css/{styles → props}/gap/types.ts

@@ -1,6 +1,6 @@
-import {Space} from '@sanity/ui/theme'
+import type {Space} from '@sanity/ui/theme'
 
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export interface GapStyleProps {

package/src/css/props/gridAutoColumns/gridAutoColumns.css.ts

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

package/src/css/props/gridAutoColumns/gridAutoColumns.ts

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

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

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

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

@@ -0,0 +1,19 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type GridAutoColumns = 'auto' | 'min' | 'max' | 'fr'
+
+/**
+ * @public
+ * @deprecated Use `GridAutoColumns` instead
+ * */
+export type GridAutoCols = GridAutoColumns
+
+/** @public */
+export interface GridAutoColumnsStyleProps {
+  /**
+   * @deprecated Use `gridAutoColumns` instead
+   */
+  autoCols?: ResponsiveProp<GridAutoCols>
+  gridAutoColumns?: ResponsiveProp<GridAutoColumns>
+}

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

@@ -0,0 +1,19 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {GridAutoFlow} from './types'
+
+export const options: ResponsiveRuleOptions<GridAutoFlow> = {
+  'row': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'row',
+  }),
+  'column': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'column-content',
+  }),
+  'row dense': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'row dense',
+  }),
+  'column dense': _responsiveStyle(layers.utils, {
+    gridAutoFlow: 'column dense',
+  }),
+}

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

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

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

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

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