{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-angular/components/gradient-text/gradient-text.component.ts",
      "content": "import { Component, Input, booleanAttribute, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core'\nimport { cn } from '@/lib/utils'\nimport {\n  gradientTextPresets,\n  gradientTextVariants,\n  type GradientPreset,\n  type GradientTextVariants,\n} from './gradient-text.variants'\n\n// Copied verbatim from the React gradient-text (injected there as a global <style>). Unscoped\n// (ViewEncapsulation.None) so it reaches the host and projected content; Angular adds it once.\nconst GRADIENT_TEXT_MOTION_STYLES = `\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\nexport type GradientDirection =\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\n/**\n * Applies a CSS gradient as text color via background-clip: text (React `GradientText`).\n * React's `as` / `asChild` map to the attribute form: `<h1 ui-gradient-text>` renders the\n * gradient on that element. Consumer `[style]` bindings on the host merge with the gradient\n * styles, like React's `style` spread.\n */\n@Component({\n  changeDetection: ChangeDetectionStrategy.Eager,\n  selector: 'ui-gradient-text, [ui-gradient-text]',\n  standalone: true,\n  encapsulation: ViewEncapsulation.None,\n  styles: [GRADIENT_TEXT_MOTION_STYLES],\n  host: {\n    'data-uipkge': '',\n    'data-slot': 'gradient-text',\n    '[attr.data-preset]': 'preset ?? null',\n    '[attr.data-animated]': 'animated ? \"true\" : null',\n    '[style.background-image]': 'gradientValue',\n    '[style.background-clip]': '\"text\"',\n    '[style.-webkit-background-clip]': '\"text\"',\n    '[style.color]': '\"transparent\"',\n    '[style.-webkit-text-fill-color]': '\"transparent\"',\n    '[style.background-size]': 'animated ? \"200% 200%\" : null',\n    '[class]': 'hostClass',\n  },\n  template: `<ng-content />`,\n})\nexport class UiGradientTextComponent {\n  @Input() preset?: GradientPreset\n  @Input() from?: string\n  @Input() to?: string\n  @Input() direction: GradientDirection = 'to right'\n  @Input() gradient?: string\n  @Input({ transform: booleanAttribute }) animated = false\n  @Input() animationDuration = 4\n  @Input('class') className?: string\n\n  get gradientValue(): string {\n    if (this.gradient) return this.gradient\n    if (this.preset) return gradientTextPresets[this.preset] ?? ''\n    if (this.from && this.to) return `linear-gradient(${this.direction}, ${this.from}, ${this.to})`\n    return 'linear-gradient(to right, var(--primary), var(--primary))'\n  }\n\n  get hostClass(): string {\n    return cn(\n      gradientTextVariants({} as GradientTextVariants),\n      this.animated ? `motion-safe:animate-[gradient-text-shift_${this.animationDuration}s_ease_infinite]` : '',\n      this.className,\n    )\n  }\n}\n\nexport { gradientTextPresets, gradientTextVariants, type GradientPreset, type GradientTextVariants }\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/gradient-text/gradient-text.component.ts"
    },
    {
      "path": "packages/registry-angular/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": "~/src/app/components/ui/gradient-text/gradient-text.variants.ts"
    },
    {
      "path": "packages/registry-angular/components/gradient-text/index.ts",
      "content": "export { UiGradientTextComponent, gradientTextPresets, gradientTextVariants } from './gradient-text.component'\nexport type { GradientDirection, GradientPreset, GradientTextVariants } from './gradient-text.component'\n",
      "type": "registry:ui",
      "target": "~/src/app/components/ui/gradient-text/index.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "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"
  ]
}