4f: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"] 50: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"] 51:T1c1c,"use client"; import { Dialog } from "@base-ui/react/dialog"; import { ScrollArea } from "@base-ui/react/scroll-area"; import { Plus, X } from "lucide-react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useState } from "react"; import { cn } from "../../../lib/utils"; import styles from "./expandable-card.module.css"; type ExpandableCardItem = { id: string | number; imageSrc: string; alt: string; cardHeading: string; content?: React.ReactNode; }; type ExpandableCardProps = { item: ExpandableCardItem; className?: string; }; function ExpandableCard({ item, className }: ExpandableCardProps) { const [isOpen, setIsOpen] = useState(false); const [isElevated, setIsElevated] = useState(false); const prefersReducedMotion = useReducedMotion(); return (

{ setIsOpen(open); if (open) { setIsElevated(true); } }} open={isOpen} > {isOpen ? ( {isOpen ? (

) : null} { if (!isOpen) { setIsElevated(false); } }} style={{ borderRadius: "24px" }} /> } >

{item.cardHeading}

); } export { ExpandableCard }; export type { ExpandableCardItem, ExpandableCardProps }; 52:T1900,.wrapper { position: relative; width: fit-content; height: fit-content; } .overlay { position: fixed; min-height: 100dvh; z-index: 101; inset: 0; background-color: var(--background); } .card { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; width: 320px; overflow: hidden; position: relative; } .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 0.5px oklch(from var(--border) l c h / 0.7); pointer-events: none; } .card:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .image { width: 100%; height: 320px; object-fit: cover; } .heading { font-size: var(--font-size-2xl); font-weight: 500; color: var(--secondary-foreground); margin: 0; transition: color 150ms ease-out; line-height: 1.5; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card:hover .heading { color: var(--foreground); } .modalPositioner { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; pointer-events: none; overflow-y: auto; max-height: 100%; } .expandedCard { position: fixed; top: 5vh; width: 100%; max-width: 960px; height: 100dvh; overflow: hidden; background-color: var(--mix-card-15-bg); box-shadow: inset 0 0 0 0.5px oklch(from var(--border) l c h / 0.6); padding: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; pointer-events: auto; transition: none; animation: none; opacity: 1; transform: none; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .scrollAreaRoot { width: 100%; height: 100%; position: relative; } .scrollAreaViewport { width: 100%; height: 100%; overscroll-behavior: contain; } .scrollAreaViewport::before, .scrollAreaViewport::after { content: ""; display: block; left: 0; width: 100%; position: absolute; pointer-events: none; border-radius: 0.375rem; transition: height 100ms ease-out; z-index: 10; } .scrollAreaViewport::before { --scroll-area-overflow-y-start: inherit; top: 0; height: min(40px, var(--scroll-area-overflow-y-start)); background: linear-gradient( to bottom, oklch(from var(--background) l c h / 0.7), transparent ); } .scrollAreaViewport::after { --scroll-area-overflow-y-end: inherit; bottom: 0; height: min(10vh, var(--scroll-area-overflow-y-end, 10vh)); background: linear-gradient( to top, var(--background) 0%, var(--background) 30%, transparent 100% ); } .scrollableContent { width: 100%; padding: 24px; padding-top: max(0vh, env(safe-area-inset-top)); padding-bottom: max(12vh, env(safe-area-inset-bottom)); padding-left: max(24px, env(safe-area-inset-left)); padding-right: max(24px, env(safe-area-inset-right)); display: flex; flex-direction: column; align-items: center; gap: 16px; } .scrollbar { display: flex; justify-content: center; width: 6px; border-radius: 3px; margin: 4px; margin-top: calc(32px + 0.5vh); margin-left: 0; touch-action: none; user-select: none; opacity: 0; transition: opacity 150ms ease-out 800ms; pointer-events: none; } .scrollbar[data-scrolling] { opacity: 1; transition: opacity 150ms ease-out 0ms; pointer-events: auto; } .scrollbarThumb { width: 100%; border-radius: inherit; background-color: oklch(from var(--border) l c h / 0.5); transition: background-color 150ms ease-out; } .scrollbarThumb:hover { background-color: oklch(from var(--border) l c h / 0.8); } .contentExpanded { max-width: 700px; line-height: 2; margin: 0 auto; padding-top: 28px; padding-left: 0; padding-right: 0; padding-bottom: 0; width: 100%; height: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 36px; text-align: left; } .expandedImage { width: 100%; max-width: 700px; height: auto; object-fit: contain; } .expandedHeading { font-size: 48px; font-weight: 500; color: var(--foreground); margin: 0; align-self: flex-start; width: 100%; line-height: 1.5; letter-spacing: -0.02em; } .paragraphWrapper { color: oklch(from var(--secondary-foreground) l c h / 0.8); } .closeButtonContainer { position: sticky; align-self: flex-end; width: 44px; height: 44px; top: 32px; border-radius: 50%; z-index: 20; display: flex; align-items: center; justify-content: center; cursor: pointer; } .closeButton { padding: 0.5rem; border-radius: 999px; box-shadow: inset 0 0 0 0.5px oklch(from var(--border) l c h / 0.7); z-index: 20; background: transparent; color: var(--muted-foreground); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color 150ms ease-out, color 150ms ease-out; } .closeButton:hover { color: var(--foreground); background-color: var(--muted); } .closeButton:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } .contentContainer { width: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } .expandIcon { display: flex; align-items: center; justify-content: center; color: var(--muted-foreground); width: 36px; height: 36px; min-width: 36px; min-height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 0.5px oklch(from var(--border) l c h / 0.7); margin-left: auto; flex-shrink: 0; transition: background-color 150ms ease-out, color 150ms ease-out; } .expandIcon:hover, .card:hover .expandIcon { background-color: var(--card); color: var(--foreground); } @media (max-width: 768px) { .card { max-width: 300px; } .expandedHeading { font-size: 32px; } .expandedContent { font-size: 14px; } .scrollableContent { padding: 0px 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); padding-bottom: max(8vh, env(safe-area-inset-bottom)); justify-content: space-between; gap: 0px; } .closeButton { background-color: var(--background); } } @media (prefers-reduced-motion: reduce) { .card, .closeButton, .expandIcon, .heading, .scrollbar, .scrollbarThumb { transition: none; } } 4e:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","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"}]]}]}],["$","li","@base-ui/react@1.5.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%2Freact","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":"@base-ui/react@1.5.0"}]]}]}]]}],["$","$L4f",null,{"namespace":"@roiui","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/brook/ui/expandable-card/expandable-card.tsx","content":"$51","type":"registry:file","target":"~/components/ui/expandable-card/expandable-card.tsx"},{"path":"registry/brook/ui/expandable-card/expandable-card.module.css","content":"$52","type":"registry:file","target":"~/components/ui/expandable-card/expandable-card.module.css"}],"className":"h-[70svh] min-h-80"}]]}]