{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@liquefy-ui/core@^0.1.3"
  ],
  "description": "The base material every glass component is built on: rim light, refraction and springs.",
  "docs": "Two steps after installing: import the copied stylesheet once at your app entry — it lands at `styles/liquefy-ui.css` — or `@import` it from your global CSS *before* `tailwindcss`, so Tailwind utilities keep winning over component styles. Then wrap the tree in `<LiquefyProvider>`, which is where every component reads its tokens from. Every copied file already carries its own 'use client' directive. Full documentation: https://liquefy-ui.com/#/docs/installation",
  "files": [
    {
      "content": "'use client'\n\nimport { forwardRef, type HTMLAttributes, type ReactNode } from 'react'\nimport type { LiquidVariant } from '@liquefy-ui/core'\nimport { useLiquefyConfig } from '@/lib/provider'\nimport { useLiquidStyles, type LiquidCustomProperties, type LiquidStyleProps } from '@/lib/styles-prop'\nimport { useLiquidGlass } from '@/hooks/use-liquid-glass'\n\nexport type LiquidSurfaceProps = HTMLAttributes<HTMLDivElement> & LiquidStyleProps & {\n  children?: ReactNode\n  intensity?: number\n  interactive?: boolean\n  lens?: boolean\n  /** How far the lens softens what it refracts, in pixels. */\n  lensBlur?: number\n  radius?: number | string\n  tint?: string\n  variant?: LiquidVariant\n  webgl?: boolean\n}\n\nexport const LiquidSurface = forwardRef<HTMLDivElement, LiquidSurfaceProps>(({\n  children,\n  className,\n  intensity,\n  interactive = true,\n  lens,\n  lensBlur,\n  radius,\n  style,\n  styles,\n  tint,\n  variant = 'clear',\n  webgl,\n  ...props\n}, forwardedRef) => {\n  const config = useLiquefyConfig()\n  const resolvedIntensity = intensity ?? config.intensity\n  const resolvedTint = tint ?? config.tint\n  const resolvedWebgl = webgl ?? config.webgl\n  const resolvedLens = lens ?? config.lens\n  const [elementRef, canvasRef] = useLiquidGlass(forwardedRef, {\n    disabled: !interactive,\n    intensity: resolvedIntensity,\n    lens: resolvedLens && config.transparency,\n    lensBlur,\n    // `interactive` says the surface does not answer a pointer, which is what\n    // `disabled` above turns off. It used to withhold the motion controller as\n    // well, and the controller is what owns the shader — so a non-interactive\n    // surface rendered a canvas that nothing ever drew into, and the material\n    // was flat glass instead of liquid. It keeps the shine; it just holds still.\n    motion: config.motion,\n    tint: resolvedTint,\n    webgl: resolvedWebgl,\n    wobbliness: config.wobbliness,\n  })\n  const vars: LiquidCustomProperties = {\n    '--lq-local-intensity': resolvedIntensity,\n    '--lq-radius': typeof radius === 'number' ? `${radius}px` : radius ?? 'var(--lq-radius-default)',\n    '--lq-tint': resolvedTint,\n  }\n  const root = useLiquidStyles('lq-surface', { className, style, styles, vars })\n\n  return (\n    <div\n      className={root.className}\n      data-liquid-interactive={interactive}\n      data-liquid-variant={variant}\n      ref={elementRef}\n      style={root.style}\n      {...props}\n    >\n      <span aria-hidden=\"true\" className=\"lq-surface__edge\" />\n      {resolvedWebgl && <canvas aria-hidden=\"true\" className=\"lq-surface__shader\" ref={canvasRef} />}\n      <span className=\"lq-surface__content\">{children}</span>\n    </div>\n  )\n})\n\nLiquidSurface.displayName = 'LiquidSurface'\n",
      "path": "registry/liquid-surface.tsx",
      "type": "registry:ui"
    }
  ],
  "name": "liquid-surface",
  "registryDependencies": [
    "https://liquefy-ui.com/r/liquefy-ui.json",
    "https://liquefy-ui.com/r/provider.json",
    "https://liquefy-ui.com/r/styles-prop.json",
    "https://liquefy-ui.com/r/use-liquid-glass.json"
  ],
  "title": "LiquidSurface",
  "type": "registry:ui"
}