4e: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"] 4f: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"] 50:T18ad,"use client"; import * as React from "react"; import { IconBolt, IconCloudShowers, IconCurrencyDollar, IconFlower2, IconMonitor, IconShield, } from "nucleo-arcade"; import { motion, type HTMLMotionProps } from "motion/react"; import { cn } from "@/lib/utils"; export type TagVariant = | "digital" | "finance" | "simple" | "fast" | "secure" | "fluid"; export type TagSize = "sm" | "md" | "lg"; type TagIcon = React.ComponentType<{ className?: string }>; type TagVariantConfig = { label: string; icon: TagIcon; container: string; text: string; iconColor: string; shadowColor: string; }; const TAG_VARIANTS = { digital: { label: "Digital", icon: IconMonitor, container: "border-[#1e6ef0] bg-[#edf4ff]", text: "text-[#1560df]", iconColor: "text-[#82abf5]", shadowColor: "rgba(30,110,240,0.9)", }, finance: { label: "Finance", icon: IconCurrencyDollar, container: "border-[#10b877] bg-[#e8f8f2]", text: "text-[#07936a]", iconColor: "text-[#22b37f]", shadowColor: "rgba(16,184,119,0.9)", }, simple: { label: "Simple", icon: IconFlower2, container: "border-[#8b5cf6] bg-[#f3efff]", text: "text-[#8456ef]", iconColor: "text-[#8e60f5]", shadowColor: "rgba(139,92,246,0.88)", }, fast: { label: "Fast", icon: IconBolt, container: "border-[#ff7308] bg-[#fff3e7]", text: "text-[#d56a0f]", iconColor: "text-[#ff7a0f]", shadowColor: "rgba(255,115,8,0.9)", }, secure: { label: "Secure", icon: IconShield, container: "border-[#2848a5] bg-[#e8eefc]", text: "text-[#193e9d]", iconColor: "text-[#2848a5]", shadowColor: "rgba(40,72,165,0.9)", }, fluid: { label: "Fluid", icon: IconCloudShowers, container: "border-[#11b9d8] bg-[#e6f8fc]", text: "text-[#0896b5]", iconColor: "text-[#11b9d8]", shadowColor: "rgba(17,185,216,0.88)", }, } satisfies Record; const sizeStyles: Record< TagSize, { container: string; icon: string; label: string; } > = { sm: { container: "gap-2 rounded-[1.35rem] border-[2px] px-3 py-2", icon: "size-4", label: "text-base", }, md: { container: "gap-3 rounded-[1.8rem] border-[3px] px-4 py-2.5", icon: "size-5", label: "text-[2rem] leading-none", }, lg: { container: "gap-4 rounded-[2.1rem] border-[3px] px-5 py-3", icon: "size-6", label: "text-[2.25rem] leading-none", }, }; export interface TagProps extends Omit, "style"> { label?: string; variant?: TagVariant; size?: TagSize; icon?: React.ReactNode; animated?: boolean; } export type TagGroupItem = { id?: string; label?: string; variant: TagVariant; icon?: React.ReactNode; }; export interface TagGroupProps extends React.HTMLAttributes { items?: TagGroupItem[]; size?: TagSize; animated?: boolean; staggerDelay?: number; } export const defaultTagItems: TagGroupItem[] = [ { variant: "digital" }, { variant: "finance" }, { variant: "simple" }, { variant: "fast" }, { variant: "secure" }, { variant: "fluid" }, ]; export const tagVariants = Object.keys(TAG_VARIANTS) as TagVariant[]; export function Tag({ label, variant = "digital", size = "md", icon, animated = true, className, ...props }: Readonly) { const config = TAG_VARIANTS[variant]; const sizeStyle = sizeStyles[size]; const Icon = config.icon; const baseShadow = `-3px 6px 0 0 ${config.shadowColor}`; const hoverShadow = `-1.5px 3px 0 0 ${config.shadowColor}`; const pressedShadow = `0px 0px 0 0 ${config.shadowColor}`; return ( {icon ?? } {label ?? config.label} ); } export function TagGroup({ items = defaultTagItems, size = "md", animated = true, staggerDelay = 0.08, className, ...props }: Readonly) { return (

{items.map((item, index) => { const key = item.id ?? `${item.variant}-${item.label ?? index}`; return ( ); })}

); } 4d:["$","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","nucleo-arcade",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/nucleo-arcade","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":"nucleo-arcade"}]]}]}],["$","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"}]]}]}]]}],["$","$L4e",null,{"namespace":"@unlumen-ui","registryDependencies":[]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/components/unlumen/tag/index.tsx","content":"$50","type":"registry:component","target":"components/unlumen-ui/tag.tsx"}],"className":"h-[70svh] min-h-80"}]]}]