tembro 2.0.6 → 2.1.0

package/packages/cli/vendor/src/components/overlay/confirm-dialog.tsx

@@ -11,25 +11,32 @@ type ConfirmDialogProps = Omit<ModalShellProps, "footer"> & {
   confirmVariant?: ConfirmVariant
   confirmDisabled?: boolean
   cancelDisabled?: boolean
-  isLoading?: boolean
-  onCancel?: () => void
-  onConfirm?: () => void
-}
+  isLoading?: boolean
+  closeOnConfirm?: boolean
+  onConfirmError?: (error: unknown) => void
+  onCancel?: () => void
+  onConfirm?: () => void | Promise<void>
+}
 
 function ConfirmDialog({
   cancelText = "Cancel",
   confirmText = "Confirm",
   confirmVariant = "default",
   confirmDisabled = false,
-  cancelDisabled = false,
-  isLoading = false,
-  onCancel,
-  onConfirm,
-  onOpenChange,
-  ...props
+  cancelDisabled = false,
+  isLoading = false,
+  closeOnConfirm = true,
+  onConfirmError,
+  onCancel,
+  onConfirm,
+  onOpenChange,
+  ...props
 }: ConfirmDialogProps) {
+  const [pending, setPending] = React.useState(false)
+  const resolvedLoading = isLoading || pending
+
   const handleOpenChange = (open: boolean) => {
-    if (isLoading && open === false) {
+    if (resolvedLoading && open === false) {
       return
     }
 
@@ -38,31 +45,47 @@ function ConfirmDialog({
 
   const handleCancel = () => {
     onCancel?.()
-    if (!isLoading) {
+    if (!resolvedLoading) {
       onOpenChange?.(false)
     }
   }
 
+  const handleConfirm = async () => {
+    if (confirmDisabled || resolvedLoading) return
+
+    try {
+      setPending(true)
+      await onConfirm?.()
+      if (closeOnConfirm) {
+        onOpenChange?.(false)
+      }
+    } catch (error) {
+      onConfirmError?.(error)
+    } finally {
+      setPending(false)
+    }
+  }
+
   return (
     <ModalShell
-      showCloseButton={!isLoading}
+      showCloseButton={!resolvedLoading}
       onOpenChange={handleOpenChange}
       footer={
         <DialogActions>
           <DialogActionButton
-            type="button"
-            variant="outline"
-            disabled={cancelDisabled || isLoading}
-            onClick={handleCancel}
-          >
-            {cancelText}
+            type="button"
+            variant="outline"
+            disabled={cancelDisabled || resolvedLoading}
+            onClick={handleCancel}
+          >
+            {cancelText}
           </DialogActionButton>
           <DialogActionButton
             type="button"
             variant={confirmVariant}
-            disabled={confirmDisabled || isLoading}
-            isLoading={isLoading}
-            onClick={onConfirm}
+            disabled={confirmDisabled || resolvedLoading}
+            isLoading={resolvedLoading}
+            onClick={() => void handleConfirm()}
           >
             {confirmText}
           </DialogActionButton>

package/packages/cli/vendor/src/components/overlay/drawer.tsx

@@ -12,13 +12,15 @@ import {
 } from "@/components/ui/dialog"
 import { cn } from "@/lib/utils"
 
-export type DrawerSide = "left" | "right" | "top" | "bottom"
+export type DrawerSide = "left" | "right" | "top" | "bottom"
+export type DrawerWidth = "sm" | "md" | "lg" | "xl" | "full"
 
 export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children"> & {
   trigger?: React.ReactNode
   title?: React.ReactNode
   description?: React.ReactNode
   side?: DrawerSide
+  width?: DrawerWidth
   footer?: React.ReactNode
   headerClassName?: string
   bodyClassName?: string
@@ -29,17 +31,26 @@ export type DrawerProps = Omit<React.ComponentProps<typeof Dialog>, "children">
 }
 
 const sideClassName: Record<DrawerSide, string> = {
-  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right sm:max-w-lg",
-  left: "left-0 top-0 h-dvh max-h-dvh w-full max-w-md translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left sm:max-w-lg",
+  right: "left-auto right-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-l-[var(--radius-3xl)] data-open:slide-in-from-right data-closed:slide-out-to-right",
+  left: "left-0 top-0 h-dvh max-h-dvh w-full translate-x-0 translate-y-0 rounded-none rounded-r-[var(--radius-3xl)] data-open:slide-in-from-left data-closed:slide-out-to-left",
   top: "left-0 top-0 h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-b-[var(--radius-3xl)] data-open:slide-in-from-top data-closed:slide-out-to-top",
   bottom: "bottom-0 left-0 top-auto h-auto max-h-[85dvh] w-full max-w-none translate-x-0 translate-y-0 rounded-none rounded-t-[var(--radius-3xl)] data-open:slide-in-from-bottom data-closed:slide-out-to-bottom",
 }
+
+const widthClassName: Record<DrawerWidth, string> = {
+  sm: "sm:max-w-sm",
+  md: "sm:max-w-md",
+  lg: "sm:max-w-lg",
+  xl: "sm:max-w-2xl",
+  full: "max-w-none sm:max-w-[min(100vw,72rem)]",
+}
 
 function Drawer({
   trigger,
-  title,
+  title,
   description,
   side = "right",
+  width = "lg",
   footer,
   headerClassName,
   bodyClassName,
@@ -55,7 +66,9 @@ function Drawer({
       <DialogContent
         size="full"
         showCloseButton={showCloseButton}
-        className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 p-0", sideClassName[side], contentClassName)}
+        data-side={side}
+        data-width={width}
+        className={cn("fixed grid grid-rows-[auto_minmax(0,1fr)_auto] gap-0 overscroll-contain p-0", sideClassName[side], (side === "left" || side === "right") && widthClassName[width], contentClassName)}
       >
         {(title || description) && (
           <DialogHeader className={cn("border-b border-border/70 p-6", headerClassName)}>

package/packages/cli/vendor/src/components/ui/accordion/index.tsx

@@ -17,6 +17,10 @@ export type AccordionRootProps = CollapseProps
 export type AccordionTriggerProps = CollapseTriggerProps
 export type AccordionContentProps = React.ComponentProps<"div">
 
+/**
+ * Accordion is the grouped disclosure API. Use CollapseRoot/CollapseTrigger/CollapseContent
+ * for a single standalone disclosure.
+ */
 function Accordion(props: AccordionProps) {
   return <CollapseGroup data-slot="accordion" {...props} />
 }

package/packages/cli/vendor/src/components/ui/badge/index.tsx

@@ -17,6 +17,7 @@ const badgeVariants = cva(
           "border-[color:color-mix(in_oklch,var(--border),var(--foreground)_10%)] bg-[color:color-mix(in_oklch,var(--muted),var(--background)_8%)] text-foreground",
         destructive:
           "border-[color:color-mix(in_oklch,var(--destructive),transparent_52%)] bg-[color:color-mix(in_oklch,var(--destructive),transparent_82%)] text-[color:color-mix(in_oklch,var(--destructive),black_16%)] dark:text-[color:color-mix(in_oklch,var(--destructive),white_38%)]",
+        soft: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_38%)] text-foreground shadow-none",
         outline: "bg-[color:color-mix(in_oklch,var(--background),var(--muted)_6%)] text-foreground shadow-none",
         ghost: "border-transparent bg-[color:color-mix(in_oklch,var(--muted),transparent_76%)] text-muted-foreground shadow-none",
         link: "border-transparent bg-transparent p-0 text-primary shadow-none underline-offset-4",
@@ -115,7 +116,7 @@ function Badge({
                   event.stopPropagation()
                   onRemove?.()
                 }}
-                className="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100"
+                className="inline-flex size-4 shrink-0 items-center justify-center rounded-full bg-[color:color-mix(in_oklch,currentColor,transparent_90%)] opacity-80 transition hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/35"
               >
                 <XIcon className="size-3" />
               </button>

package/packages/cli/vendor/src/components/ui/button/index.tsx

@@ -46,6 +46,7 @@ export type ButtonProps = ButtonPrimitive.Props &
     loadingLabel?: string
     leftIcon?: React.ReactNode
     rightIcon?: React.ReactNode
+    iconOnly?: boolean
     fullWidth?: boolean
     pressed?: boolean
   }
@@ -59,25 +60,30 @@ function Button({
   loadingLabel = "Loading",
   leftIcon,
   rightIcon,
+  iconOnly = false,
   fullWidth = false,
   pressed = false,
   children,
+  "aria-label": ariaLabel,
   ...props
 }: ButtonProps) {
-  const isDisabled = disabled || loading
-
-  return (
+  const isDisabled = disabled || loading
+  const resolvedSize = iconOnly && (size === "default" || size === "md") ? "icon" : size
+
+  return (
     <ButtonPrimitive
       data-slot="button"
       data-variant={variant ?? "default"}
-      data-size={size ?? "default"}
+      data-size={resolvedSize ?? "default"}
+      data-icon-only={iconOnly || undefined}
       data-loading={loading || undefined}
       data-pressed={pressed || undefined}
       disabled={isDisabled}
       aria-busy={loading || undefined}
       aria-pressed={pressed || undefined}
+      aria-label={ariaLabel}
       className={cn(
-        buttonVariants({ variant, size, className }),
+        buttonVariants({ variant, size: resolvedSize, className }),
         fullWidth && "w-full",
         pressed && "shadow-[var(--aui-control-shadow,0_1px_2px_rgba(15,23,42,0.04)),0_0_0_1px_var(--aui-focus-ring,var(--ring))]"
       )}

package/packages/cli/vendor/src/components/ui/dialog/index.tsx

@@ -70,8 +70,9 @@ function DialogContent({
         data-size={size}
         data-surface={surface}
         role="dialog"
+        aria-modal="true"
         className={cn(
-          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-hidden rounded-[var(--radius-3xl)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-6 text-sm text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_24px_70px_rgba(15,23,42,0.22))] backdrop-blur duration-100 outline-none data-[surface=plain]:overflow-visible data-[surface=plain]:border-transparent data-[surface=plain]:bg-transparent data-[surface=plain]:p-0 data-[surface=plain]:shadow-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_minmax(0,1fr)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          "fixed top-1/2 left-1/2 z-50 grid max-h-[min(92vh,calc(100dvh-2rem))] w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-5 overflow-y-auto overscroll-contain rounded-[var(--radius-3xl)] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-6 text-sm text-popover-foreground shadow-[var(--aui-control-panel-shadow,0_24px_70px_rgba(15,23,42,0.22))] backdrop-blur duration-100 outline-none data-[surface=plain]:overflow-visible data-[surface=plain]:border-transparent data-[surface=plain]:bg-transparent data-[surface=plain]:p-0 data-[surface=plain]:shadow-none data-[size=xs]:sm:max-w-sm data-[size=sm]:sm:max-w-md data-[size=md]:sm:max-w-lg data-[size=lg]:sm:max-w-2xl data-[size=xl]:sm:max-w-4xl data-[size=full]:h-[min(92vh,56rem)] data-[size=full]:max-w-[min(96vw,84rem)] data-[size=full]:grid-rows-[auto_minmax(0,1fr)] data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
           className
         )}
         {...props}

package/packages/cli/vendor/src/components/ui/hover-card.tsx

@@ -1,51 +1,77 @@
 import * as React from "react"
+import { PreviewCard as PreviewCardPrimitive } from "@base-ui/react/preview-card"
 
 import { cn } from "@/lib/utils"
 
-export type HoverCardProps = Omit<React.ComponentProps<"div">, "content"> & {
+export type HoverCardProps = Omit<PreviewCardPrimitive.Root.Props, "children"> &
+  Omit<React.ComponentProps<"span">, "content" | "children"> & {
   trigger: React.ReactNode
   content: React.ReactNode
-  side?: "top" | "right" | "bottom" | "left"
+  side?: PreviewCardPrimitive.Positioner.Props["side"]
+  align?: PreviewCardPrimitive.Positioner.Props["align"]
+  sideOffset?: PreviewCardPrimitive.Positioner.Props["sideOffset"]
+  alignOffset?: PreviewCardPrimitive.Positioner.Props["alignOffset"]
+  collisionPadding?: PreviewCardPrimitive.Positioner.Props["collisionPadding"]
+  delay?: PreviewCardPrimitive.Trigger.Props["delay"]
+  closeDelay?: PreviewCardPrimitive.Trigger.Props["closeDelay"]
+  disabled?: boolean
   contentClassName?: string
 }
 
-const sideClassName = {
-  top: "bottom-full left-1/2 mb-2.5 -translate-x-1/2",
-  right: "left-full top-1/2 ml-2.5 -translate-y-1/2",
-  bottom: "left-1/2 top-full mt-2.5 -translate-x-1/2",
-  left: "right-full top-1/2 mr-2.5 -translate-y-1/2",
-} as const
-
 function HoverCard({
   trigger,
   content,
   side = "bottom",
+  align = "center",
+  sideOffset = 10,
+  alignOffset = 0,
+  collisionPadding = 12,
+  delay = 450,
+  closeDelay = 180,
+  disabled = false,
   contentClassName,
   className,
-  children,
   ...props
 }: HoverCardProps) {
-  return (
-    <div
-      data-slot="hover-card"
-      className={cn("group/hover-card relative inline-flex", className)}
-      {...props}
-    >
-      <span data-slot="hover-card-trigger" className="inline-flex">
+  if (disabled) {
+    return (
+      <span data-slot="hover-card" className={cn("inline-flex", className)} {...props}>
         {trigger}
       </span>
-      <div
-        data-slot="hover-card-content"
-        className={cn(
-          "pointer-events-none absolute z-50 min-w-60 rounded-[var(--radius-2xl)] border border-border/80 bg-popover/98 p-4 text-sm text-popover-foreground opacity-0 shadow-[0_18px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/8 backdrop-blur transition duration-150 group-hover/hover-card:pointer-events-auto group-hover/hover-card:opacity-100 group-focus-within/hover-card:pointer-events-auto group-focus-within/hover-card:opacity-100",
-          sideClassName[side],
-          contentClassName
-        )}
+    )
+  }
+
+  return (
+    <PreviewCardPrimitive.Root>
+      <PreviewCardPrimitive.Trigger
+        data-slot="hover-card-trigger"
+        delay={delay}
+        closeDelay={closeDelay}
+        render={<span data-slot="hover-card" className={cn("inline-flex", className)} {...props} />}
       >
-        {content}
-      </div>
-      {children}
-    </div>
+        {trigger}
+      </PreviewCardPrimitive.Trigger>
+      <PreviewCardPrimitive.Portal>
+        <PreviewCardPrimitive.Positioner
+          className="isolate z-50"
+          side={side}
+          align={align}
+          sideOffset={sideOffset}
+          alignOffset={alignOffset}
+          collisionPadding={collisionPadding}
+        >
+          <PreviewCardPrimitive.Popup
+            data-slot="hover-card-content"
+            className={cn(
+              "z-50 min-w-60 max-w-[min(24rem,calc(100vw-1rem))] origin-(--transform-origin) rounded-[var(--aui-card-radius,var(--radius-xl))] border border-border/80 bg-popover/98 p-4 text-sm text-popover-foreground shadow-[0_18px_42px_color-mix(in_oklch,var(--foreground),transparent_86%)] ring-1 ring-foreground/8 outline-hidden backdrop-blur duration-150 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+              contentClassName
+            )}
+          >
+            {content}
+          </PreviewCardPrimitive.Popup>
+        </PreviewCardPrimitive.Positioner>
+      </PreviewCardPrimitive.Portal>
+    </PreviewCardPrimitive.Root>
   )
 }
 

package/packages/cli/vendor/src/components/ui/popover/index.tsx

@@ -10,7 +10,7 @@ export type PopoverTriggerProps = PopoverPrimitive.Trigger.Props
 export type PopoverContentProps = PopoverPrimitive.Popup.Props &
   Pick<
     PopoverPrimitive.Positioner.Props,
-    "align" | "alignOffset" | "side" | "sideOffset"
+    "align" | "alignOffset" | "collisionBoundary" | "collisionPadding" | "side" | "sideOffset"
   >
 export type PopoverHeaderProps = React.ComponentProps<"div">
 export type PopoverTitleProps = PopoverPrimitive.Title.Props
@@ -28,6 +28,7 @@ function PopoverContent({
   className,
   align = "center",
   alignOffset = 0,
+  collisionPadding = 12,
   side = "bottom",
   sideOffset = 4,
   ...props
@@ -35,16 +36,17 @@ function PopoverContent({
   return (
     <PopoverPrimitive.Portal>
       <PopoverPrimitive.Positioner
-        align={align}
-        alignOffset={alignOffset}
-        side={side}
-        sideOffset={sideOffset}
-        className="isolate z-50"
-      >
+        align={align}
+        alignOffset={alignOffset}
+        collisionPadding={collisionPadding}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
         <PopoverPrimitive.Popup
           data-slot="popover-content"
           className={cn(
-            "z-50 flex w-80 origin-(--transform-origin) flex-col gap-3 rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-4 text-sm text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            "z-50 flex max-h-[min(var(--available-height),calc(100dvh-1rem))] w-[min(var(--anchor-width),20rem)] min-w-60 max-w-[calc(100vw-1rem)] origin-(--transform-origin) flex-col gap-3 overflow-y-auto rounded-[var(--aui-card-radius,var(--radius-xl))] border border-[color:var(--aui-card-border,var(--border))] bg-[color:var(--aui-overlay-surface,var(--popover))] p-4 text-sm text-popover-foreground shadow-[var(--aui-popover-shadow,0_18px_42px_rgba(15,23,42,0.16))] outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
             className
           )}
           {...props}

package/packages/cli/vendor/src/components/ui/radio-group/index.tsx

@@ -17,7 +17,11 @@ export type RadioGroupProps = Omit<React.ComponentProps<"div">, "onChange"> & {
   options: RadioGroupOption[]
   orientation?: "vertical" | "horizontal"
   size?: "sm" | "default" | "lg"
+  invalid?: boolean
+  disabled?: boolean
   itemClassName?: string
+  itemLabelClassName?: string
+  itemDescriptionClassName?: string
 }
 
 const sizeClassName = {
@@ -34,8 +38,12 @@ function RadioGroup({
   options,
   orientation = "vertical",
   size = "default",
+  invalid = false,
+  disabled = false,
   className,
   itemClassName,
+  itemLabelClassName,
+  itemDescriptionClassName,
   ...props
 }: RadioGroupProps) {
   const generatedName = React.useId()
@@ -43,39 +51,80 @@ function RadioGroup({
   const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
   const isControlled = value !== undefined
   const currentValue = isControlled ? value : internalValue
+  const itemRefs = React.useRef<Array<HTMLInputElement | null>>([])
+  const enabledOptions = options.filter((option) => !option.disabled && !disabled)
 
   const setValue = (nextValue: string) => {
     if (!isControlled) setInternalValue(nextValue)
     onValueChange?.(nextValue)
   }
 
+  const focusOption = (nextIndex: number) => {
+    const option = enabledOptions[nextIndex]
+    if (!option) return
+    const optionIndex = options.findIndex((item) => item.value === option.value)
+    itemRefs.current[optionIndex]?.focus()
+    setValue(option.value)
+  }
+
+  const handleKeyDown: React.KeyboardEventHandler<HTMLDivElement> = (event) => {
+    if (!["ArrowDown", "ArrowRight", "ArrowUp", "ArrowLeft", "Home", "End"].includes(event.key)) return
+    if (enabledOptions.length === 0) return
+
+    event.preventDefault()
+    const currentEnabledIndex = Math.max(
+      0,
+      enabledOptions.findIndex((option) => option.value === currentValue)
+    )
+    if (event.key === "Home") {
+      focusOption(0)
+      return
+    }
+    if (event.key === "End") {
+      focusOption(enabledOptions.length - 1)
+      return
+    }
+    const direction = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1 : -1
+    focusOption((currentEnabledIndex + direction + enabledOptions.length) % enabledOptions.length)
+  }
+
   return (
     <div
       role="radiogroup"
+      aria-invalid={invalid || undefined}
+      aria-disabled={disabled || undefined}
       data-slot="radio-group"
       data-orientation={orientation}
+      data-invalid={invalid || undefined}
       className={cn("grid gap-2", orientation === "horizontal" && "sm:flex sm:flex-wrap sm:items-center", className)}
+      onKeyDown={handleKeyDown}
       {...props}
     >
-      {options.map((option) => {
+      {options.map((option, index) => {
         const checked = option.value === currentValue
+        const optionDisabled = disabled || option.disabled
         return (
           <label
             key={option.value}
             data-slot="radio-group-item"
             data-checked={checked || undefined}
-            data-disabled={option.disabled || undefined}
+            data-disabled={optionDisabled || undefined}
+            data-invalid={invalid || undefined}
             className={cn(
-              "group flex cursor-pointer items-start gap-3 rounded-[min(var(--radius-xl),16px)] border border-border/80 bg-background/88 px-3 py-2.5 text-sm transition hover:border-ring/35 hover:bg-accent/60 data-[checked=true]:border-primary/35 data-[checked=true]:bg-primary/8 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55",
+              "group flex cursor-pointer items-start gap-3 rounded-[min(var(--radius-xl),16px)] border border-border/80 bg-background/88 px-3 py-2.5 text-sm transition hover:border-ring/35 hover:bg-accent/60 focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/30 data-[checked=true]:border-primary/35 data-[checked=true]:bg-primary/8 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-55 data-[invalid=true]:border-destructive/70 data-[invalid=true]:ring-3 data-[invalid=true]:ring-destructive/15",
               itemClassName
             )}
           >
             <input
+              ref={(node) => {
+                itemRefs.current[index] = node
+              }}
               type="radio"
               name={resolvedName}
               value={option.value}
               checked={checked}
-              disabled={option.disabled}
+              disabled={optionDisabled}
+              aria-invalid={invalid || undefined}
               className="sr-only"
               onChange={() => setValue(option.value)}
             />
@@ -89,8 +138,8 @@ function RadioGroup({
               <span className="size-1.5 rounded-full bg-primary-foreground opacity-0 transition group-data-[checked=true]:opacity-100" />
             </span>
             <span className="min-w-0">
-              <span className="block font-medium text-foreground">{option.label}</span>
-              {option.description ? <span className="mt-1 block text-sm leading-6 text-muted-foreground">{option.description}</span> : null}
+              <span className={cn("block font-medium text-foreground", itemLabelClassName)}>{option.label}</span>
+              {option.description ? <span className={cn("mt-1 block text-sm leading-6 text-muted-foreground", itemDescriptionClassName)}>{option.description}</span> : null}
             </span>
           </label>
         )