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

package/src/core/primitives/badge/badge.tsx

@@ -2,9 +2,10 @@ import type {PaddingStyleProps, RadiusStyleProps, ResponsiveProp} from '@sanity/
 import {badge} from '@sanity/ui/css'
 import type {FontTextSize} from '@sanity/ui/theme'
 
-import type {BadgeTone, ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Text} from '../text'
+import type {BadgeTone} from './types'
 
 /** @public */
 export const DEFAULT_BADGE_ELEMENT = 'span'
@@ -47,10 +48,11 @@ export function Badge<E extends BadgeElementType = typeof DEFAULT_BADGE_ELEMENT>
       {...rest}
       as={as}
       className={badge({className, tone})}
-      display="inline-flex"
+      display="flex"
       maxWidth="fill"
       padding={padding}
       radius={radius}
+      width="min"
     >
       <Text size={fontSize}>{children}</Text>
     </Box>

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

@@ -1,8 +1,17 @@
-import type {BadgeTone} from '../../types'
+import type {ThemeColorStateToneKey} from '@sanity/ui/theme'
+
+/**
+ * @public
+ * @deprecated Will be removed in next major version.
+ */
+export type BadgeMode = 'default' | 'outline'
+
+/** @public */
+export type BadgeTone = ThemeColorStateToneKey
 
 /**
  * @internal
- * @deprecated
+ * @deprecated Will be removed in next major version.
  */
 export interface BadgeStyleProps {
   $tone: BadgeTone

package/src/core/primitives/box/__workshop__/responsive.tsx

@@ -9,7 +9,6 @@ export default function ResponsiveStory() {
         display={['none', 'block', 'none', 'block', 'none', 'block', 'none']}
         flex={[1, 2, 3, 4, 5, 6, 7]}
         padding={3}
-        sizing={['content', 'border', 'content', 'border', 'content', 'border', 'content']}
         style={{outline: `1px solid ${vars.color.border}`}}
       >
         <Text align="center" muted>

package/src/core/primitives/box/box.tsx

@@ -6,7 +6,7 @@ import type {
 } from '@sanity/ui/css'
 import {box} from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_BOX_ELEMENT = 'div'

package/src/core/primitives/box/index.ts

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

package/src/core/primitives/button/__workshop__/disabled.tsx

@@ -1,4 +1,5 @@
 import {SquareIcon} from '@sanity/icons'
+import {useBoolean} from '@sanity/ui-workshop'
 
 import {Card} from '../../card/card'
 import {Container} from '../../container/container'
@@ -15,60 +16,45 @@ const DEFAULT_PROPS = {
   iconRight: SquareIcon,
 } as const
 
-function Layout() {
-  return (
-    <Container width={2}>
-      <Stack gap={4}>
-        <Grid columns={COLUMNS} gap={GAP}>
-          <Text size={1} weight="semibold">
-            Default
-          </Text>
-          <Text size={1} weight="semibold">
-            Ghost
-          </Text>
-          <Text size={1} weight="semibold">
-            Bleed
-          </Text>
-        </Grid>
+export default function DisabledButtonStory() {
+  const muted = useBoolean('Muted', false)
 
-        <Stack gap={2}>
+  return (
+    <Card padding={5}>
+      <Container width={2}>
+        <Stack gap={4}>
           <Grid columns={COLUMNS} gap={GAP}>
-            <Stack gap={2}>
-              <Button {...DEFAULT_PROPS} mode="default" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="default" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack gap={2}>
-              <Button {...DEFAULT_PROPS} mode="ghost" text="Enabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="ghost" muted text="Disabled (muted)" />
-            </Stack>
-
-            <Stack gap={2}>
-              <Button {...DEFAULT_PROPS} mode="bleed" text="Enabled" />
-              <Button {...DEFAULT_PROPS} mode="bleed" disabled text="Disabled" />
-              <Button {...DEFAULT_PROPS} disabled mode="bleed" muted text="Disabled (muted)" />
-            </Stack>
+            <Text size={1} weight="semibold">
+              Default
+            </Text>
+            <Text size={1} weight="semibold">
+              Ghost
+            </Text>
+            <Text size={1} weight="semibold">
+              Bleed
+            </Text>
           </Grid>
-        </Stack>
-      </Stack>
-    </Container>
-  )
-}
-
-export default function DisabledButtonStory() {
-  return (
-    <Stack>
-      <Stack gap={4}>
-        <Card padding={5} scheme="light">
-          <Layout />
-        </Card>
 
-        <Card padding={5} scheme="dark">
-          <Layout />
-        </Card>
-      </Stack>
-    </Stack>
+          <Stack gap={2}>
+            <Grid columns={COLUMNS} gap={GAP}>
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="default" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="default" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="ghost" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} disabled mode="ghost" muted={muted} text="Disabled" />
+              </Stack>
+
+              <Stack gap={2}>
+                <Button {...DEFAULT_PROPS} mode="bleed" muted={muted} text="Enabled" />
+                <Button {...DEFAULT_PROPS} mode="bleed" disabled muted={muted} text="Disabled" />
+              </Stack>
+            </Grid>
+          </Stack>
+        </Stack>
+      </Container>
+    </Card>
   )
 }

package/src/core/primitives/button/__workshop__/index.ts

@@ -55,5 +55,10 @@ export default defineScope({
       title: 'Disabled',
       component: lazy(() => import('./disabled')),
     },
+    {
+      name: 'text-overflow',
+      title: 'Text overflow',
+      component: lazy(() => import('./textOverflow')),
+    },
   ],
 })

package/src/core/primitives/button/__workshop__/textOverflow.tsx

@@ -0,0 +1,13 @@
+import {Button, Flex} from '@sanity/ui'
+import {useText} from '@sanity/ui-workshop'
+
+export default function TextOverflowStory() {
+  const text = useText('Text', 'Long text that should overflow')
+
+  return (
+    <Flex gap={1} padding={4}>
+      <Button flex={1} text={text} />
+      <Button mode="bleed" text="Cancel" />
+    </Flex>
+  )
+}

package/src/core/primitives/button/button.tsx

@@ -12,11 +12,12 @@ import type {FontTextSize, Space} from '@sanity/ui/theme'
 import {type ElementType as ReactElementType, isValidElement, type ReactNode} from 'react'
 import {isValidElementType} from 'react-is'
 
-import type {ButtonTextAlign, ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 import {Box} from '../box'
 import {Spinner} from '../spinner'
 import type {TextOwnProps} from '../text'
 import {Text} from '../text'
+import type {ButtonTextAlign} from './types'
 
 /** @public */
 export const DEFAULT_BUTTON_ELEMENT = 'button'
@@ -63,7 +64,6 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     children,
     className,
     disabled,
-    display = 'inline-flex',
     flex,
     fontSize = 1,
     gap = props.space ?? props.padding ?? 3,
@@ -106,7 +106,7 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
     <Element
       data-ui="Button"
       {...rest}
-      className={button({className, display, flex, mode, radius, tone, width})}
+      className={button({className, flex, mode, radius, tone, width})}
       data-disabled={loading || disabled ? '' : undefined}
       data-selected={selected ? '' : undefined}
       disabled={Boolean(loading || disabled)}
@@ -154,17 +154,18 @@ export function Button<E extends ButtonElementType = typeof DEFAULT_BUTTON_ELEME
           )}
 
           {text && (
-            <Text
-              align={textAlign}
-              as="span"
-              flex="none"
-              muted={muted}
-              size={fontSize}
-              textOverflow={textOverflow}
-              weight={textWeight}
-            >
-              {text}
-            </Text>
+            <Box as="span" maxWidth="auto">
+              <Text
+                align={textAlign}
+                as="span"
+                muted={muted}
+                size={fontSize}
+                textOverflow={textOverflow}
+                weight={textWeight}
+              >
+                {text}
+              </Text>
+            </Box>
           )}
 
           {IconRightComponent && (

package/src/core/primitives/button/index.ts

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

package/src/core/primitives/card/__workshop__/listNavigation.tsx

@@ -1,4 +1,4 @@
-import {Box, Card, Flex, Skeleton, Text} from '@sanity/ui'
+import {Box, Card, Flex, Text} from '@sanity/ui'
 
 import {Stack} from '../../stack'
 
@@ -66,7 +66,7 @@ function List2() {
 function Preview() {
   return (
     <Flex align="center" gap={2}>
-      <Skeleton radius="full" style={{width: 33, height: 33}} />
+      <Box muted radius="full" style={{width: 33, height: 33}} />
       <Stack flex={1} gap={2}>
         <Text size={1} weight="medium">
           Preview

package/src/core/primitives/card/card.tsx

@@ -1,6 +1,6 @@
 import {card, type CardStyleProps} from '@sanity/ui/css'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 import {CardProvider} from './cardProvider'
 import {useCard} from './useCard'

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

@@ -1,6 +1,9 @@
 import type {ThemeColorCardToneKey, ThemeColorSchemeKey} from '@sanity/ui/theme'
 import type {ComponentType, ReactNode} from 'react'
 
+/** @public */
+export type CardTone = ThemeColorCardToneKey | 'inherit'
+
 /**
  * @internal
  * @deprecated Use `CardStyleProps` from `@sanity/ui/css` instead.

package/src/core/primitives/checkbox/__workshop__/tones.tsx

@@ -6,7 +6,15 @@ export default function MultipleTonesStory() {
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">
       <Stack gap={1}>
         {THEME_COLOR_CARD_TONES.map((tone) => (
-          <Card align="center" as="label" display="flex" gap={2} padding={3} radius={3} tone={tone}>
+          <Card
+            alignItems="center"
+            as="label"
+            display="flex"
+            gap={2}
+            padding={3}
+            radius={3}
+            tone={tone}
+          >
             <Checkbox />
             <Text muted size={1}>
               {tone}

package/src/core/primitives/checkbox/checkbox.tsx

@@ -2,8 +2,8 @@ import {CheckmarkIcon, RemoveIcon} from '@sanity/icons'
 import {checkbox, checkboxInput, checkboxPresentation} from '@sanity/ui/css'
 import {useEffect, 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_CHECKBOX_ELEMENT = 'input'
@@ -33,7 +33,6 @@ export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX
 ) {
   const {
     as: Element = DEFAULT_CHECKBOX_ELEMENT,
-    checked,
     className,
     disabled,
     indeterminate,
@@ -64,9 +63,9 @@ export function Checkbox<E extends CheckboxElementType = typeof DEFAULT_CHECKBOX
     <span className={checkbox({className})} data-ui="Checkbox" style={style}>
       <Element
         {...rest}
-        checked={checked}
         className={checkboxInput()}
         data-invalid={customValidity ? '' : undefined}
+        data-read-only={!disabled && readOnly ? '' : undefined}
         disabled={disabled || readOnly}
         type="checkbox"
         readOnly={readOnly}

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

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

package/src/core/primitives/code/code.tsx

@@ -2,7 +2,7 @@ import {code, type CodeStyleProps, type ResponsiveProp} from '@sanity/ui/css'
 import type {FontCodeSize} from '@sanity/ui/theme'
 import {lazy, Suspense} from 'react'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 const LazyRefractor = lazy(() => import('./refractor'))
 

package/src/core/primitives/container/container.tsx

@@ -1,6 +1,6 @@
 import {container, type ContainerStyleProps} from '@sanity/ui/css'
 
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */

package/src/core/primitives/flex/flex.tsx

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

package/src/core/primitives/flex/index.ts

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

package/src/core/primitives/grid/grid.tsx

@@ -1,4 +1,4 @@
-import type {Props} from '../../types'
+import type {Props} from '../../types/props'
 import {Box, type BoxElementType, type BoxOwnProps} from '../box'
 
 /** @public */

package/src/core/primitives/grid/index.ts

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

package/src/core/primitives/heading/heading.tsx

@@ -5,7 +5,7 @@ import {
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_HEADING_ELEMENT = 'div'

package/src/core/primitives/inline/inline.tsx

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} 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/kbd/kbd.tsx

@@ -1,7 +1,7 @@
 import {kbd, type RadiusStyleProps, type ResponsiveProp} 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 {Box, type BoxElementType, type BoxOwnProps} from '../box'
 import {Text} from '../text'
 

package/src/core/primitives/label/label.tsx

@@ -5,7 +5,7 @@ import {
   type TextOverflowStyleProps,
 } from '@sanity/ui/css'
 
-import type {ComponentType, Props} from '../../types'
+import type {ComponentType, Props} from '../../types/props'
 
 /** @public */
 export const DEFAULT_LABEL_ELEMENT = 'div'

package/src/core/{utils → primitives}/layer/__workshop__/index.ts

@@ -2,7 +2,7 @@ import {defineScope} from '@sanity/ui-workshop'
 import {lazy} from 'react'
 
 export default defineScope({
-  name: 'utils/layer',
+  name: 'primitives/layer',
   title: 'Layer',
   stories: [
     {

package/src/core/{utils → primitives}/layer/layer.test.tsx

@@ -5,7 +5,7 @@ import {LayerContext} from './layerContext'
 import type {LayerContextValue} from './types'
 import {useLayer} from './useLayer'
 
-describe('utils/layer', () => {
+describe('primitives/layer', () => {
   describe('useLayer', () => {
     it('should get context value', async () => {
       const log = vi.fn()

package/src/core/{utils → primitives}/layer/layer.tsx

@@ -1,7 +1,7 @@
 import type {ResponsiveProp} from '@sanity/ui/css'
 
-import type {CardElementType, CardOwnProps} from '../../primitives'
-import type {Props} from '../../types'
+import type {CardElementType, CardOwnProps} from '../../primitives/card'
+import type {Props} from '../../types/props'
 import {LayerCard} from './layerCard'
 import {LayerProvider} from './layerProvider'
 

package/src/core/{utils → primitives}/layer/layerCard.tsx

@@ -1,9 +1,9 @@
 import {type FocusEvent, useCallback, useEffect, useImperativeHandle, useRef} from 'react'
 
 import {EMPTY_RECORD} from '../../constants'
-import {containsOrEqualsElement, isHTMLElement} from '../../helpers'
-import {Card, type CardElementType} from '../../primitives'
-import type {Props} from '../../types'
+import {containsOrEqualsElement, isHTMLElement} from '../../helpers/element'
+import {Card, type CardElementType} from '../../primitives/card'
+import type {Props} from '../../types/props'
 import type {LayerElementType, LayerOwnProps} from './layer'
 import {useLayer} from './useLayer'
 

package/src/core/{utils → primitives}/layer/layerProvider.tsx

@@ -9,7 +9,8 @@ import {
   useState,
 } from 'react'
 
-import {useMediaIndex, useResponsiveProp} from '../../hooks'
+import {useMediaIndex} from '../../hooks/useMediaIndex'
+import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {getLayerContext} from './getLayerContext'
 import {LayerContext} from './layerContext'
 import type {LayerContextValue} from './types'

package/src/core/primitives/popover/__workshop__/SidePanelStory.tsx

@@ -1,16 +1,19 @@
+import {
+  BoundaryElementProvider,
+  Box,
+  Card,
+  type CardTone,
+  Flex,
+  Popover,
+  type PopoverProps,
+  type PopoverUpdateCallback,
+  Stack,
+  Text,
+} from '@sanity/ui'
 import {useSelect} from '@sanity/ui-workshop'
 import {useCallback, useEffect, useRef, useState} from 'react'
 
 import {WORKSHOP_CARD_TONE_OPTIONS} from '$workshop'
-import type {CardTone} from '../../../types'
-import {BoundaryElementProvider} from '../../../utils'
-import {Box} from '../../box'
-import {Card} from '../../card'
-import {Flex} from '../../flex'
-import {Stack} from '../../stack'
-import {Text} from '../../text'
-import {Popover, type PopoverProps} from '../popover'
-import type {PopoverUpdateCallback} from '../types'
 
 const SIDE_PANEL_WIDTH = {
   sm: 300,

package/src/core/primitives/popover/__workshop__/TestStory.tsx

@@ -1,20 +1,21 @@
+import {
+  BoundaryElementProvider,
+  Button,
+  Card,
+  Popover,
+  type PopoverUpdateCallback,
+  PortalProvider,
+  Text,
+} from '@sanity/ui'
 import {useBoolean, useSelect, useText} from '@sanity/ui-workshop'
 import {useRef, useState} from 'react'
 
 import {
   WORKSHOP_CONTAINER_WIDTH_OPTIONS,
-  // WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
 } from '$workshop'
 
-import {BoundaryElementProvider, PortalProvider} from '../../../utils'
-import {Button} from '../../button'
-import {Card} from '../../card'
-import {Text} from '../../text'
-import {Popover} from '../popover'
-import type {PopoverUpdateCallback} from '../types'
-
 export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

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

@@ -1,4 +1,4 @@
-import type {Placement, PopoverMargins} from '../../types'
+import type {Placement, PopoverMargins} from '@sanity/ui'
 
 export const DEFAULT_POPOVER_DISTANCE = 4
 export const DEFAULT_POPOVER_PADDING = 4

package/src/core/primitives/popover/floating-ui/size.ts

@@ -1,6 +1,6 @@
 import {detectOverflow, type Elements, type Middleware} from '@floating-ui/react-dom'
 
-import type {PopoverMargins} from '../../../types'
+import type {PopoverMargins} from '../types'
 
 export interface SizeMiddlewareApplyOptions {
   availableWidth: number