tembro 2.0.5 → 2.1.0

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

@@ -65,14 +65,28 @@ type CardSurfaceSlots = {
   media?: React.ReactNode
   content?: React.ReactNode
   footer?: React.ReactNode
+  mediaClassName?: string
+  bodyClassName?: string
   headerClassName?: string
+  eyebrowClassName?: string
   titleClassName?: string
   descriptionClassName?: string
   contentClassName?: string
   footerClassName?: string
 }
 
-export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> & VariantProps<typeof cardVariants> & CardSurfaceSlots
+export type CardOrientation = "vertical" | "horizontal"
+export type CardMediaAspect = "auto" | "square" | "video" | "poster" | "wide"
+export type CardPadding = "none" | "sm" | "default" | "lg"
+
+export type CardProps = Omit<React.ComponentProps<"div">, keyof CardSurfaceSlots> &
+  VariantProps<typeof cardVariants> &
+  CardSurfaceSlots & {
+    orientation?: CardOrientation
+    mediaPosition?: "start" | "end"
+    mediaAspect?: CardMediaAspect
+    padding?: CardPadding
+  }
 
 function hasSurfaceContent(props: CardSurfaceSlots) {
   return (
@@ -96,6 +110,10 @@ function Card({
   interactive,
   selected,
   disabled,
+  orientation = "vertical",
+  mediaPosition = "start",
+  mediaAspect = "auto",
+  padding = "default",
   tabIndex,
   eyebrow,
   title,
@@ -105,7 +123,10 @@ function Card({
   media,
   content,
   footer,
+  mediaClassName,
+  bodyClassName,
   headerClassName,
+  eyebrowClassName,
   titleClassName,
   descriptionClassName,
   contentClassName,
@@ -126,6 +147,36 @@ function Card({
   const resolvedContent = content ?? children
   const hasHeader = eyebrow != null || title != null || description != null || badge != null || action != null
   const hasFooter = footer != null
+  const mediaNode = media ? (
+    <div
+      data-slot="card-media"
+      data-media-position={mediaPosition}
+      data-media-aspect={mediaAspect}
+      className={cn(
+        "overflow-hidden",
+        orientation === "horizontal" ? "shrink-0 self-stretch" : "",
+        mediaAspect === "square" && (orientation === "horizontal" ? "w-40" : "aspect-square"),
+        mediaAspect === "video" && (orientation === "horizontal" ? "w-56" : "aspect-video"),
+        mediaAspect === "poster" && (orientation === "horizontal" ? "w-36" : "aspect-[3/4]"),
+        mediaAspect === "wide" && (orientation === "horizontal" ? "w-72" : "aspect-[16/7]"),
+        mediaClassName
+      )}
+    >
+      {media}
+    </div>
+  ) : null
+  const surfacePaddingClassName = {
+    none: "",
+    sm: "px-4",
+    default: "px-(--card-spacing)",
+    lg: "px-6",
+  } satisfies Record<CardPadding, string>
+  const bodyPaddingClassName = {
+    none: "",
+    sm: "pb-4",
+    default: "",
+    lg: "pb-6",
+  } satisfies Record<CardPadding, string>
 
   return (
     <div
@@ -139,37 +190,56 @@ function Card({
       data-selected={selected || undefined}
       data-disabled={disabled || undefined}
       data-has-footer={hasFooter || undefined}
+      data-orientation={orientation}
+      data-padding={padding}
       aria-disabled={disabled || undefined}
       tabIndex={interactive && !disabled ? tabIndex ?? 0 : tabIndex}
-      className={cn(cardVariants({ variant, size, density, tone, interactive, selected, disabled }), className)}
+      className={cn(
+        cardVariants({ variant, size, density, tone, interactive, selected, disabled }),
+        orientation === "horizontal" && "flex-row py-0",
+        interactive && "hover:border-[color:var(--aui-control-hover-border,var(--ring))] hover:shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        selected && "border-[color:var(--aui-control-border-strong,var(--ring))] shadow-[var(--aui-card-shadow-hover,var(--aui-card-shadow,0_12px_32px_rgba(15,23,42,0.08)))]",
+        className
+      )}
       {...props}
     >
       {surfaceMode ? (
         <>
-          {media}
-          {hasHeader ? (
-            <CardHeader className={headerClassName}>
-              <div className="min-w-0 space-y-1">
-                {eyebrow != null ? (
-                  <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80">
-                    {eyebrow}
-                  </div>
-                ) : null}
-                {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
-                {description != null ? (
-                  <CardDescription className={descriptionClassName}>{description}</CardDescription>
+          {mediaPosition === "start" ? mediaNode : null}
+          <div
+            data-slot="card-body"
+            className={cn(
+              "flex min-w-0 flex-1 flex-col",
+              orientation === "horizontal" ? "py-(--card-spacing)" : "",
+              bodyPaddingClassName[padding],
+              bodyClassName
+            )}
+          >
+            {hasHeader ? (
+              <CardHeader className={cn(surfacePaddingClassName[padding], headerClassName)}>
+                <div className="min-w-0 space-y-1">
+                  {eyebrow != null ? (
+                    <div className={cn("text-[11px] font-semibold uppercase tracking-[0.18em] text-muted-foreground/80", eyebrowClassName)}>
+                      {eyebrow}
+                    </div>
+                  ) : null}
+                  {title != null ? <CardTitle className={titleClassName}>{title}</CardTitle> : null}
+                  {description != null ? (
+                    <CardDescription className={descriptionClassName}>{description}</CardDescription>
+                  ) : null}
+                </div>
+                {badge != null || action != null ? (
+                  <CardAction className="flex items-center gap-2">
+                    {badge}
+                    {action}
+                  </CardAction>
                 ) : null}
-              </div>
-              {badge != null || action != null ? (
-                <CardAction className="flex items-center gap-2">
-                  {badge}
-                  {action}
-                </CardAction>
-              ) : null}
-            </CardHeader>
-          ) : null}
-          {resolvedContent != null ? <CardContent className={contentClassName}>{resolvedContent}</CardContent> : null}
-          {hasFooter ? <CardFooter className={footerClassName}>{footer}</CardFooter> : null}
+              </CardHeader>
+            ) : null}
+            {resolvedContent != null ? <CardContent className={cn(surfacePaddingClassName[padding], contentClassName)}>{resolvedContent}</CardContent> : null}
+            {hasFooter ? <CardFooter className={cn(surfacePaddingClassName[padding], footerClassName)}>{footer}</CardFooter> : null}
+          </div>
+          {mediaPosition === "end" ? mediaNode : null}
         </>
       ) : (
         children

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/input/index.tsx

@@ -39,6 +39,7 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   kind?: "text"
   value?: string | number | readonly string[] | null
   onValueChange?: (value: string) => void
+  onDebouncedValueChange?: (value: string) => void
   leading?: React.ReactNode
   trailing?: React.ReactNode
   trailingAction?: React.ReactNode
@@ -57,6 +58,13 @@ export type InputTextProps = Omit<InputPrimitiveProps, "value"> & {
   helperClassName?: string
   leadingPointerEvents?: boolean
   trailingPointerEvents?: boolean
+  searchIcon?: React.ReactNode
+  loading?: boolean
+  loadingLabel?: string
+  resultCount?: number
+  shortcut?: React.ReactNode
+  debounceMs?: number
+  showMetaOnClear?: boolean
 }
 
 export type InputClearableProps = Omit<ClearableInputProps, "kind"> & {
@@ -121,6 +129,20 @@ function getInputTextLength(value: InputTextProps["value"] | InputTextProps["def
   return 0
 }
 
+function shouldRenderSearchInput(props: InputTextProps) {
+  return (
+    props.type === "search" ||
+    props.searchIcon !== undefined ||
+    props.loading !== undefined ||
+    props.loadingLabel !== undefined ||
+    props.resultCount !== undefined ||
+    props.shortcut !== undefined ||
+    props.debounceMs !== undefined ||
+    props.showMetaOnClear !== undefined ||
+    props.onDebouncedValueChange !== undefined
+  )
+}
+
 const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((props, ref) => {
   const kind = props.kind ?? "text"
 
@@ -210,6 +232,82 @@ const Input = React.forwardRef<HTMLInputElement | HTMLDivElement, InputProps>((p
   }
 
   const inputProps = props as Omit<InputTextProps, "kind">
+
+  if (shouldRenderSearchInput(inputProps)) {
+    const {
+      leading,
+      searchIcon,
+      helperText,
+      errorText,
+      showCharacterCount,
+      countFormatter,
+      helperClassName,
+      inputClassName,
+      ...searchInputProps
+    } = inputProps
+    const searchValue: SearchInputProps["value"] = Array.isArray(inputProps.value)
+      ? inputProps.value.join(" ")
+      : inputProps.value == null || typeof inputProps.value === "string" || typeof inputProps.value === "number"
+        ? inputProps.value
+        : String(inputProps.value)
+    const searchDefaultValue: SearchInputProps["defaultValue"] = Array.isArray(inputProps.defaultValue)
+      ? inputProps.defaultValue.join(" ")
+      : inputProps.defaultValue == null ||
+          typeof inputProps.defaultValue === "string" ||
+          typeof inputProps.defaultValue === "number"
+        ? inputProps.defaultValue
+        : String(inputProps.defaultValue)
+
+    const searchInput = (
+      <SearchInput
+        ref={ref as React.ForwardedRef<HTMLInputElement>}
+        searchIcon={searchIcon ?? leading}
+        inputClassName={inputClassName}
+        {...searchInputProps}
+        value={searchValue}
+        defaultValue={searchDefaultValue}
+      />
+    )
+
+    if (!helperText && !errorText && !showCharacterCount) {
+      return searchInput
+    }
+
+    const currentLength = getInputTextLength(inputProps.value ?? inputProps.defaultValue)
+
+    return (
+      <div data-slot="input-field" className="grid gap-1.5">
+        {searchInput}
+        <div data-slot="input-meta" className="flex items-start justify-between gap-3 px-1">
+          <div
+            data-slot="input-helper"
+            className={cn(
+              "min-w-0 text-xs leading-5",
+              errorText ? "text-destructive" : "text-muted-foreground",
+              helperClassName
+            )}
+          >
+            {errorText ?? helperText}
+          </div>
+          {showCharacterCount ? (
+            <div
+              data-slot="input-count"
+              className={cn(
+                "shrink-0 text-[11px] font-medium tabular-nums",
+                errorText ? "text-destructive" : "text-muted-foreground"
+              )}
+            >
+              {countFormatter?.(currentLength, inputProps.maxLength) ??
+                (typeof inputProps.maxLength === "number"
+                  ? `${currentLength}/${inputProps.maxLength}`
+                  : currentLength)}
+            </div>
+          ) : null}
+        </div>
+      </div>
+    )
+  }
+
   const {
     value,
     defaultValue,

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>
         )