torch-glare 2.4.1 → 2.4.2

package/apps/lib/components/FormRenderer/types.ts

@@ -0,0 +1,79 @@
+import { ReactNode } from "react";
+import type {
+  DefaultValues,
+  FieldErrors,
+  FieldValues,
+  Resolver,
+  UseFormReturn,
+} from "react-hook-form";
+
+/**
+ * FormRenderer — a thin wrapper around the compound `FormBuilder`. You author the
+ * fields as **JSX children** (`FormBuilder.Section`, `FormBuilder.Text`, …); the
+ * renderer owns the surrounding concerns: page-vs-drawer display, the absolute
+ * title header, vertical field layout inside a drawer, and an `actions` slot (the
+ * form's header / drawer action bar) where you place the Save.
+ */
+
+export type FormRendererMode = "edit" | "view";
+export type FormRendererDisplay = "page" | "drawer";
+export type FieldDirection = "horizontal" | "vertical";
+
+export interface FormRendererProps<T extends FieldValues = FieldValues> {
+  /** The form body — `FormBuilder.Section` / field / `FormBuilder.Stepper` JSX. */
+  children: ReactNode;
+
+  // --- react-hook-form root (forwarded to FormBuilder) ---
+  onSubmit: (values: T) => void | Promise<void>;
+  onInvalid?: (errors: FieldErrors<T>) => void;
+  resolver?: Resolver<T>;
+  defaultValues?: DefaultValues<T>;
+  values?: T;
+  mode?: FormRendererMode;
+  loading?: boolean;
+  resetOnSuccess?: boolean;
+  /** Row layout; defaults to vertical inside a drawer. */
+  fieldDirection?: FieldDirection;
+  /**
+   * A hoisted `useForm` instance to bind the form to. Pass this when something outside the
+   * form (e.g. a `summary` `FormSummary`) must read the same live values; the caller owns
+   * `resolver`/`defaultValues` on that instance. Omit to let FormRenderer create its own.
+   */
+  form?: UseFormReturn<T>;
+
+  // --- display ---
+  display?: FormRendererDisplay;
+  /**
+   * A live panel rendered beside the form (page) or in the drawer tray (drawer) — typically a
+   * `FormSummary`. Give FormRenderer the same hoisted `form` so the panel reads live values.
+   */
+  summary?: ReactNode;
+  /**
+   * Lands on the form's outermost element (page display). Use it to let the form fill its
+   * parent — e.g. `"flex-1 min-h-0"` inside a flex column that has a height.
+   */
+  className?: string;
+  /**
+   * Absolute title header + action bar. Used by **both** displays — the page and the
+   * drawer render the same `HeaderBar` title pill, so a form looks identical in either.
+   */
+  header?: { title: string; label?: string; variant?: "new" | "edit" | "detail" };
+  /**
+   * The form's action bar — rendered in the header's right-hand action pill (page) or the drawer
+   * header (drawer). Put the Save here: `actions={<FormBuilder.Submit>Save</FormBuilder.Submit>}`.
+   * A bare `FormBuilder.Submit` auto-targets this form (see `FormBuilder`'s form-id context), so it
+   * submits even though the header sits outside the `<form>`.
+   */
+  actions?: ReactNode;
+  /** `id` on the underlying `<form>`. Optional — FormRenderer generates and wires one otherwise. */
+  id?: string;
+
+  /** Drawer control (when `display === "drawer"`). */
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Overrides `header.title` for the drawer. Plain text — it renders via `HeaderBar`. */
+  title?: string;
+  /** Overrides `header.label` for the drawer. */
+  badge?: string;
+  onOpenInNewTab?: () => void;
+}

