@sanity/ui 3.0.0-static.2 → 3.0.0-static.21

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

@@ -1,67 +1,77 @@
 import {
-  composeClassNames,
-  FontStyleProps,
   label,
-  LabelSize,
-  ResponsiveProp,
+  type LabelStyleProps,
   textOverflow,
-  TextOverflowStyleProps,
+  type TextOverflowStyleProps,
 } from '@sanity/ui/css'
-import {ForwardedRef, forwardRef} from 'react'
 
-import {Props} from '../../types'
+import type {ComponentType, Props} from '../../types'
 
-/**
- * @public
- */
-export interface LabelProps extends FontStyleProps, TextOverflowStyleProps {
-  accent?: boolean
-  htmlFor?: string
-  muted?: boolean
-  size?: ResponsiveProp<LabelSize>
-}
+/** @public */
+export const DEFAULT_LABEL_ELEMENT = 'div'
+
+/** @public */
+export type LabelOwnProps = LabelStyleProps & TextOverflowStyleProps
+
+/** @public */
+export type LabelElementType =
+  | 'div'
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'label'
+  | 'li'
+  | 'p'
+  | 'span'
+  | ComponentType
+
+/** @public */
+export type LabelProps<E extends LabelElementType = LabelElementType> = Props<LabelOwnProps, E>
 
 /**
  * Typographic labels.
  *
  * @public
  */
-export const Label = forwardRef(function Label(
-  props: Props<LabelProps, 'div'>,
-  ref: ForwardedRef<HTMLDivElement>,
+export function Label<E extends LabelElementType = typeof DEFAULT_LABEL_ELEMENT>(
+  props: LabelProps<E>,
 ) {
   const {
     accent,
     align,
-    as: As = 'div',
+    as: Element = DEFAULT_LABEL_ELEMENT,
     children,
     className,
     muted = false,
     size = 1,
     textOverflow: textOverflowProp,
-    weight = 'medium',
-    ...restProps
+    weight = 'regular',
+    ...rest
   } = props
 
   return (
-    <As
+    <Element
       data-ui="Label"
-      {...restProps}
-      className={composeClassNames(
+      {...rest}
+      className={label({
         className,
-        label({
-          accent,
-          align,
-          muted,
-          size,
-          weight,
-        }),
-      )}
-      ref={ref}
+        accent,
+        align,
+        muted,
+        size,
+        weight,
+      })}
     >
-      <span className={textOverflow({textOverflow: textOverflowProp})}>{children}</span>
-    </As>
+      <span
+        className={textOverflow({
+          textOverflow: textOverflowProp,
+        })}
+      >
+        {children}
+      </span>
+    </Element>
   )
-})
-
-Label.displayName = 'ForwardRef(Label)'
+}

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

@@ -4,20 +4,20 @@ import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useCallback, useRef, useState} from 'react'
 
 import {
+  WORKSHOP_CONTAINER_WIDTH_OPTIONS,
   WORKSHOP_FLEX_ALIGN_OPTIONS,
   WORKSHOP_FLEX_JUSTIFY_OPTIONS,
   WORKSHOP_PLACEMENT_OPTIONS,
-  WORKSHOP_WIDTH_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function AlignedStory() {
   const constrainSize = useBoolean('Constrain size', false)
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
-  const width = useSelect('Width', WORKSHOP_WIDTH_OPTIONS, 'auto')
+  const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
-  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS, 'flex-start')
-  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS, 'flex-end')
+  const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)

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

