@sanity/ui 2.9.0-corel.0 → 3.0.0-static.0

package/src/css/styles/gap/rules.ts

@@ -0,0 +1,33 @@
+import {SPACE} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const gapRules: Rules = {
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`g-${space}`, {
+        gap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gx-${space}`, {
+        columnGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gy-${space}`, {
+        rowGap: space === 0.5 ? 'calc(var(--space-1) / 2)' : vars.space[space],
+      }),
+    }
+  }, {}),
+}

package/src/css/styles/gap/types.ts

@@ -0,0 +1,9 @@
+import {Space} from '@sanity/ui/theme'
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface GapStyleProps {
+  gap?: ResponsiveProp<Space>
+  gapX?: ResponsiveProp<Space>
+  gapY?: ResponsiveProp<Space>
+}

package/src/css/styles/grid/rules.ts

@@ -0,0 +1,35 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const gridRules: Rules = {
+  // autoCols
+  ...responsiveRules('auto-cols-auto', {gridAutoColumns: 'auto'}),
+  ...responsiveRules('auto-cols-min', {gridAutoColumns: 'min'}),
+  ...responsiveRules('auto-cols-max', {gridAutoColumns: 'max'}),
+  ...responsiveRules('auto-cols-fr', {gridAutoColumns: 'fr'}),
+
+  // autoFlow
+  ...responsiveRules('auto-flow-row', {gridAutoFlow: 'row'}),
+  ...responsiveRules('auto-flow-column', {gridAutoFlow: 'column'}),
+  ...responsiveRules('auto-flow-row-dense', {gridAutoFlow: 'row dense'}),
+  ...responsiveRules('auto-flow-column-dense', {gridAutoFlow: 'column dense'}),
+
+  // autoRows
+  ...responsiveRules('auto-rows-auto', {gridAutoRows: 'auto'}),
+  ...responsiveRules('auto-rows-min', {gridAutoRows: 'min-content'}),
+  ...responsiveRules('auto-rows-max', {gridAutoRows: 'max-content'}),
+  // ...responsiveRules('auto-rows-fr', {gridAutoRows: 'fr'}),
+
+  // columns
+  ...responsiveRules('columns-1', {gridTemplateColumns: 'repeat(1, 1fr)'}),
+  ...responsiveRules('columns-2', {gridTemplateColumns: 'repeat(2, 1fr)'}),
+  ...responsiveRules('columns-3', {gridTemplateColumns: 'repeat(3, 1fr)'}),
+  ...responsiveRules('columns-4', {gridTemplateColumns: 'repeat(4, 1fr)'}),
+  ...responsiveRules('columns-5', {gridTemplateColumns: 'repeat(5, 1fr)'}),
+  ...responsiveRules('columns-6', {gridTemplateColumns: 'repeat(6, 1fr)'}),
+  ...responsiveRules('columns-7', {gridTemplateColumns: 'repeat(7, 1fr)'}),
+  ...responsiveRules('columns-8', {gridTemplateColumns: 'repeat(8, 1fr)'}),
+  ...responsiveRules('columns-9', {gridTemplateColumns: 'repeat(9, 1fr)'}),
+  ...responsiveRules('columns-10', {gridTemplateColumns: 'repeat(10, 1fr)'}),
+  ...responsiveRules('columns-12', {gridTemplateColumns: 'repeat(12, 1fr)'}),
+}

package/src/css/styles/gridItem/gridItem.ts

@@ -0,0 +1,15 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {GridItemStyleProps} from './types'
+
+/** @public */
+export function gridItem(props: GridItemStyleProps): string {
+  return composeClassNames(
+    _resp(`col`, props.column),
+    _resp(`col-start`, props.columnStart),
+    _resp(`col-end`, props.columnEnd),
+    _resp(`row`, props.row),
+    _resp(`row-start`, props.rowStart),
+    _resp(`row-end`, props.rowEnd),
+  )
+}

package/src/css/styles/gridItem/index.ts

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

package/src/css/styles/gridItem/rules.ts

