{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "progressive-blur",
  "type": "registry:ui",
  "title": "Progressive blur",
  "description": "CSS-driven backdrop blur that grows toward an edge, with masked layers and interruptible staggered transitions.",
  "dependencies": [],
  "registryDependencies": [
    "https://control-ui.dev/r/core.json"
  ],
  "files": [
    {
      "path": "src/registry/knob-contracts/progressive-blur-knobs.ts",
      "target": "@components/control-ui/knob-contracts/progressive-blur-knobs.ts",
      "type": "registry:component",
      "content": "// Generated from src/registry/sources/control-ui/recipes/progressive-blur.css by scripts/gen-knob-contracts.ts — run `bun run sync:knobs`.\nexport const progressiveBlurKnobs = [\n  \"--cui-progressive-blur-size\",\n  \"--cui-progressive-blur-backdrop-blur\",\n  \"--cui-progressive-blur-fade-size\",\n  \"--cui-progressive-blur-transition-duration\",\n  \"--cui-progressive-blur-transition-delay\",\n] as const;\nexport type ProgressiveBlurKnobStyle = Partial<Record<(typeof progressiveBlurKnobs)[number], string>>;\n"
    },
    {
      "path": "src/registry/sources/control-ui/recipes/progressive-blur.css",
      "target": "@components/control-ui/styles/recipes/progressive-blur.css",
      "type": "registry:file",
      "content": "@layer components {\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"]) {\n    --cui-progressive-blur-size: 3rem;\n    --cui-progressive-blur-backdrop-blur: 16px;\n    --cui-progressive-blur-fade-size: 0.5rem;\n    --cui-progressive-blur-transition-duration: var(--duration-base);\n    --cui-progressive-blur-transition-delay: calc(var(--cui-progressive-blur-transition-duration) * 0.06);\n    --_progressive-blur-direction: to bottom;\n    display: none;\n    position: absolute;\n    z-index: 1;\n    pointer-events: none;\n    user-select: none;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-visible]) {\n    --_progressive-blur-visibility: visible;\n    --_progressive-blur-enter: 1;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"]:is([data-side=\"top\"], [data-side=\"bottom\"])) {\n    inset-inline: 0;\n    height: min(50%, max(0px, var(--cui-progressive-blur-size)));\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"top\"]) {\n    top: 0;\n    --_progressive-blur-direction: to top;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"bottom\"]) {\n    bottom: 0;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"]:is([data-side=\"inline-start\"], [data-side=\"inline-end\"])) {\n    inset-block: 0;\n    width: min(50%, max(0px, var(--cui-progressive-blur-size)));\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"inline-start\"]) {\n    inset-inline-start: 0;\n    --_progressive-blur-direction: to left;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"inline-end\"]) {\n    inset-inline-end: 0;\n    --_progressive-blur-direction: to right;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"inline-start\"]:dir(rtl)) {\n    --_progressive-blur-direction: to right;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"][data-side=\"inline-end\"]:dir(rtl)) {\n    --_progressive-blur-direction: to left;\n  }\n\n  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (mask-image: linear-gradient(black, transparent)) {\n    :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"]) {\n      display: block;\n    }\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]) {\n    --_progressive-blur-index: 0;\n    --_progressive-blur-divisor: 32;\n    --_progressive-blur-duration: calc(var(--cui-progressive-blur-transition-duration) * (0.65 + var(--_progressive-blur-enter, 0) * 0.35));\n    position: absolute;\n    inset: 0;\n    opacity: var(--_progressive-blur-enter, 0);\n    visibility: var(--_progressive-blur-visibility, hidden);\n    -webkit-backdrop-filter: blur(max(0px, calc(var(--cui-progressive-blur-backdrop-blur) / var(--_progressive-blur-divisor))));\n    backdrop-filter: blur(max(0px, calc(var(--cui-progressive-blur-backdrop-blur) / var(--_progressive-blur-divisor))));\n    mask-image:\n      linear-gradient(\n        var(--_progressive-blur-direction),\n        oklch(0 0 0 / 0) calc(var(--_progressive-blur-index) * 100% / 7),\n        oklch(0 0 0) calc((var(--_progressive-blur-index) + 1) * 100% / 7),\n        oklch(0 0 0) calc((var(--_progressive-blur-index) + 2) * 100% / 7),\n        oklch(0 0 0 / 0) calc((var(--_progressive-blur-index) + 3) * 100% / 7)\n      ),\n      linear-gradient(\n        var(--_progressive-blur-direction),\n        oklch(0 0 0) calc(100% - min(50%, max(0px, var(--cui-progressive-blur-fade-size)))),\n        oklch(0 0 0 / 0)\n      );\n    mask-composite: intersect;\n    transition:\n      opacity var(--_progressive-blur-duration) var(--ease-standard)\n      calc(var(--_progressive-blur-enter, 0) * var(--_progressive-blur-index) * var(--cui-progressive-blur-transition-delay)),\n      visibility calc(var(--duration-fast) * 0) var(--ease-standard)\n      calc((1 - var(--_progressive-blur-enter, 0)) * var(--_progressive-blur-duration));\n\n    @starting-style {\n      opacity: 0;\n    }\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]:nth-child(2)) {\n    --_progressive-blur-index: 1;\n    --_progressive-blur-divisor: 16;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]:nth-child(3)) {\n    --_progressive-blur-index: 2;\n    --_progressive-blur-divisor: 8;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]:nth-child(4)) {\n    --_progressive-blur-index: 3;\n    --_progressive-blur-divisor: 4;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]:nth-child(5)) {\n    --_progressive-blur-index: 4;\n    --_progressive-blur-divisor: 2;\n  }\n\n  :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]:nth-child(6)) {\n    --_progressive-blur-index: 5;\n    --_progressive-blur-divisor: 1;\n  }\n\n  @container style(--cui-progressive-blur-backdrop-blur: 0px) {\n    :where([data-control-family=\"progressive-blur\"][data-slot=\"layer\"]) {\n      -webkit-backdrop-filter: none;\n      backdrop-filter: none;\n    }\n  }\n\n  @media (prefers-reduced-transparency: reduce), (forced-colors: active) {\n    :where([data-control-family=\"progressive-blur\"][data-slot=\"root\"]) {\n      display: none;\n    }\n  }\n}\n\n@property --cui-progressive-blur-size {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-progressive-blur-backdrop-blur {\n  syntax: \"<length>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-progressive-blur-fade-size {\n  syntax: \"<length-percentage>\";\n  inherits: true;\n  initial-value: 0px;\n}\n\n@property --cui-progressive-blur-transition-duration {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 0s;\n}\n\n@property --cui-progressive-blur-transition-delay {\n  syntax: \"<time>\";\n  inherits: true;\n  initial-value: 0s;\n}\n"
    },
    {
      "path": "src/registry/sources/control-ui/ui/progressive-blur.tsx",
      "target": "@components/control-ui/ui/progressive-blur.tsx",
      "type": "registry:ui",
      "content": "import type { ComponentProps, CSSProperties } from \"react\";\nimport type { ProgressiveBlurKnobStyle } from \"@/components/control-ui/knob-contracts/progressive-blur-knobs\";\n\nexport type ProgressiveBlurSide = \"top\" | \"bottom\" | \"inline-start\" | \"inline-end\";\n\nexport type ProgressiveBlurProps = Omit<ComponentProps<\"div\">, \"children\" | \"dangerouslySetInnerHTML\" | \"style\" | \"tabIndex\"> & {\n  side?: ProgressiveBlurSide;\n  visible?: boolean;\n  style?: CSSProperties & ProgressiveBlurKnobStyle;\n};\n\nexport function ProgressiveBlur({ side = \"bottom\", visible = true, ...props }: ProgressiveBlurProps) {\n  return (\n    <div\n      {...props}\n      data-control-ui=\"progressive-blur\"\n      data-control-family=\"progressive-blur\"\n      data-slot=\"root\"\n      data-side={side}\n      data-visible={visible || undefined}\n      aria-hidden=\"true\"\n    >\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n      <span data-control-ui=\"progressive-blur\" data-control-family=\"progressive-blur\" data-slot=\"layer\" />\n    </div>\n  );\n}\n"
    }
  ],
  "css": {
    "@import \"../components/control-ui/styles/recipes/progressive-blur.css\"": {}
  }
}