{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GlassIcons-TS-TW",
	"title": "GlassIcons",
	"description": "Icon set styled with frosted glass blur.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:component",
			"path": "GlassIcons/GlassIcons.tsx",
			"content": "import React from 'react';\n\nexport interface GlassIconsItem {\n  icon: React.ReactElement;\n  color: string;\n  label: string;\n  customClass?: string;\n}\n\nexport interface GlassIconsProps {\n  items: GlassIconsItem[];\n  className?: string;\n}\n\nconst gradientMapping: Record<string, string> = {\n  blue: 'linear-gradient(hsl(223, 90%, 50%), hsl(208, 90%, 50%))',\n  purple: 'linear-gradient(hsl(283, 90%, 50%), hsl(268, 90%, 50%))',\n  red: 'linear-gradient(hsl(3, 90%, 50%), hsl(348, 90%, 50%))',\n  indigo: 'linear-gradient(hsl(253, 90%, 50%), hsl(238, 90%, 50%))',\n  orange: 'linear-gradient(hsl(43, 90%, 50%), hsl(28, 90%, 50%))',\n  green: 'linear-gradient(hsl(123, 90%, 40%), hsl(108, 90%, 40%))'\n};\n\nconst GlassIcons: React.FC<GlassIconsProps> = ({ items, className }) => {\n  const getBackgroundStyle = (color: string): React.CSSProperties => {\n    if (gradientMapping[color]) {\n      return { background: gradientMapping[color] };\n    }\n    return { background: color };\n  };\n\n  return (\n    <div className={`grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em] overflow-visible ${className || ''}`}>\n      {items.map((item, index) => (\n        <button\n          key={index}\n          type=\"button\"\n          aria-label={item.label}\n          className={`relative bg-transparent outline-none border-none cursor-pointer w-[4.5em] h-[4.5em] [perspective:24em] [transform-style:preserve-3d] [-webkit-tap-highlight-color:transparent] group ${\n            item.customClass || ''\n          }`}\n        >\n          <span\n            className=\"absolute top-0 left-0 w-full h-full rounded-[1.25em] block transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] origin-[100%_100%] rotate-[15deg] [will-change:transform] group-hover:[transform:rotate(25deg)_translate3d(-0.5em,-0.5em,0.5em)]\"\n            style={{\n              ...getBackgroundStyle(item.color),\n              boxShadow: '0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15)'\n            }}\n          ></span>\n\n          <span\n            className=\"absolute top-0 left-0 w-full h-full rounded-[1.25em] bg-[hsla(0,0%,100%,0.15)] transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] origin-[80%_50%] flex backdrop-blur-[0.75em] [-webkit-backdrop-filter:blur(0.75em)] [-moz-backdrop-filter:blur(0.75em)] [will-change:transform] transform group-hover:[transform:translate3d(0,0,2em)]\"\n            style={{\n              boxShadow: '0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset'\n            }}\n          >\n            <span className=\"m-auto flex h-[1.5em] w-[1.5em] items-center justify-center text-white\" aria-hidden=\"true\">\n              {item.icon}\n            </span>\n          </span>\n\n          <span className=\"absolute top-full left-0 right-0 text-center whitespace-nowrap leading-[2] text-base opacity-0 transition-[opacity,transform] duration-300 ease-[cubic-bezier(0.83,0,0.17,1)] translate-y-0 group-hover:opacity-100 group-hover:[transform:translateY(20%)]\">\n            {item.label}\n          </span>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default GlassIcons;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}