{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ui-liquid-glass",
  "title": "UI Liquid Glass",
  "author": "AlgorizeTech",
  "description": "TODO: describe ui-liquid-glass. Generated placeholder.",
  "dependencies": [],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "src/components/custom/ui/liquid-glass.tsx",
      "content": "\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface LiquidGlassSvgFilterProps {\n  id?: string;\n  baseFrequency?: string;\n  scale?: number;\n  bgImage?: string;\n}\n\nexport function LiquidGlassSvgFilter({\n  id = \"glass-blur-ai\",\n  baseFrequency = \"0.003 0.007\",\n  scale = 200,\n  bgImage = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\",\n}: LiquidGlassSvgFilterProps) {\n  return (\n    <>\n      {bgImage && (\n        <img\n          src={bgImage}\n          alt=\"\"\n          aria-hidden=\"true\"\n          style={{\n            position: \"fixed\",\n            top: \"-9999px\",\n            left: \"-9999px\",\n            width: \"1px\",\n            height: \"1px\",\n            opacity: 0,\n            pointerEvents: \"none\",\n          }}\n        />\n      )}\n      <svg\n        style={{\n          position: \"fixed\",\n          top: \"-9999px\",\n          left: \"-9999px\",\n          width: 0,\n          height: 0,\n          pointerEvents: \"none\",\n        }}\n        aria-hidden=\"true\"\n      >\n        <defs>\n          <filter\n            id={id}\n            x=\"-20%\"\n            y=\"-20%\"\n            width=\"140%\"\n            height=\"140%\"\n            filterUnits=\"objectBoundingBox\"\n          >\n            <feTurbulence\n              type=\"fractalNoise\"\n              baseFrequency={baseFrequency}\n              numOctaves=\"1\"\n              result=\"turbulence\"\n            />\n            <feDisplacementMap\n              in=\"SourceGraphic\"\n              in2=\"turbulence\"\n              scale={scale}\n              xChannelSelector=\"R\"\n              yChannelSelector=\"G\"\n            />\n          </filter>\n        </defs>\n      </svg>\n    </>\n  );\n}\n\nexport function formatRadius(radius?: string | number | boolean): string | undefined {\n  if (radius === undefined || radius === null) return undefined;\n  if (radius === false || radius === 0 || radius === \"0\" || radius === \"0px\") return \"0px\";\n  if (typeof radius === \"number\") return `${radius}px`;\n  if (typeof radius === \"string\") {\n    if (\n      radius.endsWith(\"px\") ||\n      radius.endsWith(\"rem\") ||\n      radius.endsWith(\"em\") ||\n      radius.endsWith(\"%\") ||\n      radius.includes(\"var(\") ||\n      radius.includes(\"calc(\")\n    ) {\n      return radius;\n    }\n    const parsed = parseFloat(radius);\n    if (!isNaN(parsed)) {\n      return `${parsed}px`;\n    }\n  }\n  return undefined;\n}\n\nexport interface LiquidGlassBackgroundProps {\n  className?: string;\n  style?: React.CSSProperties;\n  /**\n   * Dynamic rounding radius. Can be a number (in px), a CSS length string (\"16px\", \"1.5rem\"),\n   * or omitted to inherit the border-radius set on the parent/wrapper component.\n   */\n  radius?: string | number | boolean;\n  bgImage?: string;\n  filterId?: string;\n  showSpecularHighlight?: boolean;\n  contrastOverlayClassName?: string;\n  bgPosition?: string;\n  showOuterShadow?: boolean;\n  shadowStyle?: React.CSSProperties;\n}\n\nexport function LiquidGlassBackground({\n  className,\n  style,\n  radius,\n  bgImage = \"https://res.cloudinary.com/dodndg7ai/image/upload/f_webp,q_auto,w_1200,c_limit/v1790146209/photo-1470071459604-3b5ec3a7fe05-1790146212205.jpg\",\n  filterId = \"glass-blur-ai\",\n  showSpecularHighlight = true,\n  contrastOverlayClassName = \"bg-black/30 dark:bg-black/45 backdrop-blur-[2px]\",\n  bgPosition = \"center\",\n  showOuterShadow = true,\n  shadowStyle,\n}: LiquidGlassBackgroundProps) {\n  const formattedRadius = formatRadius(radius);\n\n  const bgStyle: React.CSSProperties = {\n    ...(formattedRadius ? { borderRadius: formattedRadius } : {}),\n    ...style,\n  };\n\n  return (\n    <div\n      style={bgStyle}\n      className={cn(\n        \"absolute inset-0 pointer-events-none z-0 rounded-[inherit] overflow-hidden isolate [contain:paint] [transform:translateZ(0)]\",\n        className\n      )}\n    >\n      {/* Inner Clipping Container for Liquid Background Stack */}\n      <div\n        className=\"absolute inset-0 overflow-hidden rounded-[inherit] pointer-events-none z-0 [mask-image:linear-gradient(white,white)] [-webkit-mask-image:-webkit-radial-gradient(white,white)]\"\n        style={formattedRadius ? { borderRadius: formattedRadius } : undefined}\n      >\n        {/* Layer 0: Liquid SVG Displaced Wave Background */}\n        <div\n          className=\"absolute -inset-10\"\n          style={{\n            backgroundImage: `url(\"${bgImage}\")`,\n            backgroundSize: \"cover\",\n            backgroundPosition: bgPosition,\n            filter: `url(#${filterId})`,\n            transform: \"scale(1.1)\",\n          }}\n        />\n\n        {/* Layer 1: Contrast overlay & soft backdrop blur */}\n        <div className={cn(\"absolute inset-0\", contrastOverlayClassName)} />\n\n        {/* Layer 2: Ambient Drop Shadow & Subtle Glow */}\n        {showOuterShadow && (\n          <div\n            className=\"absolute inset-0 rounded-[inherit]\"\n            style={{\n              boxShadow:\n                \"0 0 40px rgba(0, 0, 0, 0.35), 0 0 20px rgba(255, 255, 255, 0.08)\",\n              ...(formattedRadius ? { borderRadius: formattedRadius } : {}),\n              ...shadowStyle,\n            }}\n          />\n        )}\n      </div>\n\n      {/* Layer 3: Specular Inner Border Highlight */}\n      {showSpecularHighlight && (\n        <div\n          className=\"absolute inset-0 z-40 pointer-events-none rounded-[inherit] border border-white/40 dark:border-white/15\"\n          style={{\n            boxShadow:\n              \"inset 2px 2px 2px 0 rgba(255, 255, 255, 0.45), inset -2px -2px 2px 0 rgba(255, 255, 255, 0.3)\",\n            ...(formattedRadius ? { borderRadius: formattedRadius } : {}),\n          }}\n        />\n      )}\n    </div>\n  );\n}\n\nexport interface LiquidGlassWrapperProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  className?: string;\n  radius?: string | number | boolean;\n  bgImage?: string;\n  filterId?: string;\n  showSpecularHighlight?: boolean;\n  contrastOverlayClassName?: string;\n  bgPosition?: string;\n  showOuterShadow?: boolean;\n  shadowStyle?: React.CSSProperties;\n}\n\nexport const LiquidGlassWrapper = React.forwardRef<\n  HTMLDivElement,\n  LiquidGlassWrapperProps\n>(\n  (\n    {\n      children,\n      className,\n      style,\n      radius,\n      bgImage,\n      filterId,\n      showSpecularHighlight = true,\n      contrastOverlayClassName,\n      bgPosition,\n      showOuterShadow,\n      shadowStyle,\n      ...props\n    },\n    ref\n  ) => {\n    const formattedRadius = formatRadius(radius);\n\n    const wrapperStyle: React.CSSProperties = {\n      ...(formattedRadius ? { borderRadius: formattedRadius } : {}),\n      ...style,\n    };\n\n    return (\n      <div\n        ref={ref}\n        style={wrapperStyle}\n        className={cn(\n          \"relative overflow-hidden isolate [contain:paint] [transform:translateZ(0)]\",\n          className\n        )}\n        {...props}\n      >\n        <LiquidGlassBackground\n          radius={radius}\n          bgImage={bgImage}\n          filterId={filterId}\n          showSpecularHighlight={showSpecularHighlight}\n          contrastOverlayClassName={contrastOverlayClassName}\n          bgPosition={bgPosition}\n          showOuterShadow={showOuterShadow}\n          shadowStyle={shadowStyle}\n        />\n        <div\n          className=\"relative z-10 w-full h-full flex flex-col rounded-[inherit]\"\n          style={formattedRadius ? { borderRadius: formattedRadius } : undefined}\n        >\n          {children}\n        </div>\n      </div>\n    );\n  }\n);\n\nLiquidGlassWrapper.displayName = \"LiquidGlassWrapper\";\n",
      "type": "registry:ui",
      "target": "components/custom/ui/liquid-glass.tsx"
    }
  ],
  "categories": [],
  "type": "registry:ui"
}