{"name":"GlassIcons","title":"GlassIcons","description":"Icon set styled with frosted glass blur.","type":"registry:component","add":"when-added","files":[{"type":"registry:component","role":"file","content":"<template>\n  <div :class=\"['grid gap-[5em] grid-cols-2 md:grid-cols-3 mx-auto py-[3em] overflow-visible', className]\">\n    <button\n      v-for=\"(item, index) in items\"\n      :key=\"index\"\n      type=\"button\"\n      :aria-label=\"item.label\"\n      :class=\"[\n        'relative bg-transparent outline-none 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        class=\"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] 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        class=\"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)] transform group-hover:[transform:translateZ(2em)]\"\n        :style=\"{\n          boxShadow: '0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset'\n        }\"\n      >\n        <span class=\"m-auto w-[1.5em] h-[1.5em] flex items-center justify-center\" aria-hidden=\"true\">\n          <i :class=\"item.icon\" class=\"text-xl\"></i>\n        </span>\n      </span>\n\n      <span\n        class=\"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      >\n        {{ item.label }}\n      </span>\n    </button>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\ninterface GlassIconsItem {\n  icon: string;\n  color: string;\n  label: string;\n  customClass?: string;\n}\n\ninterface Props {\n  items: GlassIconsItem[];\n  className?: string;\n}\n\nwithDefaults(defineProps<Props>(), {\n  items: () => [],\n  className: ''\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 getBackgroundStyle = (color: string): Record<string, string> => {\n  if (gradientMapping[color]) {\n    return { background: gradientMapping[color] };\n  }\n  return { background: color };\n};\n</script>\n","path":"GlassIcons/GlassIcons.vue","_imports_":[],"registryDependencies":[],"dependencies":[],"devDependencies":[]}],"registryDependencies":[],"dependencies":[],"devDependencies":[],"categories":["Components"]}