@cube-dev/ui-kit 0.147.3 → 0.148.0

package/docs/components/form/Field.md

@@ -29,7 +29,9 @@ The Field component is a **legacy wrapper** for form inputs that provides field-
 - **`isDisabled`** `boolean` (default: `false`) — Whether the field is disabled
 - **`isLoading`** `boolean` (default: `false`) — Whether the field is in loading state
 - **`isHidden`** `boolean` (default: `false`) — Whether the field is hidden
-- **`validationState`** `undefined | 'valid' | 'invalid'` — Validation state of the field
+- **`isInvalid`** `boolean` — Whether the field is invalid
+- **`isValid`** `boolean` — Whether the field is valid
+- **`validationState`** `'valid' | 'invalid'` — _(deprecated)_ Use `isInvalid` / `isValid` instead
 - **`styles`** — Style map for the field wrapper
 - **`labelStyles`** — Style map for the field label
 - **`labelProps`** — Additional props for the label element
@@ -94,7 +96,8 @@ These properties allow direct style application without using the `styles` prop:
 - **`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
+- **`isInvalid`** `boolean` — Whether the field is invalid
+- **`isValid`** `boolean` — Whether the field is valid
 
 ### Advanced Properties
 
@@ -181,12 +184,13 @@ function ModernForm() {
 
 ## Creating Custom Input Components
 
-To create your own input component with built-in field support, use `useFieldProps` and `useFormProps`:
+To create your own input component with built-in field support, use `useFieldProps`. It applies the provider
+and form context for you, so it is the only hook you need:
 
 ```jsx
 import { forwardRef, useRef } from 'react';
 import { tasty } from '@tenphi/tasty';
