4f: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"] 50: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"] 51:T119e,// react import type { ComponentType } from "react" // next import Link from "next/link" // shadcn import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" // project-imports import categoryCounts from "@/category-counts.json" import BorderGlow from "@/components/animation/BorderGlow" import SectionHeader from "@/components/uiable/blocks/landing/components/SectionHeader" import ButtonSvg from "@/images/svg/button" import ButtonGroupSvg from "@/images/svg/ButtonGroup" import InputOtpSvg from "@/images/svg/InputOtp" import ItemSvg from "@/images/svg/item" import SwitchSvg from "@/images/svg/switch" import ToggleGroupSvg from "@/images/svg/ToggleGroup" // assets import { IconArrowUpRight } from "@tabler/icons-react" // types interface ComponentEntry { title: string slug: string count: string Svg: ComponentType<{ className?: string }> } interface ComponentCardProps { title: string slug: string count: string Svg: ComponentType<{ className?: string }> } const componentsData: ComponentEntry[] = [ { title: "Button", slug: "button", count: `${categoryCounts["button"] || 0} variants`, Svg: ButtonSvg, }, { title: "Button Group", slug: "button-group", count: `${categoryCounts["button-group"] || 0} variants`, Svg: ButtonGroupSvg, }, { title: "Input OTP", slug: "input-otp", count: `${categoryCounts["input-otp"] || 0} variants`, Svg: InputOtpSvg, }, { title: "Item", slug: "item", count: `${categoryCounts["item"] || 0} variants`, Svg: ItemSvg, }, { title: "Switch", slug: "switch", count: `${categoryCounts["switch"] || 0} variants`, Svg: SwitchSvg, }, { title: "Toggle Group", slug: "toggle-group", count: `${categoryCounts["toggle-group"] || 0} variants`, Svg: ToggleGroupSvg, }, ] function ComponentCard({ title, slug, count, Svg }: ComponentCardProps) { return (

{title}

{count}

) } // ------------------------------ | COMPONENT 1 | ------------------------------ // export default function Component1() { return (

