@pantoia/ui 0.3.0 → 0.5.0

package/number-field/index.tsx

@@ -1,6 +1,7 @@
 'use client'
 
-import { useEffect, useRef, useState, type InputHTMLAttributes, type PointerEvent as ReactPointerEvent, type KeyboardEvent as ReactKeyboardEvent } from 'react'
+import { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field'
+import { useState, type KeyboardEvent as ReactKeyboardEvent } from 'react'
 
 import { tv } from '../tv'
 
@@ -38,200 +39,148 @@ export const numberField = tv({
   defaultVariants: { surface: 'bare', size: 'md' },
 })
 
-const HOLD_DELAY = 400
-const HOLD_EVERY = 60
-
-const clamp = (n: number, min: number, max: number) => Math.min(max, Math.max(min, n))
-
-const GROUPED = new Intl.NumberFormat('en-US')
-
-const TYPING = /[^0-9.-]/g
-
-function snap(n: number, min: number, step: number) {
-  const from = Number.isFinite(min) ? min : 0
-  return from + Math.round((n - from) / step) * step
+const PAGE_KEYS: Record<string, 'ArrowUp' | 'ArrowDown'> = {
+  PageUp: 'ArrowUp',
+  PageDown: 'ArrowDown',
 }
 
-function useHold(step: () => void, blocked: boolean) {
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
-  const beat = useRef<ReturnType<typeof setInterval> | undefined>(undefined)
-  const latest = useRef(step)
-  const [pressed, setPressed] = useState(false)
-
-  useEffect(() => { latest.current = step })
-
-  const stop = () => {
-    clearTimeout(timer.current)
-    clearInterval(beat.current)
-    setPressed(false)
-  }
-
-  useEffect(() => stop, [])
-
-  const onPointerDown = (e: ReactPointerEvent<HTMLButtonElement>) => {
-    if (e.button !== 0 || blocked) return
-
-    latest.current()
-    setPressed(true)
-    e.currentTarget.setPointerCapture(e.pointerId)
+function snap(n: number, min: number | undefined, max: number | undefined, step: number) {
+  const from = min ?? 0
+  const snapped = from + Math.round((n - from) / step) * step
+  return Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min ?? Number.NEGATIVE_INFINITY, snapped))
+}
 
-    timer.current = setTimeout(() => {
-      beat.current = setInterval(() => { latest.current() }, HOLD_EVERY)
-    }, HOLD_DELAY)
+function blurDetails(event: Event): NumberFieldPrimitive.Root.ChangeEventDetails {
+  const details: NumberFieldPrimitive.Root.ChangeEventDetails = {
+    reason: 'input-blur',
+    event: event as FocusEvent,
+    trigger: event.target instanceof Element ? event.target : undefined,
+    isCanceled: false,
+    isPropagationAllowed: false,
+    cancel: () => { details.isCanceled = true },
+    allowPropagation: () => { details.isPropagationAllowed = true },
   }
-
-  return { pressed, onPointerDown, onPointerUp: stop, onPointerCancel: stop, onLostPointerCapture: stop }
+  return details
 }
 
-export interface NumberFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'onChange' | 'size' | 'min' | 'max' | 'step'> {
-  value?: number | undefined
-  defaultValue?: number
-  onValueChange?: (value: number | undefined) => void
-  decrementLabel: string
-  incrementLabel: string
-  min?: number
-  max?: number
-  step?: number
-  surface?: 'bare' | 'well'
-  size?: 'sm' | 'md' | 'lg'
-  disabled?: boolean
-  readOnly?: boolean
-  className?: string
-}
+export type NumberFieldProps = Omit<NumberFieldPrimitive.Root.Props, 'className'>
+  & Pick<NumberFieldPrimitive.Input.Props, 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'placeholder' | 'autoFocus'>
+  & {
+    decrementLabel: string
+    incrementLabel: string
+    surface?: 'bare' | 'well'
+    size?: 'sm' | 'md' | 'lg'
+    className?: string
+  }
 
-export function NumberField(props: NumberFieldProps) {
-  const {
-    value,
-    defaultValue,
-    onValueChange,
-    decrementLabel,
-    incrementLabel,
-    min = Number.NEGATIVE_INFINITY,
-    max = Number.POSITIVE_INFINITY,
-    step = 1,
-    surface,
-    size,
-    disabled = false,
-    readOnly = false,
-    className,
-    ...rest
-  } = props
-
-  const controlled = 'value' in props
-  const [own, setOwn] = useState<number | undefined>(defaultValue)
-  const [typing, setTyping] = useState<string | null>(null)
+export function NumberField({
+  value,
+  defaultValue,
+  onValueChange,
+  onValueCommitted,
+  decrementLabel,
+  incrementLabel,
+  step = 1,
+  largeStep,
+  min,
+  max,
+  surface,
+  size,
+  disabled = false,
+  readOnly = false,
+  locale = 'en-US',
+  className,
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  placeholder,
+  autoFocus,
+  ...rest
+}: NumberFieldProps) {
+  const [own, setOwn] = useState<number | null>(defaultValue ?? null)
+  const controlled = value !== undefined
   const current = controlled ? value : own
+  const unit = step === 'any' ? 1 : step
 
   const ui = numberField({ surface, size, readonly: readOnly })
+  const stepButton = <button type="button" disabled={disabled || readOnly} />
 
-  const set = (next: number | undefined) => {
-    const after = next === undefined ? undefined : clamp(next, min, max)
-    if (!controlled) setOwn(after)
-    if (after !== current) onValueChange?.(after)
+  const change: NumberFieldPrimitive.Root.Props['onValueChange'] = (next, details) => {
+    onValueChange?.(next, details)
+    if (!details.isCanceled && !controlled) setOwn(next)
   }
 
-  const blocked = disabled || readOnly
-  const from = current ?? (Number.isFinite(min) ? min : 0)
-  const atMin = current !== undefined && current <= min
-  const atMax = current !== undefined && current >= max
-
-  const down = useHold(() => { setTyping(null); set(from - step) }, blocked || atMin)
-  const up = useHold(() => { setTyping(null); set(from + step) }, blocked || atMax)
-
-  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
-    if (blocked) return
-
-    const moves: Record<string, number> = {
-      ArrowUp: from + step,
-      ArrowDown: from - step,
-      PageUp: from + step * 10,
-      PageDown: from - step * 10,
-      Home: min,
-      End: max,
+  const commit: NumberFieldPrimitive.Root.Props['onValueCommitted'] = (committed, details) => {
+    if (details.reason !== 'input-blur' || committed === null || step === 'any') {
+      onValueCommitted?.(committed, details)
+      return
     }
 
-    const next = moves[e.key]
-    if (next === undefined || !Number.isFinite(next)) return
+    const snapped = snap(committed, min, max, unit)
+    if (snapped !== committed) {
+      const changeDetails = blurDetails(details.event)
+      change(snapped, changeDetails)
+      if (changeDetails.isCanceled) return
+    }
 
-    e.preventDefault()
-    setTyping(null)
-    set(next)
+    onValueCommitted?.(snapped, details)
   }
 
-  const onWheel = (e: React.WheelEvent<HTMLInputElement>) => {
-    e.currentTarget.blur()
-  }
+  const onKeyDown = (e: ReactKeyboardEvent<HTMLInputElement>) => {
+    const arrow = PAGE_KEYS[e.key]
+    if (!arrow || e.altKey || e.ctrlKey || e.metaKey) return
 
-  const onInput = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const raw = e.target.value.replace(TYPING, '')
-    setTyping(min >= 0 ? raw.replace(/-/g, '') : raw)
+    e.preventDefault()
+    e.currentTarget.dispatchEvent(new KeyboardEvent('keydown', { key: arrow, shiftKey: true, bubbles: true, cancelable: true }))
   }
 
-  const onBlur = () => {
-    if (typing === null) return
-
-    const parsed = Number(typing)
-    const empty = typing.trim() === ''
-    setTyping(null)
-
-    if (empty) set(undefined)
-    else if (Number.isFinite(parsed)) set(snap(parsed, min, step))
-  }
+  const inputProps = Object.fromEntries(
+    Object.entries({
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledBy,
+      'aria-describedby': ariaDescribedBy,
+      'aria-invalid': ariaInvalid,
+      placeholder,
+      autoFocus,
+    }).filter(([, v]) => v !== undefined),
+  ) as NumberFieldPrimitive.Input.Props
 
   return (
-    <div className={ui.root({ className })}>
-      <button
-        type="button"
-        aria-label={decrementLabel}
-        disabled={blocked}
-        aria-disabled={atMin || undefined}
-        data-pressed={down.pressed ? '' : undefined}
-        className={ui.step()}
-        onPointerDown={down.onPointerDown}
-        onPointerUp={down.onPointerUp}
-        onPointerCancel={down.onPointerCancel}
-        onLostPointerCapture={down.onLostPointerCapture}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
-          <path d="M5 12h14" />
-        </svg>
-      </button>
-
-      <input
-        {...rest}
-        type="text"
-        inputMode="decimal"
-        role="spinbutton"
-        aria-valuenow={current}
-        aria-valuemin={Number.isFinite(min) ? min : undefined}
-        aria-valuemax={Number.isFinite(max) ? max : undefined}
-        value={typing ?? (current === undefined ? '' : GROUPED.format(current))}
-        disabled={disabled}
-        readOnly={readOnly}
-        onChange={onInput}
-        onBlur={onBlur}
-        onKeyDown={onKeyDown}
-        onWheel={onWheel}
-        className={ui.input()}
-      />
-
-      <button
-        type="button"
-        aria-label={incrementLabel}
-        disabled={blocked}
-        aria-disabled={atMax || undefined}
-        data-pressed={up.pressed ? '' : undefined}
-        className={ui.step()}
-        onPointerDown={up.onPointerDown}
-        onPointerUp={up.onPointerUp}
-        onPointerCancel={up.onPointerCancel}
-        onLostPointerCapture={up.onLostPointerCapture}
-      >
-        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
-          <path d="M5 12h14" />
-          <path d="M12 5v14" />
-        </svg>
-      </button>
-    </div>
+    <NumberFieldPrimitive.Root
+      {...rest}
+      value={current}
+      onValueChange={change}
+      onValueCommitted={commit}
+      step={step}
+      largeStep={largeStep ?? unit * 10}
+      min={min}
+      max={max}
+      disabled={disabled}
+      readOnly={readOnly}
+      locale={locale}
+      className={className}
+    >
+      <NumberFieldPrimitive.Group className={ui.root()}>
+        <NumberFieldPrimitive.Decrement render={stepButton} aria-label={decrementLabel} className={ui.step()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M5 12h14" />
+          </svg>
+        </NumberFieldPrimitive.Decrement>
+
+        <NumberFieldPrimitive.Input
+          {...inputProps}
+          onKeyDown={onKeyDown}
+          className={ui.input()}
+        />
+
+        <NumberFieldPrimitive.Increment render={stepButton} aria-label={incrementLabel} className={ui.step()}>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" aria-hidden="true" className="size-4">
+            <path d="M5 12h14" />
+            <path d="M12 5v14" />
+          </svg>
+        </NumberFieldPrimitive.Increment>
+      </NumberFieldPrimitive.Group>
+    </NumberFieldPrimitive.Root>
   )
 }

package/package.json

@@ -1,12 +1,11 @@
 {
   "name": "@pantoia/ui",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "description": "Pantoia Design System",
   "homepage": "https://design.pantoia.com",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/pantoia/pantoia-design.git",
-    "directory": "packages/registry"
+    "url": "git+https://github.com/pantoia/pantoia-ui.git"
   },
   "license": "MIT",
   "type": "module",
@@ -16,10 +15,8 @@
   "files": [
     "*/index.tsx",
     "*/index.module.css",
-    "*/AGENTS.md",
     "dist",
     "tv.ts",
-    "test-utils.ts",
     "tailwind.css",
     "palette.css",
     "tokens.css",
@@ -33,7 +30,6 @@
     "./tokens.css": "./tokens.css",
     "./utilities.css": "./utilities.css",
     "./registry.json": "./registry.json",
-    "./test-utils": "./test-utils.ts",
     "./*": "./*/index.tsx"
   },
   "sideEffects": [
@@ -47,11 +43,16 @@
   },
   "scripts": {
     "prepack": "tsc cli/index.ts --ignoreConfig --outDir dist --target es2022 --module esnext --moduleResolution bundler --skipLibCheck --types node",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --noEmit && tsc --noEmit -p tsconfig.node.json",
+    "check": "tsx scripts/check.ts",
+    "lint": "oxlint --deny-warnings",
+    "test": "vitest run",
+    "verify": "npm run typecheck && npm run check && npm run lint && npm run test",
+    "dev:up": "docker compose up -d dev",
+    "dev:down": "docker compose down"
   },
   "dependencies": {
-    "radix-ui": "^1.6.7",
-    "sonner": "^2.0.8",
+    "@base-ui/react": "^1.8.0",
     "tailwind-variants": "^3.3.1"
   },
   "peerDependencies": {
@@ -60,12 +61,19 @@
     "tailwindcss": "^4.0.0"
   },
   "devDependencies": {
-    "@pantoia/typescript-config": "*",
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/react": "^16.3.3",
+    "@testing-library/user-event": "^14.6.6",
     "@types/node": "26.4.0",
     "@types/react": "19.2.18",
     "@types/react-dom": "19.2.5",
+    "happy-dom": "^20.12.0",
+    "oxlint": "1.81.0",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "typescript": "7.0.2"
+    "tailwindcss": "4.3.3",
+    "tsx": "4.23.12",
+    "typescript": "7.0.2",
+    "vitest": "^4.1.11"
   }
 }

package/popover/index.tsx

@@ -1,41 +1,58 @@
 'use client'
 
-import { Popover as PopoverPrimitive } from 'radix-ui'
-import type { ComponentProps, ReactNode } from 'react'
+import { Popover as PopoverPrimitive } from '@base-ui/react/popover'
+import { useRender } from '@base-ui/react/use-render'
+import { createContext, useContext, useState } from 'react'
+import type { ComponentProps, Dispatch, SetStateAction } from 'react'
 
 import { tv } from '../tv'
 
-export interface PopoverProps {
-  open?: boolean
-  defaultOpen?: boolean
-  onOpenChange?: (open: boolean) => void
-  children?: ReactNode
-}
+type AnchorState = [Element | null, Dispatch<SetStateAction<Element | null>>]
+
+const AnchorContext = createContext<AnchorState>([null, () => {}])
+
+export type PopoverProps = ComponentProps<typeof PopoverPrimitive.Root>
+
+export function Popover(props: PopoverProps) {
+  const anchor = useState<Element | null>(null)
 
-export function Popover({ open, defaultOpen, onOpenChange, children }: PopoverProps) {
   return (
-    <PopoverPrimitive.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>
-      {children}
-    </PopoverPrimitive.Root>
+    <AnchorContext.Provider value={anchor}>
+      <PopoverPrimitive.Root {...props} />
+    </AnchorContext.Provider>
   )
 }
 
-export function PopoverTrigger({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+export type PopoverTriggerProps = ComponentProps<typeof PopoverPrimitive.Trigger>
+
+export function PopoverTrigger(props: PopoverTriggerProps) {
+  return <PopoverPrimitive.Trigger {...props} />
 }
 
-export function PopoverAnchor({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Anchor asChild>{children}</PopoverPrimitive.Anchor>
+export type PopoverAnchorProps = useRender.ComponentProps<'div'>
+
+export function PopoverAnchor({ render, ref, ...rest }: PopoverAnchorProps) {
+  const [, setAnchor] = useContext(AnchorContext)
+
+  return useRender({
+    defaultTagName: 'div',
+    render,
+    ref: ref ? [setAnchor, ref] : setAnchor,
+    props: rest,
+  })
 }
 
-export function PopoverClose({ children }: { children: ReactNode }) {
-  return <PopoverPrimitive.Close asChild>{children}</PopoverPrimitive.Close>
+export type PopoverCloseProps = ComponentProps<typeof PopoverPrimitive.Close>
+
+export function PopoverClose(props: PopoverCloseProps) {
+  return <PopoverPrimitive.Close {...props} />
 }
 
-export interface PopoverContentProps extends Omit<ComponentProps<typeof PopoverPrimitive.Content>, 'side' | 'align'> {
+export type PopoverContentProps = Omit<ComponentProps<typeof PopoverPrimitive.Popup>, 'className'> & {
   side?: 'top' | 'right' | 'bottom' | 'left'
   align?: 'start' | 'center' | 'end'
   arrow?: boolean
+  className?: string
 }
 
 const popoverContent = tv({
@@ -44,6 +61,14 @@ const popoverContent = tv({
     + ' focus-visible:outline-none',
 })
 
+const popoverArrow = tv({
+  base: 'data-uncentered:invisible'
+    + ' side-top:top-full'
+    + ' side-bottom:bottom-full side-bottom:rotate-180'
+    + ' side-right:left-0 side-right:origin-top-left side-right:rotate-90 side-right:-translate-y-1/2'
+    + ' side-left:right-0 side-left:origin-top-right side-left:-rotate-90 side-left:-translate-y-1/2',
+})
+
 export function PopoverContent({
   side = 'bottom',
   align = 'center',
@@ -52,25 +77,29 @@ export function PopoverContent({
   children,
   ...rest
 }: PopoverContentProps) {
+  const [anchor] = useContext(AnchorContext)
+
   return (
     <PopoverPrimitive.Portal>
-      <PopoverPrimitive.Content
-        {...rest}
+      <PopoverPrimitive.Positioner
+        anchor={anchor ?? undefined}
         side={side}
         align={align}
-        sideOffset={8}
+        sideOffset={arrow ? 14 : 8}
         arrowPadding={16}
-        className={popoverContent({ className })}
+        className="z-overlay min-w-max will-change-transform"
       >
-        {children}
-        {arrow && (
-          <PopoverPrimitive.Arrow asChild width={12} height={6}>
-            <svg viewBox="0 0 12 6" preserveAspectRatio="none" className="fill-bg-panel -translate-y-px">
-              <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
-            </svg>
-          </PopoverPrimitive.Arrow>
-        )}
-      </PopoverPrimitive.Content>
+        <PopoverPrimitive.Popup {...rest} className={popoverContent({ className })}>
+          {children}
+          {arrow && (
+            <PopoverPrimitive.Arrow className={popoverArrow()}>
+              <svg width={12} height={6} viewBox="0 0 12 6" preserveAspectRatio="none" className="block fill-bg-panel -translate-y-px">
+                <path d="M0 0L4.58579 4.58579C5.36683 5.36683 6.63316 5.36684 7.41421 4.58579L12 0" className="stroke-line stroke-1" />
+              </svg>
+            </PopoverPrimitive.Arrow>
+          )}
+        </PopoverPrimitive.Popup>
+      </PopoverPrimitive.Positioner>
     </PopoverPrimitive.Portal>
   )
 }

package/radio-group/index.tsx

@@ -1,7 +1,8 @@
 'use client'
 
-import { RadioGroup as RadioGroupPrimitive } from 'radix-ui'
-import { createContext, use, useId, type ReactNode } from 'react'
+import { Radio } from '@base-ui/react/radio'
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group'
+import { cloneElement, createContext, use, useEffect, useId, useState, type ComponentProps, type ReactElement, type ReactNode } from 'react'
 
 import { Label } from '../label'
 import { tv } from '../tv'
@@ -14,6 +15,7 @@ export interface RadioItemContext {
   id: string
   labelId: string
   descriptionId: string
+  setDescribed: (described: boolean) => void
 }
 
 const ItemContext = createContext<RadioItemContext | null>(null)
@@ -44,69 +46,57 @@ export const radioGroupItem = tv({
   defaultVariants: { color: 'neutral' },
 })
 
-export interface RadioGroupProps {
-  value?: string
-  defaultValue?: string
-  onValueChange?: (value: string) => void
+export type RadioGroupProps = Omit<RadioGroupPrimitive.Props<string>, 'className'> & {
   color?: RadioColor
-  disabled?: boolean
   className?: string
-  children?: ReactNode
 }
 
 const radioGroup = tv({ base: 'flex flex-col gap-3' })
 
-export function RadioGroup({
-  value,
-  defaultValue,
-  onValueChange,
-  color = 'neutral',
-  disabled = false,
-  className,
-  children,
-  ...rest
-}: RadioGroupProps) {
+export function RadioGroup({ color = 'neutral', className, ...rest }: RadioGroupProps) {
   return (
     <ColorContext value={color}>
-      <RadioGroupPrimitive.Root
-        {...rest}
-        value={value}
-        defaultValue={defaultValue}
-        onValueChange={onValueChange}
-        disabled={disabled}
-        className={radioGroup({ className })}
-      >
-        {children}
-      </RadioGroupPrimitive.Root>
+      <RadioGroupPrimitive<string> {...rest} className={radioGroup({ className })} />
     </ColorContext>
   )
 }
 
-export interface RadioGroupItemProps {
+export type RadioGroupItemProps = Omit<ComponentProps<typeof Radio.Root>, 'className' | 'value'> & {
   value: string
-  disabled?: boolean
   className?: string
-  children?: ReactNode
 }
 
-export function RadioGroupItem({ value, disabled, className, children }: RadioGroupItemProps) {
+export function RadioGroupItem({
+  value,
+  className,
+  children,
+  nativeButton = true,
+  render = <button type="button" />,
+  ...rest
+}: RadioGroupItemProps) {
   const id = useId()
+  const [described, setDescribed] = useState(false)
   const color = use(ColorContext)
   const ui = radioGroupItem({ color })
+  const renderWithId: RadioGroupItemProps['render'] = typeof render === 'function'
+    ? (props, state) => render({ ...props, id }, state)
+    : cloneElement(render as ReactElement<{ id?: string }>, { id })
 
   return (
-    <ItemContext value={{ id, labelId: `${id}-label`, descriptionId: `${id}-description` }}>
+    <ItemContext value={{ id, labelId: `${id}-label`, descriptionId: `${id}-description`, setDescribed }}>
       <div className={ui.root({ className })}>
-        <RadioGroupPrimitive.Item
+        <Radio.Root<string>
+          {...rest}
+          nativeButton={nativeButton}
+          render={renderWithId}
           id={id}
           value={value}
-          disabled={disabled}
           aria-labelledby={`${id}-label`}
-          aria-describedby={`${id}-description`}
+          aria-describedby={described ? `${id}-description` : undefined}
           className={ui.control()}
         >
-          <RadioGroupPrimitive.Indicator className="text-fg-neutral-solid-contrast size-2.5 rounded-full bg-current" />
-        </RadioGroupPrimitive.Item>
+          <Radio.Indicator className="text-fg-neutral-solid-contrast size-2.5 rounded-full bg-current" />
+        </Radio.Root>
 
         <div className="flex min-w-0 flex-col gap-0.5">
           {children}
@@ -130,6 +120,13 @@ const radioGroupItemDescription = tv({ base: 'text-caption text-fg-subtle' })
 
 export function RadioGroupItemDescription({ className, children }: { className?: string, children?: ReactNode }) {
   const ctx = use(ItemContext)
+  const setDescribed = ctx?.setDescribed
+
+  useEffect(() => {
+    if (!setDescribed) return
+    setDescribed(true)
+    return () => setDescribed(false)
+  }, [setDescribed])
 
   return (
     <p