@sanity/ui 3.0.0-static.4 → 3.0.0-static.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.4",
+  "version": "3.0.0-static.6",
   "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/flex/flexJustify.style.ts

@@ -6,8 +6,8 @@ const util: StyleRules = {}
 _responsiveRule(util, 'flex-justify-flex-start', {justifyContent: 'flex-start'})
 _responsiveRule(util, 'flex-justify-flex-end', {justifyContent: 'flex-end'})
 _responsiveRule(util, 'flex-justify-center', {justifyContent: 'center'})
-_responsiveRule(util, 'flex-justify-between', {justifyContent: 'space-between'})
-_responsiveRule(util, 'flex-justify-around', {justifyContent: 'space-around'})
-_responsiveRule(util, 'flex-justify-evenly', {justifyContent: 'space-evenly'})
+_responsiveRule(util, 'flex-justify-space-between', {justifyContent: 'space-between'})
+_responsiveRule(util, 'flex-justify-space-around', {justifyContent: 'space-around'})
+_responsiveRule(util, 'flex-justify-space-evenly', {justifyContent: 'space-evenly'})
 
 export const flexJustifyStyle: Style = {layers: {util}}

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

@@ -15,9 +15,9 @@ export type GridAutoCols = 'auto' | 'min' | 'max' | 'fr'
  */
 export type GridAutoFlow = 'row' | 'column' | 'row dense' | 'column dense'
 