package/apps/lib/components/FormSummary.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import { Children, Fragment, createContext, useContext, useId, useState, ReactNode } from "react";
+import { useWatch, type Control, type FieldValues, type UseFormReturn } from "react-hook-form";
+
+import { cn } from "../utils/cn";
+import { Group, Input, Trilling } from "./Input";
+import { ConclusionHeader } from "./ConclusionHeader";
+
+/**
+ * The form the rows read from. `undefined` means "fall back to the surrounding
+ * FormProvider" — which is what react-hook-form's `useWatch` does with no `control`.
+ */
+const ControlContext = createContext<Control | undefined>(undefined);
+
+/** Format a computed amount with thousands separators and fixed decimals (2 → "1,299.00"). */
+export function formatAmount(value: unknown, decimals = 2): string {
+  if (value == null || value === "") return "";
+  const n = typeof value === "number" ? value : Number(String(value).replace(/,/g, ""));
+  if (Number.isNaN(n)) return "";
+  return new Intl.NumberFormat("en-US", {
+    minimumFractionDigits: decimals,
+    maximumFractionDigits: decimals,
+  }).format(n);
+}
+
+/** Currency-code color. Maps to Glare's semantic state tokens. */
+export type SummaryTone = "neutral" | "success" | "info";
+
+const toneStyles: Record<SummaryTone, string> = {
+  neutral: "text-content-presentation-action-light-secondary",
+  success: "text-content-presentation-state-success",
+  info: "text-content-presentation-state-information",
+};
+
+export interface FormSummaryProps<T extends FieldValues = FieldValues> {
+  /** Panel title, e.g. "Invoice" (bold). */
+  title: ReactNode;
+  /** Muted text beside the title, e.g. "Summary". */
+  subtitle?: ReactNode;
+  /**
+   * The form to read values from. Required when the panel renders **outside** the
+   * `<FormBuilder>` (the usual case — the two sit side by side, so hoist `useForm`
+   * and hand the same instance to both). Omit it only when the panel is a child of
+   * the form, in which case it reads the surrounding context.
+   */
+  form?: UseFormReturn<T>;
+  /** Panel width (default `228px`, matching the design). */
+  width?: number | string;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * `FormSummary` — a read-only calculation panel displayed **beside a form**.
+ *
+ * Each `FormSummary.Row` declares a `compute(values)` that runs against the **live** form
+ * values (via react-hook-form `useWatch`), so every total recalculates as the user types.
+ *
+ * It renders *outside* the form, so hoist the form and share it:
+ *
+ * ```tsx
+ * const form = useForm({ resolver, defaultValues })
+ *
+ * <div className="flex items-start gap-4">
+ *   <FormBuilder form={form} onSubmit={save} className="flex-1">…fields…</FormBuilder>
+ *   <FormSummary form={form} title="Invoice" subtitle="Summary">…rows…</FormSummary>
+ * </div>
+ * ```
+ */
+function FormSummaryRoot<T extends FieldValues = FieldValues>({
+  title,
+  subtitle,
+  form,
+  width = 228,
+  className,
+  children,
+}: FormSummaryProps<T>) {
+  // The design stacks the header and every group in ONE 12px-gap column, with the dividers
+  // as their own items — so they're interleaved here rather than drawn with `divide-y`,
+  // which can only sit flush against a child's edge and couldn't be centred in its block.
+  const groups = Children.toArray(children).filter(Boolean);
+
+  return (
+    <ControlContext.Provider value={form?.control as Control | undefined}>
+      <aside
+        data-theme="dark"
+        style={{ width: typeof width === "number" ? `${width}px` : width }}
+        className={cn(
+          "flex h-full flex-col gap-3 overflow-hidden rounded-[16px] bg-black text-white",
+          className,
+        )}
+      >
+        {/* 48px tall: 12 + 24 + 12, aligned with the groups at px-2. Pinned — only the
+            groups below it scroll. */}
+        <header className="flex shrink-0 items-baseline gap-1 px-2 py-3">
+          <span className="typography-body-large-medium text-white">{title}</span>
+          {subtitle && (
+            <span className="typography-body-medium-regular text-[#A0A0A0]">{subtitle}</span>
+          )}
+        </header>
+
+        {/* Takes the remaining height and scrolls when the groups outrun it, as in the
+            design (its group column is taller than the panel). `min-h-0` is required —
+            without it this flex child refuses to shrink below its content and the panel
+            grows instead of scrolling. */}
+        <div className="flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto pb-3 scrollbar-hide">
+          {groups.map((group, i) => (
+            <Fragment key={i}>
+              {/* Full-bleed divider: a 16px block with the line at its centre, so the 12px
+                  column gap either side lands the line 20px clear of both groups. */}
+              {i > 0 && (
+                <div className="flex h-4 items-center" aria-hidden>
+                  <div className="h-px w-full bg-[#2C2D2E]" />
+                </div>
+              )}
+              {group}
+            </Fragment>
+          ))}
+        </div>
+      </aside>
+    </ControlContext.Provider>
+  );
+}
+
+export interface FormSummaryGroupProps {
+  title?: ReactNode;
+  /** Make the group collapsible via a `ConclusionHeader` title (default `true` when titled). */
+  collapsible?: boolean;
+  /** Initial open state when collapsible (default `true`). */
+  defaultOpen?: boolean;
+  className?: string;
+  children: ReactNode;
+}
+
+/**
+ * A titled group of summary rows. When it has a `title` it is **collapsible**: the title
+ * is a `ConclusionHeader` whose chevron opens/closes just this group's rows.
+ */
+function FormSummaryGroup({
+  title,
+  collapsible = true,
+  defaultOpen = true,
+  className,
+  children,
+}: FormSummaryGroupProps) {
+  const [open, setOpen] = useState(defaultOpen);
+  const bodyId = useId();
+  const isCollapsible = collapsible && title != null;
+  const shown = !isCollapsible || open;
+
+  return (
+    // No `gap` here: the body collapses to zero height, and a flex gap would survive it as
+    // dead space. The 12px below the title is `pt-3` on the body — inside what collapses.
+    // No vertical padding either: the panel's 12px column gap is the only spacing between
+    // groups, and the dividers carry their own.
+    <section className={cn("flex flex-col px-2", className)}>
+      {title != null &&
+        (isCollapsible ? (
+          <ConclusionHeader
+            label={title}
+            open={open}
+            onOpenChange={setOpen}
+            aria-controls={bodyId}
+          />
+        ) : (
+          <h3 className="typography-body-large-medium text-white">{title}</h3>
+        ))}
+
+      {/* Fold/unfold: `grid-rows-[0fr → 1fr]` animates to the rows' natural height without
+          measuring it, so the group stays a pure-CSS transition. The inner `overflow-hidden`
+          is what the 0fr track actually clips — it must stay a bare wrapper. */}
+      <div
+        id={bodyId}
+        // Collapsed rows keep their inputs in the DOM, so `inert` is what takes them out of
+        // the tab order and the a11y tree — `overflow-hidden` alone would still let focus in.
+        inert={!shown}
+        aria-hidden={!shown}
+        className={cn(
+          "grid transition-[grid-template-rows,opacity] duration-200 ease-in-out",
+          "motion-reduce:transition-none",
+          shown ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
+        )}
+      >
+        <div className="overflow-hidden">
+          {/* Rows sit flush with the header (both at the section's px-2), 12px apart. */}
+          <div className={cn("flex flex-col gap-3", title != null && "pt-3")}>{children}</div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export interface FormSummaryRowProps<T extends FieldValues = FieldValues> {
+  label: ReactNode;
+  /**
+   * The calculation. Receives the **live** form values and returns the row's value.
+   * Omit it and pass `value` for a static row.
+   */
+  compute?: (values: T) => number | string | undefined | null;
+  /** Static value (used when there's no `compute`). */
+  value?: number | string | null;
+  /** Currency code shown beside the label, e.g. "IQD" / "USD". */
+  currency?: ReactNode;
+  /** Color of the currency code. */
+  tone?: SummaryTone;
+  /** The primary result — renders with a lighter, emphasized border. */
+  emphasized?: boolean;
+  /** Decimal places (default 2 → `0.00`). */
+  decimals?: number;
+  /** Trailing slot inside the field, e.g. an `ActionButton`. */
+  action?: ReactNode;
+  /** Override the default number formatting. */
+  format?: (value: number | string | undefined | null) => string;
+  className?: string;
+}
+
+/**
+ * One summary row: a label above a read-only, right-aligned value field.
+ *
+ * Uses the raw `Input` primitives (`Group`/`Input`/`Trilling`) rather than `InputField`,
+ * which always wraps in a Popover/Tooltip and whose `className` targets the wrapper —
+ * so it can't right-align the value text.
+ */
+function FormSummaryRow<T extends FieldValues = FieldValues>({
+  label,
+  compute,
+  value,
+  currency,
+  tone = "neutral",
+  emphasized,
+  decimals = 2,
+  action,
+  format,
+  className,
+}: FormSummaryRowProps<T>) {
+  // Subscribes to the form's values — recomputes as the user types. `control` comes
+  // from the panel's `form` prop; with none, useWatch falls back to a surrounding
+  // FormProvider (so the panel still works as a child of the form).
+  const control = useContext(ControlContext);
+  const values = useWatch({ control }) as T;
+  const raw = compute ? compute(values) : value;
+  const text = format ? format(raw) : formatAmount(raw, decimals);
+
+  return (
+    // 18px label + 4px + 30px field = the design's 52px row.
+    <div className={cn("flex flex-col gap-1", className)}>
+      <span className="typography-body-small-regular text-[#E5E5E5]">{label}</span>
+
+      <Group
+        size="S"
+        variant="PresentationStyle"
+        className={cn("w-full", emphasized && "!border-black-400")}
+      >
+        {/* readOnly, not disabled — `disabled` triggers the greyed-out field styles.
+            `mask-image:none` cancels Input's fade-out-to-the-right gradient, which
+            would otherwise fade the tail of a right-aligned value. */}
+        <Input readOnly value={text} tabIndex={-1} className="cursor-default [mask-image:none]" />
+
+        {/* The currency code rides in the field's trailing slot, not the label — it shares
+            the slot with `action`, which is why both live in one `Trilling`. */}
+        {(currency || action) && (
+          <Trilling>
+            {currency && (
+              <span className={cn("pe-1 typography-body-small-medium", toneStyles[tone])}>
+                {currency}
+              </span>
+            )}
+            {action}
+          </Trilling>
+        )}
+      </Group>
+    </div>
+  );
+}
+
+export const FormSummary = Object.assign(FormSummaryRoot, {
+  Group: FormSummaryGroup,
+  Row: FormSummaryRow,
+});
+
+FormSummaryRoot.displayName = "FormSummary";

package/apps/lib/components/ImageAttachment.tsx

@@ -1,11 +1,4 @@
-import {
-  forwardRef,
-  HTMLAttributes,
-  InputHTMLAttributes,
-  ReactNode,
-  useEffect,
-  useState,
-} from "react";
+import { forwardRef, HTMLAttributes, InputHTMLAttributes, ReactNode } from "react";
 import { Button } from "./Button";
 import { cva } from "class-variance-authority";
 import { cn } from "../utils/cn";
@@ -19,14 +12,16 @@ import {
 
 const dropZoneStyles = cva(
   [
-    "w-full min-w-[200px] h-[65px] flex flex-col rounded-lg border-dashed !border-2 transition-all duration-300 ease-in-out ",
-    "!border-border-presentation-action-borderstyle bg-background-presentation-badge-gray",
-    "hover:border-border-presentation-action-borderstyle  hover:bg-background-presentation-badge-gray",
+    // Dashed drop zone that fills the field box (design: Attachment-Field-1.0 "Upload-Button").
+    // Transparent fill so the surrounding #f9f9f9 box shows through the dashed border.
+    "flex-1 h-[65px] flex flex-col rounded-[8px] border-dashed !border-2 transition-all duration-300 ease-in-out",
+    "!border-border-presentation-action-borderstyle bg-transparent",
+    "hover:bg-background-presentation-badge-gray-subtle",
   ],
   {
     variants: {
       active: {
-        true: "bg-background-presentation-action-hovercontstyle border-border-presentation-badge-gray",
+        true: "!bg-background-presentation-badge-gray-subtle !border-border-presentation-badge-gray",
       },
     },
   },
@@ -37,7 +32,7 @@ interface Props extends InputHTMLAttributes<HTMLInputElement | HTMLDivElement> {
   mainLabel: string;
   secondaryLabel: string;
   theme?: Themes;
-  expandLabel: ReactNode;
+  expandLabel?: ReactNode;
   children?: ReactNode;
   getRootProps?: () => Record<string, unknown>;
 }
@@ -52,12 +47,21 @@ const ImageAttachment = forwardRef<HTMLInputElement, Props>(
       className,
       getRootProps,
       children,
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars -- excluded from {...props} so it isn't leaked onto the <input>
+      expandLabel,
       ...props
     }: Props,
     ref,
   ) => {
     return (
-      <section className={cn("flex items-center justify-center gap-1 w-full", className)}>
+      // The #f9f9f9 field box (design: Attachment-Field-1.0). Holds an optional preview
+      // (children) on the leading side and the dashed drop zone filling the rest.
+      <section
+        className={cn(
+          "flex w-full items-center gap-[10px] rounded-[8px] bg-background-presentation-form-field-primary",
+          className,
+        )}
+      >
         {children}
         <Button
           {...getRootProps?.()}
@@ -100,52 +104,25 @@ const ExpandableImage = ({
   className,
   ...props
 }: ExpandableImageProps) => {
-  // Calculate the aspect ratio of the image
-  const [aspectRatio, setAspectRatio] = useState<number | null>(null);
-  useEffect(() => {
-    if (!previewSrc) return;
-    const img = new Image();
-    img.onload = () => {
-      const width = img.naturalWidth;
-      const height = img.naturalHeight;
-      const ratio = width / height;
-      setAspectRatio(ratio);
-    };
-    img.src = previewSrc;
-  }, [previewSrc]);
-
   return (
+    // Pic-Container-1.0: a 65×65 square thumbnail (or the placeholder), with an Expand
+    // overlay revealed on hover.
     <section
       style={props.style}
       data-theme={theme}
       className={cn(
-        "flex items-center justify-center rounded-md relative overflow-hidden border-none group h-[65px]  max-w-[180px]",
+        "group relative flex size-[65px] shrink-0 items-center justify-center overflow-hidden rounded-[8px] border-none",
         className,
       )}
     >
-      {previewSrc ? (
-        <SelectedImg aspectRatio={aspectRatio} src={previewSrc} />
-      ) : (
-        <PlaceHolder label={placeholderLabel} />
-      )}
+      {previewSrc ? <SelectedImg src={previewSrc} /> : <PlaceHolder label={placeholderLabel} />}
 
       {previewSrc && (
         <AlertDialog>
           <AlertDialogTrigger asChild>
-            <button className="flex w-full h-full justify-center items-center flex-col absolute z-10 opacity-0 bg-black/50 transition-all duration-250 ease-in-out hover:opacity-100">
-              <svg
-                width="25"
-                height="25"
-                viewBox="0 0 25 25"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M15.5 3.5L17.8 5.8L14.91 8.67L16.33 10.09L19.2 7.2L21.5 9.5V3.5H15.5ZM3.5 9.5L5.8 7.2L8.67 10.09L10.09 8.67L7.2 5.8L9.5 3.5H3.5V9.5ZM9.5 21.5L7.2 19.2L10.09 16.33L8.67 14.91L5.8 17.8L3.5 15.5V21.5H9.5ZM21.5 15.5L19.2 17.8L16.33 14.91L14.91 16.33L17.8 19.2L15.5 21.5H21.5V15.5Z"
-                  fill="#F9F9F9"
-                />
-              </svg>
-              <p className="text-content-presentation-global-primary-inverse typography-labels-small-regular max-w-[50px] break-words m-0">
+            <button className="absolute z-10 flex h-full w-full flex-col items-center justify-center gap-[2px] bg-black/50 opacity-0 transition-all duration-200 ease-in-out hover:opacity-100">
+              <i className="ri-fullscreen-line text-content-presentation-global-hover text-[24px] leading-none" />
+              <p className="text-content-presentation-global-hover typography-labels-small-regular m-0 max-w-[50px] break-words text-center">
                 {expandLabel}
               </p>
             </button>
@@ -161,31 +138,29 @@ const ExpandableImage = ({
 
 function PlaceHolder({ label }: { label: string }) {
   return (
+    // Pic-Container-1.0 default: ocean fill + dashed blue-purple border; on hover it goes gray.
+    // (Was styled with a `badge-blue-purple` token that does not exist — a no-op until now.)
     <section
       className={cn([
-        "w-[65px] h-full gap-[2px] flex flex-col justify-center items-center px-1 ",
-        " rounded-lg border-2 border-dashed",
-        " border-border-presentation-badge-blue-purple",
-        " bg-background-presentation-badge-blue-purple",
+        "size-[65px] gap-[2px] flex flex-col justify-center items-center px-1",
+        " rounded-[8px] border-2 border-dashed",
+        " border-blue-purple-300 bg-background-presentation-badge-ocean-subtle",
         " transition-all duration-300 ease-in-out",
-        " hover:bg-background-presentation-badge-gray hover:border-border-presentation-badge-gray",
+        " group-hover:bg-background-presentation-badge-gray-subtle group-hover:border-border-presentation-badge-gray",
       ])}
     >
-      <i className="ri-attachment-line text-content-presentation-badge-blue-purple group-hover:text-[#797C7F] text-[24px] h-[24px]"></i>
-      <p className="text-content-presentation-badge-blue-purple typography-labels-small-regular group-hover:text-[#797C7F] px-1 py-[2px] text-center">
+      <i className="ri-attachment-line text-blue-purple-800 group-hover:text-content-presentation-badge-gray text-[24px] h-[24px]"></i>
+      <p className="text-blue-purple-800 typography-labels-small-regular group-hover:text-content-presentation-badge-gray px-1 py-[2px] text-center">
         {label}
       </p>
     </section>
   );
 }
 
-function SelectedImg({ src, aspectRatio }: { src: string; aspectRatio: number | null }) {
+function SelectedImg({ src }: { src: string }) {
   return (
-    <section
-      style={{ aspectRatio: aspectRatio ?? undefined }}
-      className="bg-white w-full h-full rounded-md border border-border-presentation-global-primary shrink-0"
-    >
-      <img src={src} className="object-center object-cover h-full w-full" />
+    <section className="size-full shrink-0 overflow-hidden rounded-[8px] border border-border-presentation-global-primary bg-white">
+      <img alt="" src={src} className="h-full w-full object-cover object-center" />
     </section>
   );
 }

package/apps/lib/components/Label.tsx

@@ -56,6 +56,11 @@ export const Label = React.forwardRef<HTMLLabelElement, Props>(
   ) => {
     const Component = Tag;
 
+    // When there's no label text at all, skip the label container entirely so its
+    // sibling `gap-[8px]` doesn't leave an empty gap above the children (e.g. a
+    // label-less Textarea/Input should sit flush).
+    const hasLabelContent = Boolean(label || secondaryLabel || requiredLabel);
+
     return (
       <Component
         data-theme={theme}
@@ -72,48 +77,50 @@ export const Label = React.forwardRef<HTMLLabelElement, Props>(
         )}
         {...props}
       >
-        <div className={cn(labelComponentVariants({ labelDirections }), labelsClassName)}>
-          {label && (
-            <p
-              className={cn(
-                "text-start",
-                {
-                  "typography-body-small-regular": size === "S",
-                  "typography-body-medium-regular": size === "M",
-                  "typography-body-large-regular": size === "L",
-                },
-                {
-                  "text-content-presentation-global-primary": variant === "PresentationStyle",
-                  "text-[#E5E5E5]": variant === "SystemStyle",
-                },
-              )}
-            >
-              {label}
-            </p>
-          )}
-          {secondaryLabel && (
-            <p
-              className={cn("text-content-presentation-global-secondary text-start", {
-                "typography-labels-small-regular": size === "S",
-                "typography-labels-medium-regular": size === "M",
-                "typography-body-small-regular": size === "L",
-              })}
-            >
-              {secondaryLabel}
-            </p>
-          )}
-          {requiredLabel && (
-            <p
-              className={cn("text-content-presentation-state-negative text-start", {
-                "typography-labels-small-medium": size === "S",
-                "typography-labels-medium-medium": size === "M",
-                "typography-body-small-medium": size === "L",
-              })}
-            >
-              {requiredLabel}
-            </p>
-          )}
-        </div>
+        {hasLabelContent && (
+          <div className={cn(labelComponentVariants({ labelDirections }), labelsClassName)}>
+            {label && (
+              <p
+                className={cn(
+                  "text-start",
+                  {
+                    "typography-body-small-regular": size === "S",
+                    "typography-body-medium-regular": size === "M",
+                    "typography-body-large-regular": size === "L",
+                  },
+                  {
+                    "text-content-presentation-global-primary": variant === "PresentationStyle",
+                    "text-[#E5E5E5]": variant === "SystemStyle",
+                  },
+                )}
+              >
+                {label}
+              </p>
+            )}
+            {secondaryLabel && (
+              <p
+                className={cn("text-content-presentation-global-secondary text-start", {
+                  "typography-labels-small-regular": size === "S",
+                  "typography-labels-medium-regular": size === "M",
+                  "typography-body-small-regular": size === "L",
+                })}
+              >
+                {secondaryLabel}
+              </p>
+            )}
+            {requiredLabel && (
+              <p
+                className={cn("text-content-presentation-state-negative text-start", {
+                  "typography-labels-small-medium": size === "S",
+                  "typography-labels-medium-medium": size === "M",
+                  "typography-body-small-medium": size === "L",
+                })}
+              >
+                {requiredLabel}
+              </p>
+            )}
+          </div>
+        )}
         {children}
       </Component>
     );

package/apps/lib/components/RadioCard.tsx

@@ -20,6 +20,8 @@ export const RadioCard = forwardRef<HTMLInputElement, Props>(
         data-theme={theme}
         htmlFor={id}
         as="label"
+        // The whole card is the radio's label — an interactive target, so it keeps the hover.
+        variant="clickable"
         className={cn(
           "relative [&>button]:data-[state=checked]:!border-none",
           '[&:has(button[data-state="checked"])]:border-border-presentation-state-focus',