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[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:T2495,/** * @module PixelHeading * * Setup — Geist Pixel Fonts with Tailwind CSS * ============================================= * * All Geist fonts can be used through CSS variables: * * GeistSans: --font-geist-sans * GeistMono: --font-geist-mono * GeistPixelSquare: --font-geist-pixel-square * GeistPixelGrid: --font-geist-pixel-grid * GeistPixelCircle: --font-geist-pixel-circle * GeistPixelTriangle: --font-geist-pixel-triangle * GeistPixelLine: --font-geist-pixel-line * * 1. Register the font variables in app/layout.js: * * ```js * import { GeistSans } from "geist/font/sans"; * import { GeistMono } from "geist/font/mono"; * import { GeistPixelSquare } from "geist/font/pixel"; * * export default function RootLayout({ children }) { * return ( * * {children} * * ); * } * ``` * * 2. Map the CSS variables in your Tailwind CSS v4 theme (tailwind.css): * * ```css * @theme { * --font-sans: var(--font-geist-sans); * --font-mono: var(--font-geist-mono); * --font-pixel-square: var(--font-geist-pixel-square); * --font-pixel-grid: var(--font-geist-pixel-grid); * --font-pixel-circle: var(--font-geist-pixel-circle); * --font-pixel-triangle: var(--font-geist-pixel-triangle); * --font-pixel-line: var(--font-geist-pixel-line); * } * ``` * * Once configured, the `font-pixel-*` utility classes used by this * component will resolve correctly. */ "use client" import { useCallback, useEffect, useRef, useState } from "react" import { cn } from "@/lib/utils" type PixelFont = "square" | "grid" | "circle" | "triangle" | "line" const PIXEL_FONT_MAP: Record = { square: "font-pixel-square", grid: "font-pixel-grid", circle: "font-pixel-circle", triangle: "font-pixel-triangle", line: "font-pixel-line", } const PIXEL_FONTS = Object.values(PIXEL_FONT_MAP) const PIXEL_FONT_KEYS = Object.keys(PIXEL_FONT_MAP) as PixelFont[] /** * Props for the PixelHeading component. * * Extends native heading element attributes so all standard HTML * props (id, aria-*, data-*, event handlers) are forwarded. */ export interface PixelHeadingProps extends React.ComponentProps<"h1"> { /** * The heading level to render. * @default "h1" */ as?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" /** * The resting pixel font displayed by default. * @default "square" */ initialFont?: PixelFont /** * The pixel font to show on hover / focus. * When set the component swaps between `initialFont` and `hoverFont` * instead of cycling through every font. */ hoverFont?: PixelFont /** * Interval in milliseconds between font cycles on hover. * Only used when `hoverFont` is **not** set (cycling mode). * @default 300 */ cycleInterval?: number /** * Initial font index (0–4) for the starting pixel font. * Ignored when `initialFont` is set. * @default 0 */ defaultFontIndex?: number /** * Callback fired when the active font index changes. */ onFontIndexChange?: (index: number) => void /** * Whether to show the font name label beneath the heading. * @default true */ showLabel?: boolean /** * Disable all hover / focus interactions. * The heading stays locked to `initialFont` (or `defaultFontIndex`). * @default false */ disableHover?: boolean /** * Disable the auto-cycling interval in cycle mode. * Swap mode (`hoverFont`) still works unless `disableHover` is also set. * @default false */ disableCycling?: boolean } /** * Interactive heading that swaps or cycles through pixel font styles on hover. * * **Swap mode** — set `initialFont` and `hoverFont` to swap between two * specific fonts on hover: * * @example * * Swap on hover * * * **Cycle mode** — omit `hoverFont` to cycle through every pixel font on * hover (the original behavior): * * @example * console.log(i)} * > * Cycle on hover * */ export function PixelHeading({ children, as: Tag = "h1", className, initialFont, hoverFont, cycleInterval = 300, defaultFontIndex = 0, onFontIndexChange, showLabel = false, disableHover = false, disableCycling = false, onMouseEnter, onMouseLeave, onFocus, onBlur, onKeyDown, ...props }: PixelHeadingProps) { /* ------------------------------------------------------------------ */ /* Resolve the starting index from `initialFont` or `defaultFontIndex` */ /* ------------------------------------------------------------------ */ const resolvedDefaultIndex = initialFont ? PIXEL_FONT_KEYS.indexOf(initialFont) : defaultFontIndex const hoverIndex = hoverFont ? PIXEL_FONT_KEYS.indexOf(hoverFont) : null const isSwapMode = hoverIndex !== null const [fontIndex, setFontIndex] = useState(resolvedDefaultIndex) const [isActive, setIsActive] = useState(false) const intervalRef = useRef | null>(null) useEffect(() => { return () => { if (intervalRef.current) { clearInterval(intervalRef.current) } } }, []) /* ---- Cycling helpers (cycle mode only) ---- */ const advanceFont = useCallback(() => { setFontIndex((prev) => { const next = (prev + 1) % PIXEL_FONTS.length onFontIndexChange?.(next) return next }) }, [onFontIndexChange]) const startCycling = useCallback(() => { setIsActive(true) intervalRef.current = setInterval(advanceFont, cycleInterval) }, [advanceFont, cycleInterval]) const stopCycling = useCallback(() => { setIsActive(false) if (intervalRef.current) { clearInterval(intervalRef.current) intervalRef.current = null } }, []) /* ---- Swap helpers ---- */ const swapToHover = useCallback(() => { if (hoverIndex === null) return setIsActive(true) setFontIndex(hoverIndex) onFontIndexChange?.(hoverIndex) }, [hoverIndex, onFontIndexChange]) const swapToInitial = useCallback(() => { setIsActive(false) setFontIndex(resolvedDefaultIndex) onFontIndexChange?.(resolvedDefaultIndex) }, [resolvedDefaultIndex, onFontIndexChange]) /* ---- Event handlers ---- */ const handleMouseEnter = useCallback( (e: React.MouseEvent) => { if (!disableHover) { if (isSwapMode) { swapToHover() } else if (!disableCycling) { startCycling() } } onMouseEnter?.(e) }, [ disableHover, disableCycling, isSwapMode, swapToHover, startCycling, onMouseEnter, ] ) const handleMouseLeave = useCallback( (e: React.MouseEvent) => { if (!disableHover) { isSwapMode ? swapToInitial() : stopCycling() } onMouseLeave?.(e) }, [disableHover, isSwapMode, swapToInitial, stopCycling, onMouseLeave] ) const handleFocus = useCallback( (e: React.FocusEvent) => { if (!disableHover) { isSwapMode ? swapToHover() : setIsActive(true) } onFocus?.(e) }, [disableHover, isSwapMode, swapToHover, onFocus] ) const handleBlur = useCallback( (e: React.FocusEvent) => { if (!disableHover) { isSwapMode ? swapToInitial() : setIsActive(false) } onBlur?.(e) }, [disableHover, isSwapMode, swapToInitial, onBlur] ) const handleKeyDown = useCallback( (e: React.KeyboardEvent) => { if (!disableHover && !disableCycling) { if (e.key === "Enter" || e.key === " ") { e.preventDefault() if (!isSwapMode) advanceFont() } } onKeyDown?.(e) }, [disableHover, disableCycling, isSwapMode, advanceFont, onKeyDown] ) const currentFontLabel = PIXEL_FONT_KEYS[fontIndex] return (

{children} {showLabel && ( {currentFontLabel} )}

) } 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":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","geist",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/geist","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":"geist"}]]}]}]]}],["$","$L52",null,{"namespace":"@cult-ui","registryDependencies":[]}]]}],null]}],["$","$L53",null,{"files":[{"path":"registry/default/ui/pixel-heading-word.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]