{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "type": "registry:ui",
  "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"
  ],
  "files": [
    {
      "path": "packages/elements-lit/src/components/gradient-text/gradient-text.ts",
      "content": "import { LitElement, css, html } from 'lit'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { gradientTextPresets, type GradientPreset } from './gradient-text.variants'\n\nconst gradientKeyframes = css`\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\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\n/**\n * <uip-gradient-text> — renders text with a CSS gradient fill.\n */\nexport class UipGradientText extends LitElement {\n  static styles = [\n    tailwind,\n    gradientKeyframes,\n    css`\n      :host {\n        display: inline-block;\n      }\n    `,\n  ]\n\n  static properties = {\n    preset: { reflect: true },\n    from: { reflect: true },\n    to: { reflect: true },\n    direction: { reflect: true },\n    gradient: { reflect: true },\n    animated: { type: Boolean, reflect: true },\n    animationDuration: { type: Number, attribute: 'animation-duration', reflect: true },\n  }\n\n  preset?: GradientPreset\n  from?: string\n  to?: string\n  direction: Direction = 'to right'\n  gradient?: string\n  animated = false\n  animationDuration = 4\n\n  constructor() {\n    super()\n    new ThemeController(this)\n  }\n\n  connectedCallback() {\n    super.connectedCallback()\n    this.setAttribute('data-uipkge', '')\n    this.setAttribute('data-slot', 'gradient-text')\n  }\n\n  willUpdate() {\n    if (this.preset) this.setAttribute('data-preset', this.preset)\n    if (this.animated) this.setAttribute('data-animated', 'true')\n  }\n\n  render() {\n    let g = this.gradient\n    if (!g && this.preset) g = gradientTextPresets[this.preset]\n    if (!g && this.from && this.to) g = `linear-gradient(${this.direction}, ${this.from}, ${this.to})`\n    if (!g) g = 'linear-gradient(to right, var(--primary), var(--primary))'\n\n    const style = `background-image: ${g}; background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; ${\n      this.animated\n        ? `background-size: 200% 200%; animation: gradient-text-shift ${this.animationDuration}s ease infinite;`\n        : ''\n    }`\n\n    return html`<span part=\"base\" data-slot=\"gradient-text\" class=\"inline-block\" style=${style}><slot></slot></span>`\n  }\n}\n\ncustomElements.get('uip-gradient-text') || customElements.define('uip-gradient-text', UipGradientText)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'uip-gradient-text': UipGradientText\n  }\n}\n",
      "type": "registry:file",
      "target": "src/uip/components/gradient-text/gradient-text.ts"
    },
    {
      "path": "packages/elements-lit/src/components/gradient-text/gradient-text.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\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:file",
      "target": "src/uip/components/gradient-text/gradient-text.variants.ts"
    }
  ],
  "dependencies": [
    "class-variance-authority",
    "lit"
  ],
  "registryDependencies": [
    "https://uipkge.dev/r/lit/lit-core.json"
  ]
}