50: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"] 51:I[544296,["/_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"],"ItemStyles"] 52:I[34002,["/_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"],"CodeEditor"] 53: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"] 54:T939,import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cn } from "@/lib/utils" import { Meta } from "@/components/ui/meta" type CardProps = React.ComponentProps<"article"> & { /** * rule: a column under a rule, the giant letter hanging from it. * epigraph: someone's words set before the name, the way a book sets a quotation before a chapter. * ledger: figures that add up, the total ruled off the way an account is. */ variant?: "rule" | "epigraph" | "ledger" } /** A column under a rule, not a box. Point at it and an ink stroke passes along the rule. */ function Card({ variant = "rule", className, ...props }: CardProps) { return

} /** One giant letter, cropped by the rule like a poster's headline. Decorative. */ function CardFigure({ className, ...props }: React.ComponentProps<"p">) { return

} /** The link inside the title. Its hit area stretches over the whole card, so the card is one target. */ function CardLink({ className, asChild = false, ...props }: React.ComponentProps<"a"> & { asChild?: boolean }) { const Comp = asChild ? Slot : "a" return } function CardDescription({ className, ...props }: React.ComponentProps<"p">) { return
} /** Ledger figures: pairs of
and
in a
each. The last pair is the total. */ function CardSum({ className, ...props }: React.ComponentProps<"dl">) { return
} /** A frame row at the foot: small facts held apart by hairlines. / function CardFooter({ className, ...props }: React.ComponentProps<"div">) { return } export { Card, CardFigure, CardTitle, CardLink, CardDescription, CardSum, CardFooter, type CardProps } 55:T1430,@layer components { / ── ot-card ── a column under a rule, not a box / .ot-card { position: relative; display: grid; align-content: start; gap: var(--ot-space-3); padding-top: var(--ot-space-4); background: linear-gradient(var(--ot-ink), var(--ot-ink)) no-repeat 100% 0 / 0% var(--ot-stroke), linear-gradient(var(--ot-ink), var(--ot-ink)) no-repeat 0 0 / 100% var(--ot-hairline); transition: background-size var(--ot-andante) var(--ot-exhale), background-position 0s; } .ot-card:is(:has(.ot-card-link:is(:hover, :focus-visible)), [data-force~="hover"]) { background-position: 0 0, 0 0; background-size: 100% var(--ot-stroke), 100% var(--ot-hairline); } .ot-card:is([dir="rtl"], [dir="rtl"] ) { background-position: 0 0, 0 0; } .ot-card:is([dir="rtl"], [dir="rtl"] ):is(:has(.ot-card-link:is(:hover, :focus-visible)), [data-force~="hover"]) { background-position: 100% 0, 0 0; } / The letter hangs from the rule, its top cut off by it, the way SPECTRA's line cuts its word. / .ot-card:has(> .ot-card-figure:first-child) { padding-top: 0; } .ot-card-figure { display: flex; align-items: flex-end; height: 0.5em; margin-bottom: var(--ot-space-2); overflow: clip; font-size: clamp(6rem, 11vw, 9rem); font-weight: 100; font-stretch: 125%; line-height: 0.76; color: var(--ot-ink); user-select: none; } .ot-card-title { font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); font-weight: 300; color: var(--ot-ink); } .ot-card-link { color: inherit; text-decoration: none; outline: 0; } .ot-card-link::after { content: ""; position: absolute; inset: 0; } .ot-card:has(.ot-card-link:focus-visible) { outline: var(--ot-stroke) solid var(--ot-accent); outline-offset: 8px; } .ot-card-body { max-width: 34ch; } .ot-card-foot { margin-top: var(--ot-space-3); } / Epigraph: their words set before the name, indented to the end of the column, in the italic a book gives a quotation before a chapter. The rule moves down to open the chapter: the title. / .ot-card[data-variant="epigraph"] { background: none; padding-top: 0; } .ot-card[data-variant="epigraph"] .ot-card-body { justify-self: end; max-width: min(22ch, 84%); font-family: var(--ot-expression); font-style: italic; font-size: calc(var(--ot-mp) var(--ot-expression-scale)); line-height: 1.3; color: var(--ot-ink); } .ot-card[data-variant="epigraph"] .ot-card-foot { justify-self: end; flex-wrap: nowrap; gap: var(--ot-space-3); margin-top: 0; } .ot-card[data-variant="epigraph"] .ot-card-foot::before { content: ""; flex: none; width: var(--ot-space-5); border-top: var(--ot-hairline) solid var(--ot-rule-strong); } .ot-card[data-variant="epigraph"] .ot-card-title { margin-top: var(--ot-space-6); padding-top: var(--ot-space-4); background: linear-gradient(var(--ot-ink), var(--ot-ink)) no-repeat 100% 0 / 0% var(--ot-stroke), linear-gradient(var(--ot-ink), var(--ot-ink)) no-repeat 0 0 / 100% var(--ot-hairline); transition: background-size var(--ot-andante) var(--ot-exhale), background-position 0s; } .ot-card[data-variant="epigraph"]:is(:has(.ot-card-link:is(:hover, :focus-visible)), [data-force~="hover"]) .ot-card-title { background-position: 0 0, 0 0; background-size: 100% var(--ot-stroke), 100% var(--ot-hairline); } .ot-card[data-variant="epigraph"]:is([dir="rtl"], [dir="rtl"] ) .ot-card-title { background-position: 0 0, 0 0; } .ot-card[data-variant="epigraph"]:is([dir="rtl"], [dir="rtl"] ):is(:has(.ot-card-link:is(:hover, :focus-visible)), [data-force~="hover"]) .ot-card-title { background-position: 100% 0, 0 0; } /* Ledger: the figures add up in a column that is as wide as the total; the total is ruled off the way an account is, a single rule over it and a double rule under it, both only as wide as the figures. / .ot-card[data-variant="ledger"] .ot-card-sum { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--ot-space-1) var(--ot-space-5); margin: var(--ot-space-3) 0 0; font-variant-numeric: tabular-nums lining-nums; } .ot-card[data-variant="ledger"] .ot-card-sum > div { display: contents; } .ot-card[data-variant="ledger"] .ot-card-sum dt { color: var(--ot-graphite); } .ot-card[data-variant="ledger"] .ot-card-sum dd { margin: 0; text-align: end; color: var(--ot-ink); } .ot-card[data-variant="ledger"] .ot-card-sum > div:last-child > { margin-top: var(--ot-space-3); color: var(--ot-ink); } .ot-card[data-variant="ledger"] .ot-card-sum > div:last-child > dd { padding: var(--ot-space-2) 0 var(--ot-space-1); font-size: var(--ot-mf); line-height: var(--ot-mf-lh); letter-spacing: var(--ot-mf-tr); font-weight: 200; border-top: var(--ot-hairline) solid var(--ot-ink); border-bottom: calc(3 * var(--ot-hairline)) double var(--ot-ink); } /* Forced colours drop background images, so the rule becomes a border. */ @media (forced-colors: active) { .ot-card, .ot-card[data-variant="epigraph"] .ot-card-title { background: none; border-top: var(--ot-hairline) solid CanvasText; } .ot-card[data-variant="epigraph"] { border-top: 0; } } } 4f:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}]]}],["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json","https://thedirectors.agency/ui/r/meta.json"]}]]}],["$","$L51",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L52",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@import \"../styles/0nlytype/card.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/card.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/card.css","content":"$55","type":"registry:file","target":"styles/0nlytype/card.css"}],"className":"h-[70svh] min-h-80"}]]}]