@cube-dev/ui-kit 0.0.0-canary-306672a → 0.0.0-canary-827ee9f

package/docs/components/content/TextItem.md

@@ -15,15 +15,21 @@ A text component with built-in overflow handling and auto-tooltips. When text is
 
 ### Properties
 
-- **`children`** `ReactNode` — Text content
-- **`highlight`** `string` — String to highlight within children
+- **`highlight`** `string` — String to highlight within children (only works when children is a plain string)
 - **`highlightCaseSensitive`** `boolean` (default: `false`) — Whether highlight matching is case-sensitive
-- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. Use true for auto tooltip on overflow, string for custom tooltip text.
+- **`highlightStyles`** `Styles` — Custom styles for highlighted text portions
+- **`tooltip`** `string | boolean | TooltipProviderProps` (default: `true`) — Tooltip configuration. `true` enables auto tooltip on overflow, a string shows fixed tooltip text, an object supports advanced configuration.
 - **`tooltipPlacement`** `Placement` (default: `top`) — Default tooltip placement
+- **`monospace`** `boolean` — Use monospace font
+- **`ellipsis`** `boolean` — Truncate overflow with ellipsis
+- **`nowrap`** `boolean` — Prevent text wrapping
+- **`italic`** `string` — Font style (e.g. `'italic'`)
+- **`weight`** `string | number` — Font weight
+- **`transform`** `string` — Text transform (e.g. `'uppercase'`, `'capitalize'`)
 
 ### Base Properties
 
-Supports [Base properties](../../BaseProperties.md) and all Text properties including `preset`, `color`, `weight`, `transform`, `ellipsis`, `nowrap`.
+Supports [Base properties](../../BaseProperties.md) and all Text style properties including `preset`, `color`.
 
 ### Styling Properties
 
@@ -31,10 +37,6 @@ Supports [Base properties](../../BaseProperties.md) and all Text properties incl
 
 Customizes the root text element. Inherits all styling capabilities from the Text component.
 
-#### highlightStyles
-
-Customizes the appearance of highlighted text portions.
-
 ### Style Properties
 
 These properties allow direct style application: `preset`, `color`, `weight`, `transform`, and all standard text/color style props.

package/docs/components/content/Title.md

@@ -13,6 +13,10 @@ A heading component for section titles. Renders as `h1`–`h6` based on the `lev
 - **`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
+- **`monospace`** `boolean` — Use monospace font
+- **`italic`** `string` — Font style (e.g. `'italic'`)
+- **`weight`** `string | number` — Font weight
+- **`transform`** `string` — Text transform (e.g. `'uppercase'`, `'capitalize'`)
 
 ### Style Defaults
 

package/docs/components/fields/ComboBox.md

