sapient-ai 0.1.1 → 0.2.0

package/README.md

@@ -7,6 +7,7 @@ Thin wrapper around `shadcn` for Sapient registry usage.
 - `sapient-ai init`
 - `sapient-ai init --preset <handle-or-id> --template next`
 - `sapient-ai add <component>`
+- `sapient-ai add-icons <design-system|lucide|remix>`
 - `sapient-ai shadcn <args...>`
 
 ## Behavior
@@ -16,6 +17,8 @@ Thin wrapper around `shadcn` for Sapient registry usage.
 - The CLI also generates a `sapient-theme.css` file next to the app's `globals.css` file and imports it automatically so the runtime theme matches the exported Sapient preset.
 - The CLI installs a small Sapient foundation pack by default, then adds any additional registry components inferred from the preset.
 - When the preset references supported Sapient registry items, the CLI also runs `shadcn add` for those components automatically.
+- When the preset uses `lucide` or `remix`, the CLI also installs the matching icon package automatically.
+- `add-icons <library>` updates local Sapient config and installs the matching icon package for an existing project.
 - `add button` is rewritten to `add @sapient/button`.
 - Pass fully-qualified names (`@scope/name`) unchanged.
 - Internally, `init` still uses `shadcn` for project wiring, but it now supplies Sapient-owned defaults so the user does not have to answer the underlying `shadcn` prompts.
@@ -24,7 +27,7 @@ Thin wrapper around `shadcn` for Sapient registry usage.
 
 ```bash
 npm pack ./packages/cli
- npx --yes ./sapient-ai-0.1.1.tgz --help
+ npx --yes ./sapient-ai-0.2.0.tgz --help
 ```
 
 ## Registry URL

package/bin/sapient-ai.js

@@ -24,12 +24,14 @@ Usage:
   sapient-ai init [shadcn-init-args...]
   sapient-ai init --preset <handle-or-id> [shadcn-init-args...]
   sapient-ai add <component> [shadcn-add-args...]
+  sapient-ai add-icons <design-system|lucide|remix> [--cwd <path>]
   sapient-ai shadcn [raw-shadcn-args...]
 
 Examples:
   sapient-ai init
   sapient-ai init --preset ferrari --template next
   sapient-ai add button
+  sapient-ai add-icons remix
   sapient-ai add @sapient/button
   sapient-ai shadcn diff
 
@@ -342,6 +344,73 @@ function getTokenReference(tokenMap, name, fallback) {
   return Object.prototype.hasOwnProperty.call(tokenMap, name) ? `var(${name})` : fallback;
 }
 
