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

package/src/core/{components → primitives}/skeleton/codeSkeleton.tsx

@@ -1,7 +1,7 @@
 import {codeSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/headingSkeleton.tsx

@@ -1,7 +1,7 @@
 import {headingSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontHeadingSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/labelSkeleton.tsx

@@ -1,7 +1,7 @@
 import {labelSkeleton, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontLabelSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/{components → primitives}/skeleton/skeleton.tsx

@@ -1,8 +1,7 @@
 import {skeleton, type SkeletonStyleProps} from '@sanity/ui/css'
 import {useEffect, useState} from 'react'
 
-import {Box, type BoxOwnProps} from '../../primitives'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @beta */
 export const DEFAULT_SKELETON_ELEMENT = 'div'
@@ -11,11 +10,10 @@ export const DEFAULT_SKELETON_ELEMENT = 'div'
  * This API might change. DO NOT USE IN PRODUCTION.
  * @beta
  */
-export type SkeletonOwnProps = BoxOwnProps &
-  SkeletonStyleProps & {
-    animated?: boolean
-    delay?: number
-  }
+export type SkeletonOwnProps = SkeletonStyleProps & {
+  animated?: boolean
+  delay?: number
+}
 
 /** @beta */
 export type SkeletonElementType = 'div' | 'span' | ComponentType
@@ -34,6 +32,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   props: SkeletonProps<E>,
 ) {
   const {
+    as: As = DEFAULT_SKELETON_ELEMENT,
     animated = false,
     className,
     delay,
@@ -58,7 +57,7 @@ export function Skeleton<E extends SkeletonElementType = typeof DEFAULT_SKELETON
   }, [delay])
 
   return (
-    <Box
+    <As
       data-ui="Skeleton"
       {...rest}
       className={skeleton({

package/src/core/{components → primitives}/skeleton/textSkeleton.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, textSkeleton} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Skeleton, type SkeletonElementType, type SkeletonOwnProps} from './skeleton'
 
 /** @beta */

package/src/core/primitives/spinner/spinner.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, spinner} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Text} from '../text'
 import {AnimatedSpinnerIcon} from './animatedSpinnerIcon'
 

package/src/core/primitives/srOnly/srOnly.tsx

@@ -1,6 +1,6 @@
 import {srOnly} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_SR_ONLY_ELEMENT = 'span'

package/src/core/primitives/stack/stack.tsx

@@ -1,7 +1,7 @@
 import {type ResponsiveProp, stack} from '@sanity/ui/css'
 import type {Space} from '@sanity/ui/theme'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */

package/src/core/primitives/switch/switch.tsx

@@ -7,7 +7,7 @@ import {
 } from '@sanity/ui/css'
 import {useEffect, useImperativeHandle, useRef} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 
 /** @public */
@@ -36,7 +36,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
 ) {
   const {
     as: Element = DEFAULT_SWITCH_ELEMENT,
-    checked,
     className,
     disabled,
     indeterminate,
@@ -63,8 +62,6 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
   return (
     <Box
       className={_switch({className})}
-      data-checked={checked ? '' : undefined}
-      data-indeterminate={indeterminate ? '' : undefined}
       data-ui="Switch"
       display="block"
       position="relative"
@@ -72,9 +69,7 @@ export function Switch<E extends SwitchElementType = typeof DEFAULT_SWITCH_ELEME
     >
       <Element
         {...rest}
-        checked={indeterminate !== true && checked}
         className={_switchElement()}
-        data-disabled={disabled ? '' : undefined}
         data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"

package/src/core/primitives/text/__workshop__/colored.tsx

@@ -1,5 +1,5 @@
 import {Flex, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import type {AvatarColor} from '@sanity/ui/theme'
 import {useSelect} from '@sanity/ui-workshop'
 import {styled} from 'styled-components'
@@ -7,7 +7,7 @@ import {styled} from 'styled-components'
 import {WORKSHOP_AVATAR_COLOR_OPTIONS} from '$workshop'
 
 const ColoredText = styled(Text)<{$color: AvatarColor}>`
-  ${varNames.color.fg}: ${({$color}) => vars.color.avatar[$color].bg};
+  ${vars.color.fg.slice(4, -1)}: ${({$color}) => vars.color.avatar[$color].bg};
 `
 
 export default function ColoredTextStory() {

package/src/core/primitives/text/__workshop__/opticalAlignment.tsx

@@ -1,48 +1,23 @@
-import {AddCircleIcon} from '@sanity/icons'
-import {Box, Card, Flex, Stack, Text} from '@sanity/ui'
+import {CropIcon} from '@sanity/icons'
+import {Box, Stack, Text} from '@sanity/ui'
+import {vars} from '@sanity/ui/css'
+import {FONT_TEXT_SIZE} from '@sanity/ui/theme'
 
 export default function OpticalAlignment() {
   return (
-    <Box padding={[4, 5, 6]}>
-      <Stack gap={1}>
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={4}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={3}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={2}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={1}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={0} tone="neutral">
-            <Text size={0}>Hamburgefonstiv M</Text>
-          </Card>
-        </Flex>
-
-        <Flex>
-          <Card padding={2} tone="neutral">
-            <Text>
-              <AddCircleIcon />
+    <Stack gap={4} padding={[4, 5, 6]}>
+      {FONT_TEXT_SIZE.map((size) => (
+        <Box display="flex" gap={2} key={size}>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>
+              <CropIcon />
             </Text>
-          </Card>
-        </Flex>
-      </Stack>
-    </Box>
+          </div>
+          <div style={{outline: `0.5px solid ${vars.color.tinted.suggest.border[4]}`}}>
+            <Text size={size}>Hamburgefonstiv M</Text>
+          </div>
+        </Box>
+      ))}
+    </Stack>
   )
 }

package/src/core/primitives/text/text.tsx

@@ -1,6 +1,6 @@
 import {text, textOverflow, type TextOverflowStyleProps, type TextStyleProps} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_ELEMENT = 'div'
@@ -39,6 +39,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
     children,
     className,
     flex,
+    maxWidth = 'fill',
     muted,
     size = 2,
     textOverflow: textOverflowProp,
@@ -55,6 +56,7 @@ export function Text<E extends TextElementType = typeof DEFAULT_TEXT_ELEMENT>(pr
         accent,
         align,
         flex,
+        maxWidth,
         muted,
         size,
         weight,

package/src/core/primitives/textArea/__workshop__/plain.tsx

@@ -26,10 +26,10 @@ export default function PlainStory() {
 
   return (
     <Card
-      align="center"
+      alignItems="center"
       display="flex"
       height="fill"
-      justify="center"
+      justifyContent="center"
       padding={[4, 5, 6]}
       sizing="border"
       tone={tone}

package/src/core/primitives/textArea/textArea.tsx

@@ -8,8 +8,8 @@ import {
 import type {Space} from '@sanity/ui/theme'
 import {useImperativeHandle, useRef} from 'react'
 
-import {useCustomValidity} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_TEXT_AREA_ELEMENT = 'textarea'

package/src/core/primitives/textInput/textInput.tsx

@@ -23,9 +23,10 @@ import {
 import {isValidElementType} from 'react-is'
 
 import {EMPTY_RECORD} from '../../constants'
-import {useCustomValidity, useResponsiveProp} from '../../hooks'
+import {useCustomValidity} from '../../hooks/useCustomValidity'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {isRecord} from '../../lib/isRecord'
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Button, type ButtonProps} from '../button'
 import {Text} from '../text'

package/src/core/primitives/tooltip/constants.ts

@@ -1,4 +1,4 @@
-import type {Placement} from '../../types'
+import type {Placement} from '../../types/placement'
 
 export const DEFAULT_TOOLTIP_ARROW_WIDTH = 15
 export const DEFAULT_TOOLTIP_ARROW_HEIGHT = 6

package/src/core/primitives/tooltip/tooltip.tsx

@@ -31,12 +31,14 @@ import {
 import {useEffectEvent} from 'use-effect-event'
 
 import {Z_OFFSETS} from '../../constants'
-import {usePrefersReducedMotion} from '../../hooks'
 import {useDelayedState} from '../../hooks/useDelayedState'
+import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
 import {origin} from '../../middleware/origin'
-import type {ComponentType, Placement, Props} from '../../types'
-import {Portal, useBoundaryElement, usePortal} from '../../utils'
+import type {Placement} from '../../types/placement'
+import type {ComponentType, Props} from '../../types/props'
+import {useBoundaryElement} from '../../utils/boundaryElement'
 import {getElementRef} from '../../utils/getElementRef'
+import {Portal, usePortal} from '../../utils/portal'
 import {CardProvider, useCard} from '../card'
 import type {LayerOwnProps} from '../layer'
 import type {Delay} from '../types'

package/src/core/primitives/tooltip/tooltipLayer.tsx

@@ -2,7 +2,7 @@ import {motion, type MotionStyle} from 'framer-motion'
 import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
-import type {Placement} from '../../types'
+import type {Placement} from '../../types/placement'
 import {Arrow} from '../arrow'
 import {Layer, type LayerOwnProps, type LayerProps} from '../layer'
 import {

package/src/core/primitives/types.ts

@@ -1,8 +1,14 @@
 import type {
   AlignItems,
+  BoxHeight,
+  BoxOverflow,
+  BoxSizing,
   Flex,
   FlexDirection,
   FlexWrap,
+  GridAutoCols,
+  GridAutoFlow,
+  GridAutoRows,
   GridItemColumn,
   GridItemColumnEnd,
   GridItemColumnStart,
@@ -11,17 +17,9 @@ import type {
   GridItemRowStart,
   JustifyContent,
 } from '@sanity/ui/css'
+import type {Radius} from '@sanity/ui/theme'
 
-import type {
-  BoxDisplay,
-  BoxHeight,
-  BoxOverflow,
-  BoxSizing,
-  GridAutoCols,
-  GridAutoFlow,
-  GridAutoRows,
-  Radius,
-} from '../types'
+import type {BoxDisplay} from './box/types'
 
 /**
  * @public

package/src/core/types/radius.ts

@@ -1,7 +1,7 @@
 export {
   /**
    * @public
-   * @deprecated
+   * @deprecated Use `Radius` from `@sanity/ui/theme` instead.
    */
   type Radius,
 } from '@sanity/ui/theme'

package/src/core/utils/elementQuery/__workshop__/customMedia.tsx

@@ -1,22 +1,26 @@
 import {Box, Card, ElementQuery, Text} from '@sanity/ui'
-import {varNames, vars} from '@sanity/ui/css'
+import {vars} from '@sanity/ui/css'
 import {styled} from 'styled-components'
 
 const TestCard = styled(Card)`
   [data-eq-min~='0'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.orange[600]}, ${vars.palette.orange[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.orange[600]}, ${vars.color
+      .palette.orange[400]});
   }
 
   [data-eq-min~='1'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.red[600]}, ${vars.palette.red[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.red[600]}, ${vars.color.palette
+      .red[400]});
   }
 
   [data-eq-min~='2'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.magenta[600]}, ${vars.palette.magenta[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.magenta[600]}, ${vars.color
+      .palette.magenta[400]});
   }
 
   [data-eq-min~='3'] > & {
-    ${varNames.color.fg}: light-dark(${vars.palette.purple[600]}, ${vars.palette.purple[400]});
+    ${vars.color.fg.slice(4, -1)}: light-dark(${vars.color.palette.purple[600]}, ${vars.color
+      .palette.purple[400]});
   }
 `
 

package/src/core/utils/elementQuery/elementQuery.tsx

@@ -1,8 +1,8 @@
 import {BREAKPOINTS} from '@sanity/ui/css'
 import {useImperativeHandle, useMemo, useState} from 'react'
 
-import {useElementSize} from '../../hooks'
-import type {ComponentType, Props} from '../../types'
+import {useElementSize} from '../../hooks/useElementSize'
+import type {ComponentType, Props} from '../../types/props'
 import {findMaxBreakpoints, findMinBreakpoints} from './helpers'
 
 /** @beta */

package/src/core/utils/portal/portal.tsx

@@ -1,7 +1,7 @@
 import type {ReactNode, ReactPortal} from 'react'
 import {createPortal} from 'react-dom'
 
-import {CardProvider, useCard} from '../../primitives'
+import {CardProvider, useCard} from '../../primitives/card'
 import {usePortal} from './usePortal'
 
 /** @public */

package/src/css/components/dialog/dialog.css.ts

@@ -63,8 +63,33 @@ export const container = _style(layers.components, {
   height: '100%',
 })
 
-export const layout = _style(layers.components, {
+export const scroller = _style(layers.components, {
   width: '100%',
+  height: '100%',
+  // overflow: 'auto',
+  outline: 'none',
+})
+
+export const scrollerShadowTop = _style(layers.components, {
+  position: 'absolute',
+  top: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to top, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
+})
+
+export const scrollerShadowBottom = _style(layers.components, {
+  position: 'absolute',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 8,
+  background: `linear-gradient(to bottom, color-mix(in srgb,transparent, ${vars.color.shadow.penumbra} 0%) 0%, color-mix(in srgb, ${vars.color.shadow.umbra} 100%, transparent 100%) 100%)`,
+  boxShadow: `inset 0 -0.5px 0 color-mix(in srgb, transparent, ${vars.color.shadow.outline} 50%)`,
+  pointerEvents: 'none',
 })
 
 export const header = _style(layers.components, {

package/src/css/components/dialog/dialog.ts

@@ -1,6 +1,16 @@
 import {_composeClassNames} from '../../_composeClassNames'
-import {inset} from '../../props'
-import {card, container, content, footer, header, layout, root} from './dialog.css'
+import {inset} from '../../props/inset'
+import {
+  card,
+  container,
+  content,
+  footer,
+  header,
+  root,
+  scroller,
+  scrollerShadowBottom,
+  scrollerShadowTop,
+} from './dialog.css'
 
 /** @public */
 export function dialog(props: {className?: string}): string | undefined {
@@ -17,11 +27,6 @@ export function dialogContainer(): string | undefined {
   return container
 }
 
-/** @public */
-export function dialogLayout(): string | undefined {
-  return layout
-}
-
 /** @public */
 export function dialogHeader(): string | undefined {
   return header
@@ -32,6 +37,21 @@ export function dialogContent(): string | undefined {
   return content
 }
 
+/** @public */
+export function dialogScroller(): string | undefined {
+  return scroller
+}
+
+/** @public */
+export function dialogScrollerShadowTop(): string | undefined {
+  return scrollerShadowTop
+}
+
+/** @public */
+export function dialogScrollerShadowBottom(): string | undefined {
+  return scrollerShadowBottom
+}
+
 /** @public */
 export function dialogFooter(): string | undefined {
   return footer

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

@@ -1,5 +1,7 @@
 import {_composeClassNames} from '../../_composeClassNames'
 import {_responsiveClassName} from '../../_responsiveClassName'
+import {flex} from '../../props/flex'
+import {margin} from '../../props/margin'
 import {radius} from '../../props/radius'
 import {codeScale, font, headingScale, labelScale, root, textScale} from './skeleton.css'
 import type {
@@ -12,7 +14,7 @@ import type {
 
 /** @beta */
 export function skeleton(props: SkeletonStyleProps): string | undefined {
-  return _composeClassNames(props.className, root, radius(props))
+  return _composeClassNames(props.className, root, flex(props), radius(props), margin(props))
 }
 
 /** @beta */

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'