@cube-dev/ui-kit 0.0.0-canary-d688797 → 0.0.0-canary-bdfccbd

package/docs/components/content/Title.md

@@ -0,0 +1,45 @@
+# Title
+
+A heading component for section titles. Renders as `h1`–`h6` based on the `level` prop.
+
+## When to Use
+
+- Page and section headings
+- Hierarchical content structure
+- Accessible heading levels for document outline
+
+## Properties
+
+- **`level`** `1 | 2 | 3 | 4 | 5 | 6` (default: `1`) — Heading level (maps to `h1`–`h6` tag and corresponding preset `h1`–`h6`)
+- **`ellipsis`** `boolean` — Truncate overflow with ellipsis
+- **`nowrap`** `boolean` — Prevent text wrapping
+
+### Style Defaults
+
+- `display` — `block`
+- `color` — `#dark`
+- `margin` — `0`
+- `gridArea` — `title`
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md).
+
+### Variants
+
+- `Title.Danger` — Error or destructive heading
+- `Title.Success` — Success or positive heading
+
+## Examples
+
+```jsx
+<Title level={1}>Page Title</Title>
+
+<Title level={2}>Section Heading</Title>
+
+<Title level={3} ellipsis>
+  Long heading that truncates
+</Title>
+
+<Title.Danger level={4}>Error State</Title.Danger>
+```

package/docs/components/fields/Checkbox.md

@@ -33,7 +33,7 @@ Checkboxes allow users to select multiple items from a list of individual items,
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -55,17 +55,15 @@ The Checkbox component supports all standard style properties:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| checked | `boolean` | Whether the checkbox is checked |
-| indeterminate | `boolean` | Whether the checkbox is in an indeterminate state |
-| invalid | `boolean` | Whether the checkbox has validation errors |
-| valid | `boolean` | Whether the checkbox is valid |
-| disabled | `boolean` | Whether the checkbox is disabled |
-| hovered | `boolean` | Whether the checkbox is being hovered |
-| focused | `boolean` | Whether the checkbox has focus |
-| side-label | `boolean` | Whether the label is positioned to the side |
-| inside-form | `boolean` | Whether the checkbox is inside a form field |
+- **`checked`** `boolean` — Whether the checkbox is checked
+- **`indeterminate`** `boolean` — Whether the checkbox is in an indeterminate state
+- **`invalid`** `boolean` — Whether the checkbox has validation errors
+- **`valid`** `boolean` — Whether the checkbox is valid
+- **`disabled`** `boolean` — Whether the checkbox is disabled
+- **`hovered`** `boolean` — Whether the checkbox is being hovered
+- **`focused`** `boolean` — Whether the checkbox has focus
+- **`side-label`** `boolean` — Whether the label is positioned to the side
+- **`inside-form`** `boolean` — Whether the checkbox is inside a form field
 
 ## Examples
 

package/docs/components/fields/ComboBox.md

@@ -17,6 +17,45 @@ A combobox component that combines a text input with a dropdown list, allowing u
 
 ### Properties
 