@@ -46,8 +46,12 @@ A combobox component that combines a text input with a dropdown list, allowing u
 - **`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
+- **`items`** `Iterable<T>` — Items for the listbox (alternative to children, enables data-driven mode)
+- **`disabledKeys`** `Iterable<Key>` — Keys of disabled items that cannot be selected
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
 - **`onFocus`** `() => void` — Callback fired when focus enters the ComboBox
 - **`onBlur`** `() => void` — Callback fired when focus leaves the ComboBox
+- **`onKeyDown`** `(e: KeyboardEvent) => void` — Callback fired when a key is pressed on the input
 
 #### Notable Properties
 
@@ -97,10 +101,6 @@ Customizes the text input element where users type.
 
 Customizes the dropdown trigger button that opens/closes the popover.
 
-#### fieldStyles
-
-Customizes the field wrapper element that includes the label, description, message, and the entire input component.
-
 #### listBoxStyles
 
 Customizes the dropdown list container that displays options.

package/docs/components/fields/DatePicker.md

@@ -16,8 +16,6 @@ A date picker combines a text input with a calendar interface, allowing users to
 
 ### Properties
 
-- **`description`** `string` — Additional descriptive text
-- **`placeholder`** `string` — Placeholder text when no date is selected
 - **`value`** `DateValue` — The current date value (controlled)
 - **`defaultValue`** `DateValue` — The default date value (uncontrolled)
 - **`placeholderValue`** `DateValue` — Date used as placeholder when calendar opens
@@ -25,9 +23,17 @@ A date picker combines a text input with a calendar interface, allowing users to
 - **`maxValue`** `DateValue` — The maximum allowed date
 - **`granularity`** `'day' | 'hour' | 'minute' | 'second'` (default: `day`) — Determines the smallest selectable unit
 - **`size`** `'small' | 'medium' | 'large' | (string & {})` (default: `medium`) — DatePicker size
-- **`showMonthAndYearPickers`** `boolean` (default: `false`) — Whether to show month and year picker dropdowns
 - **`useLocale`** `boolean` (default: `false`) — Whether to use locale-specific date formatting
 - **`maxVisibleMonths`** `number` (default: `1`) — Maximum number of months to display in calendar
+- **`shouldFlip`** `boolean` (default: `true`) — Whether the calendar popover should flip to fit in the viewport
+- **`isOpen`** `boolean` — Whether the calendar popover is open (controlled)
+- **`defaultOpen`** `boolean` — Whether the calendar popover is open by default (uncontrolled)
+- **`isDateUnavailable`** `(date: DateValue) => boolean` — Callback to mark specific dates as unavailable
+- **`hourCycle`** `12 | 24` (default: `24`) — Whether to display time in 12 or 24 hour format
+- **`hideTimeZone`** `boolean` (default: `true`) — Whether to hide the time zone abbreviation
+- **`shouldForceLeadingZeros`** `boolean` (default: `true`) — Whether to always show leading zeros in date/time fields
+- **`pageBehavior`** `'single' | 'visible'` — Controls how calendar pages change when navigating
+- **`firstDayOfWeek`** `'sun' | 'mon' | 'tue' | 'wed' | 'thu' | 'fri' | 'sat'` — The first day of the week in the calendar
 - **`onChange`** `(value: DateValue | null) => void` — Callback fired when the date value changes
 - **`onBlur`** `(e: FocusEvent) => void` — Callback fired when the date picker loses focus
 - **`onFocus`** `(e: FocusEvent) => void` — Callback fired when the date picker receives focus
@@ -129,16 +135,6 @@ The `mods` property accepts the following modifiers you can override:
 />
 ```
 
-### Custom Format
-
-```jsx
-<DatePicker
-  label="Birth date"
-  showMonthAndYearPickers
-  maxValue={today(getLocalTimeZone())}
-/>
-```
-
 ### With Validation
 
 ```jsx

package/docs/components/fields/FileInput.md

@@ -17,11 +17,11 @@ A file input component that allows users to select and upload files through a cu
 ### Properties
 
 - **`placeholder`** `string` — Text displayed when no file is selected
-- **`buttonText`** `string` — Text displayed on the selection button
 - **`accept`** `string` — Comma-separated list of accepted file types
-- **`multiple`** `boolean` (default: `false`) — Whether multiple files can be selected
-- **`capture`** `undefined | 'user' | 'environment'` — Camera to use for file capture on mobile devices
 - **`type`** `'file' | 'text'` (default: `file`) — How to process the selected file(s)
+- **`size`** `'small' | 'default' | 'large'` (default: `default`) — The size of the input
+- **`inputStyles`** `Styles` — Custom styles for the file input element
+- **`inputProps`** `Props` — Direct props passed to the native file input element
 - **`onChange`** `function` — Callback fired when files are selected
 - **`onBlur`** `function` — Callback fired when the file input loses focus
 - **`onFocus`** `function` — Callback fired when the file input receives focus
@@ -71,16 +71,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput label="Upload document" />
 ```
 
