release: WRNexusJS 0.5.0

packages/ui/COMPONENTS.md

@@ -29,7 +29,7 @@ Theme-aware, responsive copy markup component.
 - Mount: `data-component="CopyMarkup"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Copy Markup"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `copy`, `success`, `error`
 
 ### InputNumber
 
@@ -56,7 +56,7 @@ Theme-aware, responsive search box component.
 - Mount: `data-component="SearchBox"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Search Box"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "search"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `search`, `submit`, `clear`
 
 ### StrongPassword
 
@@ -72,9 +72,9 @@ Theme-aware, responsive strong password component.
 Theme-aware, responsive toggle count component.
 
 - Mount: `data-component="ToggleCount"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Toggle Count"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "segmented"`, `class: string = ""`, `name: string = "billing-cycle"`, `value: string = "monthly"`, `firstValue: string = "monthly"`, `firstLabel: string = "Monthly"`, `secondValue: string = "annual"`, `secondLabel: string = "Annual"`, `ariaLabel: string = "Billing frequency"`, `items: string = []`, `currency: string = "$"`, `suffix: string = ""`, `firstValueKey: string = "monthly"`, `secondValueKey: string = "annual"`, `emptyValue: string = "—"`, `align: string = "end"`, `fullWidth: boolean = true`, `disabled: boolean = false`, `animate: boolean = true`, `animationDuration: number = 450`, `animationSteps: number = 18`
 - Slots: None
-- Events: None
+- Events: `change`, `toggle`
 
 ### TogglePassword
 
@@ -92,52 +92,52 @@ Accessible password field with optional show and hide controls.
 Theme-aware, responsive accordion component.
 
 - Mount: `data-component="Accordion"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""`
-- Slots: `default`
-- Events: None
+- Props: `size: string = "default"`, `color: string = "primary"`, `variant: string = "default"`, `class: string = ""`, `id: string = "accordion"`, `items: string = []`, `defaultOpen: string = []`, `multiple: boolean = false`, `alwaysOpen: boolean = false`, `disabled: boolean = false`, `indicator: string = "plus"`, `indicatorPosition: string = "start"`, `showIndicator: boolean = true`, `bordered: boolean = false`, `separated: boolean = false`, `flush: boolean = false`, `contentItalic: boolean = false`
+- Slots: None
+- Events: `change`, `open`, `close`
 
 ### Alert
 
 Theme-aware, responsive alert component.
 
 - Mount: `data-component="Alert"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
-- Events: None
+- Props: `size: string = "default"`, `color: string = "info"`, `variant: string = "soft"`, `class: string = ""`, `radius: string = "md"`, `shadow: string = "sm"`, `title: string = "Alert"`, `description: string = ""`, `items: string = []`, `actions: string = []`, `showIcon: boolean = false`, `icon: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Dismiss alert"`, `role: string = "alert"`, `live: string = "polite"`, `linkLabel: string = ""`, `linkHref: string = ""`, `actionLabel: string = ""`, `actionHref: string = ""`, `compact: boolean = false`
+- Slots: None
+- Events: `dismiss`, `action`
 
 ### Avatar
 
 Theme-aware, responsive avatar component.
 
 - Mount: `data-component="Avatar"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
-- Events: None
+- Props: `src: string = ""`, `alt: string = ""`, `initials: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `status: string = ""`, `statusLabel: string = ""`, `statusPosition: string = "bottom"`, `badge: string = ""`, `badgeIcon: string = ""`, `badgeLabel: string = ""`, `tooltip: string = ""`, `name: string = ""`, `description: string = ""`, `loading: string = "lazy"`, `class: string = ""`
+- Slots: None
+- Events: `load`, `error`, `click`
 
 ### AvatarGroup
 
 Theme-aware, responsive avatar group component.
 
 - Mount: `data-component="AvatarGroup"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Avatar Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
-- Events: None
+- Props: `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "circle"`, `layout: string = "stack"`, `maxVisible: number = 4`, `columns: number = 3`, `borderColor: string = ""`, `showTooltips: boolean = true`, `overflowLabel: string = "Show remaining members"`, `class: string = ""`
+- Slots: None
+- Events: `overflow`
 
 ### Badge
 
 Theme-aware, responsive badge component.
 
 - Mount: `data-component="Badge"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Badge"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
