{
  "name": "gradient-text",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "gradient-text.tsx",
      "content": "\"use client\";\r\n\r\nimport { css, themeVars as theme, tokens } from \"@yugnex/core\";\r\nimport { forwardRef, type ElementType, type HTMLAttributes } from \"react\";\r\n\r\nconst gradientTextClass = css({\r\n  backgroundClip: \"text\",\r\n  WebkitBackgroundClip: \"text\",\r\n  color: \"transparent\",\r\n  display: \"inline-block\",\r\n});\r\n\r\nconst DEFAULT_COLORS = [theme.color.primary, tokens.colorPrimitives.warning[400], tokens.colorPrimitives.success[400]];\r\n\r\nexport interface GradientTextProps extends HTMLAttributes<HTMLElement> {\r\n  as?: ElementType;\r\n  /** CSS color values (hex, var(), etc.) used as gradient stops. Defaults to the theme's primary/warning/success hues. */\r\n  colors?: string[];\r\n  /** Gradient angle in degrees. */\r\n  angle?: number;\r\n}\r\n\r\n/** Renders children with a gradient clipped to the text. Colors/angle are runtime props, not baked into a static class. */\r\nexport const GradientText = forwardRef<HTMLElement, GradientTextProps>(function GradientText(\r\n  { as, colors = DEFAULT_COLORS, angle = 120, className, style, ...props },\r\n  ref,\r\n) {\r\n  const Component = as ?? \"span\";\r\n  const backgroundImage = `linear-gradient(${angle}deg, ${colors.join(\", \")})`;\r\n\r\n  return (\r\n    <Component\r\n      ref={ref}\r\n      className={className ? `${gradientTextClass} ${className}` : gradientTextClass}\r\n      style={{ backgroundImage, ...style }}\r\n      {...props}\r\n    />\r\n  );\r\n});\r\n",
      "type": "registry:component"
    }
  ]
}