+- **`children`** `ReactNode` — ComboBox.Item elements that define the available options
+- **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactNode` — Icon element rendered before the input
+- **`inputValue`** `string` — The current text value in controlled mode
+- **`defaultInputValue`** `string` — The default text value in uncontrolled mode
+- **`label`** `string` — Label text for the combo box
+- **`description`** `string` — Description text displayed below the input
+- **`message`** `string` — Message text displayed below the input (validation message)
+- **`selectedKey`** `string` — The currently selected key (controlled)
+- **`defaultSelectedKey`** `string` — The key of the initially selected item (uncontrolled)
+- **`allowsCustomValue`** `boolean` (default: `false`) — Whether the combo box allows custom values to be entered
+- **`shouldCommitOnBlur`** `boolean` (default: `true`) — Whether to commit custom value on blur in allowsCustomValue mode
+- **`clearOnBlur`** `boolean` (default: `false`) — Whether to clear selection and input on blur (only applies to non-custom-value mode)
+- **`isClearable`** `boolean` (default: `false`) — Whether the combo box is clearable using ESC keyboard button or clear button inside the input
+- **`sortSelectedToTop`** `boolean` (default: `true when items provided, false otherwise`) — Whether to sort selected item to the top when popover opens (only works with items prop)
+- **`popoverTrigger`** `'focus' | 'input' | 'manual'` (default: `input`) — How the popover is triggered
+- **`isLoading`** `boolean` (default: `false`) — Whether the ComboBox is in a loading state
+- **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter function or false to disable filtering. If not provided, uses default contains filter
+- **`hideTrigger`** `boolean` (default: `false`) — Whether to hide the trigger button
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — ComboBox size
+- **`isDisabled`** `boolean` (default: `false`) — Whether the input is disabled
+- **`isReadOnly`** `boolean` (default: `false`) — Whether the input can be selected but not changed
+- **`isRequired`** `boolean` (default: `false`) — Whether user input is required before form submission
+- **`validationState`** `'valid' | 'invalid'` — Whether the input should display valid or invalid visual styling
+- **`autoFocus`** `boolean` (default: `false`) — Whether the element should receive focus on render
+- **`necessityIndicator`** `'label' | 'icon'` — How the required state should be indicated
+- **`onSelectionChange`** `(key: Key | null) => void` — Callback fired when the selected option changes
+- **`onInputChange`** `(value: string) => void` — Callback fired when the input text changes
+- **`onOpenChange`** `(isOpen: boolean) => void` — Callback fired when the popover opens or closes
+- **`prefix`** `ReactNode` — Content rendered before the input
+- **`suffix`** `ReactNode` — Content rendered after the input
+- **`suffixPosition`** `'before' | 'after'` (default: `before`) — Position of suffix relative to validation/loading icons
+- **`onClear`** `() => void` — Callback fired when the clear action is triggered
+- **`direction`** `'top' | 'bottom'` (default: `bottom`) — Preferred direction for the dropdown
+- **`shouldFlip`** `boolean` (default: `true`) — Whether the dropdown should flip to fit in viewport
+- **`overlayOffset`** `number` (default: `8`) — Distance between input and dropdown in pixels
+- **`onFocus`** `() => void` — Callback fired when focus enters the ComboBox
+- **`onBlur`** `() => void` — Callback fired when focus leaves the ComboBox
+
 #### Notable Properties
 
 **defaultInputValue** - Sets the initial input value in uncontrolled mode. This is useful when you want to display a specific text in the input field on mount without selecting any option. When both `defaultInputValue` and `defaultSelectedKey` are provided, `defaultInputValue` takes priority. The value can be changed by the user and is not enforced after initial render.
@@ -38,7 +77,7 @@ A combobox component that combines a text input with a dropdown list, allowing u
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -93,16 +132,14 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| invalid | `boolean` | Applied when validation state is invalid |
-| valid | `boolean` | Applied when validation state is valid |
-| disabled | `boolean` | Applied when the combobox is disabled |
-| focused | `boolean` | Applied when the input has focus |
-| loading | `boolean` | Applied when the combobox is in loading state |
-| prefix | `boolean` | Applied when prefix content is present |
-| suffix | `boolean` | Applied when suffix content is present |
-| clearable | `boolean` | Applied when the clear button is visible |
+- **`invalid`** `boolean` — Applied when validation state is invalid
+- **`valid`** `boolean` — Applied when validation state is valid
+- **`disabled`** `boolean` — Applied when the combobox is disabled
+- **`focused`** `boolean` — Applied when the input has focus
+- **`loading`** `boolean` — Applied when the combobox is in loading state
+- **`prefix`** `boolean` — Applied when prefix content is present
+- **`suffix`** `boolean` — Applied when suffix content is present
+- **`clearable`** `boolean` — Applied when the clear button is visible
 
 ## Variants
 

package/docs/components/fields/DatePicker.md

@@ -41,7 +41,7 @@ A date picker combines a text input with a calendar interface, allowing users to
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -78,15 +78,13 @@ The DatePicker component supports all standard style properties:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| opened | `boolean` | Whether the calendar is open |
-| focused | `boolean` | Whether the input has focus |
-| disabled | `boolean` | Whether the date picker is disabled |
-| invalid | `boolean` | Whether the date picker has validation errors |
-| valid | `boolean` | Whether the date picker is valid |
-| hovered | `boolean` | Whether the date picker is being hovered |
-| inside-form | `boolean` | Whether the date picker is inside a form field |
+- **`opened`** `boolean` — Whether the calendar is open
+- **`focused`** `boolean` — Whether the input has focus
+- **`disabled`** `boolean` — Whether the date picker is disabled
+- **`invalid`** `boolean` — Whether the date picker has validation errors
+- **`valid`** `boolean` — Whether the date picker is valid
+- **`hovered`** `boolean` — Whether the date picker is being hovered
+- **`inside-form`** `boolean` — Whether the date picker is inside a form field
 
 ## Variants
 

package/docs/components/fields/FileInput.md

@@ -33,7 +33,7 @@ A file input component that allows users to select and upload files through a cu
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -57,14 +57,12 @@ The FileInput component supports all standard style properties:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| drag-hover | `boolean` | Whether files are being dragged over the component |
-| disabled | `boolean` | Whether the file input is disabled |
-| invalid | `boolean` | Whether the file input has validation errors |
-| valid | `boolean` | Whether the file input is valid |
-| focused | `boolean` | Whether the file input has focus |
-| inside-form | `boolean` | Whether the file input is inside a form field |
+- **`drag-hover`** `boolean` — Whether files are being dragged over the component
+- **`disabled`** `boolean` — Whether the file input is disabled
+- **`invalid`** `boolean` — Whether the file input has validation errors
+- **`valid`** `boolean` — Whether the file input is valid
+- **`focused`** `boolean` — Whether the file input has focus
+- **`inside-form`** `boolean` — Whether the file input is inside a form field
 
 ## Examples
 

package/docs/components/fields/FilterListBox.md

@@ -18,9 +18,40 @@ A searchable list selection component that combines a ListBox with an integrated
 
 ### Properties
 
+- **`selectedKey`** `string` — The selected key in controlled mode
+- **`defaultSelectedKey`** `string` — The default selected key in uncontrolled mode
+- **`selectedKeys`** `string[] | 'all'` — The selected keys in controlled multiple mode
+- **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode
+- **`selectionMode`** `'single' | 'multiple'` (default: `single`) — Selection mode
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disabledKeys`** `Key[]` — Array of keys for disabled items
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — FilterListBox size
+- **`searchPlaceholder`** `string` (default: `Search...`) — Placeholder text in the search input
+- **`autoFocus`** `boolean` — Whether the search input should have autofocus
+- **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter function or `false` to disable filtering
+- **`emptyLabel`** `ReactNode` (default: `No items` / `No results found`) — Label displayed when no items match
+- **`allowsCustomValue`** `boolean` (default: `false`) — Whether to allow custom values not in the options list
+- **`isCheckable`** `boolean` (default: `false`) — Whether to show checkboxes for multiple selection
+- **`shouldFocusWrap`** `boolean` (default: `false`) — Whether keyboard navigation should wrap around
+- **`isDisabled`** `boolean` (default: `false`) — Whether the FilterListBox is disabled
+- **`isLoading`** `boolean` (default: `false`) — Whether the FilterListBox is in loading state
+- **`isRequired`** `boolean` (default: `false`) — Whether selection is required
+- **`validationState`** `'valid' | 'invalid'` — Validation state
+- **`label`** `string` — Label text
+- **`description`** `string` — Field description
+- **`header`** `ReactNode` — Custom header content
+- **`footer`** `ReactNode` — Custom footer content
+- **`showSelectAll`** `boolean` (default: `false`) — Whether to show "Select All" option in multiple mode
+- **`selectAllLabel`** `string` (default: `All`) — Label for the "Select All" option
+- **`searchValue`** `string` — Controlled search input value
+- **`onSearchChange`** `(value: string) => void` — Callback when search input changes
+- **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
+- **`onEscape`** `() => void` — Callback when Escape key is pressed
+- **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -93,15 +124,13 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| `invalid` | `boolean` | Applied when `validationState="invalid"` |
-| `valid` | `boolean` | Applied when `validationState="valid"` |
-| `disabled` | `boolean` | Applied when `isDisabled={true}` |
-| `focused` | `boolean` | Applied when the FilterListBox has focus |
-| `loading` | `boolean` | Applied when `isLoading={true}` |
-| `searchable` | `boolean` | Always true for FilterListBox |
-| `prefix` | `boolean` | Applied when loading icon is shown |
+- `invalid` `boolean` — Applied when `validationState="invalid"`
+- `valid` `boolean` — Applied when `validationState="valid"`
+- `disabled` `boolean` — Applied when `isDisabled={true}`
+- `focused` `boolean` — Applied when the FilterListBox has focus
+- `loading` `boolean` — Applied when `isLoading={true}`
+- `searchable` `boolean` — Always true for FilterListBox
+- `prefix` `boolean` — Applied when loading icon is shown
 
 ## Sub-components
 
