sigpro-ui/docs/quick.md

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 ("es" or "en").
• tt(key) – Returns a reactive translation string from the built‑in dictionary based on current locale.