@sanity/ui 3.0.0-static.5 → 3.0.0-static.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.5",
+  "version": "3.0.0-static.7",
   "keywords": [
     "sanity",
     "ui",
@@ -125,7 +125,7 @@
     "@rollup/plugin-replace": "^6.0.2",
     "@sanity/pkg-utils": "^7.2.2",
     "@sanity/prettier-config": "^1.0.3",
-    "@sanity/ui-workshop": "^2.1.2",
+    "@sanity/ui-workshop": "^2.1.3",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-docs": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",

package/src/css/aspects/index.ts

@@ -10,6 +10,7 @@ export * from './height'
 export * from './inset'
 export * from './margin'
 export * from './maxWidth'
+export * from './minWidth'
 export * from './overflow'
 export * from './padding'
 export * from './pointerEvents'

package/src/css/aspects/minWidth/index.ts

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

package/src/css/aspects/minWidth/minWidth.style.ts

@@ -0,0 +1,13 @@
+import {_responsiveRule} from '../../_responsiveRule'
+import type {Style, StyleRules} from '../../types'
+
+const util: StyleRules = {}
+
+_responsiveRule(util, 'min-w-0', {minWidth: '0'})
+_responsiveRule(util, 'min-w-auto', {minWidth: 'auto'})
+_responsiveRule(util, 'min-w-full', {minWidth: '100%'})
+_responsiveRule(util, 'min-w-min', {minWidth: 'min-content'})
+_responsiveRule(util, 'min-w-max', {minWidth: 'max-content'})
+_responsiveRule(util, 'min-w-fit', {minWidth: 'fit-content'})
+
+export const minWidthStyle: Style = {layers: {util}}

package/src/css/aspects/minWidth/minWidth.ts

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

package/src/css/aspects/minWidth/types.ts

@@ -0,0 +1,7 @@
+import {ResponsiveProp} from '../../types'
+
+export type MinWidth = 0 | 'auto' | 'full' | 'min' | 'max' | 'fit'
+
+export interface MinWidthStyleProps {
+  minWidth?: ResponsiveProp<MinWidth>
+}

package/src/css/compile/compileRule.ts

@@ -2,6 +2,7 @@ import {PREFIX} from '../constants'
 import {type Properties} from '../types'
 import {CompileRulesContext} from './types'
 
+// TODO: remove this
 export function compileRule(
   selector: string,
   props: Properties,

package/src/css/compile/compileStyle.ts

@@ -112,7 +112,7 @@ function compileStyleRule(_selector: string, properties: Properties): string {
         ? _nestedSelector.replace(/\./g, `.${PREFIX}`)
         : _nestedSelector
 
-      css += `${nestedSelector.replace('&', selector)} {\n`
+      css += `${nestedSelector.replace(/&/g, selector)} {\n`
       css += compileProperties(nestedProperties)
       css += '}\n\n'
     }

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

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: './css/input',
+  name: 'css/input',
   title: 'Input',
   stories: [
     {

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

@@ -3,7 +3,7 @@ import {vars} from '../../vars'
 
 const primitive: StyleRules = {
   '.box': {
-    'minWidth': 0,
+    // todo: move to aspects
     'minHeight': 0,
 
     '@nest': {

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

@@ -12,6 +12,7 @@ import {
   inset,
   margin,
   maxWidth,
+  minWidth,
   overflow,
   padding,
   pointerEvents,
@@ -23,9 +24,6 @@ import {BoxStyleProps} from './types'
 
 /** @public */
 export function box(props: BoxStyleProps): string | undefined {
-  // props.align
-  // props.autoCols
-
   return _comp(
     'box',
     props.muted && 'muted', // todo: consider this naming
@@ -42,6 +40,7 @@ export function box(props: BoxStyleProps): string | undefined {
     inset(props),
     margin(props),
     maxWidth(props),
+    minWidth(props),
     props.outline && `outline-${props.outline}`,
     overflow(props),
     padding(props),

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

@@ -10,6 +10,7 @@ import {
   InsetStyleProps,
   MarginStyleProps,
   MaxWidthStyleProps,
+  MinWidthStyleProps,
   OverflowStyleProps,
   PaddingStyleProps,
   PointerEventsStyleProps,
@@ -37,6 +38,7 @@ export interface BoxStyleProps
     InsetStyleProps,
     MarginStyleProps,
     MaxWidthStyleProps,
+    MinWidthStyleProps,
     OverflowStyleProps,
     PaddingStyleProps,
     PointerEventsStyleProps,

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

@@ -22,7 +22,7 @@ const primitive: StyleRules = {
     [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
 
     '@nest': {
-      '&:is(button)': {
+      'button&': {
         WebkitFontSmoothing: 'inherit',
         appearance: 'none',
         outline: 'none',
@@ -33,15 +33,81 @@ const primitive: StyleRules = {
         width: ['-moz-available', '-webkit-fill-available', 'fill-available'],
       },
 
-      '&:is(a)': {
+      'a&': {
         outline: 'none',
         textDecoration: 'none',
       },
 
-      '&:is(pre)': {
+      'pre&': {
         font: 'inherit',
         whiteSpace: 'inherit',
       },
+
+      'a&:not([data-disabled]):hover, button&:not([data-disabled]):hover': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[1],
+        [varNames.color.border]: vars.color.tinted.default.border[3],
+        [varNames.color.fg]: vars.color.tinted.default.fg[1],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled]):active, button&:not([data-disabled]):active': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // toggle button
+      'a&:not([data-disabled])[aria-pressed="true"], button&:not([data-disabled])[aria-pressed="true"]':
+        {
+          [varNames.color.bg]: vars.color.tinted.default.bg[2],
+          [varNames.color.border]: vars.color.tinted.default.border[4],
+          [varNames.color.fg]: vars.color.tinted.default.fg[0],
+          [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+          [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+        },
+
+      'a&:not([data-disabled])[data-pressed], button&:not([data-disabled])[data-pressed]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      'a&:not([data-disabled])[data-selected], button&:not([data-disabled])[data-selected]': {
+        [varNames.color.bg]: vars.color.solid.primary.bg[0],
+        [varNames.color.border]: vars.color.solid.primary.border[1],
+        [varNames.color.fg]: vars.color.solid.primary.fg[0],
+        [varNames.color.muted.bg]: vars.color.solid.primary.bg[1],
+        [varNames.color.muted.fg]: vars.color.solid.primary.fg[3],
+      },
+
+      // '&:not([data-disabled]):focus': {
+      //   '--color-bg': vars.color.solid.bg[0],
+      //   '--color-border': vars.color.solid.border[1],
+      //   '--color-fg': vars.color.solid.fg[1],
+      //   '--color-muted-bg': vars.color.solid.bg[1],
+      //   '--color-muted-fg': vars.color.solid.fg[3],
+      // },
+
+      'a&[data-disabled]), button&[data-disabled]': {
+        [varNames.color.bg]: vars.color.tinted.default.bg[2],
+        [varNames.color.border]: vars.color.tinted.default.border[4],
+        [varNames.color.fg]: vars.color.tinted.default.fg[0],
+        [varNames.color.muted.bg]: vars.color.tinted.default.bg[3],
+        [varNames.color.muted.fg]: vars.color.tinted.default.fg[4],
+      },
+
+      // '&[data-disabled]': {
+      //   '--color-bg': vars.color.tinted.bg[0],
+      //   '--color-border': vars.color.tinted.border[1],
+      //   '--color-fg': vars.color.tinted.border[4],
+      //   '--color-muted-bg': vars.color.tinted.bg[1],
+      //   '--color-muted-fg': vars.color.tinted.border[4],
+      // },
     },
   },
 }

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

@@ -5,7 +5,6 @@ import {BoxStyleProps} from '../box'
 
 export interface CardStyleProps extends BoxStyleProps, ShadowStyleProps {
   checkered?: boolean
-  selectable?: boolean
   scheme?: ThemeColorSchemeKey
   tone?: ThemeColorCardToneKey | 'inherit'
 }

package/src/css/primitives/popover/popover.ts

@@ -3,3 +3,7 @@ import {_comp} from '../../_comp'
 export function popover(): string | undefined {
   return _comp('popover')
 }
+
+export function popoverCard(): string | undefined {
+  return _comp('popover-card')
+}

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

@@ -16,22 +16,16 @@ const primitive: StyleRules = {
     padding: 0,
     margin: 0,
 
-    /* Place the input element above the representation element */
+    // place the input element on top of the representation element
     zIndex: 1,
   },
 
   '.switch-presentation': {
     '--switch-bg-color': 'var(--color-tinted-default-border-2)',
-    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
     '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
-    // --switch-bg-color: ${color.input.default.enabled.border};
-    // --switch-fg-color: ${color.input.default.enabled.bg};
     '--switch-thumb-offset': '0',
     '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
     'display': 'block',
-    // &:not([hidden]) {
-    //   display: block;
-    // }
     'position': 'relative',
     'width': 'var(--input-switch-width)',
     'height': 'var(--input-switch-height)',
@@ -42,59 +36,29 @@ const primitive: StyleRules = {
     'pointerEvents': 'none',
 
     '@nest': {
-      // '&::after': {
-      //   content: '""',
-      //   display: 'block',
-      //   position: 'absolute',
-      //   top: 0,
-      //   left: 0,
-      //   right: 0,
-      //   bottom: 0,
-      //   zIndex: 1,
-      //   // boxShadow: 'var(--switch-box-shadow)',
-      //   borderRadius: 'inherit',
-      // },
       '.switch-element:focus + &': {
-        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
         outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
       },
+
       'input:focus:not(:focus-visible) + &': {
         outline: 'none',
       },
+
       'input:checked + &': {
         '--switch-bg-color': 'var(--color-solid-default-bg-0)',
-        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
         '--switch-fg-color': 'var(--color-solid-default-fg-0)',
       },
-      // input:not([data-read-only]):disabled + && {
-      //   --switch-bg-color: ${color.input.default.disabled.border};
-      //   --switch-fg-color: ${color.input.default.disabled.bg};
-      // }
-      // input[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.border};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
-      // input:checked[data-read-only]:disabled + && {
-      //   --switch-bg-color: ${color.input.default.readOnly.fg};
-      //   --switch-fg-color: ${color.input.default.readOnly.bg};
-      // }
 
       '.switch-element:checked + &': {
         '--switch-thumb-offset':
           'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
       },
-    },
 
-    // @media (hover: hover) {
-    //   input:not(:disabled):hover + && {
-    //     --switch-bg-color: ${color.input.default.hovered.border};
-    //     --switch-fg-color: ${color.input.default.hovered.bg};
-    //   }
-    //   input:not(:disabled):checked:hover + && {
-    //     --switch-bg-color: ${color.input.default.enabled.fg};
-    //     --switch-fg-color: ${color.input.default.enabled.bg};
-    //   }
-    // }
+      '[data-indeterminate] > .switch-element + &': {
+        '--switch-thumb-offset':
+          'calc(var(--input-switch-width) / 2 - var(--switch-thumb-size) / 2 - var(--input-switch-padding))',
+      },
+    },
   },
 
   '.switch-track': {
@@ -106,15 +70,12 @@ const primitive: StyleRules = {
     right: 0,
     bottom: 0,
     borderRadius: 'inherit',
-    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
 
     transition:
       'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
   },
 
   '.switch-thumb': {
-    // '--switch-thumb-offset': '0',
-
     display: 'block',
     position: 'absolute',
     left: 'var(--input-switch-padding)',
@@ -127,42 +88,6 @@ const primitive: StyleRules = {
     transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
     transition:
       'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
-    //     transition-property: transform;
-    // transition-duration: ${input.switch.transitionDurationMs}ms;
-    // transition-timing-function: ${input.switch.transitionTimingFunction};
-
-    // const {$indeterminate} = props
-    // const {input} = getTheme_v2(props.theme)
-    // const trackWidth = input.switch.width
-    // const trackHeight = input.switch.height
-    // const trackPadding = input.switch.padding
-    // const size = trackHeight - input.switch.padding * 2
-    // const checkedOffset = trackWidth - trackPadding * 2 - size
-    // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
-    // const checked = $indeterminate !== true && props.$checked === true
-    // return css`
-
-    //   position: absolute;
-    //   left: ${rem(trackPadding)};
-    //   top: ${rem(trackPadding)};
-    //   height: ${rem(size)};
-    //   width: ${rem(size)};
-    //   border-radius: ${rem(size / 2)};
-    //   transition-property: transform;
-    //   transition-duration: ${input.switch.transitionDurationMs}ms;
-    //   transition-timing-function: ${input.switch.transitionTimingFunction};
-    //   background: var(--switch-fg-color);
-    //   transform: translate3d(0, 0, 0);
-    //   box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
-    //   ${checked &&
-    //   css`
-    //     transform: translate3d(${checkedOffset}px, 0, 0);
-    //   `}
-    //   ${$indeterminate &&
-    //   css`
-    //     transform: translate3d(${indeterminateOffset}px, 0, 0);
-    //   `}
-    // `
   },
 }
 

package/src/css/system.style.ts

@@ -23,6 +23,7 @@ import {heightStyle} from './aspects/height/height.style'
 import {insetStyle} from './aspects/inset/inset.style'
 import {marginStyle} from './aspects/margin/margin.style'
 import {maxWidthStyle} from './aspects/maxWidth/maxWidth.style'
+import {minWidthStyle} from './aspects/minWidth/minWidth.style'
 import {outlineStyle} from './aspects/outline/outline.style'
 import {overflowStyle} from './aspects/overflow/overflow.style'
 import {paddingStyle} from './aspects/padding/padding.style'
@@ -104,6 +105,7 @@ export const systemStyle: Style = _mergeStyles([
   insetStyle,
   marginStyle,
   maxWidthStyle,
+  minWidthStyle,
   outlineStyle,
   overflowStyle,
   paddingStyle,

package/src/theme/v3/defaults.ts

@@ -5,7 +5,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
     '*': {
       // backdrop: ['black/0.2', '200/0.2'],
       backdrop: ['black/0.5', 'gray/100/0.5'],
-      focusRing: ['blue/500', 'blue/300'],
+      focusRing: ['blue/500', 'blue/500'],
       link: {
         fg: ['blue/400', 'blue/600'],
       },

package/src/ui/components/autocomplete/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: './components/autocomplete',
+  name: 'components/autocomplete',
   title: 'Autocomplete',
   stories: [
     {

package/src/ui/components/autocomplete/autocomplete.tsx

@@ -128,7 +128,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     customValidity,
     disabled,
     filterOption: filterOptionProp,
-    fontSize = 1,
+    fontSize = 2,
     icon,
     id,
     listBox = EMPTY_RECORD,
@@ -167,14 +167,7 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
 
   const defaultRenderOption = useCallback(
     ({value}: BaseAutocompleteOption) => (
-      <Card
-        as="button"
-        // data-as="button"
-        padding={paddingProp}
-        radius={2}
-        selectable
-        // tone="inherit"
-      >
+      <Card as="button" padding={paddingProp} radius={2} tone="inherit">
         <Text size={fontSize} textOverflow="ellipsis">
           {value}
         </Text>
@@ -619,7 +612,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
                 {cloneElement(renderOption(option), {
                   disabled: loading,
                   selected: active,
-                  selectable: true,
                   tabIndex: listFocused && active ? 0 : -1,
                 })}
               </AutocompleteOption>
@@ -686,7 +678,6 @@ const InnerAutocomplete = forwardRef(function InnerAutocomplete<
     handlePopoverMouseEnter,
     handlePopoverMouseLeave,
     popover,
-    radius,
     renderPopover,
   ])
 

package/src/ui/components/dialog/dialog.tsx

@@ -26,7 +26,7 @@ import {
   useRef,
 } from 'react'
 
-import {useTheme_v2} from '../../_compat'
+import {Z_OFFSETS} from '../../constants'
 import {
   containsOrEqualsElement,
   focusFirstDescendant,
@@ -282,7 +282,6 @@ export const Dialog = forwardRef(function Dialog(
   ref: ForwardedRef<HTMLDivElement>,
 ) {
   const context = useDialog()
-  const {layer} = useTheme_v2()
   const {
     __unstable_autoFocus: autoFocus = true,
     __unstable_hideCloseButton: hideCloseButton = false,
@@ -309,8 +308,8 @@ export const Dialog = forwardRef(function Dialog(
     tone,
     ...restProps
   } = props
-  const positionProp = _positionProp ?? (context.position || 'fixed')
-  const zOffsetProp = _zOffsetProp ?? (context.zOffset || layer.dialog.zOffset)
+  const positionProp = _positionProp ?? context.position ?? 'fixed'
+  const zOffsetProp = _zOffsetProp ?? context.zOffset ?? Z_OFFSETS.dialog
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
   const portal = usePortal()

package/src/ui/constants.ts

@@ -77,3 +77,9 @@ export const FLOATING_STATIC_SIDES: Record<string, 'bottom' | 'left' | 'top' | '
   bottom: 'top',
   left: 'right',
 }
+
+export const Z_OFFSETS = {
+  dialog: 600,
+  popover: 400,
+  tooltip: 200,
+}

package/src/ui/hooks/useMediaIndex/useMediaIndex.ts

@@ -96,8 +96,6 @@ function getServerSnapshot() {
  * @beta
  */
 export function useMediaIndex(): number {
-  // const {media} = useTheme_v2()
-  // const media = MEDIA
   const store = useMemo(() => _createMediaStore(), [])
 
   return useSyncExternalStore(store.subscribe, store.getSnapshot, getServerSnapshot)

package/src/ui/primitives/box/box.tsx

@@ -66,6 +66,7 @@ export const Box = forwardRef(function Box(
     marginBottom,
     marginLeft,
     maxWidth,
+    minWidth = 0,
     overflow,
     padding = 0,
     paddingX,
@@ -82,7 +83,7 @@ export const Box = forwardRef(function Box(
     rows,
     rowStart,
     rowEnd,
-    sizing = 'border',
+    sizing = 'content',
     width,
     wrap,
     ...restProps
@@ -130,6 +131,7 @@ export const Box = forwardRef(function Box(
           marginBottom,
           marginLeft,
           maxWidth,
+          minWidth,
           muted,
           padding,
           paddingX,
@@ -150,7 +152,6 @@ export const Box = forwardRef(function Box(
           wrap,
         }),
       )}
-      // data-gap={gap}
       ref={ref}
     >
       {props.children}

package/src/ui/primitives/card/card.tsx

@@ -1,4 +1,4 @@
-import {_selectable, card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
+import {card, CardStyleProps, composeClassNames} from '@sanity/ui/css'
 import {createElement, ForwardedRef, forwardRef} from 'react'
 import {isValidElementType} from 'react-is'
 
@@ -46,7 +46,7 @@ export const Card = forwardRef(function Card(
     pressed,
     radius = 0,
     scheme: schemeProp,
-    selectable,
+    // selectable,
     selected,
     shadow,
     style,
@@ -78,15 +78,11 @@ export const Card = forwardRef(function Card(
           shadow,
           tone,
         }),
-        selectable && _selectable({radius}),
       )}
-      data-context-tone={context.tone}
-      data-context-scheme={context.scheme}
       data-checkered={checkered ? '' : undefined}
       data-focus-ring={focusRing ? '' : undefined}
       data-pressed={pressed ? '' : undefined}
       data-selected={selected ? '' : undefined}
-      data-tone={tone}
       radius={radius}
       ref={ref}
       style={style}

package/src/ui/primitives/code/code.tsx

@@ -26,7 +26,7 @@ export const Code = forwardRef(function Code(
     children,
     className,
     language: languageProp,
-    size = 1,
+    size = 2,
     weight,
     ...restProps
   } = props

package/src/ui/primitives/kbd/kbd.tsx

@@ -28,7 +28,7 @@ export const KBD = forwardRef(function KBD(
     children,
     className,
     display = 'inline-block',
-    fontSize = 1,
+    fontSize = 0,
     padding = 1,
     radius = 2,
     ...restProps
@@ -45,7 +45,7 @@ export const KBD = forwardRef(function KBD(
       padding={padding}
       ref={ref}
     >
-      <Text as="span" muted size={fontSize}>
+      <Text as="span" muted size={fontSize} weight="semibold">
         {children}
       </Text>
     </Box>