-### Multiple Files
-
-```jsx
-<FileInput
-  label="Upload images"
-  multiple
-  accept="image/*"
-/>
-```
-
 ### With File Type Restrictions
 
 ```jsx
@@ -91,16 +81,6 @@ The `mods` property accepts the following modifiers you can override:
 />
 ```
 
-### Custom Button Text
-
-```jsx
-<FileInput
-  label="Profile picture"
-  buttonText="Choose Photo"
-  accept="image/jpeg,image/png"
-/>
-```
-
 ### With Validation
 
 ```jsx
@@ -118,7 +98,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput
   label="Disabled file input"
   isDisabled
-  buttonText="Upload"
 />
 ```
 
@@ -128,7 +107,6 @@ The `mods` property accepts the following modifiers you can override:
 <FileInput
   label="Document upload"
   placeholder="Drag files here or click to browse..."
-  buttonText="Browse"
 />
 ```
 
@@ -166,15 +144,14 @@ The `mods` property accepts the following modifiers you can override:
    />
    ```
 
-2. **Don't**: Use unclear button text or placeholders
+2. **Don't**: Use unclear or missing labels
    ```jsx
-   <FileInput buttonText="Click" /> {/* What does clicking do? */}
+   <FileInput /> {/* What should be uploaded? */}
    ```
 
 3. **File Types**: Always specify accepted file types for better UX
 4. **Size Limits**: Implement file size validation for uploads
-5. **Multiple Files**: Clearly indicate when multiple files are allowed
-6. **Error Handling**: Provide helpful feedback for invalid files
+5. **Error Handling**: Provide helpful feedback for invalid files
 
 ## Integration with Forms
 

package/docs/components/fields/FilterListBox.md

@@ -42,6 +42,11 @@ A searchable list selection component that combines a ListBox with an integrated
 - **`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
+- **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
+- **`isLoading`** `boolean` (default: `false`) — Whether the FilterListBox is in a loading state (shows loading icon in search input)
+- **`autoFocus`** `boolean` — Whether the search input should have autofocus
+- **`customValueProps`** `Partial<CubeItemProps>` — Props to apply to existing custom values (already selected but not in predefined options)
+- **`newCustomValueProps`** `Partial<CubeItemProps>` — Props to apply to new custom values appearing in search results (merged with `customValueProps`)
 
 ### Base Properties
 
@@ -100,6 +105,10 @@ Customizes section heading elements.
 **Sub-elements:**
 - Same as ListBox component sub-elements
 
+#### listBoxStyles
+
+Customizes the inner ListBox component.
+
 #### headerStyles
 
 Customizes the header area when header prop is provided.

package/docs/components/fields/FilterPicker.md

@@ -55,9 +55,16 @@ A versatile selection component that combines a trigger button with a searchable
 - **`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
+- **`shouldFlip`** `boolean` (default: `true`) — Whether to flip the popover placement when it overflows
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
+- **`sortSelectedToTop`** `boolean` — Sort selected items to the top when the popover opens (only works with `items` prop, defaults to `true` when items are provided)
+- **`searchValue`** `string` — Controlled search input value
+- **`onSearchChange`** `(value: string) => void` — Callback when search input value 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 (non-checkbox area)
+- **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
 
 ### Base Properties
 
@@ -97,20 +104,34 @@ Customizes the popover dialog that contains the FilterListBox.
 **Sub-elements:**
 - Same as Dialog component sub-elements
 
+#### searchInputStyles
+
+Customizes the search input field within the FilterListBox.
+
+#### listStyles
+
+Customizes the list container element within the FilterListBox.
+
+#### optionStyles
+
+Customizes individual option elements within the FilterListBox.
+
+#### sectionStyles
+
+Customizes section wrapper elements within the FilterListBox.
+
+#### headingStyles
+
+Customizes section heading elements within the FilterListBox.
+
 #### headerStyles
 
 Customizes the header area when header prop is provided.
 
-**Sub-elements:**
-- None - styles apply directly to the header container
-
 #### footerStyles
 
 Customizes the footer area when footer prop is provided.
 
