@cube-dev/ui-kit 0.178.0 → 0.180.0

package/dist/components/fields/TriggerActions.js.map

@@ -1 +1 @@
-{"version":3,"file":"TriggerActions.js","names":[],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ClearPressResponder } from '@react-aria/interactions';\nimport { tasty } from '@tenphi/tasty';\n\nimport { ItemActionProvider } from '../actions/ItemActionContext';\n\nimport type { KeyboardEvent, MouseEvent, PointerEvent, ReactNode } from 'react';\n\n/*\n * Why this file exists rather than `ItemButton`'s `actions` slot, which is the\n * kit's purpose-built home for exactly this: that slot renders its run as an\n * absolutely positioned SIBLING of the button, so a row action cannot activate\n * the row. A picker's built-ins have to be rightmost, so putting custom actions\n * to their left means the caret joins that run — and a caret outside the button\n * stops opening the popover, `pointer-events: none` included (the hit just\n * lands on the actions container, which is outside the button too). `Select` is\n * a second blocker: it builds its trigger from `Item as=\"button\"`, not\n * `ItemButton`.\n *\n * Migrating the three triggers properly is tracked in\n * https://github.com/cube-js/cube-ui-kit/issues/1398, which carries the\n * measurements — a migrated `Picker` is pixel-identical to this one — and the\n * `Item` changes it needs. Until then the run is built here.\n */\n\n/**\n * `Item`'s own `Actions` slot stops these so a press on an action never reaches\n * the row behind it. The custom actions of a picker trigger sit in the `suffix`\n * slot instead — left of the built-in clear button and caret, which live in\n * `rightIcon` — so they have to repeat the guard themselves. See\n * `ACTIONS_EVENT_HANDLERS` in `Item`.\n */\nconst STOP_PROPAGATION_HANDLERS = {\n  onClick: (e: MouseEvent) => e.stopPropagation(),\n  onPointerDown: (e: PointerEvent) => e.stopPropagation(),\n  onPointerUp: (e: PointerEvent) => e.stopPropagation(),\n  onMouseDown: (e: MouseEvent) => e.stopPropagation(),\n  onMouseUp: (e: MouseEvent) => e.stopPropagation(),\n  onKeyDown: (e: KeyboardEvent) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.stopPropagation();\n    }\n  },\n};\n\nconst TriggerActionsElement = tasty({\n  qa: 'TriggerActions',\n  styles: {\n    display: 'grid',\n    flow: 'column',\n    placeItems: 'center',\n    placeContent: 'center',\n    // What separates two adjacent actions everywhere else in the kit — see\n    // `ItemButton`'s `ActionsWrapper` and `Item`'s own `Actions` slot.\n    gap: '1bw',\n\n    // The built-in clear button / caret is NOT a sibling in this run: it lives\n    // in the `RightIcon` slot, a `($size - 2bw)` square that centres a\n    // `$action-size` control and so already puts `$side-padding` to its left.\n    // Left alone that reads as a much wider gap before the built-in than\n    // between two custom actions (`.5x` vs `1bw` at `medium`). Pull the run\n    // right by the difference so the whole trailing cluster is evenly spaced,\n    // and `$side-padding` survives only where it belongs — at the outer edge,\n    // between the built-in and the trigger's border.\n    //\n    // This assumes the `RightIcon` slot is occupied, which it is for every\n    // trigger state (loading, clear, caret). A caller who empties it with\n    // `rightIcon={null}` gets the run sitting `$side-padding - 1bw` closer to\n    // the border, inside the padding `Suffix` regains when `has-right-icon`\n    // goes away.\n    margin: '0 (1bw - $side-padding) 0 0',\n\n    // `$size` is inherited from the trigger; these two are re-derived from it\n    // the same way `Item`'s `Actions` slot does, because `ItemAction` defines\n    // them on itself and a parent cannot read a child's custom property.\n    '$action-size': 'min(max((2x + 2bw), ($size - 1x - 2bw)), (3x - 2bw))',\n    '$side-padding': '(($size - $action-size - 2bw) / 2)',\n  },\n});\n\nexport interface TriggerActionsProps {\n  /** The actions to render. */\n  children: ReactNode;\n  /** The `type` the host trigger is painted with. */\n  type?: string;\n  /**\n   * The theme the host trigger is PAINTED with, which is not always its `theme`\n   * prop — a validation state overrides it. Actions default to the `current`\n   * theme and read this only to know which surface they sit on.\n   */\n  theme?: string;\n  /** Whether the host trigger is disabled (or loading, which reads as disabled). */\n  isDisabled?: boolean;\n}\n\n/**\n * Custom actions rendered inside a `Select` / `Picker` / `FilterPicker` trigger,\n * to the left of the built-in clear button and dropdown caret.\n *\n * `ClearPressResponder` is the point of this wrapper. These triggers open their\n * popover through a `PressResponder` that `DialogTrigger` puts in context, and\n * that context reaches *every* `usePress` below it — so without this, pressing a\n * custom action (or the built-in clear button) would also toggle the popover.\n */\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { children, type, theme, isDisabled } = props;\n\n  return (\n    <ClearPressResponder>\n      <TriggerActionsElement\n        data-element=\"TriggerActions\"\n        data-trigger-action=\"\"\n        {...STOP_PROPAGATION_HANDLERS}\n      >\n        <ItemActionProvider type={type} theme={theme} isDisabled={isDisabled}>\n          {children}\n        </ItemActionProvider>\n      </TriggerActionsElement>\n    </ClearPressResponder>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;AA+BA,MAAM,4BAA4B;CAChC,UAAU,MAAkB,EAAE,iBAAiB;CAC/C,gBAAgB,MAAoB,EAAE,iBAAiB;CACvD,cAAc,MAAoB,EAAE,iBAAiB;CACrD,cAAc,MAAkB,EAAE,iBAAiB;CACnD,YAAY,MAAkB,EAAE,iBAAiB;CACjD,YAAY,MAAqB;AAC/B,MAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,IACjC,GAAE,iBAAiB;;CAGxB;AAED,MAAM,wBAAwB,MAAM;CAClC,IAAI;CACJ,QAAQ;EACN,SAAS;EACT,MAAM;EACN,YAAY;EACZ,cAAc;EAGd,KAAK;EAgBL,QAAQ;EAKR,gBAAgB;EAChB,iBAAiB;EAClB;CACF,CAAC;;;;;;;;;;AA0BF,SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,UAAU,MAAM,OAAO,eAAe;AAE9C,QACE,oBAAC,iCACC,oBAAC;EACC,gBAAa;EACb,uBAAoB;EACpB,GAAI;YAEJ,oBAAC;GAAyB;GAAa;GAAmB;GACvD;IACkB;GACC,GACJ"}
+{"version":3,"file":"TriggerActions.js","names":[],"sources":["../../../src/components/fields/TriggerActions.tsx"],"sourcesContent":["import { ItemActionIcon } from '../actions/ItemActionsWrapper';\n\nimport type { ReactNode } from 'react';\n\n/**\n * The trailing run of a `Select` / `Picker` / `FilterPicker` trigger: the\n * caller's custom `actions`, then the built-in control — a loading spinner, the\n * clear button, or the dropdown caret.\n *\n * It renders into `ItemActionsWrapper`'s run, which lies over the trigger's\n * trailing end as a SIBLING of the `<button>` rather than inside it. That is\n * what keeps the clear button from being a `<button>` nested in a `<button>`,\n * and it is why the caret is an `ItemActionIcon`: the run is transparent to the\n * pointer except where a child opts in, so a press on the caret lands on the\n * trigger underneath and opens the popover exactly as it did when the caret\n * lived in the `rightIcon` slot.\n *\n * The run isolates its children's presses from the trigger and identifies them\n * to the overlay as the trigger's own — both in `ItemActionsWrapper`, so every\n * row that has actions gets them and not only these three.\n */\nexport interface TriggerActionsProps {\n  /** The caller's custom actions. They come first — leftmost in LTR. */\n  actions?: ReactNode;\n  /** The built-in control: spinner, clear button, or caret. */\n  builtIn?: ReactNode;\n}\n\nexport function TriggerActions(props: TriggerActionsProps) {\n  const { actions, builtIn } = props;\n\n  return (\n    <>\n      {actions}\n      {builtIn}\n    </>\n  );\n}\n\nexport { ItemActionIcon as TriggerIcon };\n"],"mappings":";;;;;AA4BA,SAAgB,eAAe,OAA4B;CACzD,MAAM,EAAE,SAAS,YAAY;AAE7B,QACE,4CACG,SACA,WACA"}

package/dist/components/fields/color/ColorPanel.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useEvent } from "../../../_internal/hooks/use-event.js";
 import { formatColor, getContrastingColor, toHex } from "./color.js";
 import { CHANNELS, COLOR_SPACES, COLOR_SPACE_HINTS, COLOR_SPACE_LABELS } from "./channels.js";

package/dist/components/fields/color/channels.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { maxChroma, normalizeHue, oklchToOkhsl } from "../../../utils/colors.js";
 import { fromOkhst, fromRgb, isAchromatic, toHex, toOkhst, toOklch, toRgb } from "./color.js";
 

package/dist/components/fields/color/color.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { anyNaN, clamp, maxChroma, normalizeHue, oklchToOkhsl, parseColorFunction, readComponent, readHue, rgbFromSrgb } from "../../../utils/colors.js";
 import { contrastRatioFromLuminance, formatHsl, formatOkhsl, formatOkhst, formatOklch, formatRgb, hslToSrgb, okhslToLinearSrgb, okhslToOkhst, okhslToOklch, okhslToSrgb, okhstToOkhsl, parseHexAlpha, relativeLuminanceFromLinearRgb, srgbToHex, srgbToOkhsl } from "@tenphi/glaze";
 

package/dist/components/fields/color/context.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { createContext, useContext } from "react";
 
 //#region src/components/fields/color/context.ts

package/dist/components/form/FieldWrapper/FieldWrapper.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { wrapNodeIfPlain } from "../../../utils/react/wrapNodeIfPlain.js";
 import { isDevEnv } from "../../../utils/is-dev-env.js";

package/dist/components/form/Form/Field.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps } from "../../../utils/react/mergeProps.js";
 import { warn } from "../../../utils/warnings.js";
 import { useValidationProps } from "../validation/use-validation-props.js";

package/dist/components/form/Form/Form.d.ts

@@ -3,12 +3,48 @@ import { FormBaseProps } from "../../../shared/form.js";
 import "../../../shared/index.js";
 import { FieldTypes } from "./types.js";
 import { CubeFormData, CubeFormInstance } from "./use-form.js";
+import { ModernFormProps } from "./ModernFormRoot.js";
 import { BaseProps, ContainerStyleProps, Styles } from "@tenphi/tasty";
 import * as react from "react";
-import { FormHTMLAttributes, ReactElement, Ref } from "react";
+import { ContextType, FormHTMLAttributes, ReactElement, ReactNode, Ref } from "react";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/form/Form/Form.d.ts
+/**
+ * Public legacy context. Its value is the full legacy scope (presentation
+ * props, the instance, `submitError`, `idPrefix`) and is part of the exported
+ * contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.
+ */
 declare const FormContext: react.Context<{}>;
+/**
+ * Scope the inputs below to a new form context. Radio/Checkbox groups use it
+ * for their options: they see the group's validation state, but neither the
+ * surrounding form's presentation props nor its instance, so a nested `name`
+ * never registers as an independent field. Wrappers that used to override
+ * `FormContext` directly for the same purpose should render this instead — a
+ * bare `FormContext.Provider` no longer masks the presentation context.
+ */
+declare function FormScopeMask({
+  value,
+  children
+}: {
+  value: ContextType<typeof FormContext>;
+  children?: ReactNode;
+}): react_jsx_runtime0.JSX.Element;
+/** Separate overloads retain contextual callback typing for each backend. */
+interface FormRootComponent {
+  <T extends FieldTypes = FieldTypes>(props: CubeFormProps<T> & {
+    ref?: Ref<HTMLFormElement>;
+  }): ReactElement;
+  <T extends FieldTypes = FieldTypes>(props: ModernFormProps<T> & {
+    ref?: Ref<HTMLFormElement>;
+  }): ReactElement;
+}
+/**
+ * Merge order: presentation context, then the legacy `FormContext`, then the
+ * props. Under a legacy root the two contexts carry the same presentation
+ * values, so the result is exactly `{ ...FormContext, ...props }` as before.
+ */
 declare function useFormProps(props: any): any;
 interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps, BaseProps, ContainerStyleProps, Pick<FormHTMLAttributes<HTMLFormElement>, 'action' | 'autoComplete' | 'encType' | 'method' | 'target'> {
   /** Form name */
@@ -28,5 +64,5 @@ interface CubeFormProps<T extends FieldTypes = FieldTypes> extends FormBaseProps
   orientation?: 'vertical' | 'horizontal';
 }
 //#endregion
-export { CubeFormProps, FormContext, useFormProps };
+export { CubeFormProps, FormContext, FormRootComponent, FormScopeMask, useFormProps };
 //# sourceMappingURL=Form.d.ts.map

package/dist/components/form/Form/Form.js

@@ -1,9 +1,12 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { extractStyles } from "../../../utils/styles.js";
 import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
 import { Provider, useProviderProps } from "../../../provider.js";
 import { useValidationProps } from "../validation/use-validation-props.js";
 import { timeout } from "../../../utils/promise.js";
+import { isModernFormController } from "./backend.js";
+import { ModernControllerContext } from "./modern/context.js";
+import { _ModernFormRoot } from "./ModernFormRoot.js";
 import { useForm } from "./use-form.js";
 import { CONTAINER_STYLES, filterBaseProps, tasty } from "@tenphi/tasty";
 import { createContext, forwardRef, useContext, useRef } from "react";
@@ -11,7 +14,34 @@ import { jsx } from "react/jsx-runtime";
 import { useObjectRef } from "@react-aria/utils";
 
 //#region src/components/form/Form/Form.tsx
+/**
+* Public legacy context. Its value is the full legacy scope (presentation
+* props, the instance, `submitError`, `idPrefix`) and is part of the exported
+* contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.
+*/
 const FormContext = createContext({});
+const EMPTY_PRESENTATION = {};
+const FormPresentationContext = createContext(EMPTY_PRESENTATION);
+/**
+* Scope the inputs below to a new form context. Radio/Checkbox groups use it
+* for their options: they see the group's validation state, but neither the
+* surrounding form's presentation props nor its instance, so a nested `name`
+* never registers as an independent field. Wrappers that used to override
+* `FormContext` directly for the same purpose should render this instead — a
+* bare `FormContext.Provider` no longer masks the presentation context.
+*/
+function FormScopeMask({ value, children }) {
+	return /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+		value: null,
+		children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+			value: EMPTY_PRESENTATION,
+			children: /* @__PURE__ */ jsx(FormContext.Provider, {
+				value,
+				children
+			})
+		})
+	});
+}
 const FormElement = tasty({
 	as: "form",
 	qa: "Form",
@@ -32,9 +62,19 @@ const FormElement = tasty({
 		"$label-width": "25x"
 	}
 });
+/**
+* Merge order: presentation context, then the legacy `FormContext`, then the
+* props. Under a legacy root the two contexts carry the same presentation
+* values, so the result is exactly `{ ...FormContext, ...props }` as before.
+*/
 function useFormProps(props) {
+	const presentation = useContext(FormPresentationContext);
+	const ctx = useContext(FormContext);
+	const modern = useContext(ModernControllerContext);
 	return {
-		...useContext(FormContext),
+		...presentation,
+		...modern ? { form: modern } : {},
+		...ctx,
 		...props
 	};
 }
@@ -45,7 +85,11 @@ const formPropNames = new Set([
 	"method",
 	"target"
 ]);
-function Form(props, ref) {
+/**
+* The legacy backend's root: the current engine under an internal name. Its
+* role is compatibility; see `legacy-contract/README.md` for what is frozen.
+*/
+function LegacyFormRoot(props, ref) {
 	props = useValidationProps(useProviderProps(props));
 	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, isInvalid, isValid, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
 	const defaultValuesRef = useRef(defaultValues);
@@ -93,7 +137,7 @@ function Form(props, ref) {
 	let styles = extractStyles(otherProps, CONTAINER_STYLES);
 	if (labelWidth) styles["$label-width"] = labelWidth;
 	let domRef = useObjectRef(ref);
-	let ctx = {
+	const presentation = {
 		labelPosition,
 		labelStyles,
 		orientation,
@@ -101,10 +145,13 @@ function Form(props, ref) {
 		validateTrigger,
 		requiredMark,
 		showValid,
-		form,
-		submitError: form.submitError,
 		idPrefix: name
 	};
+	let ctx = {
+		...presentation,
+		form,
+		submitError: form.submitError
+	};
 	if (firstRunRef.current && form) {
 		if (defaultValues) {
 			form.setInitialFieldsValue(defaultValues);
@@ -128,19 +175,42 @@ function Form(props, ref) {
 			horizontal: isHorizontal
 		},
 		onSubmit: onSubmitCallback,
-		children: /* @__PURE__ */ jsx(FormContext.Provider, {
-			value: ctx,
-			children: /* @__PURE__ */ jsx(Provider, {
-				insideForm: true,
-				isDisabled,
-				isReadOnly,
-				isInvalid,
-				isValid,
-				children
+		children: /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+				value: presentation,
+				children: /* @__PURE__ */ jsx(FormContext.Provider, {
+					value: ctx,
+					children: /* @__PURE__ */ jsx(Provider, {
+						insideForm: true,
+						isDisabled,
+						isReadOnly,
+						isInvalid,
+						isValid,
+						children
+					})
+				})
 			})
 		})
 	});
 }
+const _LegacyFormRoot = forwardRef(LegacyFormRoot);
+_LegacyFormRoot.displayName = "LegacyFormRoot";
+/**
+* The `<Form>` facade. It chooses the root by the brand of the `form` prop
+* before any backend hook runs. Without an explicit modern controller it is
+* the legacy root, so existing `<Form>` and `Form.useForm()` keep their behavior.
+*/
+function Form(props, ref) {
+	if (isModernFormController(props.form)) return /* @__PURE__ */ jsx(_ModernFormRoot, {
+		...props,
+		ref
+	});
+	return /* @__PURE__ */ jsx(_LegacyFormRoot, {
+		...props,
+		ref
+	});
+}
 /**
 * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
 */
@@ -148,5 +218,5 @@ const _Form = forwardRef(Form);
 _Form.displayName = "Form";
 
 //#endregion
-export { FormContext, _Form, useFormProps };
+export { FormContext, FormElement, FormPresentationContext, FormScopeMask, _Form, formPropNames, useFormProps };
 //# sourceMappingURL=Form.js.map

package/dist/components/form/Form/Form.js.map

@@ -1 +1 @@
-{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/index';\n\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nexport const FormContext = createContext({});\n\nconst FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\nexport function useFormProps(props) {\n  const ctx = useContext(FormContext);\n\n  return { ...ctx, ...props };\n}\n\nconst formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  props = useValidationProps(useProviderProps(props));\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useObjectRef(ref);\n\n  let ctx = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    form,\n    submitError: form.submitError,\n    idPrefix: name,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <FormContext.Provider value={ctx}>\n        <Provider\n          insideForm={true}\n          isDisabled={isDisabled}\n          isReadOnly={isReadOnly}\n          isInvalid={isInvalid}\n          isValid={isValid}\n        >\n          {children}\n        </Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as <T extends FieldTypes>(\n  props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}
+{"version":3,"file":"Form.js","names":["ModernFormRoot"],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useObjectRef } from '@react-aria/utils';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '@tenphi/tasty';\nimport {\n  ContextType,\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  Ref,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/index';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/index';\n\nimport { isModernFormController } from './backend';\nimport { ModernControllerContext } from './modern/context';\nimport { ModernFormRoot } from './ModernFormRoot';\nimport { FieldTypes } from './types';\nimport { CubeFormData, CubeFormInstance, useForm } from './use-form';\n\nimport type { ModernFormProps } from './ModernFormRoot';\n\n/**\n * Public legacy context. Its value is the full legacy scope (presentation\n * props, the instance, `submitError`, `idPrefix`) and is part of the exported\n * contract: wrappers outside the kit read it and Radio/Checkbox groups mask it.\n */\nexport const FormContext = createContext({});\n\n/**\n * Presentation and configuration that any root — legacy or modern — hands to\n * the fields below it. Backend-neutral by construction: no instance in here.\n */\nexport interface FormPresentationContextValue {\n  labelPosition?: FormBaseProps['labelPosition'];\n  labelStyles?: FormBaseProps['labelStyles'];\n  orientation?: 'vertical' | 'horizontal';\n  necessityIndicator?: FormBaseProps['necessityIndicator'];\n  validateTrigger?: FormBaseProps['validateTrigger'];\n  requiredMark?: boolean;\n  showValid?: boolean;\n  idPrefix?: string;\n}\n\nconst EMPTY_PRESENTATION: FormPresentationContextValue = {};\n\nexport const FormPresentationContext =\n  createContext<FormPresentationContextValue>(EMPTY_PRESENTATION);\n\n/**\n * Scope the inputs below to a new form context. Radio/Checkbox groups use it\n * for their options: they see the group's validation state, but neither the\n * surrounding form's presentation props nor its instance, so a nested `name`\n * never registers as an independent field. Wrappers that used to override\n * `FormContext` directly for the same purpose should render this instead — a\n * bare `FormContext.Provider` no longer masks the presentation context.\n */\nexport function FormScopeMask({\n  value,\n  children,\n}: {\n  value: ContextType<typeof FormContext>;\n  children?: ReactNode;\n}) {\n  return (\n    <ModernControllerContext.Provider value={null}>\n      <FormPresentationContext.Provider value={EMPTY_PRESENTATION}>\n        <FormContext.Provider value={value}>{children}</FormContext.Provider>\n      </FormPresentationContext.Provider>\n    </ModernControllerContext.Provider>\n  );\n}\n\n/** Separate overloads retain contextual callback typing for each backend. */\nexport interface FormRootComponent {\n  <T extends FieldTypes = FieldTypes>(\n    props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n  ): ReactElement;\n  <T extends FieldTypes = FieldTypes>(\n    props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n  ): ReactElement;\n}\n\nexport const FormElement = tasty({\n  as: 'form',\n  qa: 'Form',\n  styles: {\n    display: {\n      '': 'block',\n      horizontal: 'flex',\n    },\n    flow: {\n      '': 'column',\n      horizontal: 'row',\n    },\n    placeItems: {\n      '': 'initial',\n      horizontal: 'center',\n    },\n    gap: '2x',\n    '$label-width': '25x',\n  },\n});\n\n/**\n * Merge order: presentation context, then the legacy `FormContext`, then the\n * props. Under a legacy root the two contexts carry the same presentation\n * values, so the result is exactly `{ ...FormContext, ...props }` as before.\n */\nexport function useFormProps(props) {\n  const presentation = useContext(FormPresentationContext);\n  const ctx = useContext(FormContext);\n  const modern = useContext(ModernControllerContext);\n\n  return {\n    ...presentation,\n    ...(modern ? { form: modern } : {}),\n    ...ctx,\n    ...props,\n  };\n}\n\nexport const formPropNames = new Set([\n  'action',\n  'autoComplete',\n  'encType',\n  'method',\n  'target',\n]);\n\nexport interface CubeFormProps<T extends FieldTypes = FieldTypes>\n  extends FormBaseProps,\n    BaseProps,\n    ContainerStyleProps,\n    Pick<\n      FormHTMLAttributes<HTMLFormElement>,\n      'action' | 'autoComplete' | 'encType' | 'method' | 'target'\n    > {\n  /** Form name */\n  name?: string;\n  /** Default field values */\n  defaultValues?: Partial<T>;\n  /** Trigger when any value of the Field is changed */\n  onValuesChange?: CubeFormInstance<T>['onValuesChange'];\n  /** Trigger on form submit and success */\n  onSubmit?: CubeFormInstance<T>['onSubmit'];\n  /** Trigger on form submit and failed */\n  onSubmitFailed?: (any?) => void | Promise<any>;\n  /** Set form instance created by useForm */\n  form?: CubeFormInstance<T, CubeFormData<T>>;\n  /** The size of the side area with labels. Only for `labelPosition=\"side\"` */\n  labelWidth?: Styles['width'];\n  orientation?: 'vertical' | 'horizontal';\n}\n\n/**\n * The legacy backend's root: the current engine under an internal name. Its\n * role is compatibility; see `legacy-contract/README.md` for what is frozen.\n */\nfunction LegacyFormRoot<T extends FieldTypes>(\n  props: CubeFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  props = useValidationProps(useProviderProps(props));\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    labelStyles,\n    validateTrigger,\n    showValid,\n    defaultValues,\n    onValuesChange,\n    requiredMark = true,\n    form,\n    labelWidth,\n    onSubmit,\n    onSubmitFailed,\n    ...otherProps\n  } = props;\n  const defaultValuesRef = useRef(defaultValues);\n  const firstRunRef = useRef(true);\n  const isHorizontal = orientation === 'horizontal';\n\n  if (!orientation) {\n    orientation = 'vertical';\n  }\n\n  if (!labelPosition) {\n    labelPosition = isHorizontal ? 'side' : 'top';\n  }\n\n  if (!labelWidth) {\n    labelWidth = isHorizontal ? 'auto' : undefined;\n  }\n\n  ref = useCombinedRefs(ref);\n\n  let onSubmitCallback;\n\n  if ((onSubmit || onSubmitFailed) && !otherProps.action) {\n    onSubmitCallback = async (e) => {\n      if (e && e?.preventDefault) {\n        e && e?.preventDefault && e?.preventDefault();\n        e && e?.stopPropagation && e?.stopPropagation();\n\n        if (e.nativeEvent) {\n          const evt = e.nativeEvent;\n\n          if (\n            evt.submitter &&\n            evt.submitter.getAttribute('type') !== 'submit'\n          ) {\n            return;\n          }\n        }\n      }\n\n      if (!form || form.isSubmitting) return;\n\n      form.submitError = null;\n      form.setSubmitting(true);\n\n      try {\n        try {\n          await form.validateFields();\n        } catch (e) {\n          form?.setSubmitting(false);\n\n          return;\n        }\n\n        await timeout();\n        await onSubmit?.(form.getFormData());\n      } catch (e) {\n        await timeout();\n\n        // errors are shown\n        form.submitError = e as ReactNode;\n        // transfer errors to the callback\n        onSubmitFailed?.(e);\n\n        if (e instanceof Error) {\n          throw e;\n        }\n      } finally {\n        form?.setSubmitting(false);\n      }\n\n      // output data from form directly\n      // onSubmit(Object.fromEntries(new FormData(e.target).entries()));\n    };\n  }\n\n  [form] = useForm<T>(form, ref && ref.current, {\n    onSubmit: onSubmitCallback,\n    onValuesChange,\n  });\n\n  let styles = extractStyles(otherProps, CONTAINER_STYLES);\n\n  if (labelWidth) {\n    styles['$label-width'] = labelWidth;\n  }\n\n  let domRef = useObjectRef(ref);\n\n  const presentation: FormPresentationContextValue = {\n    labelPosition,\n    labelStyles,\n    orientation,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark,\n    showValid,\n    idPrefix: name,\n  };\n\n  let ctx = {\n    ...presentation,\n    form,\n    submitError: form.submitError,\n  };\n\n  if (firstRunRef.current && form) {\n    if (defaultValues) {\n      form.setInitialFieldsValue(defaultValues);\n      form.resetFields(undefined, true);\n      firstRunRef.current = false;\n    }\n  }\n\n  if (defaultValuesRef.current !== defaultValues) {\n    form?.setInitialFieldsValue(defaultValues ?? {});\n    defaultValuesRef.current = defaultValues;\n  }\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={domRef}\n      noValidate\n      qa={qa}\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: isHorizontal,\n      }}\n      onSubmit={onSubmitCallback}\n    >\n      <ModernControllerContext.Provider value={null}>\n        <FormPresentationContext.Provider value={presentation}>\n          <FormContext.Provider value={ctx}>\n            <Provider\n              insideForm={true}\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            >\n              {children}\n            </Provider>\n          </FormContext.Provider>\n        </FormPresentationContext.Provider>\n      </ModernControllerContext.Provider>\n    </FormElement>\n  );\n}\n\nconst _LegacyFormRoot = forwardRef(LegacyFormRoot) as unknown as <\n  T extends FieldTypes,\n>(\n  props: CubeFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_LegacyFormRoot as any).displayName = 'LegacyFormRoot';\n\n/**\n * The `<Form>` facade. It chooses the root by the brand of the `form` prop\n * before any backend hook runs. Without an explicit modern controller it is\n * the legacy root, so existing `<Form>` and `Form.useForm()` keep their behavior.\n */\nfunction Form<T extends FieldTypes>(\n  props: CubeFormProps<T> | ModernFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n) {\n  if (isModernFormController(props.form)) {\n    return <ModernFormRoot {...(props as ModernFormProps<T>)} ref={ref} />;\n  }\n\n  return <_LegacyFormRoot {...(props as CubeFormProps<T>)} ref={ref} />;\n}\n\n/**\n * Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.\n */\nconst _Form = forwardRef(Form) as unknown as FormRootComponent;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form, _LegacyFormRoot as LegacyFormRoot };\n"],"mappings":"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"}

package/dist/components/form/Form/ModernFormRoot.d.ts

@@ -0,0 +1,19 @@
+
+import { FormCallbacks } from "./modern/types.js";
+import { FormController } from "./modern/controller.js";
+import { CubeFormProps } from "./Form.js";
+import { FormEvent, ReactElement, Ref } from "react";
+
+//#region src/components/form/Form/ModernFormRoot.d.ts
+/** Modern root owns callback bindings; subscriptions stay in descendants. */
+interface ModernFormProps<T extends object = Record<string, unknown>> extends Omit<CubeFormProps<T>, 'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'> {
+  form: FormController<T>;
+  defaultValues?: never;
+  onReset?: (event: FormEvent<HTMLFormElement>) => void;
+  onSubmit?: FormCallbacks<T>['onSubmit'];
+  onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];
+  onValuesChange?: FormCallbacks<T>['onValuesChange'];
+}
+//#endregion
+export { ModernFormProps };
+//# sourceMappingURL=ModernFormRoot.d.ts.map

package/dist/components/form/Form/ModernFormRoot.js

@@ -0,0 +1,108 @@
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
+import { extractStyles } from "../../../utils/styles.js";
+import { useLayoutEffect as useLayoutEffect$1 } from "../../../utils/react/useLayoutEffect.js";
+import { useEvent } from "../../../_internal/hooks/use-event.js";
+import { Provider, useProviderProps } from "../../../provider.js";
+import { useValidationProps } from "../validation/use-validation-props.js";
+import { ModernControllerContext } from "./modern/context.js";
+import { getControllerInternals } from "./modern/controller.js";
+import { FormContext, FormElement, FormPresentationContext, formPropNames } from "./Form.js";
+import { CONTAINER_STYLES, filterBaseProps } from "@tenphi/tasty";
+import { forwardRef, useMemo, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/Form/ModernFormRoot.tsx
+const EMPTY_LEGACY_CONTEXT = {};
+function ModernFormRoot(props, ref) {
+	const { form, qa, name, children, orientation = "vertical", labelPosition: authoredLabelPosition, labelWidth: authoredLabelWidth, labelStyles, necessityIndicator, validateTrigger, requiredMark = true, showValid, isDisabled, isReadOnly, isInvalid, isValid, defaultValues, onSubmit, onSubmitFailed, onValuesChange, ...otherProps } = useValidationProps(useProviderProps(props));
+	const labelPosition = authoredLabelPosition ?? (orientation === "horizontal" ? "side" : "top");
+	const labelWidth = authoredLabelWidth ?? (orientation === "horizontal" ? "auto" : void 0);
+	const { store } = getControllerInternals(form, "<Form>");
+	if (defaultValues !== void 0) throw new Error("A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.");
+	const binding = useRef(void 0);
+	useLayoutEffect$1(() => {
+		const token = store.bindCallbacks({});
+		binding.current = token;
+		return () => {
+			token.release();
+			if (binding.current === token) binding.current = void 0;
+		};
+	}, [store]);
+	useLayoutEffect$1(() => {
+		binding.current?.update({
+			...onSubmit === void 0 ? {} : { onSubmit },
+			...onSubmitFailed === void 0 ? {} : { onSubmitFailed },
+			...onValuesChange === void 0 ? {} : { onValuesChange }
+		});
+	});
+	const handleSubmit = useEvent((event) => {
+		event.preventDefault();
+		event.stopPropagation();
+		form.submit();
+	});
+	const handleReset = useEvent((event) => {
+		otherProps.onReset?.(event);
+		if (!event.defaultPrevented) {
+			event.preventDefault();
+			form.reset();
+		}
+	});
+	const presentation = useMemo(() => ({
+		labelPosition,
+		labelStyles,
+		orientation,
+		necessityIndicator,
+		validateTrigger,
+		requiredMark,
+		showValid,
+		idPrefix: name
+	}), [
+		labelPosition,
+		labelStyles,
+		orientation,
+		necessityIndicator,
+		validateTrigger,
+		requiredMark,
+		showValid,
+		name
+	]);
+	const styles = extractStyles(otherProps, CONTAINER_STYLES);
+	if (labelWidth) styles["$label-width"] = labelWidth;
+	return /* @__PURE__ */ jsx(FormElement, {
+		...filterBaseProps(otherProps, { propNames: formPropNames }),
+		ref,
+		qa,
+		noValidate: true,
+		styles,
+		mods: {
+			"has-sider": labelPosition === "side",
+			"has-split": labelPosition === "split",
+			horizontal: orientation === "horizontal"
+		},
+		onSubmit: otherProps.action == null ? handleSubmit : void 0,
+		onReset: otherProps.action == null ? handleReset : otherProps.onReset,
+		children: /* @__PURE__ */ jsx(FormContext.Provider, {
+			value: EMPTY_LEGACY_CONTEXT,
+			children: /* @__PURE__ */ jsx(ModernControllerContext.Provider, {
+				value: form,
+				children: /* @__PURE__ */ jsx(FormPresentationContext.Provider, {
+					value: presentation,
+					children: /* @__PURE__ */ jsx(Provider, {
+						insideForm: true,
+						isDisabled,
+						isReadOnly,
+						isInvalid,
+						isValid,
+						children
+					})
+				})
+			})
+		})
+	});
+}
+const _ModernFormRoot = forwardRef(ModernFormRoot);
+_ModernFormRoot.displayName = "ModernFormRoot";
+
+//#endregion
+export { _ModernFormRoot };
+//# sourceMappingURL=ModernFormRoot.js.map

package/dist/components/form/Form/ModernFormRoot.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModernFormRoot.js","names":[],"sources":["../../../../src/components/form/Form/ModernFormRoot.tsx"],"sourcesContent":["import { CONTAINER_STYLES, filterBaseProps } from '@tenphi/tasty';\nimport { forwardRef, useMemo, useRef } from 'react';\n\nimport { useEvent } from '../../../_internal/hooks/use-event';\nimport { Provider, useProviderProps } from '../../../provider';\nimport { useLayoutEffect } from '../../../utils/react/useLayoutEffect';\nimport { extractStyles } from '../../../utils/styles';\nimport { useValidationProps } from '../validation/use-validation-props';\n\nimport {\n  FormContext,\n  FormElement,\n  FormPresentationContext,\n  formPropNames,\n} from './Form';\nimport { ModernControllerContext } from './modern/context';\nimport { getControllerInternals } from './modern/controller';\n\nimport type { FormEvent, ReactElement, Ref } from 'react';\nimport type { CubeFormProps, FormPresentationContextValue } from './Form';\nimport type { FormController } from './modern/controller';\nimport type { CallbackBinding, FormCallbacks } from './modern/types';\n\n/** Modern root owns callback bindings; subscriptions stay in descendants. */\nexport interface ModernFormProps<T extends object = Record<string, unknown>>\n  extends Omit<\n    CubeFormProps<T>,\n    'form' | 'defaultValues' | 'onSubmit' | 'onSubmitFailed' | 'onValuesChange'\n  > {\n  form: FormController<T>;\n  defaultValues?: never;\n  onReset?: (event: FormEvent<HTMLFormElement>) => void;\n  onSubmit?: FormCallbacks<T>['onSubmit'];\n  onSubmitFailed?: FormCallbacks<T>['onSubmitFailed'];\n  onValuesChange?: FormCallbacks<T>['onValuesChange'];\n}\n\nconst EMPTY_LEGACY_CONTEXT = {};\n\nfunction ModernFormRoot<T extends object>(\n  props: ModernFormProps<T>,\n  ref: Ref<HTMLFormElement>,\n): ReactElement {\n  const resolved = useValidationProps(useProviderProps(props));\n  const {\n    form,\n    qa,\n    name,\n    children,\n    orientation = 'vertical',\n    labelPosition: authoredLabelPosition,\n    labelWidth: authoredLabelWidth,\n    labelStyles,\n    necessityIndicator,\n    validateTrigger,\n    requiredMark = true,\n    showValid,\n    isDisabled,\n    isReadOnly,\n    isInvalid,\n    isValid,\n    defaultValues,\n    onSubmit,\n    onSubmitFailed,\n    onValuesChange,\n    ...otherProps\n  } = resolved;\n  const labelPosition =\n    authoredLabelPosition ?? (orientation === 'horizontal' ? 'side' : 'top');\n  const labelWidth =\n    authoredLabelWidth ?? (orientation === 'horizontal' ? 'auto' : undefined);\n  const { store } = getControllerInternals(form, '<Form>');\n  if (defaultValues !== undefined) {\n    throw new Error(\n      'A modern <Form> does not accept defaultValues. Seed Form.useController() or use an explicit defaults command.',\n    );\n  }\n  const binding = useRef<CallbackBinding<T> | undefined>(undefined);\n  useLayoutEffect(() => {\n    const token = store.bindCallbacks({});\n    binding.current = token;\n    return () => {\n      token.release();\n      if (binding.current === token) binding.current = undefined;\n    };\n  }, [store]);\n  useLayoutEffect(() => {\n    binding.current?.update({\n      ...(onSubmit === undefined ? {} : { onSubmit }),\n      ...(onSubmitFailed === undefined ? {} : { onSubmitFailed }),\n      ...(onValuesChange === undefined ? {} : { onValuesChange }),\n    });\n  });\n  const handleSubmit = useEvent((event: FormEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    event.stopPropagation();\n    void form.submit();\n  });\n  const handleReset = useEvent((event: FormEvent<HTMLFormElement>) => {\n    otherProps.onReset?.(event);\n    if (!event.defaultPrevented) {\n      event.preventDefault();\n      form.reset();\n    }\n  });\n  const presentation = useMemo<FormPresentationContextValue>(\n    () => ({\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      idPrefix: name,\n    }),\n    [\n      labelPosition,\n      labelStyles,\n      orientation,\n      necessityIndicator,\n      validateTrigger,\n      requiredMark,\n      showValid,\n      name,\n    ],\n  );\n  const styles = extractStyles(otherProps, CONTAINER_STYLES);\n  if (labelWidth) styles['$label-width'] = labelWidth;\n\n  return (\n    <FormElement\n      {...filterBaseProps(otherProps, { propNames: formPropNames })}\n      ref={ref}\n      qa={qa}\n      noValidate\n      styles={styles}\n      mods={{\n        'has-sider': labelPosition === 'side',\n        'has-split': labelPosition === 'split',\n        horizontal: orientation === 'horizontal',\n      }}\n      onSubmit={otherProps.action == null ? handleSubmit : undefined}\n      onReset={otherProps.action == null ? handleReset : otherProps.onReset}\n    >\n      <FormContext.Provider value={EMPTY_LEGACY_CONTEXT}>\n        <ModernControllerContext.Provider value={form}>\n          <FormPresentationContext.Provider value={presentation}>\n            <Provider\n              insideForm\n              isDisabled={isDisabled}\n              isReadOnly={isReadOnly}\n              isInvalid={isInvalid}\n              isValid={isValid}\n            >\n              {children}\n            </Provider>\n          </FormPresentationContext.Provider>\n        </ModernControllerContext.Provider>\n      </FormContext.Provider>\n    </FormElement>\n  );\n}\n\nconst _ModernFormRoot = forwardRef(ModernFormRoot) as unknown as <\n  T extends object,\n>(\n  props: ModernFormProps<T> & { ref?: Ref<HTMLFormElement> },\n) => ReactElement;\n\n(_ModernFormRoot as any).displayName = 'ModernFormRoot';\n\nexport { _ModernFormRoot as ModernFormRoot };\n"],"mappings":";;;;;;;;;;;;;;AAqCA,MAAM,uBAAuB,EAAE;AAE/B,SAAS,eACP,OACA,KACc;CAEd,MAAM,EACJ,MACA,IACA,MACA,UACA,cAAc,YACd,eAAe,uBACf,YAAY,oBACZ,aACA,oBACA,iBACA,eAAe,MACf,WACA,YACA,YACA,WACA,SACA,eACA,UACA,gBACA,gBACA,GAAG,eAtBY,mBAAmB,iBAAiB,MAAM,CAAC;CAwB5D,MAAM,gBACJ,0BAA0B,gBAAgB,eAAe,SAAS;CACpE,MAAM,aACJ,uBAAuB,gBAAgB,eAAe,SAAS;CACjE,MAAM,EAAE,UAAU,uBAAuB,MAAM,SAAS;AACxD,KAAI,kBAAkB,OACpB,OAAM,IAAI,MACR,gHACD;CAEH,MAAM,UAAU,OAAuC,OAAU;AACjE,yBAAsB;EACpB,MAAM,QAAQ,MAAM,cAAc,EAAE,CAAC;AACrC,UAAQ,UAAU;AAClB,eAAa;AACX,SAAM,SAAS;AACf,OAAI,QAAQ,YAAY,MAAO,SAAQ,UAAU;;IAElD,CAAC,MAAM,CAAC;AACX,yBAAsB;AACpB,UAAQ,SAAS,OAAO;GACtB,GAAI,aAAa,SAAY,EAAE,GAAG,EAAE,UAAU;GAC9C,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC1D,GAAI,mBAAmB,SAAY,EAAE,GAAG,EAAE,gBAAgB;GAC3D,CAAC;GACF;CACF,MAAM,eAAe,UAAU,UAAsC;AACnE,QAAM,gBAAgB;AACtB,QAAM,iBAAiB;AACvB,EAAK,KAAK,QAAQ;GAClB;CACF,MAAM,cAAc,UAAU,UAAsC;AAClE,aAAW,UAAU,MAAM;AAC3B,MAAI,CAAC,MAAM,kBAAkB;AAC3B,SAAM,gBAAgB;AACtB,QAAK,OAAO;;GAEd;CACF,MAAM,eAAe,eACZ;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA,UAAU;EACX,GACD;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CACF;CACD,MAAM,SAAS,cAAc,YAAY,iBAAiB;AAC1D,KAAI,WAAY,QAAO,kBAAkB;AAEzC,QACE,oBAAC;EACC,GAAI,gBAAgB,YAAY,EAAE,WAAW,eAAe,CAAC;EACxD;EACD;EACJ;EACQ;EACR,MAAM;GACJ,aAAa,kBAAkB;GAC/B,aAAa,kBAAkB;GAC/B,YAAY,gBAAgB;GAC7B;EACD,UAAU,WAAW,UAAU,OAAO,eAAe;EACrD,SAAS,WAAW,UAAU,OAAO,cAAc,WAAW;YAE9D,oBAAC,YAAY;GAAS,OAAO;aAC3B,oBAAC,wBAAwB;IAAS,OAAO;cACvC,oBAAC,wBAAwB;KAAS,OAAO;eACvC,oBAAC;MACC;MACY;MACA;MACD;MACF;MAER;OACQ;MACsB;KACF;IACd;GACX;;AAIlB,MAAM,kBAAkB,WAAW,eAAe;AAMlD,AAAC,gBAAwB,cAAc"}

package/dist/components/form/Form/ResetButton/ResetButton.d.ts

@@ -1,13 +1,14 @@
 
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
+import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/form/Form/ResetButton/ResetButton.d.ts
 interface CubeResetButtonProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
-  form?: CubeFormInstance<T>;
+  form?: CubeFormInstance<T> | FormController<T>;
 }
 declare const _ResetButton: react.ForwardRefExoticComponent<Omit<CubeResetButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion

package/dist/components/form/Form/ResetButton/ResetButton.js

@@ -1,14 +1,16 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { mergeProps } from "../../../../utils/react/mergeProps.js";
 import { useEvent } from "../../../../_internal/hooks/use-event.js";
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
+import { isModernFormController } from "../backend.js";
 import { useFormProps } from "../Form.js";
+import { ModernResetButton } from "../modern/actions.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/ResetButton/ResetButton.tsx
-function ResetButton(props, ref) {
+function LegacyResetButton(props, ref) {
 	const providerProps = useProviderProps({});
 	props = useFormProps(props);
 	const { isDisabled: isContextDisabled } = providerProps;
@@ -30,6 +32,19 @@ function ResetButton(props, ref) {
 		}, otherProps)
 	});
 }
+function ResetButton(props, ref) {
+	const resolved = useFormProps(props);
+	if (isModernFormController(resolved.form)) return /* @__PURE__ */ jsx(ModernResetButton, {
+		...resolved,
+		form: resolved.form,
+		buttonRef: ref
+	});
+	return /* @__PURE__ */ jsx(LegacyResetButtonWithRef, {
+		...props,
+		ref
+	});
+}
+const LegacyResetButtonWithRef = forwardRef(LegacyResetButton);
 const _ResetButton = forwardRef(ResetButton);
 _ResetButton.displayName = "ResetButton";
 

package/dist/components/form/Form/ResetButton/ResetButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResetButton.js","names":[],"sources":["../../../../../src/components/form/Form/ResetButton/ResetButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nexport interface CubeResetButtonProps<T extends FieldTypes = FieldTypes>\n  extends CubeButtonProps {\n  form?: CubeFormInstance<T>;\n}\n\nfunction ResetButton(\n  props: CubeResetButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const providerProps = useProviderProps({} as CubeButtonProps);\n\n  props = useFormProps(props);\n\n  const { isDisabled: isContextDisabled } = providerProps;\n  const { form, isDisabled, ...otherProps } = props;\n\n  const onPress = useEvent(() => {\n    // Use setTimeout to avoid conflict with onBlur handlers\n    setTimeout(() => {\n      form?.resetFields();\n    });\n  });\n\n  const isSomethingDisabled = isDisabled || isContextDisabled;\n\n  return (\n    <Button\n      ref={ref}\n      type=\"primary\"\n      htmlType=\"reset\"\n      isDisabled={form?.isSubmitting || !form?.isTouched}\n      {...mergeProps(\n        {\n          onPress,\n          isDisabled: isSomethingDisabled\n            ? true\n            : form?.isSubmitting || !form?.isTouched,\n        },\n        otherProps,\n      )}\n    />\n  );\n}\n\nconst _ResetButton = forwardRef(ResetButton);\n\n_ResetButton.displayName = 'ResetButton';\n\nexport { _ResetButton as ResetButton };\n"],"mappings":";;;;;;;;;;AAgBA,SAAS,YACP,OACA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;CAC1C,MAAM,EAAE,MAAM,YAAY,GAAG,eAAe;CAE5C,MAAM,UAAU,eAAe;AAE7B,mBAAiB;AACf,SAAM,aAAa;IACnB;GACF;CAEF,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,YAAY,MAAM,gBAAgB,CAAC,MAAM;EACzC,GAAI,WACF;GACE;GACA,YAAY,sBACR,OACA,MAAM,gBAAgB,CAAC,MAAM;GAClC,EACD,WACD;GACD;;AAIN,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}
+{"version":3,"file":"ResetButton.js","names":[],"sources":["../../../../../src/components/form/Form/ResetButton/ResetButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useEvent } from '../../../../_internal/index';\nimport { useProviderProps } from '../../../../provider';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { Button, CubeButtonProps } from '../../../actions/Button/Button';\nimport { isModernFormController } from '../backend';\nimport { useFormProps } from '../Form';\nimport { ModernResetButton } from '../modern/actions';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nimport type { FormController } from '../modern/controller';\n\nexport interface CubeResetButtonProps<T extends FieldTypes = FieldTypes>\n  extends CubeButtonProps {\n  form?: CubeFormInstance<T> | FormController<T>;\n}\n\nfunction LegacyResetButton(\n  props: Omit<CubeResetButtonProps, 'form'> & {\n    form?: CubeFormInstance<FieldTypes>;\n  },\n  ref: FocusableRef<HTMLElement>,\n) {\n  const providerProps = useProviderProps({} as CubeButtonProps);\n\n  props = useFormProps(props);\n\n  const { isDisabled: isContextDisabled } = providerProps;\n  const { form, isDisabled, ...otherProps } = props;\n\n  const onPress = useEvent(() => {\n    // Use setTimeout to avoid conflict with onBlur handlers\n    setTimeout(() => {\n      form?.resetFields();\n    });\n  });\n\n  const isSomethingDisabled = isDisabled || isContextDisabled;\n\n  return (\n    <Button\n      ref={ref}\n      type=\"primary\"\n      htmlType=\"reset\"\n      isDisabled={form?.isSubmitting || !form?.isTouched}\n      {...mergeProps(\n        {\n          onPress,\n          isDisabled: isSomethingDisabled\n            ? true\n            : form?.isSubmitting || !form?.isTouched,\n        },\n        otherProps,\n      )}\n    />\n  );\n}\n\nfunction ResetButton(\n  props: CubeResetButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const resolved = useFormProps(props);\n  if (isModernFormController(resolved.form)) {\n    return (\n      <ModernResetButton\n        {...resolved}\n        form={resolved.form as FormController}\n        buttonRef={ref}\n      />\n    );\n  }\n  return (\n    <LegacyResetButtonWithRef\n      {...(props as Omit<CubeResetButtonProps, 'form'> & {\n        form?: CubeFormInstance<FieldTypes>;\n      })}\n      ref={ref}\n    />\n  );\n}\n\nconst LegacyResetButtonWithRef = forwardRef(LegacyResetButton);\nconst _ResetButton = forwardRef(ResetButton);\n\n_ResetButton.displayName = 'ResetButton';\n\nexport { _ResetButton as ResetButton };\n"],"mappings":";;;;;;;;;;;;AAoBA,SAAS,kBACP,OAGA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;CAC1C,MAAM,EAAE,MAAM,YAAY,GAAG,eAAe;CAE5C,MAAM,UAAU,eAAe;AAE7B,mBAAiB;AACf,SAAM,aAAa;IACnB;GACF;CAEF,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,YAAY,MAAM,gBAAgB,CAAC,MAAM;EACzC,GAAI,WACF;GACE;GACA,YAAY,sBACR,OACA,MAAM,gBAAgB,CAAC,MAAM;GAClC,EACD,WACD;GACD;;AAIN,SAAS,YACP,OACA,KACA;CACA,MAAM,WAAW,aAAa,MAAM;AACpC,KAAI,uBAAuB,SAAS,KAAK,CACvC,QACE,oBAAC;EACC,GAAI;EACJ,MAAM,SAAS;EACf,WAAW;GACX;AAGN,QACE,oBAAC;EACC,GAAK;EAGA;GACL;;AAIN,MAAM,2BAA2B,WAAW,kBAAkB;AAC9D,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

package/dist/components/form/Form/SubmitButton/SubmitButton.d.ts

@@ -1,13 +1,14 @@
 
 import { CubeButtonProps } from "../../../actions/Button/Button.js";
 import { FieldTypes } from "../types.js";
+import { FormController } from "../modern/controller.js";
 import { CubeFormInstance } from "../use-form.js";
 import * as react from "react";
 import * as _react_types_shared0 from "@react-types/shared";
 
 //#region src/components/form/Form/SubmitButton/SubmitButton.d.ts
 interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes> extends CubeButtonProps {
-  form?: CubeFormInstance<T>;
+  form?: CubeFormInstance<T> | FormController<T>;
 }
 declare const _SubmitButton: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
 //#endregion

package/dist/components/form/Form/SubmitButton/SubmitButton.js

@@ -1,12 +1,14 @@
-/** @license MIT | @cube-dev/ui-kit v0.178.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.180.0 | Cube Dev Team */
 import { useProviderProps } from "../../../../provider.js";
 import { Button } from "../../../actions/Button/Button.js";
+import { isModernFormController } from "../backend.js";
 import { useFormProps } from "../Form.js";
+import { ModernSubmitButton } from "../modern/actions.js";
 import { forwardRef } from "react";
 import { jsx } from "react/jsx-runtime";
 
 //#region src/components/form/Form/SubmitButton/SubmitButton.tsx
-function SubmitButton(props, ref) {
+function LegacySubmitButton(props, ref) {
 	const providerProps = useProviderProps({});
 	props = useFormProps(props);
 	const { isDisabled: isContextDisabled } = providerProps;
@@ -22,6 +24,19 @@ function SubmitButton(props, ref) {
 		...otherProps
 	});
 }
+function SubmitButton(props, ref) {
+	const resolved = useFormProps(props);
+	if (isModernFormController(resolved.form)) return /* @__PURE__ */ jsx(ModernSubmitButton, {
+		...resolved,
+		form: resolved.form,
+		buttonRef: ref
+	});
+	return /* @__PURE__ */ jsx(LegacySubmitButtonWithRef, {
+		...props,
+		ref
+	});
+}
+const LegacySubmitButtonWithRef = forwardRef(LegacySubmitButton);
 const _SubmitButton = forwardRef(SubmitButton);
 _SubmitButton.displayName = "SubmitButton";