@@ -0,0 +1,96 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const gridItemRules: Rules = {
+  // column
+  ...responsiveRules('col-auto', {gridColumn: `span 1 / span 1`}),
+  ...responsiveRules('col-full', {gridColumn: `1 / -1`}),
+  ...responsiveRules('col-1', {gridColumn: `span 1 / span 1`}),
+  ...responsiveRules('col-2', {gridColumn: `span 2 / span 2`}),
+  ...responsiveRules('col-3', {gridColumn: `span 3 / span 3`}),
+  ...responsiveRules('col-4', {gridColumn: `span 4 / span 4`}),
+  ...responsiveRules('col-5', {gridColumn: `span 5 / span 5`}),
+  ...responsiveRules('col-6', {gridColumn: `span 6 / span 6`}),
+  ...responsiveRules('col-7', {gridColumn: `span 7 / span 7`}),
+  ...responsiveRules('col-8', {gridColumn: `span 8 / span 8`}),
+  ...responsiveRules('col-9', {gridColumn: `span 9 / span 9`}),
+  ...responsiveRules('col-10', {gridColumn: `span 10 / span 10`}),
+  ...responsiveRules('col-11', {gridColumn: `span 11 / span 11`}),
+  ...responsiveRules('col-12', {gridColumn: `span 12 / span 12`}),
+
+  // columnStart
+  ...responsiveRules('col-start-auto', {gridColumnStart: 'auto'}),
+  ...responsiveRules('col-start-1', {gridColumnStart: '1'}),
+  ...responsiveRules('col-start-2', {gridColumnStart: '2'}),
+  ...responsiveRules('col-start-3', {gridColumnStart: '3'}),
+  ...responsiveRules('col-start-4', {gridColumnStart: '4'}),
+  ...responsiveRules('col-start-5', {gridColumnStart: '5'}),
+  ...responsiveRules('col-start-6', {gridColumnStart: '6'}),
+  ...responsiveRules('col-start-7', {gridColumnStart: '7'}),
+  ...responsiveRules('col-start-8', {gridColumnStart: '8'}),
+  ...responsiveRules('col-start-9', {gridColumnStart: '9'}),
+  ...responsiveRules('col-start-10', {gridColumnStart: '10'}),
+  ...responsiveRules('col-start-11', {gridColumnStart: '11'}),
+  ...responsiveRules('col-start-12', {gridColumnStart: '12'}),
+
+  // columnEnd
+  ...responsiveRules('col-end-auto', {gridColumnEnd: 'auto'}),
+  ...responsiveRules('col-end-1', {gridColumnEnd: '1'}),
+  ...responsiveRules('col-end-2', {gridColumnEnd: '2'}),
+  ...responsiveRules('col-end-3', {gridColumnEnd: '3'}),
+  ...responsiveRules('col-end-4', {gridColumnEnd: '4'}),
+  ...responsiveRules('col-end-5', {gridColumnEnd: '5'}),
+  ...responsiveRules('col-end-6', {gridColumnEnd: '6'}),
+  ...responsiveRules('col-end-7', {gridColumnEnd: '7'}),
+  ...responsiveRules('col-end-8', {gridColumnEnd: '8'}),
+  ...responsiveRules('col-end-9', {gridColumnEnd: '9'}),
+  ...responsiveRules('col-end-10', {gridColumnEnd: '10'}),
+  ...responsiveRules('col-end-11', {gridColumnEnd: '11'}),
+  ...responsiveRules('col-end-12', {gridColumnEnd: '12'}),
+
+  // row
+  ...responsiveRules('row-auto', {gridRow: `span 1 / span 1`}),
+  ...responsiveRules('row-full', {gridRow: `1 / -1`}),
+  ...responsiveRules('row-1', {gridRow: `span 1 / span 1`}),
+  ...responsiveRules('row-2', {gridRow: `span 2 / span 2`}),
+  ...responsiveRules('row-3', {gridRow: `span 3 / span 3`}),
+  ...responsiveRules('row-4', {gridRow: `span 4 / span 4`}),
+  ...responsiveRules('row-5', {gridRow: `span 5 / span 5`}),
+  ...responsiveRules('row-6', {gridRow: `span 6 / span 6`}),
+  ...responsiveRules('row-7', {gridRow: `span 7 / span 7`}),
+  ...responsiveRules('row-8', {gridRow: `span 8 / span 8`}),
+  ...responsiveRules('row-9', {gridRow: `span 9 / span 9`}),
+  ...responsiveRules('row-10', {gridRow: `span 10 / span 10`}),
+  ...responsiveRules('row-11', {gridRow: `span 11 / span 11`}),
+  ...responsiveRules('row-12', {gridRow: `span 12 / span 12`}),
+
+  // rowStart
+  ...responsiveRules('row-start-auto', {gridRowStart: 'auto'}),
+  ...responsiveRules('row-start-1', {gridRowStart: '1'}),
+  ...responsiveRules('row-start-2', {gridRowStart: '2'}),
+  ...responsiveRules('row-start-3', {gridRowStart: '3'}),
+  ...responsiveRules('row-start-4', {gridRowStart: '4'}),
+  ...responsiveRules('row-start-5', {gridRowStart: '5'}),
+  ...responsiveRules('row-start-6', {gridRowStart: '6'}),
+  ...responsiveRules('row-start-7', {gridRowStart: '7'}),
+  ...responsiveRules('row-start-8', {gridRowStart: '8'}),
+  ...responsiveRules('row-start-9', {gridRowStart: '9'}),
+  ...responsiveRules('row-start-10', {gridRowStart: '10'}),
+  ...responsiveRules('row-start-11', {gridRowStart: '11'}),
+  ...responsiveRules('row-start-12', {gridRowStart: '12'}),
+
+  // rowEnd
+  ...responsiveRules('row-end-auto', {gridRowEnd: 'auto'}),
+  ...responsiveRules('row-end-1', {gridRowEnd: '1'}),
+  ...responsiveRules('row-end-2', {gridRowEnd: '2'}),
+  ...responsiveRules('row-end-3', {gridRowEnd: '3'}),
+  ...responsiveRules('row-end-4', {gridRowEnd: '4'}),
+  ...responsiveRules('row-end-5', {gridRowEnd: '5'}),
+  ...responsiveRules('row-end-6', {gridRowEnd: '6'}),
+  ...responsiveRules('row-end-7', {gridRowEnd: '7'}),
+  ...responsiveRules('row-end-8', {gridRowEnd: '8'}),
+  ...responsiveRules('row-end-9', {gridRowEnd: '9'}),
+  ...responsiveRules('row-end-10', {gridRowEnd: '10'}),
+  ...responsiveRules('row-end-11', {gridRowEnd: '11'}),
+  ...responsiveRules('row-end-12', {gridRowEnd: '12'}),
+}