-**Sub-elements:**
-- None - styles apply directly to the footer container
-
 ### Style Properties
 
 These properties allow direct style application without using the `styles` prop: `width`, `height`, `margin`, `padding`, `position`, `inset`, `zIndex`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `opacity`, `color`, `fill`, `fade`.

package/docs/components/fields/HueSlider.md

@@ -19,12 +19,14 @@ The HueSlider component allows users to select a hue value (0-359 degrees) from
 - **`value`** `number` — The hue value in controlled mode (0-359)
 - **`defaultValue`** `number` (default: `0`) — The default hue value in uncontrolled mode (0-359)
 - **`orientation`** `'horizontal' | 'vertical'` (default: `horizontal`) — The orientation of the slider
+- **`gradation`** `string[]` — Labels to display at gradation marks along the slider track
+- **`formatOptions`** `Intl.NumberFormatOptions` — Options for formatting the displayed value label
+- **`inputWidth`** `string` — Width of the slider input area
 - **`showValueLabel`** `boolean` (default: `true`) — Whether to show the current value label
 - **`getValueLabel`** — Function to format the value label
 - **`onChange`** `function` — Callback fired when the hue value changes
 - **`onChangeEnd`** `function` — Callback fired when the slider interaction ends
 - **`labelPosition`** `'top' | 'side'` (default: `top`) — The position of the label relative to the input
-- **`styles`** `object` — Custom styles object for styling the component and sub-elements
 
 ### Base Properties
 
@@ -46,6 +48,10 @@ Customizes the root element of the component.
 - `SliderTrackContainer` - The track background with rainbow gradient
 - `SliderThumb` - The draggable thumb element (colored to match current hue)
 
+#### inputStyles
+
+Customizes the slider input element.
+
 #### trackStyles
 
 Customizes the track element. The default displays a rainbow gradient.
@@ -54,6 +60,10 @@ Customizes the track element. The default displays a rainbow gradient.
 
 Customizes the thumb element. The default fills with the current hue color.
 
+#### thumbTokens
+
+Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color). The HueSlider sets these automatically to match the selected hue.
+
 ### Style Properties
 
 These properties allow direct style application without using the `styles` prop: `width`, `height`.

package/docs/components/fields/ListBox.md

