# SigPro Components – Quick Reference

All simple components use the pattern `ComponentName(props, children?)` and accept any additional HTML attributes.

## Accordion
`Accordion(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Array of items. Each item: `{ title, content?, open? }` or a string. |
| `type` | `'radio'` \| `'details'` | `'radio'` | Collapse mode |
| `variant` | string | `''` | `'arrow'` or `'plus'` for an icon variant |
| `name` | string | auto‑generated | Group name for radio inputs |
| `class` | string | - | Extra classes merged with `collapse` |

---

## Alert
`Alert(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `alert` |

---

## Autocomplete
`Autocomplete(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Autocomplete items |
| `value` | signal | - | Selected value |
| `onselect` | function | - | Called when an item is selected |
| `placeholder` | string | `'Buscar...'` | Input placeholder |
| `class` | string | - | Extra classes |
| `...props` | | | All other props are passed to the internal `Input` |

---

## Badge
`Badge(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `badge` |

---

## Button
`Button(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `button` |
| `disabled` | boolean | - | Standard HTML attribute |
| *any* | | | All other standard `<button>` attributes |

---

## Calendar
`Calendar(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| string \| object | - | Selected date(s) |
| `range` | signal \| boolean | `false` | Enable range mode |
| `hour` | boolean | `false` | Show hour sliders |
| `onChange` | function | - | Called when selection changes |
| `class` | string | - | Extra classes |

---

## Card
`Card(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card` |

---

## CardActions
`CardActions(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-actions` |

---

## CardBody
`CardBody(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-body` |

---

## CardTitle
`CardTitle(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `card-title` |

---

## Carousel
`Carousel(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `carousel` |

---

## CarouselItem
`CarouselItem(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `carousel-item` |

---

## Chat
`Chat(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat` |

---

## ChatBubble
`ChatBubble(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-bubble` |

---

## ChatFooter
`ChatFooter(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-footer` |

---

## ChatHeader
`ChatHeader(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `chat-header` |

---

## ChatImage
`ChatImage(props, children)`

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

---

## Checkbox
`Checkbox(props)`

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

---

## Colorpicker
`Colorpicker(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| string | `'#000000'` | Selected color |
| `label` | string | - | Optional label inside the trigger |
| `onchange` | function | - | Called when a color is picked (if `value` is not a signal) |
| `class` | string | - | Extra classes |

---

## Datepicker
`Datepicker(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal | - | Selected date(s) |
| `range` | signal \| boolean | `false` | Range mode |
| `hour` | boolean | `false` | Enable hour selection |
| `onChange` | function | - | Change handler (if `value` is not a signal) |
| `placeholder` | string | auto | Placeholder text |
| `class` | string | - | Extra classes |

---

## Divider
`Divider(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `divider` |

---

## Drawer
`Drawer(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `open` | signal \| boolean | - | Drawer open state |
| `side` | node \| signal | - | Sidebar content (can be a signal) |
| `id` | string | auto‑generated | Drawer ID |
| `class` | string | - | Extra classes |

**children** – Main content (`.drawer-content`).

---

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `trigger` | node | `'Dropdown'` | Summary content |
| `items` | array \| signal | - | Dropdown items: `{ label, onclick? }` |
| `class` | string | - | Extra classes merged with `dropdown` |

If `children` is provided, it replaces the auto‑generated menu.

---

## Fab
`Fab(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `fab` |

---

## Fieldset
`Fieldset(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `legend` | string | - | Legend text (rendered as `<legend>`) |
| `class` | string | - | Extra classes merged with `fieldset` |

---

## Fileinput
`Fileinput(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `max` | number | `2` | Max file size in MB |
| `accept` | string | `'*'` | Accepted file types |
| `onselect` | function | - | Called when files change (receives array) |
| `value` | signal | - | Alternative to `onselect` for signal binding |
| `class` | string | - | Extra classes |

---

## Icon
`Icon(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | If the value starts with `icon-`, used as class; otherwise becomes content |

---

## Indicator
`Indicator(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | node | - | Content of the indicator badge |
| `class` | string | - | Extra classes merged with `indicator` |

---

## Input
`Input(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `label` | string | - | Label text |
| `float` | boolean | `false` | Floating label |
| `left` | node | - | Element on the left |
| `right` | node | - | Element on the right |
| `hint` | string | - | Validation hint |
| `content` | node \| function | - | Content shown when focused (can be a function receiving `isFocused`) |
| `rule` | string | - | Validation pattern |
| `type` | string | `'text'` | Input type (`text`, `password`, etc.) |
| `value` | signal \| string | - | Input value |
| `class` | string | - | Extra classes |
| *any* | | | All other props are passed to the `<input>` |

---

## Kbd
`Kbd(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `kbd` |

---

## LabelFloat
`LabelFloat(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `floating-label` |

---

## LabelInput
`LabelInput(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `input` |

---

## LabelSelect
`LabelSelect(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `select` |

---

## Loading
`Loading(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `loading loading-spinner` |

---

## Menu
`Menu(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Menu items: `{ label, href?, onclick?, children? }` |
| `keyFn` | function | `(it, idx) => it?.id ?? idx` | Key function for reactivity |
| `class` | string | - | Extra classes |

If `children` is provided, manual mode.

---

## Navbar
`Navbar(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `navbar` |

---

## Progress
`Progress(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `progress` |

---

## 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 defaults |
| `class` | string | - | Extra classes merged with `radial-progress` |

---

## Radio
`Radio(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `radio` |
| `checked` | boolean | - | Checked state |
| `onchange` | function | - | Change handler |

---

## Range
`Range(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `range` |
| `min` | number | - | Standard range attribute |
| `max` | number | - | Standard range attribute |
| `value` | number | - | Standard range attribute |

---

## Rating
`Rating(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | number \| signal | - | Selected rating |
| `count` | number | `5` | Number of stars |
| `mask` | string | `'mask-star'` | Shape class (e.g., `'mask-heart'`) |
| `onchange` | function | - | Called when a star is clicked |
| `class` | string | - | Extra classes |

---

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

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | - | Options list |
| `placeholder` | string | - | Placeholder option text |
| `placeholderDisabled` | boolean | `true` | Whether the placeholder is disabled |
| `label` | string | - | Label text |
| `float` | boolean | `false` | Floating label style |
| `left` | node | - | Element left of select |
| `right` | node | - | Element right of select |
| `hint` | string | - | Validation hint |
| `value` | signal \| string | - | Selected value |
| `keyFn` | function | auto | Key function for reactivity |
| `class` | string | - | Extra classes |

If `children` is provided, manual mode.

---

## Skeleton
`Skeleton(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `skeleton` |

---

## SkeletonText
`SkeletonText(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `skeleton skeleton-text` |

---

## Stack
`Stack(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `stack` |

---

## Step
`Step(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `dataContent` | string | - | Value for the `data-content` attribute |
| `class` | string | - | Extra classes merged with `step` |

---

## Steps
`Steps(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `steps` |

---

## Swap
`Swap(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | signal \| boolean | - | Checked state (can be a signal) |
| `on` | node | - | Content for the “on” state |
| `off` | node | - | Content for the “off” state |
| `class` | string | - | Extra classes merged with `swap` |

---

## Table
`Table(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Data rows |
| `columns` | array | `[]` | Column definitions: `{ key?, label?, class?, render? }` |
| `header` | boolean | `true` | Show header row |
| `keyFn` | function | `(item, idx) => item?.id ?? idx` | Key function for reactivity |
| `class` | string | - | Extra classes |

If `children` is provided, manual mode (ignores `items`).

---

## Tabs
`Tabs(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `items` | array \| signal | `[]` | Tab items: `{ label, content, closable?, class?, contentClass?, onclick? }` |
| `activeIndex` | signal | - | Index of the active tab |
| `onClose` | function | - | Called when a closable tab is closed: `(idx, item)` |
| `class` | string | - | Extra classes |

If `children` is provided, manual mode.

---

## TextRotate
`TextRotate(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `words` | array \| string | - | Array of words or comma‑separated string |
| `class` | string | - | Extra classes merged with `text-rotate` |

---

## Textarea
`Textarea(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes merged with `textarea` |
| *any* | | | All standard `<textarea>` attributes |

---

## Timeline
`Timeline(props, children)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `vertical` | boolean | `true` | If `false`, horizontal layout |
| `compact` | boolean | `false` | Compact mode |
| `class` | string | - | Extra classes merged with `timeline` |

---

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

| Parameter | Type | Default | Description |
|-----------|------|---------|-------------|
| `message` | string \| signal | - | Toast text |
| `type` | string | `'alert-success'` | Alert type class |
| `duration` | number | `3500` | Auto‑close time in ms (0 for manual close) |

Returns a `close` function.

---

## Toggle
`Toggle(props)`

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `class` | string | - | Extra classes 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 | - | Extra classes merged with `tooltip` |