npm package: @ng-composite/core
Description: Angular Component Library con Tailwind CSS integrado
Author: Backsoul
Latest version: 0.0.9

# @ng-composite/core

Angular Component Library con Tailwind CSS integrado

## Instalación

```bash
npm install @ng-composite/core
```

## Setup Rápido ⚡

Después de instalar la librería, ejecuta el comando setup para configurar automáticamente Tailwind CSS:

```bash
npx ng-composite-setup
```

Este comando:

- ✅ Copia `tailwind.config.js` optimizado para @ng-composite/core
- ✅ Te da instrucciones paso a paso para completar la configuración
- ✅ Evita sobrescribir configuraciones existentes

### Setup Manual (alternativo)

Si prefieres configurar manualmente:

1. **Instala Tailwind CSS:**

```bash
npm install -D tailwindcss postcss autoprefixer
```

2. **Copia la configuración desde node_modules:**

```bash
cp ./node_modules/@ng-composite/core/tailwind.config.js ./tailwind.config.js
```

3. **Agrega las directivas de Tailwind a tu `src/styles.css`:**

```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```

## Uso de Componentes

### Importar el módulo

```typescript
import { NgModule } from "@angular/core";
import { CompositeModule } from "@ng-composite/core";

@NgModule({
  imports: [CompositeModule],
  // ...
})
export class AppModule {}
```

### Usar componentes standalone

```typescript
import { Component } from "@angular/core";
import { Button } from "@ng-composite/core";

@Component({
  selector: "app-example",
  standalone: true,
  imports: [Button],
  template: `
    <comp-button [color]="'primary'" [variant]="'fill'"> Click me! </comp-button>

    <comp-button [color]="'danger'" [variant]="'border'"> Danger Button </comp-button>

    <comp-button [color]="'success'" [variant]="'no-fill'"> Success Button </comp-button>
  `,
})
export class ExampleComponent {}
```

## Componentes Disponibles

### Button

Propiedades:

- `color`: 'primary' | 'danger' | 'success' (default: 'success')
- `variant`: 'fill' | 'border' | 'no-fill' (default: 'fill')

Ejemplo:

```html
<comp-button [color]="'primary'" [variant]="'border'"> Mi Botón </comp-button>
```

---

# Development

This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.2.0.

## Development server

To start a local development server, run:

```bash
ng serve
```

Once the server is running, open your browser and navigate to `http://localhost:4200/`. The application will automatically reload whenever you modify any of the source files.

## Code scaffolding

Angular CLI includes powerful code scaffolding tools. To generate a new component, run:

```bash
ng generate component component-name
```

For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:

```bash
ng generate --help
```

## Building

To build the project run:

```bash
ng build
```

This will compile your project and store the build artifacts in the `dist/` directory. By default, the production build optimizes your application for performance and speed.

## Running unit tests

To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:

```bash
ng test
```

## Running end-to-end tests

For end-to-end (e2e) testing, run:

```bash
ng e2e
```

Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.

## Additional Resources

For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.