@sanity/ui 3.0.0-static.26 → 3.0.0-static.28

package/src/css/components/skeleton/types.ts

@@ -1,11 +1,13 @@
 import type {FontCodeSize, FontHeadingSize, FontLabelSize, FontTextSize} from '@sanity/ui/theme'
 
+import type {FlexStyleProps} from '../../props/flex'
+import type {MarginStyleProps} from '../../props/margin'
 import type {RadiusStyleProps} from '../../props/radius'
 import type {ResponsiveProp} from '../../types'
 
 /** @beta */
 
-export interface SkeletonStyleProps extends RadiusStyleProps {
+export interface SkeletonStyleProps extends FlexStyleProps, MarginStyleProps, RadiusStyleProps {
   className?: string
 }
 

package/src/css/index.ts

@@ -1,14 +1,84 @@
-/* eslint-disable */
+/* eslint-disable simple-import-sort/exports */
 
 export * from './layers.css'
 export * from './vars.css'
-export * from './props'
-export * from './utils'
-export * from './primitives'
-export * from './components'
 
 export * from './defaultTheme.css'
 
+// props
+export * from './props/alignItems'
+export * from './props/border'
+export * from './props/boxSizing'
+export * from './props/display'
+export * from './props/flex'
+export * from './props/flexDirection'
+export * from './props/flexWrap'
+export * from './props/font'
+export * from './props/gap'
+export * from './props/gridAutoColumns'
+export * from './props/gridAutoFlow'
+export * from './props/gridAutoRows'
+export * from './props/gridColumn'
+export * from './props/gridColumnEnd'
+export * from './props/gridColumnStart'
+export * from './props/gridRow'
+export * from './props/gridRowEnd'
+export * from './props/gridRowStart'
+export * from './props/gridTemplateColumns'
+export * from './props/gridTemplateRows'
+export * from './props/height'
+export * from './props/inset'
+export * from './props/justifyContent'
+export * from './props/margin'
+export * from './props/maxWidth'
+export * from './props/minHeight'
+export * from './props/minWidth'
+export * from './props/outline'
+export * from './props/overflow'
+export * from './props/padding'
+export * from './props/pointerEvents'
+export * from './props/position'
+export * from './props/radius'
+export * from './props/shadow'
+export * from './props/textAlign'
+export * from './props/textOverflow'
+export * from './props/width'
+
+// primitives
+export * from './primitives/_arrow'
+export * from './primitives/_input'
+export * from './primitives/_selectable'
+export * from './primitives/avatar'
+export * from './primitives/badge'
+export * from './primitives/box'
+export * from './primitives/button'
+export * from './primitives/card'
+export * from './primitives/checkbox'
+export * from './primitives/code'
+export * from './primitives/container'
+export * from './primitives/heading'
+export * from './primitives/kbd'
+export * from './primitives/label'
+export * from './primitives/popover'
+export * from './primitives/radio'
+export * from './primitives/select'
+export * from './primitives/spinner'
+export * from './primitives/srOnly'
+export * from './primitives/stack'
+export * from './primitives/switch'
+export * from './primitives/text'
+export * from './primitives/textArea'
+export * from './primitives/textInput'
+export * from './primitives/tooltip'
+
+// components
+export * from './components/breadcrumbs'
+export * from './components/dialog'
+export * from './components/menu'
+export * from './components/skeleton'
+export * from './components/toast'
+export * from './components/tree'
+
 export * from './constants'
 export * from './types'
 export * from './util'

package/src/css/primitives/_input/input.ts

@@ -1,6 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {radius, width} from '../../props'
+import {radius} from '../../props/radius'
+import {width} from '../../props/width'
 import {border, element, fontSize, gap, padding, presentation, root} from './_input.css'
 import type {InputStyleProps} from './types'
 

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

@@ -1,6 +1,7 @@
 import type {FontTextSize, Space} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps, WidthStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {WidthStyleProps} from '../../props/width'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/_selectable/_selectable.css.ts

@@ -46,33 +46,32 @@ export const tones = {
 
           '@media': {
             '(hover: hover)': {
-              ':hover': {
-                vars: {
-                  [vars.color.bg]: tinted.bg[1],
-                },
-              },
-
-              'selectors': {
-                '&:not([data-disabled])': {
-                  cursor: 'pointer',
-                },
-
-                '&:not([data-disabled]):hover': {
-                  vars: {
-                    [vars.color.bg]: tinted.bg[1],
-                    [vars.color.border]: tinted.border[3],
-                    [vars.color.fg]: tinted.fg[1],
-                    [vars.color.muted.bg]: tinted.bg[2],
-                    [vars.color.muted.fg]: tinted.fg[4],
+              selectors: {
+                '&:not([data-pressed]):not([data-selected]):not([data-focused]):not([data-disabled]):not(:active):not(:focus):hover':
+                  {
+                    vars: {
+                      [vars.color.bg]: tinted.bg[1],
+                      [vars.color.border]: tinted.border[1],
+                      [vars.color.fg]: tinted.fg[1],
+                    },
                   },
-                },
+
+                // '&:not([data-disabled]):hover': {
+                //   vars: {
+                //     [vars.color.bg]: tinted.bg[1],
+                //     [vars.color.border]: tinted.border[3],
+                //     [vars.color.fg]: tinted.fg[1],
+                //     [vars.color.muted.bg]: tinted.bg[2],
+                //     [vars.color.muted.fg]: tinted.fg[4],
+                //   },
+                // },
               },
             },
           },
 
           'selectors': {
-            // pressed
-            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-pressed]':
+            // selected
+            '&:not([data-disabled]):active, &:not([data-disabled])[aria-pressed="true"], &:not([data-disabled])[data-selected]':
               {
                 vars: {
                   [vars.color.bg]: tinted.bg[2],
@@ -93,9 +92,7 @@ export const tones = {
                 [vars.color.muted.fg]: focused.fg[3],
               },
             },
-
-            // selected
-            '&:not([data-disabled])[data-selected]': {
+            '&:not([data-disabled])[data-focused]': {
               vars: {
                 [vars.color.bg]: focused.bg[0],
                 [vars.color.border]: focused.border[1],
@@ -105,6 +102,17 @@ export const tones = {
               },
             },
 
+            // // selected
+            // '&:not([data-disabled])[data-selected]': {
+            //   vars: {
+            //     [vars.color.bg]: focused.bg[0],
+            //     [vars.color.border]: focused.border[1],
+            //     [vars.color.fg]: focused.fg[0],
+            //     [vars.color.muted.bg]: focused.bg[1],
+            //     [vars.color.muted.fg]: focused.fg[3],
+            //   },
+            // },
+
             // disabled
             '&[data-disabled]': {
               vars: {

package/src/css/primitives/_selectable/selectable.ts

@@ -1,5 +1,5 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {radius} from '../../props'
+import {radius} from '../../props/radius'
 import {root, tones} from './_selectable.css'
 import type {SelectableStyleProps} from './types'
 

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

@@ -1,6 +1,6 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {RadiusStyleProps} from '../../props'
+import type {RadiusStyleProps} from '../../props/radius'
 
 /** @internal */
 export interface SelectableStyleProps extends RadiusStyleProps {

package/src/css/primitives/avatar/avatar.css.ts

@@ -10,7 +10,16 @@ import {vars} from '../../vars.css'
 
 export const stack = _style(layers.primitives, {})
 
+globalStyle(`${stack} > * + *`, {
+  '@layer': {
+    [layers.primitives]: {
+      marginLeft: vars.avatar.distance,
+    },
+  },
+})
+
 export const root = _style(layers.primitives, {
+  // display: 'block',
   backgroundColor: vars.color.avatar.bg,
   position: 'relative',
   boxSizing: 'border-box',
@@ -26,8 +35,8 @@ export const root = _style(layers.primitives, {
   },
 
   selectors: {
-    [`${stack} > & + &`]: {
-      marginLeft: vars.avatar.distance,
+    '&:not([hidden])': {
+      display: 'block',
     },
 
     'button.&': {

package/src/css/primitives/avatar/avatar.ts

@@ -1,6 +1,6 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {flex} from '../../props'
+import {flex} from '../../props/flex'
 import {
   arrow,
   arrowSvg,

package/src/css/primitives/badge/badge.css.ts

@@ -8,7 +8,7 @@ import {vars} from '../../vars.css'
 export const root = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
-  verticalAlign: 'top',
+  whiteSpace: 'nowrap',
 })
 
 export const tones = {
@@ -18,6 +18,7 @@ export const tones = {
       _style(layers.primitives, {
         vars: {
           [vars.color.bg]: vars.color.tinted[t].bg[2],
+          [vars.color.border]: vars.color.tinted[t].border[2],
           [vars.color.fg]: vars.color.tinted[t].fg[3],
         },
       }),

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

@@ -1,7 +1,5 @@
 import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-// import type {RadiusStyleProps} from '../../props'
-
 /** @public */
 export interface BadgeStyleProps {
   className?: string

package/src/css/primitives/box/box.ts

@@ -1,41 +1,39 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {
-  alignItems,
-  border,
-  boxSizing,
-  display,
-  flex,
-  flexDirection,
-  flexWrap,
-  gap,
-  gridAutoColumns,
-  gridAutoFlow,
-  gridAutoRows,
-  gridColumn,
-  gridColumnEnd,
-  gridColumnStart,
-  gridRow,
-  gridRowEnd,
-  gridRowStart,
-  gridTemplateColumns,
-  gridTemplateRows,
-  height,
-  inset,
-  justifyContent,
-  margin,
-  maxWidth,
-  minHeight,
-  minWidth,
-  outline,
-  overflow,
-  padding,
-  pointerEvents,
-  position,
-  radius,
-  shadow,
-  textAlign,
-  width,
-} from '../../props'
+import {alignItems} from '../../props/alignItems'
+import {border} from '../../props/border'
+import {boxSizing} from '../../props/boxSizing'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {flexDirection} from '../../props/flexDirection'
+import {flexWrap} from '../../props/flexWrap'
+import {gap} from '../../props/gap'
+import {gridAutoColumns} from '../../props/gridAutoColumns'
+import {gridAutoFlow} from '../../props/gridAutoFlow'
+import {gridAutoRows} from '../../props/gridAutoRows'
+import {gridColumn} from '../../props/gridColumn'
+import {gridColumnEnd} from '../../props/gridColumnEnd'
+import {gridColumnStart} from '../../props/gridColumnStart'
+import {gridRow} from '../../props/gridRow'
+import {gridRowEnd} from '../../props/gridRowEnd'
+import {gridRowStart} from '../../props/gridRowStart'
+import {gridTemplateColumns} from '../../props/gridTemplateColumns'
+import {gridTemplateRows} from '../../props/gridTemplateRows'
+import {height} from '../../props/height'
+import {inset} from '../../props/inset'
+import {justifyContent} from '../../props/justifyContent'
+import {margin} from '../../props/margin'
+import {maxWidth} from '../../props/maxWidth'
+import {minHeight} from '../../props/minHeight'
+import {minWidth} from '../../props/minWidth'
+import {outline} from '../../props/outline'
+import {overflow} from '../../props/overflow'
+import {padding} from '../../props/padding'
+import {pointerEvents} from '../../props/pointerEvents'
+import {position} from '../../props/position'
+import {radius} from '../../props/radius'
+import {shadow} from '../../props/shadow'
+import {textAlign} from '../../props/textAlign'
+import {width} from '../../props/width'
 import {muted, root} from './box.css'
 import type {BoxStyleProps} from './types'
 

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

@@ -1,39 +1,37 @@
-import type {
-  AlignItemsStyleProps,
-  BorderStyleProps,
-  BoxSizingStyleProps,
-  DisplayStyleProps,
-  FlexDirectionStyleProps,
-  FlexStyleProps,
-  FlexWrapStyleProps,
-  GapStyleProps,
-  GridAutoColumnsStyleProps,
-  GridAutoFlowStyleProps,
-  GridAutoRowsStyleProps,
-  GridColumnEndStyleProps,
-  GridColumnStartStyleProps,
-  GridColumnStyleProps,
-  GridRowEndStyleProps,
-  GridRowStartStyleProps,
-  GridRowStyleProps,
-  GridTemplateColumnsStyleProps,
-  GridTemplateRowsStyleProps,
-  HeightStyleProps,
-  InsetStyleProps,
-  JustifyContentStyleProps,
-  MarginStyleProps,
-  MaxWidthStyleProps,
-  MinHeightStyleProps,
-  MinWidthStyleProps,
-  OverflowStyleProps,
-  PaddingStyleProps,
-  PointerEventsStyleProps,
-  PositionStyleProps,
-  RadiusStyleProps,
-  ShadowStyleProps,
-  TextAlignStyleProps,
-  WidthStyleProps,
-} from '../../props'
+import type {AlignItemsStyleProps} from '../../props/alignItems'
+import type {BorderStyleProps} from '../../props/border'
+import type {BoxSizingStyleProps} from '../../props/boxSizing'
+import type {DisplayStyleProps} from '../../props/display'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FlexDirectionStyleProps} from '../../props/flexDirection'
+import type {FlexWrapStyleProps} from '../../props/flexWrap'
+import type {GapStyleProps} from '../../props/gap'
+import type {GridAutoColumnsStyleProps} from '../../props/gridAutoColumns'
+import type {GridAutoFlowStyleProps} from '../../props/gridAutoFlow'
+import type {GridAutoRowsStyleProps} from '../../props/gridAutoRows'
+import type {GridColumnStyleProps} from '../../props/gridColumn'
+import type {GridColumnEndStyleProps} from '../../props/gridColumnEnd'
+import type {GridColumnStartStyleProps} from '../../props/gridColumnStart'
+import type {GridRowStyleProps} from '../../props/gridRow'
+import type {GridRowEndStyleProps} from '../../props/gridRowEnd'
+import type {GridRowStartStyleProps} from '../../props/gridRowStart'
+import type {GridTemplateColumnsStyleProps} from '../../props/gridTemplateColumns'
+import type {GridTemplateRowsStyleProps} from '../../props/gridTemplateRows'
+import type {HeightStyleProps} from '../../props/height'
+import type {InsetStyleProps} from '../../props/inset'
+import type {JustifyContentStyleProps} from '../../props/justifyContent'
+import type {MarginStyleProps} from '../../props/margin'
+import type {MaxWidthStyleProps} from '../../props/maxWidth'
+import type {MinHeightStyleProps} from '../../props/minHeight'
+import type {MinWidthStyleProps} from '../../props/minWidth'
+import type {OverflowStyleProps} from '../../props/overflow'
+import type {PaddingStyleProps} from '../../props/padding'
+import type {PointerEventsStyleProps} from '../../props/pointerEvents'
+import type {PositionStyleProps} from '../../props/position'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {ShadowStyleProps} from '../../props/shadow'
+import type {TextAlignStyleProps} from '../../props/textAlign'
+import type {WidthStyleProps} from '../../props/width'
 
 /** @public */
 export interface BoxStyleProps

package/src/css/primitives/button/button.css.ts

@@ -24,6 +24,10 @@ export const root = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
+  //
+  transition:
+    'background-color 100ms ease-in-out, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
+
   selectors: {
     '&::-moz-focus-inner': {
       border: 0,

package/src/css/primitives/button/button.ts

@@ -1,5 +1,8 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {display, flex, radius, width} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {radius} from '../../props/radius'
+import {width} from '../../props/width'
 import {loadingBox, modes, root, tones} from './button.css'
 import type {ButtonStyleProps} from './types'
 
@@ -10,7 +13,7 @@ export function button(props: ButtonStyleProps) {
     root,
     modes[props.mode ?? 'default'],
     tones[props.tone ?? 'default'],
-    display(props),
+    display({display: 'flex'}),
     flex(props),
     radius(props),
     width(props),

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

@@ -1,18 +1,11 @@
 import type {ThemeColorButtonModeKey, ThemeColorStateToneKey} from '@sanity/ui/theme'
 
-import type {
-  DisplayStyleProps,
-  FlexStyleProps,
-  RadiusStyleProps,
-  WidthStyleProps,
-} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {RadiusStyleProps} from '../../props/radius'
+import type {WidthStyleProps} from '../../props/width'
 
 /** @public */
-export interface ButtonStyleProps
-  extends DisplayStyleProps,
-    FlexStyleProps,
-    RadiusStyleProps,
-    WidthStyleProps {
+export interface ButtonStyleProps extends FlexStyleProps, RadiusStyleProps, WidthStyleProps {
   className?: string
   mode?: ThemeColorButtonModeKey
   tone?: ThemeColorStateToneKey

package/src/css/primitives/card/__workshop__/color.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable @typescript-eslint/no-empty-object-type */
+
+import {Box, Card, Code} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {
+  COLOR_VARIANTS,
+  THEME_COLOR_CARD_TONES,
+  THEME_COLOR_SCHEMES,
+  type ThemeColorCardToneKey,
+  type ThemeColorSchemeKey,
+  type ThemeColorVariantKey,
+} from '@sanity/ui/theme'
+import {useState} from 'react'
+
+interface ColorRecordNode extends Record<string, ColorNode> {}
+
+type ColorNode = string | ColorRecordNode
+
+export default function ColorStory() {
+  return (
+    <Box display="flex" flexDirection="column" gap={4} padding={4}>
+      {Object.entries(vars.color).map(([key, value]) => {
+        if (key === 'palette') {
+          return null
+        }
+
+        if (THEME_COLOR_SCHEMES.includes(key as ThemeColorSchemeKey)) {
+          return null
+        }
+
+        if (THEME_COLOR_CARD_TONES.includes(key as ThemeColorCardToneKey)) {
+          return null
+        }
+
+        if (COLOR_VARIANTS.includes(key as ThemeColorVariantKey)) {
+          // return null
+        }
+
+        return <ColorBox key={key} node={{key, value}} />
+      })}
+    </Box>
+  )
+}
+
+function ColorBox({node}: {node: {key: string; value: ColorNode}}) {
+  const {key, value} = node
+  const [open, setOpen] = useState(true)
+
+  if (typeof value === 'string') {
+    return (
+      <Box radius={2} padding={3} style={{backgroundColor: value}}>
+        <Code size={1}>{key}</Code>
+      </Box>
+    )
+  }
+
+  return (
+    <Box overflow="hidden" radius={3} shadow={1}>
+      <Card as="button" onClick={() => setOpen(!open)} padding={3}>
+        <Code size={1}>{`${key} +`}</Code>
+      </Card>
+
+      <Box display="flex" flexDirection="column" gap={3} hidden={!open} padding={3}>
+        {Object.entries(value).map(([key, value]) => (
+          <ColorBox key={key} node={{key, value}} />
+        ))}
+      </Box>
+    </Box>
+  )
+}

package/src/css/primitives/card/__workshop__/index.ts

@@ -0,0 +1,14 @@
+import {defineScope} from '@sanity/ui-workshop'
+import {lazy} from 'react'
+
+export default defineScope({
+  name: 'css/card',
+  title: 'Card',
+  stories: [
+    {
+      name: 'color',
+      title: 'Color',
+      component: lazy(() => import('./color')),
+    },
+  ],
+})

package/src/css/primitives/card/card.css.ts

@@ -19,6 +19,10 @@ export const root = _style(layers.primitives, {
   backgroundColor: vars.color.bg,
   color: vars.color.fg,
 
+  //
+  transition:
+    'background-color 100ms ease-in-out, border-color 100ms, box-shadow 100ms ease-in-out, color 100ms ease-in-out',
+
   vars: {
     [vars.color.bg]: vars.color.tinted.default.bg[0],
     [vars.color.border]: vars.color.tinted.default.border[1],

package/src/css/primitives/code/code.ts

@@ -1,6 +1,8 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
 import {root, scale} from './code.css'
 import type {CodeStyleProps} from './types'
 

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

@@ -1,4 +1,5 @@
-import type {FlexStyleProps, FontStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/container/container.ts

@@ -1,5 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {margin, maxWidth, width} from '../../props'
+import {margin} from '../../props/margin'
+import {maxWidth} from '../../props/maxWidth'
+import {width} from '../../props/width'
 import {root} from './container.css'
 import type {ContainerStyleProps} from './types'
 

package/src/css/primitives/heading/heading.ts

@@ -1,6 +1,9 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
-import {display, flex, font, textAlign} from '../../props'
+import {display} from '../../props/display'
+import {flex} from '../../props/flex'
+import {font} from '../../props/font'
+import {textAlign} from '../../props/textAlign'
 import {muted, root, sizes} from './heading.css'
 import type {HeadingStyleProps} from './types'
 

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

@@ -1,4 +1,6 @@
-import type {FlexStyleProps, FontStyleProps, TextAlignStyleProps} from '../../props'
+import type {FlexStyleProps} from '../../props/flex'
+import type {FontStyleProps} from '../../props/font'
+import type {TextAlignStyleProps} from '../../props/textAlign'
 import type {ResponsiveProp} from '../../types'
 
 /** @public */

package/src/css/primitives/kbd/kbd.ts

@@ -1,5 +1,5 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {radius} from '../../props'
+import {radius} from '../../props/radius'
 import {root} from './kbd.css'
 import type {KBDStyleProps} from './types'