{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-effects-blur",
  "title": "Blur",
  "description": "An effect that allows you to animate elements with a blur effect on first view or load.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@unlumen-ui/primitives-animate-slot",
    "@unlumen-ui/hooks-use-is-in-view"
  ],
  "files": [
    {
      "path": "registry/primitives/effects/blur/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type HTMLMotionProps } from \"motion/react\";\n\nimport {\n  useIsInView,\n  type UseIsInViewOptions,\n} from \"@/hooks/use-is-in-view\";\nimport { Slot, type WithAsChild } from \"@/components/unlumen-ui/primitives/animate/slot\";\n\ntype BlurProps = WithAsChild<\n  {\n    children?: React.ReactNode;\n    delay?: number;\n    initialBlur?: number;\n    blur?: number;\n    ref?: React.Ref<HTMLElement>;\n  } & UseIsInViewOptions &\n    HTMLMotionProps<\"div\">\n>;\n\nfunction Blur({\n  ref,\n  transition = { type: \"spring\", stiffness: 200, damping: 20 },\n  delay = 0,\n  inView = false,\n  inViewMargin = \"0px\",\n  inViewOnce = true,\n  initialBlur = 10,\n  blur = 0,\n  asChild = false,\n  ...props\n}: BlurProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const Component = asChild ? Slot : motion.div;\n\n  return (\n    <Component\n      ref={localRef as React.Ref<HTMLDivElement>}\n      initial=\"hidden\"\n      animate={isInView ? \"visible\" : \"hidden\"}\n      exit=\"hidden\"\n      variants={{\n        hidden: { filter: `blur(${initialBlur}px)` },\n        visible: { filter: `blur(${blur}px)` },\n      }}\n      transition={{\n        ...transition,\n        delay: (transition?.delay ?? 0) + delay / 1000,\n      }}\n      {...props}\n    />\n  );\n}\n\ntype BlurListProps = Omit<BlurProps, \"children\"> & {\n  children: React.ReactElement | React.ReactElement[];\n  holdDelay?: number;\n};\n\nfunction Blurs({\n  children,\n  delay = 0,\n  holdDelay = 0,\n  ...props\n}: BlurListProps) {\n  const array = React.Children.toArray(children) as React.ReactElement[];\n\n  return (\n    <>\n      {array.map((child, index) => (\n        <Blur\n          key={child.key ?? index}\n          delay={delay + index * holdDelay}\n          {...props}\n        >\n          {child}\n        </Blur>\n      ))}\n    </>\n  );\n}\n\nexport { Blur, Blurs, type BlurProps, type BlurListProps };\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/primitives/effects/blur.tsx"
    }
  ],
  "type": "registry:ui"
}