@@ -113,24 +142,20 @@ Individual items within the FilterListBox. Each item is rendered using [Item](..
 
 For detailed information about all available item properties, see [Item documentation](../content/Item.md). Key properties include:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| key | `string \| number` | Unique identifier for the item (required) |
-| children | `ReactNode` | The main content/label for the option |
-| textValue | `string` | Searchable text value (use for complex content) |
-| description | `ReactNode` | Secondary text below the main content |
-| icon | `ReactNode` | Icon displayed before the content |
-| styles | `Styles` | Custom styling for the item |
-| qa | `string` | QA identifier for testing |
+- **`key`** `string \| number` — Unique identifier for the item (required)
+- **`children`** `ReactNode` — The main content/label for the option
+- **`textValue`** `string` — Searchable text value (use for complex content)
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`styles`** `Styles` — Custom styling for the item
+- **`qa`** `string` — QA identifier for testing
 
 ### FilterListBox.Section
 
 Groups related items together with an optional heading.
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Optional heading text for the section |
-| children | `FilterListBox.Item[]` | - | Collection of FilterListBox.Item components |
+- **`title`** `ReactNode` — Optional heading text for the section
+- **`children`** `FilterListBox.Item[]` — Collection of FilterListBox.Item components
 
 ## Variants
 

package/docs/components/fields/FilterPicker.md

@@ -17,9 +17,57 @@ A versatile selection component that combines a trigger button with a searchable
 
 ### Properties
 
+- **`selectedKey`** `string` — The selected key in controlled mode
+- **`defaultSelectedKey`** `string` — The default selected key in uncontrolled mode
+- **`selectedKeys`** `string[] | 'all'` — The selected keys in controlled multiple mode. Use "all" to select all items or an array of keys.
+- **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode. Use "all" to select all items or an array of keys.
+- **`selectionMode`** `'single' | 'multiple'` (default: `single`) — Selection mode for the picker
+- **`allowsCustomValue`** `boolean` (default: `false`) — Whether to allow entering custom values that are not present in the predefined options
+- **`isClearable`** `boolean` (default: `false`) — Whether the filter picker is clearable using a clear button in the rightIcon slot
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disabledKeys`** `Key[]` — Array of keys for disabled items
+- **`items`** `Iterable<T>` — Array of items to render when using the render function pattern for large datasets with dynamic content
+- **`placeholder`** `string` — Placeholder text when no selection is made
+- **`icon`** `ReactNode` — Icon to show in the trigger button
+- **`type`** `'outline' | 'clear' | 'primary' | 'secondary' | 'neutral'` (default: `outline`) — Button styling type
+- **`theme`** `'default' | 'special'` (default: `default`) — Button theme
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the picker component
+- **`searchPlaceholder`** `string` — Placeholder text in the search input
+- **`autoFocus`** `boolean` (default: `false`) — Whether the search input should have autofocus
+- **`emptyLabel`** `string` — Custom label to display when no results are found after filtering
+- **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter function for determining if an option should be included in search results
+- **`header`** `ReactNode` — Custom header content
+- **`footer`** `ReactNode` — Custom footer content
+- **`renderSummary`** `((args: { selectedLabels, selectedKeys, selectionMode }) => ReactNode) | false` — Custom renderer for the summary shown inside the trigger when there is a selection
+- **`isCheckable`** `boolean` (default: `false`) — Whether to show checkboxes for multiple selection mode
+- **`shouldFocusWrap`** `boolean` (default: `false`) — Whether keyboard navigation should wrap around
+- **`showSelectAll`** `boolean` (default: `false`) — Whether to show the "Select All" option in multiple selection mode
+- **`selectAllLabel`** `string` (default: `All`) — Label for the "Select All" option
+- **`isDisabled`** `boolean` (default: `false`) — Whether the picker is disabled
+- **`isLoading`** `boolean` (default: `false`) — Whether the picker is in loading state
+- **`isRequired`** `boolean` (default: `false`) — Whether the field is required
+- **`validationState`** `'valid' | 'invalid'` — Validation state of the picker
+- **`label`** `string` — Label text
+- **`description`** `string` — Field description
+- **`message`** `string` — Help or error message
+- **`listBoxStyles`** `Styles` — Custom styles for the dropdown list container within the popover
+- **`popoverStyles`** `Styles` — Custom styles for the popover dialog that contains the FilterListBox
+- **`triggerStyles`** `Styles` — Custom styles for the trigger button element
+- **`triggerTooltip`** `string | TooltipProps` — Tooltip for the trigger button (separate from field tooltip)
+- **`triggerDescription`** `string` — Description for the trigger button (separate from field description)
+- **`prefix`** `ReactNode` — Content to show before the trigger button text
+- **`suffix`** `ReactNode` — Content to show after the trigger button text
+- **`hotkeys`** `string` — Keyboard shortcut that triggers the picker when pressed
+- **`htmlType`** `'button' | 'submit' | 'reset'` (default: `button`) — HTML button type
+- **`headerStyles`** `Styles` — Custom styles for the header area when header prop is provided
+- **`footerStyles`** `Styles` — Custom styles for the footer area when footer prop is provided
+- **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
+- **`onEscape`** `() => void` — Callback when Escape key is pressed
+- **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -73,10 +121,8 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| `placeholder` | `boolean` | Applied when no selection is made |
-| `selected` | `boolean` | Applied when items are selected |
+- **`placeholder`** `boolean` — Applied when no selection is made
+- **`selected`** `boolean` — Applied when items are selected
 
 ## Sub-components
 
@@ -88,19 +134,17 @@ Individual items within the FilterPicker dropdown. Each item is rendered using [
 
 For detailed information about all available item properties, see [Item documentation](../content/Item.md). Key properties include:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| key | `string \| number` | Unique identifier for the item (required) |
-| children | `ReactNode` | The main content/label for the option |
-| icon | `ReactNode` | Icon displayed before the content |
-| rightIcon | `ReactNode` | Icon displayed after the content |
-| description | `ReactNode` | Secondary text below the main content |
-| descriptionPlacement | `'inline' \| 'block'` | How the description is positioned |
-| prefix | `ReactNode` | Content before the main text |
-| suffix | `ReactNode` | Content after the main text |
-| tooltip | `string \| boolean \| object` | Tooltip configuration |
-| styles | `Styles` | Custom styling for the item |
-| qa | `string` | QA identifier for testing |
+- **`key`** `string \| number` — Unique identifier for the item (required)
+- **`children`** `ReactNode` — The main content/label for the option
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`descriptionPlacement`** `'inline' \| 'block'` — How the description is positioned
+- **`prefix`** `ReactNode` — Content before the main text
+- **`suffix`** `ReactNode` — Content after the main text
+- **`tooltip`** `string \| boolean \| object` — Tooltip configuration
+- **`styles`** `Styles` — Custom styling for the item
+- **`qa`** `string` — QA identifier for testing
 
 #### Example with Rich Items
 
@@ -129,10 +173,8 @@ For detailed information about all available item properties, see [Item document
 
 Groups related items together with an optional heading.
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Optional heading text for the section |
-| children | `FilterPicker.Item[]` | - | Collection of FilterPicker.Item components |
+- **`title`** `ReactNode` — Optional heading text for the section
+- **`children`** `FilterPicker.Item[]` — Collection of FilterPicker.Item components
 
 ## Content Patterns
 

package/docs/components/fields/HueSlider.md

@@ -30,7 +30,7 @@ The HueSlider component allows users to select a hue value (0-359 degrees) from
 
 ### Base Properties
 
-Supports [Base properties](/docs/base-properties)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -60,10 +60,8 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| horizontal | `boolean` | Whether the slider is horizontal (default) or vertical |
-| disabled | `boolean` | Whether the slider is disabled |
+- **`horizontal`** `boolean` — Whether the slider is horizontal (default) or vertical
+- **`disabled`** `boolean` — Whether the slider is disabled
 
 ## Examples
 

package/docs/components/fields/ListBox.md

@@ -20,9 +20,38 @@ A versatile list selection component that allows users to select one or more ite
 
 ### Properties
 
+- **`selectedKey`** `string` — The selected key in controlled mode
+- **`defaultSelectedKey`** `string` — The default selected key in uncontrolled mode
+- **`selectedKeys`** `string[] | 'all'` — The selected keys in controlled multiple mode. Use "all" to select all items or an array of keys.
+- **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode. Use "all" to select all items or an array of keys.
+- **`selectionMode`** `'single' | 'multiple'` (default: `single`) — Selection mode
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disabledKeys`** `Key[]` — Array of keys for disabled items
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — ListBox size
+- **`shape`** `'card' | 'plain' | 'popover'` (default: `card`) — Visual shape of the ListBox
+- **`filter`** `(nodes: Iterable<Node>) => Iterable<Node>` — Filter function for the list items
+- **`emptyLabel`** `ReactNode` (default: `No items`) — Label shown when no items are available
+- **`header`** `ReactNode` — Custom header content
+- **`footer`** `ReactNode` — Custom footer content
+- **`focusOnHover`** `boolean` (default: `true`) — Whether moving the pointer over an option will move DOM focus to that option
+- **`shouldUseVirtualFocus`** `boolean` (default: `false`) — Whether to use virtual focus instead of DOM focus
+- **`isCheckable`** `boolean` (default: `false`) — Whether to show checkboxes for multiple selection mode
+- **`shouldFocusWrap`** `boolean` (default: `false`) — Whether keyboard navigation should wrap around
+- **`isDisabled`** `boolean` (default: `false`) — Whether the ListBox is disabled
+- **`isRequired`** `boolean` (default: `false`) — Whether selection is required
+- **`validationState`** `'valid' | 'invalid'` — Validation state
+- **`label`** `string` — Label text
+- **`description`** `string` — Field description
+- **`message`** `string` — Help or error message
+- **`showSelectAll`** `boolean` (default: `false`) — Whether to show the "Select All" option in multiple selection mode
+- **`selectAllLabel`** `string` (default: `Select All`) — Label for the "Select All" option
+- **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
+- **`onEscape`** `() => void` — Callback when Escape key is pressed
+- **`onOptionClick`** `(key: Key) => void` — Callback when an option is clicked (non-checkbox area)
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -72,15 +101,13 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| `invalid` | `boolean` | Applied when `validationState="invalid"` |
-| `valid` | `boolean` | Applied when `validationState="valid"` |
-| `disabled` | `boolean` | Applied when `isDisabled={true}` |
-| `focused` | `boolean` | Applied when the ListBox has focus |
-| `header` | `boolean` | Applied when header prop is provided or `showSelectAll={true}` |
-| `footer` | `boolean` | Applied when footer prop is provided |
-| `selectAll` | `boolean` | Applied when `showSelectAll={true}` in multiple selection mode |
+- **`invalid`** `boolean` — Applied when `validationState="invalid"`
+- **`valid`** `boolean` — Applied when `validationState="valid"`
+- **`disabled`** `boolean` — Applied when `isDisabled={true}`
+- **`focused`** `boolean` — Applied when the ListBox has focus
+- **`header`** `boolean` — Applied when header prop is provided or `showSelectAll={true}`
+- **`footer`** `boolean` — Applied when footer prop is provided
+- **`selectAll`** `boolean` — Applied when `showSelectAll={true}` in multiple selection mode
 
 ## Key Properties
 
@@ -174,21 +201,19 @@ Individual items within the ListBox. Each item is rendered using [Item](../conte
 
 ListBox.Item is built using [Item](../content/Item.md), which provides rich layout and interaction capabilities. All Item properties are supported:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| key | `string \| number` | Unique identifier for the item (required) |
-| children | `ReactNode` | The main content/label for the option |
-| textValue | `string` | Text representation for complex JSX content (for screen readers and search) |
-| icon | `ReactNode` | Icon displayed before the content |
-| rightIcon | `ReactNode` | Icon displayed after the content |
-| description | `ReactNode` | Secondary text below the main content |
-| descriptionPlacement | `'inline' \| 'block'` | How the description is positioned (default: `'block'`) |
-| prefix | `ReactNode` | Content displayed at the start (before icon) |
-| suffix | `ReactNode` | Content displayed at the end (after content) |
-| hotkeys | `string` | Keyboard shortcut hint (e.g., `'ctrl+a'`) displayed as suffix |
-| tooltip | `string \| object` | Tooltip shown on hover. Object: `{ title, description, placement }` |
-| styles | `Styles` | Custom styling for the item |
-| qa | `string` | QA identifier for testing |
+- **`key`** `string \| number` — Unique identifier for the item (required)
+- **`children`** `ReactNode` — The main content/label for the option
+- **`textValue`** `string` — Text representation for complex JSX content (for screen readers and search)
+- **`icon`** `ReactNode` — Icon displayed before the content
+- **`rightIcon`** `ReactNode` — Icon displayed after the content
+- **`description`** `ReactNode` — Secondary text below the main content
+- **`descriptionPlacement`** `'inline' \| 'block'` (default: `'block'`) — How the description is positioned
+- **`prefix`** `ReactNode` — Content displayed at the start (before icon)
+- **`suffix`** `ReactNode` — Content displayed at the end (after content)
+- **`hotkeys`** `string` — Keyboard shortcut hint (e.g., `'ctrl+a'`) displayed as suffix
+- **`tooltip`** `string \| object` — Tooltip shown on hover. Object: `{ title, description, placement }`
+- **`styles`** `Styles` — Custom styling for the item
+- **`qa`** `string` — QA identifier for testing
 
 #### Example with Rich Items
 
@@ -217,10 +242,8 @@ ListBox.Item is built using [Item](../content/Item.md), which provides rich layo
 
 Groups related items together with an optional heading.
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Optional heading text for the section |
-| children | `ListBox.Item[]` | - | Collection of ListBox.Item components |
+- **`title`** `ReactNode` — Optional heading text for the section
+- **`children`** `ListBox.Item[]` — Collection of ListBox.Item components
 
 ## Variants
 

package/docs/components/fields/NumberInput.md

@@ -38,7 +38,7 @@ A number input component that allows users to enter numeric values and increment
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -72,15 +72,13 @@ The NumberInput component supports all standard style properties:
 
 The `mods` prop accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| focused | `boolean` | Forces focus ring appearance. |
-| disabled | `boolean` | Forces disabled appearance. |
-| invalid | `boolean` | Forces invalid state styling. |
-| valid | `boolean` | Forces valid state styling. |
-| loading | `boolean` | Displays loading spinner. |
-| prefix | `boolean` | Indicates presence of prefix content. |
-| suffix | `boolean` | Indicates presence of suffix content. |
+- **`focused`** `boolean` — Forces focus ring appearance.
+- **`disabled`** `boolean` — Forces disabled appearance.
+- **`invalid`** `boolean` — Forces invalid state styling.
+- **`valid`** `boolean` — Forces valid state styling.
+- **`loading`** `boolean` — Displays loading spinner.
+- **`prefix`** `boolean` — Indicates presence of prefix content.
+- **`suffix`** `boolean` — Indicates presence of suffix content.
 
 ## Variants