{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "text-stagger-hover",
  "title": "Text Stagger Hover",
  "description": "Splitted text animation with staggered effect triggered by hover gesture, You can easily customize by controlling the animation property (transform, opacity, blur), the stagger value, and the transition.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "https://systaliko-ui.vercel.app/r/set-stagger-direction",
    "https://systaliko-ui.vercel.app/r/split-text",
    "https://systaliko-ui.vercel.app/r/animation-variants"
  ],
  "files": [
    {
      "path": "registry/text/text-stagger-hover/index.tsx",
      "content": "'use client';\n\nimport { cn } from '@/lib/utils';\nimport { HTMLMotionProps, motion } from 'motion/react';\nimport {\n  ANIMATION_VARIANTS,\n  AnimationT,\n} from '@/components/systaliko-ui/utils/animation-variants';\nimport {\n  setStaggerDirection,\n  StaggerDirection,\n} from '@/components/systaliko-ui/utils/set-stagger-direction';\nimport { splitText } from '@/components/systaliko-ui/utils/split-text';\n\ntype NewVariants = {\n  hovered: {\n    x?: string | number;\n    y?: string | number;\n    opacity: number;\n    scale?: number;\n    filter?: string;\n  };\n  initial: {\n    x?: string | number;\n    y?: string | number;\n    opacity: number;\n    scale?: number;\n    filter?: string;\n  };\n};\n\nconst animation_variants_text_active = Object.entries(\n  ANIMATION_VARIANTS,\n).reduce(\n  (acc, [key, value]) => {\n    acc[key as keyof typeof ANIMATION_VARIANTS] = {\n      hovered: value.hidden,\n      initial: value.visible,\n    };\n    return acc;\n  },\n  {} as Record<keyof typeof ANIMATION_VARIANTS, NewVariants>,\n);\nconst animation_variants_text_hidden = Object.entries(\n  ANIMATION_VARIANTS,\n).reduce(\n  (acc, [key, value]) => {\n    acc[key as keyof typeof ANIMATION_VARIANTS] = {\n      initial: value.hidden,\n      hovered: value.visible,\n    };\n    return acc;\n  },\n  {} as Record<keyof typeof ANIMATION_VARIANTS, NewVariants>,\n);\n\nexport function TextStaggerHover({\n  className,\n  ...props\n}: HTMLMotionProps<'span'>) {\n  return (\n    <motion.span\n      className={cn(\n        'grid grid-cols-1 grid-rows-1 *:col-start-1 *:row-start-1 place-content-center relative overflow-hidden',\n        className,\n      )}\n      initial={'initial'}\n      whileHover={'hovered'}\n      data-slot=\"text-stagger-hover\"\n      {...props}\n    />\n  );\n}\ninterface CharacterProps extends HTMLMotionProps<'span'> {\n  char: string;\n  index: number;\n  wordLength: number;\n  staggerDirection?: StaggerDirection;\n}\nfunction Character({\n  char,\n  index,\n  wordLength,\n  staggerDirection = 'first',\n  transition,\n  ...props\n}: CharacterProps) {\n  const staggerDelay = setStaggerDirection({\n    direction: staggerDirection,\n    totalItems: wordLength,\n    index,\n  });\n  return (\n    <motion.span\n      className=\"inline-block\"\n      transition={{\n        delay: staggerDelay,\n        ...transition,\n      }}\n      {...props}\n    >\n      {char}\n      {char === ' ' && index < wordLength - 1 && <>&nbsp;</>}\n    </motion.span>\n  );\n}\ninterface TextStaggerHoverContentProps extends HTMLMotionProps<'span'> {\n  animation?: AnimationT;\n  staggerDirection?: StaggerDirection;\n}\nexport function TextStaggerHoverActive({\n  animation = 'bottom',\n  staggerDirection = 'first',\n  className,\n  children,\n  transition,\n  ...props\n}: TextStaggerHoverContentProps) {\n  const { characters, characterCount } = splitText(String(children));\n  const animationVariants = animation_variants_text_active[animation];\n\n  return (\n    <span\n      data-slot=\"text-stagger-hover-active\"\n      className={cn('inline-block', className)}\n    >\n      {characters.map((char, index) => (\n        <Character\n          className=\"inline-block\"\n          char={char}\n          index={index}\n          wordLength={characterCount}\n          staggerDirection={staggerDirection}\n          key={`${char}-${index}-hidden`}\n          variants={animationVariants}\n          transition={{\n            ...transition,\n          }}\n          {...props}\n        />\n      ))}\n    </span>\n  );\n}\n\nexport function TextStaggerHoverHidden({\n  animation = 'top',\n  staggerDirection = 'first',\n  children,\n  className,\n  transition,\n  ...props\n}: TextStaggerHoverContentProps) {\n  const { characters, characterCount } = splitText(String(children));\n  const animationVariants = animation_variants_text_hidden[animation];\n  return (\n    <span className={cn('inline-block ', className)}>\n      {characters.map((char, index) => (\n        <Character\n          className=\"inline-block\"\n          index={index}\n          char={char}\n          wordLength={characterCount}\n          staggerDirection={staggerDirection}\n          key={`${char}-${index}-hidden`}\n          variants={animationVariants}\n          transition={{\n            ...transition,\n          }}\n          {...props}\n        />\n      ))}\n    </span>\n  );\n}\n",
      "type": "registry:ui",
      "target": "components/systaliko-ui/text-stagger-hover.tsx"
    }
  ],
  "type": "registry:ui"
}