@@ -44,6 +44,8 @@ A versatile list selection component that allows users to select one or more ite
 - **`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)
+- **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
+- **`disableSelectionToggle`** `boolean` (default: `false`) — When true, clicking an already-selected item keeps it selected instead of toggling it off
 
 ### Base Properties
 

package/docs/components/fields/NumberInput.md

@@ -19,13 +19,21 @@ A number input component that allows users to enter numeric values and increment
 - **`value`** `number` — The numeric value in controlled mode
 - **`defaultValue`** `number` — The default numeric value in uncontrolled mode
 - **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input
+- **`suffixPosition`** `'before' | 'after'` (default: `before`) — Position of suffix relative to validation/loading icons
 - **`hideStepper`** `boolean` (default: `false`) — Whether to hide the stepper buttons
 - **`minValue`** `number` — Minimum allowed value
 - **`maxValue`** `number` — Maximum allowed value
 - **`step`** `number` — Amount to increment or decrement the value
+- **`formatOptions`** `Intl.NumberFormatOptions` — Options for formatting the displayed number value
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`isWheelDisabled`** `boolean` — Whether scrolling the mouse wheel changes the value
+- **`decrementAriaLabel`** `string` — Custom aria-label for the decrement button
+- **`incrementAriaLabel`** `string` — Custom aria-label for the increment button
+- **`inputProps`** `Props` — Direct props passed to the native input element
+- **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
 - **`onChange`** `function` — Callback fired when the input value changes
 - **`onBlur`** `function` — Callback fired when the input loses focus
 - **`onFocus`** `function` — Callback fired when the input receives focus
@@ -56,10 +64,6 @@ Customizes the root element of the component.
 
 Customizes the input element itself.
 
-#### wrapperStyles
-
-Customizes the input wrapper container.
-
 ### Style Properties
 
 The NumberInput component supports all standard style properties:

package/docs/components/fields/PasswordInput.md

@@ -22,7 +22,11 @@ A password input is a specialized text field that masks user input to protect se
 - **`icon`** — Icon element rendered before the input
 - **`prefix`** — Input decoration before the main input
 - **`suffix`** — Input decoration after the main input (before toggle button)
+- **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading icons
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`autocomplete`** `string` — HTML autocomplete attribute for browser autofill behavior
+- **`inputProps`** `Props` — Direct props passed to the native input element
+- **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
 - **`onChange`** `function` — Callback fired when the input value changes
 - **`onBlur`** `function` — Callback fired when the input loses focus
 - **`onFocus`** `function` — Callback fired when the input receives focus

package/docs/components/fields/Picker.md

@@ -53,6 +53,10 @@ A versatile selection component that combines a trigger button with a dropdown l
 - **`shouldFlip`** `boolean` — Whether to flip the popover placement when it overflows
 - **`containerPadding`** `number` — Minimum padding between the popover and viewport edges
 - **`onSelectionChange`** `(keys: Key | Key[] | 'all' | null) => void` — Callback when selection changes
+- **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`onOpenChange`** `(isOpen: boolean) => void` — Callback called when the popover open state changes
+- **`filter`** `((textValue: string, inputValue: string) => boolean) | false` — Custom filter function for items. Pass `false` to disable filtering.
+- **`emptyLabel`** `ReactNode` — Content shown when no items match the filter or the collection is empty
 
 ### Base Properties
 
@@ -96,20 +100,30 @@ Customizes the popover Dialog that contains the ListBox. See [Dialog documentati
 **Sub-elements:**
 - None for Dialog in popover mode
 
+#### listStyles
+
+Customizes the list container element within the ListBox.
+
+#### optionStyles
+
+Customizes individual option elements within the ListBox.
+
+#### sectionStyles
+
+Customizes section wrapper elements within the ListBox.
+
+#### headingStyles
+
+Customizes section heading elements within the ListBox.
+
 #### headerStyles
 
 Customizes the header area when `header` prop is provided.
 
-**Sub-elements:**
-- None
-
 #### footerStyles
 
 Customizes the footer area when `footer` prop is provided.
 
-**Sub-elements:**
-- None
-
 ### Style Properties
 
 These properties allow direct style application without using the `styles` prop: `display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `color`, `fill`, `fade`.
@@ -524,12 +538,9 @@ The component automatically manages ARIA attributes:
 
 - **`aria-label`** — Labels the trigger when no visible label exists
 - **`aria-labelledby`** — Associates the label with the trigger
-- **`aria-expanded`** — Indicates whether the popover is open (true/false)
-- **`aria-haspopup`** — Indicates the button controls a listbox (listbox)
 - **`aria-describedby`** — Associates help text and error messages
-- **`aria-invalid`** — Indicates validation state (true when invalid)
-- **`aria-required`** — Indicates required fields (true when required)
-- **`aria-disabled`** — Indicates disabled state
+
+The following ARIA attributes are automatically managed by React Aria and do not need to be set manually: `aria-expanded`, `aria-haspopup`, `aria-invalid`, `aria-required`, `aria-disabled`.
 
 ### Best Practices for Accessibility
 

package/docs/components/fields/SearchInput.md

@@ -19,9 +19,15 @@ A search input provides a specialized text field for search functionality, featu
 - **`value`** `string` — The search value in controlled mode
 - **`defaultValue`** `string` — The default search value in uncontrolled mode
 - **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input (default: search icon)
+- **`prefix`** `ReactNode` — Content rendered before the input
 - **`suffix`** — Input decoration after the main input (before clear button)
