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

package/src/css/primitives/switch/switch.ts

@@ -1,21 +1,21 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function _switch(): string | undefined {
-  return _comp('switch')
+  return composeClassNames('switch')
 }
 
 export function _switchElement(): string | undefined {
-  return _comp('switch-element')
+  return composeClassNames('switch-element')
 }
 
 export function _switchPresentation(): string | undefined {
-  return _comp('switch-presentation')
+  return composeClassNames('switch-presentation')
 }
 
 export function _switchThumb(): string | undefined {
-  return _comp('switch-thumb')
+  return composeClassNames('switch-thumb')
 }
 
 export function _switchTrack(): string | undefined {
-  return _comp('switch-track')
+  return composeClassNames('switch-track')
 }

package/src/css/primitives/text/text.ts

@@ -1,11 +1,11 @@
-import {_comp} from '../../_comp'
 import {_resp} from '../../_resp'
-import {flexItem, font} from '../../aspects'
+import {composeClassNames} from '../../composeClassNames'
+import {flexItem, font} from '../../styles'
 import {TextStyleProps} from './types'
 
 /** @public */
 export function text(props: TextStyleProps): string | undefined {
-  return _comp(
+  return composeClassNames(
     'text',
     'block',
     flexItem(props),

package/src/css/primitives/text/types.ts

@@ -1,4 +1,4 @@
-import {FlexItemStyleProps, FontStyleProps} from '../../aspects'
+import {FlexItemStyleProps, FontStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 export type TextSize = number

package/src/css/primitives/textArea/textArea.ts

@@ -1,8 +1,7 @@
-import {_comp} from '../../_comp'
 import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextAreaStyleProps} from './types'
 
 export function textArea(props: TextAreaStyleProps): string | undefined {
-  return composeClassNames(_comp('text-area'), _input(props))
+  return composeClassNames('text-area', _input(props))
 }

package/src/css/primitives/textInput/textInput.ts

@@ -1,8 +1,8 @@
-import {_comp} from '../../_comp'
+// import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {_input} from '../_input'
 import {TextInputStyleProps} from './types'
 
 export function textInput(props: TextInputStyleProps): string | undefined {
-  return composeClassNames(_input(props), _comp('text-input'))
+  return composeClassNames(_input(props), 'text-input')
 }

package/src/css/primitives/tooltip/tooltip.ts

@@ -1,9 +1,9 @@
-import {_comp} from '../../_comp'
+import {composeClassNames} from '../../composeClassNames'
 
 export function tooltip(): string | undefined {
-  return _comp('tooltip')
+  return composeClassNames('tooltip')
 }
 
 export function tooltipCard(): string | undefined {
-  return _comp('tooltip-card')
+  return composeClassNames('tooltip-card')
 }

package/src/css/rules.ts

@@ -0,0 +1,113 @@
+import {breadcrumbsRules} from './components/breadcrumbs/rules'
+import {dialogRules} from './components/dialog/rules'
+import {menuRules} from './components/menu/rules'
+import {skeletonRules} from './components/skeleton/rules'
+import {toastRules} from './components/toast/rules'
+import {_arrowRules} from './primitives/_arrow/rules'
+import {_inputRules} from './primitives/_input/rules'
+import {_selectableRules} from './primitives/_selectable/rules'
+import {avatarRules} from './primitives/avatar/rules'
+import {badgeRules} from './primitives/badge/rules'
+import {boxRules} from './primitives/box/rules'
+import {buttonRules} from './primitives/button/rules'
+import {cardRules} from './primitives/card/rules'
+import {checkboxRules} from './primitives/checkbox/rules'
+import {codeRules} from './primitives/code/rules'
+import {containerRules} from './primitives/container/rules'
+import {headingRules} from './primitives/heading/rules'
+import {kbdRules} from './primitives/kbd/rules'
+import {labelRules} from './primitives/label/rules'
+import {popoverRules} from './primitives/popover/rules'
+import {radioRules} from './primitives/radio/rules'
+import {selectRules} from './primitives/select/rules'
+import {spinnerRules} from './primitives/spinner/rules'
+import {switchRules} from './primitives/switch/rules'
+import {textRules} from './primitives/text/rules'
+import {textAreaRules} from './primitives/textArea/rules'
+import {textInputRules} from './primitives/textInput/rules'
+import {tokenRules} from './primitives/token/rules'
+import {tooltipRules} from './primitives/tooltip/rules'
+import {borderRules} from './styles/border/rules'
+import {displayRules} from './styles/display/rules'
+import {flexRules} from './styles/flex/rules'
+import {flexItemRules} from './styles/flexItem/rules'
+import {fontRules} from './styles/font/rules'
+import {gapRules} from './styles/gap/rules'
+import {gridRules} from './styles/grid/rules'
+import {gridItemRules} from './styles/gridItem/rules'
+import {heightRules} from './styles/height/rules'
+import {insetRules} from './styles/inset/rules'
+import {marginRules} from './styles/margin/rules'
+import {maxWidthRules} from './styles/maxWidth/rules'
+import {outlineRules} from './styles/outline/rules'
+import {overflowRules} from './styles/overflow/rules'
+import {paddingRules} from './styles/padding/rules'
+import {pointerEventsRules} from './styles/pointerEvents/rules'
+import {positionRules} from './styles/position/rules'
+import {radiusRules} from './styles/radius/rules'
+import {shadowRules} from './styles/shadow/rules'
+import {textOverflowRules} from './styles/textOverflow/rules'
+import {widthRules} from './styles/width/rules'
+import {type Rules} from './types'
+import {srOnlyRules} from './utils/srOnly/rules'
+
+export const rules: Rules = {
+  // styles
+  ...borderRules,
+  ...displayRules,
+  ...flexItemRules,
+  ...flexRules,
+  ...fontRules,
+  ...gapRules,
+  ...gridItemRules,
+  ...gridRules,
+  ...heightRules,
+  ...insetRules,
+  ...marginRules,
+  ...outlineRules,
+  ...overflowRules,
+  ...paddingRules,
+  ...pointerEventsRules,
+  ...positionRules,
+  ...radiusRules,
+  ...shadowRules,
+  ...widthRules,
+
+  // utils
+  ...srOnlyRules,
+
+  // primitives
+  ..._arrowRules,
+  ..._inputRules,
+  ..._selectableRules,
+  ...avatarRules,
+  ...badgeRules,
+  ...boxRules,
+  ...buttonRules,
+  ...cardRules,
+  ...checkboxRules,
+  ...codeRules,
+  ...containerRules,
+  ...headingRules,
+  ...kbdRules,
+  ...labelRules,
+  ...maxWidthRules,
+  ...popoverRules,
+  ...radioRules,
+  ...selectRules,
+  ...spinnerRules,
+  ...switchRules,
+  ...textAreaRules,
+  ...textInputRules,
+  ...textOverflowRules,
+  ...textRules,
+  ...tokenRules,
+  ...tooltipRules,
+
+  // components
+  ...breadcrumbsRules,
+  ...dialogRules,
+  ...menuRules,
+  ...skeletonRules,
+  ...toastRules,
+}

package/src/css/styles/border/border.ts

@@ -0,0 +1,22 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {BorderStyleProps} from './types'
+
+const prefixes = {
+  border: 'border',
+  borderTop: 'border-t',
+  borderRight: 'border-r',
+  borderBottom: 'border-b',
+  borderLeft: 'border-l',
+}
+
+/** @public */
+export function border(props: BorderStyleProps): string | undefined {
+  return composeClassNames(
+    _resp(prefixes.border, props.border),
+    _resp(prefixes.borderTop, props.borderTop),
+    _resp(prefixes.borderRight, props.borderRight),
+    _resp(prefixes.borderBottom, props.borderBottom),
+    _resp(prefixes.borderLeft, props.borderLeft),
+  )
+}

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

@@ -0,0 +1,24 @@
+import {responsiveRules} from '../../responsiveRules'
+import {Rules} from '../../types'
+
+export const borderRules: Rules = {
+  ...responsiveRules('border', {
+    border: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-t', {
+    borderTop: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-r', {
+    borderRight: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-b', {
+    borderBottom: '1px solid var(--card-border-color)',
+  }),
+
+  ...responsiveRules('border-l', {
+    borderLeft: '1px solid var(--card-border-color)',
+  }),
+}

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

@@ -0,0 +1,62 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const displayRules: Rules = {
+  ...responsiveRules('block', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'block',
+      },
+    },
+  }),
+
+  ...responsiveRules('inline-block', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-block',
+      },
+    },
+  }),
+
+  ...responsiveRules('flex', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'flex',
+      },
+    },
+  }),
+
+  ...responsiveRules('inline-flex', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-flex',
+      },
+    },
+  }),
+
+  ...responsiveRules('grid', {
+    'gridTemplateRows': 'auto',
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'grid',
+      },
+    },
+  }),
+
+  ...responsiveRules('inline-grid', {
+    'gridTemplateRows': 'auto',
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'inline-grid',
+      },
+    },
+  }),
+
+  ...responsiveRules('none', {
+    '@nest': {
+      '&:not([hidden])': {
+        display: 'none',
+      },
+    },
+  }),
+}

