{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "primitives-effects-slide",
  "title": "Slide",
  "description": "An effect that allows you to animate elements with a slide 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/slide/index.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { motion, type HTMLMotionProps, type Variant } 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 SlideDirection = \"up\" | \"down\" | \"left\" | \"right\";\n\ntype SlideProps = WithAsChild<\n  {\n    children?: React.ReactNode;\n    delay?: number;\n    direction?: SlideDirection;\n    offset?: number;\n    ref?: React.Ref<HTMLElement>;\n  } & UseIsInViewOptions &\n    HTMLMotionProps<\"div\">\n>;\n\nfunction Slide({\n  ref,\n  transition = { type: \"spring\", stiffness: 200, damping: 20 },\n  delay = 0,\n  inView = false,\n  inViewMargin = \"0px\",\n  inViewOnce = true,\n  direction = \"up\",\n  offset = 100,\n  asChild = false,\n  ...props\n}: SlideProps) {\n  const { ref: localRef, isInView } = useIsInView(\n    ref as React.Ref<HTMLElement>,\n    {\n      inView,\n      inViewOnce,\n      inViewMargin,\n    },\n  );\n\n  const axis = direction === \"up\" || direction === \"down\" ? \"y\" : \"x\";\n  const hidden: Variant = {\n    [axis]: direction === \"right\" || direction === \"down\" ? -offset : offset,\n  };\n  const visible: Variant = { [axis]: 0 };\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={{ hidden, visible }}\n      transition={{\n        ...transition,\n        delay: (transition?.delay ?? 0) + delay / 1000,\n      }}\n      {...props}\n    />\n  );\n}\n\ntype SlideListProps = Omit<SlideProps, \"children\"> & {\n  children: React.ReactElement | React.ReactElement[];\n  holdDelay?: number;\n};\n\nfunction Slides({\n  children,\n  delay = 0,\n  holdDelay = 0,\n  ...props\n}: SlideListProps) {\n  const array = React.Children.toArray(children) as React.ReactElement[];\n\n  return (\n    <>\n      {array.map((child, index) => (\n        <Slide\n          key={child.key ?? index}\n          delay={delay + index * holdDelay}\n          {...props}\n        >\n          {child}\n        </Slide>\n      ))}\n    </>\n  );\n}\n\nexport {\n  Slide,\n  Slides,\n  type SlideProps,\n  type SlideListProps,\n  type SlideDirection,\n};\n",
      "type": "registry:ui",
      "target": "components/unlumen-ui/primitives/effects/slide.tsx"
    }
  ],
  "type": "registry:ui"
}