{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-gradient-blur",
  "title": "Z Gradient Blur",
  "dependencies": [],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/atoms/z-gradient-blur/z-gradient-blur.tsx",
      "content": "\"use client\";\nimport { cn } from \"../../../lib/ui-utils\";\nimport React, { useMemo, useSyncExternalStore } from 'react';\ninterface ZGradientBlurProps extends React.HTMLAttributes<HTMLDivElement> {\n    blur?: number;\n    steps?: number;\n    to?: 'top' | 'bottom' | 'left' | 'right';\n    tint?: string;\n}\nconst directionMap = {\n    top: 'bottom',\n    bottom: 'top',\n    left: 'right',\n    right: 'left',\n} as const;\nconst emptySubscribe = () => () => { };\nexport default function ZGradientBlur({ blur = 20, steps = 8, to = 'bottom', tint = 'transparent', className, ...props }: ZGradientBlurProps) {\n    const isClient = useSyncExternalStore(emptySubscribe, () => true, () => false);\n    const calculations = useMemo(() => {\n        const actualSteps = Math.max(1, steps);\n        const stepSize = Math.round((100 / actualSteps) * 100) / 100;\n        const factor = 0.5;\n        const base = blur > 0 ? Math.pow(blur / factor, 1 / (actualSteps - 1)) : 1;\n        const getBlurValue = (i: number) => {\n            if (actualSteps === 1)\n                return blur;\n            const exponentialProgress = Math.pow(base, actualSteps - i - 1) * factor;\n            return Math.round(exponentialProgress * 100) / 100;\n        };\n        return { actualSteps, stepSize, getBlurValue };\n    }, [blur, steps]);\n    const gradientTo = directionMap[to] || 'top';\n    if (!isClient) {\n        return (<div {...props} className={`pointer-events-none absolute ${className}`} style={{\n                ...props.style,\n                backdropFilter: `blur(${blur}px)`,\n                WebkitBackdropFilter: `blur(${blur}px)`,\n            }}/>);\n    }\n    const { actualSteps, stepSize, getBlurValue } = calculations;\n    return (<div {...props} className={cn('pointer-events-none absolute', className)} style={{\n            ...props.style,\n        }}>\n      <div style={{\n            position: 'relative',\n            width: '100%',\n            height: '100%',\n            background: tint !== 'transparent'\n                ? `linear-gradient(to ${gradientTo}, ${tint} 0%, transparent 100%)`\n                : 'transparent',\n        }}>\n        \n        <div style={{\n            position: 'absolute',\n            inset: 0,\n            zIndex: 1,\n            mask: `linear-gradient(\n              to ${gradientTo},\n              rgba(0, 0, 0, 1) 0%,\n              rgba(0, 0, 0, 0) ${stepSize}%\n            )`,\n            backdropFilter: `blur(${getBlurValue(0)}px)`,\n            WebkitBackdropFilter: `blur(${getBlurValue(0)}px)`,\n        }}/>\n\n        \n        {actualSteps > 1 && (<div style={{\n                position: 'absolute',\n                inset: 0,\n                zIndex: 2,\n                mask: `linear-gradient(\n                to ${gradientTo},\n                rgba(0, 0, 0, 1) 0%,\n                rgba(0, 0, 0, 1) ${stepSize}%,\n                rgba(0, 0, 0, 0) ${stepSize * 2}%\n              )`,\n                backdropFilter: `blur(${getBlurValue(1)}px)`,\n                WebkitBackdropFilter: `blur(${getBlurValue(1)}px)`,\n            }}/>)}\n\n        \n        {actualSteps > 2 &&\n            Array.from({ length: actualSteps - 2 }).map((_, i) => (<div key={i} style={{\n                    position: 'absolute',\n                    inset: 0,\n                    zIndex: i + 3,\n                    mask: `linear-gradient(\n                  to ${gradientTo},\n                  rgba(0, 0, 0, 0) ${i * stepSize}%,\n                  rgba(0, 0, 0, 1) ${(i + 1) * stepSize}%,\n                  rgba(0, 0, 0, 1) ${(i + 2) * stepSize}%,\n                  rgba(0, 0, 0, 0) ${(i + 3) * stepSize}%\n                )`,\n                    backdropFilter: `blur(${getBlurValue(i + 2)}px)`,\n                    WebkitBackdropFilter: `blur(${getBlurValue(i + 2)}px)`,\n                }}/>))}\n      </div>\n    </div>);\n}\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/atoms/z-gradient-blur/z-gradient-blur.tsx"
    }
  ],
  "type": "registry:ui"
}