package/src/css/styles/flex/flex.ts

@@ -0,0 +1,20 @@
+import {_resp} from '../../_resp'
+import {composeClassNames} from '../../composeClassNames'
+import {FlexStyleProps} from './types'
+
+const prefixes = {
+  align: `align`, // `flex-align`
+  direction: undefined, // `
+  justify: `justify`, // `flex-justify`
+  wrap: `wrap`, // `flex-wrap`
+}
+
+/** @public */
+export function flex(props: FlexStyleProps): string | undefined {
+  return composeClassNames(
+    _resp(prefixes.align, props.align),
+    _resp(prefixes.direction, props.direction),
+    _resp(prefixes.justify, props.justify),
+    _resp(prefixes.wrap, props.wrap),
+  )
+}

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

@@ -0,0 +1,28 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const flexRules: Rules = {
+  // direction
+  ...responsiveRules('row', {flexDirection: 'row'}),
+  ...responsiveRules('column', {flexDirection: 'column'}),
+
+  // align
+  ...responsiveRules('align-flex-start', {alignItems: 'flex-start'}),
+  ...responsiveRules('align-flex-end', {alignItems: 'end'}),
+  ...responsiveRules('align-center', {alignItems: 'center'}),
+  ...responsiveRules('align-stretch', {alignItems: 'stretch'}),
+  ...responsiveRules('align-baseline', {alignItems: 'baseline'}),
+
+  // justify
+  ...responsiveRules('justify-flex-start', {justifyContent: 'flex-start'}),
+  ...responsiveRules('justify-flex-end', {justifyContent: 'flex-end'}),
+  ...responsiveRules('justify-center', {justifyContent: 'center'}),
+  ...responsiveRules('justify-between', {justifyContent: 'space-between'}),
+  ...responsiveRules('justify-around', {justifyContent: 'space-around'}),
+  ...responsiveRules('justify-evenly', {justifyContent: 'space-evenly'}),
+
+  // wrap
+  ...responsiveRules('wrap-nowrap', {flexWrap: 'nowrap'}),
+  ...responsiveRules('wrap-wrap', {flexWrap: 'wrap'}),
+  ...responsiveRules('wrap-reverse', {flexWrap: 'wrap-reverse'}),
+}

