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:T989,"use client" import * as React from "react" import * as TooltipPrimitive from "@radix-ui/react-tooltip" import { cn } from "@/lib/utils" /** Holds a still pointer for 400ms before whispering; focus shows it at once. */ function TooltipProvider({ delayDuration = 400, ...props }: React.ComponentProps) { return } function Tooltip(props: React.ComponentProps) { return ( ) } function TooltipTrigger(props: React.ComponentProps) { return } type TooltipContentProps = React.ComponentProps & { variant?: "whisper" | "initials" | "beside" } /** * A whisper. Keep it to a few words; it names, it doesn't explain. whisper (the default): in * parentheses above the thing it names. initials: the same, with the letters the control shows * marked in the words they come from (wrap each in ). beside: on the control's own line, after it, * on a hairline. */ function TooltipContent(props: TooltipContentProps) { return ( ) } // Beside reads on from the control, so it sits at the line's end: the right, or the left on a // right-to-left page. The portal mounts this only once open, in the browser, so the direction is read // fresh each time and can't disagree with the server's (closed, empty) render. // ponytail: reads the page's direction, not the trigger's; pass side for a mixed-direction page. function Placed({ className, variant = "whisper", side, sideOffset = variant === "beside" ? 10 : 8, ...props }: TooltipContentProps) { const rtl = variant === "beside" && !side && getComputedStyle(document.body).direction === "rtl" return ( ) } export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } 55:T11e1,@layer components { /* ── ot-tip ── tooltip: a whisper in parentheses above the thing it names. The parentheses are set thin and taller than the words, as 20(25) sets them round its figures, so the whisper reads as an aside held apart from the page. Radix positions it (side top, 8px off) and holds it for a still pointer; focus shows it at once and Escape puts it away. */ .ot-tip-text { z-index: 50; width: max-content; max-width: 32ch; padding: 0.1em 0.35em; background: var(--ot-paper); font-family: var(--ot-voice); font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-graphite); text-align: center; white-space: normal; animation: ot-tip-in var(--ot-moderato) var(--ot-exhale); } .ot-tip-text::before { content: "(" / ""; } .ot-tip-text::after { content: ")" / ""; } .ot-tip-text::before, .ot-tip-text::after { font-size: 1.6em; font-weight: 200; line-height: 0; vertical-align: -0.12em; color: var(--ot-ink); } .ot-tip-text::before { margin-inline-end: 0.08em; } .ot-tip-text::after { margin-inline-start: 0.08em; } .ot-tip-text[data-state="closed"] { animation: ot-tip-out var(--ot-allegro) var(--ot-breath) forwards; } @keyframes ot-tip-in { from { opacity: 0; translate: 0 0.3em; } } @keyframes ot-tip-out { to { opacity: 0; } } /* ── initials ── for a key or an abbreviation: the letters the control shows are found in the whisper's words and reversed out of the ink, as "the uncreative" reverses part of its word, so you can see where G, or CMYK, comes from. Mark each with . The initials land first and the words are written in around them. */ .ot-tip-text[data-variant="initials"] b { display: inline-block; padding-inline: 0.1em; font-weight: 700; background: var(--ot-ink); color: var(--ot-paper); } .ot-tip-text[data-variant="initials"][data-state="delayed-open"], .ot-tip-text[data-variant="initials"][data-state="instant-open"] { animation: ot-tip-write var(--ot-moderato) var(--ot-exhale) var(--ot-allegro) backwards; } .ot-tip-text[data-variant="initials"]:is([data-state="delayed-open"], [data-state="instant-open"]) b { animation: ot-tip-land var(--ot-moderato) var(--ot-spiccato) backwards; } @keyframes ot-tip-write { from { color: transparent; } } @keyframes ot-tip-land { from { opacity: 0; scale: 0.4; } } /* ── beside ── the whisper on the control's own line, after it, on a hairline that runs from the control: the small notes of "It has to be design." hung beside the headline. No parentheses: the line holds it apart. The line always faces the control, whichever side Radix settles on. */ .ot-tip-text[data-variant="beside"] { display: flex; align-items: center; gap: var(--ot-space-2); max-width: 28ch; padding-inline: 0 0.35em; text-align: start; } .ot-tip-text[data-variant="beside"]::after { content: none; } .ot-tip-text[data-variant="beside"]::before { content: ""; flex: none; width: var(--ot-space-5); height: var(--ot-hairline); margin: 0; background: var(--ot-ink); } .ot-tip-text[data-variant="beside"][data-side="left"] { flex-direction: row-reverse; padding-inline: 0.35em 0; } .ot-tip-text[data-variant="beside"][data-side="left"]:is([dir="rtl"], [dir="rtl"] *) { flex-direction: row; padding-inline: 0.35em 0; } .ot-tip-text[data-variant="beside"][data-side="right"]:is([dir="rtl"], [dir="rtl"] *) { flex-direction: row-reverse; padding-inline: 0 0.35em; } .ot-tip-text[data-variant="beside"]:is([data-side="top"], [data-side="bottom"])::before { display: none; } /* flipped above or below: no line to run along */ /* Reach: the hairline draws out from the control, then the words arrive at its end. */ .ot-tip-text[data-variant="beside"]:is([data-state="delayed-open"], [data-state="instant-open"]) { animation: ot-tip-write var(--ot-moderato) var(--ot-exhale) var(--ot-allegro) backwards; } .ot-tip-text[data-variant="beside"]:is([data-state="delayed-open"], [data-state="instant-open"])::before { animation: ot-tip-reach var(--ot-moderato) var(--ot-exhale) backwards; } .ot-tip-text[data-variant="beside"][data-side="right"]::before { transform-origin: 0 50%; } .ot-tip-text[data-variant="beside"][data-side="left"]::before { transform-origin: 100% 50%; } @keyframes ot-tip-reach { from { scale: 0 1; } } @media (forced-colors: active) { .ot-tip-text[data-variant="beside"]::before { forced-color-adjust: none; background: CanvasText; } .ot-tip-text[data-variant="initials"] b { forced-color-adjust: none; background: CanvasText; color: Canvas; } } } 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-tooltip",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-tooltip","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-tooltip"}]]}]}]]}],["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.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/tooltip.css\" {\n\n}"}]}]]}]]}]}]}]]}],["$","$L53",null,{"files":[{"path":"registry/0nlytype/ui/tooltip.tsx","content":"$54","type":"registry:ui"},{"path":"registry/0nlytype/styles/tooltip.css","content":"$55","type":"registry:file","target":"styles/0nlytype/tooltip.css"}],"className":"h-[70svh] min-h-80"}]]}]