{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "gradient-text",
  "title": "Gradient Text",
  "description": "Fills text with a gradient via background-clip. Defaults to the theme's --gradient-text (follows the live glass tint) and falls back to a fixed brand gradient standalone.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "components/gradient-text.tsx",
      "content": "import type * as React from \"react\";\n\n/**\n * Standalone fallbacks for when the @sistine/theme tokens aren't present. They mirror the theme\n * gradient's hue math (base hue → +63.53°): the default at a mid lightness, the contrast one dark\n * (legible on light surfaces; the theme's .dark override flips it light).\n */\nconst FALLBACK_GRADIENT = \"linear-gradient(135deg, oklch(0.62 0.16 250) 0%, oklch(0.62 0.16 313.53) 100%)\";\nconst FALLBACK_CONTRAST = \"linear-gradient(135deg, oklch(0.32 0.14 250) 0%, oklch(0.32 0.14 313.53) 100%)\";\n\nexport interface GradientTextProps extends React.ComponentProps<\"span\"> {\n  /** Override the gradient. Defaults to the theme's `--gradient-text`, which follows the live glass tint. */\n  gradient?: string;\n  /**\n   * Use the high-contrast theme gradient (`--gradient-text-contrast`: dark in light mode, light in\n   * dark mode) so the text stays legible printed ON a tinted glass surface. Ignored when `gradient`\n   * is set.\n   */\n  contrast?: boolean;\n}\n\n/**\n * Fills its text with a gradient via `background-clip: text`. Defaults to the theme token\n * `--gradient-text` (which tracks the live glass tint); pass `contrast` to use the lightness-\n * contrasting `--gradient-text-contrast` when the text sits on a tinted surface. Falls back to a\n * fixed brand gradient when the theme isn't present, so it works standalone. Best on large/display\n * text — a gradient fill has no single contrast value, so keep body/UI text solid.\n *\n * @example\n * <h1><GradientText>Beautiful interfaces</GradientText></h1>\n * <GradientText contrast><code>{css}</code></GradientText>\n * <GradientText gradient=\"linear-gradient(90deg, #f00, #00f)\">Custom</GradientText>\n */\nexport function GradientText({ gradient, contrast = false, style, ...props }: GradientTextProps) {\n  const themed = contrast ? `var(--gradient-text-contrast, ${FALLBACK_CONTRAST})` : `var(--gradient-text, ${FALLBACK_GRADIENT})`;\n  return (\n    <span\n      data-slot=\"gradient-text\"\n      style={{\n        backgroundImage: gradient ?? themed,\n        backgroundClip: \"text\",\n        WebkitBackgroundClip: \"text\",\n        color: \"transparent\",\n        WebkitTextFillColor: \"transparent\",\n        ...style,\n      }}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:component",
      "target": "components/gradient-text.tsx"
    }
  ],
  "type": "registry:component"
}