Card compact and expanded template

app/components/cards/Card/Card.container.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { memo } from "react";
+import { CardView } from "./Card.view";
+import type { CardProps } from "./Card.types";
+
+const CardContainer = memo<CardProps>(
+  ({
+    label,
+    supportText = "",
+    recommended = false,
+    selected = false,
+    orientation = "horizontal",
+    showInfoIcon = false,
+    id,
+    className = "",
+    onClick,
+  }) => {
+    const handleClick = () => {
+      if (onClick) onClick();
+    };
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        handleClick();
+      }
+    };
+
+    return (
+      <CardView
+        label={label}
+        supportText={supportText}
+        recommended={recommended}
+        selected={selected}
+        orientation={orientation}
+        showInfoIcon={showInfoIcon}
+        id={id}
+        className={className}
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+      />
+    );
+  },
+);
+
+CardContainer.displayName = "Card";
+
+export default CardContainer;

app/components/cards/Card/Card.types.ts

@@ -0,0 +1,25 @@
+export interface CardProps {
+  label: string;
+  supportText?: string;
+  recommended?: boolean;
+  selected?: boolean;
+  orientation: "horizontal" | "vertical";
+  showInfoIcon?: boolean;
+  /** Optional id for the card root (e.g. data-card-id for focus after modal close). */
+  id?: string;
+  className?: string;
+  onClick?: () => void;
+}
+
+export interface CardViewProps {
+  label: string;
+  supportText: string;
+  recommended: boolean;
+  selected: boolean;
+  orientation: "horizontal" | "vertical";
+  showInfoIcon: boolean;
+  id: string | undefined;
+  className: string;
+  onClick: () => void;
+  onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+}

app/components/cards/Card/Card.view.tsx

@@ -0,0 +1,101 @@
+"use client";
+
+import Tag from "../../utility/Tag";
+import type { CardViewProps } from "./Card.types";
+
+function InfoIcon() {
+  return (
+    <span
+      className="flex h-[var(--spacing-scale-016)] w-[var(--spacing-scale-016)] shrink-0 items-center justify-center rounded-full border border-[var(--color-content-invert-brand-secondary)] bg-transparent font-inter text-[10px] font-medium leading-none text-[var(--color-content-invert-brand-secondary)]"
+      aria-hidden
+    >
+      ?
+    </span>
+  );
+}
+
+function CardTag({
+  recommended,
+  selected,
+}: {
+  recommended: boolean;
+  selected: boolean;
+}) {
+  if (selected) return <Tag variant="selected" />;
+  if (recommended) return <Tag variant="recommended" />;
+  return null;
+}
+
+export function CardView({
+  label,
+  supportText,
+  recommended,
+  selected,
+  orientation,
+  showInfoIcon,
+  id: cardId,
+  className,
+  onClick,
+  onKeyDown,
+}: CardViewProps) {
+  const borderClass = "border border-[var(--color-border-default-primary)]";
+  const selectedBorder = selected
+    ? "outline outline-2 outline-dashed outline-black outline-offset-[-2px]"
+    : "";
+  const baseClasses = `rounded-[var(--radius-measures-radius-small)] bg-[#FFFFFF] p-4 transition-all duration-200 cursor-pointer ${borderClass} ${selectedBorder} ${className}`;
+
+  if (orientation === "horizontal") {
+    return (
+      <div
+        {...(cardId ? { "data-card-id": cardId } : {})}
+        role="button"
+        tabIndex={0}
+        aria-label={supportText ? `${label}: ${supportText}` : label}
+        className={baseClasses}
+        onClick={onClick}
+        onKeyDown={onKeyDown}
+      >
+        <div className="flex flex-col gap-2 items-start w-full">
+          <CardTag recommended={recommended} selected={selected} />
+          <span className="font-inter text-base font-semibold leading-6 text-black w-full">
+            {label}
+          </span>
+          {supportText ? (
+            <p className="font-inter text-sm font-normal leading-5 text-black w-full">
+              {supportText}
+            </p>
+          ) : null}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      {...(cardId ? { "data-card-id": cardId } : {})}
+      role="button"
+      tabIndex={0}
+      aria-label={supportText ? `${label}: ${supportText}` : label}
+      className={`${baseClasses} flex flex-row items-center justify-between gap-4`}
+      onClick={onClick}
+      onKeyDown={onKeyDown}
+    >
+      <div className="min-w-0 flex-1 flex flex-col gap-1">
+        <div className="flex items-center gap-2">
+          <span className="font-inter text-base font-semibold leading-6 text-black">
+            {label}
+          </span>
+          {showInfoIcon ? <InfoIcon /> : null}
+        </div>
+        {supportText ? (
+          <p className="font-inter text-sm font-normal leading-5 text-black">
+            {supportText}
+          </p>
+        ) : null}
+      </div>
+      <div className="shrink-0">
+        <CardTag recommended={recommended} selected={selected} />
+      </div>
+    </div>
+  );
+}

app/components/cards/Card/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Card.container";
+export type { CardProps } from "./Card.types";