{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "border-beam-card",
  "type": "registry:ui",
  "description": "border-beam around compound Card API with balanced title and description",
  "dependencies": [
    "border-beam"
  ],
  "registryDependencies": [
    "card"
  ],
  "files": [
    {
      "path": "registry/default/ui/border-beam-card.tsx",
      "content": "\"use client\"\n\n/**\n * Cult-pro wrapper: [`border-beam`](https://www.npmjs.com/package/border-beam) around the same\n * compound API as `@/components/ui/card` (`BorderBeamCard` + `BorderBeamCardHeader`, …).\n *\n * The package sets `overflow: hidden` on the beam root; we set `overflow: visible` so the bloom\n * (especially `beamSize=\"line\"`) is not clipped.\n *\n * Defaults: same concentric-radius shell as `HaloSelectTrigger` — outer `rounded-2xl` + `p-px`,\n * inner `rounded-[calc(1rem-1px)]` so the beam curve matches the card (not a smaller radius than\n * `Card`’s `rounded-2xl`). Layered shadow on the card; `text-balance` / `text-pretty` on title and\n * description wrappers.\n */\nimport type { ComponentProps, CSSProperties } from \"react\"\nimport { forwardRef } from \"react\"\nimport {\n  BorderBeam,\n  type BorderBeamProps,\n  type BorderBeamSize,\n} from \"border-beam\"\n\nimport { cn } from \"@/lib/utils\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/components/ui/card\"\n\n/**\n * Outer rim matches `Card`’s `rounded-2xl` (1rem); `p-px` reserves the 1px track for the beam (same\n * idea as `HaloSelectTrigger`’s `rounded-xl` + `p-px` + inner `rounded-[11px]`).\n */\nconst borderBeamCardShellClass = cn(\n  \"relative w-full rounded-2xl p-px\",\n  /* Inset highlight on the shell — same family as `HaloSelectTrigger` shadow stack */\n  \"before:pointer-events-none before:absolute before:inset-0 before:rounded-[inherit] before:shadow-[inset_0_1px_0_rgba(255,255,255,0.45)]\",\n  \"dark:before:shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]\"\n)\n\n/** Inner radius = outer `rounded-2xl` − 1px padding (concentric corners). */\nconst borderBeamCardInnerCurveClass = \"rounded-[calc(1rem-1px)]\"\n\n/** Layered, low-contrast depth — works on varied backgrounds (see make-interfaces-feel-better). */\nconst borderBeamCardSurfaceClass =\n  \"shadow-[0_1px_0_rgba(0,0,0,0.04),0_1px_2px_-0.5px_rgba(0,0,0,0.07)] dark:shadow-[0_1px_0_rgba(255,255,255,0.06),0_1px_2px_-0.5px_rgba(0,0,0,0.45)]\"\n\nexport type BorderBeamCardProps = Omit<BorderBeamProps, \"children\" | \"size\"> & {\n  children: React.ReactNode\n  /** Card layout density — same as `Card` `size` (`default` | `sm`). */\n  size?: \"default\" | \"sm\"\n  /** Beam preset — passed to `BorderBeam` as `size` (`sm` | `md` | `line`). */\n  beamSize?: BorderBeamSize\n  /** Classes merged onto the inner `Card`. */\n  cardClassName?: string\n  /** @deprecated Use `cardClassName` */\n  contentClassName?: string\n}\n\nexport const BorderBeamCard = forwardRef<HTMLDivElement, BorderBeamCardProps>(\n  function BorderBeamCard(\n    {\n      children,\n      className,\n      cardClassName,\n      contentClassName,\n      size: cardSize = \"default\",\n      beamSize = \"md\",\n      theme = \"auto\",\n      borderRadius,\n      style: beamStyle,\n      ...beamProps\n    },\n    ref\n  ) {\n    const explicitBeamRadius = borderRadius\n\n    const beamMergedStyle: CSSProperties | undefined =\n      explicitBeamRadius != null || beamStyle != null\n        ? {\n            ...beamStyle,\n            ...(explicitBeamRadius != null\n              ? { borderRadius: explicitBeamRadius }\n              : {}),\n          }\n        : undefined\n\n    const cardRadiusStyle: CSSProperties | undefined =\n      explicitBeamRadius != null\n        ? { borderRadius: explicitBeamRadius }\n        : undefined\n\n    return (\n      <div\n        className={borderBeamCardShellClass}\n        ref={ref}\n        style={\n          explicitBeamRadius != null\n            ? { borderRadius: explicitBeamRadius + 1 }\n            : undefined\n        }\n      >\n        <BorderBeam\n          borderRadius={explicitBeamRadius}\n          className={cn(\n            \"overflow-visible! block w-full\",\n            explicitBeamRadius == null\n              ? borderBeamCardInnerCurveClass\n              : undefined,\n            className\n          )}\n          size={beamSize}\n          style={beamMergedStyle}\n          theme={theme}\n          {...beamProps}\n        >\n          <Card\n            className={cn(\n              borderBeamCardSurfaceClass,\n              explicitBeamRadius == null && \"rounded-[calc(1rem-1px)]!\",\n              cardSize === \"sm\" &&\n                \"gap-3 py-3 text-sm *:[data-slot=card-content]:px-3\",\n              cardClassName,\n              contentClassName\n            )}\n            style={cardRadiusStyle}\n          >\n            {children}\n          </Card>\n        </BorderBeam>\n      </div>\n    )\n  }\n)\n\nBorderBeamCard.displayName = \"BorderBeamCard\"\n\nexport function BorderBeamCardHeader(props: ComponentProps<typeof CardHeader>) {\n  return <CardHeader {...props} />\n}\nBorderBeamCardHeader.displayName = \"BorderBeamCardHeader\"\n\nexport function BorderBeamCardTitle({\n  className,\n  ...props\n}: ComponentProps<typeof CardTitle>) {\n  return <CardTitle className={cn(\"text-balance\", className)} {...props} />\n}\nBorderBeamCardTitle.displayName = \"BorderBeamCardTitle\"\n\nexport function BorderBeamCardDescription({\n  className,\n  ...props\n}: ComponentProps<typeof CardDescription>) {\n  return <CardDescription className={cn(\"text-pretty\", className)} {...props} />\n}\nBorderBeamCardDescription.displayName = \"BorderBeamCardDescription\"\n\nexport function BorderBeamCardAction(props: ComponentProps<typeof CardAction>) {\n  return <CardAction {...props} />\n}\nBorderBeamCardAction.displayName = \"BorderBeamCardAction\"\n\nexport function BorderBeamCardContent(\n  props: ComponentProps<typeof CardContent>\n) {\n  return <CardContent {...props} />\n}\nBorderBeamCardContent.displayName = \"BorderBeamCardContent\"\n\nexport function BorderBeamCardFooter(props: ComponentProps<typeof CardFooter>) {\n  return <CardFooter {...props} />\n}\nBorderBeamCardFooter.displayName = \"BorderBeamCardFooter\"\n",
      "type": "registry:ui"
    }
  ]
}