Angular UI Component Library published to GitHub Packages.

---

## 🚀 Getting Started

### 1) Prerequisites
- GitHub account with access to this repo
- Node.js v18+ and npm v9+
- Personal Access Token (PAT) with scopes:
  - `read:packages` (install)
  - `write:packages` (publish)
  - `repo` (if the repo is private)

Note: Store tokens in environment variables or a secrets manager. Do not commit them.

### 2) Configure Registry (`.npmrc`)
Create `.npmrc` in your project root (or `~/.npmrc` globally):
```ini
@Crystal-Code-Labs:registry=https://npm.pkg.github.com/
//npm.pkg.github.com/:_authToken=${NODE_AUTH_TOKEN}
```
Set `NODE_AUTH_TOKEN` to your GitHub PAT in your shell or CI.

### 3) Install the package
```bash
npm install @Crystal-Code-Labs/ccl-ui-components
```

### 4) Use in an Angular standalone app
`app.ts` (example):
```ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { uiComponents, ButtonComponent, InputComponent, DataTableComponent, ModalComponent, AlertComponent, ToastComponent } from '@Crystal-Code-Labs/ccl-ui-components';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet, uiComponents, ButtonComponent, InputComponent, DataTableComponent, ModalComponent, AlertComponent, ToastComponent],
  template: `
    <ccl-button>Primary</ccl-button>
    <ccl-input label="Email" placeholder="you@example.com"></ccl-input>
    <ccl-datatable [columns]="cols" [rows]="rows"></ccl-datatable>

    <button (click)="openModal()">Open Modal</button>
    <ccl-modal [isOpen]="showModal" title="Confirm" (closed)="closeModal()">
      <p>Proceed?</p>
      <div modal-footer>
        <button (click)="confirm()">Confirm</button>
        <button (click)="closeModal()">Cancel</button>
      </div>
    </ccl-modal>

    <ccl-alert variant="success" message="Operation completed!" [dismissible]="true"></ccl-alert>
    <ccl-toast variant="info" message="New notification" [duration]="3000"></ccl-toast>
  `,
})
export class App {
  showModal = false;
  cols = [
    { id: 'name', label: 'Name', width: '40%' },
    { id: 'email', label: 'Email' },
    { id: 'role', label: 'Role', width: '20%' },
  ];
  rows = [
    { name: 'Ada Lovelace', email: 'ada@example.com', role: 'Admin' },
    { name: 'Grace Hopper', email: 'grace@example.com', role: 'User' },
  ];
  openModal() { this.showModal = true; }
  closeModal() { this.showModal = false; }
  confirm() { console.log('Confirmed'); this.closeModal(); }
}
```

### 5) Theming and tokens
- CSS variables are provided via tokens. Import one of:
  - `@Crystal-Code-Labs/ccl-ui-components/styles/tokens.css`
  - `@Crystal-Code-Labs/ccl-ui-components/styles/naked.css`
  - `@Crystal-Code-Labs/ccl-ui-components/styles/brandA.css`
- Files use `:host { ... }` so variables work within Angular components.

### 6) Publish a new version (maintainers)
```bash
npm version patch   # or minor / major
npm run build:lib
npm publish dist/ccl-ui-components
```

### 7) Troubleshooting
- ENEEDAUTH / 403: verify `.npmrc` and PAT scopes
- Package not found: confirm scope/name `@Crystal-Code-Labs/ccl-ui-components`
- Install works locally but publish fails: publish from `dist/ccl-ui-components`

For detailed docs, see the `docs/` folder: installation, tokens, theming, and component usage (Buttons, Input, DataTable, Modal, Alert, Toast).