{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "swap-text",
  "title": "Swap Text",
  "description": "Morphs one label into another in place.",
  "dependencies": [
    "@stylexjs/stylex",
    "torph"
  ],
  "registryDependencies": [
    "https://constella.aayush.cv/r/base.json"
  ],
  "files": [
    {
      "path": "src/components/primitives/swap-text.tsx",
      "content": "\"use client\";\n\nimport * as stylex from \"@stylexjs/stylex\";\nimport type { ComponentProps } from \"react\";\nimport { TextMorph } from \"torph/react\";\n\nimport type { Sx } from \"@/lib/constella/styles\";\nimport { durations, easings } from \"@/lib/constella/tokens.stylex\";\n\nconst morphFor = Number(durations.crossfade.slice(0, -\"ms\".length));\n\n// Torph renders `as` with only its ref, class and style, so the slot rides on the element.\nfunction Root(props: ComponentProps<\"span\">) {\n  return <span data-slot=\"swap-text\" {...props} />;\n}\n\n/**\n * Morphs its old text into its new one whenever `children` changes: kept letters slide into\n * place, the rest fade, the width eases, and a number rolls by place value.\n */\nfunction SwapText({ children, sx }: { children: string; sx?: Sx }) {\n  return (\n    <TextMorph\n      as={Root}\n      duration={morphFor}\n      ease={easings.crossfade}\n      {...stylex.props(sx)}\n    >\n      {children}\n    </TextMorph>\n  );\n}\n\nexport { SwapText };\n",
      "type": "registry:component"
    }
  ],
  "docs": "Usage: https://constella.aayush.cv/docs/components/swap-text/index.md",
  "type": "registry:ui"
}