{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-glass-weather",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./registry/components/liquid-glass/weather-liquid.tsx",
      "content": "import { LiquidGlassCard } from '@/components/ui/liquid-glass';\nimport { Cloud, CloudRain, CloudSun, CloudSunRain, MapPin, Sun } from 'lucide-react';\n\nconst WeatherLiquid = () => {\n  return (\n    <>\n      <div\n        className='p-8 relative z-30 w-full gap-8 py-16 rounded-xl'\n        style={{\n          background:\n            'url(\"https://images.unsplash.com/photo-1590867286251-8e26d9f255c0?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D\") center / cover no-repeat',\n        }}\n      >\n        <div className='grid w-full max-w-xl grid-cols-2 gap-4 mx-auto'>\n          {/* Hourly Forecast Card */}\n          <LiquidGlassCard\n            shadowIntensity='xs'\n            borderRadius='8px'\n            glowIntensity='none'\n            className='col-span-2 p-6 text-white bg-white/8'\n          >\n            <div className='flex justify-between relative z-30 text-sm font-medium'>\n              <div className='flex flex-col items-center gap-2'>\n                <span>16:00</span>\n                <Cloud className='h-6 w-6 fill-white' />\n                <span>+18°</span>\n              </div>\n              <div className='flex flex-col items-center gap-2'>\n                <span>17:00</span>\n                <Cloud className='h-6 w-6 fill-white' />\n                <span>+18°</span>\n              </div>\n              <div className='flex flex-col items-center gap-2'>\n                <span>18:00</span>\n                <CloudRain className='h-6 w-6' />\n                <span>+16°</span>\n              </div>\n              <div className='flex flex-col items-center gap-2'>\n                <span>19:00</span>\n                <CloudRain className='h-6 w-6' />\n                <span>+14°</span>\n              </div>\n              <div className='flex flex-col items-center gap-2'>\n                <span>20:00</span>\n                <CloudSun className='h-6 w-6 fill-white' />\n                <span>+15°</span>\n              </div>\n              <div className='flex flex-col items-center gap-2'>\n                <span>21:00</span>\n                <CloudSunRain className='h-6 w-6' />\n                <span>+14°</span>\n              </div>\n            </div>\n          </LiquidGlassCard>\n\n          {/* Current Weather Card */}\n          <LiquidGlassCard\n            shadowIntensity='xs'\n            borderRadius='8px'\n            glowIntensity='none'\n            className='rounded-3xl p-6 text-white bg-white/8 '\n          >\n            <div className='relative z-30 flex flex-col items-start justify-center h-full w-full'>\n              <div className='text-6xl font-semibold'>+18°C</div>\n              <div className='text-lg'>Cloudy +18°/+5°</div>\n            </div>\n          </LiquidGlassCard>\n\n          {/* Time and Location Card */}\n          <LiquidGlassCard\n            shadowIntensity='xs'\n            borderRadius='8px'\n            glowIntensity='none'\n            className='rounded-3xl p-6 text-white bg-white/8'\n          >\n            <div className='relative z-30 flex flex-col items-start justify-center h-full w-full'>\n              <div className='text-6xl font-semibold'>17:32</div>\n              <div className='text-lg'>Sun, November 19</div>\n              <button className='mt-4 inline-flex items-center gap-1 rounded-full bg-black/10 backdrop-blur-xl px-2 py-1 text-sm font-medium'>\n                <MapPin className='h-4 w-4' />\n                Tbilisi\n              </button>\n            </div>\n          </LiquidGlassCard>\n\n          {/* Daily Forecast Card */}\n          <LiquidGlassCard\n            shadowIntensity='xs'\n            borderRadius='8px'\n            glowIntensity='none'\n            className='col-span-2 rounded-3xl bg-white/8 p-6 text-white'\n          >\n            <div className='relative z-30 flex flex-col gap-4 h-full w-full'>\n              <div className='flex items-center justify-between'>\n                <div className='flex items-center gap-2'>\n                  <Sun className='h-6 w-6 fill-white' />\n                  <span>Tue, 7 Sep</span>\n                </div>\n                <span className='text-lg'>+18°/+4°</span>\n              </div>\n              <div className='flex items-center justify-between'>\n                <div className='flex items-center gap-2'>\n                  <Cloud className='h-6 w-6 fill-white' />\n                  <span>Wed, 8 Sep</span>\n                </div>\n                <span className='text-lg'>+20°/+6°</span>\n              </div>\n              <div className='flex items-center justify-between'>\n                <div className='flex items-center gap-2'>\n                  <CloudRain className='h-6 w-6' />\n                  <span>Thu, 9 Sep</span>\n                </div>\n                <span className='text-lg'>+17°/+3°</span>\n              </div>\n              <div className='flex items-center justify-between'>\n                <div className='flex items-center gap-2'>\n                  <Sun className='h-6 w-6 fill-white' />\n                  <span>Fri, 10 Sep</span>\n                </div>\n                <span className='text-lg'>+22°/+10°</span>\n              </div>\n              <div className='flex items-center justify-between'>\n                <div className='flex items-center gap-2'>\n                  <CloudRain className='h-6 w-6' />\n                  <span>Sat, 11 Sep</span>\n                </div>\n                <span className='text-lg'>+16°/+5°</span>\n              </div>\n            </div>\n          </LiquidGlassCard>\n        </div>\n      </div>\n    </>\n  );\n};\n\nexport default WeatherLiquid;\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"
}