---
name: ComponentVariants
lang: ts
domain: core
version: "1.0.0"
algebraic: product
definition: |
  interface ComponentBaseProps { className?: string; children?: React.ReactNode }
  type PropsWithVariants<V> = ComponentBaseProps & VariantProps<V>
description: "Tipos base para componentes con variantes CVA. Props comunes y composición de variantes type-safe."
tags: [component, variants, cva, props, base]
uses_types: []
file_path: "frontend/types/core/component_variants.ts"
source_repo: "https://gitea-dgg044oo04woo4ggcsws4gk0.organic-machine.com/Bl4cksmith/Frontend_Library"
source_license: "MIT"
source_file: "frontend/src/components/ui/button.tsx"
---

## Tipos exportados

- `VariantProps<V>` — re-exportado de `class-variance-authority`. Extrae el tipo de props de un `cva()` call.
- `ComponentBaseProps` — props comunes a todos los componentes: `className` y `children` opcionales.
- `PropsWithVariants<V>` — combinación de `ComponentBaseProps` con las variantes de un `cva()` concreto. Usar como base para las props de cualquier componente con variantes.

## Uso

```typescript
import { cva } from "class-variance-authority"
import { type PropsWithVariants } from "@/types/core/component_variants"

const buttonVariants = cva("base-classes", {
  variants: { size: { sm: "...", md: "..." } }
})

type ButtonProps = PropsWithVariants<typeof buttonVariants>
```

## Notas

Requiere `class-variance-authority` como dependencia del proyecto consumidor. `React.ReactNode` requiere que `react` esté en el scope — en proyectos con `@types/react` esto se resuelve automáticamente.
