@sanity/ui 3.0.2 → 4.0.0-static.2

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.props, {
+        padding: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingXOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        paddingLeft: vars.space[index],
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingYOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        paddingTop: vars.space[index],
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingTopOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        paddingTop: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingRightOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        paddingRight: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingBottomOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        paddingBottom: vars.space[index],
+      }),
+    ]),
+  ),
+}
+
+export const paddingLeftOptions: ResponsiveRuleOptions<Padding> = {
+  ..._fromEntries(
+    SPACE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        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): string | undefined {
+  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.props, {
+    pointerEvents: 'auto',
+  }),
+  none: _responsiveStyle(layers.props, {
+    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): string | undefined {
+  return _responsiveClassName(options, props.pointerEvents)
+}

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

@@ -0,0 +1,7 @@
+/** @public */
+export type PointerEvents = 'auto' | 'none'
+
+/** @public */
+export interface PointerEventsStyleProps {
+  pointerEvents?: 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.props, {
+    position: 'absolute',
+  }),
+  fixed: _responsiveStyle(layers.props, {
+    position: 'fixed',
+  }),
+  relative: _responsiveStyle(layers.props, {
+    position: 'relative',
+  }),
+  static: _responsiveStyle(layers.props, {
+    position: 'static',
+  }),
+  sticky: _responsiveStyle(layers.props, {
+    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): string | undefined {
+  return _responsiveClassName(options, props.position)
+}

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

@@ -0,0 +1,9 @@
+import type {ResponsiveProp} from '../../types'
+
+/** @public */
+export type Position = 'absolute' | 'fixed' | 'relative' | 'static' | 'sticky'
+
+/** @public */
+export interface PositionStyleProps {
+  position?: ResponsiveProp<Position>
+}

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.props, {
+    borderRadius: '9999px',
+  }),
+  ..._fromEntries(
+    RADIUS.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        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): string | undefined {
+  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.props, {
+        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): string | undefined {
+  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/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.props, {
+    textAlign: 'left',
+  }),
+  right: _responsiveStyle(layers.props, {
+    textAlign: 'right',
+  }),
+  center: _responsiveStyle(layers.props, {
+    textAlign: 'center',
+  }),
+  justify: _responsiveStyle(layers.props, {
+    textAlign: 'justify',
+  }),
+  initial: _responsiveStyle(layers.props, {
+    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): string | undefined {
+  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,19 @@
+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.props, {
+    display: 'block',
+    overflow: 'clip',
+    textOverflow: 'clip',
+    whiteSpace: 'nowrap',
+  }),
+  ellipsis: _responsiveStyle(layers.props, {
+    display: 'block',
+    overflow: 'clip',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  }),
+}

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): string | undefined {
+  return _responsiveClassName(options, props.textOverflow)
+}

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

@@ -0,0 +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?: 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' | 'min'
+
+/** @public */
+export interface WidthStyleProps {
+  width?: ResponsiveProp<Width>
+}

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

@@ -0,0 +1,31 @@
+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.props, {
+    width: 'auto',
+  }),
+  fill: _responsiveStyle(layers.props, {
+    width: '100%',
+  }),
+  min: _responsiveStyle(layers.props, {
+    width: 'min-content',
+  }),
+  stretch: _responsiveStyle(layers.props, {
+    width: 'stretch',
+  }),
+  ..._fromEntries(
+    CONTAINER_SCALE.map((index) => [
+      index,
+      _responsiveStyle(layers.props, {
+        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): string | undefined {
+  return _responsiveClassName(options, props.width)
+}