-- Slots: `default`
-- Events: None
+- Props: `label: string = "Badge"`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "solid"`, `shape: string = "pill"`, `class: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `dot: boolean = false`, `dotOnly: boolean = false`, `dotLabel: string = "Status"`, `animated: boolean = false`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `dismissible: boolean = false`, `dismissLabel: string = "Remove badge"`, `truncate: boolean = false`, `maxWidth: string = "12rem"`, `anchorLabel: string = ""`, `anchorIcon: string = ""`, `placement: string = "inline"`, `anchorLabelText: string = "Badge anchor"`
+- Slots: None
+- Events: `dismiss`
 
 ### Blockquote
 
 Theme-aware, responsive blockquote component.
 
 - Mount: `data-component="Blockquote"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Blockquote"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `quote: string = "I just wanted to say that I'm very happy with my purchase so far. The documentation is outstanding - clear and detailed."`, `citation: string = ""`, `citationTitle: string = ""`, `citationUrl: string = ""`, `avatarSrc: string = ""`, `avatarAlt: string = ""`, `size: string = "md"`, `color: string = "primary"`, `align: string = "left"`, `variant: string = "default"`, `quoteMark: boolean = true`, `italic: boolean = true`, `class: string = ""`
 - Slots: `default`
 - Events: None
 
@@ -148,79 +148,79 @@ Theme-aware, responsive button component.
 - Mount: `data-component="Button"`
 - Props: `label: string = "Button"`, `loadingLabel: string = "Loading…"`, `description: string = ""`, `as: string = ""`, `href: string = ""`, `target: string = ""`, `rel: string = ""`, `type: string = "button"`, `variant: string = "default"`, `color: string = "primary"`, `size: string = "default"`, `disabled: boolean = false`, `loading: boolean = false`, `pill: boolean = false`, `fullWidth: boolean = false`, `icon: string = ""`, `iconPosition: string = "start"`, `ariaLabel: string = ""`, `ariaPressed: string = ""`, `ariaExpanded: string = ""`, `ariaControls: string = ""`, `title: string = ""`, `autofocus: boolean = false`, `controlClass: string = ""`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `click`, `focus`, `blur`
 
 ### ButtonGroup
 
 Theme-aware, responsive button group component.
 
 - Mount: `data-component="ButtonGroup"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Button Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `items: string = []`, `value: string = ""`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `orientation: string = "horizontal"`, `responsive: boolean = false`, `attached: boolean = true`, `selectable: boolean = false`, `toolbar: boolean = false`, `disabled: boolean = false`, `ariaLabel: string = "Button group"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `click`, `select`, `change`
 
 ### Card
 
 Theme-aware, responsive card component.
 
 - Mount: `data-component="Card"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Card"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `title: string = "Card title"`, `subtitle: string = ""`, `description: string = ""`, `header: string = ""`, `footer: string = ""`, `imageSrc: string = ""`, `imageAlt: string = ""`, `imagePosition: string = "top"`, `actionLabel: string = ""`, `actionHref: string = ""`, `headerActions: string = []`, `navigation: string = []`, `activeNav: string = ""`, `mobileNavigation: boolean = false`, `alertTitle: string = ""`, `alertDescription: string = ""`, `empty: boolean = false`, `emptyTitle: string = "No data to show"`, `emptyIcon: string = "icon-[lucide--inbox]"`, `items: string = []`, `size: string = "md"`, `color: string = "primary"`, `variant: string = "default"`, `layout: string = "vertical"`, `align: string = "left"`, `hover: string = "none"`, `scrollable: boolean = false`, `maxHeight: string = "18rem"`, `dismissible: boolean = false`, `ariaLabel: string = ""`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `click`, `action`, `navigate`, `dismiss`, `load`, `error`
 
 ### Carousel
 
 Theme-aware, responsive carousel component.
 
 - Mount: `data-component="Carousel"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Carousel"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `activeIndex: number = 0`, `slidesPerView: number = 1`, `gap: string = "0.75rem"`, `showPagination: boolean = false`, `isAutoPlay: boolean = false`, `autoplayInterval: number = 4000`, `isInfiniteLoop: boolean = false`, `isRTL: boolean = false`, `isCentered: boolean = false`, `isDraggable: boolean = false`, `isAutoHeight: boolean = false`, `isSnap: boolean = false`, `showCounter: boolean = false`, `thumbnails: string = "none"`, `ariaLabel: string = "Content carousel"`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `initialize`, `change`, `previous`, `next`, `play`, `pause`, `reachStart`, `reachEnd`, `dragStart`, `dragEnd`
 
 ### ChatBubble
 
 Theme-aware, responsive chat bubble component.
 
 - Mount: `data-component="ChatBubble"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chat Bubble"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = ""`, `description: string = ""`, `items: string = []`, `oneSided: boolean = false`, `showAvatars: boolean = false`, `showMetadata: boolean = false`, `ariaLabel: string = "Conversation"`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `action`, `messageClick`, `avatarClick`, `linkClick`
 
 ### Collapse
 
 Theme-aware, responsive collapse component.
 
 - Mount: `data-component="Collapse"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `items: string = []`, `multiple: boolean = false`, `mode: string = "panel"`, `initialOpenIndexes: string = []`, `ariaLabel: string = "Collapsible content"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `toggle`, `open`, `close`
 
 ### DatePicker
 
 Theme-aware, responsive date picker component.
 
 - Mount: `data-component="DatePicker"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Date Picker"`, `id: string = ""`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "date"`, `locale: string = "en-US"`, `firstDayOfWeek: number = 0`, `months: string = [{ label: "Jan", value: "01" }, { label: "Feb", value: "02" }, { label: "Mar", value: "03" }, { label: "Apr", value: "04" }, { label: "May", value: "05" }, { label: "Jun", value: "06" }, { label: "Jul", value: "07" }, { label: "Aug", value: "08" }, { label: "Sep", value: "09" }, { label: "Oct", value: "10" }, { label: "Nov", value: "11" }, { label: "Dec", value: "12" }]`, `days: string = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31]`, `years: string = [2024, 2025, 2026, 2027, 2028, 2029, 2030]`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `variant: string = "normal"`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `open`, `close`, `focus`, `blur`, `invalid`
 
 ### DeviceFrame
 
 Theme-aware, responsive device frame component.
 
 - Mount: `data-component="DeviceFrame"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Device Frame"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `device: string = "phone"`, `orientation: string = "portrait"`, `src: string = ""`, `srcdoc: string = ""`, `frameTitle: string = "Device preview"`, `showToolbar: boolean = true`, `allow: string = ""`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `change`, `rotate`
 
 ### FileUploadProgress
 
 Theme-aware, responsive file upload progress component.
 
 - Mount: `data-component="FileUploadProgress"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Progress"`, `value: number = 50`, `max: number = 100`, `showValue: boolean = true`, `fileName: string = ""`, `fileSize: string = ""`, `uploadedSize: string = ""`, `status: string = "uploading"`, `cancelLabel: string = "Cancel upload"`, `retryLabel: string = "Retry upload"`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `cancel`, `retry`, `complete`
 
 ### LegendIndicator
 
