4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4e: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4f:T14b9,"use client"; import * as React from "react"; import { motion } from "motion/react"; import { HugeiconsIcon } from "@hugeicons/react"; import { UserIcon, Link01Icon, Mail01Icon, InstagramIcon, } from "@hugeicons/core-free-icons"; // ── Types ───────────────────────────────────────────────────────────────────── type HugeIcon = React.ComponentProps["icon"]; type ContactField = { key: string; icon: HugeIcon; label: string; /** [start, end) character range of `text` this field highlights. */ highlight: [number, number]; }; export interface ContactRevealCardProps { /** The full identity string all fields highlight a slice of. */ text?: string; fields?: ContactField[]; className?: string; } // ── Default content ────────────────────────────────────────────────────────── const DEFAULT_TEXT = "kumail@creatifly.co"; const DEFAULT_FIELDS: ContactField[] = [ { key: "profile", icon: UserIcon, label: "Profile", highlight: [0, 6] }, { key: "website", icon: Link01Icon, label: "Website", highlight: [7, 20] }, { key: "email", icon: Mail01Icon, label: "Email", highlight: [0, 20] }, { key: "instagram", icon: InstagramIcon, label: "Instagram", highlight: [7, 16], }, ]; /** * Splits `text` into a fixed set of segments once, at the union of every * field's highlight boundaries. The DOM never changes shape after this — * switching fields only recolors existing segments, no reflow. */ function getSegments(text: string, fields: ContactField[]) { const points = new Set([0, text.length]); for (const field of fields) { points.add(field.highlight[0]); points.add(field.highlight[1]); } const sorted = Array.from(points).sort((a, b) => a - b); return sorted.slice(0, -1).map((start, i) => ({ start, end: sorted[i + 1], text: text.slice(start, sorted[i + 1]), })); } // ── Root ────────────────────────────────────────────────────────────────────── export default function ContactRevealCard({ text = DEFAULT_TEXT, fields = DEFAULT_FIELDS, className, }: ContactRevealCardProps = {}) { const scopeId = React.useId().replace(/:/g, ""); const [selectedKey, setSelectedKey] = React.useState( fields[1]?.key ?? fields[0].key, ); const [previewKey, setPreviewKey] = React.useState(null); const activeKey = previewKey ?? selectedKey; const active = fields.find((f) => f.key === activeKey) ?? fields[0]; const [start, end] = active.highlight; const segments = React.useMemo( () => getSegments(text, fields), [text, fields], ); return (

{/* Text + caption */}

{segments.map((segment) => { const isActive = segment.start >= start && segment.end <= end; return ( {segment.text} ); })}

{/* Icon row — hover-dim handled entirely by :has/:not/:hover, no JS listeners needed for it */}

{fields.map((field) => ( ))}

); } 4c:["$","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","@hugeicons/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%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":"@hugeicons/react"}]]}]}],["$","li","@hugeicons/core-free-icons",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40hugeicons%2Fcore-free-icons","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":"@hugeicons/core-free-icons"}]]}]}]]}],["$","$L4d",null,{"namespace":"@craftui","registryDependencies":["https://www.craftui.space/r/craftui-base.json"]}]]}],null]}],["$","$L4e",null,{"files":[{"path":"components/craftui/blocks/contact-reveal-card/default.tsx","content":"$4f","type":"registry:component","target":"~/components/craftui/blocks/contact-reveal-card/default.tsx"}],"className":"h-[70svh] min-h-80"}]]}]