{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/gradient-text/GradientText.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n  import type { GradientPreset } from './gradient-text.variants'\n\n  export 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  export interface GradientTextProps extends HTMLAttributes<HTMLElement> {\n    /** Rendered element tag. */\n    as?: string\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?: GradientDirection\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    /** Render your own element with the gradient styles instead of emitting\n     *  the `as` tag — the Svelte counterpart of React's `asChild`. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { gradientTextPresets } from './gradient-text.variants'\n\n  let {\n    class: className,\n    as = 'span',\n    preset,\n    from,\n    to,\n    direction = 'to right',\n    gradient,\n    animated = false,\n    animationDuration = 4,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: GradientTextProps = $props()\n\n  const gradientValue = $derived.by(() => {\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  })\n\n  const style = $derived(\n    [\n      `background-image: ${gradientValue}`,\n      'background-clip: text',\n      '-webkit-background-clip: text',\n      'color: transparent',\n      '-webkit-text-fill-color: transparent',\n      animated ? 'background-size: 200% 200%' : '',\n    ]\n      .filter(Boolean)\n      .join('; '),\n  )\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'gradient-text',\n    'data-preset': preset,\n    'data-animated': animated ? 'true' : undefined,\n    class: cn(\n      'inline-block',\n      animated ? `motion-safe:animate-[gradient-text-shift_${animationDuration}s_ease_infinite]` : '',\n      className,\n    ),\n    style,\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <svelte:element this={as} bind:this={ref} {...mergedProps}>{@render children?.()}</svelte:element>\n{/if}\n\n<!-- Unscoped: Tailwind arbitrary `animate-[gradient-text-shift_…]` looks up\n     this name globally. Svelte leaves `@keyframes` names unscoped, so the\n     animation class resolves against this global definition. -->\n<style>\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": "~/src/lib/components/ui/gradient-text/GradientText.svelte"
    },
    {
      "path": "packages/registry-svelte/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/lib/components/ui/gradient-text/gradient-text.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/gradient-text/index.ts",
      "content": "export { default as GradientText, type GradientDirection, type GradientTextProps } from './GradientText.svelte'\nexport {\n  gradientTextPresets,\n  gradientTextVariants,\n  type GradientPreset,\n  type GradientTextVariants,\n} from './gradient-text.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/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"
  ]
}