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

package/docs/components/fields/PasswordInput.md

@@ -35,7 +35,7 @@ A password input is a specialized text field that masks user input to protect se
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -64,14 +64,12 @@ The PasswordInput component supports all standard style properties:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| focused | `boolean` | Whether the input has focus |
-| disabled | `boolean` | Whether the password input is disabled |
-| invalid | `boolean` | Whether the password input has validation errors |
-| valid | `boolean` | Whether the password input is valid |
-| hovered | `boolean` | Whether the password input is being hovered |
-| inside-form | `boolean` | Whether the password input is inside a form field |
+- **`focused`** `boolean` — Whether the input has focus
+- **`disabled`** `boolean` — Whether the password input is disabled
+- **`invalid`** `boolean` — Whether the password input has validation errors
+- **`valid`** `boolean` — Whether the password input is valid
+- **`hovered`** `boolean` — Whether the password input is being hovered
+- **`inside-form`** `boolean` — Whether the password input is inside a form field
 
 ## Variants
 

package/docs/components/fields/Picker.md

@@ -16,9 +16,52 @@ A versatile selection component that combines a trigger button with a dropdown l
 
 ### Properties
 
+- **`placeholder`** `string` — Placeholder text when no selection is made
+- **`label`** `string` — Label text for the picker field
+- **`description`** `string` — Description text displayed below the label
+- **`message`** `string` — Help or error message
+- **`selectionMode`** `'single' | 'multiple'` (default: `single`) — Selection mode for the picker
+- **`selectedKey`** `string` — The selected key in controlled single mode
+- **`defaultSelectedKey`** `string` — The default selected key in uncontrolled single mode
+- **`selectedKeys`** `string[] | 'all'` — The selected keys in controlled multiple mode
+- **`defaultSelectedKeys`** `string[] | 'all'` — The default selected keys in uncontrolled multiple mode
+- **`items`** `Iterable<T>` — Array of items for dynamic content with render function pattern
+- **`size`** `'small' | 'medium' | 'large'` (default: `medium`) — Size of the picker component
+- **`type`** `'outline' | 'clear' | 'primary' | 'secondary' | 'neutral'` (default: `outline`) — Trigger button styling type
+- **`theme`** `'default' | 'danger'` (default: `default`) — Trigger button color theme
+- **`icon`** `ReactNode` — Icon displayed in the trigger button
+- **`rightIcon`** `ReactNode` — Icon displayed on the right side of the trigger button
+- **`prefix`** `ReactNode` — Content before the trigger button text
+- **`suffix`** `ReactNode` — Content after the trigger button text
+- **`hotkeys`** `string` — Keyboard shortcut that triggers the picker when pressed
+- **`shape`** `'rectangle' | 'round'` — Shape of the trigger button
+- **`isCheckable`** `boolean` (default: `false`) — Whether to show checkboxes for multiple selection mode
+- **`showSelectAll`** `boolean` (default: `false`) — Whether to show "Select All" option in multiple selection mode
+- **`selectAllLabel`** `ReactNode` (default: `Select All`) — Label for the "Select All" option
+- **`disallowEmptySelection`** `boolean` (default: `false`) — Whether to disallow empty selection
+- **`disabledKeys`** `Key[]` — Array of keys for disabled items
+- **`isClearable`** `boolean` (default: `false`) — Whether the picker shows a clear button when a selection is made
+- **`onClear`** `() => void` — Callback called when the clear button is pressed
+- **`sortSelectedToTop`** `boolean` — Sort selected items to the top when the popover opens (only works with `items` prop)
+- **`renderSummary`** `((args: { selectedLabels, selectedKeys, selectionMode }) => ReactNode) | false` — Custom renderer for the summary shown inside the trigger
+- **`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
+- **`header`** `ReactNode` — Custom header content in the popover
+- **`footer`** `ReactNode` — Custom footer content in the popover
+- **`listBoxStyles`** `Styles` — Custom styles for the ListBox within the popover
+- **`popoverStyles`** `Styles` — Custom styles for the popover container
+- **`triggerStyles`** `Styles` — Custom styles for the trigger button
+- **`triggerTooltip`** `string | TooltipProps` — Tooltip for the trigger button (separate from field tooltip)
+- **`triggerDescription`** `string` — Description for the trigger button (separate from field description)
+- **`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
+
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -76,10 +119,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
 