+- **`suffixPosition`** `'before' | 'after'` (default: `after`) — Position of suffix relative to validation/loading state icons
 - **`isClearable`** `boolean` (default: `false`) — Whether the search input shows a clear button
 - **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Input size
+- **`autocomplete`** `string` — HTML autocomplete attribute for browser autofill behavior
+- **`inputProps`** `Props` — Direct props passed to the native input element
+- **`wrapperProps`** `Props` — Direct props passed to the input wrapper element
 - **`onChange`** `function` — Callback fired when the search value changes
 - **`onSubmit`** `function` — Callback fired when search is submitted
 - **`onClear`** `function` — Callback fired when search is cleared

package/docs/components/fields/Select.md

@@ -45,9 +45,15 @@ A select allows users to choose a single option from a list of predefined choice
 - **`listBoxStyles`** `Styles` — Styles for the dropdown list container
 - **`optionStyles`** `Styles` — Styles for individual option items
 - **`overlayStyles`** `Styles` — Styles for the dropdown overlay wrapper
-- **`wrapperStyles`** `Styles` — Styles for the outer wrapper element
 - **`triggerStyles`** `Styles` — Styles for the trigger button element
 - **`inputProps`** `Props` — Additional props for the input element
+- **`triggerDescription`** `ReactNode` — Description text displayed within the trigger button (different from field-level description)
+- **`descriptionPlacement`** `'inline' | 'block'` — Controls how the trigger description is positioned
+- **`hotkeys`** `string` — Keyboard shortcut that triggers the select when pressed
+- **`containerPadding`** `number` (default: `8`) — Minimum padding in pixels between the popover and viewport edges
+- **`isOpen`** `boolean` — Whether the dropdown is open (controlled)
+- **`defaultOpen`** `boolean` — Whether the dropdown is open by default (uncontrolled)
+- **`selectionMode`** `'single'` — Selection mode for the select
 - **`onSelectionChange`** `(key: Key) => void` — Callback fired when the selected option changes
 - **`onOpenChange`** `(isOpen: boolean) => void` — Callback fired when the dropdown opens or closes
 - **`onFocus`** `(e: FocusEvent) => void` — Callback fired when the select receives focus

package/docs/components/fields/Slider.md

@@ -18,6 +18,32 @@ The Slider component allows users to select a numeric value from a range by drag
 
 ## Properties
 
+- **`value`** `number` — The current value in controlled mode
+- **`defaultValue`** `number` — The default value in uncontrolled mode
+- **`minValue`** `number` (default: `0`) — The minimum allowed value
+- **`maxValue`** `number` (default: `100`) — The maximum allowed value
+- **`step`** `number` (default: `1`) — The step increment between values
+- **`orientation`** `'horizontal' | 'vertical'` (default: `'horizontal'`) — The orientation of the slider
+- **`gradation`** `string[]` — Labels for gradation marks along the track
+- **`showValueLabel`** `boolean` — Whether the value label is displayed (defaults to `true` when `label` is present)
+- **`getValueLabel`** `(value: number) => string` — Custom function to format the value label
+- **`formatOptions`** `Intl.NumberFormatOptions` — Number format options for the value label display
+- **`inputWidth`** `string` — Width of the input area
+- **`trackStyles`** `Styles` — Custom styles for the track element
+- **`thumbStyles`** `Styles` — Custom styles for the thumb element
+- **`thumbTokens`** `Tokens` — Custom tokens for the thumb element (e.g., `#slider-thumb` for fill color)
+- **`inputStyles`** `Styles` — Custom styles for the input element
+- **`onChange`** `(value: number) => void` — Callback fired when the value changes during drag
+- **`onChangeEnd`** `(value: number) => void` — Callback fired when the value changes on drag end
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The Slider component renders the following sub-elements that can be customized via the `styles` prop:

package/docs/components/fields/TextArea.md

@@ -24,6 +24,39 @@ The TextArea component is a multi-line text input that allows users to enter and
 
 ## Properties
 
