{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "components-logoclouds-logocloud-1",
  "title": "Logo Cloud 1",
  "description": "Animated logo cloud with staggered fade-in and group cycling.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "registry/components/logoclouds/logocloud-1/index.tsx",
      "content": "'use client';\n\nimport React, { createContext, useContext, useEffect, useState } from 'react';\nimport { motion } from 'motion/react';\nimport { cn } from '@/lib/utils';\n\ntype LogoCloudContextType = {\n  visible: boolean;\n  fadeDuration: number;\n  staggerDelay: number;\n};\n\nconst LogoCloudCtx = createContext<LogoCloudContextType>({\n  visible: true,\n  fadeDuration: 0.6,\n  staggerDelay: 0.08,\n});\n\ninterface LogoItemProps {\n  icon: React.ReactNode;\n  name: string;\n  _index?: number;\n}\n\nexport function LogoCloudItem({ icon, name, _index = 0 }: LogoItemProps) {\n  const { visible, fadeDuration, staggerDelay } = useContext(LogoCloudCtx);\n\n  return (\n    <motion.div\n      initial={{ opacity: 0, filter: 'blur(8px)' }}\n      animate={{\n        opacity: visible ? 1 : 0,\n        filter: visible ? 'blur(0px)' : 'blur(8px)',\n      }}\n      transition={{\n        delay: _index * staggerDelay,\n        duration: fadeDuration,\n        ease: 'easeInOut',\n      }}\n      className=\"flex flex-row items-center gap-2 cursor-default\"\n    >\n      {icon}\n      <span className=\"text-lg font-semibold text-foreground tracking-tight whitespace-nowrap\">\n        {name}\n      </span>\n    </motion.div>\n  );\n}\n\ninterface LogoGroupProps {\n  children: React.ReactNode;\n  _active?: boolean;\n}\n\nexport function LogoCloudGroup({ children, _active = false }: LogoGroupProps) {\n  if (!_active) return null;\n\n  const items = React.Children.toArray(children);\n  return (\n    <>\n      {items.map((item, i) =>\n        React.isValidElement(item)\n          ? React.cloneElement(\n              item as React.ReactElement<{ _index?: number }>,\n              {\n                _index: i,\n              },\n            )\n          : null,\n      )}\n    </>\n  );\n}\n\ninterface LogoCloudRootProps {\n  children: React.ReactNode;\n  label?: string;\n  displayDuration?: number | boolean;\n  fadeDuration?: number | boolean;\n  staggerDelay?: number | boolean;\n  className?: string;\n}\n\nexport function LogoCloud({\n  children,\n  label = '',\n  displayDuration,\n  fadeDuration,\n  staggerDelay,\n  className,\n}: LogoCloudRootProps) {\n  const resolvedDisplayDuration =\n    typeof displayDuration === 'number' ? displayDuration : 2000;\n  const resolvedFadeDuration =\n    typeof fadeDuration === 'number' ? fadeDuration : 0.6;\n  const resolvedStaggerDelay =\n    typeof staggerDelay === 'number' ? staggerDelay : 0.08;\n  const [groupIndex, setGroupIndex] = useState(0);\n  const [visible, setVisible] = useState(true);\n\n  const groups = React.Children.toArray(children).filter(React.isValidElement);\n  const totalGroups = groups.length;\n\n  const currentGroup = groups[groupIndex];\n  const itemCount = React.isValidElement(currentGroup)\n    ? React.Children.count(\n        (currentGroup as React.ReactElement<{ children: React.ReactNode }>)\n          .props.children,\n      )\n    : 0;\n  const totalExitMs =\n    ((itemCount - 1) * resolvedStaggerDelay + resolvedFadeDuration) * 1000 +\n    150;\n  const cycleMs = resolvedDisplayDuration + totalExitMs;\n\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setVisible(false);\n      setTimeout(() => {\n        setGroupIndex((prev) => (prev + 1) % totalGroups);\n        setVisible(true);\n      }, totalExitMs);\n    }, cycleMs);\n\n    return () => clearInterval(interval);\n  }, [totalGroups, totalExitMs, cycleMs]);\n\n  return (\n    <LogoCloudCtx.Provider\n      value={{\n        visible,\n        fadeDuration: resolvedFadeDuration,\n        staggerDelay: resolvedStaggerDelay,\n      }}\n    >\n      <section className={cn('w-full py-16 px-6', className)}>\n        <div className=\"max-w-4xl mx-auto flex flex-col items-center gap-10\">\n          {label && (\n            <p className=\"text-muted-foreground text-sm tracking-widest uppercase font-light\">\n              {label}\n            </p>\n          )}\n          <div className=\"flex items-center justify-center gap-8 md:gap-12 flex-wrap\">\n            {groups.map((group, i) =>\n              React.isValidElement(group)\n                ? React.cloneElement(\n                    group as React.ReactElement<{ _active?: boolean }>,\n                    {\n                      _active: i === groupIndex,\n                    },\n                  )\n                : null,\n            )}\n          </div>\n        </div>\n      </section>\n    </LogoCloudCtx.Provider>\n  );\n}\n\nexport default LogoCloud;\n",
      "type": "registry:ui",
      "target": "components/odysseyui/logocloud.tsx"
    }
  ],
  "type": "registry:ui"
}