# SigPro Components – Quick Reference

All components are exported as named exports from the library.  
Simple wrapper components accept `(props, children?)` and spread any additional HTML attributes.

---

## Accordion
`Accordion(props)`

| Prop | Type     | Default                | Description                          |
|------|----------|------------------------|--------------------------------------|
| `items` | array \| signal | `[]` | Items: `{ title?, content?, open?, classTitle?, classContent? }` |
| `name`  | string   | auto‑generated (`"acc-…"`) | Radio group name           |
| `class` | string   | –                      | Merged with `collapse`              |

---

## Alert
`Alert(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `alert`         |

---

## Autocomplete
`Autocomplete(props)`

| Prop          | Type           | Default          | Description                                      |
|---------------|----------------|------------------|--------------------------------------------------|
| `items`       | array \| signal | `[]`            | List of items (string or `{ label, value }`)     |
| `value`       | signal         | –                | Selected value (two‑way binding)                 |
| `onselect`    | function       | –                | Called when an item is chosen `(item)`           |
| `placeholder` | string         | `"..."`          | Input placeholder                                |
| `class`       | string         | –                | Extra classes (passed to inner `Input`)          |
| `...props`    |                |                  | All other props forwarded to the internal `Input`|

---

## Avatar
`Avatar(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `avatar`        |

---

## AvatarGroup
`AvatarGroup(props, children)`

| Prop | Type   | Default | Description                         |
|------|--------|---------|-------------------------------------|
| `class` | string | –       | Merged with `avatar-group -space-x-6` |

---

## Badge
`Badge(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `badge`         |

---

## Breadcrumbs
`Breadcrumbs(props, children)`

| Prop | Type   | Default | Description                    |
|------|--------|---------|--------------------------------|
| `class` | string | –       | Merged with `breadcrumbs`     |

---

## Button
`Button(props, children)`

| Prop       | Type    | Default | Description                               |
|------------|---------|---------|-------------------------------------------|
| `class`    | string  | –       | Merged with `btn`                         |
| `disabled` | boolean | –       | Standard disabled attribute               |
| *any*      |         |         | All other native `<button>` properties    |

---

## Calendar
`Calendar(props)`

| Prop       | Type                     | Default | Description                                                       |
|------------|--------------------------|---------|-------------------------------------------------------------------|
| `value`    | signal \| string \| object | –     | Selected date (string `"YYYY-MM-DD"` or `{ start, end }` for range) |
| `range`    | signal \| boolean        | `false` | Enable date range selection                                        |
| `hour`     | boolean                  | `false` | Show hour sliders (0‑23)                                           |
| `onChange` | function                 | –       | Called when selection changes `(value)`                            |
| `class`    | string                   | –       | Extra classes                                                      |

---

## Card
`Card(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `card`          |

---

## CardActions
`CardActions(props, children)`

| Prop | Type   | Default | Description                      |
|------|--------|---------|----------------------------------|
| `class` | string | –       | Merged with `card-actions`      |

---

## CardBody
`CardBody(props, children)`

| Prop | Type   | Default | Description                    |
|------|--------|---------|--------------------------------|
| `class` | string | –       | Merged with `card-body`       |

---

## CardTitle
`CardTitle(props, children)`

| Prop | Type   | Default | Description                     |
|------|--------|---------|---------------------------------|
| `class` | string | –       | Merged with `card-title`       |

---

## Carousel
`Carousel(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `carousel`      |

---

## CarouselItem
`CarouselItem(props, children)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `carousel-item`      |

---

## Chat
`Chat(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `chat`          |

---

## ChatBubble
`ChatBubble(props, children)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `chat-bubble`        |

---

## ChatFooter
`ChatFooter(props, children)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `chat-footer`        |

---

## ChatHeader
`ChatHeader(props, children)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `chat-header`        |

---

## ChatImage
`ChatImage(props, children)`

| Prop | Type         | Default | Description                                                                   |
|------|--------------|---------|-------------------------------------------------------------------------------|
| `class` | string       | –       | Merged with `chat-image avatar`                                               |
| *(children)* | string \| node | –   | If a string, used as `src` of an `<img>` inside a rounded `div`; otherwise rendered as content |

---

## Checkbox
`Checkbox(props)`

| Prop      | Type              | Default | Description                              |
|-----------|-------------------|---------|------------------------------------------|
| `class`   | string            | –       | Merged with `checkbox`                   |
| `checked` | boolean \| signal | –       | Checked state (can be a signal)          |
| `onchange`| function          | –       | Change handler                           |
| *any*     |                   |         | All standard `<input type="checkbox">` attributes |

---

## Colorpicker
`Colorpicker(props)`

| Prop       | Type                | Default      | Description                                     |
|------------|---------------------|--------------|-------------------------------------------------|
| `value`    | signal \| string     | `"#000000"`  | Selected color                                  |
| `label`    | string              | –            | Optional text shown in the trigger button       |
| `onchange` | function            | –            | Called when a color is picked `(color)`         |
| `class`    | string              | –            | Extra classes (applied to the dropdown trigger) |

---

## Datepicker
`Datepicker(props)`

| Prop          | Type                     | Default | Description                                                        |
|---------------|--------------------------|---------|--------------------------------------------------------------------|
| `value`       | signal                   | –       | Selected date(s) – string or `{ start, end }`                      |
| `range`       | signal \| boolean        | `false` | Enable date range selection                                        |
| `hour`        | boolean                  | `false` | Enable hour selection                                              |
| `onChange`    | function                 | –       | Change handler `(value)` (if `value` is not a signal)              |
| `placeholder` | string                   | auto    | Placeholder text shown when empty                                  |
| `class`       | string                   | –       | Extra classes                                                      |

---

## Divider
`Divider(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `divider`       |

---

## Drawer
`Drawer(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `drawer`        |

Use together with `DrawerToggle`, `DrawerContent`, `DrawerSide`, and `DrawerOverlay` to build a responsive drawer.

---

## DrawerToggle
`DrawerToggle(props)`

| Prop      | Type              | Default | Description                               |
|-----------|-------------------|---------|-------------------------------------------|
| `checked` | boolean \| signal | –       | Drawer open state (checkbox)              |
| `class`   | string            | –       | Merged with `drawer-toggle`               |

---

## DrawerContent
`DrawerContent(props, children)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `drawer-content`     |

---

## DrawerSide
`DrawerSide(props, children)`

| Prop | Type   | Default | Description                     |
|------|--------|---------|---------------------------------|
| `class` | string | –       | Merged with `drawer-side`      |

---

## DrawerOverlay
`DrawerOverlay(props)`

| Prop  | Type   | Default | Description                          |
|-------|--------|---------|--------------------------------------|
| `for` | string | –       | Associates with the drawer toggle id |
| `class`| string | –       | Merged with `drawer-overlay`        |

---

## Dropdown
`Dropdown(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `dropdown`      |

Typically contains `DropdownButton` and `DropdownContent`.

---

## DropdownButton
`DropdownButton(props, children)`

| Prop | Type   | Default | Description                                    |
|------|--------|---------|------------------------------------------------|
| `class` | string | –       | Merged with `btn`, makes it a dropdown trigger |

---

## DropdownContent
`DropdownContent(props, children)`

| Prop | Type   | Default | Description                                |
|------|--------|---------|--------------------------------------------|
| `class` | string | –       | Merged with `dropdown-content`, holds menu |

---

## Editor (Rich Text)
`Editor(props)`

| Prop       | Type              | Default | Description                                                |
|------------|-------------------|---------|------------------------------------------------------------|
| `value`    | signal \| string  | –       | HTML content of the editor (reactive)                      |
| `onchange` | function          | –       | Called when content changes `(html)` (if not using signal) |
| `class`    | string            | –       | Extra classes for the outer container                      |

---

## Fab
`Fab(props, children)`

| Prop   | Type   | Default | Description                                 |
|--------|--------|---------|---------------------------------------------|
| `icon` | string | –       | Icon (passed to `Icon`) for the main button |
| `class`| string | –       | Merged with `btn` (the main button)         |

---

## Fieldset
`Fieldset(props, children)`

| Prop    | Type   | Default | Description                     |
|---------|--------|---------|---------------------------------|
| `label` | string | –       | Legend text                     |
| `class` | string | –       | Merged with `fieldset`         |

---

## Fileinput
`Fileinput(props)`

| Prop       | Type            | Default | Description                                                                  |
|------------|-----------------|---------|------------------------------------------------------------------------------|
| `max`      | number          | `2`     | Maximum file size in MB                                                      |
| `accept`   | string          | `"*"`   | Accepted file types                                                          |
| `onselect` | function        | –       | Called when files change `(fileArray)` (use if not binding `value`)          |
| `value`    | signal          | –       | Reactive file array (two‑way binding)                                        |
| `class`    | string          | –       | Extra classes                                                                |

---

## Icon
`Icon(name)`

| Parameter | Type   | Default | Description                                                                         |
|-----------|--------|---------|-------------------------------------------------------------------------------------|
| `name`    | string | –       | If it starts with `icon-`, used as class; otherwise displayed as text content/emoji |

Examples: `Icon("icon-[lucide--bold]")` or `Icon("❤️")`

---

## Indicator
`Indicator(props, children)`

| Prop    | Type   | Default | Description                                           |
|---------|--------|---------|-------------------------------------------------------|
| `value` | node   | –       | Content for the indicator badge (hidden if falsy)     |
| `class` | string | –       | Merged with `indicator` and the badge element         |

---

## Input
`Input(props)`

| Prop          | Type              | Default   | Description                                                    |
|---------------|-------------------|-----------|----------------------------------------------------------------|
| `label`       | string            | –         | Label text                                                     |
| `float`       | boolean           | `false`   | Enable floating label style                                    |
| `placeholder` | string            | `" "`     | Placeholder (defaults to label if omitted)                     |
| `value`       | signal \| string  | –         | Input value                                                    |
| `left`        | node              | –         | Element inserted before the input                              |
| `right`       | node              | –         | Element inserted after the input                               |
| `rule`        | string            | –         | HTML validation `pattern` attribute                            |
| `hint`        | string            | –         | Validation hint text (shown via `.validator-hint`)             |
| `content`     | node \| function  | –         | Content shown when input is focused (unused in current source) |
| `type`        | string            | `"search"`| HTML input type (e.g. `"text"`, `"password"`)                  |
| `class`       | string            | –         | Merged with `input`                                            |
| *any*         |                   |           | All other attributes forwarded to the `<input>`                |

Password inputs automatically show an eye toggle.

---

## Kbd
`Kbd(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `kbd`           |

---

## List
`List(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `list`          |

---

## ListRows
`ListRows(props)`

| Prop    | Type           | Default | Description                                                     |
|---------|----------------|---------|-----------------------------------------------------------------|
| `items` | array \| signal | –       | Data array                                                      |
| `render`| function       | –       | Render function: `(item, index) => node` (if omitted, item is used directly) |
| `class` | string         | –       | Merged with `list-row` on each `<li>`                           |

---

## Loading
`Loading(props)`

| Prop | Type   | Default | Description                                  |
|------|--------|---------|----------------------------------------------|
| `class` | string | –       | Merged with `loading loading-spinner`       |

---

## Menu
`Menu(props)`

| Prop       | Type           | Default | Description                                                         |
|------------|----------------|---------|---------------------------------------------------------------------|
| `items`    | array \| signal | –       | Menu items: `{ label, href?, onclick?, children? }`                 |
| `class`    | string         | –       | Merged with `menu`                                                  |
| `children` |                |         | If provided, manual mode (ignores `items`)                          |

---

## Modal
`Modal(props, children?)`

| Prop      | Type              | Default | Description                                |
|-----------|-------------------|---------|--------------------------------------------|
| `open`    | signal \| boolean | –       | Controls visibility                        |
| `title`   | string            | –       | Optional title rendered as `<h3>`          |
| `actions` | node              | –       | Custom actions (replaces default close button) |
| `class`   | string            | –       | Merged with `modal`                        |
| *children*|                   |         | Modal body content                         |

---

## Navbar
`Navbar(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `navbar`        |

---

## Progress
`Progress(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `progress`      |

Standard `<progress>` attributes are supported.

---

## Radial
`Radial(props, children?)`

| Prop    | Type   | Default | Description                                               |
|---------|--------|---------|-----------------------------------------------------------|
| `value` | number | `0`     | Progress value (sets CSS `--value` and default text)      |
| `style` | string | –       | Additional inline styles appended to the generated styles |
| `class` | string | –       | Merged with `radial-progress`                             |

---

## Radio
`Radio(props)`

| Prop      | Type              | Default | Description                             |
|-----------|-------------------|---------|-----------------------------------------|
| `class`   | string            | –       | Merged with `radio`                    |
| `checked` | boolean           | –       | Checked state                           |
| `onchange`| function          | –       | Change handler                          |
| *any*     |                   |         | Standard `<input type="radio">` attributes |

---

## Range
`Range(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `range`         |

All `<input type="range">` attributes are passed through.

---

## Rating
`Rating(props, children?)`

| Prop | Type   | Default | Description              |
|------|--------|---------|--------------------------|
| `class` | string | –       | Merged with `rating`    |

Use with `RatingItems` to build star ratings.

---

## RatingItems
`RatingItems(props)`

| Prop       | Type              | Default | Description                                                    |
|------------|-------------------|---------|----------------------------------------------------------------|
| `count`    | number            | –       | Number of rating items (e.g., stars)                           |
| `name`     | string            | –       | Radio group name                                               |
| `value`    | signal \| number  | –       | Current rating (reactive)                                      |
| `onchange` | function          | –       | Called with the selected index `(index)` if `value` is not a signal |
| `class`    | string            | –       | Extra class for the mask (default `"mask"`)                    |

---

## Select
`Select(props, children?)`

| Prop                 | Type           | Default | Description                                                                 |
|----------------------|----------------|---------|-----------------------------------------------------------------------------|
| `items`              | array \| signal | –       | Options list (string or `{ label, value, disabled? }`)                     |
| `placeholder`        | string         | –       | Placeholder option text                                                     |
| `placeholderDisabled`| boolean        | `true`  | Whether the placeholder is not selectable                                   |
| `label`              | string         | –       | Label text                                                                  |
| `float`              | boolean        | `false` | Floating label style                                                        |
| `left`               | node           | –       | Element before select                                                       |
| `right`              | node           | –       | Element after select                                                        |
| `hint`               | string         | –       | Validation hint                                                             |
| `value`              | signal \| string| –       | Selected value                                                              |
| `class`              | string         | –       | Merged with `select`                                                        |
| *any*                |                |         | All other props forwarded to the `<select>` element                         |
| `children`           |                |         | If provided, manual mode (ignores `items`)                                  |

---

## Skeleton
`Skeleton(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `skeleton`      |

---

## SkeletonText
`SkeletonText(props)`

| Prop | Type   | Default | Description                              |
|------|--------|---------|------------------------------------------|
| `class` | string | –       | Merged with `skeleton skeleton-text`    |

---

## Stack
`Stack(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `stack`         |

---

## Stats
`Stats(props, children)`

| Prop | Type   | Default | Description                          |
|------|--------|---------|--------------------------------------|
| `class` | string | –       | Merged with `stats shadow`          |

---

## Stat
`Stat(props)`

| Prop    | Type   | Default | Description                  |
|---------|--------|---------|------------------------------|
| `title` | string | –       | Stat title                   |
| `value` | string | –       | Stat value                   |
| `desc`  | string | –       | Stat description             |
| `class` | string | –       | Merged with `stat`           |

---

## Step
`Step(props, children)`

| Prop          | Type   | Default | Description                        |
|---------------|--------|---------|------------------------------------|
| `dataContent` | string | –       | Value for the `data-content` attribute |
| `class`       | string | –       | Merged with `step`                |

---

## Steps
`Steps(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `steps`         |

---

## Swap
`Swap(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `swap`          |

Used together with `SwapToggle`, `SwapOn`, and `SwapOff`.

---

## SwapToggle
`SwapToggle(props)`

| Prop    | Type              | Default | Description                          |
|---------|-------------------|---------|--------------------------------------|
| `value` | signal \| boolean | –       | Toggle state (checkbox)              |
| `class` | string            | –       | Extra classes on the hidden checkbox |

---

## SwapOn
`SwapOn(props, children)`

| Prop | Type   | Default | Description                    |
|------|--------|---------|--------------------------------|
| `class` | string | –       | Merged with `swap-on`         |

---

## SwapOff
`SwapOff(props, children)`

| Prop | Type   | Default | Description                    |
|------|--------|---------|--------------------------------|
| `class` | string | –       | Merged with `swap-off`        |

---

## Table
`Table(props, children?)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `table`         |

*Manual mode* – pass children directly.  
*Auto mode* – combine with `TableItems`.

---

## TableItems
`TableItems({ items, columns, header? })`

| Prop      | Type           | Default | Description                                                       |
|-----------|----------------|---------|-------------------------------------------------------------------|
| `items`   | array \| signal | –       | Data rows                                                         |
| `columns` | array          | `[]`    | Column definitions: `{ key, label?, class?, render? }`            |
| `header`  | boolean        | `true`  | Whether to render a `<thead>` with column labels                  |

---

## Tabs
`Tabs(props)`

| Prop          | Type           | Default | Description                                                          |
|---------------|----------------|---------|----------------------------------------------------------------------|
| `items`       | array \| signal | –       | Tabs: `{ label, content, closable?, class?, onclick? }`              |
| `activeIndex` | signal         | –       | Index of the active tab (reactive)                                   |
| `onClose`     | function       | –       | Called when a closable tab is closed: `(index, item)`                |
| `class`       | string         | –       | Merged with `tabs`                                                   |
| *(children)*  |                |         | If provided, manual mode                                             |

---

## Textarea
`Textarea(props)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `textarea`      |
| *any*|         |         | Standard `<textarea>` attributes |

---

## Textrotate
`Textrotate(props, children?)`

| Prop | Type   | Default | Description                       |
|------|--------|---------|-----------------------------------|
| `class` | string | –       | Merged with `text-rotate`        |

---

## Timeline
`Timeline(props, children)`

| Prop | Type   | Default | Description                  |
|------|--------|---------|------------------------------|
| `class` | string | –       | Merged with `timeline`      |

---

## Toast
`Toast(message, type?, duration?)`

| Parameter  | Type          | Default           | Description                                             |
|------------|---------------|-------------------|---------------------------------------------------------|
| `message`  | string \| signal | –               | Toast content (reactive)                                |
| `type`     | string        | `"alert-success"` | Alert type class (e.g., `alert-info`, `alert-error`)    |
| `duration` | number        | `3500`            | Auto‑close time in ms (0 = manual close)                |

Returns a `close()` function to dismiss the toast programmatically.

---

## Toggle
`Toggle(props)`

| Prop      | Type              | Default | Description                             |
|-----------|-------------------|---------|-----------------------------------------|
| `class`   | string            | –       | Merged with `toggle`                   |
| `checked` | boolean \| signal | –       | Checked state                           |
| `onchange`| function          | –       | Change handler                          |

---

## Tooltip
`Tooltip(props, children)`

| Prop  | Type   | Default | Description                          |
|-------|--------|---------|--------------------------------------|
| `tip` | string | –       | Tooltip text (sets `data-tip`)       |
| `class`| string | –       | Merged with `tooltip`               |

---

## ColorPalette (internal, but exported)
`ColorPalette(props)`

| Prop       | Type              | Default | Description                            |
|------------|-------------------|---------|----------------------------------------|
| `value`    | signal \| string  | –       | Currently selected colour              |
| `onchange` | function          | –       | Called when a colour is chosen `(color)` |

Displays an 8×8 grid of preset colours.

---

## Utility Functions

- **`Locale(lang)`** – Signal to read/set the current language (`"en"` or `"es"`).
- **`t(key)`** – Returns a reactive translation string from the built‑in dictionary based on current locale.
```