+- **`autoSize`** `boolean` (default: `false`) — Whether the textarea should automatically resize based on content
+- **`maxRows`** `number` (default: `10`) — Maximum number of visible rows when `autoSize` is enabled
+- **`rows`** `number` (default: `3`) — Number of visible text rows
+- **`value`** `string` — The text value in controlled mode
+- **`defaultValue`** `string` — The default text value in uncontrolled mode
+- **`placeholder`** `string` — Placeholder text when input is empty
+- **`icon`** `ReactElement` — Icon element rendered before the input
+- **`prefix`** `ReactNode` — Input decoration before the main input
+- **`suffix`** `ReactNode` — Input decoration after the main input
+- **`suffixPosition`** `'before' | 'after'` (default: `'before'`) — Position of suffix relative to validation/loading state icons
+- **`resize`** `string` — CSS resize value (e.g. `'vertical'`, `'none'`)
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Input size
+- **`autocomplete`** `string` — Browser autocomplete attribute value
+- **`maxLength`** `number` — Maximum number of characters allowed
+- **`minLength`** `number` — Minimum number of characters required
+- **`inputProps`** `Props` — Direct HTML props passed to the inner textarea element
+- **`wrapperProps`** `Props` — Additional HTML props passed to the input wrapper container
+- **`inputRef`** `RefObject<HTMLTextAreaElement>` — Ref to the inner textarea element
+- **`wrapperRef`** `RefObject<HTMLDivElement>` — Ref to the input wrapper container
+- **`loadingIndicator`** `ReactNode` — Custom loading indicator element
+- **`inputStyles`** `Styles` — Custom styles for the textarea element
+- **`onChange`** `function` — Callback fired when the input value changes
+- **`onBlur`** `function` — Callback fired when the input loses focus
+- **`onFocus`** `function` — Callback fired when the input receives focus
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The TextArea component renders the following sub-elements that can be customized via the `styles` prop:

package/docs/components/fields/TextInput.md

@@ -31,6 +31,10 @@ A text input component that allows users to input custom text entries with a key
 - **`autocomplete`** `string` — Browser autocomplete attribute value
 - **`maxLength`** `number` — Maximum number of characters allowed
 - **`minLength`** `number` — Minimum number of characters required
+- **`inputProps`** `Props` — Direct HTML props passed to the inner input element
+- **`inputRef`** `RefObject<HTMLInputElement | HTMLTextAreaElement>` — Ref to the inner input element
+- **`wrapperRef`** `RefObject<HTMLDivElement>` — Ref to the input wrapper container
+- **`loadingIndicator`** `ReactNode` — Custom loading indicator element
 - **`onChange`** `function` — Callback fired when the input value changes
 - **`onBlur`** `function` — Callback fired when the input loses focus
 - **`onFocus`** `function` — Callback fired when the input receives focus

package/docs/components/fields/TextInputMapper.md

@@ -4,6 +4,24 @@ The TextInputMapper component allows users to create and manage key-value pairs
 
 ## Properties
 
+- **`value`** `Record<string, string>` — The key-value pairs in controlled mode
+- **`onChange`** `(value: Record<string, string> | undefined) => void` — Callback fired when mappings change
+- **`actionLabel`** `string` (default: `'Mapping'`) — Label text for the add mapping button
+- **`KeyComponent`** `ComponentType` — Custom component for rendering key inputs
+- **`ValueComponent`** `ComponentType` — Custom component for rendering value inputs
+- **`keyProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each key input
+- **`valueProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each value input
+- **`allowsCustomValue`** `boolean` — Whether custom (free-form) values are allowed in combobox inputs
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Size of the input fields and buttons
+
+### Base Properties
+
+Supports [Base properties](../../BaseProperties.md)
+
+### Field Properties
+
+Supports all [Field properties](../../FieldProperties.md)
+
 ## Sub-elements
 
 The TextInputMapper component is a complex compound component that doesn't expose styled sub-elements via the `styles` prop. Instead, it uses internal layout components and delegates styling to its key and value input components.