package/src/css/styles/gridItem/types.ts

@@ -0,0 +1,41 @@
+import {ResponsiveProp} from '../../types'
+
+/**
+ * @public
+ */
+export type GridItemColumn = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemColumnEnd = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRow = 'auto' | 'full' | number
+
+/**
+ * @public
+ */
+export type GridItemRowStart = 'auto' | number
+
+/**
+ * @public
+ */
+export type GridItemRowEnd = 'auto' | number
+
+export interface GridItemStyleProps {
+  column?: ResponsiveProp<GridItemColumn>
+  columnStart?: ResponsiveProp<GridItemColumnStart>
+  columnEnd?: ResponsiveProp<GridItemColumnEnd>
+
+  row?: ResponsiveProp<GridItemRow>
+  rowStart?: ResponsiveProp<GridItemRowStart>
+  rowEnd?: ResponsiveProp<GridItemRowEnd>
+}

package/src/css/styles/height/rules.ts

@@ -0,0 +1,7 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const heightRules: Rules = {
+  ...responsiveRules('h-fill', {height: '100%'}),
+  ...responsiveRules('h-stretch', {height: 'stretch'}),
+}

package/src/css/styles/margin/index.ts

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

package/src/css/styles/margin/margin.ts

@@ -0,0 +1,15 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {MarginStyleProps} from './types'
+
+export function margin(props: MarginStyleProps): string {
+  return composeClassNames(
+    _resp('m', props.margin),
+    _resp('mx', props.marginX),
+    _resp('my', props.marginY),
+    _resp('mt', props.marginTop),
+    _resp('mr', props.marginRight),
+    _resp('mb', props.marginBottom),
+    _resp('ml', props.marginLeft),
+  )
+}

package/src/css/styles/margin/rules.ts

