{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-react/components/gradient-text/GradientText.tsx",
      "content": "import * as React from 'react'\nimport { Slot } from '@radix-ui/react-slot'\nimport { cn } from '@/lib/utils'\nimport { gradientTextPresets, type GradientPreset } from './gradient-text.variants'\n\ntype Direction =\n  | 'to right'\n  | 'to left'\n  | 'to top'\n  | 'to bottom'\n  | 'to top right'\n  | 'to top left'\n  | 'to bottom right'\n  | 'to bottom left'\n\nexport interface GradientTextProps extends React.HTMLAttributes<HTMLElement> {\n  /** Rendered element / component. */\n  as?: React.ElementType\n  /** Render the child element as the gradient text (merging props/styles)\n   *  instead of emitting the `as` tag — the React equivalent of reka-ui's\n   *  as-child. */\n  asChild?: boolean\n  /** Preset gradient name. Overrides from/to when set. */\n  preset?: GradientPreset\n  /** Start color of a custom two-stop gradient. */\n  from?: string\n  /** End color of a custom two-stop gradient. */\n  to?: string\n  /** Gradient direction. */\n  direction?: Direction\n  /** Fully custom CSS gradient (e.g. 'linear-gradient(45deg, #f00, #00f, #0f0)'). Overrides preset/from/to. */\n  gradient?: string\n  /** Animate the gradient (subtle background-position shift). */\n  animated?: boolean\n  /** Animation duration in seconds. Default 4. */\n  animationDuration?: number\n}\n\n/* ------------------------------------------------------------------ */\n/* Animation keyframes                                                 */\n/* Ported from GradientText.vue's <style scoped> block. Injected once  */\n/* so the component ships self-contained.                              */\n/* ------------------------------------------------------------------ */\nconst gradientTextCss = `\n@media (prefers-reduced-motion: no-preference) {\n  @keyframes gradient-text-shift {\n    0% {\n      background-position: 0% 50%;\n    }\n    50% {\n      background-position: 100% 50%;\n    }\n    100% {\n      background-position: 0% 50%;\n    }\n  }\n}\n`\n\nfunction GradientTextStyle() {\n  return <style dangerouslySetInnerHTML={{ __html: gradientTextCss }} />\n}\n\nconst GradientText = React.forwardRef<HTMLElement, GradientTextProps>(\n  (\n    {\n      className,\n      as: asProp = 'span',\n      asChild = false,\n      preset,\n      from,\n      to,\n      direction = 'to right',\n      gradient,\n      animated = false,\n      animationDuration = 4,\n      style,\n      children,\n      ...props\n    },\n    ref,\n  ) => {\n    const Comp = (asChild ? Slot : asProp) as React.ElementType\n\n    const gradientValue = React.useMemo(() => {\n      if (gradient) return gradient\n      if (preset) return gradientTextPresets[preset] ?? ''\n      if (from && to) {\n        return `linear-gradient(${direction}, ${from}, ${to})`\n      }\n      // Default fallback: primary token gradient.\n      return 'linear-gradient(to right, var(--primary), var(--primary))'\n    }, [gradient, preset, from, to, direction])\n\n    const computedStyle = React.useMemo<React.CSSProperties>(\n      () => ({\n        backgroundImage: gradientValue,\n        backgroundClip: 'text',\n        WebkitBackgroundClip: 'text',\n        color: 'transparent',\n        WebkitTextFillColor: 'transparent',\n        backgroundSize: animated ? '200% 200%' : undefined,\n        ...style,\n      }),\n      [gradientValue, animated, style],\n    )\n\n    return (\n      <>\n        <GradientTextStyle />\n        <Comp\n          data-uipkge=\"\"\n          data-slot=\"gradient-text\"\n          data-preset={preset ?? undefined}\n          data-animated={animated ? 'true' : undefined}\n          className={cn(\n            'inline-block',\n            animated ? `motion-safe:animate-[gradient-text-shift_${animationDuration}s_ease_infinite]` : '',\n            className,\n          )}\n          style={computedStyle}\n          ref={ref}\n          {...props}\n        >\n          {children}\n        </Comp>\n      </>\n    )\n  },\n)\nGradientText.displayName = 'GradientText'\n\nexport { GradientText }\n",
      "type": "registry:ui",
      "target": "~/components/ui/gradient-text/GradientText.tsx"
    },
    {
      "path": "packages/registry-react/components/gradient-text/gradient-text.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Preset gradients keyed by name. Each value is a full CSS gradient string\n * applied as `background-image` with `background-clip: text`.\n */\nexport const gradientTextPresets = {\n  sunset: 'linear-gradient(to right, #ff7e5f, #feb47b)',\n  ocean: 'linear-gradient(to right, #2193b0, #6dd5ed)',\n  forest: 'linear-gradient(to right, #11998e, #38ef7d)',\n  fire: 'linear-gradient(to right, #f12711, #f5af19)',\n  candy: 'linear-gradient(to right, #f857a6, #ff8a5c)',\n  aurora: 'linear-gradient(to right, #00c6ff, #0072ff, #00c6ff)',\n  rainbow: 'linear-gradient(to right, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3)',\n  gold: 'linear-gradient(to right, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c)',\n  neon: 'linear-gradient(to right, #00f260, #0575e6)',\n  grape: 'linear-gradient(to right, #6a11cb, #2575fc)',\n} as const\n\nexport type GradientPreset = keyof typeof gradientTextPresets\n\nexport const gradientTextVariants = cva('inline-block', {\n  variants: {},\n  defaultVariants: {},\n})\n\nexport type GradientTextVariants = VariantProps<typeof gradientTextVariants>\n",
      "type": "registry:ui",
      "target": "~/components/ui/gradient-text/gradient-text.variants.ts"
    },
    {
      "path": "packages/registry-react/components/gradient-text/index.ts",
      "content": "export { GradientText, type GradientTextProps } from './GradientText'\nexport {\n  gradientTextPresets,\n  gradientTextVariants,\n  type GradientPreset,\n  type GradientTextVariants,\n} from './gradient-text.variants'\n",
      "type": "registry:ui",
      "target": "~/components/ui/gradient-text/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "@radix-ui/react-slot"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "description": "Applies a CSS gradient as text color via background-clip: text. Supports preset gradients (sunset, ocean, forest, fire, candy, aurora, rainbow, gold, neon, grape), custom from/to colors with a direction, a fully custom CSS gradient string, and an animated mode that shifts the gradient.",
  "categories": [
    "display",
    "typography"
  ]
}