package/docs/components/form/Field.md

@@ -85,6 +85,7 @@ These properties allow direct style application without using the `styles` prop:
 - **`isRequired`** `boolean` — Whether the field is required
 - **`isDisabled`** `boolean` — Whether the field is disabled
 - **`isLoading`** `boolean` — Whether the field is in loading state
+- **`isReadOnly`** `boolean` — Whether the field is read-only
 - **`isHidden`** `boolean` — Whether the field is hidden
 - **`validationState`** `'valid' | 'invalid'` — Validation state of the field
 

package/docs/components/form/Form.md

@@ -34,6 +34,7 @@ These properties are inherited by all input components within the form:
 - **`labelStyles`** `Styles` — Styles applied to field labels
 - **`requiredMark`** `boolean` (default: `true`) — Whether to show required field indicators
 - **`necessityIndicator`** `'icon' | 'label'` (default: `icon`) — Type of necessity indicator
+- **`necessityLabel`** `ReactNode` — Custom label to replace the default necessity indicator text
 - **`isReadOnly`** `boolean` (default: `false`) — Whether fields are read-only by default
 - **`validationState`** `'valid' | 'invalid'` — Validation state for all fields
 - **`validateTrigger`** `'onBlur' | 'onChange' | 'onSubmit'` (default: `onBlur`) — When to trigger validation

package/docs/components/layout/ResizablePanel.md

@@ -23,6 +23,12 @@ A `Panel` with a draggable resize handle. Users can adjust the panel size by dra
 - **`maxSize`** `string | number` (default: `'min(50%, 400px)'` for uncontrolled) — Maximum size constraint
 - **`isDisabled`** `boolean` — Disable resizing
 - **`handlerStyles`** `Styles` — Custom styles for the resize handle
+- **`isStretched`** `boolean` — Position the panel absolutely to fill its container
+- **`isCard`** `boolean` — Apply card styling with border and rounded corners
+- **`isFloating`** `boolean` — Position the panel as a floating overlay
+- **`innerStyles`** `Styles` — Custom styles for the panel's inner content element
+- **`isFlex`** `boolean` — Use flex layout instead of grid for the inner content
+- **`extra`** `ReactNode` — Additional content rendered outside the inner element (e.g., overlays)
 
 ### Base Properties
 

package/docs/components/navigation/Tabs.md

@@ -44,6 +44,7 @@ An accessible tabbed interface for organizing content into multiple panels, show
 - **`showScrollArrows`** `boolean | 'auto'` (default: `false`) — Show scroll navigation arrows
 - **`tabPickerPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the tab picker
 - **`scrollArrowsPosition`** `'prefix' | 'suffix'` (default: `suffix`) — Position of the scroll arrows
+- **`tabListPadding`** `string` — Inline padding for the tab list container (e.g., `"2x"`)
 - **`tabListStyles`** `Styles` — Custom styles for the tab list container
 - **`prefixStyles`** `Styles` — Custom styles for the prefix slot
 - **`suffixStyles`** `Styles` — Custom styles for the suffix slot

package/docs/components/overlays/AlertDialog.md

@@ -18,6 +18,10 @@ A modal dialog for important messages that require user acknowledgment. Extends
   - `confirm` — Confirm button props or `false` to hide (default: `{ label: 'Ok', type: 'primary' }`)
   - `cancel` — Cancel button props or `true` to show (default: hidden, uses `{ label: 'Cancel' }`)
   - `secondary` — Optional secondary button props
+- **`size`** `'S' | 'M' | 'L' | 'small' | 'medium' | 'large'` — The size of the dialog
+- **`isDismissable`** `boolean` (default: `false`) — Whether the dialog is dismissable
+- **`closeIcon`** `ReactElement` — Custom close icon element
+- **`closeButtonStyles`** `Styles` — Custom styles for the close button
 
 ### Base Properties