sigpro-ui/docs/quick.md

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