{
  "$schema": "https://shadcn-vue.com/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-vue/components/gradient-text/GradientText.vue",
      "content": "<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } from 'vue'\nimport { Primitive } from 'reka-ui'\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\nconst props = withDefaults(\n  defineProps<{\n    /** Rendered element / component via Primitive. */\n    as?: string\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    class?: HTMLAttributes['class']\n  }>(),\n  {\n    as: 'span',\n    direction: 'to right',\n    animated: false,\n    animationDuration: 4,\n  },\n)\n\nconst gradientValue = computed(() => {\n  if (props.gradient) return props.gradient\n  if (props.preset) return gradientTextPresets[props.preset] ?? ''\n  if (props.from && props.to) {\n    return `linear-gradient(${props.direction}, ${props.from}, ${props.to})`\n  }\n  // Default fallback: primary token gradient.\n  return 'linear-gradient(to right, var(--primary), var(--primary))'\n})\n\nconst style = computed(() => ({\n  backgroundImage: gradientValue.value,\n  backgroundClip: 'text',\n  WebkitBackgroundClip: 'text',\n  color: 'transparent',\n  WebkitTextFillColor: 'transparent',\n  backgroundSize: props.animated ? '200% 200%' : undefined,\n}))\n</script>\n\n<template>\n  <Primitive\n    data-uipkge\n    data-slot=\"gradient-text\"\n    :data-preset=\"preset\"\n    :data-animated=\"animated ? 'true' : undefined\"\n    :as=\"as\"\n    :as-child=\"asChild\"\n    :class=\"\n      cn(\n        'inline-block',\n        animated ? `motion-safe:animate-[gradient-text-shift_${props.animationDuration}s_ease_infinite]` : '',\n        props.class,\n      )\n    \"\n    :style=\"style\"\n  >\n    <slot />\n  </Primitive>\n</template>\n\n<style scoped>\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</style>\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/gradient-text/GradientText.vue"
    },
    {
      "path": "packages/registry-vue/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": "~/app/components/ui/gradient-text/gradient-text.variants.ts"
    },
    {
      "path": "packages/registry-vue/components/gradient-text/index.ts",
      "content": "export { default as GradientText } from './GradientText.vue'\nexport {\n  gradientTextPresets,\n  gradientTextVariants,\n  type GradientPreset,\n  type GradientTextVariants,\n} from './gradient-text.variants'\n",
      "type": "registry:ui",
      "target": "~/app/components/ui/gradient-text/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "reka-ui"
  ],
  "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"
  ]
}