61: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63:T3336,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import type React from "react"; import { useResolvedDensity } from "../../system/provider/siteplane-ui-provider"; import { surfaceClassNames } from "../../system/styles/surface"; import { cn } from "../../system/utils/cn"; import { baseClass, slotClass } from "../../system/utils/slot-class"; export type CardHoverColor = | "chart-1" | "chart-2" | "chart-3" | "chart-4" | "chart-5" | "chart-6" | "chart-7" | "chart-8"; export function Card({ children, className, density, hoverColor, render, variant = "raised", ...props }: useRender.ComponentProps<"div"> & { /** * The inset of the card's parts: 20 px, or 16 px compact. Without it the * card takes the density of the SiteplaneUIProvider around it. A theme's * --sp-rw-card-inset, --sp-rw-card-inset-block or --sp-rw-card-inset-inline * takes the place of the density's inset (design-rework.css). */ density?: "default" | "compact" | undefined; /** * A chart color, muted, that rises from the card's bottom edge and fills it * while the pointer is over the card, under its content; the card's title * and description turn dark on it. */ hoverColor?: CardHoverColor | undefined; variant?: | "raised" | "subtle" | "header" | "message" | "error" | "inset" | "elevated" | "glass"; }): React.ReactElement { const resolvedDensity = useResolvedDensity(density); const defaultProps = { children: hoverColor ? ( <> {children} ) : ( children ), // A card nested in a framed card keeps the default inset of its parts: the // frame's inset (CardFrame) reaches only the cards joined into it. className: cn( // Glass is a surface of its own: the shared glass rule draws its fill, // edge, text colour and blur instead of the raised surface. slotClass("card", props, render), baseClass("card", props, render), variant === "glass" ? surfaceClassNames.glass : surfaceClassNames.raised, "flex flex-col [--card-inset-inline:initial]", className, ), "data-density": resolvedDensity, // Stays when the Card renders as another part and takes its slot (a // ContextMenu trigger), so the Card's base radius still reaches it. "data-foundation": "card", "data-hover-color": hoverColor, "data-slot": "card", "data-variant": variant, }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrame({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { // A joined card's header, panel and footer take the frame's inset, like a // table's outer columns, so their text starts with the frame header's; the // extra pixel offsets the card's negative margin. className: cn( slotClass("card-frame", props, render), surfaceClassNames.raised, "flex flex-col [--card-frame-inset:--spacing(6)] [--clip-bottom:-1rem] [--clip-top:-1rem] before:rounded-[inherit] *:data-[slot=card]:[--card-inset-inline:calc(var(--card-frame-inset)+1px)] *:data-[slot=card]:[--table-edge-padding:calc(var(--card-frame-inset)+1px)] *:data-[slot=card]:-m-px *:data-[slot=card]:before:hidden *:not-first:data-[slot=card]:before:rounded-t-[inherit] *:not-last:data-[slot=card]:before:rounded-b-[inherit] *:data-[slot=card]:[clip-path:inset(var(--clip-top)_1px_var(--clip-bottom)_1px_round_calc(var(--sp-rw-radius-surface)-1px))] *:data-[slot=card]:last:[--clip-bottom:1px] *:data-[slot=card]:first:[--clip-top:1px]", className, ), "data-slot": "card-frame", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameBleed({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { // Tables inside align their outer columns with the frame header and footer; // the extra pixel offsets the negative margin that covers the frame border. className: cn( slotClass("card-frame-bleed", props, render), "-m-px w-[calc(100%+2px)] [--table-edge-padding:calc(var(--card-frame-inset)+1px)]", className, ), "data-slot": "card-frame-bleed", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-frame-header", props, render), "relative flex grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] flex-col items-start gap-x-4 px-[var(--card-frame-inset,--spacing(6))] py-4 has-data-[slot=card-frame-action]:grid-cols-[minmax(0,1fr)_auto]", className, ), "data-slot": "card-frame-header", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-frame-title", props, render), "self-center font-(--sp-rw-font-weight-strong) text-sm wrap-anywhere", className, ), "data-slot": "card-frame-title", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-frame-description", props, render), "self-center text-muted-foreground text-sm wrap-anywhere", className, ), "data-slot": "card-frame-description", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameAction({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-frame-action", props, render), "col-start-2 nth-3:row-span-2 nth-3:row-start-1 inline-flex self-center justify-self-end", className, ), "data-slot": "card-frame-action", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFrameFooter({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { // A row, as CardFooter and FrameFooter are: its actions stand the action // gap apart, which design-rework.css gives the card family. const defaultProps = { className: cn( slotClass("card-frame-footer", props, render), "flex items-center px-[var(--card-frame-inset,--spacing(6))] py-4", className, ), "data-slot": "card-frame-footer", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { // The text parts share one column; a media (CardMedia) takes a column of its // own before it and an action (CardAction) one after it. The text parts are // the children that are neither of the two. How the parts align in the rows // follows from how many text parts the header holds, which design-rework.css // decides in one block of its Card section. const defaultProps = { className: cn( slotClass("card-header", props, render), "grid auto-rows-min grid-cols-[minmax(0,1fr)] grid-rows-[auto_auto] has-data-[slot=card-action]:grid-cols-[minmax(0,1fr)_auto] has-data-[slot=card-media]:grid-cols-[auto_minmax(0,1fr)] has-data-[slot=card-media]:has-data-[slot=card-action]:grid-cols-[auto_minmax(0,1fr)_auto]", className, ), "data-slot": "card-header", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } /** * The leading avatar or icon of a header, before its title and description * (rulebook I7). A bare icon is 20 px and centres on the title's first line; an * avatar taller than that line starts at its top (I3, I5). Beside a title * alone it centres on the title, as CardAction does. */ export function CardMedia({ className, render, tone = "accent", ...props }: useRender.ComponentProps<"div"> & { /** * The color of a bare icon: `accent`, or `neutral` for the secondary text * color (--sp-rw-fg-secondary), for a module icon that leaves color to * states. An avatar or an image keeps its own colors. */ tone?: "accent" | "neutral" | undefined; }): React.ReactElement { const defaultProps = { className: cn( slotClass("card-media", props, render), "col-start-1 row-start-1 flex", className, ), "data-slot": "card-media", "data-tone": tone, }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardTitle({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-title", props, render), "wrap-anywhere", className, ), "data-slot": "card-title", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } /** * Context beside the title, in its row: a period, a count or a short status. * Place it inside CardTitle, after the title's text. It takes the quieter text * of CardDescription and moves below the title when the row is full. */ export function CardTitleMeta({ className, render, ...props }: useRender.ComponentProps<"span">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-title-meta", props, render), "min-w-0 wrap-anywhere", className, ), "data-slot": "card-title-meta", }; return useRender({ defaultTagName: "span", props: mergeProps<"span">(defaultProps, props), render, }); } export function CardDescription({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn( slotClass("card-description", props, render), "wrap-anywhere", className, ), "data-slot": "card-description", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardAction({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { // Beside a title and a description the action spans both rows from the top. // Beside one text part it stays in that part's row and centres on it, as // CardFrameAction does, so it adds no second row (rulebook S2, S11). It takes // the last column, after the text and after a media's column before it, and // moves under the text on a narrow card; design-rework.css owns its place. const defaultProps = { className: cn( slotClass("card-action", props, render), "inline-flex", className, ), "data-slot": "card-action", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardPanel({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement { const defaultProps = { className: cn(slotClass("card-panel", props, render), "flex-1", className), "data-slot": "card-panel", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export function CardFooter({ actionLayout, className, render, ...props }: useRender.ComponentProps<"div"> & { /** * `fill` lets the footer's buttons share its row in equal widths, such as * Cancel and Apply under a calendar; a link keeps its own width. Unset, the * actions keep their own widths and its `className` lays out the row. Either * way they stand the action gap apart, 12 px, as in every footer of the * kit (design-rework.css). */ actionLayout?: "fill" | undefined; }): React.ReactElement { const defaultProps = { className: cn( slotClass("card-footer", props, render), "flex items-center", className, ), "data-action-layout": actionLayout, "data-slot": "card-footer", }; return useRender({ defaultTagName: "div", props: mergeProps<"div">(defaultProps, props), render, }); } export { CardPanel as CardContent }; 60:["$","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","@base-ui/react@1.7.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.7.0"}]]}]}]]}],["$","$L61",null,{"namespace":"@siteplane","registryDependencies":["@siteplane/base"]}]]}],null]}],["$","$L62",null,{"files":[{"path":"packages/ui/src/components/card/card.tsx","content":"$63","type":"registry:ui","target":"~/src/siteplane/components/card/card.tsx"},{"path":"packages/ui/src/components/card/index.ts","content":"export * from \"./card\";\n","type":"registry:ui","target":"~/src/siteplane/components/card/index.ts"}],"className":"h-[70svh] min-h-80"}]]}]