{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "glow",
  "title": "Glow",
  "description": "The nx-ui Glow component.",
  "registryDependencies": [
    "@nx-ui/utils"
  ],
  "files": [
    {
      "path": "components/ui/glow.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * Glow — a soft radial-gradient blob for hero and section accents, sitting\n * behind headings or featured icons to add depth. Pure CSS, token-driven off\n * the brand / accent ramps so it re-tints with the active brand theme and works\n * in dark mode.\n *\n * Paint-behind contract (shared with `background-pattern` and\n * `css-background-pattern`): the blob is `absolute`, `pointer-events-none` and\n * `-z-10`, so it stacks behind sibling content with no z-index on the content.\n * The wrapping element MUST be `relative isolate` — the `isolate` creates the\n * stacking context that `-z-10` resolves against. Without it the negative\n * z-index escapes to an ancestor stacking context and the blob paints *behind*\n * any opaque ancestor background (i.e. it silently disappears). The isolating\n * wrapper must contain everything the blob visually overlaps (an isolated\n * wrapper paints in the positioned layer, above sibling text). Clip with\n * `overflow-hidden` on the wrapper (or the card/section that owns the visual\n * bounds) when the blob is larger than its container.\n *\n * @example\n * <div className=\"relative isolate overflow-hidden\">\n *   <Glow color=\"brand\" className=\"top-0 left-1/2 -translate-x-1/2\" />\n *   <h1>…</h1>\n * </div>\n */\n\nconst colorVar = {\n  brand: \"var(--color-brand-500)\",\n  accent: \"var(--color-accent-400)\",\n  success: \"var(--color-utility-green-500)\",\n  error: \"var(--color-utility-red-500)\",\n} as const\n\nfunction Glow({\n  color = \"brand\",\n  intensity = 20,\n  className,\n  style,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  color?: keyof typeof colorVar\n  /** Peak opacity of the blob centre, as a percentage (0–100). */\n  intensity?: number\n}) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"glow\"\n      className={cn(\n        \"pointer-events-none absolute -z-10 size-72 rounded-full blur-3xl\",\n        className\n      )}\n      style={{\n        backgroundImage: `radial-gradient(circle at center, color-mix(in srgb, ${colorVar[color]} ${intensity}%, transparent), transparent 70%)`,\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nexport { Glow }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}