@sanity/ui 4.0.0-static.4 → 4.0.0-static.41

package/src/core/primitives/popover/{popover.tsx → Popover.tsx}

@@ -18,24 +18,25 @@ import {
   type ReactElement,
   type ReactNode,
   type Ref,
+  use,
   useCallback,
-  useEffect,
   useImperativeHandle,
   useMemo,
   useRef,
 } from 'react'
 
 import {Z_OFFSETS} from '../../constants'
+import {_getResponsiveProp} from '../../helpers/props'
 import {usePrefersReducedMotion} from '../../hooks/usePrefersReducedMotion'
-import {useResponsiveProp} from '../../hooks/useResponsiveProp'
 import {origin} from '../../middleware/origin'
 import type {ComponentType, Placement, Props} from '../../types'
-import {useBoundaryElement} from '../../utils/boundaryElement/useBoundaryElement'
+import {BoundaryElementContext} from '../../utils/boundaryElement/BoundaryElementContext'
 import {getElementRef} from '../../utils/getElementRef'
-import {Portal} from '../../utils/portal/portal'
-import {CardProvider} from '../card/cardProvider'
-import {useCard} from '../card/useCard'
-import {type LayerOwnProps} from '../layer/layer'
+import {Portal} from '../../utils/portal/Portal'
+import {CardContext} from '../card/CardContext'
+import {CardProvider} from '../card/CardProvider'
+import {assertCardContext} from '../card/useCard'
+import {type LayerOwnProps} from '../layer/Layer'
 import {useLayer} from '../layer/useLayer'
 import {
   DEFAULT_FALLBACK_PLACEMENTS,
@@ -44,7 +45,7 @@ import {
   DEFAULT_POPOVER_PADDING,
 } from './constants'
 import {size} from './floating-ui/size'
-import {PopoverLayer} from './popoverLayer'
+import {PopoverLayer} from './PopoverLayer'
 import type {PopoverMargins, PopoverUpdateCallback} from './types'
 
 /** @public */
@@ -154,8 +155,6 @@ function ViewportOverlay() {
 export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_ELEMENT>(
   props: PopoverProps<E>,
 ): React.JSX.Element {
-  const boundaryElementContext = useBoundaryElement()
-
   const {
     __unstable_margins: margins = DEFAULT_POPOVER_MARGINS,
     animate: _animate = false,
@@ -166,12 +165,10 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     constrainSize = false,
     content,
     disabled,
-    fallbackPlacements = props.fallbackPlacements ??
-      DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom'],
+    fallbackPlacements: _fallbackPlacements,
     matchReferenceWidth,
-    floatingBoundary = boundaryElementContext.element,
+    floatingBoundary: _floatingBoundary,
     modal,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onActivate,
     open,
     overflow = 'hidden',
@@ -182,7 +179,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     preventOverflow = true,
     radius = 3,
     ref: forwardedRef,
-    referenceBoundary = boundaryElementContext.element,
+    referenceBoundary: _referenceBoundary,
     referenceElement,
     scheme,
     shadow = 3,
@@ -192,12 +189,14 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     updateRef,
     ...rest
   } = props as PopoverProps<typeof DEFAULT_POPOVER_ELEMENT>
-
-  const card = useCard()
+  const fallbackPlacements =
+    _fallbackPlacements ?? DEFAULT_FALLBACK_PLACEMENTS[props.placement ?? 'bottom']
+  const floatingBoundary = _floatingBoundary ?? use(BoundaryElementContext)
+  const referenceBoundary = _referenceBoundary ?? use(BoundaryElementContext)
 
   const prefersReducedMotion = usePrefersReducedMotion()
   const animate = prefersReducedMotion ? false : _animate
-  const zOffset = useResponsiveProp(zOffsetProp)
+  const zOffset = useMemo(() => _getResponsiveProp(zOffsetProp), [zOffsetProp])
   const ref = useRef<HTMLDivElement | null>(null)
   const arrowRef = useRef<HTMLDivElement | null>(null)
   const rootBoundary: RootBoundary = 'viewport'
@@ -207,108 +206,22 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   // Keep track of reference element width (see `size` middleware below)
   const referenceWidthRef = useRef<number>(undefined)
 
-  const middleware = useMemo(() => {
-    const ret: Middleware[] = []
-
-    // Flip the floating element when leaving the boundary box
-    if (constrainSize || preventOverflow) {
-      if (placementStrategy === 'autoPlacement') {
-        ret.push(
-          autoPlacement({
-            allowedPlacements: [placementProp].concat(fallbackPlacements),
-          }),
-        )
-      } else {
-        ret.push(
-          flip({
-            boundary: floatingBoundary || undefined,
-            fallbackPlacements,
-            padding: DEFAULT_POPOVER_PADDING,
-            rootBoundary,
-          }),
-        )
-      }
-    }
-
-    // Define distance between reference and floating element
-    ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
-
-    // Track sizes
-    if (constrainSize || matchReferenceWidth) {
-      ret.push(
-        size({
-          apply({availableWidth, availableHeight, elements, referenceWidth}) {
-            // not fresh, so use refs
-
-            referenceWidthRef.current = referenceWidth
-
-            if (matchReferenceWidth) {
-              elements.floating.style.width = `${referenceWidth}px`
-            }
-
-            if (constrainSize) {
-              elements.floating.style.maxWidth = `${availableWidth}px`
-              elements.floating.style.maxHeight = `${availableHeight}px`
-            }
-          },
-          boundaryElement: floatingBoundary || undefined,
-          constrainSize,
-          margins,
-          matchReferenceWidth,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // Shift the popover so its sits within the boundary element
-    if (preventOverflow) {
-      ret.push(
-        shift({
-          boundary: floatingBoundary || undefined,
-          rootBoundary,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // Place arrow
-    if (arrowProp) {
-      ret.push(
-        arrow({
-          element: arrowRef,
-          padding: DEFAULT_POPOVER_PADDING,
-        }),
-      )
-    }
-
-    // Determine the origin to scale from.
-    // Must be placed after `@sanity/ui/size` and `shift` middleware.
-    if (animate) {
-      ret.push(origin)
-    }
-
-    ret.push(
-      hide({
-        boundary: referenceBoundary || undefined,
-        padding: DEFAULT_POPOVER_PADDING,
-        strategy: 'referenceHidden',
-      }),
-    )
-
-    return ret
-  }, [
+  const middleware = useMiddleware({
     animate,
     arrowProp,
+    arrowRef,
     constrainSize,
     fallbackPlacements,
     floatingBoundary,
-    placementProp,
-    placementStrategy,
     margins,
     matchReferenceWidth,
+    placementProp,
+    placementStrategy,
     preventOverflow,
     referenceBoundary,
-  ])
+    referenceWidthRef,
+    rootBoundary,
+  })
 
   const {x, y, middlewareData, placement, refs, strategy, update} = useFloating({
     middleware,
@@ -329,10 +242,6 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
   const originX = middlewareData['@sanity/ui/origin']?.originX
   const originY = middlewareData['@sanity/ui/origin']?.originY
 
-  const setArrow = useCallback((arrowEl: HTMLDivElement | null) => {
-    arrowRef.current = arrowEl
-  }, [])
-
   const setFloating = useCallback(
     (node: HTMLDivElement | null) => {
       ref.current = node
@@ -341,22 +250,9 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     [refs],
   )
 
-  const setReference = useCallback(
-    (node: HTMLElement | null) => {
-      refs.setReference(node)
-
-      if (!childProp) return
-
-      const childRef = getElementRef(childProp)
-
-      if (typeof childRef === 'function') {
-        childRef(node)
-      } else if (childRef) {
-        childRef.current = node
-      }
-    },
-    [childProp, refs],
-  )
+  // If there's a child then we need to set the reference element to the cloned child ref
+  // and if child changes we make sure to update or remove the reference element.
+  useImperativeHandle(childProp ? getElementRef(childProp) : null, () => refs.reference.current)
 
   const child = useMemo(() => {
     // If a reference element is defined, we don't need to clone the child
@@ -364,18 +260,10 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
 
     if (!childProp) return null
 
-    return cloneElement(childProp, {ref: setReference})
-  }, [childProp, referenceElement, setReference])
+    return cloneElement(childProp, {ref: refs.setReference})
+  }, [childProp, referenceElement, refs.setReference])
 
-  useEffect(() => {
-    if (updateRef) {
-      if (typeof updateRef === 'function') {
-        updateRef(update)
-      } else if (updateRef) {
-        updateRef.current = update
-      }
-    }
-  }, [update, updateRef])
+  useImperativeHandle(updateRef, () => update, [update])
 
   if (disabled) {
     return childProp || <></>
@@ -392,7 +280,7 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
         __unstable_margins={margins}
         animate={animate}
         arrow={arrowProp}
-        arrowRef={setArrow}
+        arrowRef={arrowRef}
         arrowX={arrowX}
         arrowY={arrowY}
         as={as}
@@ -419,17 +307,24 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 
-  const children =
-    open &&
-    (portal ? (
+  let children = open ? node : null
+
+  if (open && portal) {
+    let resolvedTone = tone as Exclude<typeof tone, 'inherit'>
+    if (tone === 'inherit') {
+      const card = use(CardContext)
+      assertCardContext(card)
+      resolvedTone = card.tone
+    }
+
+    children = (
       <Portal __unstable_name={typeof portal === 'string' ? portal : undefined}>
-        <CardProvider tone={tone === 'inherit' ? card.tone : tone} scheme={scheme ?? 'light'}>
+        <CardProvider tone={resolvedTone} scheme={scheme ?? 'light'}>
           {node}
         </CardProvider>
       </Portal>
-    ) : (
-      node
-    ))
+    )
+  }
 
   return (
     <>
@@ -441,3 +336,128 @@ export function Popover<E extends PopoverElementType = typeof DEFAULT_POPOVER_EL
     </>
   )
 }
+
+function useMiddleware({
+  animate,
+  arrowProp,
+  arrowRef,
+  constrainSize,
+  fallbackPlacements,
+  floatingBoundary,
+  margins,
+  matchReferenceWidth,
+  placementProp,
+  placementStrategy,
+  preventOverflow,
+  referenceBoundary,
+  referenceWidthRef,
+  rootBoundary,
+}: {
+  animate: boolean
+  arrowProp: boolean
+  arrowRef: React.RefObject<HTMLDivElement | null>
+  constrainSize: boolean
+  fallbackPlacements: Placement[]
+  floatingBoundary: HTMLElement | null
+  margins: PopoverMargins
+  matchReferenceWidth: boolean | undefined
+  placementProp: Placement
+  placementStrategy: 'flip' | 'autoPlacement'
+  preventOverflow: boolean
+  referenceBoundary: HTMLElement | null
+  referenceWidthRef: React.RefObject<number | undefined>
+  rootBoundary: RootBoundary
+}) {
+  return useMemo(() => {
+    const ret: Middleware[] = []
+
+    // Flip the floating element when leaving the boundary box
+    if (constrainSize || preventOverflow) {
+      if (placementStrategy === 'autoPlacement') {
+        ret.push(
+          autoPlacement({
+            allowedPlacements: [placementProp].concat(fallbackPlacements),
+          }),
+        )
+      } else {
+        ret.push(
+          flip({
+            boundary: floatingBoundary || undefined,
+            fallbackPlacements,
+            padding: DEFAULT_POPOVER_PADDING,
+            rootBoundary,
+          }),
+        )
+      }
+    }
+
+    // Define distance between reference and floating element
+    ret.push(offset({mainAxis: DEFAULT_POPOVER_DISTANCE}))
+
+    // Track sizes
+    if (constrainSize || matchReferenceWidth) {
+      ret.push(
+        size({
+          boundaryElement: floatingBoundary || undefined,
+          constrainSize,
+          margins,
+          matchReferenceWidth,
+          padding: DEFAULT_POPOVER_PADDING,
+          referenceWidthRef,
+        }),
+      )
+    }
+
+    // Shift the popover so its sits within the boundary element
+    if (preventOverflow) {
+      ret.push(
+        shift({
+          boundary: floatingBoundary || undefined,
+          rootBoundary,
+          padding: DEFAULT_POPOVER_PADDING,
+        }),
+      )
+    }
+
+    // Place arrow
+    if (arrowProp) {
+      ret.push(
+        arrow({
+          element: arrowRef,
+          padding: DEFAULT_POPOVER_PADDING,
+        }),
+      )
+    }
+
+    // Determine the origin to scale from.
+    // Must be placed after `@sanity/ui/size` and `shift` middleware.
+    if (animate) {
+      ret.push(origin)
+    }
+
+    ret.push(
+      hide({
+        boundary: referenceBoundary || undefined,
+        padding: DEFAULT_POPOVER_PADDING,
+        strategy: 'referenceHidden',
+      }),
+    )
+
+    return ret
+  }, [
+    animate,
+    arrowProp,
+    arrowRef,
+    constrainSize,
+    fallbackPlacements,
+    floatingBoundary,
+    margins,
+    matchReferenceWidth,
+    placementProp,
+    placementStrategy,
+    preventOverflow,
+    referenceBoundary,
+    referenceWidthRef,
+    rootBoundary,
+  ])
+}

package/src/core/primitives/popover/{popoverLayer.tsx → PopoverLayer.tsx}

@@ -5,9 +5,9 @@ import {type CSSProperties, type ForwardedRef, useMemo} from 'react'
 
 import {POPOVER_MOTION_PROPS} from '../../constants'
 import type {Placement} from '../../types'
-import {Arrow} from '../arrow/arrow'
-import {Flex} from '../flex/flex'
-import {Layer, type LayerOwnProps, type LayerProps} from '../layer/layer'
+import {Arrow} from '../arrow/Arrow'
+import {Flex} from '../flex/Flex'
+import {Layer, type LayerOwnProps, type LayerProps} from '../layer/Layer'
 import {
   DEFAULT_POPOVER_ARROW_HEIGHT,
   DEFAULT_POPOVER_ARROW_RADIUS,

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

@@ -12,11 +12,15 @@ import {
 
 export default function AlignedStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', false)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS)
   const portal = useBoolean('Portal', true)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
+  // @ts-expect-error - TODO: fix this
   const flexAlign = useSelect('Align', WORKSHOP_FLEX_ALIGN_OPTIONS)
+  // @ts-expect-error - TODO: fix this
   const flexJustify = useSelect('Justify', WORKSHOP_FLEX_JUSTIFY_OPTIONS)
 
   const [open, setOpen] = useState(false)
@@ -49,7 +53,13 @@ export default function AlignedStory(): React.JSX.Element {
   return (
     <Card height="fill" padding={[4, 5, 6]} sizing="border" tone="transparent">
       <Card height="fill" padding={2} ref={setBoundaryElement} shadow={1} sizing="border">
-        <Flex align={flexAlign} height="fill" justify={flexJustify}>
+        <Flex
+          // @ts-expect-error - TODO: fix this
+          align={flexAlign}
+          height="fill"
+          // @ts-expect-error - TODO: fix this
+          justify={flexJustify}
+        >
           <Popover
             constrainSize={constrainSize}
             content={content}
@@ -58,8 +68,10 @@ export default function AlignedStory(): React.JSX.Element {
             overflow="auto"
             padding={3}
             portal={portal}
+            // @ts-expect-error - TODO: fix this
             placement={placement}
             ref={popoverElementRef}
+            // @ts-expect-error - TODO: fix this
             width={width}
           >
             <Button

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

@@ -5,6 +5,7 @@ import {WORKSHOP_PLACEMENT_OPTIONS} from '$workshop'
 
 export default function MatchReferenceWidthStory(): React.JSX.Element {
   const arrow = useBoolean('Arrow', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
 
   return (
@@ -18,6 +19,7 @@ export default function MatchReferenceWidthStory(): React.JSX.Element {
         }
         matchReferenceWidth
         open
+        // @ts-expect-error - TODO: fix this
         placement={placement}
         radius={2}
       >

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

@@ -15,11 +15,15 @@ export default function PlainStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const padding = useSelect('Padding', WORKSHOP_SPACE_OPTIONS, 3)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
   const [portalElement, setPortalElement] = useState<HTMLDivElement | null>(null)
   const [boundaryElement, setBoundaryElement] = useState<HTMLDivElement | null>(null)
@@ -53,11 +57,15 @@ export default function PlainStory(): React.JSX.Element {
               floatingBoundary={boundaryElementFlag ? boundaryElement : undefined}
               matchReferenceWidth={matchReferenceWidth}
               open={open}
+              // @ts-expect-error - TODO: fix this
               padding={padding}
+              // @ts-expect-error - TODO: fix this
               placement={placement}
               portal={portal}
               preventOverflow={preventOverflow}
+              // @ts-expect-error - TODO: fix this
               radius={radius}
+              // @ts-expect-error - TODO: fix this
               width={width}
             >
               <Button text="This button is the popover reference" />

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

@@ -26,6 +26,7 @@ export default function SidePanelStory(): React.JSX.Element {
   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)
+  // @ts-expect-error - TODO: fix this
   const tone = useSelect('Tone', WORKSHOP_CARD_TONE_OPTIONS) ?? 'inherit'
 
   useEffect(() => updateRef.current?.(), [sidePanelWidth])
@@ -48,7 +49,12 @@ export default function SidePanelStory(): React.JSX.Element {
 
             <Card border padding={3}>
               <Text size={1}>
-                Some editor <InlineObject tone={tone} updateRef={updateRef} />
+                Some editor{' '}
+                <InlineObject
+                  // @ts-expect-error - TODO: fix this
+                  tone={tone}
+                  updateRef={updateRef}
+                />
               </Text>
             </Card>
           </Stack>

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

@@ -25,11 +25,14 @@ export default function TestStory(): React.JSX.Element {
   const constrainSize = useBoolean('Constrain size', true)
   const matchReferenceWidth = useBoolean('Match reference width', false)
   const open = useBoolean('Open', true)
+  // @ts-expect-error - TODO: fix this
   const placement = useSelect('Placement', WORKSHOP_PLACEMENT_OPTIONS, 'bottom')
   const portal = useBoolean('Render in portal', true)
   const preventOverflow = useBoolean('Prevent overflow', true)
+  // @ts-expect-error - TODO: fix this
   const radius = useSelect('Radius', WORKSHOP_RADIUS_OPTIONS, 2)
   const referenceWide = useBoolean('Reference wide?', false)
+  // @ts-expect-error - TODO: fix this
   const width = useSelect('Width', WORKSHOP_CONTAINER_WIDTH_OPTIONS, 'auto')
 
   const text = useText('Text', 'Test')
@@ -81,11 +84,14 @@ export default function TestStory(): React.JSX.Element {
                   open={open}
                   overflow="hidden"
                   padding={3}
+                  // @ts-expect-error - TODO: fix this
                   placement={placement}
                   portal={portal}
                   preventOverflow={preventOverflow}
+                  // @ts-expect-error - TODO: fix this
                   radius={radius}
                   updateRef={updateRef}
+                  // @ts-expect-error - TODO: fix this
                   width={width}
                 >
                   {button}

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

@@ -1,23 +1,16 @@
-import {detectOverflow, type Elements, type Middleware} from '@floating-ui/react-dom'
+import {detectOverflow, type Middleware} from '@floating-ui/react-dom'
 
 import type {PopoverMargins} from '../types'
 
-export interface SizeMiddlewareApplyOptions {
-  availableWidth: number
-  availableHeight: number
-  elements: Elements
-  referenceWidth: number
-}
-
 export function size(options: {
-  apply: (args: SizeMiddlewareApplyOptions) => void
   boundaryElement?: HTMLElement | null
   constrainSize: boolean
   margins: PopoverMargins
   matchReferenceWidth?: boolean
   padding?: number
+  referenceWidthRef: React.RefObject<number | undefined>
 }): Middleware {
-  const {apply, margins, padding = 0} = options
+  const {margins, padding = 0, constrainSize, matchReferenceWidth, referenceWidthRef} = options
 
   return {
     name: '@sanity/ui/size',
@@ -61,12 +54,20 @@ export function size(options: {
 
       // IMPORTANT – APPLY ELEMENT STYLES HERE
       // Elements need to be resized BEFORE the `platform.getDimensions` call below
-      apply({
-        availableWidth: maxWidth - margins[1] - margins[3],
-        availableHeight: maxHeight - margins[0] - margins[2],
-        elements,
-        referenceWidth: reference.width - margins[1] - margins[3],
-      })
+      const availableWidth = maxWidth - margins[1] - margins[3]
+      const availableHeight = maxHeight - margins[0] - margins[2]
+      const referenceWidth = reference.width - margins[1] - margins[3]
+
+      referenceWidthRef.current = referenceWidth
+
+      if (matchReferenceWidth) {
+        elements.floating.style.width = `${referenceWidth}px`
+      }
+
+      if (constrainSize) {
+        elements.floating.style.maxWidth = `${availableWidth}px`
+        elements.floating.style.maxHeight = `${availableHeight}px`
+      }
 
       const nextDimensions = await platform.getDimensions(elements.floating)
 

package/src/core/primitives/radio/{radio.tsx → Radio.tsx}

@@ -47,7 +47,7 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
   useCustomValidity(ref, customValidity)
 
   return (
-    <div className={radio({className})} data-ui="Radio" style={style}>
+    <span className={radio({className})} data-ui="Radio" style={style}>
       <Element
         {...rest}
         className={radioInput()}
@@ -59,6 +59,6 @@ export function Radio<E extends RadioElementType = typeof DEFAULT_RADIO_ELEMENT>
         type="radio"
       />
       <span className={radioPresentation()} />
-    </div>
+    </span>
   )
 }

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

@@ -5,8 +5,8 @@ const scope: WorkshopScope = {
   name: 'primitives/radio',
   title: 'Radio',
   stories: [
-    {name: 'plain', title: 'Plain', component: lazy(() => import('./plain'))},
-    {name: 'example', title: 'Example', component: lazy(() => import('./example'))},
+    {name: 'plain', title: 'Plain', component: lazy(() => import('./Plain'))},
+    {name: 'example', title: 'Example', component: lazy(() => import('./Example'))},
   ],
 }