# CCL UI Components – Documentation

Welcome to the documentation for `@Crystal-Code-Labs/ccl-ui-components`.

This guide covers installation, private registry setup, design token generation, theming (naked and brandA), overriding tokens in a consumer app, CSS variables reference, and usage examples for all components.

## Components Available
- **Button** - Interactive buttons with variants and states
- **Input** - Form input fields with validation states
- **Select** - Dropdown select with single and multiple selection
- **Textarea** - Multi-line text input with resize control and length constraints
- **FormFieldWrapper** - Universal wrapper for form controls with labels, hints, and validation
- **DataTable** - Data display with sorting and filtering
- **Modal** - Overlay dialogs with focus management
- **Alert** - Inline notifications with variants
- **Toast** - Overlay notifications with auto-dismiss
- **Pagination** - Navigation controls with three variants (numbers, load-more, infinite-scroll)
- **Searchbar** - Search input with debouncing and clear functionality
- **Date Field** - Date input with calendar integration and form control support
- **Badge** - Status indicator and tag component with multiple variants

Quick links:
- [Usage Guide](./usage.md) - Complete installation and usage guide
- [Installation](./installation.md) - Detailed installation instructions
- [Theming Guide](./theming.md) - Comprehensive theming and customization
- [Design Tokens & Registry Setup](./tokens-and-registry.md)
- [CSS Variables Reference](./css-variables.md)
- [Buttons Usage](./buttons.md)
- [Input Usage](./input.md)
- [Select Usage](./select.md)
- [Textarea Usage](./textarea.md)
- [FormFieldWrapper Usage](./form-field-wrapper.md)
- [DataTable Usage](./datatable.md)
- [Modal Usage](./modal.md)
- [Alert Usage](./alert.md)
- [Toast Usage](./toast.md)
- [Pagination Usage](./pagination.md)
- [Searchbar Usage](./searchbar.md)
- [Date Field Usage](./date-field.md)
- [Badge Usage](./badge.md)