@@ -1,11 +1,11 @@
 import {Box, Button, Container, Flex, Popover, Stack, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 
-import {WORKSHOP_PLACEMENT_OPTIONS} from '../../../../../workshop/constants'
+import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory() {
-  const arrow = useBoolean('Arrow', true, 'Props')
-  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom', 'Props')
+  const arrow = useBoolean('Arrow', true)
+  const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
     <Flex align="center" height="fill" justify="center" padding={[4, 5, 6]} sizing="border">

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

@@ -3,7 +3,7 @@ import {Button, Card, Popover, Text} from '@sanity/ui'
 export default function OpenOnMountStory() {
   return (
     <Card height="fill" padding={3} sizing="border">
-      <Popover content={<Text size={1}>popover content</Text>} open padding={3}>
+      <Popover content={<Text size={1}>popover content</Text>} open padding={3} tone="default">
         <Button text="This button is the popover reference" />
       </Popover>
     </Card>

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

@@ -1,4 +1,4 @@
-import {Button, Card, Popover, PortalProvider, Radius, Text} from '@sanity/ui'
+import {Button, Card, Popover, PortalProvider, Text} from '@sanity/ui'
 import {useBoolean, useSelect} from '@sanity/ui-workshop'
 import {useState} from 'react'
 
@@ -7,7 +7,7 @@ import {
   WORKSHOP_PLACEMENT_OPTIONS,
   WORKSHOP_RADIUS_OPTIONS,
   WORKSHOP_SPACE_OPTIONS,
-} from '../../../../../workshop/constants'
+} from '$workshop'
 
 export default function PlainStory() {
   const arrow = useBoolean('Arrow', true)
@@ -57,7 +57,7 @@ export default function PlainStory() {
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
-              radius={radius as Radius}
+              radius={radius}
               width={width}
             >
               <Button text="This button is the popover reference" />

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

@@ -1,5 +1,5 @@
-import {Button, Flex, LayerProvider, Placement, Popover, useLayer} from '@sanity/ui'
-import {ThemeColorToneKey} from '@sanity/ui/theme'
+import {Button, Flex, LayerProvider, type Placement, Popover, useLayer} from '@sanity/ui'
+import {THEME_COLOR_CARD_TONES} from '@sanity/ui/theme'
 import {useCallback, useEffect, useMemo, useRef, useState} from 'react'
 
 export default function RecursiveStory() {
@@ -13,7 +13,6 @@ export default function RecursiveStory() {
 }
 
 const placements: Placement[] = ['top', 'right', 'bottom', 'left']
-const tones: ThemeColorToneKey[] = ['primary', 'positive', 'caution', 'critical']
 
 function RecursiveExample({onClose}: {onClose?: () => void}) {
   const [open, setOpen] = useState(false)
@@ -56,7 +55,7 @@ function RecursiveExample({onClose}: {onClose?: () => void}) {
       padding={1}
       placement={fallbackPlacements[3]}
       portal
-      tone={tones[seed]}
+      tone={THEME_COLOR_CARD_TONES[seed]}
     >
       <Button
         mode="bleed"

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

@@ -1,14 +1,16 @@
 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, PopoverProps} from '../popover'
-import {PopoverUpdateCallback} from '../types'
+import {Popover, type PopoverProps} from '../popover'
+import type {PopoverUpdateCallback} from '../types'
 
 const SIDE_PANEL_WIDTH = {
   sm: 300,
@@ -21,6 +23,7 @@ export default function SidePanelStory() {
   const sidePanelWidth = useSelect('Side panel width', SIDE_PANEL_WIDTH, SIDE_PANEL_WIDTH.md)
   const [sidePanel, setSidePanel] = useState<HTMLDivElement | null>(null)
   const updateRef = useRef<PopoverUpdateCallback>(undefined)
+  const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
 
@@ -35,14 +38,14 @@ export default function SidePanelStory() {
       </Card>
       <BoundaryElementProvider element={sidePanel}>
         <Card borderLeft flex="none" ref={setSidePanel} style={{width: sidePanelWidth}} width={0}>
-          <Stack padding={4} space={5}>
+          <Stack gap={5} padding={4}>
             <Text muted size={1}>
               Click the <code>reference</code> text below to toggle the popover.
             </Text>
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject updateRef={updateRef} />
+                Some editor <InlineObject tone={tone} updateRef={updateRef} />
               </Text>
             </Card>
           </Stack>
@@ -52,8 +55,8 @@ export default function SidePanelStory() {
   )
 }
 
-function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
-  const {updateRef} = props
+function InlineObject(props: {tone: CardTone; updateRef?: PopoverProps['updateRef']}) {
+  const {tone, updateRef} = props
   const [open, setOpen] = useState(false)
 
   const handleClick = useCallback(() => {
@@ -79,6 +82,7 @@ function InlineObject(props: {updateRef?: PopoverProps['updateRef']}) {
       open={open}
       overflow="auto"
       portal
+      tone={tone}
       width={0}
       updateRef={updateRef}
     >

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

@@ -1,18 +1,19 @@
-import {Radius} from '@sanity/ui/theme'
 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/constants'
+} from '$workshop'
+
 import {BoundaryElementProvider, PortalProvider} from '../../../utils'
 import {Button} from '../../button'
 import {Card} from '../../card'
 import {Text} from '../../text'
 import {Popover} from '../popover'
-import {PopoverUpdateCallback} from '../types'
+import type {PopoverUpdateCallback} from '../types'
 
 export default function TestStory(): React.JSX.Element {
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
@@ -82,7 +83,7 @@ export default function TestStory(): React.JSX.Element {
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
-                  radius={radius as Radius}
+                  radius={radius}
                   updateRef={updateRef}
                   width={width}
                 >

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

@@ -1,4 +1,4 @@
-import {Placement, PopoverMargins} from '../../types'
+import type {Placement, PopoverMargins} from '../../types'
 
 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, Elements, Middleware} from '@floating-ui/react-dom'
+import {detectOverflow, type Elements, type Middleware} from '@floating-ui/react-dom'
 
-import {PopoverMargins} from '../../../types'
+import type {PopoverMargins} from '../../../types'
 
 export interface SizeMiddlewareApplyOptions {
   availableWidth: number

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

@@ -1,4 +1,4 @@
-import {ContainerWidth} from '@sanity/ui/theme'
+import type {ContainerWidth} from '@sanity/ui/theme'
 
 import {DEFAULT_POPOVER_PADDING} from './constants'