@@ -91,21 +132,19 @@ Represents individual selectable items within the Picker dropdown. Each item is
 
 See [Item documentation](../content/Item.md) for the complete API. Common properties include:
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `key` | `string \| number` | Unique identifier for the item (required) |
-| `children` | `ReactNode` | The main content/label for the item |
-| `textValue` | `string` | Accessible text for screen readers (required for complex content) |
-| `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 relative to content |
-| `prefix` | `ReactNode` | Content before the main text |
-| `suffix` | `ReactNode` | Content after the main text |
-| `isDisabled` | `boolean` | Whether the item is disabled |
-| `tooltip` | `string \| boolean \| TooltipProps` | 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 item
+- **`textValue`** `string` — Accessible text for screen readers (required for complex content)
+- **`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 relative to content
+- **`prefix`** `ReactNode` — Content before the main text
+- **`suffix`** `ReactNode` — Content after the main text
+- **`isDisabled`** `boolean` — Whether the item is disabled
+- **`tooltip`** `string \| boolean \| TooltipProps` — Tooltip configuration
+- **`styles`** `Styles` — Custom styling for the item
+- **`qa`** `string` — QA identifier for testing
 
 #### Examples with Rich Items
 
@@ -155,10 +194,8 @@ Groups related items together under an optional section heading. Sections provid
 
 #### Properties
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `title` | `ReactNode` | - | Section heading text (optional) |
-| `children` | `Picker.Item[]` | - | Collection of Picker.Item components (required) |
+- **`title`** `ReactNode` — Section heading text (optional)
+- **`children`** `Picker.Item[]` — Collection of Picker.Item components (required)
 
 #### Example
 
@@ -226,39 +263,31 @@ For large datasets or dynamic content, use the `items` prop with a render functi
 
 ### Selection Modes
 
-| Mode | Description | Use Case |
-|------|-------------|----------|
-| `single` | Select only one item at a time | Category selection, single choice questions |
-| `multiple` | Select multiple items with checkboxes | Tags, filters, permissions |
+- **`single`** — Select only one item at a time. Use case: Category selection, single choice questions
+- **`multiple`** — Select multiple items with checkboxes. Use case: Tags, filters, permissions
 
 ### Trigger Button Types
 
 The trigger button supports various visual styles via the `type` prop:
 
-| Type | Description | Use Case |
-|------|-------------|----------|
-| `outline` | Outlined button with border (default) | Standard form inputs |
-| `clear` | Transparent background | Toolbar actions, compact interfaces |
-| `primary` | Primary brand color | Emphasized selections |
-| `secondary` | Secondary color variant | Alternative emphasis |
-| `neutral` | Neutral color scheme | Subtle selections |
+- **`outline`** (default) — Outlined button with border. Use case: Standard form inputs
+- **`clear`** — Transparent background. Use case: Toolbar actions, compact interfaces
+- **`primary`** — Primary brand color. Use case: Emphasized selections
+- **`secondary`** — Secondary color variant. Use case: Alternative emphasis
+- **`neutral`** — Neutral color scheme. Use case: Subtle selections
 
 ### Trigger Button Themes
 
 Control the color scheme with the `theme` prop:
 
-| Theme | Description |
-|-------|-------------|
-| `default` | Standard theme (default) |
-| `danger` | Red/destructive color (also applied automatically when `validationState="invalid"`) |
+- **`default`** — Standard theme (default)
+- **`danger`** — Red/destructive color (also applied automatically when `validationState="invalid"`)
 
 ### Sizes
 
-| Size | Height | Use Case |
-|------|--------|----------|
-| `small` | ~28px | Dense interfaces, compact layouts |
-| `medium` | ~32px | Standard forms (default) |
-| `large` | ~40px | Emphasized selections, accessibility |
+- **`small`** — ~28px. Use case: Dense interfaces, compact layouts
+- **`medium`** — ~32px (default). Use case: Standard forms
+- **`large`** — ~40px. Use case: Emphasized selections, accessibility
 
 ## Examples
 
@@ -467,13 +496,11 @@ The Picker component is built with React Aria hooks and provides comprehensive a
 
 ### Keyboard Navigation
 
