{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-glass-sidebar-menu",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/liquid-glass/sidebar-menu.tsx",
      "content": "import { LiquidGlassCard } from '@/components/ui/liquid-glass';\nimport { cn } from '@/lib/utils';\nimport { BarChart2, Bell, Home, Search, Settings } from 'lucide-react';\n\nconst SidebarMenu = ({ className }: { className?: string }) => {\n  return (\n    <>\n      <div\n        className={cn('p-8 flex w-full py-20 rounded-xl items-center justify-center', className)}\n        style={{\n          background:\n            'url(\"https://images.unsplash.com/photo-1752440093057-1c188e7137e9?q=80&w=764&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\") center / cover no-repeat',\n        }}\n      >\n        <LiquidGlassCard\n          glowIntensity='sm'\n          shadowIntensity='sm'\n          borderRadius='12px'\n          blurIntensity='sm'\n          draggable\n          className='p-4 w-[280px]'\n        >\n          <nav className='space-y-2 w-full relative z-30 '>\n            <button\n              className='w-full flex items-center gap-3 px-4 py-3 rounded-xl bg-white text-neutral-800 font-medium transition-colors hover:bg-neutral-100'\n              aria-current='page'\n            >\n              <Home className='w-5 h-5' />\n              <span>Dashboard</span>\n            </button>\n\n            <button className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'>\n              <Search className='w-5 h-5' />\n              <span>Search</span>\n            </button>\n\n            <button className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'>\n              <BarChart2 className='w-5 h-5' />\n              <span>Sales Analytics</span>\n            </button>\n\n            <button className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'>\n              <Bell className='w-5 h-5' />\n              <span>Notification</span>\n            </button>\n\n            <button className='w-full flex items-center gap-3 px-4 py-3 rounded-xl text-white font-medium transition-colors hover:bg-white/20'>\n              <Settings className='w-5 h-5' />\n              <span>Account Settings</span>\n            </button>\n          </nav>\n        </LiquidGlassCard>\n      </div>\n    </>\n  );\n};\n\nexport default SidebarMenu;\n",
      "type": "registry:component"
    },
    {
      "path": "./components/ui/liquid-glass.tsx",
      "content": "// @ts-nocheck\n'use client';\nimport { cn } from '@/lib/utils';\nimport { motion } from 'motion/react';\nimport type React from 'react';\nimport { useState } from 'react';\n\ninterface LiquidGlassCardProps {\n  children: React.ReactNode;\n  className?: string;\n  draggable?: boolean;\n  expandable?: boolean;\n  width?: string;\n  height?: string;\n  expandedWidth?: string;\n  expandedHeight?: string;\n  blurIntensity?: 'sm' | 'md' | 'lg' | 'xl';\n  shadowIntensity?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  borderRadius?: string;\n  glowIntensity?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n}\n\nexport const LiquidGlassCard = ({\n  children,\n  className = '',\n  draggable = true,\n  expandable = false,\n  width,\n  height,\n  expandedWidth,\n  expandedHeight,\n  blurIntensity = 'xl',\n  borderRadius = '32px',\n  glowIntensity = 'sm',\n  shadowIntensity = 'md',\n  ...props\n}: LiquidGlassCardProps) => {\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const handleToggleExpansion = (e: { target: { closest: (arg0: string) => any } }) => {\n    if (!expandable) return;\n    // Don't toggle if clicking on interactive elements\n    if (e.target.closest('a, button, input, select, textarea')) return;\n    setIsExpanded(!isExpanded);\n  };\n\n  const blurClasses = {\n    sm: 'backdrop-blur-xs',\n    md: 'backdrop-blur-md',\n    lg: 'backdrop-blur-lg',\n    xl: 'backdrop-blur-xl',\n  };\n\n  const shadowStyles = {\n    none: 'inset 0 0 0 0 rgba(255, 255, 255, 0)',\n    xs: 'inset 1px 1px 1px 0 rgba(255, 255, 255, 0.3), inset -1px -1px 1px 0 rgba(255, 255, 255, 0.3)',\n    sm: 'inset 2px 2px 2px 0 rgba(255, 255, 255, 0.35), inset -2px -2px 2px 0 rgba(255, 255, 255, 0.35)',\n    md: 'inset 3px 3px 3px 0 rgba(255, 255, 255, 0.45), inset -3px -3px 3px 0 rgba(255, 255, 255, 0.45)',\n    lg: 'inset 4px 4px 4px 0 rgba(255, 255, 255, 0.5), inset -4px -4px 4px 0 rgba(255, 255, 255, 0.5)',\n    xl: 'inset 6px 6px 6px 0 rgba(255, 255, 255, 0.55), inset -6px -6px 6px 0 rgba(255, 255, 255, 0.55)',\n    '2xl':\n      'inset 8px 8px 8px 0 rgba(255, 255, 255, 0.6), inset -8px -8px 8px 0 rgba(255, 255, 255, 0.6)',\n  };\n\n  const glowStyles = {\n    none: '0 4px 4px rgba(0, 0, 0, 0.05), 0 0 12px rgba(0, 0, 0, 0.05)',\n    xs: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 16px rgba(255, 255, 255, 0.05)',\n    sm: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 24px rgba(255, 255, 255, 0.1)',\n    md: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 32px rgba(255, 255, 255, 0.15)',\n    lg: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 40px rgba(255, 255, 255, 0.2)',\n    xl: '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 48px rgba(255, 255, 255, 0.25)',\n    '2xl':\n      '0 4px 4px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.08), 0 0 60px rgba(255, 255, 255, 0.3)',\n  };\n\n  const containerVariants = expandable\n    ? {\n        collapsed: {\n          width: width || 'auto',\n          height: height || 'auto',\n          transition: {\n            duration: 0.4,\n            ease: [0.5, 1.5, 0.5, 1],\n          },\n        },\n        expanded: {\n          width: expandedWidth || 'auto',\n          height: expandedHeight || 'auto',\n          transition: {\n            duration: 0.4,\n            ease: [0.5, 1.5, 0.5, 1],\n          },\n        },\n      }\n    : {};\n\n  const MotionComponent = draggable || expandable ? motion.div : 'div';\n\n  const motionProps =\n    draggable || expandable\n      ? {\n          variants: expandable ? containerVariants : undefined,\n          animate: expandable ? (isExpanded ? 'expanded' : 'collapsed') : undefined,\n          onClick: expandable ? handleToggleExpansion : undefined,\n          drag: draggable,\n          dragConstraints: draggable ? { left: 0, right: 0, top: 0, bottom: 0 } : undefined,\n          dragElastic: draggable ? 0.3 : undefined,\n          dragTransition: draggable\n            ? {\n                bounceStiffness: 300,\n                bounceDamping: 10,\n                power: 0.3,\n              }\n            : undefined,\n          whileDrag: draggable ? { scale: 1.02 } : undefined,\n          whileHover: { scale: 1.01 },\n          whileTap: { scale: 0.98 },\n        }\n      : {};\n\n  return (\n    <>\n      {/* Hidden SVG Filter */}\n      <svg className='hidden'>\n        <defs>\n          <filter\n            id='glass-blur'\n            x='0'\n            y='0'\n            width='100%'\n            height='100%'\n            filterUnits='objectBoundingBox'\n          >\n            <feTurbulence\n              type='fractalNoise'\n              baseFrequency='0.003 0.007'\n              numOctaves='1'\n              result='turbulence'\n            />\n            <feDisplacementMap\n              in='SourceGraphic'\n              in2='turbulence'\n              scale='200'\n              xChannelSelector='R'\n              yChannelSelector='G'\n            />\n          </filter>\n        </defs>\n      </svg>\n      <MotionComponent\n        className={cn(\n          `relative ${draggable ? 'cursor-grab active:cursor-grabbing' : ''} ${expandable ? 'cursor-pointer' : ''}`,\n          className\n        )}\n        style={{\n          borderRadius,\n          ...(width && !expandable && { width }),\n          ...(height && !expandable && { height }),\n        }}\n        {...motionProps}\n        {...props}\n      >\n        {/* Bend Layer (Backdrop blur with distortion) */}\n        <div\n          className={`absolute inset-0 ${blurClasses[blurIntensity]} z-0`}\n          style={{\n            borderRadius,\n            filter: 'url(#glass-blur)',\n          }}\n        />\n\n        {/* Face Layer (Main shadow and glow) */}\n        <div\n          className='absolute inset-0 z-10'\n          style={{\n            borderRadius,\n            boxShadow: glowStyles[glowIntensity],\n          }}\n        />\n\n        {/* Edge Layer (Inner highlights) */}\n        <div\n          className='absolute inset-0 z-20'\n          style={{\n            borderRadius,\n            boxShadow: shadowStyles[shadowIntensity],\n          }}\n        />\n\n        {/* Content */}\n        {children}\n      </MotionComponent>\n    </>\n  );\n};\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}