{componentsData.map((entry) => ( ))}

) } 52:T772,{ "accordion": 10, "alert": 46, "alert-dialog": 10, "aspect-ratio": 5, "attachment": 5, "avatar": 15, "badge": 37, "layout": 14, "breadcrumb": 11, "bubble": 8, "button": 49, "button-group": 15, "calendar": 12, "card": 24, "carousel": 9, "changelog": 3, "chart": 10, "checkbox": 11, "collapsible": 6, "combobox": 14, "command": 9, "context-menu": 13, "coupon": 3, "cursor": 3, "data-table": 4, "date-picker": 8, "dialog": 15, "drawer": 6, "dropdown-menu": 25, "empty": 8, "field": 12, "hover-card": 5, "input": 16, "input-group": 22, "input-otp": 11, "item": 15, "kbd": 7, "label": 4, "list-group": 13, "marker": 7, "menubar": 8, "message": 5, "message-scroller": 9, "native-select": 3, "navigation-menu": 3, "pagination": 11, "popover": 8, "progress": 20, "questionnaire": 7, "radio": 1, "radio-group": 9, "resizable": 7, "scroll-area": 5, "select": 10, "separator": 8, "sheet": 5, "sidebar": 17, "skeleton": 8, "slider": 8, "sonner": 8, "spinner": 21, "switch": 11, "table": 6, "tabs": 10, "textarea": 8, "timeline": 7, "toggle": 6, "toggle-group": 8, "tooltip": 11, "tree-view": 7, "typography": 22, "contact": 24, "content": 17, "cta": 12, "e-commerce": 25, "faq": 19, "feature": 42, "footer": 21, "gallery": 11, "hero": 32, "landing": 14, "portfolio": 11, "pricing": 19, "process": 13, "small-hero": 7, "statistics": 13, "team": 14, "testimonial": 24, "bento": 8, "charts": 8, "check-mail": 2, "code-verification": 7, "coming-soon": 2, "component-layout": 1, "dashboard-layout": 1, "doc-layout": 1, "error-404": 2, "error-500": 2, "forgot-password": 5, "join-waitlist": 1, "login": 7, "navbar": 11, "reset-password": 1, "sign-up": 7, "tables": 1, "under-construction": 2, "widgets": 20 } 53:T330e,"use client" import { ReactNode, useCallback, useEffect, useRef, useState, type CSSProperties, type PointerEvent, } from "react" // types interface BorderGlowProps { children?: ReactNode className?: string edgeSensitivity?: number glowColor?: string backgroundColor?: string glowRadius?: number glowIntensity?: number coneSpread?: number animated?: boolean colors?: string[] fillOpacity?: number } function parseHSL(hslStr: string): { h: number; s: number; l: number } { const match = hslStr.match(/([\d.]+)\s*([\d.]+)%?\s*([\d.]+)%?/) if (!match) return { h: 221, s: 100, l: 64 } return { h: parseFloat(match[1]), s: parseFloat(match[2]), l: parseFloat(match[3]), } } function rgbToHsl( r: number, g: number, b: number ): { h: number; s: number; l: number } { r /= 255 g /= 255 b /= 255 const max = Math.max(r, g, b), min = Math.min(r, g, b) const l = (max + min) / 2 if (max === min) return { h: 0, s: 0, l: Math.round(l * 100) } const d = max - min const s = l > 0.5 ? d / (2 - max - min) : d / (max + min) let h = 0 if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6 else if (max === g) h = ((b - r) / d + 2) / 6 else h = ((r - g) / d + 4) / 6 return { h: Math.round(h * 360), s: Math.round(s * 100), l: Math.round(l * 100), } } function readPrimaryAsHSL(): string | null { if (typeof window === "undefined") return null const style = getComputedStyle(document.body) const primary = style.getPropertyValue("--primary").trim() if (!primary) return null const rgbMatch = primary.match( /rgb$\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)\s*$/ ) if (rgbMatch) { const { h, s, l } = rgbToHsl(+rgbMatch[1], +rgbMatch[2], +rgbMatch[3]) return `${h} ${s} ${l}` } const hexMatch = primary.match(/^#([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i) if (hexMatch) { const { h, s, l } = rgbToHsl( parseInt(hexMatch[1], 16), parseInt(hexMatch[2], 16), parseInt(hexMatch[3], 16) ) return `${h} ${s} ${l}` } return null } function buildBoxShadow(glowColor: string, intensity: number): string { const { h, s, l } = parseHSL(glowColor) const base = `${h}deg ${s}% ${l}%` const layers: [number, number, number, number, number, boolean][] = [ [0, 0, 0, 1, 100, true], [0, 0, 1, 0, 60, true], [0, 0, 3, 0, 50, true], [0, 0, 6, 0, 40, true], [0, 0, 15, 0, 30, true], [0, 0, 25, 2, 20, true], [0, 0, 50, 2, 10, true], [0, 0, 1, 0, 60, false], [0, 0, 3, 0, 50, false], [0, 0, 6, 0, 40, false], [0, 0, 15, 0, 30, false], [0, 0, 25, 2, 20, false], [0, 0, 50, 2, 10, false], ] return layers .map(([x, y, blur, spread, alpha, inset]) => { const a = Math.min(alpha * intensity, 100) return `${inset ? "inset " : ""}${x}px ${y}px ${blur}px ${spread}px hsl(${base} / ${a}%)` }) .join(", ") } function easeOutCubic(x: number) { return 1 - Math.pow(1 - x, 3) } function easeInCubic(x: number) { return x * x * x } interface AnimateOpts { start?: number end?: number duration?: number delay?: number ease?: (t: number) => number onUpdate: (v: number) => void onEnd?: () => void } function animateValue({ start = 0, end = 100, duration = 1000, delay = 0, ease = easeOutCubic, onUpdate, onEnd, }: AnimateOpts) { const t0 = performance.now() + delay function tick() { const elapsed = performance.now() - t0 const t = Math.min(elapsed / duration, 1) onUpdate(start + (end - start) * ease(t)) if (t < 1) requestAnimationFrame(tick) else if (onEnd) onEnd() } setTimeout(() => requestAnimationFrame(tick), delay) } const GRADIENT_POSITIONS = [ "80% 55%", "69% 34%", "8% 6%", "41% 38%", "86% 85%", "82% 18%", "51% 4%", ] const COLOR_MAP = [0, 1, 2, 0, 1, 2, 1] function buildMeshGradients(colors: string[]): string[] { const gradients: string[] = [] for (let i = 0; i < 7; i++) { const c = colors[Math.min(COLOR_MAP[i], colors.length - 1)] gradients.push( `radial-gradient(at ${GRADIENT_POSITIONS[i]}, ${c} 0px, transparent 50%)` ) } gradients.push(`linear-gradient(${colors[0]} 0 100%)`) return gradients } export default function BorderGlow({ children, className = "", edgeSensitivity = 30, glowColor, backgroundColor = "var(--primary)", glowRadius = 40, glowIntensity = 1.0, coneSpread = 25, animated = false, colors = ["var(--primary)", "var(--primary)", "var(--primary)"], fillOpacity = 0.35, }: BorderGlowProps) { const cardRef = useRef(null) const [isHovered, setIsHovered] = useState(false) const [cursorAngle, setCursorAngle] = useState(45) const [edgeProximity, setEdgeProximity] = useState(0) const [sweepActive, setSweepActive] = useState(false) const [internalGlowColor, setInternalGlowColor] = useState("221 100 64") const resolvedGlowColor = glowColor || internalGlowColor useEffect(() => { if (glowColor) return const update = () => { requestAnimationFrame(() => { const hsl = readPrimaryAsHSL() if (hsl) setInternalGlowColor(hsl) }) } update() const observer = new MutationObserver((mutations) => { for (const m of mutations) { if ( m.type === "attributes" && (m.attributeName === "class" || m.attributeName === "style") ) { update() } } for (const m of mutations) { if (m.type === "childList") { update() } } }) observer.observe(document.body, { attributes: true, attributeFilter: ["class"], }) observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"], }) observer.observe(document.head, { childList: true, subtree: true }) return () => observer.disconnect() }, [glowColor]) const getCenterOfElement = useCallback((el: HTMLElement) => { const { width, height } = el.getBoundingClientRect() return [width / 2, height / 2] }, []) const getEdgeProximity = useCallback( (el: HTMLElement, x: number, y: number) => { const [cx, cy] = getCenterOfElement(el) const dx = x - cx const dy = y - cy let kx = Infinity let ky = Infinity if (dx !== 0) kx = cx / Math.abs(dx) if (dy !== 0) ky = cy / Math.abs(dy) return Math.min(Math.max(1 / Math.min(kx, ky), 0), 1) }, [getCenterOfElement] ) const getCursorAngle = useCallback( (el: HTMLElement, x: number, y: number) => { const [cx, cy] = getCenterOfElement(el) const dx = x - cx const dy = y - cy if (dx === 0 && dy === 0) return 0 const radians = Math.atan2(dy, dx) let degrees = radians * (180 / Math.PI) + 90 if (degrees < 0) degrees += 360 return degrees }, [getCenterOfElement] ) const handlePointerMove = useCallback( (e: PointerEvent) => { const card = cardRef.current if (!card) return const rect = card.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top setEdgeProximity(getEdgeProximity(card, x, y)) setCursorAngle(getCursorAngle(card, x, y)) }, [getEdgeProximity, getCursorAngle] ) useEffect(() => { if (!animated) return const angleStart = 110 const angleEnd = 465 setTimeout(() => setSweepActive(true), 0) setTimeout(() => setCursorAngle(angleStart), 0) animateValue({ duration: 500, onUpdate: (v) => setEdgeProximity(v / 100) }) animateValue({ ease: easeInCubic, duration: 1500, end: 50, onUpdate: (v) => { setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart) }, }) animateValue({ ease: easeOutCubic, delay: 1500, duration: 2250, start: 50, end: 100, onUpdate: (v) => { setCursorAngle((angleEnd - angleStart) * (v / 100) + angleStart) }, }) animateValue({ ease: easeInCubic, delay: 2500, duration: 1500, start: 100, end: 0, onUpdate: (v) => setEdgeProximity(v / 100), onEnd: () => setSweepActive(false), }) }, [animated]) const colorSensitivity = edgeSensitivity + 20 const isVisible = isHovered || sweepActive const borderOpacity = Math.max( isVisible ? Math.max( 0, (edgeProximity * 100 - colorSensitivity) / (100 - colorSensitivity) ) : 0.12, 0.12 ) const glowOpacity = isVisible ? Math.max( 0, (edgeProximity * 100 - edgeSensitivity) / (100 - edgeSensitivity) ) : 0.07 const meshGradients = buildMeshGradients(colors) const borderBg = meshGradients.map((g) => `${g} border-box`) const fillBg = meshGradients.map((g) => `${g} padding-box`) const angleDeg = `${cursorAngle.toFixed(3)}deg` return (

