{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "shadow-card",
  "type": "registry:ui",
  "description": "Composable marketing card with L-shaped extrusion, optional pixel gradient mesh, and Radix Slot on the root",
  "dependencies": [
    "@radix-ui/react-slot"
  ],
  "files": [
    {
      "path": "registry/default/ui/shadow-card.tsx",
      "content": "import type { ComponentProps } from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nimport { cn } from \"@/lib/utils\"\n\n/**\n * 3D-style L-shaped extrusion. Renders at z-10; place after backdrops/glow/content\n * in DOM order so it paints on top, or rely on z-10 vs default z-0 layers.\n */\nfunction ShadowCardBevel({\n  className,\n  barClassName,\n  ...props\n}: ComponentProps<\"div\"> & {\n  /** Applied to both vertical and horizontal bars (e.g. thickness, color). */\n  barClassName?: string\n}) {\n  return (\n    <div\n      aria-hidden\n      className={cn(\"pointer-events-none absolute inset-0 z-10\", className)}\n      data-slot=\"shadow-card-bevel\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"absolute top-0 right-0 bottom-0 w-2 bg-black\",\n          barClassName\n        )}\n      />\n      <div\n        className={cn(\n          \"absolute right-0 bottom-0 left-0 h-2 bg-black\",\n          barClassName\n        )}\n      />\n    </div>\n  )\n}\n\ntype ShadowCardProps = ComponentProps<\"div\"> & {\n  asChild?: boolean\n}\n\nfunction ShadowCard({ className, asChild, ...props }: ShadowCardProps) {\n  const Comp = asChild ? Slot : \"div\"\n  return (\n    <Comp\n      className={cn(\"relative overflow-hidden rounded-sm\", className)}\n      data-slot=\"shadow-card\"\n      {...props}\n    />\n  )\n}\n\nfunction ShadowCardBackdrop({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"absolute\", className)}\n      data-slot=\"shadow-card-backdrop\"\n      {...props}\n    />\n  )\n}\n\nfunction ShadowCardGlow({ className, style, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"absolute\", className)}\n      data-slot=\"shadow-card-glow\"\n      style={style}\n      {...props}\n    />\n  )\n}\n\nconst DEFAULT_SHADOW_CARD_PIXEL_COLORS: string[][] = [\n  [\n    \"#e8d0e0\",\n    \"#dcc4d8\",\n    \"#d4bcd4\",\n    \"#ccb4d0\",\n    \"#c8b0cc\",\n    \"#c8aec8\",\n    \"#ccb0c8\",\n    \"#d0b4c8\",\n    \"#d8bcc8\",\n    \"#dcc0c8\",\n  ],\n  [\n    \"#e4c8d8\",\n    \"#d8bcd0\",\n    \"#d0b0c8\",\n    \"#c8a8c0\",\n    \"#c4a0b8\",\n    \"#c4a0b4\",\n    \"#c8a4b4\",\n    \"#d0acb4\",\n    \"#d8b4b8\",\n    \"#e0bcbc\",\n  ],\n  [\n    \"#e0c0d0\",\n    \"#d4b4c8\",\n    \"#cca8bc\",\n    \"#c49cb0\",\n    \"#c094a8\",\n    \"#c090a0\",\n    \"#c49498\",\n    \"#cc9c98\",\n    \"#d8a8a0\",\n    \"#e0b4a8\",\n  ],\n  [\n    \"#deb8c8\",\n    \"#d0a8bc\",\n    \"#c89cac\",\n    \"#c0909c\",\n    \"#bc8890\",\n    \"#bc8488\",\n    \"#c08884\",\n    \"#cc9080\",\n    \"#dca088\",\n    \"#e8b094\",\n  ],\n  [\n    \"#dcb0c0\",\n    \"#cca0b0\",\n    \"#c4909c\",\n    \"#bc848c\",\n    \"#b87c80\",\n    \"#b87874\",\n    \"#c08070\",\n    \"#d09070\",\n    \"#e4a47c\",\n    \"#f0b88c\",\n  ],\n  [\n    \"#d8a8b8\",\n    \"#c898a4\",\n    \"#c08890\",\n    \"#b87c80\",\n    \"#b47470\",\n    \"#b87064\",\n    \"#c87c5c\",\n    \"#dc9460\",\n    \"#f0ac70\",\n    \"#fcc484\",\n  ],\n  [\n    \"#d4a0b0\",\n    \"#c49098\",\n    \"#bc8084\",\n    \"#b47474\",\n    \"#b06c64\",\n    \"#b8685c\",\n    \"#cc7850\",\n    \"#e49454\",\n    \"#f8b068\",\n    \"#ffd080\",\n  ],\n  [\n    \"#d498a8\",\n    \"#c08890\",\n    \"#b8787c\",\n    \"#b06c6c\",\n    \"#ac645c\",\n    \"#b46050\",\n    \"#d07448\",\n    \"#e8944c\",\n    \"#fcb860\",\n    \"#ffe080\",\n  ],\n  [\n    \"#d09098\",\n    \"#bc8088\",\n    \"#b47074\",\n    \"#ac6464\",\n    \"#a85c54\",\n    \"#b45848\",\n    \"#d47044\",\n    \"#ec9448\",\n    \"#ffc05c\",\n    \"#ffec88\",\n  ],\n  [\n    \"#cc8890\",\n    \"#b87880\",\n    \"#b0686c\",\n    \"#a85c5c\",\n    \"#a4544c\",\n    \"#b05040\",\n    \"#d86c40\",\n    \"#f09444\",\n    \"#ffc858\",\n    \"#fff490\",\n  ],\n]\n\ntype ShadowCardPixelGradientProps = ComponentProps<\"div\"> & {\n  /** Row-major grid of CSS color strings; defaults to the built-in pastel mesh. */\n  colors?: string[][]\n}\n\nfunction ShadowCardPixelGradient({\n  className,\n  colors = DEFAULT_SHADOW_CARD_PIXEL_COLORS,\n  ...props\n}: ShadowCardPixelGradientProps) {\n  return (\n    <div\n      className={cn(\"flex h-full w-full flex-col\", className)}\n      data-slot=\"shadow-card-pixel-gradient\"\n      {...props}\n    >\n      {colors.map((row, i) => (\n        <div className=\"flex flex-1\" key={i}>\n          {row.map((color, j) => (\n            <div\n              className=\"flex-1\"\n              key={j}\n              style={{ backgroundColor: color }}\n            />\n          ))}\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ShadowCardVerticalText({\n  className,\n  style,\n  ...props\n}: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"absolute\", className)}\n      data-slot=\"shadow-card-vertical-text\"\n      style={{\n        writingMode: \"vertical-rl\",\n        textOrientation: \"mixed\",\n        transform: \"rotate(180deg)\",\n        ...style,\n      }}\n      {...props}\n    />\n  )\n}\n\nfunction ShadowCardFooter({ className, ...props }: ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\"absolute bottom-6 left-6 flex items-end gap-3\", className)}\n      data-slot=\"shadow-card-footer\"\n      {...props}\n    />\n  )\n}\n\nexport type { ShadowCardPixelGradientProps, ShadowCardProps }\nexport {\n  ShadowCard,\n  ShadowCardBackdrop,\n  ShadowCardBevel,\n  ShadowCardFooter,\n  ShadowCardGlow,\n  ShadowCardPixelGradient,\n  ShadowCardVerticalText,\n}\n",
      "type": "registry:ui"
    }
  ]
}