package/src/css/{aspects → styles}/flexItem/flexItem.ts

@@ -4,5 +4,5 @@ import {FlexItemStyleProps} from './types'
 
 /** @public */
 export function flexItem(props: FlexItemStyleProps): string | undefined {
-  return composeClassNames(_resp(`f`, props.flex))
+  return composeClassNames(_resp(`flex`, props.flex))
 }

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

@@ -0,0 +1,12 @@
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
+
+export const flexItemRules: Rules = {
+  ...responsiveRules('flex-none', {flex: 'none'}),
+  ...responsiveRules('flex-auto', {flex: 'auto'}),
+  ...responsiveRules('flex-1', {flex: 1}),
+  ...responsiveRules('flex-2', {flex: 2}),
+  ...responsiveRules('flex-3', {flex: 3}),
+  ...responsiveRules('flex-4', {flex: 4}),
+  ...responsiveRules('flex-5', {flex: 5}),
+}

package/src/css/{aspects → styles}/flexItem/types.ts

@@ -3,23 +3,7 @@ import {ResponsiveProp} from '../../types'
 /**
  * @public
  */
-export type FlexValue =
-  | 'none'
-  | 'auto'
-  | 'initial'
-  | 0
-  | 1
-  | 2
-  | 3
-  | 4
-  | 5
-  | 6
-  | 7
-  | 8
-  | 9
-  | 10
-  | 11
-  | 12
+export type FlexValue = number | 'none' | 'auto' | 'initial'
 
 /** @public */
 export interface FlexItemStyleProps {

package/src/css/{aspects → styles}/font/font.ts

@@ -2,11 +2,16 @@ import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
 import {FontStyleProps} from './types'
 
+const prefixes = {
+  align: 'text-align',
+  weight: 'font',
+} as const
+
 /** @public */
 export function font(props: FontStyleProps): string | undefined {
   return composeClassNames(
     'font',
-    props.weight && `font-${props.weight}`,
-    _resp('text-align', props.align),
+    props.weight && `${prefixes.weight}-${props.weight}`,
+    _resp(prefixes.align, props.align),
   )
 }

package/src/css/{aspects/font/font.style.ts → styles/font/rules.ts}

@@ -1,9 +1,8 @@
-// import {responsiveRules} from '../../responsiveRules'
-import {_responsiveRule} from '../../_responsiveRule'
-import {Style, StyleRules} from '../../types'
+import {responsiveRules} from '../../responsiveRules'
+import {type Rules} from '../../types'
 
-export const rules: StyleRules = {
-  '.font': {
+export const fontRules: Rules = {
+  'font': {
     // 'position': 'relative',
     'fontFamily': 'var(--font-family)',
     'fontFeatureSettings': 'var(--font-feature-settings)',
@@ -54,46 +53,44 @@ export const rules: StyleRules = {
     },
   },
 
-  '.font-regular': {
+  'font-regular': {
     '--font-weight': 'var(--font-weight-regular)',
   },
 
-  '.font-medium': {
+  'font-medium': {
     '--font-weight': 'var(--font-weight-medium)',
   },
 
-  '.font-semibold': {
+  'font-semibold': {
     '--font-weight': 'var(--font-weight-semibold)',
   },
 
-  '.font-bold': {
+  'font-bold': {
     '--font-weight': 'var(--font-weight-bold)',
   },
-}
-
-// align
 
-_responsiveRule(rules, `text-align-initial`, {
-  textAlign: 'initial',
-})
+  // align
 
-_responsiveRule(rules, `text-align-left`, {
-  textAlign: 'left',
-})
+  ...responsiveRules('text-align-initial', {
+    textAlign: 'initial',
+  }),
 
-_responsiveRule(rules, `text-align-center`, {
-  textAlign: 'center',
-})
+  ...responsiveRules('text-align-left', {
+    textAlign: 'left',
+  }),
 
-_responsiveRule(rules, `text-align-right`, {
-  textAlign: 'right',
-})
+  ...responsiveRules('text-align-center', {
+    textAlign: 'center',
+  }),
 
-_responsiveRule(rules, `text-align-justify`, {
-  textAlign: 'justify',
-})
+  ...responsiveRules('text-align-right', {
+    textAlign: 'right',
+  }),
 
-export const fontStyle: Style = {layers: {primitive: rules}}
+  ...responsiveRules('text-align-justify', {
+    textAlign: 'justify',
+  }),
+}
 
 // .font {
 //   position: relative;

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

@@ -0,0 +1,34 @@
+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}`.replace('.', '_'), {
+        gap: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gx-${space}`.replace('.', '_'), {
+        columnGap: vars.space[space],
+      }),
+    }
+  }, {}),
+
+  ...SPACE.reduce<Rules>((acc, space) => {
+    return {
+      ...acc,
+      ...responsiveRules(`gy-${space}`.replace('.', '_'), {
+        rowGap: vars.space[space],
+      }),
+    }
+  }, {}),
+}

package/src/css/{aspects → styles}/grid/grid.ts

@@ -5,9 +5,9 @@ import {GridStyleProps} from './types'
 export function grid(props: GridStyleProps): string | undefined {
   return composeClassNames(
     _resp('auto-cols', props.autoCols),
-    _resp('auto-flow', props.autoFlow),
     _resp('auto-rows', props.autoRows),
-    _resp('cols', props.columns),
+    _resp('auto-flow', props.autoFlow),
+    _resp('columns', props.columns),
     _resp('rows', props.rows),
   )
 }