@@ -229,7 +229,7 @@ Theme-aware, responsive legend indicator component.
 - Mount: `data-component="LegendIndicator"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Legend Indicator"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `toggle`, `select`
 
 ### List
 
@@ -238,7 +238,7 @@ Theme-aware, responsive list component.
 - Mount: `data-component="List"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `click`
 
 ### ListGroup
 
@@ -247,7 +247,7 @@ Theme-aware, responsive list group component.
 - Mount: `data-component="ListGroup"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "List Group"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `change`
 
 ### Marquee
 
@@ -256,7 +256,7 @@ Theme-aware, responsive marquee component.
 - Mount: `data-component="Marquee"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Marquee"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `pause`, `resume`
 
 ### Progress
 
@@ -274,7 +274,7 @@ Theme-aware, responsive rating component.
 - Mount: `data-component="Rating"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Rating"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `input`, `change`
 
 ### Skeleton
 
@@ -310,7 +310,7 @@ Theme-aware, responsive timeline component.
 - Mount: `data-component="Timeline"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Timeline"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`
 
 ### Toast
 
@@ -319,7 +319,7 @@ Theme-aware, responsive toast component.
 - Mount: `data-component="Toast"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `dismiss`, `action`
 
 ### TreeView
 
@@ -328,7 +328,7 @@ Theme-aware, responsive tree view component.
 - Mount: `data-component="TreeView"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tree View"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `toggle`, `expand`, `collapse`
 
 ## Forms
 
