# Lucero

**Luzmo's Design System** — A collection of reusable web components built with [Lit](https://lit.dev/) for creating consistent, accessible, and beautiful user interfaces.

## Alpha

> ⚠️ This package is in alpha state. Do not use in production. Expect breaking changes.

## Installation

```bash
npm install @luzmo/lucero
```

## Usage

Import individual components:

```typescript
import '@luzmo/lucero/button';
import '@luzmo/lucero/text-field';
import '@luzmo/lucero/menu';
```

Use in your HTML:

```html
<luzmo-button variant="primary">Click me</luzmo-button>
<luzmo-text-field
  label="Email"
  placeholder="Enter your email"
></luzmo-text-field>
```

## Available Components

| Component            | Import                               |
| -------------------- | ------------------------------------ |
| Accordion            | `@luzmo/lucero/accordion`            |
| Action Bar           | `@luzmo/lucero/action-bar`           |
| Action Button        | `@luzmo/lucero/action-button`        |
| Action Group         | `@luzmo/lucero/action-group`         |
| Action Menu          | `@luzmo/lucero/action-menu`          |
| Avatar               | `@luzmo/lucero/avatar`               |
| Button               | `@luzmo/lucero/button`               |
| Button Group         | `@luzmo/lucero/button-group`         |
| Calendar             | `@luzmo/lucero/calendar`             |
| Chat Message         | `@luzmo/lucero/chat-message`         |
| Chat Message Group   | `@luzmo/lucero/chat-message-group`   |
| Checkbox             | `@luzmo/lucero/checkbox`             |
| Color Area           | `@luzmo/lucero/color-area`           |
| Color Field          | `@luzmo/lucero/color-field`          |
| Color Menu           | `@luzmo/lucero/color-menu`           |
| Color Palette        | `@luzmo/lucero/color-palette`        |
| Color Picker         | `@luzmo/lucero/color-picker`         |
| Color Slider         | `@luzmo/lucero/color-slider`         |
| Date Time Picker     | `@luzmo/lucero/date-time-picker`     |
| Divider              | `@luzmo/lucero/divider`              |
| Field Group          | `@luzmo/lucero/field-group`          |
| Field Label          | `@luzmo/lucero/field-label`          |
| Icon                 | `@luzmo/lucero/icon`                 |
| Menu                 | `@luzmo/lucero/menu`                 |
| Multi Language Field | `@luzmo/lucero/multi-language-field` |
| Number Field         | `@luzmo/lucero/number-field`         |
| Options              | `@luzmo/lucero/options`              |
| Picker               | `@luzmo/lucero/picker`               |
| Picker Button        | `@luzmo/lucero/picker-button`        |
| Progress Circle      | `@luzmo/lucero/progress-circle`      |
| Prompt Box           | `@luzmo/lucero/prompt-box`           |
| Radio                | `@luzmo/lucero/radio`                |
| Search               | `@luzmo/lucero/search`               |
| Select               | `@luzmo/lucero/select`               |
| Slider               | `@luzmo/lucero/slider`               |
| Suggestion           | `@luzmo/lucero/suggestion`           |
| Swatch               | `@luzmo/lucero/swatch`               |
| Switch               | `@luzmo/lucero/switch`               |
| Tabs                 | `@luzmo/lucero/tabs`                 |
| Tags                 | `@luzmo/lucero/tags`                 |
| Text Field           | `@luzmo/lucero/text-field`           |
| Toast                | `@luzmo/lucero/toast`                |
| Tooltip              | `@luzmo/lucero/tooltip`              |

## Browser Support

- Last 2 versions of Chrome
- Last 2 versions of Firefox
- Last 2 versions of Safari
- Last 2 versions of Edge

## License

Copyright © 2025 Luzmo. All rights reserved.

Lucero must be used according to the [Luzmo Terms of Service](https://www.luzmo.com/information-pages/terms-of-use). This license allows users with a current active Luzmo account to use Lucero.