{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glass-dock",
  "title": "Glass Dock",
  "description": "A dock component with glass morphism styling and smooth animations.",
  "files": [
    {
      "path": "registry/innovative/glass-dock.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\n\ninterface DockItem {\n  id: string\n  icon: React.ReactNode\n  label: string\n  href?: string\n  onClick?: () => void\n  active?: boolean\n}\n\ntype DockOrientation = \"horizontal\" | \"vertical\"\n\ninterface GlassDockProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: DockItem[]\n  magnification?: number\n  baseSize?: number\n  maxSize?: number\n  orientation?: DockOrientation\n  glassIntensity?: \"low\" | \"medium\" | \"high\"\n}\n\nconst glassConfig = {\n  low: {\n    bg: \"bg-white/5\",\n    blur: \"backdrop-blur-xl\",\n    border: \"border-white/10\",\n    itemBg: \"bg-white/5\",\n    itemHover: \"hover:bg-white/10\",\n  },\n  medium: {\n    bg: \"bg-white/10\",\n    blur: \"backdrop-blur-2xl\",\n    border: \"border-white/20\",\n    itemBg: \"bg-white/10\",\n    itemHover: \"hover:bg-white/20\",\n  },\n  high: {\n    bg: \"bg-white/15\",\n    blur: \"backdrop-blur-3xl\",\n    border: \"border-white/30\",\n    itemBg: \"bg-white/15\",\n    itemHover: \"hover:bg-white/25\",\n  },\n}\n\nconst GlassDock = React.forwardRef<HTMLDivElement, GlassDockProps>(\n  (\n    {\n      className,\n      items,\n      magnification = 1.5,\n      baseSize = 48,\n      maxSize = 72,\n      orientation = \"horizontal\",\n      glassIntensity = \"high\",\n      ...props\n    },\n    ref,\n  ) => {\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)\n    const [mousePos, setMousePos] = React.useState<number | null>(null)\n    const dockRef = React.useRef<HTMLDivElement>(null)\n    const glass = glassConfig[glassIntensity]\n    const isVertical = orientation === \"vertical\"\n\n    const handleMouseMove = React.useCallback(\n      (e: React.MouseEvent) => {\n        if (!dockRef.current) return\n        const rect = dockRef.current.getBoundingClientRect()\n        setMousePos(isVertical ? e.clientY - rect.top : e.clientX - rect.left)\n      },\n      [isVertical],\n    )\n\n    const handleMouseLeave = React.useCallback(() => {\n      setMousePos(null)\n      setHoveredIndex(null)\n    }, [])\n\n    const getScale = React.useCallback(\n      (index: number) => {\n        if (mousePos === null) return 1\n\n        const itemSize = baseSize + 16\n        const itemCenter = index * itemSize + itemSize / 2\n        const distance = Math.abs(mousePos - itemCenter)\n        const maxDistance = itemSize * 2\n\n        if (distance > maxDistance) return 1\n\n        const scale = 1 + (magnification - 1) * (1 - distance / maxDistance)\n        return Math.min(scale, magnification)\n      },\n      [mousePos, baseSize, magnification],\n    )\n\n    return (\n      <div ref={ref} className={cn(\"relative\", className)} {...props}>\n        <div\n          className={cn(\n            \"absolute rounded-3xl opacity-60 blur-2xl\",\n            \"bg-linear-to-r from-cyan-500/30 via-blue-500/25 to-purple-500/30\",\n            isVertical ? \"-inset-y-4 -inset-x-6\" : \"-inset-x-4 -inset-y-6\",\n          )}\n        />\n        <div\n          className={cn(\n            \"absolute rounded-3xl opacity-40 blur-xl\",\n            \"bg-linear-to-r from-white/20 to-white/10\",\n            isVertical ? \"-inset-y-2 -inset-x-3\" : \"-inset-x-2 -inset-y-3\",\n          )}\n        />\n\n        <div\n          ref={dockRef}\n          onMouseMove={handleMouseMove}\n          onMouseLeave={handleMouseLeave}\n          role=\"toolbar\"\n          aria-label=\"Application dock\"\n          className={cn(\n            \"relative gap-2 px-4 py-3 rounded-2xl\",\n            glass.bg,\n            glass.blur,\n            glass.border,\n            \"border\",\n            \"shadow-[0_8px_32px_rgba(0,0,0,0.3),inset_0_1px_1px_rgba(255,255,255,0.2),inset_0_-1px_1px_rgba(0,0,0,0.1)]\",\n            isVertical ? \"flex flex-col items-center\" : \"flex items-end\",\n          )}\n        >\n          <div className=\"absolute inset-0 rounded-2xl bg-linear-to-b from-white/20 via-white/5 to-transparent pointer-events-none\" />\n          <div className=\"absolute inset-0 rounded-2xl bg-linear-to-tr from-transparent via-white/5 to-white/15 pointer-events-none\" />\n          <div className=\"absolute inset-x-0 top-0 h-px bg-linear-to-r from-transparent via-white/40 to-transparent pointer-events-none\" />\n\n          <div className=\"absolute inset-0 rounded-2xl shadow-[inset_0_2px_4px_rgba(0,0,0,0.1)] pointer-events-none\" />\n\n          {items.map((item, index) => {\n            const scale = getScale(index)\n            const isHovered = hoveredIndex === index\n            const size = baseSize * scale\n\n            const DockItemContent = (\n              <div\n                key={item.id}\n                className={cn(\"relative flex items-center\", isVertical ? \"flex-row\" : \"flex-col\")}\n                onMouseEnter={() => setHoveredIndex(index)}\n                style={{\n                  [isVertical ? \"width\" : \"height\"]: maxSize,\n                  display: \"flex\",\n                  [isVertical ? \"justifyContent\" : \"alignItems\"]: \"flex-end\",\n                }}\n              >\n                <div\n                  className={cn(\n                    \"absolute px-3 py-1.5 rounded-xl\",\n                    \"bg-white/15 backdrop-blur-2xl border border-white/30\",\n                    \"text-white text-sm font-medium whitespace-nowrap\",\n                    \"shadow-[0_4px_16px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.2)]\",\n                    \"transition-all duration-200\",\n                    isVertical\n                      ? cn(\n                          \"-right-2 translate-x-full\",\n                          isHovered ? \"opacity-100 translate-x-full\" : \"opacity-0 translate-x-[calc(100%-8px)]\",\n                        )\n                      : cn(\"-top-12\", isHovered ? \"opacity-100 translate-y-0\" : \"opacity-0 translate-y-2\"),\n                    !isHovered && \"pointer-events-none\",\n                  )}\n                >\n                  {/* Tooltip glass highlight */}\n                  <div className=\"absolute inset-0 rounded-xl bg-linear-to-b from-white/15 to-transparent pointer-events-none\" />\n                  <span className=\"relative\">{item.label}</span>\n                  <div\n                    className={cn(\n                      \"absolute w-2.5 h-2.5 bg-white/15 backdrop-blur-2xl border border-white/30\",\n                      \"transform rotate-45\",\n                      isVertical\n                        ? \"left-0 top-1/2 -translate-x-1/2 -translate-y-1/2 border-t-0 border-r-0\"\n                        : \"left-1/2 -bottom-1.5 -translate-x-1/2 border-t-0 border-l-0\",\n                    )}\n                  />\n                </div>\n\n                <button\n                  onClick={item.onClick}\n                  aria-label={item.label}\n                  className={cn(\n                    \"relative flex items-center justify-center rounded-xl\",\n                    glass.itemBg,\n                    \"backdrop-blur-xl border border-white/20\",\n                    \"transition-all duration-200 ease-out\",\n                    glass.itemHover,\n                    \"shadow-[0_2px_8px_rgba(0,0,0,0.15),inset_0_1px_1px_rgba(255,255,255,0.15)]\",\n                    item.active &&\n                      \"bg-white/25 border-white/40 shadow-[0_4px_16px_rgba(0,0,0,0.2),inset_0_1px_1px_rgba(255,255,255,0.3)]\",\n                  )}\n                  style={{\n                    width: size,\n                    height: size,\n                    transform: isVertical\n                      ? `translateX(${(maxSize - size) / 2}px)`\n                      : `translateY(${(maxSize - size) / 2}px)`,\n                  }}\n                >\n                  {/* Button glass highlights */}\n                  <div className=\"absolute inset-0 rounded-xl bg-linear-to-b from-white/20 to-transparent pointer-events-none\" />\n                  <div className=\"absolute inset-0 rounded-xl bg-linear-to-tr from-transparent to-white/10 pointer-events-none\" />\n\n                  {/* Active glow */}\n                  {item.active && (\n                    <div className=\"absolute -inset-1.5 rounded-2xl bg-linear-to-r from-cyan-500/40 to-blue-500/40 blur-md -z-10\" />\n                  )}\n\n                  <span\n                    className=\"relative text-white/90\"\n                    style={{\n                      transform: `scale(${scale})`,\n                      transition: \"transform 0.2s ease-out\",\n                    }}\n                  >\n                    {item.icon}\n                  </span>\n                </button>\n\n                {item.active && (\n                  <div\n                    className={cn(\n                      \"absolute w-1.5 h-1.5 rounded-full\",\n                      \"bg-linear-to-r from-cyan-400 to-blue-400\",\n                      \"shadow-[0_0_8px_rgba(6,182,212,0.8),0_0_16px_rgba(6,182,212,0.4)]\",\n                      isVertical ? \"-left-1\" : \"-bottom-1\",\n                    )}\n                  />\n                )}\n              </div>\n            )\n\n            if (item.href) {\n              return (\n                <a key={item.id} href={item.href} className=\"contents\">\n                  {DockItemContent}\n                </a>\n              )\n            }\n\n            return <React.Fragment key={item.id}>{DockItemContent}</React.Fragment>\n          })}\n        </div>\n      </div>\n    )\n  },\n)\nGlassDock.displayName = \"GlassDock\"\n\nexport { GlassDock }\nexport type { DockItem, DockOrientation }\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}