@@ -337,99 +337,99 @@ Theme-aware, responsive tree view component.
 Theme-aware, responsive checkbox component.
 
 - Mount: `data-component="Checkbox"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Checkbox"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Checkbox"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `values: string = []`, `options: string = []`, `checked: boolean = false`, `indeterminate: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
 
 ### ColorPicker
 
 Theme-aware, responsive color picker component.
 
 - Mount: `data-component="ColorPicker"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Color Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "color"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Color"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = "#2563eb"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`
 
 ### FileInput
 
 Theme-aware, responsive file input component.
 
 - Mount: `data-component="FileInput"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "File Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "file"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "File"`, `hiddenLabel: boolean = false`, `placeholder: string = "Choose a file"`, `value: string = ""`, `icon: string = "icon-[lucide--upload]"`, `iconPosition: string = "start"`, `accept: string = ""`, `multiple: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `select`, `clear`, `invalid`
 
 ### Input
 
 Theme-aware, responsive input component.
 
 - Mount: `data-component="Input"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `type: string = "text"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `autocomplete: string = ""`, `inputmode: string = ""`, `minlength: string = ""`, `maxlength: string = ""`, `pattern: string = ""`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`, `keydown`, `keyup`
 
 ### InputGroup
 
 Theme-aware, responsive input group component.
 
 - Mount: `data-component="InputGroup"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Input Group"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Input group"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `type: string = "text"`, `startText: string = ""`, `endText: string = ""`, `icon: string = ""`, `iconPosition: string = "start"`, `actionLabel: string = ""`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `variant: string = "normal"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `submit`, `action`
 
 ### Radio
 
 Theme-aware, responsive radio component.
 
 - Mount: `data-component="Radio"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Radio"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Radio"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `options: string = []`, `checked: boolean = false`, `orientation: string = "vertical"`, `card: boolean = false`, `rightAligned: boolean = false`, `list: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
 
 ### RangeSlider
 
 Theme-aware, responsive range slider component.
 
 - Mount: `data-component="RangeSlider"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Range Slider"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "range"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Range"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: number = 50`, `min: number = 0`, `max: number = 100`, `step: number = 1`, `showValue: boolean = true`, `showBounds: boolean = true`, `showSteps: boolean = false`, `marks: string = []`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`
 
 ### Select
 
 Theme-aware, responsive select component.
 
 - Mount: `data-component="Select"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Select"`, `name: string = ""`, `value: string = ""`, `options: string = []`, `placeholder: string = "Select an option"`, `multiple: boolean = false`, `disabled: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Select"`, `hiddenLabel: boolean = false`, `value: string = ""`, `values: string = []`, `options: string = []`, `placeholder: string = "Select an option"`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `multiple: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid`
 
 ### Switch
 
 Theme-aware, responsive switch component.
 
 - Mount: `data-component="Switch"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Switch"`, `name: string = ""`, `value: string = "on"`, `checked: boolean = false`, `disabled: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`
 
 ### Textarea
 
 Theme-aware, responsive textarea component.
 
 - Mount: `data-component="Textarea"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Textarea"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `rows: number = 5`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Textarea"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `value: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `rows: number = 5`, `resize: string = "vertical"`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `minlength: string = ""`, `maxlength: string = ""`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `invalid`
 
 ### TimePicker
 
 Theme-aware, responsive time picker component.
 
 - Mount: `data-component="TimePicker"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Time Picker"`, `name: string = ""`, `value: string = ""`, `placeholder: string = ""`, `type: string = "time"`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Time"`, `hiddenLabel: boolean = false`, `value: string = ""`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = "icon-[lucide--clock-3]"`, `iconPosition: string = "end"`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `min: string = ""`, `max: string = ""`, `step: string = ""`, `format: string = "24"`, `minuteStep: number = 5`, `hours: string = ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]`, `minutes: string = ["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`, `open`, `close`, `invalid`
 
 ## Integrations
 
@@ -440,7 +440,7 @@ Theme-aware, responsive advanced date picker component.
 - Mount: `data-component="AdvancedDatePicker"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Date Picker"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `input`, `change`, `open`, `close`, `clear`
 
 ### AdvancedRangeSlider
 