@@ -0,0 +1,59 @@
+import {SPACE} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const marginRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`m-${space}`, {margin: vars.space[space]}),
+  }
+}, {})
+
+export const marginXRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`mx-${space}`, {
+      marginLeft: vars.space[space],
+      marginRight: vars.space[space],
+    }),
+  }
+}, {})
+
+export const marginYRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`my-${space}`, {
+      marginTop: vars.space[space],
+      marginBottom: vars.space[space],
+    }),
+  }
+}, {})
+
+export const marginTopRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`mt-${space}`, {marginTop: vars.space[space]}),
+  }
+}, {})
+
+export const marginRightRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`mr-${space}`, {marginRight: vars.space[space]}),
+  }
+}, {})
+
+export const marginBottomRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`mb-${space}`, {marginBottom: vars.space[space]}),
+  }
+}, {})
+
+export const marginLeftRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`ml-${space}`, {marginLeft: vars.space[space]}),
+  }
+}, {})

package/src/css/styles/margin/types.ts

@@ -0,0 +1,11 @@
+import {ResponsiveProp} from '../../types'
+
+export interface MarginStyleProps {
+  margin?: ResponsiveProp<number>
+  marginTop?: ResponsiveProp<number>
+  marginRight?: ResponsiveProp<number>
+  marginBottom?: ResponsiveProp<number>
+  marginLeft?: ResponsiveProp<number>
+  marginX?: ResponsiveProp<number>
+  marginY?: ResponsiveProp<number>
+}

package/src/css/styles/maxWidth/index.ts

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

package/src/css/styles/maxWidth/maxWidth.ts

@@ -0,0 +1,6 @@
+import {_resp} from '../../_resp'
+import {MaxWidthStyleProps} from './types'
+
+export function maxWidth(props: MaxWidthStyleProps): string {
+  return _resp('max-w', props.maxWidth) ?? ''
+}

package/src/css/styles/maxWidth/rules.ts

@@ -0,0 +1,36 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const maxWidthRules: Rules = {
+  ...responsiveRules('max-w-0', {
+    maxWidth: `var(--container-0)`,
+  }),
+
+  ...responsiveRules('max-w-1', {
+    maxWidth: `var(--container-1)`,
+  }),
+
+  ...responsiveRules('max-w-2', {
+    maxWidth: `var(--container-2)`,
+  }),
+
+  ...responsiveRules('max-w-3', {
+    maxWidth: `var(--container-3)`,
+  }),
+
+  ...responsiveRules('max-w-4', {
+    maxWidth: `var(--container-4)`,
+  }),
+
+  ...responsiveRules('max-w-5', {
+    maxWidth: `var(--container-5)`,
+  }),
+
+  ...responsiveRules('max-w-auto', {
+    maxWidth: 'none',
+  }),
+
+  ...responsiveRules('max-w-fill', {
+    maxWidth: '100%',
+  }),
+}

package/src/css/styles/maxWidth/types.ts

@@ -0,0 +1,6 @@
+import {ContainerWidth} from '@sanity/ui/theme'
+import {ResponsiveProp} from '../../types'
+
+export interface MaxWidthStyleProps {
+  maxWidth?: ResponsiveProp<ContainerWidth | 'fill'>
+}

package/src/css/styles/overflow/rules.ts

@@ -0,0 +1,9 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const overflowRules: Rules = {
+  ...responsiveRules('overflow-visible', {overflow: 'visible'}),
+  ...responsiveRules('overflow-hidden', {overflow: 'hidden'}),
+  ...responsiveRules('overflow-scroll', {overflow: 'scroll'}),
+  ...responsiveRules('overflow-auto', {overflow: 'auto'}),
+}

package/src/css/styles/padding/index.ts

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

package/src/css/styles/padding/padding.ts

@@ -0,0 +1,15 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {PaddingStyleProps} from './types'
+
+export function padding(props: PaddingStyleProps): string {
+  return composeClassNames(
+    _resp('p', props.padding),
+    _resp('px', props.paddingX),
+    _resp('py', props.paddingY),
+    _resp('pt', props.paddingTop),
+    _resp('pr', props.paddingRight),
+    _resp('pb', props.paddingBottom),
+    _resp('pl', props.paddingLeft),
+  )
+}

package/src/css/styles/padding/rules.ts

