{
  "id": "card",
  "type": "div",
  "bindings": {
    "onClick": {
      "source": "onClick",
      "transform": "data"
    },
    "className": {
      "source": ["variant", "padding", "hover", "onClick", "className"],
      "transform": "const cn = (classes) => classes.filter(Boolean).join(' '); const variant = data[0] || 'default'; const padding = data[1] || 'md'; const hover = data[2]; const onClick = data[3]; const className = data[4] || ''; const variantStyles = { default: 'bg-card border border-border', bordered: 'bg-background border-2 border-border', elevated: 'bg-card shadow-lg border border-border', flat: 'bg-muted' }; const paddingStyles = { none: 'p-0', sm: 'p-3', md: 'p-6', lg: 'p-8' }; const hoverClass = (hover || onClick) ? 'hover:shadow-md hover:scale-[1.01] cursor-pointer' : ''; const cursorClass = onClick ? 'cursor-pointer' : ''; return cn(['rounded-lg transition-all', variantStyles[variant], paddingStyles[padding], hoverClass, cursorClass, className])"
    }
  },
  "children": [
    {"type": "slot", "source": "children"}
  ]
}
