banhaten 0.4.0 → 0.6.0

package/registry/components/input.tsx

@@ -30,8 +30,15 @@ type InputNativeProps = Omit<
   "className" | "dir" | "size"
 >
 
+type InputActionButtonProps = Omit<React.ComponentProps<"button">, "children">
+type InputStepperButtonProps = Omit<InputActionButtonProps, "type">
+
 type InputModeRenderProps = {
   buttonLabel?: React.ReactNode
+  /** Native props for the button or dropdown segment, including events and ARIA. */
+  buttonProps?: InputActionButtonProps
+  decreaseButtonProps?: InputStepperButtonProps
+  increaseButtonProps?: InputStepperButtonProps
   inlineLeadingAddon?: React.ReactNode
   inlineTagsClassName?: string
   inlineTrailingAddon?: React.ReactNode
@@ -77,6 +84,7 @@ type InputCommonProps = InputNativeProps & {
   hasLeadingIcon?: boolean
   hasLabel?: boolean
   isOptional?: boolean
+  /** Shows the marker and exposes aria-required without enabling native validation. */
   isRequired?: boolean
   label?: React.ReactNode
   leadingIcon?: React.ReactNode | false
@@ -100,14 +108,14 @@ const inputSurface = cva(
   [
     "group/input-surface relative flex w-full overflow-hidden rounded-[var(--bh-input-radius)]",
     "transition-[background-color,box-shadow]",
-    "[--bh-input-border:var(--bh-border-input)] [--shadow-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--shadow-component-default)]",
-    "[--shadow-input-surface:var(--shadow-component-default)]",
-    "[--shadow-input-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input))]",
-    "[--shadow-input-focus-surface:var(--shadow-input-focus-ring)]",
-    "[--shadow-input-focus-overlay:none]",
-    "[--shadow-input-disabled-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
-    "after:pointer-events-none after:absolute after:inset-0 after:z-[var(--bh-z-raised)] after:rounded-[inherit] after:[box-shadow:var(--shadow-input-overlay)] after:content-['']",
-    "focus-within:shadow-[var(--shadow-input-focus-surface)] focus-within:after:[box-shadow:var(--shadow-input-focus-overlay)]",
+    "[--bh-input-border:var(--bh-border-input)] [--elevation-input:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input)),var(--elevation-component-default)]",
+    "[--elevation-input-surface:var(--elevation-component-default)]",
+    "[--elevation-input-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-input-border,var(--bh-border-input))]",
+    "[--elevation-input-focus-surface:var(--elevation-input-focus-ring)]",
+    "[--elevation-input-focus-overlay:none]",
+    "[--elevation-input-disabled-overlay:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]",
+    "after:pointer-events-none after:absolute after:inset-0 after:z-[var(--bh-z-raised)] after:rounded-[inherit] after:[box-shadow:var(--elevation-input-overlay)] after:content-['']",
+    "focus-within:shadow-[var(--elevation-input-focus-surface)] focus-within:after:[box-shadow:var(--elevation-input-focus-overlay)]",
   ],
   {
     variants: {
@@ -122,13 +130,13 @@ const inputSurface = cva(
       },
       state: {
         default:
-          "shadow-[var(--shadow-input-surface)]",
+          "shadow-[var(--elevation-input-surface)]",
         filled:
-          "shadow-[var(--shadow-input-surface)]",
+          "shadow-[var(--elevation-input-surface)]",
         error:
-          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--shadow-input-surface)] focus-within:shadow-[var(--shadow-input-surface)] focus-within:after:[box-shadow:var(--shadow-input-overlay)]",
+          "[--bh-input-border:var(--bh-border-danger-strong)] shadow-[var(--elevation-input-surface)] focus-within:shadow-[var(--elevation-input-surface)] focus-within:after:[box-shadow:var(--elevation-input-overlay)]",
         disabled:
-          "[--bh-input-border:var(--bh-border-disabled)] bg-[var(--bh-interactive-input-disabled)] shadow-none after:[box-shadow:var(--shadow-input-disabled-overlay)]",
+          "[--bh-input-border:var(--bh-border-disabled)] bg-[var(--bh-interactive-input-disabled)] shadow-none after:[box-shadow:var(--elevation-input-disabled-overlay)]",
       },
     },
     compoundVariants: [
@@ -151,8 +159,10 @@ const inputContent = cva(
   {
     variants: {
       size: {
-        md: "px-[var(--bh-input-md-padding-x)]",
-        lg: "px-[var(--bh-input-lg-padding-x)]",
+        // Library Input frame: 8px content padding, and the value starts 4px further in when nothing precedes it,
+        // so text sits 12px from the edge and trailing icons 8px.
+        md: "px-[var(--bh-input-content-padding-x)] [&>[data-slot=input-control]:first-child]:ps-[var(--bh-input-value-inset)]",
+        lg: "px-[var(--bh-input-content-padding-x)] [&>[data-slot=input-control]:first-child]:ps-[var(--bh-input-value-inset)]",
         comfortable: "px-[var(--bh-input-comfortable-padding-x)]",
       },
     },
@@ -266,6 +276,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       labelClassName,
       surfaceClassName,
       buttonLabel,
+      buttonProps,
+      decreaseButtonProps,
       defaultValue,
       density,
       dir,
@@ -276,6 +288,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       hasLeadingIcon,
       hasLabel,
       id,
+      increaseButtonProps,
       inlineLeadingAddon,
       inlineTrailingAddon,
       isOptional = false,
@@ -299,6 +312,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       tags,
       trailingAddon,
       trailingIcon,
+      type,
       value,
       valueText,
       variant = "default",
@@ -315,7 +329,9 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
     const visualState = disabled ? "disabled" : state
     const isDisabled = visualState === "disabled"
     const isInvalid = visualState === "error" && !isDisabled
+    const isSemanticallyRequired = isRequired || Boolean(required)
     const isTagInput = kind === "tags" || kind === "inline-tags"
+    const isQuantity = kind === "quantity" || kind === "quantity-2"
     const selectedLabel = label
     const selectedOptionalText = optionalText
     const inferredPlaceholder = getInputPlaceholder({
@@ -347,8 +363,32 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         (hasRenderableContent(trailingIcon) || showInfo || Boolean(hasInformationIcon))
     )
 
-    function focusInput() {
-      if (!isDisabled) inputRef.current?.focus()
+    function focusInput(event: React.MouseEvent<HTMLDivElement>) {
+      if (isDisabled || event.defaultPrevented) return
+      if (event.target instanceof Element && event.target.closest("button, input, a, [tabindex]")) return
+      inputRef.current?.focus()
+    }
+
+    function stepInput(direction: -1 | 1) {
+      const input = inputRef.current
+      if (!input || input.disabled || input.readOnly) return
+      const previousValue = input.value
+      const hasAnyStep = input.step === "any"
+      // Native stepping owns min/max, decimal precision, and the step base.
+      // `any` permits free entry; its buttons move by one unit.
+      if (hasAnyStep) input.step = "1"
+      try {
+        if (direction === 1) input.stepUp()
+        else input.stepDown()
+      } finally {
+        if (hasAnyStep) input.step = "any"
+      }
+      if (input.value !== previousValue) {
+        // stepUp/stepDown do not emit input events. Dispatch through the native
+        // event path so React onChange and controlled-value restoration work.
+        const EventConstructor = input.ownerDocument.defaultView?.Event ?? Event
+        input.dispatchEvent(new EventConstructor("input", { bubbles: true, composed: true }))
+      }
     }
 
     function setInputRef(node: HTMLInputElement | null) {
@@ -361,6 +401,21 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       }
     }
 
+    const segmentContext = {
+      buttonLabel,
+      buttonProps,
+      decreaseButtonProps,
+      increaseButtonProps,
+      disabled: isDisabled,
+      kind,
+      leadingAddon,
+      quantityLabel,
+      readOnly: Boolean(readOnly),
+      onStep: stepInput,
+      size: resolvedSize,
+      trailingAddon,
+    }
+
     return (
       <div
         data-kind={kind}
@@ -377,7 +432,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             className={labelClassName}
             htmlFor={inputId}
             isOptional={isOptional}
-            isRequired={isRequired || Boolean(required)}
+            isRequired={isSemanticallyRequired}
             label={selectedLabel}
             optionalText={selectedOptionalText}
           />
@@ -407,15 +462,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             )}
             onClick={focusInput}
           >
-            {renderLeadingSegment({
-              buttonLabel,
-              disabled: isDisabled,
-              kind,
-              leadingAddon,
-              quantityLabel,
-              size: resolvedSize,
-              trailingAddon,
-            })}
+            {renderInputSegment({ ...segmentContext, side: "leading" })}
 
             <span
               data-slot="input-content"
@@ -444,6 +491,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               <input
                 aria-describedby={shouldRenderHelperText ? helperId : undefined}
                 aria-invalid={isInvalid || undefined}
+                aria-required={isSemanticallyRequired || undefined}
                 data-slot="input-control"
                 data-state={visualState}
                 defaultValue={inferredDefaultValue}
@@ -453,8 +501,13 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 readOnly={readOnly}
                 ref={setInputRef}
                 required={required}
+                type={isQuantity ? "number" : type}
                 value={value}
-                className={cn(inputControl(), controlClassName)}
+                className={cn(
+                  inputControl(),
+                  isQuantity && "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                  controlClassName
+                )}
                 {...props}
               />
 
@@ -482,15 +535,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
               ) : null}
             </span>
 
-            {renderTrailingSegment({
-              buttonLabel,
-              disabled: isDisabled,
-              kind,
-              leadingAddon,
-              quantityLabel,
-              size: resolvedSize,
-              trailingAddon,
-            })}
+            {renderInputSegment({ ...segmentContext, side: "trailing" })}
           </div>
 
           {selectedTags.inline.length > 0 ? (
@@ -730,60 +775,75 @@ function InputTagList({
 }
 
 function InputSegment({
+  buttonProps,
   children,
   disabled,
   interactive = false,
   side,
 }: {
+  buttonProps?: InputActionButtonProps
   children: React.ReactNode
   disabled: boolean
   interactive?: boolean
   side: "leading" | "trailing"
 }) {
-  const Comp = interactive ? "button" : "span"
+  const isDisabled = disabled || Boolean(interactive && buttonProps?.disabled)
+  const className = cn(
+    inputSegment({ disabled: isDisabled, interactive, side }),
+    interactive && buttonProps?.className
+  )
+
+  if (!interactive) {
+    return <span data-slot="input-segment" className={className}>{children}</span>
+  }
 
   return (
-    <Comp
+    <button
+      {...buttonProps}
       data-slot="input-segment"
-      disabled={interactive ? disabled : undefined}
-      type={interactive ? "button" : undefined}
-      className={cn(inputSegment({ disabled, interactive, side }))}
-      onClick={(event) => {
-        if (interactive) event.stopPropagation()
-      }}
+      disabled={isDisabled}
+      type={buttonProps?.type ?? "button"}
+      className={className}
     >
       {children}
-    </Comp>
+    </button>
   )
 }
 
 function InputStepperButton({
+  buttonProps,
   children,
   disabled,
   label,
+  onStep,
   side,
   size,
 }: {
+  buttonProps?: InputStepperButtonProps
   children: React.ReactNode
   disabled: boolean
   label: string
+  onStep: () => void
   side: "leading" | "trailing"
   size: InputSize
 }) {
   return (
     <button
-      aria-label={label}
+      {...buttonProps}
+      aria-label={buttonProps?.["aria-label"] ?? label}
       data-side={side}
       data-slot="input-stepper-button"
-      disabled={disabled}
+      disabled={disabled || buttonProps?.disabled}
       type="button"
       className={cn(
         inputStepperButton({ side }),
         size === "md" && "w-[var(--bh-input-md-height)]",
-        size === "comfortable" && "w-[var(--bh-input-comfortable-height)]"
+        size === "comfortable" && "w-[var(--bh-input-comfortable-height)]",
+        buttonProps?.className
       )}
       onClick={(event) => {
-        event.stopPropagation()
+        buttonProps?.onClick?.(event)
+        if (!event.defaultPrevented) onStep()
       }}
     >
       {children}
@@ -793,106 +853,57 @@ function InputStepperButton({
 
 type InputSegmentRenderContext = {
   buttonLabel?: React.ReactNode
+  buttonProps?: InputActionButtonProps
+  decreaseButtonProps?: InputStepperButtonProps
+  increaseButtonProps?: InputStepperButtonProps
   disabled: boolean
   kind: InputKind
   leadingAddon?: React.ReactNode
   quantityLabel?: React.ReactNode
+  readOnly: boolean
+  onStep: (direction: -1 | 1) => void
+  side: "leading" | "trailing"
   size: InputSize
   trailingAddon?: React.ReactNode
 }
 
-type InputSegmentRenderer = (
-  context: InputSegmentRenderContext
-) => React.ReactNode
+function renderInputSegment({
+  buttonLabel, buttonProps, decreaseButtonProps, increaseButtonProps,
+  disabled, kind, leadingAddon, onStep, quantityLabel, readOnly, side, size, trailingAddon,
+}: InputSegmentRenderContext) {
+  if (kind === "quantity" || kind === "quantity-2") {
+    const isDecrease = side === "leading"
+    return (
+      <InputStepperButton
+        buttonProps={isDecrease ? decreaseButtonProps : increaseButtonProps}
+        disabled={disabled || readOnly}
+        label={formatStepperLabel(isDecrease ? "Decrease" : "Increase", quantityLabel)}
+        onStep={() => onStep(isDecrease ? -1 : 1)}
+        side={side}
+        size={size}
+      >
+        {isDecrease ? <MinusIcon /> : <PlusIcon />}
+      </InputStepperButton>
+    )
+  }
 
-const leadingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
-  "add-on": ({ disabled, leadingAddon }) =>
-    hasRenderableContent(leadingAddon) ? (
-      <InputSegment disabled={disabled} side="leading">
-        {leadingAddon}
-      </InputSegment>
-    ) : null,
-  "leading-button": ({ buttonLabel, disabled }) =>
-    hasRenderableContent(buttonLabel) ? (
-      <InputSegment disabled={disabled} interactive side="leading">
-        {buttonLabel}
-      </InputSegment>
-    ) : null,
-  "leading-dropdown": ({ buttonLabel, disabled }) => (
-    <InputSegment disabled={disabled} interactive side="leading">
-      {buttonLabel}
-      <ChevronIcon />
-    </InputSegment>
-  ),
-  quantity: ({ disabled, quantityLabel, size }) => (
-    <InputStepperButton
-      disabled={disabled}
-      label={formatStepperLabel("Decrease", quantityLabel)}
-      side="leading"
-      size={size}
-    >
-      <MinusIcon />
-    </InputStepperButton>
-  ),
-  "quantity-2": ({ disabled, quantityLabel, size }) => (
-    <InputStepperButton
-      disabled={disabled}
-      label={formatStepperLabel("Decrease", quantityLabel)}
-      side="leading"
-      size={size}
-    >
-      <MinusIcon />
-    </InputStepperButton>
-  ),
-}
+  if (kind === "add-on") {
+    const addon = side === "leading" ? leadingAddon : trailingAddon
+    return hasRenderableContent(addon) ? (
+      <InputSegment disabled={disabled} side={side}>{addon}</InputSegment>
+    ) : null
+  }
 
-const trailingSegmentRenderers: Partial<Record<InputKind, InputSegmentRenderer>> = {
-  "add-on": ({ disabled, trailingAddon }) =>
-    hasRenderableContent(trailingAddon) ? (
-      <InputSegment disabled={disabled} side="trailing">
-        {trailingAddon}
-      </InputSegment>
-    ) : null,
-  "trailing-button": ({ buttonLabel, disabled }) =>
-    hasRenderableContent(buttonLabel) ? (
-      <InputSegment disabled={disabled} interactive side="trailing">
+  const isDropdown = kind === `${side}-dropdown`
+  if (isDropdown || (kind === `${side}-button` && hasRenderableContent(buttonLabel))) {
+    return (
+      <InputSegment buttonProps={buttonProps} disabled={disabled} interactive side={side}>
         {buttonLabel}
+        {isDropdown ? <ChevronIcon /> : null}
       </InputSegment>
-    ) : null,
-  "trailing-dropdown": ({ buttonLabel, disabled }) => (
-    <InputSegment disabled={disabled} interactive side="trailing">
-      {buttonLabel}
-      <ChevronIcon />
-    </InputSegment>
-  ),
-  quantity: ({ disabled, quantityLabel, size }) => (
-    <InputStepperButton
-      disabled={disabled}
-      label={formatStepperLabel("Increase", quantityLabel)}
-      side="trailing"
-      size={size}
-    >
-      <PlusIcon />
-    </InputStepperButton>
-  ),
-  "quantity-2": ({ disabled, quantityLabel, size }) => (
-    <InputStepperButton
-      disabled={disabled}
-      label={formatStepperLabel("Increase", quantityLabel)}
-      side="trailing"
-      size={size}
-    >
-      <PlusIcon />
-    </InputStepperButton>
-  ),
-}
-
-function renderLeadingSegment(context: InputSegmentRenderContext) {
-  return leadingSegmentRenderers[context.kind]?.(context) ?? null
-}
-
-function renderTrailingSegment(context: InputSegmentRenderContext) {
-  return trailingSegmentRenderers[context.kind]?.(context) ?? null
+    )
+  }
+  return null
 }
 
 function formatStepperLabel(action: "Decrease" | "Increase", quantityLabel?: React.ReactNode) {
@@ -970,9 +981,11 @@ function resolveInputSize(
 export { Input, inputContent, inputControl, inputRoot, inputSurface }
 export type {
   ControlDensity,
+  InputActionButtonProps,
   InputKind,
   InputProps,
   InputSize,
+  InputStepperButtonProps,
   InputTag,
   InputVariant,
   InputVisualState,

package/registry/components/item.tsx

@@ -8,7 +8,7 @@ const itemVariants = cva(
   [
     "group/item flex min-w-0 items-center gap-[var(--bh-item-gap)] rounded-[var(--bh-item-radius)]",
     "px-[var(--bh-item-padding-x)] py-[var(--bh-item-padding-y)] text-start text-[var(--bh-content-default)]",
-    "outline-none transition-[background-color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)]",
+    "outline-none transition-[background-color,box-shadow] focus-visible:shadow-[var(--elevation-button-focus)]",
     "aria-disabled:pointer-events-none aria-disabled:text-[var(--bh-content-disabled)]",
   ],
   {

package/registry/components/kbd.tsx

@@ -10,7 +10,7 @@ const kbdVariants = cva(
     "inline-flex min-w-[var(--bh-space-5xl-24)] items-center justify-center whitespace-nowrap rounded-[var(--bh-radius-md-6)]",
     "border border-[var(--bh-border-default)] bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-subtle)]",
     "[font-family:var(--bh-font-family)] text-[length:var(--bh-text-body-xs-medium-font-size)] font-[var(--bh-text-body-xs-medium-font-weight)]",
-    "leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] shadow-[var(--shadow-button-soft)]",
+    "leading-[var(--bh-text-body-xs-medium-line-height)] tracking-[var(--bh-text-body-xs-medium-letter-spacing)] shadow-[var(--elevation-button-soft)]",
     "data-[disabled=true]:border-[var(--bh-border-disabled)] data-[disabled=true]:bg-[var(--bh-interactive-soft-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)] data-[disabled=true]:shadow-none",
   ],
   {
@@ -40,13 +40,14 @@ type KbdProps = React.ComponentProps<"kbd"> &
   }
 
 const Kbd = React.forwardRef<HTMLElement, KbdProps>(function Kbd(
-  { className, disabled = false, size, ...props },
+  { className, dir = "ltr", disabled = false, size, ...props },
   ref
 ) {
   return (
     <kbd
       data-disabled={disabled ? "true" : undefined}
       data-slot="kbd"
+      dir={dir}
       ref={ref}
       className={cn(kbdVariants({ size, className }))}
       {...props}

package/registry/components/menu.tsx

@@ -1,6 +1,7 @@
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Slot } from "@radix-ui/react-slot"
+import { CheckIcon } from "lucide-react"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
@@ -21,7 +22,7 @@ const MENU_COLLISION_PADDING_PX = 8
 const MENU_SUBCONTENT_SIDE_OFFSET_PX = 4
 
 const menuVariants = cva(
-  "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--shadow-menu)]",
+  "flex flex-col items-start gap-[var(--bh-menu-gap)] overflow-hidden rounded-[var(--bh-menu-radius)] bg-[var(--bh-menu-bg)] py-[var(--bh-menu-padding-y)] shadow-[var(--elevation-menu)]",
   {
     variants: {
       width: {
@@ -117,6 +118,8 @@ const MenuRoot = DropdownMenuPrimitive.Root
 const MenuSub = DropdownMenuPrimitive.Sub
 const MenuTrigger = DropdownMenuPrimitive.Trigger
 const MenuStaticContext = React.createContext(false)
+// The chosen value of the MenuRadioGroup around an item in a static MenuPreview (Radix tracks it in a live menu).
+const MenuRadioStaticContext = React.createContext<string | undefined>(undefined)
 
 function Menu({ dir, ...props }: MenuProps) {
   const directionBoundaryRef = React.useRef<HTMLSpanElement | null>(null)
@@ -258,17 +261,9 @@ function getMenuItemTextValue(children: React.ReactNode) {
   return undefined
 }
 
-type MenuItemPrimitiveProps = Pick<
-  React.ComponentProps<typeof DropdownMenuPrimitive.Item>,
-  "onSelect" | "textValue"
->
-
-type MenuItemProps = React.ComponentProps<"div"> &
-  VariantProps<typeof menuItemVariants> &
-  MenuItemPrimitiveProps & {
-    asChild?: boolean
-    disabled?: boolean
-  }
+type MenuItemProps =
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> &
+  VariantProps<typeof menuItemVariants>
 
 type MenuSubTriggerPrimitiveProps = Pick<
   React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger>,
@@ -356,6 +351,112 @@ const MenuItem = React.forwardRef<HTMLDivElement, MenuItemProps>(function MenuIt
 
 MenuItem.displayName = "MenuItem"
 
+type MenuRadioGroupProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioGroup>
+
+// One choice among MenuRadioItems: value is the chosen item's value, onValueChange receives the new one. The group
+// is a full-width column with the menu's item gap, so its items stretch and space as the menu's other items do.
+const menuRadioGroupClassName = "flex w-full flex-col gap-[var(--bh-menu-gap)]"
+
+function MenuRadioGroup({ children, className, onValueChange, value, ...props }: MenuRadioGroupProps) {
+  const isStaticMenu = React.useContext(MenuStaticContext)
+
+  if (isStaticMenu) {
+    return (
+      <MenuRadioStaticContext.Provider value={value}>
+        <div data-slot="menu-radio-group" role="group" className={cn(menuRadioGroupClassName, className)} {...props}>
+          {children}
+        </div>
+      </MenuRadioStaticContext.Provider>
+    )
+  }
+
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="menu-radio-group"
+      className={cn(menuRadioGroupClassName, className)}
+      onValueChange={onValueChange}
+      value={value}
+      {...props}
+    >
+      {children}
+    </DropdownMenuPrimitive.RadioGroup>
+  )
+}
+
+type MenuRadioItemProps =
+  Omit<React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>, "asChild"> &
+  VariantProps<typeof menuItemVariants>
+
+// A menu item that is one of a MenuRadioGroup's choices: role menuitemradio with aria-checked, and a trailing check
+// on the chosen one. Radix sets the role and checked state in a live menu; a static MenuPreview sets them here.
+const MenuRadioItem = React.forwardRef<HTMLDivElement, MenuRadioItemProps>(function MenuRadioItem({
+  className,
+  kind = "default",
+  disabled = false,
+  children,
+  onSelect,
+  textValue,
+  value,
+  ...props
+}, ref) {
+  const isStaticMenu = React.useContext(MenuStaticContext)
+  const staticValue = React.useContext(MenuRadioStaticContext)
+  const selectedKind: MenuItemKind = kind ?? "default"
+  const staticChecked = staticValue === value
+  const indicator = (
+    <MenuItemIcon data-slot="menu-radio-item-indicator" position="trailing">
+      <CheckIcon aria-hidden="true" focusable={false} strokeWidth="var(--bh-icon-stroke-200)" />
+    </MenuItemIcon>
+  )
+  // In a live menu, role, aria-checked and data-state come from Radix and must not be overridden.
+  const staticSemantics = isStaticMenu
+    ? {
+        "aria-checked": staticChecked,
+        "data-state": staticChecked ? "checked" : "unchecked",
+        role: "menuitemradio",
+      }
+    : {}
+
+  const item = (
+    <div
+      {...staticSemantics}
+      aria-disabled={disabled ? true : undefined}
+      data-disabled={disabled ? "true" : "false"}
+      data-kind={selectedKind}
+      data-slot="menu-item"
+      ref={ref}
+      tabIndex={disabled ? -1 : 0}
+      className={cn(menuItemVariants({ kind: selectedKind, className }))}
+      {...props}
+    >
+      <MenuItemContent kind={selectedKind}>
+        <MenuItemChildren kind={selectedKind}>{children}</MenuItemChildren>
+        {isStaticMenu ? (
+          staticChecked ? indicator : null
+        ) : (
+          <DropdownMenuPrimitive.ItemIndicator asChild>{indicator}</DropdownMenuPrimitive.ItemIndicator>
+        )}
+      </MenuItemContent>
+    </div>
+  )
+
+  if (isStaticMenu) return item
+
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      asChild
+      disabled={disabled}
+      onSelect={onSelect}
+      textValue={textValue ?? getMenuItemTextValue(children)}
+      value={value}
+    >
+      {item}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+})
+
+MenuRadioItem.displayName = "MenuRadioItem"
+
 function findMenuItemSwitchState(children: React.ReactNode): boolean | undefined {
   let state: boolean | undefined
 
@@ -951,6 +1052,8 @@ export {
   MenuProgress,
   MenuPreview,
   MenuPortal,
+  MenuRadioGroup,
+  MenuRadioItem,
   MenuRoot,
   MenuSeparator,
   MenuSub,
@@ -981,6 +1084,8 @@ export type {
   MenuProgressProps,
   MenuProps,
   MenuPreviewProps,
+  MenuRadioGroupProps,
+  MenuRadioItemProps,
   MenuSurfaceProps,
   MenuWidth,
 }