-| Key | Action |
-|-----|--------|
-| `Tab` | Moves focus to/from the trigger button |
-| `Space` or `Enter` | Opens the dropdown popover when focused on trigger |
-| `Arrow Up` or `Arrow Down` | Opens the popover when closed; navigates through items when open |
-| `Escape` | Closes the popover and returns focus to trigger |
-| `Space` or `Enter` | Selects the focused item (single mode closes popover automatically) |
+- **`Tab`** — Moves focus to/from the trigger button
+- **`Space`** or **`Enter`** — Opens the dropdown popover when focused on trigger
+- **`Arrow Up`** or **`Arrow Down`** — Opens the popover when closed; navigates through items when open
+- **`Escape`** — Closes the popover and returns focus to trigger
+- **`Space`** or **`Enter`** — Selects the focused item (single mode closes popover automatically)
 
 **In the popover:**
 - Arrow keys navigate through items
@@ -496,16 +523,14 @@ The Picker component is built with React Aria hooks and provides comprehensive a
 
 The component automatically manages ARIA attributes:
 
-| Attribute | Usage |
-|-----------|-------|
-| `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 |
+- **`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
 
 ### Best Practices for Accessibility
 
@@ -691,15 +716,13 @@ function MyForm() {
 
 ### Key Form Properties
 
-| Property | Description |
-|----------|-------------|
-| `name` | Field name in form data (required for form integration) |
-| `rules` | Validation rules array |
-| `defaultValue` | Initial value (use with uncontrolled forms) |
-| `value` | Controlled value (use with controlled forms) |
-| `isRequired` | Marks field as required and adds visual indicator |
-| `validationState` | Manual validation state control |
-| `message` | Error or help message |
+- **`name`** — Field name in form data (required for form integration)
+- **`rules`** — Validation rules array
+- **`defaultValue`** — Initial value (use with uncontrolled forms)
+- **`value`** — Controlled value (use with controlled forms)
+- **`isRequired`** — Marks field as required and adds visual indicator
+- **`validationState`** — Manual validation state control
+- **`message`** — Error or help message
 
 ## Advanced Features
 

package/docs/components/fields/RadioGroup.md

@@ -35,7 +35,7 @@ A radio group allows users to select exactly one option from a set of mutually e
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -59,12 +59,10 @@ 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 radio group is oriented horizontally |
-| tabs | `boolean` | Whether the radio group uses tabs styling |
-| inside-form | `boolean` | Whether the radio group is inside a form field |
-| side-label | `boolean` | Whether the label is positioned at the side |
+- **`horizontal`** `boolean` — Whether the radio group is oriented horizontally
+- **`tabs`** `boolean` — Whether the radio group uses tabs styling
+- **`inside-form`** `boolean` — Whether the radio group is inside a form field
+- **`side-label`** `boolean` — Whether the label is positioned at the side
 
 ## Variants
 

package/docs/components/fields/SearchInput.md

@@ -35,7 +35,7 @@ A search input provides a specialized text field for search functionality, featu
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -64,14 +64,12 @@ The SearchInput component supports all standard style properties:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| focused | `boolean` | Whether the input has focus |
-| disabled | `boolean` | Whether the search input is disabled |
-| invalid | `boolean` | Whether the search input has validation errors |
-| valid | `boolean` | Whether the search input is valid |
-| hovered | `boolean` | Whether the search input is being hovered |
-| inside-form | `boolean` | Whether the search input is inside a form field |
+- **`focused`** `boolean` — Whether the input has focus
+- **`disabled`** `boolean` — Whether the search input is disabled
+- **`invalid`** `boolean` — Whether the search input has validation errors
+- **`valid`** `boolean` — Whether the search input is valid
+- **`hovered`** `boolean` — Whether the search input is being hovered
+- **`inside-form`** `boolean` — Whether the search input is inside a form field
 
 ## Variants
 

package/docs/components/fields/Select.md

@@ -20,8 +20,10 @@ A select allows users to choose a single option from a list of predefined choice
 - **`defaultSelectedKey`** `string` — The default selected value in uncontrolled mode
 - **`placeholder`** `string` — Placeholder text when no option is selected
 - **`icon`** `ReactElement` — Icon element rendered before the select value
+- **`rightIcon`** `ReactNode` — Icon element rendered after the select value (caret by default)
 - **`prefix`** `ReactNode` — Content rendered before the select value
 - **`suffix`** `ReactNode` — Content rendered after the select value
+- **`shape`** `'card' | 'button' | 'sharp' | 'pill'` (default: `button`) — Shape of the trigger border radius
 - **`suffixPosition`** `string` (default: `before`) — Position of suffix relative to validation icons
 - **`type`** `string` (default: `outline`) — Visual style variant of the select
 - **`theme`** `string` (default: `default`) — Theme variant affecting overall styling
@@ -74,7 +76,7 @@ A select allows users to choose a single option from a list of predefined choice
 
 **triggerDescription** - Text description displayed within the trigger button. Different from field-level description provided by FieldWrapper.
 
-**descriptionPlacement** - Controls how description is positioned: `inline`, `block`, or `auto`.
+**descriptionPlacement** - Controls how description is positioned: `inline` or `block`.
 
 **overlayOffset** - Distance between the select trigger and dropdown in pixels (default: 8).
 
@@ -86,7 +88,7 @@ A select allows users to choose a single option from a list of predefined choice
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -135,18 +137,15 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-| Modifier | Type | Description |
-|----------|------|-------------|
-| opened | `boolean` | Whether the dropdown is open |
-| focused | `boolean` | Whether the select has focus |
-| disabled | `boolean` | Whether the select is disabled |
-| invalid | `boolean` | Whether the select has validation errors |
-| valid | `boolean` | Whether the select is valid |
-| placeholder | `boolean` | Whether showing placeholder text |
-| hovered | `boolean` | Whether the select is being hovered |
-| loading | `boolean` | Whether the select is in loading state |
-| prefix | `boolean` | Whether prefix content is present |
-| suffix | `boolean` | Whether suffix content is present |
+- `focused` `boolean` — Whether the select has focus
+- `disabled` `boolean` — Whether the select is disabled
+- `invalid` `boolean` — Whether the select has validation errors
+- `valid` `boolean` — Whether the select is valid
+- `placeholder` `boolean` — Whether showing placeholder text
+- `hovered` `boolean` — Whether the select is being hovered
+- `loading` `boolean` — Whether the select is in loading state
+- `prefix` `boolean` — Whether prefix content is present
+- `suffix` `boolean` — Whether suffix content is present
 
 ## Sub-components
 
@@ -158,19 +157,17 @@ Individual option items within the select 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
 
@@ -198,10 +195,8 @@ For detailed information about all available item properties, see [Item document
 
 Groups related options together with an optional heading.
 
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| title | `ReactNode` | - | Optional heading text for the section |
-| children | `Select.Item[]` | - | Collection of Select.Item components |
+- **`title`** `ReactNode` — Optional heading text for the section
+- **`children`** `Select.Item[]` — Collection of Select.Item components
 
 ## Variants
 

package/docs/components/fields/Switch.md

@@ -33,7 +33,7 @@ A switch allows users to toggle between two states: on and off. It provides imme
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -62,16 +62,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 |
-|----------|------|-------------|
-| checked | `boolean` | Whether the switch is in the "on" state |
-| disabled | `boolean` | Whether the switch is disabled |
-| invalid | `boolean` | Whether the switch has validation errors |
-| valid | `boolean` | Whether the switch is valid |
-| focused | `boolean` | Whether the switch has focus |
-| hovered | `boolean` | Whether the switch is being hovered |
-| side-label | `boolean` | Whether the label is positioned to the side |
-| inside-form | `boolean` | Whether the switch is inside a form field |
+- **`checked`** `boolean` — Whether the switch is in the "on" state
+- **`disabled`** `boolean` — Whether the switch is disabled
+- **`invalid`** `boolean` — Whether the switch has validation errors
+- **`valid`** `boolean` — Whether the switch is valid
+- **`focused`** `boolean` — Whether the switch has focus
+- **`hovered`** `boolean` — Whether the switch is being hovered
+- **`side-label`** `boolean` — Whether the label is positioned to the side
+- **`inside-form`** `boolean` — Whether the switch is inside a form field
 
 ## Variants
 

package/docs/components/fields/TextInput.md

@@ -19,12 +19,19 @@ A text input component that allows users to input custom text entries with a key
 - **`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
+- **`label`** `ReactNode` — Label text displayed above or beside the input
 - **`icon`** — 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 state icons
 - **`type`** `'text' | 'password' | 'email' | 'url' | 'tel' | 'search'` (default: `text`) — Input type
 - **`multiLine`** `boolean` (default: `false`) — Whether the input is multiline (textarea)
+- **`rows`** `number` — Number of visible rows for multiline input
+- **`resize`** `string` — CSS resize value for multiline input (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
 - **`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
@@ -37,7 +44,7 @@ A text input component that allows users to input custom text entries with a key
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -57,9 +64,9 @@ Customizes the root element of the component.
 
 Customizes the input element itself.
 
-#### wrapperStyles
+#### wrapperProps
 
-Customizes the input wrapper container.
+Additional HTML props passed to the input wrapper container.
 
 ### Style Properties
 
@@ -71,15 +78,13 @@ The TextInput 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
 
@@ -191,8 +196,7 @@ This component supports all [Field properties](../form/Field.md) when used withi
 
 ## Suggested Improvements
 
-- Add `autoComplete` prop mapping for better browser integration
-- Provide `maxLength` indicator with character count
+- Provide `maxLength` indicator with visible character count
 - Support for input masks and formatting
 - Built-in debouncing for onChange events
 

package/docs/components/form/Field.md

@@ -39,7 +39,7 @@ The Field component is a **legacy wrapper** for form inputs that provides field-
 
 ### Base Properties
 
-Supports [Base properties](../../tasty/tasty.md)
+Supports [Base properties](../../BaseProperties.md)
 
 ### Styling Properties
 
@@ -63,43 +63,35 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Field Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `name` | `string` | Field name for form data |
-| `label` | `ReactNode` | Field label text |
-| `description` | `ReactNode` | Field description text |
-| `extra` | `ReactNode` | Additional information displayed below help text |
-| `tooltip` | `ReactNode` | Tooltip content for the field label |
-| `message` | `ReactNode` | Error or help message |
-| `defaultValue` | `any` | Default field value |
-| `rules` | `ValidationRule[]` | Validation rules array |
+- **`name`** `string` — Field name for form data
+- **`label`** `ReactNode` — Field label text
+- **`description`** `ReactNode` — Field description text
+- **`extra`** `ReactNode` — Additional information displayed below help text
+- **`tooltip`** `ReactNode` — Tooltip content for the field label
+- **`message`** `ReactNode` — Error or help message
+- **`defaultValue`** `any` — Default field value
+- **`rules`** `ValidationRule[]` — Validation rules array
 
 ### Presentation Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `labelPosition` | `'top' \| 'side'` | Position of the field label |
-| `necessityIndicator` | `'icon' \| 'label'` | Type of necessity indicator |
-| `necessityLabel` | `string` | Custom necessity label text |
-| `labelProps` | `object` | Additional props for the label element |
-| `labelSuffix` | `ReactNode` | Content to display after the label |
+- **`labelPosition`** `'top' | 'side'` — Position of the field label
+- **`necessityIndicator`** `'icon' | 'label'` — Type of necessity indicator
+- **`necessityLabel`** `string` — Custom necessity label text
+- **`labelProps`** `object` — Additional props for the label element
+- **`labelSuffix`** `ReactNode` — Content to display after the label
 
 ### State Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `isRequired` | `boolean` | Whether the field is required |
-| `isDisabled` | `boolean` | Whether the field is disabled |
-| `isLoading` | `boolean` | Whether the field is in loading state |
-| `isHidden` | `boolean` | Whether the field is hidden |
-| `validationState` | `'valid' \| 'invalid'` | Validation state of the field |
+- **`isRequired`** `boolean` — Whether the field is required
+- **`isDisabled`** `boolean` — Whether the field is disabled
+- **`isLoading`** `boolean` — Whether the field is in loading state
+- **`isHidden`** `boolean` — Whether the field is hidden
+- **`validationState`** `'valid' | 'invalid'` — Validation state of the field
 
 ### Advanced Properties
 
-| Property | Type | Description |
-|----------|------|-------------|
-| `form` | `CubeFormInstance` | Form instance (automatically provided within Form) |
-| `children` | `ReactElement \| (form) => ReactElement` | Field content or render function |
+- **`form`** `CubeFormInstance` — Form instance (automatically provided within Form)
+- **`children`** `ReactElement | (form) => ReactElement` — Field content or render function
 
 ## Modern Usage (Recommended)