4e: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f: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/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:Ta2d,import { cva, type VariantProps } from "class-variance-authority"; import Image from "next/image"; import { cn } from "../../../lib/utils"; import styles from "./card.module.css"; const cardVariants = cva(styles.card, { variants: { variant: { default: "", lift: styles.cardLift, }, }, defaultVariants: { variant: "default", }, }); function Card({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps) { return

; } function CardHeader({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardTitle({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardDescription({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardContent({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardImage({ className, src, alt, ...props }: { className?: string; src: string; alt: string; } & Omit, "src" | "alt" | "width" | "height" | "children">) { return ( {alt}

); } function CardImageContent({ className, ...props }: React.ComponentProps<"div">) { return

; } function CardIcon({ className, children, ...props }: React.ComponentProps<"div">) { return (

{children}

); } function CardAction({ className, ...props }: React.ComponentProps<"div">) { return

; } export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardIcon, CardImage, CardImageContent, CardTitle, }; 51:Tce9,.card { border-radius: var(--radius); color: var(--foreground); display: flex; flex-direction: column; gap: 1.5rem; padding: 1.5rem; background-color: oklch(from var(--card) l c h / 0.3); border: none; position: relative; justify-content: space-between; box-shadow: 0 0 0 1px oklch(from var(--border) l c h / 0.5), var(--shadow-border-stack); } .header { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem; align-items: center; max-width: 100%; } .title { font-size: 1.25rem; font-weight: 500; line-height: 1; letter-spacing: -0.025em; margin: 0; } .description { font-size: 0.875rem; line-height: 1.25rem; color: var(--muted-foreground); margin: 0; grid-column: 1 / -1; white-space: unset; } .content { display: flex; flex-direction: column; gap: 0.75rem; } .cardLift { overflow: hidden; padding-bottom: 0; gap: 0; } .cardLift .content { padding: 1.5rem 1.5rem 2rem; transition: transform 0.25s var(--ease-in-out-quad); background-color: var(--mix-card-33-bg); width: calc(100% + 3rem); margin: 0 -1.5rem; } .textContent { display: flex; flex-direction: column; gap: 0.375rem; } .footer { display: flex; align-items: center; } .image { width: calc(100% + 3rem); margin: -1.5rem -1.5rem 0; object-fit: cover; height: 300px; aspect-ratio: 16 / 9; transition: transform 0.25s var(--ease-in-out-quad); border-radius: var(--radius) var(--radius) 0 0; max-width: 100vw; box-sizing: border-box; } .cardLift .footer { opacity: 0; transition: opacity 0.25s var(--ease-in-out-quad), transform 0.25s var(--ease-in-out-quad); position: absolute; bottom: 0; left: 1.5rem; right: 1.5rem; } .cardLift:hover .content { transform: translateY(-2rem); } .cardLift:hover .footer { opacity: 1; transform: translateY(-1rem); } .cardLift:hover .image { transform: scale(1.04); } @media (max-width: 768px) { .image { width: 100%; margin: -1.5rem 0 0; max-width: none; height: 250px; } .cardLift .image { margin-left: -1.5rem; margin-right: -1.5rem; width: calc(100% + 3rem); } } .imageContent { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(transparent, rgba(0, 0, 0, 0.6)); color: white; } .default { background-color: var(--background-muted); } .icon { background-color: var(--muted); border-radius: var(--radius); border: none; box-shadow: 0 0 0 1px oklch(from var(--border) l c h / 0.5), 0 1px 2px oklch(from var(--foreground) l c h / 0.04), inset 0 0 0 1px oklch(from var(--background) l c h / 0.02); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; padding: 6px; margin-bottom: 1.125rem; width: 32px; height: 32px; } .action { grid-column: 2; grid-row: 1; align-self: start; justify-self: end; } @media (max-width: 640px) { .card { padding: 1.25rem; gap: 1.25rem; } .title { font-size: 1.125rem; } .description { font-size: 0.9375rem; line-height: 1.5; } .content { font-size: 0.9375rem; line-height: 1.5; } .icon { width: 28px; height: 28px; margin-bottom: 1rem; } } 4d:["$","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","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority"}]]}]}]]}],["$","$L4e",null,{"namespace":"@roiui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/brook/ui/card/card.tsx","content":"$50","type":"registry:file","target":"~/components/ui/card/card.tsx"},{"path":"registry/brook/ui/card/card.module.css","content":"$51","type":"registry:file","target":"~/components/ui/card/card.module.css"}],"className":"h-[70svh] min-h-80"}]]}]