{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swap-text",
  "title": "Swap Text",
  "description": "Text that changes in place: the new line rises out of a soft blur.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [
    "@ikas/motion",
    "@ikas/utils"
  ],
  "files": [
    {
      "path": "registry/ikas/swap-text.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AnimatePresence, motion, useIsPresent, useReducedMotion } from \"motion/react\"\n\nimport { EASE_OUT } from \"@/lib/motion\"\nimport { cn } from \"@/lib/utils\"\n\ntype SwapTextProps = Omit<React.ComponentProps<\"span\">, \"children\"> & {\n  /** The text to show. A change animates; the same text again does nothing. */\n  children: React.ReactNode\n  /** Identity of the text when `children` is not a string, e.g. a step id. Defaults to the string itself. */\n  swapKey?: React.Key\n  /** 1: the new text rises from below (values going up, moving forward). -1: it drops from above. */\n  direction?: 1 | -1\n}\n\n/** Outgoing copies are hidden from assistive tech while they fade. */\nfunction Outgoing(props: React.ComponentProps<typeof motion.span>) {\n  const present = useIsPresent()\n  return <motion.span {...props} aria-hidden={present ? undefined : true} />\n}\n\n/**\n * Text that changes in place: the new line rises 0.3em out of a 4px blur while the old one\n * leaves the other way, faster. Use for labels, step names and hints that change with state.\n */\nfunction SwapText({ children, swapKey, direction = 1, className, ...props }: SwapTextProps) {\n  const reduce = useReducedMotion()\n  const key = swapKey ?? (typeof children === \"string\" || typeof children === \"number\" ? children : undefined)\n\n  return (\n    <span data-slot=\"swap-text\" className={cn(\"relative inline-flex min-w-0\", className)} {...props}>\n      <AnimatePresence mode=\"popLayout\" initial={false} custom={direction}>\n        <Outgoing\n          key={key ?? \"swap-text\"}\n          custom={direction}\n          className=\"inline-block min-w-0\"\n          variants={{\n            enter: (dir: number) => (reduce ? { opacity: 0 } : { opacity: 0, y: `${0.3 * dir}em`, filter: \"blur(4px)\" }),\n            center: { opacity: 1, y: 0, filter: \"blur(0px)\", transition: { duration: reduce ? 0.12 : 0.2, ease: EASE_OUT } },\n            exit: (dir: number) =>\n              reduce\n                ? { opacity: 0, transition: { duration: 0.1 } }\n                : { opacity: 0, y: `${-0.3 * dir}em`, filter: \"blur(2px)\", transition: { duration: 0.12, ease: EASE_OUT } },\n          }}\n          initial=\"enter\"\n          animate=\"center\"\n          exit=\"exit\"\n        >\n          {children}\n        </Outgoing>\n      </AnimatePresence>\n    </span>\n  )\n}\n\nexport { SwapText, type SwapTextProps }\n",
      "type": "registry:component",
      "target": "@components/ikas/swap-text.tsx"
    }
  ],
  "docs": "https://builders.ikas.com/tr/docs/app-development/ui-kit/components/swap-text",
  "categories": [
    "motion"
  ],
  "type": "registry:component"
}