4a:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4b:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4c:T1d33,"use client" import { BookOpenIcon, type LucideIcon } from "lucide-react" import { cn } from "@/lib/utils" import { forwardRef, type ReactNode, type KeyboardEvent } from "react" type SizePreset = "sm" | "md" | "lg" | "xl" interface SizeTokens { /** Tailwind width class for the card */ width: string /** Tailwind height class for the card */ height: string /** Tailwind text-size class for the title */ titleText: string /** Tailwind text-size class for the label */ labelText: string /** Tailwind padding class for the inner content */ padding: string /** Tailwind w/h classes for the label icon */ iconSize: string /** Tailwind text class for the spine text */ spineTextSize: string /** Tailwind gap for label row */ labelGap: string /** Tailwind margin-bottom for label row */ labelMb: string } const SIZE_MAP: Record = { sm: { width: "w-48", height: "h-64", titleText: "text-xl", labelText: "text-[11px]", padding: "p-3", iconSize: "w-3.5 h-3.5", spineTextSize: "text-[10px]", labelGap: "gap-1", labelMb: "mb-2", }, md: { width: "w-60", height: "h-80", titleText: "text-2xl", labelText: "text-xs", padding: "p-4", iconSize: "w-3.5 h-3.5", spineTextSize: "text-xs", labelGap: "gap-1.5", labelMb: "mb-2.5", }, lg: { width: "w-72", height: "h-100", titleText: "text-3xl", labelText: "text-xs", padding: "p-5", iconSize: "w-4 h-4", spineTextSize: "text-sm", labelGap: "gap-1.5", labelMb: "mb-3", }, xl: { width: "w-80", height: "h-[28rem]", titleText: "text-4xl", labelText: "text-xs", padding: "p-6", iconSize: "w-5 h-5", spineTextSize: "text-sm", labelGap: "gap-2", labelMb: "mb-4", }, } interface FlipCardProps { /** Label text shown above the title */ label?: string /** Icon component rendered next to the label */ icon?: LucideIcon /** Main title / heading content */ title?: ReactNode /** Text on the spine tab revealed on hover */ spineText?: string /** Accent color preset or custom Tailwind classes — presets: "red" | "blue" | "green" | "purple" | "orange" | "amber" | "teal" */ accentColor?: string /** Additional className applied to the root container */ className?: string /** Callback fired when the card is clicked */ onClick?: () => void /** * Size preset that controls card dimensions, text, padding, and spine proportionally. * @default "lg" */ size?: SizePreset /** Optional debug label shown on the shadow layer */ shadowLabel?: string } const ACCENT_BG: Record = { red: "bg-[#b1121f]", blue: "bg-[#0077b6]", green: "bg-green-600", purple: "bg-[#59168b]", orange: "bg-orange-600", amber: "bg-amber-600", teal: "bg-teal-600", } as const const ACCENT_TEXT: Record = { red: "text-red-700", blue: "text-sky-700", green: "text-green-700", purple: "text-fuchsia-700", orange: "text-orange-700", amber: "text-amber-700", teal: "text-teal-700", } as const const DEFAULT_TITLE = ( <> Build a scalable Component Library that cut development time by{" "} 50% across Three Design Teams ) export const FlipCard = forwardRef( ( { label = "Case Study", icon: Icon = BookOpenIcon, title = DEFAULT_TITLE, spineText = "click to read", accentColor = "red", className, onClick, size = "lg", shadowLabel, }, ref, ) => { const tokens = SIZE_MAP[size] const spineBg = ACCENT_BG[accentColor] ?? accentColor const titleText = ACCENT_TEXT[accentColor] ?? accentColor const handleKeyDown = (e: KeyboardEvent) => { if (onClick && (e.key === "Enter" || e.key === " ")) { e.preventDefault() onClick() } } return (

{/* Shadow layer */}

{shadowLabel && (

{shadowLabel}

)}

{/* Spine tab */}

{spineText}

{/* Main card face */}

{label}

{title}

) }, ) FlipCard.displayName = "FlipCard"49:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4a",null,{"namespace":"@knot-ui","registryDependencies":["utils"]}]]}],null]}],["$","$L4b",null,{"files":[{"path":"components/library/flip-card.tsx","content":"$4c","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]