setIsHovered(true)} onPointerLeave={() => setIsHovered(false)} className={`rounded-[inherit]] relative isolate grid ${className}`} style={{ background: backgroundColor, transform: "translate3d(0, 0, 0.01px)", }} >

{children}

) } 54:T1683,// types import type { SVGAttributes } from "react" // ------------------------------ | BUTTONGROUP | ------------------------------ // export default function ButtonGroup(props: SVGAttributes) { return ( ) } 55:T1fb2,// types import type { SVGAttributes } from "react" // ------------------------------ | INPUTOTP | ------------------------------ // export default function InputOtp(props: SVGAttributes) { return ( ) } 56:T18a2,// types import type { SVGAttributes } from "react" // ------------------------------ | TOGGLEGROUP | ------------------------------ // export default function ToggleGroup(props: SVGAttributes) { return ( ) } 57:T1229,// types import type { SVGAttributes } from "react" // ------------------------------ | BUTTON | ------------------------------ // export default function Button(props: SVGAttributes) { return ( ) } 58:T1409,// types import type { SVGAttributes } from "react" // ------------------------------ | ITEM | ------------------------------ // export default function Item(props: SVGAttributes) { return ( ) } 59:T11ba,// types import type { SVGAttributes } from "react" // ------------------------------ | SWITCH | ------------------------------ // export default function Switch(props: SVGAttributes) { return ( ) } 4e:["$","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","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","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":"@tabler/icons-react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L4f",null,{"namespace":"@uiable","registryDependencies":["@uiable/button","@uiable/card","@uiable/separator"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/uiable/blocks/landing/component-1/component-1.tsx","content":"$51","type":"registry:component","target":"@components/uiable/blocks/landing/component-1/component-1.tsx"},{"path":"src/category-counts.json","content":"$52","type":"registry:file","target":"src/category-counts.json"},{"path":"src/components/animation/BorderGlow.tsx","content":"$53","type":"registry:component","target":"@components/animation/BorderGlow.tsx"},{"path":"src/components/uiable/blocks/landing/components/SectionHeader.tsx","content":"// third-party\nimport { cn } from \"cn\"\n\n// types\ninterface SectionHeaderProps {\n title: string\n subtitle: string\n className?: string\n titleClassName?: string\n subtitleClassName?: string\n}\n\n// ------------------------------ | BLOCK - SECTION HEADER | ------------------------------ //\n\nexport default function SectionHeader({\n title,\n subtitle,\n className,\n titleClassName,\n subtitleClassName,\n}: SectionHeaderProps) {\n return (\n

\n \n {title}\n \n\n \n {subtitle}\n

\n )\n}\n","type":"registry:component","target":"@components/uiable/blocks/landing/components/SectionHeader.tsx"},{"path":"src/images/svg/ButtonGroup.tsx","content":"$54","type":"registry:component","target":"src/images/svg/ButtonGroup.tsx"},{"path":"src/images/svg/InputOtp.tsx","content":"$55","type":"registry:component","target":"src/images/svg/InputOtp.tsx"},{"path":"src/images/svg/ToggleGroup.tsx","content":"$56","type":"registry:component","target":"src/images/svg/ToggleGroup.tsx"},{"path":"src/images/svg/button.tsx","content":"$57","type":"registry:component","target":"src/images/svg/button.tsx"},{"path":"src/images/svg/item.tsx","content":"$58","type":"registry:component","target":"src/images/svg/item.tsx"},{"path":"src/images/svg/switch.tsx","content":"$59","type":"registry:component","target":"src/images/svg/switch.tsx"}],"className":"h-[70svh] min-h-80"}]]}]