banhaten 0.3.0 → 0.5.0

package/registry/components/radio-card.tsx

@@ -1,677 +1,676 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
-import { Building2Icon, CreditCardIcon, UserIcon } from "lucide-react"
-
-import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
-import { cn } from "@/lib/utils"
-
-type RadioCardType =
-  | "with-icon"
-  | "icon-radio-right"
-  | "payment"
-  | "with-avatar"
-  | "company-icon"
-  | "icon-radio-left"
-  | "radio-label"
-
-type RadioCardState = "default" | "active" | "disabled"
-type RadioCardDirection = Direction
-
-const radioCardVariants = cva(
-  [
-    "group/radio-card relative inline-block w-[var(--bh-radio-card-width)] max-w-full shrink-0",
-    "rounded-[var(--bh-radius-xl-10)] p-[var(--bh-space-3xl-16)]",
-    "bg-[var(--bh-radio-card-bg)] text-start shadow-[var(--shadow-radio-card-current)] outline-none",
-    "transition-[background-color,box-shadow]",
-    "[--bh-radio-card-bg:var(--bh-bg-raised)]",
-    "[--bh-radio-card-border:var(--bh-border-default)]",
-    "[--shadow-radio-card-current:var(--shadow-radio-card)]",
-    "has-[:focus-visible]:[--bh-radio-card-border:var(--bh-border-brand-strong)]",
-    "has-[:disabled]:pointer-events-none",
-    "has-[:disabled]:[--bh-radio-card-border:var(--bh-border-disabled)]",
-    "has-[:disabled]:[--shadow-radio-card-current:var(--shadow-radio-card-disabled)]",
-    "has-[:disabled]:[--bh-radio-card-bg:var(--bh-bg-raised)]",
-  ],
-  {
-    variants: {
-      state: {
-        default:
-          "hover:[--bh-radio-card-bg:var(--bh-bg-raised-hover)]",
-        active:
-          "[--bh-radio-card-border:var(--bh-border-brand-strong)] [--bh-radio-card-border-width:var(--bh-radio-card-border-width-active)]",
-        disabled:
-          "pointer-events-none [--bh-radio-card-bg:var(--bh-bg-raised)] [--bh-radio-card-border:var(--bh-border-disabled)] [--shadow-radio-card-current:var(--shadow-radio-card-disabled)]",
-      },
-    },
-    defaultVariants: {
-      state: "default",
-    },
-  }
-)
-
-type RadioCardProps = Omit<
-  React.ComponentProps<"label">,
-  "children" | "label"
-> &
-  VariantProps<typeof radioCardVariants> & {
-    type?: RadioCardType
-    direction?: RadioCardDirection
-    checked?: boolean
-    disabled?: boolean
-    label?: React.ReactNode
-    description?: React.ReactNode
-    supportLabel?: React.ReactNode
-    supportDescription?: React.ReactNode
-    showDescription?: boolean
-    showSupportItems?: boolean
-    showSupportDescription?: boolean
-    icon?: React.ReactNode
-    media?: React.ReactNode
-    inputProps?: Omit<React.ComponentProps<"input">, "type">
-  }
-
-const RadioCard = React.forwardRef<HTMLLabelElement, RadioCardProps>(
-  function RadioCard(
-    {
-      className,
-      type = "with-icon",
-      state = "default",
-      direction,
-      dir,
-      checked,
-      disabled,
-      label,
-      description,
-      supportLabel,
-      supportDescription,
-      showDescription = true,
-      showSupportItems = true,
-      showSupportDescription = true,
-      icon,
-      media,
-      inputProps,
-      ...props
-    },
-    forwardedRef
-  ) {
-    const directionBoundaryRef = React.useRef<HTMLLabelElement | null>(null)
-    const explicitDirection =
-      direction ?? (dir === "ltr" || dir === "rtl" ? dir : undefined)
-    const resolvedDirection = useResolvedDirection(
-      explicitDirection,
-      directionBoundaryRef
-    )
-    const setDirectionBoundaryRef = React.useCallback(
-      (node: HTMLLabelElement | null) => {
-        directionBoundaryRef.current = node
-
-        if (typeof forwardedRef === "function") {
-          forwardedRef(node)
-        } else if (forwardedRef) {
-          forwardedRef.current = node
-        }
-      },
-      [forwardedRef]
-    )
-    const hasControlledChecked =
-      checked !== undefined || inputProps?.checked !== undefined
-    const controlledChecked = checked ?? inputProps?.checked
-    const inputChecked =
-      controlledChecked ?? Boolean(inputProps?.defaultChecked)
-    const inputReadOnly =
-      inputProps?.readOnly ??
-      (hasControlledChecked && inputProps?.onChange === undefined
-        ? true
-        : undefined)
-    const isDisabled = disabled ?? inputProps?.disabled ?? state === "disabled"
-    const visualState: RadioCardState = isDisabled
-      ? "disabled"
-      : inputChecked || state === "active"
-        ? "active"
-        : state ?? "default"
-    const isRtl = resolvedDirection === "rtl"
-    const textLabel = label
-    const textDescription = description
-
-    return (
-      <label
-        data-slot="radio-card"
-        data-state={visualState}
-        data-type={type}
-        {...props}
-        ref={setDirectionBoundaryRef}
-        data-direction={resolvedDirection}
-        dir={resolvedDirection}
-        className={cn(radioCardVariants({ state: visualState }), className)}
-      >
-        <input
-          aria-label={typeof textLabel === "string" ? textLabel : undefined}
-          {...inputProps}
-          checked={hasControlledChecked ? controlledChecked : undefined}
-          className={cn("sr-only", inputProps?.className)}
-          defaultChecked={
-            hasControlledChecked ? undefined : inputProps?.defaultChecked
-          }
-          disabled={isDisabled}
-          readOnly={inputReadOnly}
-          type="radio"
-        />
-        <span
-          data-slot="radio-card-layout"
-          className={cn(
-            "flex min-w-0 items-start [direction:ltr]",
-            type === "radio-label" && "items-center",
-            getCardGapClass(type, isRtl)
-          )}
-        >
-          {renderRadioCardContent({
-            type,
-            direction: resolvedDirection,
-            state: visualState,
-            label: textLabel,
-            description: textDescription,
-            supportLabel,
-            supportDescription,
-            showDescription,
-            showSupportItems,
-            showSupportDescription,
-            icon,
-            media,
-          })}
-        </span>
-      </label>
-    )
-  }
-)
-
-function renderRadioCardContent({
-  type,
-  direction,
-  state,
-  label,
-  description,
-  supportLabel,
-  supportDescription,
-  showDescription,
-  showSupportItems,
-  showSupportDescription,
-  icon,
-  media,
-}: {
-  type: RadioCardType
-  direction: RadioCardDirection
-  state: RadioCardState
-  label?: React.ReactNode
-  description?: React.ReactNode
-  supportLabel?: React.ReactNode
-  supportDescription?: React.ReactNode
-  showDescription: boolean
-  showSupportItems: boolean
-  showSupportDescription: boolean
-  icon?: React.ReactNode
-  media?: React.ReactNode
-}) {
-  const isRtl = direction === "rtl"
-  const checked = state === "active"
-  const disabled = state === "disabled"
-  const radio = <RadioCardIndicator checked={checked} disabled={disabled} />
-
-  if (type === "radio-label") {
-    return isRtl ? (
-      <>
-        <RadioCardLabelText label={label} rtl={isRtl} disabled={disabled} />
-        {radio}
-      </>
-    ) : (
-      <>
-        {radio}
-        <RadioCardLabelText label={label} rtl={isRtl} disabled={disabled} />
-      </>
-    )
-  }
-
-  if (type === "icon-radio-right") {
-    const text = (
-      <RadioCardText
-        description={description}
-        disabled={disabled}
-        gap="xxs"
-        label={label}
-        rtl={isRtl}
-        showDescription={showDescription}
-      />
-    )
-
-    return isRtl ? (
-      <>
-        {radio}
-        {text}
-      </>
-    ) : (
-      <>
-        {text}
-        {radio}
-      </>
-    )
-  }
-
-  if (type === "icon-radio-left") {
-    const text = (
-      <RadioCardText
-        description={description}
-        disabled={disabled}
-        gap="xxs"
-        label={label}
-        rtl={isRtl}
-        showDescription={showDescription}
-      />
-    )
-
-    if (isRtl) {
-      return (
-        <>
-          {text}
-          {radio}
-        </>
-      )
-    }
-
-    return (
-      <>
-        {radio}
-        {text}
-        {showSupportItems &&
-        (hasRenderableContent(supportLabel) ||
-          hasRenderableContent(supportDescription)) ? (
-          <RadioCardSupportText
-            disabled={disabled}
-            label={supportLabel}
-            description={supportDescription}
-            showDescription={showSupportDescription}
-          />
-        ) : null}
-      </>
-    )
-  }
-
-  const content = (
-    <RadioCardMediaContent
-      type={type}
-      direction={direction}
-      state={state}
-      icon={icon}
-      media={media}
-      label={label}
-      description={description}
-      showDescription={showDescription}
-    />
-  )
-
-  return isRtl ? (
-    <>
-      {radio}
-      {content}
-    </>
-  ) : (
-    <>
-      {content}
-      {radio}
-    </>
-  )
-}
-
-function RadioCardMediaContent({
-  type,
-  direction,
-  state,
-  icon,
-  media,
-  label,
-  description,
-  showDescription,
-}: {
-  type: RadioCardType
-  direction: RadioCardDirection
-  state: RadioCardState
-  icon?: React.ReactNode
-  media?: React.ReactNode
-  label?: React.ReactNode
-  description?: React.ReactNode
-  showDescription: boolean
-}) {
-  const isRtl = direction === "rtl"
-  const disabled = state === "disabled"
-  const text = (
-    <RadioCardText
-      description={description}
-      disabled={disabled}
-      gap={getTextGap(type, state, isRtl)}
-      label={label}
-      rtl={isRtl}
-      showDescription={showDescription}
-    />
-  )
-  const visual = (
-    <RadioCardMedia type={type} disabled={disabled} icon={icon} media={media} />
-  )
-
-  return (
-    <span
-      data-slot="radio-card-content"
-      className={cn(
-        "flex min-w-0 flex-1 items-start gap-[var(--bh-space-lg-10)]",
-        isRtl && "justify-end",
-        (type === "with-avatar" || type === "company-icon") &&
-          "group-hover/radio-card:items-center",
-        (type === "with-avatar" || type === "company-icon") &&
-          state !== "default" &&
-          "items-center",
-        type === "with-avatar" &&
-          isRtl &&
-          state === "active" &&
-          "gap-[var(--bh-space-xl-12)]"
-      )}
-    >
-      {isRtl ? (
-        <>
-          {text}
-          {visual}
-        </>
-      ) : (
-        <>
-          {visual}
-          {text}
-        </>
-      )}
-    </span>
-  )
-}
-
-function RadioCardText({
-  label,
-  description,
-  showDescription,
-  rtl,
-  disabled,
-  gap,
-}: {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  showDescription: boolean
-  rtl: boolean
-  disabled: boolean
-  gap: "xxs" | "xs"
-}) {
-  if (!hasRenderableContent(label)) return null
-
-  return (
-    <span
-      data-slot="radio-card-text"
-      className={cn(
-        "flex min-w-0 flex-1 flex-col",
-        gap === "xxs"
-          ? "gap-[var(--bh-space-xxs-2)]"
-          : "gap-[var(--bh-space-xs-4)]",
-        rtl ? "items-end text-right" : "items-start text-left"
-      )}
-    >
-      {hasRenderableContent(label) ? (
-        <span
-          data-slot="radio-card-label"
-          dir={rtl ? "rtl" : "auto"}
-          className={cn(radioCardLabelClass, disabled && radioCardDisabledClass)}
-        >
-          {label}
-        </span>
-      ) : null}
-      {showDescription && hasRenderableContent(description) ? (
-        <span
-          data-slot="radio-card-description"
-          dir={rtl ? "rtl" : "auto"}
-          className={cn(
-            radioCardDescriptionClass,
-            disabled && radioCardDisabledClass
-          )}
-        >
-          {description}
-        </span>
-      ) : null}
-    </span>
-  )
-}
-
-function hasRenderableContent(content: React.ReactNode) {
-  return (
-    content !== undefined &&
-    content !== null &&
-    content !== false &&
-    content !== ""
-  )
-}
-
-function RadioCardSupportText({
-  label,
-  description,
-  showDescription,
-  disabled,
-}: {
-  label?: React.ReactNode
-  description?: React.ReactNode
-  showDescription: boolean
-  disabled: boolean
-}) {
-  return (
-    <span
-      data-slot="radio-card-support"
-      className="flex shrink-0 flex-col items-end gap-[var(--bh-space-xxs-2)] whitespace-nowrap text-right"
-    >
-      {hasRenderableContent(label) ? (
-        <span
-          data-slot="radio-card-support-label"
-          className={cn(radioCardLabelClass, disabled && radioCardDisabledClass)}
-        >
-          {label}
-        </span>
-      ) : null}
-      {showDescription && hasRenderableContent(description) ? (
-        <span
-          data-slot="radio-card-support-description"
-          className={cn(
-            radioCardDescriptionClass,
-            disabled && radioCardDisabledClass
-          )}
-        >
-          {description}
-        </span>
-      ) : null}
-    </span>
-  )
-}
-
-function RadioCardLabelText({
-  label,
-  rtl,
-  disabled,
-}: {
-  label?: React.ReactNode
-  rtl: boolean
-  disabled: boolean
-}) {
-  return (
-    <span
-      data-slot="radio-card-label"
-      dir={rtl ? "rtl" : "auto"}
-      className={cn(
-        radioCardLabelClass,
-        "min-w-0 flex-1",
-        rtl ? "text-right" : "text-left",
-        disabled && radioCardDisabledClass
-      )}
-    >
-      {label}
-    </span>
-  )
-}
-
-function RadioCardIndicator({
-  checked,
-  disabled,
-}: {
-  checked: boolean
-  disabled: boolean
-}) {
-  return (
-    <span
-      aria-hidden="true"
-      data-slot="radio-card-indicator"
-      className="flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center"
-    >
-      <span
-        className={cn(
-          "flex size-[var(--bh-space-3xl-16)] items-center justify-center rounded-[var(--bh-radius-full)] [--shadow-radio-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-radio-control-border,var(--bh-border-input)),var(--shadow-component-default)]",
-          checked
-            ? "bg-[var(--bh-interactive-radiobutton-default)] shadow-[var(--shadow-radio-control)] [--bh-radio-control-border:transparent]"
-            : disabled
-              ? "bg-[var(--bh-bg-raised)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
-              : "bg-[var(--bh-bg-raised)] shadow-[var(--shadow-radio-control)] [--bh-radio-control-border:var(--bh-border-input)]"
-        )}
-      >
-        {checked ? (
-          <span className="size-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-always-white)]" />
-        ) : null}
-      </span>
-    </span>
-  )
-}
-
-function RadioCardMedia({
-  type,
-  disabled,
-  icon,
-  media,
-}: {
-  type: RadioCardType
-  disabled: boolean
-  icon?: React.ReactNode
-  media?: React.ReactNode
-}) {
-  if (media) {
-    return (
-      <span
-        data-slot="radio-card-media"
-        className={cn(
-          "shrink-0",
-          (type === "with-avatar" || type === "company-icon") &&
-            disabled &&
-            "opacity-[var(--bh-opacity-disabled-media)]"
-        )}
-      >
-        {media}
-      </span>
-    )
-  }
-
-  if (type === "payment") return <RadioCardPaymentIcon />
-  if (type === "with-avatar") return <RadioCardAvatarPlaceholder disabled={disabled} />
-  if (type === "company-icon") return <RadioCardCompanyIcon disabled={disabled} />
-
-  return (
-    <span
-      data-slot="radio-card-icon"
-      className={cn(
-        "flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)]",
-        disabled && "text-[var(--bh-content-disabled)]"
-      )}
-    >
-      {icon ?? <RadioCardUserIcon />}
-    </span>
-  )
-}
-
-function RadioCardUserIcon() {
-  return (
-    <UserIcon
-      aria-hidden="true"
-      className="size-[var(--bh-space-4xl-20)]"
-      strokeWidth="var(--bh-icon-stroke-200)"
-    />
-  )
-}
-
-function RadioCardPaymentIcon() {
-  return (
-    <span
-      data-slot="radio-card-payment-icon"
-      className="flex h-[var(--bh-radio-card-payment-height)] w-[var(--bh-radio-card-payment-width)] shrink-0 items-center justify-center rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-always-white)] text-[var(--bh-radio-card-payment-logo-color)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]"
-    >
-      <CreditCardIcon
-        aria-hidden="true"
-        className="h-[var(--bh-radio-card-payment-logo-height)] w-[var(--bh-radio-card-payment-logo-width)]"
-        strokeWidth="var(--bh-icon-stroke-200)"
-      />
-    </span>
-  )
-}
-
-function RadioCardAvatarPlaceholder({ disabled }: { disabled: boolean }) {
-  return (
-    <span
-      data-slot="radio-card-avatar"
-      className={cn(
-        "flex size-[var(--bh-space-7xl-40)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]",
-        disabled && "opacity-[var(--bh-opacity-disabled-media)]"
-      )}
-    >
-      <span className="size-full bg-[linear-gradient(135deg,var(--bh-bg-accent-blue-soft),var(--bh-bg-accent-purple-soft))]" />
-    </span>
-  )
-}
-
-function RadioCardCompanyIcon({ disabled }: { disabled: boolean }) {
-  return (
-    <span
-      data-slot="radio-card-company-icon"
-      className={cn(
-        "flex size-[var(--bh-space-7xl-40)] shrink-0 items-center justify-center overflow-hidden",
-        disabled && "opacity-[var(--bh-opacity-disabled-media)]"
-      )}
-    >
-      <Building2Icon
-        aria-hidden="true"
-        className="size-[var(--bh-space-5xl-24)] text-[var(--bh-radio-card-company-mark-color)]"
-        strokeWidth="var(--bh-icon-stroke-180)"
-      />
-    </span>
-  )
-}
-
-function getCardGapClass(type: RadioCardType, rtl: boolean) {
-  if (rtl && (type === "company-icon" || type === "icon-radio-left")) {
-    return "gap-[var(--bh-space-xl-12)]"
-  }
-
-  return "gap-[var(--bh-space-lg-10)]"
-}
-
-function getTextGap(type: RadioCardType, state: RadioCardState, rtl: boolean) {
-  if (type === "with-icon" && state === "default" && !rtl) return "xxs"
-  if (type === "icon-radio-right" || type === "icon-radio-left") return "xxs"
-  return "xs"
-}
-
-const radioCardLabelClass =
-  "block min-w-0 break-words text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]"
-
-const radioCardDescriptionClass =
-  "block min-w-0 break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
-
-const radioCardDisabledClass = "text-[var(--bh-content-disabled)]"
-
-export {
-  RadioCard,
-  radioCardVariants,
-  type RadioCardDirection,
-  type RadioCardProps,
-  type RadioCardState,
-  type RadioCardType,
-}
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Building2Icon, CreditCardIcon, UserIcon } from "lucide-react"
+
+import { useResolvedDirection, type Direction } from "@/hooks/use-direction"
+import { cn } from "@/lib/utils"
+
+type RadioCardType =
+  | "with-icon"
+  | "icon-radio-right"
+  | "payment"
+  | "with-avatar"
+  | "company-icon"
+  | "icon-radio-left"
+  | "radio-label"
+
+type RadioCardState = "default" | "active" | "disabled"
+type RadioCardDirection = Direction
+
+const radioCardVariants = cva(
+  [
+    "group/radio-card relative inline-block w-[var(--bh-radio-card-width)] max-w-full shrink-0",
+    "rounded-[var(--bh-radius-xl-10)] p-[var(--bh-space-3xl-16)]",
+    "bg-[var(--bh-radio-card-bg)] text-start shadow-[var(--elevation-radio-card-current)] outline-none",
+    "transition-[background-color,box-shadow]",
+    "[--bh-radio-card-bg:var(--bh-bg-raised)]",
+    "[--bh-radio-card-border:var(--bh-border-default)]",
+    "[--elevation-radio-card-current:var(--elevation-radio-card)]",
+    "has-[:focus-visible]:[--bh-radio-card-border:var(--bh-border-brand-strong)]",
+    "has-[:disabled]:pointer-events-none",
+    "has-[:disabled]:[--bh-radio-card-border:var(--bh-border-disabled)]",
+    "has-[:disabled]:[--elevation-radio-card-current:var(--elevation-radio-card-disabled)]",
+    "has-[:disabled]:[--bh-radio-card-bg:var(--bh-bg-raised)]",
+  ],
+  {
+    variants: {
+      state: {
+        default:
+          "hover:[--bh-radio-card-bg:var(--bh-bg-raised-hover)]",
+        active:
+          "[--bh-radio-card-border:var(--bh-border-brand-strong)] [--bh-radio-card-border-width:var(--bh-radio-card-border-width-active)]",
+        disabled:
+          "pointer-events-none [--bh-radio-card-bg:var(--bh-bg-raised)] [--bh-radio-card-border:var(--bh-border-disabled)] [--elevation-radio-card-current:var(--elevation-radio-card-disabled)]",
+      },
+    },
+    defaultVariants: {
+      state: "default",
+    },
+  }
+)
+
+type RadioCardProps = Omit<
+  React.ComponentProps<"label">,
+  "children" | "label"
+> &
+  VariantProps<typeof radioCardVariants> & {
+    type?: RadioCardType
+    direction?: RadioCardDirection
+    checked?: boolean
+    disabled?: boolean
+    label?: React.ReactNode
+    description?: React.ReactNode
+    supportLabel?: React.ReactNode
+    supportDescription?: React.ReactNode
+    showDescription?: boolean
+    showSupportItems?: boolean
+    showSupportDescription?: boolean
+    icon?: React.ReactNode
+    media?: React.ReactNode
+    inputProps?: Omit<React.ComponentProps<"input">, "type">
+  }
+
+const RadioCard = React.forwardRef<HTMLLabelElement, RadioCardProps>(
+  function RadioCard(
+    {
+      className,
+      type = "with-icon",
+      state = "default",
+      direction,
+      dir,
+      checked,
+      disabled,
+      label,
+      description,
+      supportLabel,
+      supportDescription,
+      showDescription = true,
+      showSupportItems = true,
+      showSupportDescription = true,
+      icon,
+      media,
+      inputProps,
+      ...props
+    },
+    forwardedRef
+  ) {
+    const directionBoundaryRef = React.useRef<HTMLLabelElement | null>(null)
+    const explicitDirection =
+      direction ?? (dir === "ltr" || dir === "rtl" ? dir : undefined)
+    const resolvedDirection = useResolvedDirection(
+      explicitDirection,
+      directionBoundaryRef
+    )
+    const setDirectionBoundaryRef = React.useCallback(
+      (node: HTMLLabelElement | null) => {
+        directionBoundaryRef.current = node
+
+        if (typeof forwardedRef === "function") {
+          forwardedRef(node)
+        } else if (forwardedRef) {
+          forwardedRef.current = node
+        }
+      },
+      [forwardedRef]
+    )
+    const hasControlledChecked =
+      checked !== undefined || inputProps?.checked !== undefined
+    const controlledChecked = checked ?? inputProps?.checked
+    const inputChecked =
+      controlledChecked ?? Boolean(inputProps?.defaultChecked)
+    const inputReadOnly =
+      inputProps?.readOnly ??
+      (hasControlledChecked && inputProps?.onChange === undefined
+        ? true
+        : undefined)
+    const isDisabled = disabled ?? inputProps?.disabled ?? state === "disabled"
+    const visualState: RadioCardState = isDisabled
+      ? "disabled"
+      : inputChecked || state === "active"
+        ? "active"
+        : state ?? "default"
+    const isRtl = resolvedDirection === "rtl"
+    const textLabel = label
+    const textDescription = description
+
+    return (
+      <label
+        data-slot="radio-card"
+        data-state={visualState}
+        data-type={type}
+        {...props}
+        ref={setDirectionBoundaryRef}
+        data-direction={resolvedDirection}
+        dir={resolvedDirection}
+        className={cn(radioCardVariants({ state: visualState }), className)}
+      >
+        <input
+          aria-label={typeof textLabel === "string" ? textLabel : undefined}
+          {...inputProps}
+          checked={hasControlledChecked ? controlledChecked : undefined}
+          className={cn("sr-only", inputProps?.className)}
+          defaultChecked={
+            hasControlledChecked ? undefined : inputProps?.defaultChecked
+          }
+          disabled={isDisabled}
+          readOnly={inputReadOnly}
+          type="radio"
+        />
+        <span
+          data-slot="radio-card-layout"
+          className={cn(
+            "flex min-w-0 items-start [direction:ltr]",
+            type === "radio-label" && "items-center",
+            getCardGapClass(type, isRtl)
+          )}
+        >
+          {renderRadioCardContent({
+            type,
+            direction: resolvedDirection,
+            state: visualState,
+            label: textLabel,
+            description: textDescription,
+            supportLabel,
+            supportDescription,
+            showDescription,
+            showSupportItems,
+            showSupportDescription,
+            icon,
+            media,
+          })}
+        </span>
+      </label>
+    )
+  }
+)
+
+function renderRadioCardContent({
+  type,
+  direction,
+  state,
+  label,
+  description,
+  supportLabel,
+  supportDescription,
+  showDescription,
+  showSupportItems,
+  showSupportDescription,
+  icon,
+  media,
+}: {
+  type: RadioCardType
+  direction: RadioCardDirection
+  state: RadioCardState
+  label?: React.ReactNode
+  description?: React.ReactNode
+  supportLabel?: React.ReactNode
+  supportDescription?: React.ReactNode
+  showDescription: boolean
+  showSupportItems: boolean
+  showSupportDescription: boolean
+  icon?: React.ReactNode
+  media?: React.ReactNode
+}) {
+  const isRtl = direction === "rtl"
+  const checked = state === "active"
+  const disabled = state === "disabled"
+  const radio = <RadioCardIndicator checked={checked} disabled={disabled} />
+
+  if (type === "radio-label") {
+    return isRtl ? (
+      <>
+        <RadioCardLabelText label={label} rtl={isRtl} disabled={disabled} />
+        {radio}
+      </>
+    ) : (
+      <>
+        {radio}
+        <RadioCardLabelText label={label} rtl={isRtl} disabled={disabled} />
+      </>
+    )
+  }
+
+  if (type === "icon-radio-right") {
+    const text = (
+      <RadioCardText
+        description={description}
+        disabled={disabled}
+        gap="xxs"
+        label={label}
+        rtl={isRtl}
+        showDescription={showDescription}
+      />
+    )
+
+    return isRtl ? (
+      <>
+        {radio}
+        {text}
+      </>
+    ) : (
+      <>
+        {text}
+        {radio}
+      </>
+    )
+  }
+
+  if (type === "icon-radio-left") {
+    const text = (
+      <RadioCardText
+        description={description}
+        disabled={disabled}
+        gap="xxs"
+        label={label}
+        rtl={isRtl}
+        showDescription={showDescription}
+      />
+    )
+
+    if (isRtl) {
+      return (
+        <>
+          {text}
+          {radio}
+        </>
+      )
+    }
+
+    return (
+      <>
+        {radio}
+        {text}
+        {showSupportItems &&
+        (hasRenderableContent(supportLabel) ||
+          hasRenderableContent(supportDescription)) ? (
+          <RadioCardSupportText
+            disabled={disabled}
+            label={supportLabel}
+            description={supportDescription}
+            showDescription={showSupportDescription}
+          />
+        ) : null}
+      </>
+    )
+  }
+
+  const content = (
+    <RadioCardMediaContent
+      type={type}
+      direction={direction}
+      state={state}
+      icon={icon}
+      media={media}
+      label={label}
+      description={description}
+      showDescription={showDescription}
+    />
+  )
+
+  return isRtl ? (
+    <>
+      {radio}
+      {content}
+    </>
+  ) : (
+    <>
+      {content}
+      {radio}
+    </>
+  )
+}
+
+function RadioCardMediaContent({
+  type,
+  direction,
+  state,
+  icon,
+  media,
+  label,
+  description,
+  showDescription,
+}: {
+  type: RadioCardType
+  direction: RadioCardDirection
+  state: RadioCardState
+  icon?: React.ReactNode
+  media?: React.ReactNode
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showDescription: boolean
+}) {
+  const isRtl = direction === "rtl"
+  const disabled = state === "disabled"
+  const text = (
+    <RadioCardText
+      description={description}
+      disabled={disabled}
+      gap={getTextGap(type, state, isRtl)}
+      label={label}
+      rtl={isRtl}
+      showDescription={showDescription}
+    />
+  )
+  const visual = (
+    <RadioCardMedia type={type} disabled={disabled} icon={icon} media={media} />
+  )
+
+  return (
+    <span
+      data-slot="radio-card-content"
+      className={cn(
+        "flex min-w-0 flex-1 items-start gap-[var(--bh-space-lg-10)]",
+        isRtl && "justify-end",
+        (type === "with-avatar" || type === "company-icon") &&
+          "group-hover/radio-card:items-center",
+        (type === "with-avatar" || type === "company-icon") &&
+          state !== "default" &&
+          "items-center",
+        type === "with-avatar" &&
+          isRtl &&
+          state === "active" &&
+          "gap-[var(--bh-space-xl-12)]"
+      )}
+    >
+      {isRtl ? (
+        <>
+          {text}
+          {visual}
+        </>
+      ) : (
+        <>
+          {visual}
+          {text}
+        </>
+      )}
+    </span>
+  )
+}
+
+function RadioCardText({
+  label,
+  description,
+  showDescription,
+  rtl,
+  disabled,
+  gap,
+}: {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showDescription: boolean
+  rtl: boolean
+  disabled: boolean
+  gap: "xxs" | "xs"
+}) {
+  if (!hasRenderableContent(label)) return null
+
+  return (
+    <span
+      data-slot="radio-card-text"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col",
+        gap === "xxs"
+          ? "gap-[var(--bh-space-xxs-2)]"
+          : "gap-[var(--bh-space-xs-4)]",
+        rtl ? "items-end text-right" : "items-start text-left"
+      )}
+    >
+      {hasRenderableContent(label) ? (
+        <span
+          data-slot="radio-card-label"
+          dir={rtl ? "rtl" : "auto"}
+          className={cn(radioCardLabelClass, disabled && radioCardDisabledClass)}
+        >
+          {label}
+        </span>
+      ) : null}
+      {showDescription && hasRenderableContent(description) ? (
+        <span
+          data-slot="radio-card-description"
+          dir={rtl ? "rtl" : "auto"}
+          className={cn(
+            radioCardDescriptionClass,
+            disabled && radioCardDisabledClass
+          )}
+        >
+          {description}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function hasRenderableContent(content: React.ReactNode) {
+  return (
+    content !== undefined &&
+    content !== null &&
+    content !== false &&
+    content !== ""
+  )
+}
+
+function RadioCardSupportText({
+  label,
+  description,
+  showDescription,
+  disabled,
+}: {
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showDescription: boolean
+  disabled: boolean
+}) {
+  return (
+    <span
+      data-slot="radio-card-support"
+      className="flex shrink-0 flex-col items-end gap-[var(--bh-space-xxs-2)] whitespace-nowrap text-right"
+    >
+      {hasRenderableContent(label) ? (
+        <span
+          data-slot="radio-card-support-label"
+          className={cn(radioCardLabelClass, disabled && radioCardDisabledClass)}
+        >
+          {label}
+        </span>
+      ) : null}
+      {showDescription && hasRenderableContent(description) ? (
+        <span
+          data-slot="radio-card-support-description"
+          className={cn(
+            radioCardDescriptionClass,
+            disabled && radioCardDisabledClass
+          )}
+        >
+          {description}
+        </span>
+      ) : null}
+    </span>
+  )
+}
+
+function RadioCardLabelText({
+  label,
+  rtl,
+  disabled,
+}: {
+  label?: React.ReactNode
+  rtl: boolean
+  disabled: boolean
+}) {
+  return (
+    <span
+      data-slot="radio-card-label"
+      dir={rtl ? "rtl" : "auto"}
+      className={cn(
+        radioCardLabelClass,
+        "min-w-0 flex-1",
+        rtl ? "text-right" : "text-left",
+        disabled && radioCardDisabledClass
+      )}
+    >
+      {label}
+    </span>
+  )
+}
+
+function RadioCardIndicator({
+  checked,
+  disabled,
+}: {
+  checked: boolean
+  disabled: boolean
+}) {
+  return (
+    <span
+      aria-hidden="true"
+      data-slot="radio-card-indicator"
+      className="flex size-[var(--bh-space-4xl-20)] shrink-0 items-center justify-center"
+    >
+      <span
+        className={cn(
+          "flex size-[var(--bh-space-3xl-16)] items-center justify-center rounded-[var(--bh-radius-full)] [--elevation-radio-control:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-radio-control-border,var(--bh-border-input)),var(--elevation-component-default)]",
+          checked
+            ? "bg-[var(--bh-interactive-radiobutton-default)] shadow-[var(--elevation-radio-control)] [--bh-radio-control-border:transparent]"
+            : disabled
+              ? "bg-[var(--bh-bg-raised)] shadow-[inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-border-disabled)]"
+              : "bg-[var(--bh-bg-raised)] shadow-[var(--elevation-radio-control)] [--bh-radio-control-border:var(--bh-border-input)]"
+        )}
+      >
+        {checked ? (
+          <span className="size-[var(--bh-space-sm-6)] rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-always-white)]" />
+        ) : null}
+      </span>
+    </span>
+  )
+}
+
+function RadioCardMedia({
+  type,
+  disabled,
+  icon,
+  media,
+}: {
+  type: RadioCardType
+  disabled: boolean
+  icon?: React.ReactNode
+  media?: React.ReactNode
+}) {
+  if (media) {
+    return (
+      <span
+        data-slot="radio-card-media"
+        className={cn(
+          "shrink-0",
+          (type === "with-avatar" || type === "company-icon") &&
+            disabled &&
+            "opacity-[var(--bh-opacity-disabled-media)]"
+        )}
+      >
+        {media}
+      </span>
+    )
+  }
+
+  if (type === "payment") return <RadioCardPaymentIcon />
+  if (type === "with-avatar") return <RadioCardAvatarPlaceholder disabled={disabled} />
+  if (type === "company-icon") return <RadioCardCompanyIcon disabled={disabled} />
+
+  return (
+    <span
+      data-slot="radio-card-icon"
+      className={cn(
+        "flex size-[var(--bh-icon-slot-size-default)] shrink-0 items-center justify-center text-[var(--bh-content-subtle)] [&_svg]:size-[var(--bh-icon-size-default)]",
+        disabled && "text-[var(--bh-content-disabled)]"
+      )}
+    >
+      {icon ?? <RadioCardUserIcon />}
+    </span>
+  )
+}
+
+function RadioCardUserIcon() {
+  return (
+    <UserIcon
+      aria-hidden="true"
+      strokeWidth="var(--bh-icon-stroke-200)"
+    />
+  )
+}
+
+function RadioCardPaymentIcon() {
+  return (
+    <span
+      data-slot="radio-card-payment-icon"
+      className="flex h-[var(--bh-radio-card-payment-height)] w-[var(--bh-radio-card-payment-width)] shrink-0 items-center justify-center rounded-[var(--bh-radius-md-6)] bg-[var(--bh-bg-always-white)] text-[var(--bh-radio-card-payment-logo-color)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]"
+    >
+      <CreditCardIcon
+        aria-hidden="true"
+        className="h-[var(--bh-radio-card-payment-logo-height)] w-[var(--bh-radio-card-payment-logo-width)]"
+        strokeWidth="var(--bh-icon-stroke-200)"
+      />
+    </span>
+  )
+}
+
+function RadioCardAvatarPlaceholder({ disabled }: { disabled: boolean }) {
+  return (
+    <span
+      data-slot="radio-card-avatar"
+      className={cn(
+        "flex size-[var(--bh-space-7xl-40)] shrink-0 items-center justify-center overflow-hidden rounded-[var(--bh-radius-full)] bg-[var(--bh-bg-neutral-subtle)] shadow-[inset_0_0_0_var(--bh-border-width-default)_var(--bh-border-subtle)]",
+        disabled && "opacity-[var(--bh-opacity-disabled-media)]"
+      )}
+    >
+      <span className="size-full bg-[linear-gradient(135deg,var(--bh-bg-accent-blue-soft),var(--bh-bg-accent-purple-soft))]" />
+    </span>
+  )
+}
+
+function RadioCardCompanyIcon({ disabled }: { disabled: boolean }) {
+  return (
+    <span
+      data-slot="radio-card-company-icon"
+      className={cn(
+        "flex size-[var(--bh-space-7xl-40)] shrink-0 items-center justify-center overflow-hidden",
+        disabled && "opacity-[var(--bh-opacity-disabled-media)]"
+      )}
+    >
+      <Building2Icon
+        aria-hidden="true"
+        className="size-[var(--bh-space-5xl-24)] text-[var(--bh-radio-card-company-mark-color)]"
+        strokeWidth="var(--bh-icon-stroke-180)"
+      />
+    </span>
+  )
+}
+
+function getCardGapClass(type: RadioCardType, rtl: boolean) {
+  if (rtl && (type === "company-icon" || type === "icon-radio-left")) {
+    return "gap-[var(--bh-space-xl-12)]"
+  }
+
+  return "gap-[var(--bh-space-lg-10)]"
+}
+
+function getTextGap(type: RadioCardType, state: RadioCardState, rtl: boolean) {
+  if (type === "with-icon" && state === "default" && !rtl) return "xxs"
+  if (type === "icon-radio-right" || type === "icon-radio-left") return "xxs"
+  return "xs"
+}
+
+const radioCardLabelClass =
+  "block min-w-0 break-words text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-content-default)]"
+
+const radioCardDescriptionClass =
+  "block min-w-0 break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-text-body-sm-regular-font-weight)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--bh-content-subtle)]"
+
+const radioCardDisabledClass = "text-[var(--bh-content-disabled)]"
+
+export {
+  RadioCard,
+  radioCardVariants,
+  type RadioCardDirection,
+  type RadioCardProps,
+  type RadioCardState,
+  type RadioCardType,
+}