-export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Columns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
-export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 12
+export type Rows = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
 
 /** @public */
 export interface GridStyleProps {

package/src/css/index.ts

@@ -1,4 +1,4 @@
-export * from '../theme/versioning/v3_v2'
+export * from './aspects'
 export * from './compile/compilePalette'
 export * from './compile/compileSystem'
 export * from './compile/compileTheme'
@@ -27,13 +27,13 @@ export * from './primitives/popover'
 export * from './primitives/radio'
 export * from './primitives/select'
 export * from './primitives/spinner'
+export * from './primitives/stack'
 export * from './primitives/switch'
 export * from './primitives/text'
 export * from './primitives/textArea'
 export * from './primitives/textInput'
 export * from './primitives/tooltip'
 export * from './scopeClassName'
-export * from './aspects'
 export * from './types'
 export * from './util'
 export * from './utils/srOnly'

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/button/button.style.ts

@@ -24,6 +24,8 @@ const primitive: StyleRules = {
     'backgroundColor': vars.color.bg,
     'color': vars.color.fg,
     'boxShadow': 'var(--button-box-shadow)',
+    'alignItems': 'center',
+    // 'justifyContent': 'center',
 
     '@nest': {
       '&::-moz-focus-inner': {
@@ -101,28 +103,28 @@ for (const tone of THEME_COLOR_STATE_TONES) {
   // mode: ghost
   primitive[`.button.${variantMap.ghost}.${toneMap[tone]}`] = {
     [varNames.color.bg]: tinted.bg[1],
-    [varNames.color.border]: tinted.border[1],
+    [varNames.color.border]: tinted.border[0],
     [varNames.color.fg]: tinted.fg[2],
     '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
 
     '@nest': {
       '&:not([data-disabled]):hover': {
         [varNames.color.bg]: tinted.bg[2],
-        [varNames.color.border]: tinted.border[2],
+        [varNames.color.border]: tinted.border[1],
         [varNames.color.fg]: tinted.fg[1],
         // '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled]):active': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },
 
       '&:not([data-disabled])[data-selected]': {
         [varNames.color.bg]: tinted.bg[3],
-        [varNames.color.border]: tinted.border[3],
+        [varNames.color.border]: tinted.border[2],
         [varNames.color.fg]: tinted.fg[1],
         '--button-box-shadow': `inset 0 0 0 var(--button-border-width) var(--color-border)`,
       },

package/src/css/primitives/stack/index.ts

@@ -0,0 +1 @@
+export * from './stack'

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

@@ -0,0 +1,9 @@
+import {Style, StyleRules} from '../../types'
+
+const primitive: StyleRules = {
+  '.stack': {
+    gridTemplateColumns: 'minmax(0, 1fr)',
+  },
+}
+
+export const stackStyle: Style = {layers: {primitive}}

package/src/css/primitives/stack/stack.ts

@@ -0,0 +1,6 @@
+import {_comp} from '../../_comp'
+
+/** @public */
+export function stack(): string | undefined {
+  return _comp('stack')
+}

package/src/css/system.style.ts

@@ -56,6 +56,7 @@ import {popoverStyle} from './primitives/popover/popover.style'
 import {radioStyle} from './primitives/radio/radio.style'
 import {selectStyle} from './primitives/select/select.style'
 import {spinnerStyle} from './primitives/spinner/spinner.style'
+import {stackStyle} from './primitives/stack/stack.style'
 import {switchStyle} from './primitives/switch/switch.style'
 import {textStyle} from './primitives/text/text.style'
 import {textAreaStyle} from './primitives/textArea/textArea.style'
@@ -136,6 +137,7 @@ export const systemStyle: Style = _mergeStyles([
   radioStyle,
   selectStyle,
   spinnerStyle,
+  stackStyle,
   switchStyle,
   textAreaStyle,
   textInputStyle,

package/src/theme/v3/defaults.ts

@@ -136,7 +136,7 @@ export const defaultTokens: PartialTokens<Tokens> = {
               4: ['800', '300 50%'],
             },
             border: {
-              0: ['900', '100'],
+              0: ['900', '300 40%'],
               4: ['700', '300'],
             },
             fg: {

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/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

@@ -32,6 +32,9 @@ export const Box = forwardRef(function Box(
   const {
     align,
     as: As = 'div',
+    autoCols,
+    autoFlow,
+    autoRows,
     border,
     borderTop,
     borderRight,
@@ -93,6 +96,9 @@ export const Box = forwardRef(function Box(
         className,
         box({
           align,
+          autoCols,
+          autoFlow,
+          autoRows,
           border,
           borderTop,
           borderRight,

package/src/ui/primitives/button/button.tsx

@@ -113,11 +113,12 @@ export const Button = forwardRef(function Button(
     >
       {Boolean(loading) && (
         <Box
+          align="center"
           as="span"
           className={buttonLoadingBox()}
           display="flex"
           flex={1}
-          justify={justify}
+          justify="center"
           width="fill"
         >
           <Spinner size={fontSize} />
@@ -126,8 +127,8 @@ export const Button = forwardRef(function Button(
 
       {(IconComponent || text || IconRightComponent) && (
         <Box
+          // align={align}
           as="span"
-          align={align}
           direction={direction}
           display="flex"
           flex={1}
@@ -142,8 +143,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {IconComponent && (
             <Text as="span" flex="none" muted size={fontSize}>
@@ -177,15 +178,15 @@ export const Button = forwardRef(function Button(
 
       {children && (
         <Box
-          align={align}
+          // align={align}
           as="span"
-          direction={direction}
-          display="flex"
+          // direction={direction}
+          // display="flex"
           flex={1}
           gap={gap}
           gapX={gapX}
           gapY={gapY}
-          justify={justify}
+          // justify={justify}
           padding={padding}
           paddingX={paddingX}
           paddingY={paddingY}
@@ -193,8 +194,8 @@ export const Button = forwardRef(function Button(
           paddingBottom={paddingBottom}
           paddingLeft={paddingLeft}
           paddingRight={paddingRight}
-          width="fill"
-          wrap={wrap}
+          // width="fill"
+          // wrap={wrap}
         >
           {children}
         </Box>

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/popover/popover.tsx

@@ -26,13 +26,8 @@ import {
   useRef,
 } from 'react'
 
-// import {useTheme_v2} from '../../_compat'
-import {
-  useArrayProp,
-  // useElementSize,
-  // useMediaIndex,
-  usePrefersReducedMotion,
-} from '../../hooks'
+import {Z_OFFSETS} from '../../constants'
+import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {origin} from '../../middleware/origin'
 import {Placement, PopoverMargins, Props} from '../../types'
 import {LayerProps, LayerProvider, Portal, useBoundaryElement, useLayer} from '../../utils'
@@ -44,7 +39,6 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-// import {calcCurrentWidth, calcMaxWidth} from './helpers'
 import {PopoverCard} from './popoverCard'
 import {PopoverUpdateCallback} from './types'
 
@@ -67,7 +61,7 @@ export interface PopoverProps extends CardProps, LayerProps {
    * When `true`, prevent overflow within the current boundary:
    * - by flipping on its side axis
    * - by resizing
-  /*
+   *
    * Note that:
    * - setting `preventOverflow` to `true` also prevents overflow on its side axis
    * - setting `matchReferenceWidth` to `true` also causes the popover to resize
@@ -128,13 +122,13 @@ export const Popover = memo(
     props: Props<PopoverProps, 'div'>,
     forwardedRef: ForwardedRef<HTMLDivElement>,
   ): ReactElement {
-    // const {container, layer} = useTheme_v2()
     const boundaryElementContext = useBoundaryElement()
 
     const {
       __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
       animate: _animate = false,
       arrow: arrowProp = false,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       boundaryElement = boundaryElementContext.element,
       children: childProp,
       constrainSize = false,
@@ -161,17 +155,12 @@ export const Popover = memo(
       tone = 'inherit',
       width: widthProp = 'auto',
       // zOffset: zOffsetProp = layer.popover.zOffset,
-      zOffset: zOffsetProp,
+      zOffset: zOffsetProp = Z_OFFSETS.popover,
       updateRef,
       ...restProps
     } = props
     const prefersReducedMotion = usePrefersReducedMotion()
     const animate = prefersReducedMotion ? false : _animate
-    // const boundarySize = useElementSize(boundaryElement)?.border
-    // const padding = useArrayProp(paddingProp)
-    // const radius = useArrayProp(radiusProp)
-    // const shadow = useArrayProp(shadowProp)
-    // const widthArrayProp = useArrayProp(widthProp)
     const zOffset = useArrayProp(zOffsetProp)
     const ref = useRef<HTMLDivElement | null>(null)
     const arrowRef = useRef<HTMLDivElement | null>(null)
@@ -182,57 +171,9 @@ export const Popover = memo(
       () => ref.current,
     )
 
-    // const mediaIndex = useMediaIndex()
-    // const boundaryWidth = constrainSize || preventOverflow ? boundarySize?.width : undefined
-
-    // Update width when
-    // - media index changes
-    // - `width` property changes
-    // const width = calcCurrentWidth({
-    //   container,
-    //   mediaIndex,
-    //   width: widthArrayProp,
-    // })
-    // const widthRef = useRef(width)
-
-    // useEffect(() => {
-    //   widthRef.current = width
-    // }, [width])
-
-    // Update max width when
-    // - boundary width changes
-    // - `width` property changes
-    // const maxWidth = calcMaxWidth({boundaryWidth, currentWidth: width})
-    // const maxWidthRef = useRef(maxWidth)
-
-    // useEffect(() => {
-    //   maxWidthRef.current = maxWidth
-    // }, [maxWidth])
-
     // Keep track of reference element width (see `size` middleware below)
     const referenceWidthRef = useRef<number>(undefined)
 
-    // // Force apply width & max width to floating element
-    // useEffect(() => {
-    //   const floatingElement = ref.current
-
-    //   if (!open || !floatingElement) return
-
-    //   const referenceWidth = referenceWidthRef.current
-
-    //   if (matchReferenceWidth) {
-    //     if (referenceWidth !== undefined) {
-    //       floatingElement.style.width = `${referenceWidth}px`
-    //     }
-    //   } else if (width !== undefined) {
-    //     floatingElement.style.width = `${width}px`
-    //   }
-
-    //   if (typeof maxWidth === 'number') {
-    //     floatingElement.style.maxWidth = `${maxWidth}px`
-    //   }
-    // }, [width, matchReferenceWidth, maxWidth, open])
-
     const middleware = useMemo(() => {
       const ret: Middleware[] = []
 
@@ -260,22 +201,11 @@ export const Popover = memo(
 
               referenceWidthRef.current = referenceWidth
 
-              // const _currentWidth = widthRef.current
-              // const _maxWidth = maxWidthRef.current
-
               if (matchReferenceWidth) {
                 elements.floating.style.width = `${referenceWidth}px`
               }
-              // else if (_currentWidth !== undefined) {
-              //   elements.floating.style.width = `${_currentWidth}px`
-              // }
 
               if (constrainSize) {
-                // elements.floating.style.maxWidth = `${Math.min(
-                //   availableWidth,
-                //   _maxWidth ?? Infinity,
-                // )}px`
-
                 elements.floating.style.maxWidth = `${availableWidth}px`
                 elements.floating.style.maxHeight = `${availableHeight}px`
               }

package/src/ui/primitives/stack/stack.tsx

@@ -1,4 +1,4 @@
-import {ResponsiveProp} from '@sanity/ui/css'
+import {composeClassNames, ResponsiveProp, stack} from '@sanity/ui/css'
 import {Space} from '@sanity/ui/theme'
 import {ForwardedRef, forwardRef} from 'react'
 
@@ -8,7 +8,11 @@ import {Box, BoxProps} from '../box'
 /**
  * @public
  */
-export interface StackProps extends Omit<BoxProps, 'direction' | 'display' | 'gapX' | 'gapY'> {
+export interface StackProps
+  extends Omit<
+    BoxProps,
+    'align' | 'columns' | 'direction' | 'display' | 'gapX' | 'gapY' | 'justify'
+  > {
   /** @deprecated Use `gap` instead. */
   space?: ResponsiveProp<Space>
 }
@@ -22,15 +26,16 @@ export const Stack = forwardRef(function Stack(
   props: Props<StackProps, 'div'>,
   ref: ForwardedRef<HTMLDivElement>,
 ) {
-  const {as, gap, space, ...restProps} = props
+  const {as, className, gap, space, ...restProps} = props
 
   return (
     <Box
       data-ui="Stack"
       {...restProps}
       as={as}
-      direction="column"
-      display="flex"
+      autoRows="min"
+      className={composeClassNames(className, stack())}
+      display="grid"
       gap={gap ?? space}
       ref={ref}
     />

package/src/ui/primitives/textInput/textInput.tsx

@@ -106,7 +106,7 @@ export const TextInput = forwardRef(function TextInput(
     className,
     clearButton,
     disabled = false,
-    fontSize = 1,
+    fontSize = 2,
     gap,
     icon: IconComponent,
     iconRight: IconRightComponent,

package/src/ui/primitives/tooltip/tooltip.tsx

@@ -28,7 +28,7 @@ import {
 } from 'react'
 import {useEffectEvent} from 'use-effect-event'
 
-import {useTheme_v2} from '../../_compat'
+import {Z_OFFSETS} from '../../constants'
 import {useArrayProp, usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
 import {origin} from '../../middleware/origin'
@@ -91,7 +91,6 @@ export const Tooltip = forwardRef(function Tooltip(
   forwardedRef: ForwardedRef<HTMLDivElement>,
 ) {
   const boundaryElementContext = useBoundaryElement()
-  const {layer} = useTheme_v2()
   const {
     animate: _animate = false,
     arrow: arrowProp = false,
@@ -109,7 +108,7 @@ export const Tooltip = forwardRef(function Tooltip(
     radius = 3,
     scheme,
     shadow = 2,
-    zOffset = layer.tooltip.zOffset,
+    zOffset = Z_OFFSETS.tooltip,
     tone,
     ...restProps
   } = props