{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur",
  "title": "Progressive Blur",
  "description": "Top and bottom progressive blur overlays that stack multiple backdrop-filter layers to produce a smooth edge-to-transparent blur effect.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/components/unlumen/progressive-blur/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n// ─── Types ────────────────────────────────────────────────────────────────────\n\nexport type ProgressiveBlurSide = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface ProgressiveBlurProps\n  extends React.HTMLAttributes<HTMLDivElement> {\n  /** Which edge the blur is strongest at. @default \"bottom\" */\n  side?: ProgressiveBlurSide;\n  /** Blur amount in pixels. @default 4 */\n  strength?: number;\n  /** Thickness of the blurred area. @default \"160px\" */\n  size?: string | number;\n  /** Add a background-color tint fade alongside the blur. @default true */\n  tint?: boolean;\n  /** Opacity of the tint at the solid edge (0–1). @default 1 */\n  tintStrength?: number;\n  className?: string;\n}\n\n// ─── Module-level constants ───────────────────────────────────────────────────\n\nconst IS_HORIZONTAL: Record<ProgressiveBlurSide, boolean> = {\n  top: false,\n  bottom: false,\n  left: true,\n  right: true,\n};\n\n// Gradient goes FROM the edge (opaque) TO the content (transparent)\nconst FADE_DIR: Record<ProgressiveBlurSide, string> = {\n  top: \"to bottom\",\n  bottom: \"to top\",\n  left: \"to right\",\n  right: \"to left\",\n};\n\nconst POSITION_STYLE: Record<ProgressiveBlurSide, React.CSSProperties> = {\n  top: { top: 0, left: 0 },\n  bottom: { bottom: 0, left: 0 },\n  left: { top: 0, left: 0 },\n  right: { top: 0, right: 0 },\n};\n\n// ─── Component ───────────────────────────────────────────────────────────────\n\nexport const ProgressiveBlur = React.memo(\n  function ProgressiveBlur({\n    side = \"bottom\",\n    strength = 4,\n    size = \"160px\",\n    tint = true,\n    tintStrength = 1,\n    className,\n    style,\n    ...props\n  }: ProgressiveBlurProps) {\n    const isHorizontal = IS_HORIZONTAL[side];\n    const fadeDir = FADE_DIR[side];\n    const sizeValue = typeof size === \"number\" ? `${size}px` : size;\n\n    const sizeStyle: React.CSSProperties = isHorizontal\n      ? { width: sizeValue, height: \"100%\" }\n      : { height: sizeValue, width: \"100%\" };\n\n    const maskImage = `linear-gradient(${fadeDir}, black 50%, transparent 100%)`;\n\n    const background = tint\n      ? `linear-gradient(${fadeDir}, color-mix(in oklch, var(--background) ${Math.round(tintStrength * 100)}%, transparent) 0%, transparent 100%)`\n      : undefined;\n\n    return (\n      <div\n        aria-hidden=\"true\"\n        className={cn(\"pointer-events-none absolute z-10\", className)}\n        style={{\n          ...sizeStyle,\n          ...POSITION_STYLE[side],\n          background,\n          maskImage,\n          WebkitMaskImage: maskImage,\n          backdropFilter: `blur(${strength}px)`,\n          WebkitBackdropFilter: `blur(${strength}px)`,\n          willChange: \"backdrop-filter\",\n          ...style,\n        }}\n        {...props}\n      />\n    );\n  },\n  (prev, next) =>\n    prev.side === next.side &&\n    prev.strength === next.strength &&\n    prev.size === next.size &&\n    prev.tint === next.tint &&\n    prev.tintStrength === next.tintStrength &&\n    prev.className === next.className,\n);\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/progressive-blur.tsx"
    }
  ],
  "type": "registry:ui"
}