@cube-dev/ui-kit 0.147.3 → 0.148.0

package/dist/tokens/palette.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { glaze } from "@tenphi/glaze";
 
 //#region src/tokens/palette.ts

package/dist/tokens/shadows.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/tokens/shadows.ts
 /**
 * Shadow tokens using tasty shorthand syntax.

package/dist/tokens/sizes.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/tokens/sizes.ts
 /**
 * Component size values in pixels.

package/dist/tokens/spacing.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/tokens/spacing.ts
 /**
 * Spacing tokens using tasty multiplier syntax.

package/dist/tokens/typography.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/tokens/typography.ts
 /**
 * Typography presets for headings, text, and special styles.

package/dist/utils/ResizeSensor.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/ResizeSensor.ts
 /**
 * Iterate over each of the provided element(s).

package/dist/utils/is-dev-env.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/is-dev-env.ts
 function isDevEnv() {
 	if (typeof window !== "undefined" && window.localStorage) try {

package/dist/utils/modules.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/modules.ts
 function extractModule(promise) {
 	return promise.then((module) => module.default || module);

package/dist/utils/promise.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/promise.ts
 function timeout(ms = 30) {
 	return new Promise((resolve) => {

package/dist/utils/raf.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/raf.ts
 /**
 * Chains N requestAnimationFrame calls and returns a cancel function.

package/dist/utils/random.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/random.ts
 function random(min, max) {
 	const realMin = min < max ? min : max;

package/dist/utils/range.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/range.ts
 function range(count) {
 	return Array.from({ length: count }, (_, i) => i);

package/dist/utils/react/RenderCache.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useRef } from "react";
 import { Fragment as Fragment$1, jsx } from "react/jsx-runtime";
 

package/dist/utils/react/Slots.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeProps } from "./mergeProps.js";
 import { Children, cloneElement, createContext, useContext, useMemo } from "react";
 import { jsx } from "react/jsx-runtime";

package/dist/utils/react/chain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/chain.ts
 /**
 * Calls all functions in the order they were chained with the same arguments.

package/dist/utils/react/forwardRefWithGenerics.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/forwardRefWithGenerics.tsx
 /**
 * A helper for creating forwardRef components with generic types.

package/dist/utils/react/index.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { forwardRefWithGenerics } from "./forwardRefWithGenerics.js";
 import { isTextOnly } from "./isTextOnly.js";

package/dist/utils/react/interactions.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useState } from "react";
 import { useFocus, useFocusVisible } from "react-aria";
 

package/dist/utils/react/isTextOnly.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { Children, isValidElement } from "react";
 
 //#region src/utils/react/isTextOnly.ts

package/dist/utils/react/mapProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/mapProps.ts
 /** Converts AriaButtonProps to CubeButtonProps */
 function ariaToCubeButtonProps(props) {

package/dist/utils/react/mergeProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { chain } from "./chain.js";
 import { mergeIds } from "./useId.js";
 import { mergeStyles } from "@tenphi/tasty";

package/dist/utils/react/nullableValue.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/nullableValue.ts
 function castNullableStringValue(props) {
 	return castNullableField(props, ["value", "defaultValue"], "string", (v) => String(v));

package/dist/utils/react/resolveIcon.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/resolveIcon.ts
 /**
 * Resolves a dynamic icon prop to its content and slot state.

package/dist/utils/react/sharedStore.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useSyncExternalStore } from "react";
 

package/dist/utils/react/useCombinedRefs.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEffect, useRef } from "react";
 
 //#region src/utils/react/useCombinedRefs.ts

package/dist/utils/react/useControlledFocusVisible.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { createSharedStore } from "./sharedStore.js";
 import { useEffect } from "react";
 import { useFocusVisible } from "react-aria";

package/dist/utils/react/useEventBus.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef } from "react";
 
 //#region src/utils/react/useEventBus.ts

package/dist/utils/react/useId.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useLayoutEffect as useLayoutEffect$1 } from "./useLayoutEffect.js";
 import { useEffect, useRef, useState } from "react";
 import { useSSRSafeId } from "@react-aria/ssr";

package/dist/utils/react/useIsDarwin.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useIsDarwin.ts

package/dist/utils/react/useKeySymbols.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useIsDarwin } from "./useIsDarwin.js";
 import { useMemo } from "react";
 

package/dist/utils/react/useLayoutEffect.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import * as React$1 from "react";
 
 //#region src/utils/react/useLayoutEffect.tsx

package/dist/utils/react/useLocalStorage.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEvent } from "../../_internal/hooks/use-event.js";
 import { useCallback, useSyncExternalStore } from "react";
 

package/dist/utils/react/useMergeStyles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { mergeStyles } from "@tenphi/tasty";
 import { useMemo } from "react";
 

package/dist/utils/react/usePopoverSync.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { EventBusContext, useEventBus } from "./useEventBus.js";
 import { useCallback, useContext, useEffect, useRef } from "react";
 

package/dist/utils/react/useQaProps.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/react/useQaProps.ts
 /**
 * Processes QA props.

package/dist/utils/react/useViewportSize.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { useEffect, useState } from "react";
 
 //#region src/utils/react/useViewportSize.ts

package/dist/utils/react/wrapNodeIfPlain.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 import { isValidElement } from "react";
 import { isFragment } from "react-is";
 

package/dist/utils/selection.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/selection.ts
 /**
 * Deduplicate/toggle keys in a selection: if a key appears twice it is

package/dist/utils/styles.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/styles.ts
 /**
 * Split properties into style and non-style properties.

package/dist/utils/tree.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/tree.ts
 function toFlatTree(tree, includingFolders) {
 	return tree.reduce((result, node) => {

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {
 	disabled: "isDisabled",

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.148.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.147.3";
+const VERSION = "0.148.0";
 const TASTY_VERSION = "2.8.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/FieldProperties.md

@@ -7,7 +7,7 @@ When used inside a [Form](./components/form/Form.md), these properties are autom
 ## Identity & Form Integration
 
 - **`name`** `string` — Field name for form data binding. Required when used within a Form.
-- **`form`** `CubeFormInstance` — Form instance. Automatically provided when inside a Form context.
+- **`form`** `CubeFormInstance` — Form instance. Automatically provided when inside a Form context. Pass it explicitly to link an input to a form it is not nested in, or to override the surrounding form.
 - **`defaultValue`** `any` — Default value for the field in uncontrolled mode.
 - **`id`** `string` — Unique ID for the field element.
 - **`idPrefix`** `string` — ID prefix to avoid collisions between multiple forms.
@@ -35,7 +35,9 @@ When used inside a [Form](./components/form/Form.md), these properties are autom
 - **`isReadOnly`** `boolean` (default: `false`) — Whether the field can be focused but not changed.
 - **`isLoading`** `boolean` (default: `false`) — Whether to show a loading spinner and disable interactions.
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden.
-- **`validationState`** `'valid' | 'invalid'` — Visual validation state of the field.
+- **`isInvalid`** `boolean` (default: `false`) — Whether the field displays its invalid visual styling. Takes precedence over `isValid`.
+- **`isValid`** `boolean` (default: `false`) — Whether the field displays its valid visual styling.
+- **`validationState`** `'valid' | 'invalid'` — _(deprecated)_ Use `isInvalid` / `isValid` instead.
 - **`autoFocus`** `boolean` (default: `false`) — Whether the field should receive focus on render.
 
 ## Validation

package/docs/Introduction.md

@@ -93,7 +93,7 @@ All input components work seamlessly with the Form component:
 
 - **Built-in Field Support** - No wrapper components needed
 - **Automatic Validation** - Validation rules and error display
-- **Form-level Configuration** - Inherit settings like `labelPosition` and `validationState`
+- **Form-level Configuration** - Inherit settings like `labelPosition` and `isReadOnly`
 - **Programmatic Control** - Use `Form.useForm()` for advanced form management
 
 ### Component Architecture

package/docs/components/fields/Checkbox.md

@@ -103,7 +103,7 @@ The `mods` property accepts the following modifiers you can override:
 ### With Validation
 
 ```jsx
-<Checkbox validationState="invalid" isRequired>
+<Checkbox isInvalid isRequired>
   Must accept to continue
 </Checkbox>
 ```

package/docs/components/fields/CommandTextArea.md

@@ -75,7 +75,7 @@ Supports [Base properties](../../BaseProperties.md).
 ### Field Properties
 
 Supports all [Field properties](../../FieldProperties.md)
-(`label`, `name`, `isRequired`, `isDisabled`, `isReadOnly`, `validationState`,
+(`label`, `name`, `isRequired`, `isDisabled`, `isReadOnly`, `isInvalid`,
 `description`, `rules`, etc.).
 
 ### Styling Properties

package/docs/components/fields/DatePicker.md

@@ -146,7 +146,7 @@ The `mods` property accepts the following modifiers you can override:
 <DatePicker
   label="Required date"
   isRequired
-  validationState="invalid"
+  isInvalid
   errorMessage="Please select a date"
 />
 ```

package/docs/components/fields/FileInput.md

@@ -88,11 +88,13 @@ The `mods` property accepts the following modifiers you can override:
 
 ### With Validation
 
+Pass `isValid` or `isInvalid` to tint the border and show the matching state icon.
+
 ```jsx
 <FileInput
   label="Required document"
   isRequired
-  validationState="invalid"
+  isInvalid
   errorMessage="Please select a file"
 />
 ```

package/docs/components/fields/FilterListBox.md

@@ -138,8 +138,8 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-- `invalid` `boolean` — Applied when `validationState="invalid"`
-- `valid` `boolean` — Applied when `validationState="valid"`
+- `invalid` `boolean` — Applied when `isInvalid` is set
+- `valid` `boolean` — Applied when `isValid` is set
 - `disabled` `boolean` — Applied when `isDisabled={true}`
 - `focused` `boolean` — Applied when the FilterListBox has focus
 - `loading` `boolean` — Applied when `isLoading={true}`

package/docs/components/fields/ListBox.md

@@ -111,8 +111,8 @@ These properties allow direct style application without using the `styles` prop:
 
 The `mods` property accepts the following modifiers you can override:
 
-- **`invalid`** `boolean` — Applied when `validationState="invalid"`
-- **`valid`** `boolean` — Applied when `validationState="valid"`
+- **`invalid`** `boolean` — Applied when `isInvalid` is set
+- **`valid`** `boolean` — Applied when `isValid` is set
 - **`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}`

package/docs/components/fields/NumberInput.md

@@ -123,7 +123,7 @@ The `mods` prop accepts the following modifiers you can override:
 ```jsx
 <NumberInput
   label="Price"
-  validationState="invalid"
+  isInvalid
   errorMessage="Price must be positive"
 />
 ```
@@ -150,7 +150,7 @@ The `mods` prop accepts the following modifiers you can override:
 
 - `aria-label`, `aria-labelledby` – Accessible name for the input
 - `aria-describedby` – Links to description and error messages
-- `aria-invalid` – Managed automatically based on `validationState`
+- `aria-invalid` – Managed automatically based on `isInvalid`
 - `aria-required` – Set when `isRequired` is true
 - Additional ARIA attributes supported by React Aria's `useNumberField`
 
@@ -168,7 +168,7 @@ The `mods` prop accepts the following modifiers you can override:
    ```
 
 3. **Accessibility**: Always provide proper labels for screen readers
-4. **Validation**: Use `validationState` and `message` for user feedback
+4. **Validation**: Use `isInvalid` / `isValid` and `errorMessage` for user feedback
 5. **Performance**: Use `defaultValue` for uncontrolled inputs when possible
 
 ## Integration with Forms

package/docs/components/fields/PasswordInput.md

@@ -112,7 +112,7 @@ The `mods` property accepts the following modifiers you can override:
 <PasswordInput
   label="New Password"
   isRequired
-  validationState="invalid"
+  isInvalid
   errorMessage="Password must be at least 8 characters"
 />
 ```
@@ -189,7 +189,8 @@ The `mods` property accepts the following modifiers you can override:
    <PasswordInput
      label="New Password"
      description="8+ characters, including numbers and symbols"
-     validationState={isValid ? "valid" : "invalid"}
+     isValid={isValid}
+     isInvalid={!isValid}
    />
    ```
 

package/docs/components/fields/Picker.md

@@ -305,7 +305,7 @@ The trigger button supports various visual styles via the `type` prop:
 Control the color scheme with the `theme` prop:
 
 - **`default`** — Standard theme (default)
-- **`danger`** — Red/destructive color (also applied automatically when `validationState="invalid"`)
+- **`danger`** — Red/destructive color (also applied automatically when `isInvalid` is set)
 
 ### Sizes
 
@@ -515,7 +515,7 @@ Display validation states and error messages.
   placeholder="Select a fruit"
   selectionMode="single"
   isRequired
-  validationState="invalid"
+  isInvalid
   message="Please select a fruit"
 >
   <Picker.Item key="apple">Apple</Picker.Item>
@@ -598,10 +598,10 @@ The following ARIA attributes are automatically managed by React Aria and do not
    >...</Picker>
    ```
 
-4. **Handle validation properly**: Use `validationState` and `message` props
+4. **Handle validation properly**: Use the `isInvalid` / `isValid` and `errorMessage` props
    ```jsx
    <Picker 
-     validationState="invalid"
+     isInvalid
      message="Please select an option"
    >...</Picker>
    ```
@@ -767,7 +767,7 @@ function MyForm() {
 - **`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
+- **`isInvalid`** / **`isValid`** — Manual validation state control
 - **`message`** — Error or help message
 
 ## Advanced Features

package/docs/components/fields/SearchInput.md

@@ -1,6 +1,6 @@
 # SearchInput
 
-A search input provides a specialized text field for search functionality, featuring a search icon and optional clear button. It's optimized for search queries and includes built-in state management for search field behavior.
+A search input provides a specialized text field for search functionality, featuring a search icon and optional clear button. It's optimized for search queries and includes built-in state management for search field behavior. SearchInput does not represent a persistent value and cannot be connected to a form.
 
 ## When to Use
 
@@ -40,7 +40,7 @@ Supports [Base properties](../../BaseProperties.md)
 
 ### Field Properties
 
-Supports all [Field properties](../../FieldProperties.md)
+Supports the layout-related [Field properties](../../FieldProperties.md) (`label`, `description`, `message`, `labelPosition`, etc.). Note that SearchInput is not form-connected: it does not accept `name`/`rules` and does not participate in form state or validation.
 
 ### Styling Properties
 
@@ -147,7 +147,7 @@ const [searchValue, setSearchValue] = useState('');
 ```jsx
 <SearchInput
   label="Search Query"
-  validationState="invalid"
+  isInvalid
   errorMessage="Search query too short"
   placeholder="Enter at least 3 characters"
 />
@@ -217,7 +217,8 @@ const [searchValue, setSearchValue] = useState('');
 
 ## Integration with Forms
 
-This component supports all [Field properties](../../FieldProperties.md) when used within a Form.
+SearchInput is not a form field. Use [TextInput](./TextInput.md) when the typed text has to be
+captured as a form value.
 
 ## Suggested Improvements
 

package/docs/components/fields/Select.md

@@ -290,7 +290,7 @@ Groups related options together with an optional heading.
 <Select
   label="Validated field"
   selectedKey="yes"
-  validationState="valid"
+  isValid
 >
   <Select.Item key="yes">Yes</Select.Item>
   <Select.Item key="no">No</Select.Item>
@@ -299,7 +299,7 @@ Groups related options together with an optional heading.
 {/* Invalid state */}
 <Select
   label="Required field"
-  validationState="invalid"
+  isInvalid
   errorMessage="Please select an option"
 >
   <Select.Item key="yes">Yes</Select.Item>
@@ -521,7 +521,7 @@ const groups = [
    ```jsx
    <Select
      isRequired
-     validationState="invalid"
+     isInvalid
      errorMessage="Please select a shipping method"
      label="Shipping"
    >

package/docs/components/fields/Slider.md

@@ -22,6 +22,10 @@ These properties allow direct style application without using the `styles` prop:
 
 ### Vertical Orientation
 
+### Validation States
+
+Pass `isValid` or `isInvalid` to tint the track fill and the thumb.
+
 ### Disabled State
 
 ## Properties

package/docs/components/fields/TextInput.md

@@ -150,7 +150,7 @@ import { IconMail } from '@tabler/icons-react';
 <TextInput
   label="Username"
   isRequired
-  validationState="invalid"
+  isInvalid
   message="Username must be at least 3 characters"
 />
 ```
@@ -174,7 +174,7 @@ import { IconMail } from '@tabler/icons-react';
 
 - `aria-label`, `aria-labelledby` – Accessible name for the input
 - `aria-describedby` – Links to description and error messages
-- `aria-invalid` – Managed automatically based on `validationState`
+- `aria-invalid` – Managed automatically based on `isInvalid`
 - `aria-required` – Set when `isRequired` is true
 - Additional ARIA attributes supported by React Aria's `useTextField`
 
@@ -192,7 +192,7 @@ import { IconMail } from '@tabler/icons-react';
    ```
 
 3. **Accessibility**: Always provide proper labels for screen readers
-4. **Validation**: Use `validationState` and `message` for user feedback
+4. **Validation**: Use `isInvalid` / `isValid` and `errorMessage` for user feedback
 5. **Performance**: Use `defaultValue` for uncontrolled inputs when possible
 
 ## Integration with Forms

package/docs/components/fields/TextInputMapper.md

@@ -22,6 +22,11 @@ Supports [Base properties](../../BaseProperties.md)
 
 Supports all [Field properties](../../FieldProperties.md)
 
+## Validation States
+
+`isValid` and `isInvalid` are forwarded to every key and value input, so the whole mapping list picks up
+the state.
+
 ## 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.