{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "layered-card",
  "title": "Layered Card",
  "description": "Card component with stacked layers effect showing offset depth - neubrutalist depth illusion",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@boldkit/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/layered-card.tsx",
      "content": "/* eslint-disable react-refresh/only-export-components */\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '@/lib/utils'\n\nconst layeredCardVariants = cva('relative', {\n  variants: {\n    layers: {\n      single: '',\n      double: '',\n      triple: '',\n    },\n    offset: {\n      sm: '',\n      default: '',\n      lg: '',\n    },\n    layerColor: {\n      default: '',\n      primary: '',\n      secondary: '',\n      accent: '',\n      muted: '',\n    },\n  },\n  defaultVariants: {\n    layers: 'double',\n    offset: 'default',\n    layerColor: 'default',\n  },\n})\n\nexport interface LayeredCardProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof layeredCardVariants> {\n  /** Make the card interactive with hover effects */\n  interactive?: boolean\n}\n\nconst LayeredCard = React.forwardRef<HTMLDivElement, LayeredCardProps>(\n  ({ className, layers, offset, layerColor, interactive = false, children, ...props }, ref) => {\n    // Calculate offsets based on size\n    const offsetSizes = {\n      sm: 6,\n      default: 8,\n      lg: 12,\n    }\n    const offsetPx = offsetSizes[offset || 'default']\n\n    // Get layer count\n    const layerCount = layers === 'single' ? 1 : layers === 'triple' ? 3 : 2\n\n    // Get background color class for layers\n    const colorClasses = {\n      default: 'bg-muted',\n      primary: 'bg-primary',\n      secondary: 'bg-secondary',\n      accent: 'bg-accent',\n      muted: 'bg-muted',\n    }\n    const layerBg = colorClasses[layerColor || 'default']\n\n    return (\n      <div\n        ref={ref}\n        className={cn(layeredCardVariants({ layers, offset, layerColor }), className)}\n        {...props}\n      >\n        {/* Layer 3 (furthest back) */}\n        {layerCount >= 3 && (\n          <div\n            className={cn(\n              'absolute inset-0 border-3 border-foreground',\n              layerBg,\n              'opacity-50'\n            )}\n            style={{\n              transform: `translate(${offsetPx * 3}px, ${offsetPx * 3}px)`,\n            }}\n          />\n        )}\n\n        {/* Layer 2 */}\n        {layerCount >= 2 && (\n          <div\n            className={cn(\n              'absolute inset-0 border-3 border-foreground',\n              layerBg,\n              'opacity-70'\n            )}\n            style={{\n              transform: `translate(${offsetPx * 2}px, ${offsetPx * 2}px)`,\n            }}\n          />\n        )}\n\n        {/* Layer 1 */}\n        {layerCount >= 1 && (\n          <div\n            className={cn('absolute inset-0 border-3 border-foreground', layerBg)}\n            style={{\n              transform: `translate(${offsetPx}px, ${offsetPx}px)`,\n            }}\n          />\n        )}\n\n        {/* Main card (top layer) */}\n        <div\n          className={cn(\n            'relative border-3 border-foreground bg-card text-card-foreground',\n            interactive &&\n              'cursor-pointer transition-transform duration-200 hover:translate-x-[-4px] hover:translate-y-[-4px]'\n          )}\n        >\n          {children}\n        </div>\n      </div>\n    )\n  }\n)\nLayeredCard.displayName = 'LayeredCard'\n\nconst LayeredCardHeader = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col space-y-1.5 border-b-3 border-foreground bg-muted p-4',\n      className\n    )}\n    {...props}\n  />\n))\nLayeredCardHeader.displayName = 'LayeredCardHeader'\n\nconst LayeredCardTitle = React.forwardRef<\n  HTMLHeadingElement,\n  React.HTMLAttributes<HTMLHeadingElement>\n>(({ className, ...props }, ref) => (\n  <h3\n    ref={ref}\n    className={cn('text-xl font-bold uppercase tracking-wide', className)}\n    {...props}\n  />\n))\nLayeredCardTitle.displayName = 'LayeredCardTitle'\n\nconst LayeredCardDescription = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />\n))\nLayeredCardDescription.displayName = 'LayeredCardDescription'\n\nconst LayeredCardContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('p-4', className)} {...props} />\n))\nLayeredCardContent.displayName = 'LayeredCardContent'\n\nconst LayeredCardFooter = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex items-center border-t-3 border-foreground bg-muted p-4',\n      className\n    )}\n    {...props}\n  />\n))\nLayeredCardFooter.displayName = 'LayeredCardFooter'\n\nexport {\n  LayeredCard,\n  LayeredCardHeader,\n  LayeredCardTitle,\n  LayeredCardDescription,\n  LayeredCardContent,\n  LayeredCardFooter,\n  layeredCardVariants,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/layered-card.tsx"
    }
  ],
  "type": "registry:ui"
}