{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tag",
  "title": "Tag",
  "description": "Rounded outlined tags with six built-in pastel variants and an optional stacked group layout.",
  "dependencies": [
    "nucleo-arcade",
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/unlumen/tag/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  IconBolt,\n  IconCloudShowers,\n  IconCurrencyDollar,\n  IconFlower2,\n  IconMonitor,\n  IconShield,\n} from \"nucleo-arcade\";\nimport { motion, type HTMLMotionProps } from \"motion/react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type TagVariant =\n  | \"digital\"\n  | \"finance\"\n  | \"simple\"\n  | \"fast\"\n  | \"secure\"\n  | \"fluid\";\n\nexport type TagSize = \"sm\" | \"md\" | \"lg\";\n\ntype TagIcon = React.ComponentType<{ className?: string }>;\n\ntype TagVariantConfig = {\n  label: string;\n  icon: TagIcon;\n  container: string;\n  text: string;\n  iconColor: string;\n  shadowColor: string;\n};\n\nconst TAG_VARIANTS = {\n  digital: {\n    label: \"Digital\",\n    icon: IconMonitor,\n    container: \"border-[#1e6ef0] bg-[#edf4ff]\",\n    text: \"text-[#1560df]\",\n    iconColor: \"text-[#82abf5]\",\n    shadowColor: \"rgba(30,110,240,0.9)\",\n  },\n  finance: {\n    label: \"Finance\",\n    icon: IconCurrencyDollar,\n    container: \"border-[#10b877] bg-[#e8f8f2]\",\n    text: \"text-[#07936a]\",\n    iconColor: \"text-[#22b37f]\",\n    shadowColor: \"rgba(16,184,119,0.9)\",\n  },\n  simple: {\n    label: \"Simple\",\n    icon: IconFlower2,\n    container: \"border-[#8b5cf6] bg-[#f3efff]\",\n    text: \"text-[#8456ef]\",\n    iconColor: \"text-[#8e60f5]\",\n    shadowColor: \"rgba(139,92,246,0.88)\",\n  },\n  fast: {\n    label: \"Fast\",\n    icon: IconBolt,\n    container: \"border-[#ff7308] bg-[#fff3e7]\",\n    text: \"text-[#d56a0f]\",\n    iconColor: \"text-[#ff7a0f]\",\n    shadowColor: \"rgba(255,115,8,0.9)\",\n  },\n  secure: {\n    label: \"Secure\",\n    icon: IconShield,\n    container: \"border-[#2848a5] bg-[#e8eefc]\",\n    text: \"text-[#193e9d]\",\n    iconColor: \"text-[#2848a5]\",\n    shadowColor: \"rgba(40,72,165,0.9)\",\n  },\n  fluid: {\n    label: \"Fluid\",\n    icon: IconCloudShowers,\n    container: \"border-[#11b9d8] bg-[#e6f8fc]\",\n    text: \"text-[#0896b5]\",\n    iconColor: \"text-[#11b9d8]\",\n    shadowColor: \"rgba(17,185,216,0.88)\",\n  },\n} satisfies Record<TagVariant, TagVariantConfig>;\n\nconst sizeStyles: Record<\n  TagSize,\n  {\n    container: string;\n    icon: string;\n    label: string;\n  }\n> = {\n  sm: {\n    container: \"gap-2 rounded-[1.35rem] border-[2px] px-3 py-2\",\n    icon: \"size-4\",\n    label: \"text-base\",\n  },\n  md: {\n    container: \"gap-3 rounded-[1.8rem] border-[3px] px-4 py-2.5\",\n    icon: \"size-5\",\n    label: \"text-[2rem] leading-none\",\n  },\n  lg: {\n    container: \"gap-4 rounded-[2.1rem] border-[3px] px-5 py-3\",\n    icon: \"size-6\",\n    label: \"text-[2.25rem] leading-none\",\n  },\n};\n\nexport interface TagProps extends Omit<HTMLMotionProps<\"div\">, \"style\"> {\n  label?: string;\n  variant?: TagVariant;\n  size?: TagSize;\n  icon?: React.ReactNode;\n  animated?: boolean;\n}\n\nexport type TagGroupItem = {\n  id?: string;\n  label?: string;\n  variant: TagVariant;\n  icon?: React.ReactNode;\n};\n\nexport interface TagGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  items?: TagGroupItem[];\n  size?: TagSize;\n  animated?: boolean;\n  staggerDelay?: number;\n}\n\nexport const defaultTagItems: TagGroupItem[] = [\n  { variant: \"digital\" },\n  { variant: \"finance\" },\n  { variant: \"simple\" },\n  { variant: \"fast\" },\n  { variant: \"secure\" },\n  { variant: \"fluid\" },\n];\n\nexport const tagVariants = Object.keys(TAG_VARIANTS) as TagVariant[];\n\nexport function Tag({\n  label,\n  variant = \"digital\",\n  size = \"md\",\n  icon,\n  animated = true,\n  className,\n  ...props\n}: Readonly<TagProps>) {\n  const config = TAG_VARIANTS[variant];\n  const sizeStyle = sizeStyles[size];\n  const Icon = config.icon;\n  const baseShadow = `-3px 6px 0 0 ${config.shadowColor}`;\n  const hoverShadow = `-1.5px 3px 0 0 ${config.shadowColor}`;\n  const pressedShadow = `0px 0px 0 0 ${config.shadowColor}`;\n\n  return (\n    <motion.div\n      initial={\n        animated\n          ? {\n              x: 0,\n              y: 0,\n              boxShadow: baseShadow,\n            }\n          : undefined\n      }\n      animate={\n        animated\n          ? {\n              x: 0,\n              y: 0,\n              boxShadow: baseShadow,\n            }\n          : undefined\n      }\n      whileHover={\n        animated\n          ? {\n              x: -3,\n              y: 4,\n              boxShadow: hoverShadow,\n            }\n          : undefined\n      }\n      whileTap={\n        animated\n          ? {\n              x: -8,\n              y: 8,\n              boxShadow: pressedShadow,\n            }\n          : undefined\n      }\n      transition={{ type: \"spring\", stiffness: 360, damping: 24, mass: 0.6 }}\n      className={cn(\n        \"inline-flex w-fit items-center font-medium tracking-[-0.045em]\",\n        \"select-none border-solid backdrop-blur-sm\",\n        sizeStyle.container,\n        config.container,\n        className,\n      )}\n      {...props}\n    >\n      <motion.span\n        animate={\n          animated\n            ? {\n                rotate: [0, -4, 0],\n                y: [0, -2, 0],\n              }\n            : undefined\n        }\n        transition={{ duration: 3, ease: \"easeInOut\", repeat: Infinity }}\n        className=\"inline-flex shrink-0 items-center justify-center\"\n      >\n        {icon ?? <Icon className={cn(sizeStyle.icon, config.iconColor)} />}\n      </motion.span>\n\n      <span className={cn(\"truncate\", sizeStyle.label, config.text)}>\n        {label ?? config.label}\n      </span>\n    </motion.div>\n  );\n}\n\nexport function TagGroup({\n  items = defaultTagItems,\n  size = \"md\",\n  animated = true,\n  staggerDelay = 0.08,\n  className,\n  ...props\n}: Readonly<TagGroupProps>) {\n  return (\n    <div\n      className={cn(\"flex w-full flex-col items-start gap-10\", className)}\n      {...props}\n    >\n      {items.map((item, index) => {\n        const key = item.id ?? `${item.variant}-${item.label ?? index}`;\n\n        return (\n          <motion.div\n            key={key}\n            initial={animated ? { opacity: 0, x: -18, scale: 0.96 } : false}\n            animate={animated ? { opacity: 1, x: 0, scale: 1 } : undefined}\n            transition={{\n              delay: index * staggerDelay,\n              duration: 0.45,\n              ease: [0.22, 1, 0.36, 1],\n            }}\n          >\n            <Tag\n              variant={item.variant}\n              label={item.label}\n              icon={item.icon}\n              size={size}\n              animated={animated}\n            />\n          </motion.div>\n        );\n      })}\n    </div>\n  );\n}\n",
      "type": "registry:component",
      "target": "components/unlumen-ui/tag.tsx"
    }
  ],
  "type": "registry:component"
}