{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"liquid-weather-glass","type":"registry:component","title":"Liquid Weather Glass","description":"A liquid-weather-glass component.","dependencies":["motion"],"registryDependencies":[],"files":[{"path":"src/components/ui/liquid-weather-glass.tsx","content":"// @ts-nocheck\n'use client';\nimport React, { useState } from 'react';\nimport { motion } from 'motion/react';\nimport {cn} from \"@/lib/utils\"\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: {\n    target: { closest: (arg0: string) => any };\n  }) => {\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-sm',\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\n            ? isExpanded\n              ? 'expanded'\n              : 'collapsed'\n            : undefined,\n          onClick: expandable ? handleToggleExpansion : undefined,\n          drag: draggable,\n          dragConstraints: draggable\n            ? { left: 0, right: 0, top: 0, bottom: 0 }\n            : 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        <div className={cn('relative z-30')}>{children}</div>\n      </MotionComponent>\n    </>\n  );\n};\n","type":"registry:component"}]}