{
	"$schema": "https://ui.shadcn.com/schema/registry-item.json",
	"name": "GlassIcons-TS-CSS",
	"title": "GlassIcons",
	"description": "Icon set styled with frosted glass blur.",
	"type": "registry:component",
	"files": [
		{
			"type": "registry:file",
			"path": "GlassIcons.css",
			"target": "@components/GlassIcons.css",
			"content": ".icon-btns {\n  display: grid;\n  grid-gap: 5em;\n  grid-template-columns: repeat(2, 1fr);\n  margin: auto;\n  padding: 3em 0;\n  overflow: visible;\n}\n\n.icon-btn {\n  background-color: transparent;\n  outline: none;\n  position: relative;\n  width: 4.5em;\n  height: 4.5em;\n  perspective: 24em;\n  transform-style: preserve-3d;\n  -webkit-tap-highlight-color: transparent;\n  border: none;\n  cursor: pointer;\n}\n\n.icon-btn__back,\n.icon-btn__front,\n.icon-btn__label {\n  transition:\n    opacity 0.3s cubic-bezier(0.83, 0, 0.17, 1),\n    transform 0.3s cubic-bezier(0.83, 0, 0.17, 1);\n}\n\n.icon-btn__back,\n.icon-btn__front {\n  border-radius: 1.25em;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n}\n\n.icon-btn__back {\n  box-shadow: 0.5em -0.5em 0.75em hsla(223, 10%, 10%, 0.15);\n  display: block;\n  transform: rotate(15deg);\n  transform-origin: 100% 100%;\n  will-change: transform;\n}\n\n.icon-btn__front {\n  background-color: hsla(0, 0%, 100%, 0.15);\n  box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;\n  backdrop-filter: blur(0.75em);\n  -webkit-backdrop-filter: blur(0.75em);\n  -moz-backdrop-filter: blur(0.75em);\n  display: flex;\n  transform-origin: 80% 50%;\n  will-change: transform;\n}\n\n.icon-btn__icon {\n  margin: auto;\n  width: 1.5em;\n  height: 1.5em;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n}\n\n.icon-btn__label {\n  font-size: 1em;\n  white-space: nowrap;\n  text-align: center;\n  line-height: 2;\n  opacity: 0;\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  transform: translateY(0);\n}\n\n.icon-btn:focus-visible .icon-btn__back,\n.icon-btn:hover .icon-btn__back {\n  transform: rotate(25deg) translate3d(-0.5em, -0.5em, 0.5em);\n}\n\n.icon-btn:focus-visible .icon-btn__front,\n.icon-btn:hover .icon-btn__front {\n  transform: translate3d(0, 0, 2em);\n}\n\n.icon-btn:focus-visible .icon-btn__label,\n.icon-btn:hover .icon-btn__label {\n  opacity: 1;\n  transform: translateY(20%);\n}\n\n@media (min-width: 768px) {\n  .icon-btns {\n    grid-template-columns: repeat(3, 1fr);\n  }\n}\n"
		},
		{
			"type": "registry:component",
			"path": "GlassIcons.tsx",
			"content": "import React from 'react';\nimport './GlassIcons.css';\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={`icon-btns ${className || ''}`}>\n      {items.map((item, index) => (\n        <button key={index} type=\"button\" className={`icon-btn ${item.customClass || ''}`} aria-label={item.label}>\n          <span className=\"icon-btn__back\" style={getBackgroundStyle(item.color)}></span>\n          <span className=\"icon-btn__front\">\n            <span className=\"icon-btn__icon\" aria-hidden=\"true\">\n              {item.icon}\n            </span>\n          </span>\n          <span className=\"icon-btn__label\">{item.label}</span>\n        </button>\n      ))}\n    </div>\n  );\n};\n\nexport default GlassIcons;\n"
		}
	],
	"registryDependencies": [],
	"dependencies": []
}