+function resolveSapientExportFont(config) {
+  const fontFallback =
+    'ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif';
+
+  if (config?.font === "custom-google" && typeof config?.customFontUrl === "string") {
+    try {
+      const parsedUrl = new URL(config.customFontUrl);
+      let family = "";
+      let importUrl = null;
+
+      if (parsedUrl.hostname === "fonts.googleapis.com") {
+        const familyParam = parsedUrl.searchParams.get("family");
+        family = familyParam
+          ? decodeURIComponent(familyParam.split(":")[0].replace(/\+/g, " ")).trim()
+          : "";
+        importUrl = parsedUrl.toString();
+      } else if (parsedUrl.hostname === "fonts.google.com") {
+        const specimenMatch = parsedUrl.pathname.match(/^\/specimen\/([^/]+)$/);
+        family = specimenMatch?.[1]
+          ? decodeURIComponent(specimenMatch[1].replace(/\+/g, " ")).trim()
+          : "";
+        importUrl = family
+          ? `https://fonts.googleapis.com/css2?family=${family.replace(/\s+/g, "+")}&display=swap`
+          : null;
+      }
+
+      if (importUrl && family) {
+        return {
+          importUrl,
+          fontFamily: `"${family}", ${fontFallback}`,
+        };
+      }
+    } catch {
+      // Fall through to non-custom handling.
+    }
+  }
+
+  if (config?.font === "inter") {
+    return {
+      importUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap",
+      fontFamily: `"Inter", ${fontFallback}`,
+    };
+  }
+
+  if (config?.font === "helvetica-neue") {
+    return { importUrl: null, fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif' };
+  }
+
+  if (config?.font === "georgia") {
+    return { importUrl: null, fontFamily: 'Georgia, "Times New Roman", serif' };
+  }
+
+  if (config?.font === "trebuchet") {
+    return { importUrl: null, fontFamily: '"Trebuchet MS", "Lucida Grande", sans-serif' };
+  }
+
+  if (typeof config?.customFontName === "string" && config.customFontName.trim().length > 0) {
+    return { importUrl: null, fontFamily: `"${config.customFontName.trim()}", ${fontFallback}` };
+  }
+
+  return {
+    importUrl: null,
+    fontFamily:
+      '"Neue Haas Grotesk Display Pro", ui-sans-serif, system-ui, sans-serif',
+  };
+}
+
 function buildSapientThemeCss({ tokens, config }) {
   const tokenMap = toTokenMap(tokens);
   const baseNeutral = getTokenReference(tokenMap, "--neutral-50", "0 0% 98%");
@@ -363,16 +432,13 @@ function buildSapientThemeCss({ tokens, config }) {
   const cardRadius = getTokenReference(tokenMap, "--card-radius", radius);
   const basePadding = typeof config?.padding === "number" ? `${config.padding}px` : "16px";
   const baseGap = typeof config?.gap === "number" ? `${config.gap}px` : "12px";
-  const fontFamily =
-    typeof config?.font === "string" && config.font.length > 0 && config.font !== "default"
-      ? `'${config.font}', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`
-      : `ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  const { importUrl: fontImportUrl, fontFamily } = resolveSapientExportFont(config);
 
   const tokenLines = Object.entries(tokenMap)
     .map(([name, value]) => `  ${name}: ${String(value)};`)
     .join("\n");
 
-  return `:root {
+  return `${fontImportUrl ? `@import url("${fontImportUrl}");\n\n` : ""}:root {
 ${tokenLines}
   --background: ${baseNeutral};
   --foreground: ${foregroundPrimary};
@@ -541,6 +607,185 @@ function applySapientPresetTheme(projectRoot = process.cwd()) {
   process.stdout.write(`Applied Sapient theme to ${cssPath}\n`);
 }
 
+function normalizeIconLibrary(value) {
+  if (value === "lucide" || value === "remix") {
+    return value;
+  }
+
+  if (value === "sapient" || value === "sapient-icons" || value === "design-system") {
+    return "design-system";
+  }
+
+  return null;
+}
+
+function collectIconLibrariesFromValue(value, foundLibraries = new Set()) {
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      collectIconLibrariesFromValue(item, foundLibraries);
+    }
+    return foundLibraries;
+  }
+
+  if (!value || typeof value !== "object") {
+    return foundLibraries;
+  }
+
+  for (const [key, nestedValue] of Object.entries(value)) {
+    if (key === "iconLibrary" && typeof nestedValue === "string") {
+      const normalized = normalizeIconLibrary(nestedValue);
+      if (normalized) {
+        foundLibraries.add(normalized);
+      }
+    }
+
+    collectIconLibrariesFromValue(nestedValue, foundLibraries);
+  }
+
+  return foundLibraries;
+}
+
+function getPresetIconLibraries(projectRoot = process.cwd()) {
+  const configPath = findExistingArtifactPath("sapient-design-system-config.json", projectRoot);
+  const componentCatalogPath = findExistingArtifactPath("sapient-components.json", projectRoot);
+  const componentLibraryPath = findExistingArtifactPath("sapient-component-library.json", projectRoot);
+  const foundLibraries = new Set();
+
+  [configPath, componentCatalogPath, componentLibraryPath]
+    .map((filePath) => readJsonFileIfExists(filePath))
+    .filter(Boolean)
+    .forEach((artifact) => {
+      collectIconLibrariesFromValue(artifact, foundLibraries);
+    });
+
+  return foundLibraries;
+}
+
+function detectPackageManager(projectRoot = process.cwd()) {
+  if (fs.existsSync(path.join(projectRoot, "pnpm-lock.yaml"))) {
+    return { command: "pnpm", args: ["add"] };
+  }
+
+  if (fs.existsSync(path.join(projectRoot, "yarn.lock"))) {
+    return { command: "yarn", args: ["add"] };
+  }
+
+  if (
+    fs.existsSync(path.join(projectRoot, "bun.lockb")) ||
+    fs.existsSync(path.join(projectRoot, "bun.lock"))
+  ) {
+    return { command: "bun", args: ["add"] };
+  }
+
+  return { command: "npm", args: ["install"] };
+}
+
+function hasInstalledDependency(projectRoot, packageName) {
+  const packageJsonPath = path.join(projectRoot, "package.json");
+  const packageJson = readJsonFileIfExists(packageJsonPath);
+
+  if (!packageJson || typeof packageJson !== "object") {
+    return false;
+  }
+
+  return Boolean(
+    packageJson.dependencies?.[packageName] ||
+    packageJson.devDependencies?.[packageName] ||
+    packageJson.peerDependencies?.[packageName]
+  );
+}
+
+function installPresetIconDependencies(projectRoot = process.cwd()) {
+  const packageMap = {
+    lucide: "lucide-react",
+    remix: "@remixicon/react",
+  };
+
+  const requiredPackages = Array.from(getPresetIconLibraries(projectRoot))
+    .filter((library) => library !== "design-system")
+    .map((library) => packageMap[library])
+    .filter(Boolean)
+    .filter((packageName) => !hasInstalledDependency(projectRoot, packageName));
+
+  if (requiredPackages.length === 0) {
+    return;
+  }
+
+  const { command, args } = detectPackageManager(projectRoot);
+  const result = spawnSync(command, [...args, ...requiredPackages], {
+    stdio: "inherit",
+    env: process.env,
+    cwd: projectRoot,
+  });
+
+  if (result.error) {
+    throw new Error(`Failed to install icon dependencies: ${result.error.message}`);
+  }
+
+  if ((result.status ?? 1) !== 0) {
+    throw new Error("Icon dependency installation failed.");
+  }
+
+  process.stdout.write(`Installed icon dependencies: ${requiredPackages.join(", ")}\n`);
+}
+
+function installSpecificIconLibrary(projectRoot = process.cwd(), library) {
+  const packageMap = {
+    lucide: "lucide-react",
+    remix: "@remixicon/react",
+  };
+
+  const packageName = packageMap[library];
+  if (!packageName || hasInstalledDependency(projectRoot, packageName)) {
+    return;
+  }
+
+  const { command, args } = detectPackageManager(projectRoot);
+  const result = spawnSync(command, [...args, packageName], {
+    stdio: "inherit",
+    env: process.env,
+    cwd: projectRoot,
+  });
+
+  if (result.error) {
+    throw new Error(`Failed to install ${packageName}: ${result.error.message}`);
+  }
+
+  if ((result.status ?? 1) !== 0) {
+    throw new Error(`Installation failed for ${packageName}.`);
+  }
+
+  process.stdout.write(`Installed icon dependency: ${packageName}\n`);
+}
+
+function updateComponentsIconLibrary(projectRoot = process.cwd(), library) {
+  const componentsPath = path.join(projectRoot, "components.json");
+  const components = readJsonFileIfExists(componentsPath);
+
+  if (!components || typeof components !== "object") {
+    return false;
+  }
+
+  components.iconLibrary = library === "design-system" ? "lucide" : library;
+  writeJsonFile(componentsPath, components);
+  process.stdout.write(`Updated components.json iconLibrary to ${components.iconLibrary}\n`);
+  return true;
+}
+
+function updateSapientConfigIconLibrary(projectRoot = process.cwd(), library) {
+  const configPath = findExistingArtifactPath("sapient-design-system-config.json", projectRoot);
+  const config = readJsonFileIfExists(configPath);
+
+  if (!config || typeof config !== "object") {
+    return false;
+  }
+
+  config.iconLibrary = library;
+  writeJsonFile(configPath, config);
+  process.stdout.write(`Updated .sapient/sapient-design-system-config.json iconLibrary to ${library}\n`);
+  return true;
+}
+
 function installRegistryComponents(preset, projectRoot = process.cwd()) {
   if (!Array.isArray(preset?.registryComponents) || preset.registryComponents.length === 0) {
     return;
@@ -635,6 +880,7 @@ async function handleInit(args) {
     writePresetFiles(preset, projectRoot);
     applySapientPresetTheme(projectRoot);
     installRegistryComponents(preset, projectRoot);
+    installPresetIconDependencies(projectRoot);
     process.stdout.write(`Applied preset ${preset.presetHandle || selectedPreset}\n`);
     process.exit(0);
   } catch (error) {
@@ -668,6 +914,43 @@ function handleAdd(args) {
   process.exit(result.status ?? 1);
 }
 
+function handleAddIcons(args) {
+  if (args.length === 0) {
+    process.stderr.write("Missing icon library. Example: sapient-ai add-icons lucide\n");
+    process.exit(1);
+  }
+
+  const [rawLibrary] = args;
+  const library = normalizeIconLibrary(rawLibrary);
+
+  if (!library) {
+    process.stderr.write('Unsupported icon library. Use "design-system", "lucide", or "remix".\n');
+    process.exit(1);
+  }
+
+  const explicitCwd = getOptionValue(args, "--cwd", "-c");
+  const projectRoot = explicitCwd
+    ? path.resolve(process.cwd(), explicitCwd)
+    : process.cwd();
+
+  try {
+    updateComponentsIconLibrary(projectRoot, library);
+    updateSapientConfigIconLibrary(projectRoot, library);
+
+    if (library === "design-system") {
+      process.stdout.write("Sapient design-system icons selected. No external icon package is required.\n");
+      process.exit(0);
+    }
+
+    installSpecificIconLibrary(projectRoot, library);
+    process.exit(0);
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown error";
+    process.stderr.write(`Failed to add icons: ${message}\n`);
+    process.exit(1);
+  }
+}
+
 function handleRawShadcn(args) {
   const result = runShadcn(args);
 
@@ -692,6 +975,10 @@ if (command === "add") {
   handleAdd(rest);
 }
 
+if (command === "add-icons") {
+  handleAddIcons(rest);
+}
+
 if (command === "shadcn") {
   handleRawShadcn(rest);
 }

package/local-registry/r/button.json

@@ -55,12 +55,16 @@
     {
       "path": "components/ui/sapient-icon.tsx",
       "type": "registry:ui",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ICON_BASE_URL = \"https://pub-3f6483ae20764a8fbcfcf8b0b7dc076a.r2.dev\";\nconst FLAGS_BASE_URL = \"https://pub-40d153c17ab64cc8abb11157721f0d1d.r2.dev\";\n\nexport type SapientIconVariant = \"general\" | \"flags\";\n\nexport interface SapientIconProps\n  extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, \"src\" | \"alt\"> {\n  name: string;\n  label?: string;\n  size?: number;\n  variant?: SapientIconVariant;\n}\n\nexport function SapientIcon({\n  name,\n  label,\n  size = 20,\n  variant = \"general\",\n  className,\n  ...props\n}: SapientIconProps) {\n  const baseUrl = variant === \"flags\" ? FLAGS_BASE_URL : ICON_BASE_URL;\n  const src = `${baseUrl}/${name}.svg`;\n\n  return (\n    <img\n      src={src}\n      alt={label ?? name}\n      width={size}\n      height={size}\n      className={cn(\"shrink-0\", className)}\n      loading=\"lazy\"\n      decoding=\"async\"\n      {...props}\n    />\n  );\n}\n"
+      "content": "import * as React from \"react\";\nimport * as LucideIcons from \"lucide-react\";\nimport * as RemixIcons from \"@remixicon/react\";\nimport { cn } from \"@/lib/utils\";\n\nconst ICON_BASE_URL = \"https://pub-3f6483ae20764a8fbcfcf8b0b7dc076a.r2.dev\";\nconst FLAGS_BASE_URL = \"https://pub-40d153c17ab64cc8abb11157721f0d1d.r2.dev\";\n\nexport type SapientIconVariant = \"general\" | \"flags\";\nexport type SapientIconLibrary = \"sapient\" | \"lucide\" | \"remix\";\n\nexport interface SapientIconProps {\n  name: string;\n  label?: string;\n  size?: number;\n  variant?: SapientIconVariant;\n  library?: SapientIconLibrary;\n  className?: string;\n  color?: string;\n  strokeWidth?: number;\n}\n\nexport function SapientIcon({\n  name,\n  label,\n  size = 20,\n  variant = \"general\",\n  library = \"sapient\",\n  className,\n  color,\n  strokeWidth = 2,\n  ...props\n}: SapientIconProps) {\n  if (library === \"lucide\") {\n    const LucideIcon =\n      (LucideIcons as Record<string, React.ComponentType<any>>)[name] ??\n      LucideIcons.HelpCircle;\n\n    return (\n      <LucideIcon\n        aria-label={label ?? name}\n        size={size}\n        color={color}\n        strokeWidth={strokeWidth}\n        className={cn(\"shrink-0\", className)}\n        {...props}\n      />\n    );\n  }\n\n  if (library === \"remix\") {\n    const RemixIcon =\n      (RemixIcons as Record<string, React.ComponentType<any>>)[name] ??\n      RemixIcons.RiQuestionLine;\n\n    return (\n      <RemixIcon\n        aria-label={label ?? name}\n        size={size}\n        color={color}\n        className={cn(\"shrink-0\", className)}\n        {...props}\n      />\n    );\n  }\n\n  const baseUrl = variant === \"flags\" ? FLAGS_BASE_URL : ICON_BASE_URL;\n  const src = `${baseUrl}/${name}.svg`;\n\n  return (\n    <img\n      src={src}\n      alt={label ?? name}\n      width={size}\n      height={size}\n      className={cn(\"shrink-0\", className)}\n      loading=\"lazy\"\n      decoding=\"async\"\n    />\n  );\n}\n"
     },
     {
       "path": "components/ui/sapient-button.tsx",
       "type": "registry:ui",
-      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { SapientIcon } from \"@/components/ui/sapient-icon\";\n\nexport interface SapientButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n}\n\nexport function SapientButton({\n  icon,\n  iconPosition = \"left\",\n  className,\n  children,\n  ...props\n}: SapientButtonProps) {\n  return (\n    <button\n      className={cn(\n        \"inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {icon && iconPosition === \"left\" ? <SapientIcon name={icon} size={18} /> : null}\n      <span>{children}</span>\n      {icon && iconPosition === \"right\" ? <SapientIcon name={icon} size={18} /> : null}\n    </button>\n  );\n}\n"
+      "content": "import * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\nimport { SapientIcon, type SapientIconLibrary } from \"@/components/ui/sapient-icon\";\n\nexport interface SapientButtonProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: string;\n  iconPosition?: \"left\" | \"right\";\n  iconLibrary?: SapientIconLibrary;\n}\n\nexport function SapientButton({\n  icon,\n  iconPosition = \"left\",\n  iconLibrary = \"sapient\",\n  className,\n  children,\n  ...props\n}: SapientButtonProps) {\n  return (\n    <button\n      className={cn(\n        \"inline-flex h-10 items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      {icon && iconPosition === \"left\" ? <SapientIcon name={icon} size={18} library={iconLibrary} /> : null}\n      <span>{children}</span>\n      {icon && iconPosition === \"right\" ? <SapientIcon name={icon} size={18} library={iconLibrary} /> : null}\n    </button>\n  );\n}\n"
     }
+  ],
+  "dependencies": [
+    "lucide-react",
+    "@remixicon/react"
   ]
 }

package/local-registry/r/customer-satisfaction.json

@@ -55,7 +55,7 @@
     {
       "path": "components/ui/sapient-customer-satisfaction.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React, { useState, useId } from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface CustomerSatisfactionProps {\n    className?: string;\n    /** Question text shown as the card heading */\n    question?: string;\n    /** Min slider label (left) */\n    minLabel?: string;\n    /** Max slider label (right) */\n    maxLabel?: string;\n    /** Initial value 0–100 */\n    defaultValue?: number;\n    /** Controlled value 0–100 */\n    value?: number;\n    onChange?: (value: number) => void;\n    /** Left-side label (two lines, e.g. [\"PER NIENTE\", \"SODDISFATTO\"]) */\n    minLabelLines?: [string, string];\n    /** Right-side label (two lines) */\n    maxLabelLines?: [string, string];\n}\n\n// ─── Face illustration (pure SVG) ────────────────────────────────────────────\n// Exact coordinates extracted from Figma SVG exports.\n// Viewbox: 0 0 162 131 (matches both exported SVGs)\n//\n// Frame 4254 = Sad  (v = 0)\n// Frame 4255 = Happy (v = 100)\n//\n// All numeric path coordinates are linearly interpolated so the face\n// morphs smoothly as the slider moves.\n\n// Helper: lerp between sad (a) and happy (b) values based on 0–100 slider\nfunction lerp(a: number, b: number, t: number): number {\n    return a + (b - a) * (t / 100);\n}\n\n// Round to 3 dp to keep path strings compact\nfunction r(n: number): string {\n    return n.toFixed(3);\n}\n\nfunction SatisfactionFace({ value }: { value: number }) {\n    const v = Math.min(100, Math.max(0, value));\n    const l = (a: number, b: number) => lerp(a, b, v);\n\n    // ── Main mouth arc (cubic bezier) ────────────────────────────────────────\n    // Sad:   M27.04,105.66 C46.23,58.95  104.46,53.19 135.18,94.15\n    // Happy: M27.04,71.83  C46.23,118.54 104.46,124.30 135.18,83.35\n    const arc_My  = l(105.664, 71.8327);\n    const arc_C1y = l(58.9536, 118.543);\n    const arc_C2y = l(53.1949, 124.301);\n    const arc_Ey  = l(94.1461, 83.3503);\n    const arcPath = `M27.0389,${r(arc_My)} C46.2348,${r(arc_C1y)} 104.462,${r(arc_C2y)} 135.176,${r(arc_Ey)}`;\n\n    // ── Left curl ────────────────────────────────────────────────────────────\n    // Sad:   M34.10,107.98 C29.94,110.06 22.98,106.60 21.14,101.61\n    // Happy: M34.10,69.51  C29.94,67.43  22.98,70.90  21.14,75.89\n    const lc_My  = l(107.983, 69.5134);\n    const lc_C1y = l(110.062, 67.4345);\n    const lc_C2y = l(106.596, 70.9);\n    const lc_Ey  = l(101.606, 75.8902);\n    const leftCurl = `M34.0956,${r(lc_My)} C29.9417,${r(lc_C1y)} 22.9833,${r(lc_C2y)} 21.1386,${r(lc_Ey)}`;\n\n    // ── Right curl ───────────────────────────────────────────────────────────\n    // Sad:   M138.97,88.07  C139.90,92.62  134.75,98.44  129.45,98.93\n    // Happy: M138.97,89.43  C139.90,84.88  134.75,79.05  129.45,78.56\n    const rc_My  = l(88.0696, 89.4267);\n    const rc_C1y = l(92.62,   84.8763);\n    const rc_C2y = l(98.4444, 79.0519);\n    const rc_Ey  = l(98.9347, 78.5616);\n    const rightCurl = `M138.966,${r(rc_My)} C139.899,${r(rc_C1y)} 134.75,${r(rc_C2y)} 129.453,${r(rc_Ey)}`;\n\n    const strokeColor = 'hsl(var(--secondary-600))';\n    const strokeW = '3.83917';\n\n    return (\n        <svg\n            viewBox=\"0 0 162 131\"\n            width={162}\n            height={131}\n            fill=\"none\"\n            aria-hidden=\"true\"\n        >\n            {/* Left eye */}\n            <ellipse cx=\"63.7274\" cy=\"35.3567\" rx=\"6.39862\" ry=\"15.3567\" fill={strokeColor} />\n            {/* Right eye */}\n            <ellipse cx=\"97.5246\" cy=\"35.3567\" rx=\"6.39862\" ry=\"15.3567\" fill={strokeColor} />\n            {/* Main mouth arc */}\n            <path d={arcPath} stroke={strokeColor} strokeWidth={strokeW} />\n            {/* Left curl */}\n            <path d={leftCurl} stroke={strokeColor} strokeWidth={strokeW} strokeLinecap=\"round\" />\n            {/* Right curl */}\n            <path d={rightCurl} stroke={strokeColor} strokeWidth={strokeW} strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\n// ─── CustomerSatisfaction ─────────────────────────────────────────────────────\n\nexport function CustomerSatisfaction({\n    className,\n    question = 'Quanto sei soddisfatto della tua esperienza?',\n    minLabelLines = ['PER NIENTE', 'SODDISFATTO'],\n    maxLabelLines = ['MOLTO', 'SODDISFATTO'],\n    defaultValue = 25,\n    value: controlledValue,\n    onChange,\n}: CustomerSatisfactionProps) {\n    const sliderId = useId();\n    const [internalValue, setInternalValue] = useState(defaultValue);\n\n    const value = controlledValue ?? internalValue;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const v = Number(e.target.value);\n        setInternalValue(v);\n        onChange?.(v);\n    };\n\n    // Thumb position as a percentage for custom styling\n    const pct = value;\n\n    return (\n        <div\n            className={cn(\n                'flex flex-col gap-[var(--spacing-l,24px)] items-center overflow-hidden rounded-[var(--radius-token-lg,32px)] p-[var(--spacing-l,24px)] w-[353px] bg-white',\n                className\n            )}\n        >\n            {/* ── Question ── */}\n            <p className=\"text-[length:var(--text-body,16px)] leading-[var(--leading-body,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                {question}\n            </p>\n\n            {/* ── Face illustration ── */}\n            <div className=\"flex flex-col gap-[16px] items-center p-[20px] shrink-0\">\n                <SatisfactionFace value={value} />\n            </div>\n\n            {/* ── Slider ── */}\n            <div className=\"flex flex-col gap-[var(--spacing-m,16px)] items-center w-full shrink-0\">\n                {/* Track + thumb */}\n                <div className=\"relative w-full flex items-center h-[30px]\">\n                    {/* Track background */}\n                    <div className=\"absolute inset-x-0 h-[4px] rounded-full bg-[hsl(var(--neutral-200))]\" />\n\n                    {/* Native range input — fully transparent, sits on top */}\n                    <label htmlFor={sliderId} className=\"sr-only\">\n                        {question}\n                    </label>\n                    <input\n                        id={sliderId}\n                        type=\"range\"\n                        min={0}\n                        max={100}\n                        step={1}\n                        value={value}\n                        onChange={handleChange}\n                        className=\"absolute inset-x-0 w-full h-full opacity-0 cursor-grab active:cursor-grabbing z-10\"\n                        style={{ margin: 0 }}\n                    />\n\n                    {/* Custom thumb */}\n                    <div\n                        className=\"absolute size-[30px] rounded-full bg-[hsl(var(--neutral-950))] shadow-md pointer-events-none -translate-x-1/2\"\n                        style={{ left: `${pct}%` }}\n                    />\n                </div>\n\n                {/* Labels */}\n                <div className=\"flex items-start justify-between w-full\">\n                    <p className=\"text-[10px] leading-[1.4] font-normal uppercase tracking-[0.04em] text-[hsl(var(--neutral-500))] whitespace-pre-wrap\">\n                        {minLabelLines[0]}{'\\n'}{minLabelLines[1]}\n                    </p>\n                    <p className=\"text-[10px] leading-[1.4] font-normal uppercase tracking-[0.04em] text-[hsl(var(--neutral-500))] text-right whitespace-pre-wrap\">\n                        {maxLabelLines[0]}{'\\n'}{maxLabelLines[1]}\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default CustomerSatisfaction;\n"
+      "content": "'use client';\n\nimport React, { useState, useId } from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface CustomerSatisfactionProps {\n    className?: string;\n    /** Question text shown as the card heading */\n    question?: string;\n    /** Min slider label (left) */\n    minLabel?: string;\n    /** Max slider label (right) */\n    maxLabel?: string;\n    /** Initial value 0–100 */\n    defaultValue?: number;\n    /** Controlled value 0–100 */\n    value?: number;\n    onChange?: (value: number) => void;\n    /** Left-side label (two lines, e.g. [\"PER NIENTE\", \"SODDISFATTO\"]) */\n    minLabelLines?: [string, string];\n    /** Right-side label (two lines) */\n    maxLabelLines?: [string, string];\n}\n\n// ─── Face illustration (pure SVG) ────────────────────────────────────────────\n// Exact coordinates extracted from Figma SVG exports.\n// Viewbox: 0 0 162 131 (matches both exported SVGs)\n//\n// Frame 4254 = Sad  (v = 0)\n// Frame 4255 = Happy (v = 100)\n//\n// All numeric path coordinates are linearly interpolated so the face\n// morphs smoothly as the slider moves.\n\n// Helper: lerp between sad (a) and happy (b) values based on 0–100 slider\nfunction lerp(a: number, b: number, t: number): number {\n    return a + (b - a) * (t / 100);\n}\n\n// Round to 3 dp to keep path strings compact\nfunction r(n: number): string {\n    return n.toFixed(3);\n}\n\nfunction SatisfactionFace({ value }: { value: number }) {\n    const v = Math.min(100, Math.max(0, value));\n    const l = (a: number, b: number) => lerp(a, b, v);\n\n    // ── Main mouth arc (cubic bezier) ────────────────────────────────────────\n    // Sad:   M27.04,105.66 C46.23,58.95  104.46,53.19 135.18,94.15\n    // Happy: M27.04,71.83  C46.23,118.54 104.46,124.30 135.18,83.35\n    const arc_My  = l(105.664, 71.8327);\n    const arc_C1y = l(58.9536, 118.543);\n    const arc_C2y = l(53.1949, 124.301);\n    const arc_Ey  = l(94.1461, 83.3503);\n    const arcPath = `M27.0389,${r(arc_My)} C46.2348,${r(arc_C1y)} 104.462,${r(arc_C2y)} 135.176,${r(arc_Ey)}`;\n\n    // ── Left curl ────────────────────────────────────────────────────────────\n    // Sad:   M34.10,107.98 C29.94,110.06 22.98,106.60 21.14,101.61\n    // Happy: M34.10,69.51  C29.94,67.43  22.98,70.90  21.14,75.89\n    const lc_My  = l(107.983, 69.5134);\n    const lc_C1y = l(110.062, 67.4345);\n    const lc_C2y = l(106.596, 70.9);\n    const lc_Ey  = l(101.606, 75.8902);\n    const leftCurl = `M34.0956,${r(lc_My)} C29.9417,${r(lc_C1y)} 22.9833,${r(lc_C2y)} 21.1386,${r(lc_Ey)}`;\n\n    // ── Right curl ───────────────────────────────────────────────────────────\n    // Sad:   M138.97,88.07  C139.90,92.62  134.75,98.44  129.45,98.93\n    // Happy: M138.97,89.43  C139.90,84.88  134.75,79.05  129.45,78.56\n    const rc_My  = l(88.0696, 89.4267);\n    const rc_C1y = l(92.62,   84.8763);\n    const rc_C2y = l(98.4444, 79.0519);\n    const rc_Ey  = l(98.9347, 78.5616);\n    const rightCurl = `M138.966,${r(rc_My)} C139.899,${r(rc_C1y)} 134.75,${r(rc_C2y)} 129.453,${r(rc_Ey)}`;\n\n    const strokeColor = 'hsl(var(--secondary-600))';\n    const strokeW = '3.83917';\n\n    return (\n        <svg\n            viewBox=\"0 0 162 131\"\n            width={162}\n            height={131}\n            fill=\"none\"\n            aria-hidden=\"true\"\n        >\n            {/* Left eye */}\n            <ellipse cx=\"63.7274\" cy=\"35.3567\" rx=\"6.39862\" ry=\"15.3567\" fill={strokeColor} />\n            {/* Right eye */}\n            <ellipse cx=\"97.5246\" cy=\"35.3567\" rx=\"6.39862\" ry=\"15.3567\" fill={strokeColor} />\n            {/* Main mouth arc */}\n            <path d={arcPath} stroke={strokeColor} strokeWidth={strokeW} />\n            {/* Left curl */}\n            <path d={leftCurl} stroke={strokeColor} strokeWidth={strokeW} strokeLinecap=\"round\" />\n            {/* Right curl */}\n            <path d={rightCurl} stroke={strokeColor} strokeWidth={strokeW} strokeLinecap=\"round\" />\n        </svg>\n    );\n}\n\n// ─── CustomerSatisfaction ─────────────────────────────────────────────────────\n\nexport function CustomerSatisfaction({\n    className,\n    question = 'Quanto sei soddisfatto della tua esperienza?',\n    minLabelLines = ['PER NIENTE', 'SODDISFATTO'],\n    maxLabelLines = ['MOLTO', 'SODDISFATTO'],\n    defaultValue = 25,\n    value: controlledValue,\n    onChange,\n}: CustomerSatisfactionProps) {\n    const sliderId = useId();\n    const [internalValue, setInternalValue] = useState(defaultValue);\n\n    const value = controlledValue ?? internalValue;\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n        const v = Number(e.target.value);\n        setInternalValue(v);\n        onChange?.(v);\n    };\n\n    // Thumb position as a percentage for custom styling\n    const pct = value;\n\n    return (\n        <div\n            className={cn(\n                'flex flex-col gap-[var(--spacing-xs2,24px)] items-center overflow-hidden rounded-[var(--radius-token-lg,32px)] p-[var(--spacing-xs2,24px)] w-[353px] bg-white',\n                className\n            )}\n        >\n            {/* ── Question ── */}\n            <p className=\"text-[length:var(--text-body,16px)] leading-[var(--leading-body,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                {question}\n            </p>\n\n            {/* ── Face illustration ── */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs3,16px)] items-center p-[var(--spacing-xs2,24px)] shrink-0\">\n                <SatisfactionFace value={value} />\n            </div>\n\n            {/* ── Slider ── */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs3,16px)] items-center w-full shrink-0\">\n                {/* Track + thumb */}\n                <div className=\"relative w-full flex items-center h-[30px]\">\n                    {/* Track background */}\n                    <div className=\"absolute inset-x-0 h-[4px] rounded-full bg-[hsl(var(--neutral-200))]\" />\n\n                    {/* Native range input — fully transparent, sits on top */}\n                    <label htmlFor={sliderId} className=\"sr-only\">\n                        {question}\n                    </label>\n                    <input\n                        id={sliderId}\n                        type=\"range\"\n                        min={0}\n                        max={100}\n                        step={1}\n                        value={value}\n                        onChange={handleChange}\n                        className=\"absolute inset-x-0 w-full h-full opacity-0 cursor-grab active:cursor-grabbing z-10\"\n                        style={{ margin: 0 }}\n                    />\n\n                    {/* Custom thumb */}\n                    <div\n                        className=\"absolute size-[30px] rounded-full bg-[hsl(var(--neutral-950))] shadow-md pointer-events-none -translate-x-1/2\"\n                        style={{ left: `${pct}%` }}\n                    />\n                </div>\n\n                {/* Labels */}\n                <div className=\"flex items-start justify-between w-full\">\n                    <p className=\"text-[10px] leading-[1.4] font-normal uppercase tracking-[0.04em] text-[hsl(var(--neutral-500))] whitespace-pre-wrap\">\n                        {minLabelLines[0]}{'\\n'}{minLabelLines[1]}\n                    </p>\n                    <p className=\"text-[10px] leading-[1.4] font-normal uppercase tracking-[0.04em] text-[hsl(var(--neutral-500))] text-right whitespace-pre-wrap\">\n                        {maxLabelLines[0]}{'\\n'}{maxLabelLines[1]}\n                    </p>\n                </div>\n            </div>\n        </div>\n    );\n}\n\nexport default CustomerSatisfaction;\n"
     }
   ]
 }

package/local-registry/r/multiple-choice-card.json

@@ -55,12 +55,12 @@
     {
       "path": "components/ui/sapient-radio-button.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type RadioButtonState = 'default' | 'selected';\n\nexport interface RadioButtonProps {\n    className?: string;\n    state?: RadioButtonState;\n    label?: string;\n    showLabel?: boolean;\n    /** Whether to apply backdrop-blur on default state (used when overlaid on images) */\n    blur?: boolean;\n    onClick?: () => void;\n}\n\n// ─── Radio dot indicator ──────────────────────────────────────────────────────\n// 24×24 container — outer ring + inner fill dot (only when selected)\nfunction RadioDot({ selected }: { selected: boolean }) {\n    return (\n        <span className=\"relative inline-flex items-center justify-center size-6 shrink-0\">\n            {/* Outer ring */}\n            <span\n                className={cn(\n                    'absolute size-5 rounded-full border-2 transition-colors',\n                    selected\n                        ? 'border-[hsl(var(--secondary-600))]'\n                        : 'border-[hsl(var(--neutral-400))]'\n                )}\n            />\n            {/* Inner fill — only when selected */}\n            {selected && (\n                <span className=\"absolute size-[10px] rounded-full bg-[hsl(var(--secondary-600))]\" />\n            )}\n        </span>\n    );\n}\n\n// ─── RadioButton ──────────────────────────────────────────────────────────────\n\nexport function RadioButton({\n    className,\n    state = 'default',\n    label = 'LABEL',\n    showLabel = true,\n    blur = false,\n    onClick,\n}: RadioButtonProps) {\n    const isSelected = state === 'selected';\n\n    return (\n        <button\n            type=\"button\"\n            aria-pressed={isSelected}\n            onClick={onClick}\n            className={cn(\n                'inline-flex items-center gap-[var(--spacing-s,12px)] h-8 pl-3 pr-1 py-1 rounded-[16px] bg-white transition-colors shrink-0',\n                blur && !isSelected && 'backdrop-blur-[18.5px]',\n                className\n            )}\n        >\n            {showLabel && (\n                <span\n                    className={cn(\n                        'text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-medium,500)] whitespace-nowrap shrink-0 tracking-[0.02em] uppercase',\n                        isSelected\n                            ? 'text-[hsl(var(--secondary-600))]'\n                            : 'text-[hsl(var(--neutral-950))]'\n                    )}\n                >\n                    {label}\n                </span>\n            )}\n            <RadioDot selected={isSelected} />\n        </button>\n    );\n}\n\nexport default RadioButton;\n"
+      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type RadioButtonState = 'default' | 'selected';\n\nexport interface RadioButtonProps {\n    className?: string;\n    state?: RadioButtonState;\n    label?: string;\n    showLabel?: boolean;\n    /** Whether to apply backdrop-blur on default state (used when overlaid on images) */\n    blur?: boolean;\n    onClick?: () => void;\n}\n\n// ─── Radio dot indicator ──────────────────────────────────────────────────────\n// 24×24 container — outer ring + inner fill dot (only when selected)\nfunction RadioDot({ selected }: { selected: boolean }) {\n    return (\n        <span className=\"relative inline-flex items-center justify-center size-6 shrink-0\">\n            {/* Outer ring */}\n            <span\n                className={cn(\n                    'absolute size-5 rounded-full border-2 transition-colors',\n                    selected\n                        ? 'border-[hsl(var(--secondary-600))]'\n                        : 'border-[hsl(var(--neutral-400))]'\n                )}\n            />\n            {/* Inner fill — only when selected */}\n            {selected && (\n                <span className=\"absolute size-[10px] rounded-full bg-[hsl(var(--secondary-600))]\" />\n            )}\n        </span>\n    );\n}\n\n// ─── RadioButton ──────────────────────────────────────────────────────────────\n\nexport function RadioButton({\n    className,\n    state = 'default',\n    label = 'LABEL',\n    showLabel = true,\n    blur = false,\n    onClick,\n}: RadioButtonProps) {\n    const isSelected = state === 'selected';\n\n    return (\n        <button\n            type=\"button\"\n            aria-pressed={isSelected}\n            onClick={onClick}\n            className={cn(\n                'inline-flex items-center gap-[var(--spacing-xs4,8px)] h-8 pl-3 pr-1 py-1 rounded-[16px] bg-white transition-colors shrink-0',\n                blur && !isSelected && 'backdrop-blur-[18.5px]',\n                className\n            )}\n        >\n            {showLabel && (\n                <span\n                    className={cn(\n                        'text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-medium,500)] whitespace-nowrap shrink-0 tracking-[0.02em] uppercase',\n                        isSelected\n                            ? 'text-[hsl(var(--secondary-600))]'\n                            : 'text-[hsl(var(--neutral-950))]'\n                    )}\n                >\n                    {label}\n                </span>\n            )}\n            <RadioDot selected={isSelected} />\n        </button>\n    );\n}\n\nexport default RadioButton;\n"
     },
     {
       "path": "components/ui/sapient-multiple-choice-card.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\nimport { RadioButton } from './sapient-radio-button';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type MultipleChoiceCardStyle = 'image' | 'text';\nexport type MultipleChoiceCardSize = 'large' | 'small';\n\nexport interface MultipleChoiceCardProps {\n    className?: string;\n    style?: MultipleChoiceCardStyle;\n    size?: MultipleChoiceCardSize;\n    selected?: boolean;\n    label?: string;\n    /** Image URL — used when style=\"image\" */\n    imageSrc?: string;\n    imageAlt?: string;\n    /** Card title — used when style=\"text\" */\n    title?: string;\n    /** Card subtitle — used when style=\"text\" */\n    subtitle?: string;\n    onSelect?: () => void;\n}\n\n// ─── Placeholder image ────────────────────────────────────────────────────────\nconst PLACEHOLDER_IMAGE =\n    'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80';\n\n// ─── MultipleChoiceCard ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceCard({\n    className,\n    style = 'image',\n    size = 'large',\n    selected = false,\n    label = 'LABEL',\n    imageSrc = PLACEHOLDER_IMAGE,\n    imageAlt = '',\n    title = 'Card Title',\n    subtitle,\n    onSelect,\n}: MultipleChoiceCardProps) {\n    const isLarge = size === 'large';\n    const isSmall = size === 'small';\n    const isImage = style === 'image';\n    const isText = style === 'text';\n\n    const defaultSubtitle = isLarge\n        ? 'Subtitle on a single line of text'\n        : 'Subtitle on two\\nlines of text';\n\n    const resolvedSubtitle = subtitle ?? defaultSubtitle;\n\n    // ── Image Large: 353×141, landscape full-bleed, radio bottom-right ────────\n    if (isImage && isLarge) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-end justify-end overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[353px] h-[141px] p-[var(--spacing-m,16px)] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Full-bleed image */}\n                <img\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className=\"absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[var(--radius-token-lg,32px)]\"\n                />\n                {/* Dark overlay */}\n                <div className=\"absolute inset-0 bg-black/15 rounded-[var(--radius-token-lg,32px)] pointer-events-none\" />\n                {/* Radio pill — bottom-right */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    label={label}\n                    blur={!selected}\n                    className=\"relative z-10\"\n                />\n            </div>\n        );\n    }\n\n    // ── Image Small: 170×209, portrait full-bleed, radio bottom full-width ────\n    if (isImage && isSmall) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-start justify-end overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[170px] h-[209px] p-[var(--spacing-m,16px)] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Full-bleed image */}\n                <img\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className=\"absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[var(--radius-token-lg,32px)]\"\n                />\n                {/* Dark overlay */}\n                <div className=\"absolute inset-0 bg-black/15 rounded-[var(--radius-token-lg,32px)] pointer-events-none\" />\n                {/* Radio pill — bottom, full width */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    label={label}\n                    blur={!selected}\n                    className=\"relative z-10 w-full justify-between\"\n                />\n            </div>\n        );\n    }\n\n    // ── Text Large: 353×141, white bg, radio top-right, title+subtitle bottom ─\n    if (isText && isLarge) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-end justify-between overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[353px] h-[141px] p-[var(--spacing-m,16px)] bg-[hsl(var(--neutral-50))] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Radio dot only — top-right, no label */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    showLabel={false}\n                    className=\"bg-transparent p-0 h-auto\"\n                />\n                {/* Title + subtitle — bottom-left */}\n                <div className=\"flex flex-col gap-[var(--spacing-xs4,4px)] items-start w-full p-[var(--spacing-xs2,8px)]\">\n                    <p className=\"text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                        {title}\n                    </p>\n                    <p className=\"text-[16px] leading-[var(--leading-body,24px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-500))] w-full overflow-hidden text-ellipsis whitespace-nowrap\">\n                        {resolvedSubtitle}\n                    </p>\n                </div>\n            </div>\n        );\n    }\n\n    // ── Text Small: 170×209, white bg, radio top-right, title+subtitle bottom ─\n    return (\n        <div\n            className={cn(\n                'relative flex flex-col items-end justify-between overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[170px] h-[209px] p-[var(--spacing-m,16px)] bg-[hsl(var(--neutral-50))] cursor-pointer',\n                className\n            )}\n            onClick={onSelect}\n        >\n            {/* Radio dot only — top-right */}\n            <RadioButton\n                state={selected ? 'selected' : 'default'}\n                showLabel={false}\n                className=\"bg-transparent p-0 h-auto\"\n            />\n            {/* Title + subtitle — bottom-left */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs4,4px)] items-start w-full p-[var(--spacing-xs2,8px)]\">\n                <p className=\"text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                    {title}\n                </p>\n                <p className=\"text-[16px] leading-[var(--leading-body,24px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-500))] w-full whitespace-pre-wrap\">\n                    {resolvedSubtitle}\n                </p>\n            </div>\n        </div>\n    );\n}\n\nexport default MultipleChoiceCard;\n"
+      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\nimport { RadioButton } from './sapient-radio-button';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type MultipleChoiceCardStyle = 'image' | 'text';\nexport type MultipleChoiceCardSize = 'large' | 'small';\n\nexport interface MultipleChoiceCardProps {\n    className?: string;\n    style?: MultipleChoiceCardStyle;\n    size?: MultipleChoiceCardSize;\n    selected?: boolean;\n    label?: string;\n    /** Image URL — used when style=\"image\" */\n    imageSrc?: string;\n    imageAlt?: string;\n    /** Card title — used when style=\"text\" */\n    title?: string;\n    /** Card subtitle — used when style=\"text\" */\n    subtitle?: string;\n    onSelect?: () => void;\n}\n\n// ─── Placeholder image ────────────────────────────────────────────────────────\nconst PLACEHOLDER_IMAGE =\n    'https://images.unsplash.com/photo-1519681393784-d120267933ba?w=800&q=80';\n\n// ─── MultipleChoiceCard ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceCard({\n    className,\n    style = 'image',\n    size = 'large',\n    selected = false,\n    label = 'LABEL',\n    imageSrc = PLACEHOLDER_IMAGE,\n    imageAlt = '',\n    title = 'Card Title',\n    subtitle,\n    onSelect,\n}: MultipleChoiceCardProps) {\n    const isLarge = size === 'large';\n    const isSmall = size === 'small';\n    const isImage = style === 'image';\n    const isText = style === 'text';\n\n    const defaultSubtitle = isLarge\n        ? 'Subtitle on a single line of text'\n        : 'Subtitle on two\\nlines of text';\n\n    const resolvedSubtitle = subtitle ?? defaultSubtitle;\n\n    // ── Image Large: 353×141, landscape full-bleed, radio bottom-right ────────\n    if (isImage && isLarge) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-end justify-end overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[353px] h-[141px] p-[var(--spacing-xs3,16px)] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Full-bleed image */}\n                <img\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className=\"absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[var(--radius-token-lg,32px)]\"\n                />\n                {/* Dark overlay */}\n                <div className=\"absolute inset-0 bg-black/15 rounded-[var(--radius-token-lg,32px)] pointer-events-none\" />\n                {/* Radio pill — bottom-right */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    label={label}\n                    blur={!selected}\n                    className=\"relative z-10\"\n                />\n            </div>\n        );\n    }\n\n    // ── Image Small: 170×209, portrait full-bleed, radio bottom full-width ────\n    if (isImage && isSmall) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-start justify-end overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[170px] h-[209px] p-[var(--spacing-xs3,16px)] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Full-bleed image */}\n                <img\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className=\"absolute inset-0 w-full h-full object-cover pointer-events-none rounded-[var(--radius-token-lg,32px)]\"\n                />\n                {/* Dark overlay */}\n                <div className=\"absolute inset-0 bg-black/15 rounded-[var(--radius-token-lg,32px)] pointer-events-none\" />\n                {/* Radio pill — bottom, full width */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    label={label}\n                    blur={!selected}\n                    className=\"relative z-10 w-full justify-between\"\n                />\n            </div>\n        );\n    }\n\n    // ── Text Large: 353×141, white bg, radio top-right, title+subtitle bottom ─\n    if (isText && isLarge) {\n        return (\n            <div\n                className={cn(\n                    'relative flex flex-col items-end justify-between overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[353px] h-[141px] p-[var(--spacing-xs3,16px)] bg-[hsl(var(--neutral-50))] cursor-pointer',\n                    className\n                )}\n                onClick={onSelect}\n            >\n                {/* Radio dot only — top-right, no label */}\n                <RadioButton\n                    state={selected ? 'selected' : 'default'}\n                    showLabel={false}\n                    className=\"bg-transparent p-0 h-auto\"\n                />\n                {/* Title + subtitle — bottom-left */}\n                <div className=\"flex flex-col gap-[var(--spacing-xs5,4px)] items-start w-full p-[var(--spacing-xs4,8px)]\">\n                    <p className=\"text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                        {title}\n                    </p>\n                    <p className=\"text-[16px] leading-[var(--leading-body,24px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-500))] w-full overflow-hidden text-ellipsis whitespace-nowrap\">\n                        {resolvedSubtitle}\n                    </p>\n                </div>\n            </div>\n        );\n    }\n\n    // ── Text Small: 170×209, white bg, radio top-right, title+subtitle bottom ─\n    return (\n        <div\n            className={cn(\n                'relative flex flex-col items-end justify-between overflow-hidden rounded-[var(--radius-token-lg,32px)] w-[170px] h-[209px] p-[var(--spacing-xs3,16px)] bg-[hsl(var(--neutral-50))] cursor-pointer',\n                className\n            )}\n            onClick={onSelect}\n        >\n            {/* Radio dot only — top-right */}\n            <RadioButton\n                state={selected ? 'selected' : 'default'}\n                showLabel={false}\n                className=\"bg-transparent p-0 h-auto\"\n            />\n            {/* Title + subtitle — bottom-left */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs5,4px)] items-start w-full p-[var(--spacing-xs4,8px)]\">\n                <p className=\"text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap\">\n                    {title}\n                </p>\n                <p className=\"text-[16px] leading-[var(--leading-body,24px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-500))] w-full whitespace-pre-wrap\">\n                    {resolvedSubtitle}\n                </p>\n            </div>\n        </div>\n    );\n}\n\nexport default MultipleChoiceCard;\n"
     }
   ]
 }

package/local-registry/r/multiple-choice-grid.json

@@ -55,7 +55,7 @@
     {
       "path": "components/ui/sapient-multiple-choice-grid.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport { MultipleChoiceCard } from './sapient-multiple-choice-card';\nimport type { MultipleChoiceOption } from './sapient-multiple-choice-list';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface MultipleChoiceGridProps {\n    className?: string;\n    /** Options for left column (top-aligned) */\n    leftOptions?: MultipleChoiceOption[];\n    /** Options for right column (offset down by 40px) */\n    rightOptions?: MultipleChoiceOption[];\n    /** Initially selected option id */\n    defaultSelected?: string;\n    onChange?: (selectedId: string) => void;\n}\n\n// ─── Default options ──────────────────────────────────────────────────────────\nconst DEFAULT_LEFT: MultipleChoiceOption[] = [\n    { id: '1', label: 'LABEL' },\n    { id: '3', label: 'LABEL' },\n];\nconst DEFAULT_RIGHT: MultipleChoiceOption[] = [\n    { id: '2', label: 'LABEL' },\n    { id: '4', label: 'LABEL' },\n];\n\n// ─── MultipleChoiceGrid ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceGrid({\n    className,\n    leftOptions = DEFAULT_LEFT,\n    rightOptions = DEFAULT_RIGHT,\n    defaultSelected,\n    onChange,\n}: MultipleChoiceGridProps) {\n    // Default selects the first right-column item (matches Figma — right col first card selected)\n    const [selected, setSelected] = useState<string | undefined>(\n        defaultSelected ?? rightOptions[0]?.id\n    );\n\n    const handleSelect = (id: string) => {\n        setSelected(id);\n        onChange?.(id);\n    };\n\n    return (\n        <div\n            className={cn(\n                'flex gap-[var(--spacing-m,16px)] items-start',\n                className\n            )}\n        >\n            {/* Left column — starts at top */}\n            <div className=\"flex flex-col gap-[var(--spacing-m,16px)] items-start w-[170px]\">\n                {leftOptions.map((option) => (\n                    <MultipleChoiceCard\n                        key={option.id}\n                        style=\"image\"\n                        size=\"small\"\n                        selected={selected === option.id}\n                        label={option.label}\n                        imageSrc={option.imageSrc}\n                        imageAlt={option.imageAlt}\n                        onSelect={() => handleSelect(option.id)}\n                        className=\"w-full\"\n                    />\n                ))}\n            </div>\n\n            {/* Right column — offset down by 40px (masonry effect from Figma) */}\n            <div className=\"flex flex-col gap-[var(--spacing-m,16px)] items-start w-[170px] pt-10\">\n                {rightOptions.map((option) => (\n                    <MultipleChoiceCard\n                        key={option.id}\n                        style=\"image\"\n                        size=\"small\"\n                        selected={selected === option.id}\n                        label={option.label}\n                        imageSrc={option.imageSrc}\n                        imageAlt={option.imageAlt}\n                        onSelect={() => handleSelect(option.id)}\n                        className=\"w-full\"\n                    />\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport default MultipleChoiceGrid;\n"
+      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport { MultipleChoiceCard } from './sapient-multiple-choice-card';\nimport type { MultipleChoiceOption } from './sapient-multiple-choice-list';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface MultipleChoiceGridProps {\n    className?: string;\n    /** Options for left column (top-aligned) */\n    leftOptions?: MultipleChoiceOption[];\n    /** Options for right column (offset down by 40px) */\n    rightOptions?: MultipleChoiceOption[];\n    /** Initially selected option id */\n    defaultSelected?: string;\n    onChange?: (selectedId: string) => void;\n}\n\n// ─── Default options ──────────────────────────────────────────────────────────\nconst DEFAULT_LEFT: MultipleChoiceOption[] = [\n    { id: '1', label: 'LABEL' },\n    { id: '3', label: 'LABEL' },\n];\nconst DEFAULT_RIGHT: MultipleChoiceOption[] = [\n    { id: '2', label: 'LABEL' },\n    { id: '4', label: 'LABEL' },\n];\n\n// ─── MultipleChoiceGrid ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceGrid({\n    className,\n    leftOptions = DEFAULT_LEFT,\n    rightOptions = DEFAULT_RIGHT,\n    defaultSelected,\n    onChange,\n}: MultipleChoiceGridProps) {\n    // Default selects the first right-column item (matches Figma — right col first card selected)\n    const [selected, setSelected] = useState<string | undefined>(\n        defaultSelected ?? rightOptions[0]?.id\n    );\n\n    const handleSelect = (id: string) => {\n        setSelected(id);\n        onChange?.(id);\n    };\n\n    return (\n        <div\n            className={cn(\n                'flex gap-[var(--spacing-xs3,16px)] items-start',\n                className\n            )}\n        >\n            {/* Left column — starts at top */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs3,16px)] items-start w-[170px]\">\n                {leftOptions.map((option) => (\n                    <MultipleChoiceCard\n                        key={option.id}\n                        style=\"image\"\n                        size=\"small\"\n                        selected={selected === option.id}\n                        label={option.label}\n                        imageSrc={option.imageSrc}\n                        imageAlt={option.imageAlt}\n                        onSelect={() => handleSelect(option.id)}\n                        className=\"w-full\"\n                    />\n                ))}\n            </div>\n\n            {/* Right column — offset down by 40px (masonry effect from Figma) */}\n            <div className=\"flex flex-col gap-[var(--spacing-xs3,16px)] items-start w-[170px] pt-[var(--spacing-s,40px)]\">\n                {rightOptions.map((option) => (\n                    <MultipleChoiceCard\n                        key={option.id}\n                        style=\"image\"\n                        size=\"small\"\n                        selected={selected === option.id}\n                        label={option.label}\n                        imageSrc={option.imageSrc}\n                        imageAlt={option.imageAlt}\n                        onSelect={() => handleSelect(option.id)}\n                        className=\"w-full\"\n                    />\n                ))}\n            </div>\n        </div>\n    );\n}\n\nexport default MultipleChoiceGrid;\n"
     }
   ],
   "registryDependencies": [

package/local-registry/r/multiple-choice-list.json

@@ -55,7 +55,7 @@
     {
       "path": "components/ui/sapient-multiple-choice-list.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport { MultipleChoiceCard } from './sapient-multiple-choice-card';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface MultipleChoiceOption {\n    id: string;\n    label?: string;\n    imageSrc?: string;\n    imageAlt?: string;\n    title?: string;\n    subtitle?: string;\n}\n\nexport interface MultipleChoiceListProps {\n    className?: string;\n    options?: MultipleChoiceOption[];\n    /** Initially selected option id */\n    defaultSelected?: string;\n    onChange?: (selectedId: string) => void;\n}\n\n// ─── Default options ──────────────────────────────────────────────────────────\nconst DEFAULT_OPTIONS: MultipleChoiceOption[] = [\n    { id: '1', label: 'LABEL' },\n    { id: '2', label: 'LABEL' },\n    { id: '3', label: 'LABEL' },\n];\n\n// ─── MultipleChoiceList ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceList({\n    className,\n    options = DEFAULT_OPTIONS,\n    defaultSelected,\n    onChange,\n}: MultipleChoiceListProps) {\n    const [selected, setSelected] = useState<string | undefined>(\n        defaultSelected ?? options[0]?.id\n    );\n\n    const handleSelect = (id: string) => {\n        setSelected(id);\n        onChange?.(id);\n    };\n\n    return (\n        <div\n            className={cn(\n                'flex flex-col gap-[var(--spacing-m,16px)] items-start w-[353px]',\n                className\n            )}\n        >\n            {options.map((option) => (\n                <MultipleChoiceCard\n                    key={option.id}\n                    style=\"image\"\n                    size=\"large\"\n                    selected={selected === option.id}\n                    label={option.label}\n                    imageSrc={option.imageSrc}\n                    imageAlt={option.imageAlt}\n                    onSelect={() => handleSelect(option.id)}\n                    className=\"w-full\"\n                />\n            ))}\n        </div>\n    );\n}\n\nexport default MultipleChoiceList;\n"
+      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { cn } from '@/lib/utils';\nimport { MultipleChoiceCard } from './sapient-multiple-choice-card';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport interface MultipleChoiceOption {\n    id: string;\n    label?: string;\n    imageSrc?: string;\n    imageAlt?: string;\n    title?: string;\n    subtitle?: string;\n}\n\nexport interface MultipleChoiceListProps {\n    className?: string;\n    options?: MultipleChoiceOption[];\n    /** Initially selected option id */\n    defaultSelected?: string;\n    onChange?: (selectedId: string) => void;\n}\n\n// ─── Default options ──────────────────────────────────────────────────────────\nconst DEFAULT_OPTIONS: MultipleChoiceOption[] = [\n    { id: '1', label: 'LABEL' },\n    { id: '2', label: 'LABEL' },\n    { id: '3', label: 'LABEL' },\n];\n\n// ─── MultipleChoiceList ───────────────────────────────────────────────────────\n\nexport function MultipleChoiceList({\n    className,\n    options = DEFAULT_OPTIONS,\n    defaultSelected,\n    onChange,\n}: MultipleChoiceListProps) {\n    const [selected, setSelected] = useState<string | undefined>(\n        defaultSelected ?? options[0]?.id\n    );\n\n    const handleSelect = (id: string) => {\n        setSelected(id);\n        onChange?.(id);\n    };\n\n    return (\n        <div\n            className={cn(\n                'flex flex-col gap-[var(--spacing-xs3,16px)] items-start w-[353px]',\n                className\n            )}\n        >\n            {options.map((option) => (\n                <MultipleChoiceCard\n                    key={option.id}\n                    style=\"image\"\n                    size=\"large\"\n                    selected={selected === option.id}\n                    label={option.label}\n                    imageSrc={option.imageSrc}\n                    imageAlt={option.imageAlt}\n                    onSelect={() => handleSelect(option.id)}\n                    className=\"w-full\"\n                />\n            ))}\n        </div>\n    );\n}\n\nexport default MultipleChoiceList;\n"
     }
   ],
   "registryDependencies": [

package/local-registry/r/news-card.json

@@ -55,7 +55,7 @@
     {
       "path": "components/ui/sapient-news-card.tsx",
       "type": "registry:ui",
-      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type NewsCardOrientation = 'vertical' | 'horizontal';\nexport type NewsCardState = 'enabled' | 'hover';\n\nexport interface NewsCardProps {\n    className?: string;\n    /** Image URL for the card thumbnail */\n    imageSrc?: string;\n    imageAlt?: string;\n    /** Small badge shown above roofline. Violet pill with a live \"blink\" dot. */\n    showBadge?: boolean;\n    badgeLabel?: string;\n    /** Category / section label above the headline */\n    roofline?: string;\n    headline?: string;\n    showBody?: boolean;\n    body?: string;\n    datePosted?: string;\n    /** Wraps content in a white card surface with rounded corners */\n    background?: boolean;\n    orientation?: NewsCardOrientation;\n    state?: NewsCardState;\n}\n\n// ─── Blink Badge ──────────────────────────────────────────────────────────────\n// Matches the Figma \"Badge\" – violet pill with animated dot + label text.\nfunction BlinkBadge({ label = 'Label' }: { label?: string }) {\n    return (\n        <div className=\"inline-flex items-center gap-[var(--spacing-xs4,4px)] h-5 px-[var(--spacing-xs2,8px)] rounded-[var(--radius-token-full,100px)] bg-[hsl(var(--secondary-600))] shrink-0\">\n            {/* Blink dot */}\n            <span className=\"relative flex items-center justify-center size-3 shrink-0\">\n                <span className=\"absolute inline-flex size-[9.6px] rounded-full bg-[hsl(var(--secondary-300))] opacity-75 animate-ping\" />\n                <span className=\"relative inline-flex size-[4px] rounded-full bg-white\" />\n            </span>\n            <span className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-white whitespace-nowrap\">\n                {label}\n            </span>\n        </div>\n    );\n}\n\n// ─── Card Image ───────────────────────────────────────────────────────────────\nfunction CardImage({\n    src,\n    alt = '',\n    className,\n}: {\n    src: string;\n    alt?: string;\n    className?: string;\n}) {\n    return (\n        <div className={cn('relative overflow-hidden shrink-0', className)}>\n            <img\n                src={src}\n                alt={alt}\n                className=\"absolute inset-0 w-full h-full object-cover\"\n            />\n        </div>\n    );\n}\n\n// ─── NewsCard ─────────────────────────────────────────────────────────────────\n\nconst PLACEHOLDER_IMAGE =\n    'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&q=80';\n\nexport function NewsCard({\n    className,\n    imageSrc = PLACEHOLDER_IMAGE,\n    imageAlt = '',\n    showBadge = true,\n    badgeLabel = 'Label',\n    roofline = 'Roofline',\n    headline = 'Headline lorem ipsum dolor sit amet, consectetur adipiscing elit',\n    showBody = true,\n    body = 'Body lorem ipsum dolor sit amet, consectetur adipiscing elit',\n    datePosted = '1 Jan 2026',\n    background = false,\n    orientation = 'vertical',\n    state = 'enabled',\n}: NewsCardProps) {\n    const isHover = state === 'hover';\n    const isVertical = orientation === 'vertical';\n    const isHorizontal = orientation === 'horizontal';\n\n    // Headline color: teal accent on hover, neutral-950 on enabled\n    const headlineColor = isHover\n        ? 'text-[hsl(var(--foreground-strong))]'\n        : 'text-[hsl(var(--neutral-950))]';\n\n    // ── VERTICAL ─────────────────────────────────────────────────────────────\n    if (isVertical) {\n        return (\n            <div\n                className={cn(\n                    'flex flex-col items-start w-[256px]',\n                    background && 'overflow-hidden rounded-[var(--radius-token-lg,32px)]',\n                    className\n                )}\n            >\n                {/* Image – full width, rounded top if no background, fully clipped if background */}\n                <CardImage\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className={cn(\n                        'w-full h-[192px]',\n                        !background && 'rounded-[var(--radius-token-lg,32px)]'\n                    )}\n                />\n\n                {/* Text container */}\n                <div\n                    className={cn(\n                        'flex flex-col items-start w-full shrink-0',\n                        background\n                            ? 'bg-white gap-[var(--spacing-s,12px)] p-[var(--spacing-m,16px)]'\n                            : 'gap-[var(--spacing-s,12px)] py-[var(--spacing-m,16px)]'\n                    )}\n                >\n                    {/* Subtitle row: badge + roofline */}\n                    <div className=\"flex flex-col items-start gap-[var(--spacing-xs2,8px)] w-full shrink-0\">\n                        {showBadge && <BlinkBadge label={badgeLabel} />}\n                        <p\n                            className={cn(\n                                'text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] w-full shrink-0 whitespace-pre-wrap',\n                                background\n                                    ? 'font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))]'\n                                    : 'font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))]'\n                            )}\n                        >\n                            {roofline}\n                        </p>\n                    </div>\n\n                    {/* Headline + body */}\n                    <div className=\"flex flex-col gap-[var(--spacing-xs2,8px)] items-start w-full shrink-0\">\n                        <p\n                            className={cn(\n                                'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] w-full overflow-hidden',\n                                headlineColor\n                            )}\n                        >\n                            {headline}\n                        </p>\n                        {showBody && (\n                            <p className=\"text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-600))] max-h-[44px] overflow-hidden w-full\">\n                                {body}\n                            </p>\n                        )}\n                    </div>\n\n                    {/* Date */}\n                    <p className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap shrink-0\">\n                        {datePosted}\n                    </p>\n                </div>\n            </div>\n        );\n    }\n\n    // ── HORIZONTAL ───────────────────────────────────────────────────────────\n    return (\n        <div\n            className={cn(\n                'flex items-stretch w-[441px]',\n                background\n                    ? 'overflow-hidden rounded-[var(--radius-token-md,16px)]'\n                    : 'flex-row',\n                // For non-background enabled: image on right, row layout\n                // For hover / background: always row\n                className\n            )}\n        >\n            {/* Text container – left side */}\n            <div\n                className={cn(\n                    'flex flex-col flex-1 min-w-0 gap-[var(--spacing-xs2,8px)] justify-center py-[var(--spacing-xs2,8px)]',\n                    background\n                        ? 'bg-white px-[var(--spacing-m,16px)]'\n                        : 'pr-[var(--spacing-m,16px)]'\n                )}\n            >\n                {/* Subtitle row: badge + roofline inline */}\n                <div className=\"flex items-center gap-[var(--spacing-xs2,8px)] w-full shrink-0\">\n                    {showBadge && <BlinkBadge label={badgeLabel} />}\n                    <p className=\"flex-1 min-w-0 text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] overflow-hidden text-ellipsis whitespace-pre-wrap max-h-5\">\n                        {roofline}\n                    </p>\n                </div>\n\n                {/* Headline */}\n                <p\n                    className={cn(\n                        'text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-medium,500)] overflow-hidden text-ellipsis w-full whitespace-pre-wrap shrink-0',\n                        headlineColor\n                    )}\n                >\n                    {headline}\n                </p>\n\n                {/* Date */}\n                <p className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap shrink-0\">\n                    {datePosted}\n                </p>\n            </div>\n\n            {/* Image – right side, fixed size */}\n            <CardImage\n                src={imageSrc}\n                alt={imageAlt}\n                className={cn(\n                    'w-[160px] h-[116px] shrink-0',\n                    !background && 'rounded-[var(--radius-token-sm,8px)]'\n                )}\n            />\n        </div>\n    );\n}\n\nexport default NewsCard;\n"
+      "content": "'use client';\n\nimport React from 'react';\nimport { cn } from '@/lib/utils';\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type NewsCardOrientation = 'vertical' | 'horizontal';\nexport type NewsCardState = 'enabled' | 'hover';\n\nexport interface NewsCardProps {\n    className?: string;\n    /** Image URL for the card thumbnail */\n    imageSrc?: string;\n    imageAlt?: string;\n    /** Small badge shown above roofline. Violet pill with a live \"blink\" dot. */\n    showBadge?: boolean;\n    badgeLabel?: string;\n    /** Category / section label above the headline */\n    roofline?: string;\n    headline?: string;\n    showBody?: boolean;\n    body?: string;\n    datePosted?: string;\n    /** Wraps content in a white card surface with rounded corners */\n    background?: boolean;\n    orientation?: NewsCardOrientation;\n    state?: NewsCardState;\n}\n\n// ─── Blink Badge ──────────────────────────────────────────────────────────────\n// Matches the Figma \"Badge\" – violet pill with animated dot + label text.\nfunction BlinkBadge({ label = 'Label' }: { label?: string }) {\n    return (\n        <div className=\"inline-flex items-center gap-[var(--spacing-xs5,4px)] h-5 px-[var(--spacing-xs4,8px)] rounded-[var(--radius-token-full,100px)] bg-[hsl(var(--secondary-600))] shrink-0\">\n            {/* Blink dot */}\n            <span className=\"relative flex items-center justify-center size-3 shrink-0\">\n                <span className=\"absolute inline-flex size-[9.6px] rounded-full bg-[hsl(var(--secondary-300))] opacity-75 animate-ping\" />\n                <span className=\"relative inline-flex size-[4px] rounded-full bg-white\" />\n            </span>\n            <span className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-white whitespace-nowrap\">\n                {label}\n            </span>\n        </div>\n    );\n}\n\n// ─── Card Image ───────────────────────────────────────────────────────────────\nfunction CardImage({\n    src,\n    alt = '',\n    className,\n}: {\n    src: string;\n    alt?: string;\n    className?: string;\n}) {\n    return (\n        <div className={cn('relative overflow-hidden shrink-0', className)}>\n            <img\n                src={src}\n                alt={alt}\n                className=\"absolute inset-0 w-full h-full object-cover\"\n            />\n        </div>\n    );\n}\n\n// ─── NewsCard ─────────────────────────────────────────────────────────────────\n\nconst PLACEHOLDER_IMAGE =\n    'https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=600&q=80';\n\nexport function NewsCard({\n    className,\n    imageSrc = PLACEHOLDER_IMAGE,\n    imageAlt = '',\n    showBadge = true,\n    badgeLabel = 'Label',\n    roofline = 'Roofline',\n    headline = 'Headline lorem ipsum dolor sit amet, consectetur adipiscing elit',\n    showBody = true,\n    body = 'Body lorem ipsum dolor sit amet, consectetur adipiscing elit',\n    datePosted = '1 Jan 2026',\n    background = false,\n    orientation = 'vertical',\n    state = 'enabled',\n}: NewsCardProps) {\n    const isHover = state === 'hover';\n    const isVertical = orientation === 'vertical';\n    const isHorizontal = orientation === 'horizontal';\n\n    // Headline color: teal accent on hover, neutral-950 on enabled\n    const headlineColor = isHover\n        ? 'text-[hsl(var(--foreground-strong))]'\n        : 'text-[hsl(var(--neutral-950))]';\n\n    // ── VERTICAL ─────────────────────────────────────────────────────────────\n    if (isVertical) {\n        return (\n            <div\n                className={cn(\n                    'flex flex-col items-start w-[256px]',\n                    background && 'overflow-hidden rounded-[var(--radius-token-lg,32px)]',\n                    className\n                )}\n            >\n                {/* Image – full width, rounded top if no background, fully clipped if background */}\n                <CardImage\n                    src={imageSrc}\n                    alt={imageAlt}\n                    className={cn(\n                        'w-full h-[192px]',\n                        !background && 'rounded-[var(--radius-token-lg,32px)]'\n                    )}\n                />\n\n                {/* Text container */}\n                <div\n                    className={cn(\n                        'flex flex-col items-start w-full shrink-0',\n                        background\n                            ? 'bg-white gap-[var(--spacing-xs3,16px)] p-[var(--spacing-xs3,16px)]'\n                            : 'gap-[var(--spacing-xs3,16px)] py-[var(--spacing-xs3,16px)]'\n                    )}\n                >\n                    {/* Subtitle row: badge + roofline */}\n                    <div className=\"flex flex-col items-start gap-[var(--spacing-xs4,8px)] w-full shrink-0\">\n                        {showBadge && <BlinkBadge label={badgeLabel} />}\n                        <p\n                            className={cn(\n                                'text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] w-full shrink-0 whitespace-pre-wrap',\n                                background\n                                    ? 'font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))]'\n                                    : 'font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))]'\n                            )}\n                        >\n                            {roofline}\n                        </p>\n                    </div>\n\n                    {/* Headline + body */}\n                    <div className=\"flex flex-col gap-[var(--spacing-xs4,8px)] items-start w-full shrink-0\">\n                        <p\n                            className={cn(\n                                'text-[length:var(--text-subheading,20px)] leading-[var(--leading-subheading,24px)] font-[var(--font-weight-medium,500)] w-full overflow-hidden',\n                                headlineColor\n                            )}\n                        >\n                            {headline}\n                        </p>\n                        {showBody && (\n                            <p className=\"text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-600))] max-h-[44px] overflow-hidden w-full\">\n                                {body}\n                            </p>\n                        )}\n                    </div>\n\n                    {/* Date */}\n                    <p className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap shrink-0\">\n                        {datePosted}\n                    </p>\n                </div>\n            </div>\n        );\n    }\n\n    // ── HORIZONTAL ───────────────────────────────────────────────────────────\n    return (\n        <div\n            className={cn(\n                'flex items-stretch w-[441px]',\n                background\n                    ? 'overflow-hidden rounded-[var(--radius-token-md,16px)]'\n                    : 'flex-row',\n                // For non-background enabled: image on right, row layout\n                // For hover / background: always row\n                className\n            )}\n        >\n            {/* Text container – left side */}\n            <div\n                className={cn(\n                    'flex flex-col flex-1 min-w-0 gap-[var(--spacing-xs4,8px)] justify-center py-[var(--spacing-xs4,8px)]',\n                    background\n                        ? 'bg-white px-[var(--spacing-xs3,16px)]'\n                        : 'pr-[var(--spacing-xs3,16px)]'\n                )}\n            >\n                {/* Subtitle row: badge + roofline inline */}\n                <div className=\"flex items-center gap-[var(--spacing-xs4,8px)] w-full shrink-0\">\n                    {showBadge && <BlinkBadge label={badgeLabel} />}\n                    <p className=\"flex-1 min-w-0 text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-medium,500)] text-[hsl(var(--neutral-950))] overflow-hidden text-ellipsis whitespace-pre-wrap max-h-5\">\n                        {roofline}\n                    </p>\n                </div>\n\n                {/* Headline */}\n                <p\n                    className={cn(\n                        'text-[length:var(--text-body-small,14px)] leading-[var(--leading-body-small,22px)] font-[var(--font-weight-medium,500)] overflow-hidden text-ellipsis w-full whitespace-pre-wrap shrink-0',\n                        headlineColor\n                    )}\n                >\n                    {headline}\n                </p>\n\n                {/* Date */}\n                <p className=\"text-[length:var(--text-label,12px)] leading-[var(--leading-label,18px)] font-[var(--font-weight-regular,400)] text-[hsl(var(--neutral-950))] w-full whitespace-pre-wrap shrink-0\">\n                    {datePosted}\n                </p>\n            </div>\n\n            {/* Image – right side, fixed size */}\n            <CardImage\n                src={imageSrc}\n                alt={imageAlt}\n                className={cn(\n                    'w-[160px] h-[116px] shrink-0',\n                    !background && 'rounded-[var(--radius-token-sm,8px)]'\n                )}\n            />\n        </div>\n    );\n}\n\nexport default NewsCard;\n"
     }
   ]
 }