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

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

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

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/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/index.ts

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

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

package/src/css/props/padding/padding.css.ts

@@ -0,0 +1,87 @@
+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 {Padding} from './types'
+
+export const paddingOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        padding: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingXOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingLeft: vars.space[index],
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingYOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingTop: vars.space[index],
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingTopOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingTop: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingRightOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingBottomOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingLeftOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        paddingLeft: vars.space[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/padding/padding.ts

@@ -0,0 +1,25 @@
+import {_composeClassNames} from '../../_composeClassNames'
+import {_responsiveClassName} from '../../_responsiveClassName'
+import {
+  paddingBottomOptions,
+  paddingLeftOptions,
+  paddingOptions,
+  paddingRightOptions,
+  paddingTopOptions,
+  paddingXOptions,
+  paddingYOptions,
+} from './padding.css'
+import type {PaddingStyleProps} from './types'
+
+/** @public */
+export function padding(props: PaddingStyleProps) {
+  return _composeClassNames(
+    _responsiveClassName(paddingOptions, props.padding),
+    _responsiveClassName(paddingXOptions, props.paddingX),
+    _responsiveClassName(paddingYOptions, props.paddingY),
+    _responsiveClassName(paddingTopOptions, props.paddingTop),
+    _responsiveClassName(paddingRightOptions, props.paddingRight),
+    _responsiveClassName(paddingBottomOptions, props.paddingBottom),
+    _responsiveClassName(paddingLeftOptions, props.paddingLeft),
+  )
+}

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

@@ -0,0 +1,17 @@
+import type {Space} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Padding = Space
+
+/** @public */
+export interface PaddingStyleProps {
+  padding?: ResponsiveProp<Padding>
+  paddingTop?: ResponsiveProp<Padding>
+  paddingRight?: ResponsiveProp<Padding>
+  paddingBottom?: ResponsiveProp<Padding>
+  paddingLeft?: ResponsiveProp<Padding>
+  paddingX?: ResponsiveProp<Padding>
+  paddingY?: ResponsiveProp<Padding>
+}

package/src/css/props/pointerEvents/pointerEvents.css.ts

@@ -0,0 +1,13 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {PointerEvents} from './types'
+
+export const options: ResponsiveRuleOptions<PointerEvents> = {
+  auto: _responsiveStyle(layers.utils, {
+    pointerEvents: 'auto',
+  }),
+  none: _responsiveStyle(layers.utils, {
+    pointerEvents: 'none',
+  }),
+}

package/src/css/props/pointerEvents/pointerEvents.ts

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

package/src/css/props/position/position.css.ts

@@ -0,0 +1,22 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {Position} from './types'
+
+export const options: ResponsiveRuleOptions<Position> = {
+  absolute: _responsiveStyle(layers.utils, {
+    position: 'absolute',
+  }),
+  fixed: _responsiveStyle(layers.utils, {
+    position: 'fixed',
+  }),
+  relative: _responsiveStyle(layers.utils, {
+    position: 'relative',
+  }),
+  static: _responsiveStyle(layers.utils, {
+    position: 'static',
+  }),
+  sticky: _responsiveStyle(layers.utils, {
+    position: 'sticky',
+  }),
+}

package/src/css/props/position/position.ts

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

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

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '../../types'
+import type {ResponsiveProp} from '../../types'
 
 /** @public */
 export type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'

package/src/css/props/radius/radius.css.ts

@@ -0,0 +1,21 @@
+import {RADIUS, type Radius} 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 options: ResponsiveRuleOptions<Radius | 'full'> = {
+  full: _responsiveStyle(layers.utils, {
+    borderRadius: '9999px',
+  }),
+  ..._fromEntries(
+    RADIUS.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        borderRadius: vars.radius[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/radius/radius.ts

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

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

@@ -0,0 +1,8 @@
+import type {Radius} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface RadiusStyleProps {
+  radius?: ResponsiveProp<Radius | 'full'>
+}

package/src/css/props/shadow/shadow.css.ts

@@ -0,0 +1,23 @@
+import {SHADOW, type Shadow} 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 options: ResponsiveRuleOptions<Shadow> = {
+  ..._fromEntries(
+    SHADOW.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        boxShadow: [
+          `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
+          `${vars.shadow[index].umbra} ${vars.color.shadow.umbra}`,
+          `${vars.shadow[index].penumbra} ${vars.color.shadow.penumbra}`,
+          `${vars.shadow[index].ambient} ${vars.color.shadow.ambient}`,
+        ].join(', '),
+      }),
+    ]),
+  ),
+}

package/src/css/props/shadow/shadow.ts

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

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

@@ -0,0 +1,8 @@
+import type {Shadow} from '@sanity/ui/theme'
+
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface ShadowStyleProps {
+  shadow?: ResponsiveProp<Shadow>
+}

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

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

package/src/css/props/textAlign/textAlign.css.ts

@@ -0,0 +1,22 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {TextAlign} from './types'
+
+export const options: ResponsiveRuleOptions<TextAlign> = {
+  left: _responsiveStyle(layers.utils, {
+    textAlign: 'left',
+  }),
+  right: _responsiveStyle(layers.utils, {
+    textAlign: 'right',
+  }),
+  center: _responsiveStyle(layers.utils, {
+    textAlign: 'center',
+  }),
+  justify: _responsiveStyle(layers.utils, {
+    textAlign: 'justify',
+  }),
+  initial: _responsiveStyle(layers.utils, {
+    textAlign: 'initial',
+  }),
+}

package/src/css/props/textAlign/textAlign.ts

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

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

@@ -0,0 +1,7 @@
+/** @public */
+export type TextAlign = 'left' | 'right' | 'center' | 'justify' | 'initial'
+
+/** @public */
+export interface TextAlignStyleProps {
+  textAlign?: TextAlign
+}

package/src/css/props/textOverflow/textOverflow.css.ts

@@ -0,0 +1,13 @@
+import {_responsiveStyle} from '../../_responsiveStyle.css'
+import {layers} from '../../layers.css'
+import type {ResponsiveRuleOptions} from '../../types'
+import type {TextOverflow} from './types'
+
+export const options: ResponsiveRuleOptions<TextOverflow> = {
+  clip: _responsiveStyle(layers.utils, {
+    textOverflow: 'clip',
+  }),
+  ellipsis: _responsiveStyle(layers.utils, {
+    textOverflow: 'ellipsis',
+  }),
+}

package/src/css/props/textOverflow/textOverflow.ts

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

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

@@ -1,8 +1,12 @@
+/** @public */
+export type TextOverflow = 'ellipsis' | 'clip'
+
+/** @public */
 export interface TextOverflowStyleProps {
   /**
    * Controls how overflowing text is treated.
    * Use `textOverflow="ellipsis"` to render text as a single line which is concatenated with a `…` symbol.
    * @beta
    */
-  textOverflow?: 'ellipsis' | 'clip'
+  textOverflow?: TextOverflow
 }

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

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

package/src/css/props/width/width.css.ts

@@ -0,0 +1,28 @@
+import {CONTAINER_SCALE} 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 {Width} from './types'
+
+export const options: ResponsiveRuleOptions<Width> = {
+  auto: _responsiveStyle(layers.utils, {
+    width: 'auto',
+  }),
+  fill: _responsiveStyle(layers.utils, {
+    width: '100%',
+  }),
+  stretch: _responsiveStyle(layers.utils, {
+    width: 'stretch',
+  }),
+  ..._fromEntries(
+    CONTAINER_SCALE.map((index) => [
+      index,
+      _responsiveStyle(layers.utils, {
+        width: vars.container[index],
+      }),
+    ]),
+  ),
+}

package/src/css/props/width/width.ts

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