@@ -449,7 +449,7 @@ Theme-aware, responsive advanced range slider component.
 - Mount: `data-component="AdvancedRangeSlider"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Advanced Range Slider"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `input`, `change`, `start`, `end`
 
 ### Chart
 
@@ -458,7 +458,7 @@ Theme-aware, responsive chart component.
 - Mount: `data-component="Chart"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Chart"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `dataPointClick`, `legendToggle`
 
 ### Clipboard
 
@@ -467,7 +467,7 @@ Theme-aware, responsive clipboard component.
 - Mount: `data-component="Clipboard"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Clipboard"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `copy`, `success`, `error`
 
 ### Confetti
 
@@ -476,7 +476,7 @@ Theme-aware, responsive confetti component.
 - Mount: `data-component="Confetti"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Confetti"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `start`, `complete`
 
 ### DataMap
 
@@ -485,7 +485,7 @@ Theme-aware, responsive data map component.
 - Mount: `data-component="DataMap"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Data Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `change`
 
 ### DataTable
 
@@ -494,7 +494,7 @@ Theme-aware, responsive data table component.
 - Mount: `data-component="DataTable"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Data Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `sort`, `select`, `change`, `rowClick`, `pageChange`
 
 ### DragAndDrop
 
@@ -503,7 +503,7 @@ Theme-aware, responsive drag and drop component.
 - Mount: `data-component="DragAndDrop"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drag And Drop"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `dragStart`, `dragEnd`, `dragEnter`, `dragLeave`, `drop`, `change`
 
 ### FileUpload
 
@@ -512,7 +512,7 @@ Theme-aware, responsive file upload component.
 - Mount: `data-component="FileUpload"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "File Upload"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `upload`, `progress`, `success`, `error`, `cancel`, `remove`
 
 ### Map
 
@@ -521,7 +521,7 @@ Theme-aware, responsive map component.
 - Mount: `data-component="Map"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Map"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `ready`, `move`, `zoom`, `markerClick`
 
 ### ToastNotifications
 
@@ -530,7 +530,7 @@ Theme-aware, responsive toast notifications component.
 - Mount: `data-component="ToastNotifications"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Toast Notifications"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `add`, `dismiss`, `clear`, `action`
 
 ### WysiwygEditor
 
@@ -539,7 +539,7 @@ Theme-aware, responsive wysiwyg editor component.
 - Mount: `data-component="WysiwygEditor"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Wysiwyg Editor"`, `description: string = ""`, `items: string = []`, `variant: string = "default"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `input`, `change`, `focus`, `blur`
 
 ## Layout
 
@@ -568,7 +568,7 @@ Theme-aware, responsive custom scrollbar component.
 - Mount: `data-component="CustomScrollbar"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `scroll`
 
 ### Divider
 
