52: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"] 53: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"] 54:I[8513,["/_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"],"ScrollArea"] 55:I[8513,["/_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"],"ScrollBar"] 56: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"] 57: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"] 58:T1c48,"use client"; import { useMemo, type ComponentProps, type CSSProperties, type Ref } from "react"; import { useEntrance, type EntranceTrigger } from "@/registry/default/hooks/use-entrance"; import { cn } from "@/registry/default/lib/utils"; function mergeRefs(...refs: (Ref | undefined)[]) { return (node: T | null) => { for (const ref of refs) { if (typeof ref === "function") ref(node); else if (ref) ref.current = node; } }; } const FROM = { left: "translate3d(-101%, 0, 0)", right: "translate3d(101%, 0, 0)", top: "translate3d(0, -101%, 0)", bottom: "translate3d(0, 101%, 0)", }; // Hand-drawn strokes in a box 100 wide and `height` tall; the svg stretches // them across the phrase. The inset keeps round caps inside the box. function scribblePaths(shape: "underline" | "double", height: number, inset: number) { const y = (fraction: number) => Math.round((inset + fraction * (height - inset * 2)) * 100) / 100; if (shape === "double") { return [ `M1 ${y(0.3)} C 22 ${y(0)}, 48 ${y(0.45)}, 70 ${y(0.2)} S 94 ${y(0.1)}, 99 ${y(0.25)}`, `M4 ${y(0.9)} C 28 ${y(0.65)}, 55 ${y(1)}, 78 ${y(0.75)} S 96 ${y(0.7)}, 98 ${y(0.8)}`, ]; } return [`M1 ${y(0.7)} C 18 ${y(0.1)}, 32 ${y(1)}, 50 ${y(0.5)} S 82 ${y(0)}, 99 ${y(0.45)}`]; } interface HighlightTextProps extends ComponentProps<"span"> { /** * "marker" slides a block of colour in behind the text; "scribble" draws a * hand-drawn line under it and leaves the text as it is. */ variant?: "marker" | "scribble"; /** Scribble: one wavy underline, or two strokes. */ scribble?: "underline" | "double"; /** Scribble: width of the line, in px. */ strokeWidth?: number; /** Marker: the side the marker slides in from. */ from?: keyof typeof FROM; /** * Invert the text where the marker covers it, with a difference blend. * Turn it off for a translucent marker (`markerClassName="bg-yellow-300/50"`) * that leaves the text colour alone. */ inverse?: boolean; /** * Classes for the marker or the scribble, e.g. its colour. The marker * defaults to the foreground colour; the scribble to * `--highlight-text-color`, else the text colour (`text-primary` changes it). */ markerClassName?: string; /** "load" plays on first paint with CSS alone; "in-view" when the text scrolls into view. */ trigger?: EntranceTrigger; /** In-view: play the first time only. */ once?: boolean; /** Takes over from `trigger`: `false` holds the marker out of sight, `true` plays it. */ play?: boolean; /** Wait before the marker moves or the line starts, in ms. */ delay?: number; /** How long the marker or the line takes, in ms. */ duration?: number; } /** * A marker stroke that slides in behind a word or phrase. By default it is * the foreground colour and the text inverts where it passes, so it works * in light and dark themes without picking colours. Use it inline; it keeps * the baseline of the surrounding text. With `variant="scribble"` a * hand-drawn line is drawn under the phrase instead, and the text keeps its * colour. Both are decorative; the text reads the same to screen readers. * With `prefers-reduced-motion` the marker or line is simply there. * * @example *

Every item is yours to edit.

* * @example *

* Built to last *

*/ function HighlightText({ variant = "marker", scribble = "underline", strokeWidth = 3, from = "bottom", inverse = true, markerClassName, trigger = "load", once = true, play, delay = 0, duration = 600, className, style, ref, children, ...props }: HighlightTextProps) { const [observe, phase] = useEntrance({ trigger, once, play }); const mergedRef = useMemo(() => mergeRefs(ref, observe), [ref, observe]); if (variant === "scribble") { const width = Math.max(strokeWidth, 0); // The box is sized in px, so the line keeps its width however the phrase stretches it. const height = Math.round((scribble === "double" ? 12 : 8) + width * 2); const strokes = scribblePaths(scribble, height, width / 2 + 0.5); // Two strokes share the time: the second starts as the first ends. const share = strokes.length > 1 ? 0.55 : 1; return ( {children} ); } return ( ); } export { HighlightText, type HighlightTextProps }; 51:["$","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":[null,["$","$L52",null,{"namespace":"@corsair-ui","registryDependencies":["@corsair-ui/utils","@corsair-ui/use-entrance"]}]]}],["$","$L53",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"Theme"}],["$","div",null,{"children":["$","$L54",null,{"type":"always","className":"h-80 px-2","children":[["$","div",null,{"className":"gap-2 pb-8 flex flex-col pt-4","children":[["$","div","animate-highlight-text",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","animate-highlight-text",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"highlight-text 600ms cubic-bezier(0.22, 1, 0.36, 1) both"}]]}],["$","div","animate-highlight-text-draw",{"className":"items-start gap-1 grid grid-cols-2 text-sm","children":[["$","div",null,{"className":"hover:bg-muted/50 py-2","children":["$","p",null,{"className":"text-foreground/80 text-sm","children":["--","animate-highlight-text-draw",":"]}]}],["$","div",null,{"className":"hover:bg-muted/50 py-2 px-1 rounded-md w-full","children":"highlight-text-draw 600ms cubic-bezier(0.65, 0, 0.35, 1) both"}]]}]]}],["$","$L55",null,{"orientation":"horizontal"}]]}]}]]}],["$","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":["$","$L56",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@keyframes highlight-text {\n\tfrom {\n\t\ttransform: var(--highlight-text-from);\n\t}\n}\n\n@keyframes highlight-text-draw {\n\tfrom {\n\t\tstroke-dashoffset: 1.01;\n\t}\n\tto {\n\t\tstroke-dashoffset: 0;\n\t}\n}"}]}]]}]]}]}]}]]}],["$","$L57",null,{"files":[{"path":"registry/default/ui/highlight-text.tsx","content":"$58","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]