CULTIVA IA
Component Library v1.0

const buttonVariants = cva(
  "inline-flex items-center rounded-md font-medium transition-colors focus-visible:ring-2 disabled:opacity-50",
  {
    variants: {
      variant: {
        primary:   "bg-green-500 text-white hover:bg-green-600",
        secondary: "bg-white/8 text-slate-200 border border-white/10 hover:bg-white/12",
        ghost:     "text-slate-300 hover:bg-white/6 hover:text-white",
        danger:    "bg-red-500 text-white hover:bg-red-600",
      },
      size: {
        sm:  "h-8 px-3 text-sm",
        md:  "h-[38px] px-4 text-sm",
        lg:  "h-[46px] px-6 text-base",
      },
    },
    defaultVariants: { variant: "primary", size: "md" },
  }
)

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
  ({ variant, size, isLoading, children, ...props }, ref) => (
    <button ref={ref} disabled={isLoading} className={cn(buttonVariants({ variant, size }))}>
      {isLoading && <Spinner />}
      {children}
    </button>
  )
)

type BadgeVariant = "active" | "paused" | "completed" | "pending" | "error" | "pro"

const variantClasses: Record<BadgeVariant, string> = {
  active:    "bg-green-500/15 text-green-400 border-green-500/30",
  paused:    "bg-yellow-500/15 text-yellow-400 border-yellow-500/30",
  completed: "bg-blue-500/15 text-blue-400 border-blue-500/30",
  pending:   "bg-white/5 text-slate-400 border-white/8",
  error:     "bg-red-500/15 text-red-400 border-red-500/30",
  pro:       "bg-gradient-to-r from-purple-500/20 to-blue-500/20 text-purple-400",
}

export function Badge({ variant, label }: BadgeProps) {
  return (
    <span className={cn("badge", variantClasses[variant])}>
      <span className="badge-dot" />{label}
    </span>
  )
}

// Compound component: Card.Header / Card.Body / Card.Footer
function Card({ children, className }: CardProps) {
  return <div className={cn("rounded-2xl border bg-slate-800 border-white/7 hover:border-green-500/20", className)}>{children}</div>
}

Card.Header = function CardHeader({ title, subtitle, icon }: CardHeaderProps) {
  return (
    <div className="flex items-start justify-between p-6 pb-0">
      <div>
        <h3 className="font-bold text-white">{title}</h3>
        <p className="text-xs text-slate-500">{subtitle}</p>
      </div>
      {icon && <CardIcon>{icon}</CardIcon>}
    </div>
  )
}

// Usage:
<Card>
  <Card.Header title="Proyectos activos" subtitle="Este mes" icon="📋" />
  <Card.Body><MetricDisplay value=24 /></Card.Body>
  <Card.Footer><Badge variant="active" /></Card.Footer>
</Card>

// Compound pattern: Select > Select.Trigger + Select.Options > Select.Option
<Select value={servicio} onChange={setServicio}>
  <Select.Trigger>
    {options.find(o => o.value === servicio)?.label ?? "Selecciona un servicio"}
  </Select.Trigger>
  <Select.Options>
    {options.map(opt => (
      <Select.Option key={opt.value} value={opt.value}>
        {opt.icon} {opt.label}
      </Select.Option>
    ))}
  </Select.Options>
</Select>

// Context interno gestiona isOpen, selectedValue, focus trap
const SelectContext = createContext<SelectCtx>(null!)

// Render props: columnas configurables con renderCell personalizado
const columns: Column<Proyecto>[] = [
  {
    key: "nombre",
    header: "Proyecto",
    sortable: true,
    renderCell: (row) => (
      <div>
        <p className="font-semibold text-white">{row.nombre}</p>
        <p className="text-xs text-slate-400">{row.url}</p>
      </div>
    ),
  },
  { key: "estado", renderCell: (row) => <Badge variant={row.estado} /> },
]

<DataTable
  data={proyectos}
  columns={columns}
  pageSize={5}
  searchable
/>