-import { useFieldProps, useFormProps } from '@cube-dev/ui-kit';
+import { useFieldProps } from '@cube-dev/ui-kit';
 
 // Simple styled input wrapper
 const InputElement = tasty({
@@ -213,10 +217,7 @@ const InputElement = tasty({
 });
 
 const CustomTextInput = forwardRef(function CustomTextInput(props, ref) {
-  // Apply form context (inherits form-level properties)
-  props = useFormProps(props);
-
-  // Apply field behavior (validation, form integration, etc.)
+  // Apply field behavior (provider + form context, validation, form integration)
   props = useFieldProps(props, {
     defaultValidationTrigger: 'onBlur',
     valuePropsMapper: ({ value, onChange }) => ({
@@ -233,7 +234,7 @@ const CustomTextInput = forwardRef(function CustomTextInput(props, ref) {
       ref={ref}
       type="text"
       // Add ARIA attributes for accessibility
-      aria-invalid={props.validationState === 'invalid'}
+      aria-invalid={props.isInvalid}
       aria-describedby={props.message ? `${props.id}-message` : undefined}
     />
   );

package/docs/components/form/Form.md

@@ -36,7 +36,9 @@ These properties are inherited by all input components within the form:
 - **`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
+- **`isInvalid`** `boolean` — Invalid state for all fields
+- **`isValid`** `boolean` — Valid state for all fields
+- **`validationState`** `'valid' | 'invalid'` — _(deprecated)_ Use `isInvalid` / `isValid` instead
 - **`validateTrigger`** `'onBlur' | 'onChange' | 'onSubmit'` (default: `onBlur`) — When to trigger validation
 - **`showValid`** `boolean` (default: `false`) — Whether to show valid state indicators
 

package/docs/components/overlays/DialogForm.md

@@ -41,7 +41,9 @@ DialogForm combines [Dialog](./Dialog.md) and [Form](../form/Form.md) functional
 - **`necessityIndicator`** `NecessityIndicator` — The type of necessity indicator
 - **`necessityLabel`** `ReactNode` — Custom necessity label
 - **`isReadOnly`** `boolean` — Whether the form is read only
-- **`validationState`** `ValidationState` — The validation state of the form
+- **`isInvalid`** `boolean` — Invalid state for all fields in the form
+- **`isValid`** `boolean` — Valid state for all fields in the form
+- **`validationState`** `'valid' | 'invalid'` — _(deprecated)_ Use `isInvalid` / `isValid` instead
 - **`validateTrigger`** `ValidateTrigger` — On which event to perform validation
 - **`showValid`** `boolean` — Whether to show valid state
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.147.3",
+  "version": "0.148.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.d.ts

@@ -1,12 +0,0 @@
-
-import { CubeFieldWrapperProps } from "./types.js";
-
-//#region src/components/form/FieldWrapper/extract-field-wrapper-props.d.ts
-type WrapperProps<Props extends CubeFieldWrapperProps> = { [K in keyof Pick<Props, keyof CubeFieldWrapperProps>]: CubeFieldWrapperProps[K] };
-declare function extractFieldWrapperProps<Props extends CubeFieldWrapperProps, FieldWrapperKeys extends keyof CubeFieldWrapperProps = keyof CubeFieldWrapperProps, ActualWrapperProps extends WrapperProps<Props> = WrapperProps<Props>, RestProps extends Omit<Props, FieldWrapperKeys> = Omit<Props, FieldWrapperKeys>>(props: Props): Readonly<{
-  fieldWrapperProps: ActualWrapperProps;
-  rest: RestProps;
-}>;
-//#endregion
-export { extractFieldWrapperProps };
-//# sourceMappingURL=extract-field-wrapper-props.d.ts.map

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js

@@ -1,41 +0,0 @@
-/** @license MIT | @cube-dev/ui-kit v0.147.3 | Cube Dev Team */
-//#region src/components/form/FieldWrapper/extract-field-wrapper-props.ts
-const createFieldWrapperPropsKeys = (arr) => new Set(arr);
-const fieldWrapperPropsKeys = createFieldWrapperPropsKeys([
-	"as",
-	"validationState",
-	"styles",
-	"isRequired",
-	"isDisabled",
-	"fieldProps",
-	"isHidden",
-	"label",
-	"labelPosition",
-	"labelSuffix",
-	"labelStyles",
-	"labelProps",
-	"description",
-	"requiredMark",
-	"tooltip",
-	"extra",
-	"necessityLabel",
-	"necessityIndicator",
-	"message",
-	"messageStyles",
-	"errorMessage",
-	"Component"
-]);
-function extractFieldWrapperProps(props) {
-	const fieldWrapperProps = {};
-	const rest = {};
-	for (const [key, prop] of Object.entries(props)) if (fieldWrapperPropsKeys.has(key)) fieldWrapperProps[key] = prop;
-	else rest[key] = prop;
-	return {
-		fieldWrapperProps,
-		rest
-	};
-}
-
-//#endregion
-export { extractFieldWrapperProps };
-//# sourceMappingURL=extract-field-wrapper-props.js.map

package/dist/components/form/FieldWrapper/extract-field-wrapper-props.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"extract-field-wrapper-props.js","names":[],"sources":["../../../../src/components/form/FieldWrapper/extract-field-wrapper-props.ts"],"sourcesContent":["import { CubeFieldWrapperProps } from './types';\n\nconst createFieldWrapperPropsKeys = <\n  PropKeys = (keyof CubeFieldWrapperProps)[],\n>(\n  arr: PropKeys,\n): Set<string> => new Set(arr as unknown as string[]);\n\nconst fieldWrapperPropsKeys = createFieldWrapperPropsKeys([\n  'as',\n  'validationState',\n  'styles',\n  'isRequired',\n  'isDisabled',\n  'fieldProps',\n  'isHidden',\n  'label',\n  'labelPosition',\n  'labelSuffix',\n  'labelStyles',\n  'labelProps',\n  'description',\n  'requiredMark',\n  'tooltip',\n  'extra',\n  'necessityLabel',\n  'necessityIndicator',\n  'message',\n  'messageStyles',\n  'errorMessage',\n  'Component',\n]);\n\ntype WrapperProps<Props extends CubeFieldWrapperProps> = {\n  [K in keyof Pick<\n    Props,\n    keyof CubeFieldWrapperProps\n  >]: CubeFieldWrapperProps[K];\n};\n\nexport function extractFieldWrapperProps<\n  Props extends CubeFieldWrapperProps,\n  FieldWrapperKeys extends\n    keyof CubeFieldWrapperProps = keyof CubeFieldWrapperProps,\n  ActualWrapperProps extends WrapperProps<Props> = WrapperProps<Props>,\n  RestProps extends Omit<Props, FieldWrapperKeys> = Omit<\n    Props,\n    FieldWrapperKeys\n  >,\n>(\n  props: Props,\n): Readonly<{ fieldWrapperProps: ActualWrapperProps; rest: RestProps }> {\n  const fieldWrapperProps = {} as ActualWrapperProps;\n  const rest = {} as RestProps;\n\n  for (const [key, prop] of Object.entries(props)) {\n    if (fieldWrapperPropsKeys.has(key)) {\n      fieldWrapperProps[key] = prop;\n    } else {\n      rest[key] = prop;\n    }\n  }\n\n  return { fieldWrapperProps, rest } as const;\n}\n"],"mappings":";;AAEA,MAAM,+BAGJ,QACgB,IAAI,IAAI,IAA2B;AAErD,MAAM,wBAAwB,4BAA4B;CACxD;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACD,CAAC;AASF,SAAgB,yBAUd,OACsE;CACtE,MAAM,oBAAoB,EAAE;CAC5B,MAAM,OAAO,EAAE;AAEf,MAAK,MAAM,CAAC,KAAK,SAAS,OAAO,QAAQ,MAAM,CAC7C,KAAI,sBAAsB,IAAI,IAAI,CAChC,mBAAkB,OAAO;KAEzB,MAAK,OAAO;AAIhB,QAAO;EAAE;EAAmB;EAAM"}