@@ -0,0 +1,59 @@
+import {SPACE} from '@sanity/ui/theme'
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+import {vars} from '../../vars'
+
+export const paddingRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`p-${space}`, {padding: vars.space[space]}),
+  }
+}, {})
+
+export const paddingXRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`px-${space}`, {
+      paddingLeft: vars.space[space],
+      paddingRight: vars.space[space],
+    }),
+  }
+}, {})
+
+export const paddingYRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`py-${space}`, {
+      paddingTop: vars.space[space],
+      paddingBottom: vars.space[space],
+    }),
+  }
+}, {})
+
+export const paddingTopRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`pt-${space}`, {paddingTop: vars.space[space]}),
+  }
+}, {})
+
+export const paddingRightRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`pr-${space}`, {paddingRight: vars.space[space]}),
+  }
+}, {})
+
+export const paddingBottomRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`pb-${space}`, {paddingBottom: vars.space[space]}),
+  }
+}, {})
+
+export const paddingLeftRules = SPACE.reduce<Rules>((acc, space) => {
+  return {
+    ...acc,
+    ...responsiveRules(`pl-${space}`, {paddingLeft: vars.space[space]}),
+  }
+}, {})

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

@@ -0,0 +1,12 @@
+import {ResponsiveProp} from '../../types'
+
+/** @public */
+export interface PaddingStyleProps {
+  padding?: ResponsiveProp<number>
+  paddingTop?: ResponsiveProp<number>
+  paddingRight?: ResponsiveProp<number>
+  paddingBottom?: ResponsiveProp<number>
+  paddingLeft?: ResponsiveProp<number>
+  paddingX?: ResponsiveProp<number>
+  paddingY?: ResponsiveProp<number>
+}

package/src/css/styles/pointerEvents/index.ts

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

package/src/css/styles/pointerEvents/pointerEvents.ts

@@ -0,0 +1,6 @@
+import {composeClassNames} from '../../composeClassNames'
+import {PointerEventsStyleProps} from './types'
+
+export function pointerEvents(props: PointerEventsStyleProps): string {
+  return composeClassNames(props.pointerEvents && `pointer-events-${props.pointerEvents}`)
+}

package/src/css/styles/pointerEvents/rules.ts

@@ -0,0 +1,11 @@
+import {Rules} from '../../types'
+
+export const pointerEventsRules: Rules = {
+  'pointer-events-none': {
+    pointerEvents: 'none',
+  },
+
+  'pointer-events-auto': {
+    pointerEvents: 'auto',
+  },
+}

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

@@ -0,0 +1,7 @@
+/** @public */
+export type PointerEvents = 'auto' | 'none'
+
+/** @public */
+export interface PointerEventsStyleProps {
+  pointerEvents?: PointerEvents
+}

package/src/css/styles/position/index.ts

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

package/src/css/styles/position/position.ts

@@ -0,0 +1,7 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {PositionStyleProps} from './types'
+
+export function position(props: PositionStyleProps): string {
+  return composeClassNames(_resp('pos', props.position), _resp('inset', props.inset))
+}

package/src/css/styles/position/rules.ts

@@ -0,0 +1,31 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const positionRules: Rules = {
+  ...responsiveRules('pos-absolute', {
+    position: 'absolute',
+  }),
+
+  ...responsiveRules('pos-fixed', {
+    position: 'fixed',
+  }),
+
+  ...responsiveRules('pos-relative', {
+    position: 'relative',
+  }),
+
+  ...responsiveRules('pos-static', {
+    position: 'static',
+  }),
+
+  ...responsiveRules('pos-sticky', {
+    position: 'sticky',
+  }),
+
+  ...responsiveRules('inset-0', {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  }),
+}

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

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

package/src/css/styles/radius/index.ts

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

package/src/css/styles/radius/radius.ts

@@ -0,0 +1,8 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {RadiusStyleProps} from './types'
+
+/** @public */
+export function radius(props: RadiusStyleProps): string {
+  return composeClassNames(_resp('r', props.radius))
+}

package/src/css/styles/radius/rules.ts

@@ -0,0 +1,13 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const radiusRules: Rules = {
+  ...responsiveRules('r-0', {borderRadius: 'var(--radius-0)'}),
+  ...responsiveRules('r-1', {borderRadius: 'var(--radius-1)'}),
+  ...responsiveRules('r-2', {borderRadius: 'var(--radius-2)'}),
+  ...responsiveRules('r-3', {borderRadius: 'var(--radius-3)'}),
+  ...responsiveRules('r-4', {borderRadius: 'var(--radius-4)'}),
+  ...responsiveRules('r-5', {borderRadius: 'var(--radius-5)'}),
+  ...responsiveRules('r-6', {borderRadius: 'var(--radius-6)'}),
+  ...responsiveRules('r-round', {borderRadius: '9999px'}),
+}

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

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