@@ -595,7 +595,7 @@ Theme-aware, responsive image component.
 - Mount: `data-component="Image"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `src: string = ""`, `alt: string = ""`, `width: string = ""`, `height: string = ""`, `loading: string = "lazy"`, `rounded: boolean = false`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `load`, `error`
 
 ### Kbd
 
@@ -613,7 +613,7 @@ Theme-aware, responsive layout splitter component.
 - Mount: `data-component="LayoutSplitter"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `columns: number = 2`, `gap: string = "md"`, `maxWidth: string = "xl"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `resizeStart`, `resize`, `resizeEnd`
 
 ### Link
 
@@ -622,7 +622,7 @@ Theme-aware, responsive link component.
 - Mount: `data-component="Link"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Link"`, `href: string = "#"`, `target: string = ""`, `rel: string = ""`, `external: boolean = false`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `click`, `focus`, `blur`
 
 ### Typography
 
@@ -642,7 +642,7 @@ Theme-aware, responsive breadcrumb component.
 - Mount: `data-component="Breadcrumb"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Breadcrumb"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `navigate`, `click`
 
 ### MegaMenu
 
@@ -651,7 +651,7 @@ Theme-aware, responsive mega menu component.
 - Mount: `data-component="MegaMenu"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Mega Menu"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`, `select`
 
 ### Nav
 
@@ -660,7 +660,7 @@ Theme-aware, responsive nav component.
 - Mount: `data-component="Nav"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Nav"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `select`, `change`
 
 ### Navbar
 
@@ -669,7 +669,7 @@ Theme-aware, responsive navbar component.
 - Mount: `data-component="Navbar"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Navbar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `toggle`, `open`, `close`
 
 ### Pagination
 
@@ -678,7 +678,7 @@ Theme-aware, responsive pagination component.
 - Mount: `data-component="Pagination"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Pagination"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `change`, `previous`, `next`
 
 ### Scrollspy
 
@@ -687,7 +687,7 @@ Theme-aware, responsive scrollspy component.
 - Mount: `data-component="Scrollspy"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Scrollspy"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `change`
 
 ### Sidebar
 
@@ -696,7 +696,7 @@ Theme-aware, responsive sidebar component.
 - Mount: `data-component="Sidebar"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Sidebar"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `toggle`, `open`, `close`
 
 ### Stepper
 
@@ -705,7 +705,7 @@ Theme-aware, responsive stepper component.
 - Mount: `data-component="Stepper"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Stepper"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `change`, `previous`, `next`, `complete`
 
 ### Tabs
 
@@ -714,7 +714,7 @@ Theme-aware, responsive tabs component.
 - Mount: `data-component="Tabs"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `label: string = "Tabs"`, `items: string = []`, `active: string = ""`, `orientation: string = "horizontal"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `change`, `select`
 
 ## Overlays
 
@@ -725,7 +725,7 @@ Theme-aware, responsive context menu component.
 - Mount: `data-component="ContextMenu"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Context Menu"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`, `select`
 
 ### Drawer
 
@@ -734,7 +734,7 @@ Theme-aware, responsive drawer component.
 - Mount: `data-component="Drawer"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Drawer"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`
 
 ### Dropdown
 
@@ -743,7 +743,7 @@ Theme-aware, responsive dropdown component.
 - Mount: `data-component="Dropdown"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Dropdown"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`, `select`, `change`
 
 ### Modal
 
@@ -752,7 +752,7 @@ Theme-aware, responsive modal component.
 - Mount: `data-component="Modal"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Modal"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`, `cancel`, `confirm`
 
 ### Popover
 
@@ -761,7 +761,7 @@ Theme-aware, responsive popover component.
 - Mount: `data-component="Popover"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Popover"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`
 
 ### Tooltip
 
@@ -770,7 +770,7 @@ Theme-aware, responsive tooltip component.
 - Mount: `data-component="Tooltip"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `title: string = "Tooltip"`, `description: string = ""`, `open: boolean = false`, `placement: string = "bottom"`, `closeLabel: string = "Close"`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `open`, `close`
 
 ## Tables
 
@@ -781,4 +781,4 @@ Theme-aware, responsive table component.
 - Mount: `data-component="Table"`
 - Props: `size: string = "default"`, `color: string = "primary"`, `caption: string = "Table"`, `columns: string = []`, `rows: string = []`, `striped: boolean = true`, `class: string = ""`
 - Slots: `default`
-- Events: None
+- Events: `sort`, `select`, `rowClick`