@cube-dev/ui-kit 0.114.0 → 0.115.0

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

@@ -0,0 +1,151 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { extractStyles } from "../../../tasty/utils/styles.js";
+import { CONTAINER_STYLES } from "../../../tasty/styles/list.js";
+import { tasty } from "../../../tasty/tasty.js";
+import { filterBaseProps } from "../../../tasty/utils/filter-base-props.js";
+import { useCombinedRefs } from "../../../utils/react/useCombinedRefs.js";
+import { Provider, useProviderProps } from "../../../provider.js";
+import { timeout } from "../../../utils/promise.js";
+import { useForm } from "./use-form.js";
+import { createContext, forwardRef, useContext, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useDOMRef } from "@react-spectrum/utils";
+
+//#region src/components/form/Form/Form.tsx
+const FormContext = createContext({});
+const FormElement = tasty({
+	as: "form",
+	qa: "Form",
+	styles: {
+		display: {
+			"": "block",
+			horizontal: "flex"
+		},
+		flow: {
+			"": "column",
+			horizontal: "row"
+		},
+		placeItems: {
+			"": "initial",
+			horizontal: "center"
+		},
+		gap: "2x",
+		"$label-width": "25x"
+	}
+});
+function useFormProps(props) {
+	return {
+		...useContext(FormContext),
+		...props
+	};
+}
+const formPropNames = new Set([
+	"action",
+	"autoComplete",
+	"encType",
+	"method",
+	"target"
+]);
+function Form(props, ref) {
+	props = useProviderProps(props);
+	let { qa, name, children, labelPosition, orientation, necessityIndicator, isDisabled, isReadOnly, validationState, labelStyles, validateTrigger, showValid, defaultValues, onValuesChange, requiredMark = true, form, labelWidth, onSubmit, onSubmitFailed, ...otherProps } = props;
+	const defaultValuesRef = useRef(defaultValues);
+	const firstRunRef = useRef(true);
+	const isHorizontal = orientation === "horizontal";
+	if (!orientation) orientation = "vertical";
+	if (!labelPosition) labelPosition = isHorizontal ? "side" : "top";
+	if (!labelWidth) labelWidth = isHorizontal ? "auto" : void 0;
+	ref = useCombinedRefs(ref);
+	let onSubmitCallback;
+	if ((onSubmit || onSubmitFailed) && !otherProps.action) onSubmitCallback = async (e) => {
+		if (e && e?.preventDefault) {
+			e && e?.preventDefault && e?.preventDefault();
+			e && e?.stopPropagation && e?.stopPropagation();
+			if (e.nativeEvent) {
+				const evt = e.nativeEvent;
+				if (evt.submitter && evt.submitter.getAttribute("type") !== "submit") return;
+			}
+		}
+		if (!form || form.isSubmitting) return;
+		form.submitError = null;
+		form.setSubmitting(true);
+		try {
+			try {
+				await form.validateFields();
+			} catch (e) {
+				form?.setSubmitting(false);
+				return;
+			}
+			await timeout();
+			await onSubmit?.(form.getFormData());
+		} catch (e) {
+			await timeout();
+			form.submitError = e;
+			onSubmitFailed?.(e);
+			if (e instanceof Error) throw e;
+		} finally {
+			form?.setSubmitting(false);
+		}
+	};
+	[form] = useForm(form, ref && ref.current, {
+		onSubmit: onSubmitCallback,
+		onValuesChange
+	});
+	let styles = extractStyles(otherProps, CONTAINER_STYLES);
+	if (labelWidth) styles["$label-width"] = labelWidth;
+	let domRef = useDOMRef(ref);
+	let ctx = {
+		labelPosition,
+		labelStyles,
+		orientation,
+		necessityIndicator,
+		validateTrigger,
+		requiredMark,
+		showValid,
+		form,
+		submitError: form.submitError,
+		idPrefix: name
+	};
+	if (firstRunRef.current && form) {
+		if (defaultValues) {
+			form.setInitialFieldsValue(defaultValues);
+			form.resetFields(void 0, true);
+			firstRunRef.current = false;
+		}
+	}
+	if (defaultValuesRef.current !== defaultValues) {
+		form?.setInitialFieldsValue(defaultValues ?? {});
+		defaultValuesRef.current = defaultValues;
+	}
+	return /* @__PURE__ */ jsx(FormElement, {
+		...filterBaseProps(otherProps, { propNames: formPropNames }),
+		ref: domRef,
+		noValidate: true,
+		styles,
+		mods: {
+			"has-sider": labelPosition === "side",
+			"has-split": labelPosition === "split",
+			horizontal: isHorizontal
+		},
+		onSubmit: onSubmitCallback,
+		children: /* @__PURE__ */ jsx(FormContext.Provider, {
+			value: ctx,
+			children: /* @__PURE__ */ jsx(Provider, {
+				insideForm: true,
+				isDisabled,
+				isReadOnly,
+				validationState,
+				children
+			})
+		})
+	});
+}
+/**
+* Forms allow users to enter data that can be submitted while providing alignment and styling for form fields.
+*/
+const _Form = forwardRef(Form);
+_Form.displayName = "Form";
+
+//#endregion
+export { FormContext, _Form, useFormProps };
+//# sourceMappingURL=Form.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","names":[],"sources":["../../../../src/components/form/Form/Form.tsx"],"sourcesContent":["import { useDOMRef } from '@react-spectrum/utils';\nimport { DOMRef } from '@react-types/shared';\nimport {\n  createContext,\n  FormHTMLAttributes,\n  forwardRef,\n  ReactElement,\n  ReactNode,\n  useContext,\n  useRef,\n} from 'react';\n\nimport { Provider, useProviderProps } from '../../../provider';\nimport { FormBaseProps } from '../../../shared/index';\nimport {\n  BaseProps,\n  CONTAINER_STYLES,\n  ContainerStyleProps,\n  extractStyles,\n  filterBaseProps,\n  Styles,\n  tasty,\n} from '../../../tasty/index';\nimport { timeout } from '../../../utils/promise';\nimport { useCombinedRefs } from '../../../utils/react/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: DOMRef<HTMLFormElement>,\n) {\n  props = useProviderProps(props);\n  let {\n    qa,\n    name,\n    children,\n    labelPosition,\n    orientation,\n    necessityIndicator,\n    isDisabled,\n    isReadOnly,\n    validationState,\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 = useDOMRef(ref as any);\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      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          validationState={validationState}\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?: DOMRef<HTMLFormElement> },\n) => ReactElement;\n\n(_Form as any).displayName = 'Form';\n\nexport { _Form as Form };\n"],"mappings":"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"}

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

@@ -0,0 +1,16 @@
+
+import { CubeButtonProps } from "../../../actions/Button/Button.js";
+import "../../../actions/index.js";
+import { FieldTypes } from "../types.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>;
+}
+declare const _ResetButton: react.ForwardRefExoticComponent<Omit<CubeResetButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeResetButtonProps, _ResetButton };
+//# sourceMappingURL=ResetButton.d.ts.map

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

@@ -0,0 +1,38 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.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/index.js";
+import { useFormProps } from "../Form.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/Form/ResetButton/ResetButton.tsx
+function ResetButton(props, ref) {
+	const providerProps = useProviderProps({});
+	props = useFormProps(props);
+	const { isDisabled: isContextDisabled } = providerProps;
+	const { form, isDisabled, ...otherProps } = props;
+	const onPress = useEvent(() => {
+		setTimeout(() => {
+			form?.resetFields();
+		});
+	});
+	const isSomethingDisabled = isDisabled || isContextDisabled;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "primary",
+		htmlType: "reset",
+		isDisabled: form?.isSubmitting || !form?.isTouched,
+		...mergeProps({
+			onPress,
+			isDisabled: isSomethingDisabled ? true : form?.isSubmitting || !form?.isTouched
+		}, otherProps)
+	});
+}
+const _ResetButton = forwardRef(ResetButton);
+_ResetButton.displayName = "ResetButton";
+
+//#endregion
+export { _ResetButton };
+//# sourceMappingURL=ResetButton.js.map

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

@@ -0,0 +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/index';\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"}

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

@@ -0,0 +1,2 @@
+
+import { CubeResetButtonProps, _ResetButton } from "./ResetButton.js";

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

@@ -0,0 +1,16 @@
+
+import { CubeButtonProps } from "../../../actions/Button/Button.js";
+import "../../../actions/index.js";
+import { FieldTypes } from "../types.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>;
+}
+declare const _SubmitButton: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+//#endregion
+export { CubeSubmitButtonProps, _SubmitButton };
+//# sourceMappingURL=SubmitButton.d.ts.map

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

@@ -0,0 +1,30 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useProviderProps } from "../../../../provider.js";
+import { Button } from "../../../actions/index.js";
+import { useFormProps } from "../Form.js";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/Form/SubmitButton/SubmitButton.tsx
+function SubmitButton(props, ref) {
+	const providerProps = useProviderProps({});
+	props = useFormProps(props);
+	const { isDisabled: isContextDisabled } = providerProps;
+	props = useFormProps(props);
+	const { form, isDisabled, ...otherProps } = props;
+	const isSomethingDisabled = isDisabled || isContextDisabled;
+	return /* @__PURE__ */ jsx(Button, {
+		ref,
+		type: "primary",
+		htmlType: "submit",
+		isLoading: form?.isSubmitting,
+		isDisabled: isSomethingDisabled || form?.isSubmitting ? true : form?.isInvalid,
+		...otherProps
+	});
+}
+const _SubmitButton = forwardRef(SubmitButton);
+_SubmitButton.displayName = "SubmitButton";
+
+//#endregion
+export { _SubmitButton };
+//# sourceMappingURL=SubmitButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitButton.js","names":[],"sources":["../../../../../src/components/form/Form/SubmitButton/SubmitButton.tsx"],"sourcesContent":["import { FocusableRef } from '@react-types/shared';\nimport { forwardRef } from 'react';\n\nimport { useProviderProps } from '../../../../provider';\nimport { Button, CubeButtonProps } from '../../../actions/index';\nimport { useFormProps } from '../Form';\nimport { FieldTypes } from '../types';\nimport { CubeFormInstance } from '../use-form';\n\nexport interface CubeSubmitButtonProps<T extends FieldTypes = FieldTypes>\n  extends CubeButtonProps {\n  form?: CubeFormInstance<T>;\n}\n\nfunction SubmitButton(\n  props: CubeSubmitButtonProps,\n  ref: FocusableRef<HTMLElement>,\n) {\n  const providerProps = useProviderProps({} as CubeButtonProps);\n\n  props = useFormProps(props);\n\n  const { isDisabled: isContextDisabled } = providerProps;\n\n  props = useFormProps(props);\n\n  const { form, isDisabled, ...otherProps } = props;\n  const isSomethingDisabled = isDisabled || isContextDisabled;\n\n  return (\n    <Button\n      ref={ref}\n      type=\"primary\"\n      htmlType=\"submit\"\n      isLoading={form?.isSubmitting}\n      isDisabled={\n        isSomethingDisabled || form?.isSubmitting ? true : form?.isInvalid\n      }\n      {...otherProps}\n    />\n  );\n}\n\nconst _SubmitButton = forwardRef(SubmitButton);\n\n_SubmitButton.displayName = 'SubmitButton';\n\nexport { _SubmitButton as SubmitButton };\n"],"mappings":";;;;;;;;AAcA,SAAS,aACP,OACA,KACA;CACA,MAAM,gBAAgB,iBAAiB,EAAE,CAAoB;AAE7D,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,YAAY,sBAAsB;AAE1C,SAAQ,aAAa,MAAM;CAE3B,MAAM,EAAE,MAAM,YAAY,GAAG,eAAe;CAC5C,MAAM,sBAAsB,cAAc;AAE1C,QACE,oBAAC;EACM;EACL,MAAK;EACL,UAAS;EACT,WAAW,MAAM;EACjB,YACE,uBAAuB,MAAM,eAAe,OAAO,MAAM;EAE3D,GAAI;GACJ;;AAIN,MAAM,gBAAgB,WAAW,aAAa;AAE9C,cAAc,cAAc"}

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

@@ -0,0 +1,2 @@
+
+import { CubeSubmitButtonProps, _SubmitButton } from "./SubmitButton.js";

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

@@ -0,0 +1,13 @@
+
+import { CubeAlertProps } from "../../content/Alert/types.js";
+import "../../content/Alert/index.js";
+import * as react from "react";
+
+//#region src/components/form/Form/SubmitError.d.ts
+/**
+ * An alert that shows a form error message received from the onSubmit callback.
+ */
+declare const _SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { _SubmitError };
+//# sourceMappingURL=SubmitError.d.ts.map

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

@@ -0,0 +1,27 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { FormContext } from "./Form.js";
+import { Alert } from "../../content/Alert/Alert.js";
+import { forwardRef, isValidElement, useContext } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/form/Form/SubmitError.tsx
+function SubmitError(props, ref) {
+	let { submitError } = useContext(FormContext);
+	if (!submitError) return null;
+	if (!isValidElement(submitError) && typeof submitError !== "string") submitError = "Internal error";
+	return /* @__PURE__ */ jsx(Alert, {
+		ref,
+		theme: "danger",
+		...props,
+		children: submitError
+	});
+}
+/**
+* An alert that shows a form error message received from the onSubmit callback.
+*/
+const _SubmitError = forwardRef(SubmitError);
+_SubmitError.displayName = "SubmitError";
+
+//#endregion
+export { _SubmitError };
+//# sourceMappingURL=SubmitError.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SubmitError.js","names":[],"sources":["../../../../src/components/form/Form/SubmitError.tsx"],"sourcesContent":["import {\n  ForwardedRef,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useContext,\n} from 'react';\n\nimport { Alert, CubeAlertProps } from '../../content/Alert/index';\n\nimport { FormContext } from './Form';\n\ntype SubmitErrorContextProps = {\n  submitError?: unknown;\n};\n\nfunction SubmitError(props: CubeAlertProps, ref: ForwardedRef<HTMLDivElement>) {\n  let { submitError } = useContext(FormContext) as SubmitErrorContextProps;\n\n  if (!submitError) {\n    return null;\n  }\n\n  if (\n    !isValidElement(submitError as ReactNode) &&\n    typeof submitError !== 'string'\n  ) {\n    submitError = 'Internal error';\n  }\n\n  return (\n    <Alert ref={ref} theme=\"danger\" {...props}>\n      {submitError as ReactNode}\n    </Alert>\n  );\n}\n\n/**\n * An alert that shows a form error message received from the onSubmit callback.\n */\nconst _SubmitError = forwardRef(SubmitError);\n\n_SubmitError.displayName = 'SubmitError';\n\nexport { _SubmitError as SubmitError };\n"],"mappings":";;;;;;;AAgBA,SAAS,YAAY,OAAuB,KAAmC;CAC7E,IAAI,EAAE,gBAAgB,WAAW,YAAY;AAE7C,KAAI,CAAC,YACH,QAAO;AAGT,KACE,CAAC,eAAe,YAAyB,IACzC,OAAO,gBAAgB,SAEvB,eAAc;AAGhB,QACE,oBAAC;EAAW;EAAK,OAAM;EAAS,GAAI;YACjC;GACK;;;;;AAOZ,MAAM,eAAe,WAAW,YAAY;AAE5C,aAAa,cAAc"}

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

@@ -0,0 +1,38 @@
+
+import { FieldTypes, Fields } from "./types.js";
+import { CubeFormInstance, useForm } from "./use-form.js";
+import { CubeFormProps, FormContext, useFormProps } from "./Form.js";
+import { CubeSubmitButtonProps, _SubmitButton } from "./SubmitButton/SubmitButton.js";
+import "./SubmitButton/index.js";
+import { CubeResetButtonProps, _ResetButton } from "./ResetButton/ResetButton.js";
+import "./ResetButton/index.js";
+import { CubeAlertProps } from "../../content/Alert/types.js";
+import "../../content/Alert/index.js";
+import { Field } from "./Field.js";
+import { _SubmitError } from "./SubmitError.js";
+import { FieldReturnValue, UseFieldProps } from "./use-field/types.js";
+import { UseFieldParams, useField } from "./use-field/use-field.js";
+import { UseFieldPropsParams, useFieldProps } from "./use-field/use-field-props.js";
+import "./use-field/index.js";
+import * as react from "react";
+import * as _react_types_shared0 from "@react-types/shared";
+
+//#region src/components/form/Form/index.d.ts
+declare const Form: (<T extends FieldTypes>(props: CubeFormProps<T> & {
+  ref?: _react_types_shared0.DOMRef<HTMLFormElement>;
+}) => react.ReactElement) & {
+  Item: typeof Field;
+  SubmitError: typeof _SubmitError;
+  Submit: typeof _SubmitButton;
+  Reset: typeof _ResetButton;
+  useForm: typeof useForm;
+} & {
+  Item: typeof Field;
+  useForm: typeof useForm;
+  Submit: react.ForwardRefExoticComponent<Omit<CubeSubmitButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+  Reset: react.ForwardRefExoticComponent<Omit<CubeResetButtonProps<FieldTypes>, "ref"> & react.RefAttributes<_react_types_shared0.FocusableRefValue<HTMLElement, HTMLElement>>>;
+  SubmitError: react.ForwardRefExoticComponent<CubeAlertProps & react.RefAttributes<HTMLDivElement>>;
+};
+//#endregion
+export { Form };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,22 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { useForm } from "./use-form.js";
+import { FormContext, _Form, useFormProps } from "./Form.js";
+import { useField } from "./use-field/use-field.js";
+import { useFieldProps } from "./use-field/use-field-props.js";
+import { Field } from "./Field.js";
+import { _ResetButton } from "./ResetButton/ResetButton.js";
+import { _SubmitButton } from "./SubmitButton/SubmitButton.js";
+import { _SubmitError } from "./SubmitError.js";
+
+//#region src/components/form/Form/index.ts
+const Form = Object.assign(_Form, {
+	Item: Field,
+	useForm,
+	Submit: _SubmitButton,
+	Reset: _ResetButton,
+	SubmitError: _SubmitError
+});
+
+//#endregion
+export { Form };
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["SubmitButton","ResetButton"],"sources":["../../../../src/components/form/Form/index.ts"],"sourcesContent":["import { CubeAlertProps } from '../../content/Alert/index';\n\nimport { Field } from './Field';\nimport { Form as _Form, FormContext, useFormProps } from './Form';\nimport { ResetButton } from './ResetButton';\nimport { SubmitButton } from './SubmitButton';\nimport { SubmitError } from './SubmitError';\nimport { useForm } from './use-form';\n\nconst Form = Object.assign(\n  _Form as typeof _Form & {\n    Item: typeof Field;\n    SubmitError: typeof SubmitError;\n    Submit: typeof SubmitButton;\n    Reset: typeof ResetButton;\n    useForm: typeof useForm;\n  },\n  {\n    Item: Field,\n    useForm,\n    Submit: SubmitButton,\n    Reset: ResetButton,\n    SubmitError,\n  },\n);\n\nexport * from './SubmitError';\nexport * from './SubmitButton';\nexport * from './ResetButton';\nexport * from './use-field';\nexport { useFormProps, Form, Field, useForm, FormContext };\nexport type { CubeFormProps } from './Form';\nexport type { CubeFormInstance } from './use-form';\nexport type { FieldTypes, Fields } from './types';\nexport type { CubeAlertProps as CubeSubmitErrorProps };\n"],"mappings":";;;;;;;;;;;AASA,MAAM,OAAO,OAAO,OAClB,OAOA;CACE,MAAM;CACN;CACA,QAAQA;CACR,OAAOC;CACP;CACD,CACF"}

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

@@ -0,0 +1,23 @@
+
+import { ReactNode } from "react";
+
+//#region src/components/form/Form/types.d.ts
+type FieldTypes = {
+  [key: string]: any;
+};
+type CubeFieldData<Name extends string, Value> = {
+  readonly name: Name;
+  errors: ReactNode[];
+  value?: Value;
+  touched?: boolean;
+  rules?: any[];
+  validating?: boolean;
+  validationId?: number;
+  status?: 'valid' | 'invalid';
+  validationDetails?: ValidityState;
+};
+type Fields = Record<keyof FieldTypes, CubeFieldData<string, any>>;
+type SetFieldsArrType<T extends FieldTypes, Name extends keyof T & string> = CubeFieldData<Name, T[Name]>;
+//#endregion
+export { CubeFieldData, FieldTypes, Fields, SetFieldsArrType };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/form/Form/use-field/index.d.ts

@@ -0,0 +1,4 @@
+
+import { FieldReturnValue, UseFieldProps } from "./types.js";
+import { UseFieldParams, useField } from "./use-field.js";
+import { UseFieldPropsParams, useFieldProps } from "./use-field-props.js";

package/dist/components/form/Form/use-field/types.d.ts

@@ -0,0 +1,43 @@
+
+import { FieldCoreProps, ValidateTrigger, ValidationState } from "../../../../shared/form.js";
+import "../../../../shared/index.js";
+import { CubeFieldData, FieldTypes } from "../types.js";
+import { CubeFormInstance } from "../use-form.js";
+import { ReactNode } from "react";
+
+//#region src/components/form/Form/use-field/types.d.ts
+interface UseFieldProps<T extends FieldTypes> extends FieldCoreProps {
+  /** The initial value of the input. */
+  defaultValue?: any;
+  /** The form instance */
+  form?: CubeFormInstance<T>;
+  /** The validation state of the field */
+  validationState?: ValidationState;
+  /** Whether to show valid state */
+  showValid?: boolean;
+  /** On which event perform the validation for the field */
+  validateTrigger?: ValidateTrigger;
+}
+type FieldReturnValue<T extends FieldTypes> = {
+  id: string;
+  name: string;
+  value: any;
+  validateTrigger?: ValidateTrigger;
+  validationState?: ValidationState;
+  form?: CubeFormInstance<T>;
+  onChange?: (value: any, dontTouch: boolean, validateTrigger: ValidateTrigger) => void;
+  /**
+   * @deprecated Use `errorMessage` for error messages and `description` for field descriptions instead.
+   * Message for the field. Some additional information or error notice
+   */
+  message?: ReactNode; /** Description for the field. Will be placed below the label */
+  description?: ReactNode; /** Error message for the field. Always displayed in danger state regardless of validation state */
+  errorMessage?: ReactNode;
+  isRequired?: boolean;
+  onBlur: () => void;
+  nonInput: boolean;
+  field?: CubeFieldData<keyof FieldTypes & string, T[keyof FieldTypes]>;
+};
+//#endregion
+export { FieldReturnValue, UseFieldProps };
+//# sourceMappingURL=types.d.ts.map

package/dist/components/form/Form/use-field/use-field-props.d.ts

@@ -0,0 +1,29 @@
+
+import { ValidateTrigger } from "../../../../shared/form.js";
+import "../../../../shared/index.js";
+import { FieldTypes } from "../types.js";
+import { UseFieldProps } from "./types.js";
+
+//#region src/components/form/Form/use-field/use-field-props.d.ts
+type UseFieldPropsParams = {
+  valuePropsMapper?: ({
+    value,
+    onChange
+  }: {
+    value: any;
+    onChange: any;
+  }) => any;
+  /**
+   * @default 'onBlur'
+   */
+  defaultValidationTrigger?: ValidateTrigger;
+  /**
+   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden
+   * If you want to change this prop after mount, remount the component with a new value.
+   */
+  unsafe__isDisabled?: boolean;
+};
+declare function useFieldProps<T extends FieldTypes, Props extends UseFieldProps<T>>(props: Props, params?: UseFieldPropsParams): Props;
+//#endregion
+export { UseFieldPropsParams, useFieldProps };
+//# sourceMappingURL=use-field-props.d.ts.map

package/dist/components/form/Form/use-field/use-field-props.js

@@ -0,0 +1,71 @@
+/** @license MIT | @cube-dev/ui-kit v0.115.0 | Cube Dev Team */
+import { mergeProps } from "../../../../utils/react/mergeProps.js";
+import { useEvent } from "../../../../_internal/hooks/use-event.js";
+import { warn } from "../../../../utils/warnings.js";
+import { useChainedCallback } from "../../../../_internal/hooks/use-chained-callback.js";
+import { useField } from "./use-field.js";
+import { useInsideLegacyField } from "../Field.js";
+import { useDebugValue, useId, useRef } from "react";
+
+//#region src/components/form/Form/use-field/use-field-props.tsx
+function useFieldProps(props, params = {}) {
+	const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);
+	const { valuePropsMapper = ({ value, onChange }) => {
+		return {
+			value: value ?? null,
+			onChange
+		};
+	}, defaultValidationTrigger = "onBlur" } = params;
+	const isInsideLegacyField = useInsideLegacyField();
+	if (props.rules && !props.name) warn(`The "rules" prop is not suitable for fields that are not part of a form. Use "name" prop to link the field to a form.`);
+	if (isInsideLegacyField || isDisabledRef.current === true) return props;
+	const hasName = props.name != null;
+	const generatedId = useId();
+	if (!hasName) {
+		if (!props.id) {
+			const result = {
+				...props,
+				id: generatedId
+			};
+			if (result.id && !result.labelProps) result.labelProps = { for: result.id };
+			else if (result.id && result.labelProps && !result.labelProps.for) result.labelProps = {
+				...result.labelProps,
+				for: result.id
+			};
+			return result;
+		}
+		return props;
+	}
+	const field = useField(props, { defaultValidationTrigger: params.defaultValidationTrigger });
+	const isOutsideOfForm = field?.form == null;
+	if (props.rules && isOutsideOfForm) warn(`The "rules" prop is not supported for fields that are not part of a form. The "${props.name}" field is placed outside the form.`);
+	const onBlurChained = useChainedCallback(field?.onBlur, "onBlur" in props ? props.onBlur : void 0);
+	const onChangeEvent = useEvent((value, dontTouch) => {
+		field?.onChange?.(value, dontTouch, field?.validateTrigger ?? defaultValidationTrigger);
+	});
+	const valueProps = !isOutsideOfForm ? valuePropsMapper({
+		value: field.value,
+		onChange: onChangeEvent
+	}) : {};
+	if (isInsideLegacyField && !isOutsideOfForm) {
+		const valuePropEventNames = !isOutsideOfForm ? Object.keys(valueProps).filter((name) => name.startsWith("on")) : [];
+		for (const valuePropName of valuePropEventNames) if (valuePropName in props) warn(`The "${valuePropName}" listener is not supported for input "${props.name}" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`);
+	}
+	const compiledErrorMessage = props.errorMessage !== void 0 ? props.errorMessage : field?.field?.status === "invalid" && field?.field?.errors?.length ? field.field.errors[0] : void 0;
+	const { form: _form, ...fieldWithoutForm } = field ?? {};
+	const result = isOutsideOfForm ? props : mergeProps(props, fieldWithoutForm, valueProps, {
+		validateTrigger: field.validateTrigger ?? defaultValidationTrigger,
+		onBlur: onBlurChained,
+		errorMessage: compiledErrorMessage
+	});
+	if (result.id) {
+		if (!result.labelProps) result.labelProps = {};
+		result.labelProps.for = result.id;
+	}
+	useDebugValue(result);
+	return result;
+}
+
+//#endregion
+export { useFieldProps };
+//# sourceMappingURL=use-field-props.js.map

package/dist/components/form/Form/use-field/use-field-props.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-field-props.js","names":[],"sources":["../../../../../src/components/form/Form/use-field/use-field-props.tsx"],"sourcesContent":["import { useDebugValue, useId, useRef } from 'react';\n\nimport { useChainedCallback, useEvent } from '../../../../_internal/index';\nimport { mergeProps } from '../../../../utils/react/index';\nimport { warn } from '../../../../utils/warnings';\nimport { useInsideLegacyField } from '../Field';\n\nimport { useField } from './use-field';\n\nimport type { ValidateTrigger } from '../../../../shared/index';\nimport type { FieldTypes } from '../types';\nimport type { UseFieldProps } from './types';\n\nexport type UseFieldPropsParams = {\n  valuePropsMapper?: ({ value, onChange }) => any;\n  /**\n   * @default 'onBlur'\n   */\n  defaultValidationTrigger?: ValidateTrigger;\n  /**\n   * prop helps to prevent calling hook conditionally, but changing this prop during render is unsafe and forbidden\n   * If you want to change this prop after mount, remount the component with a new value.\n   */\n  unsafe__isDisabled?: boolean;\n};\n\nexport function useFieldProps<\n  T extends FieldTypes,\n  Props extends UseFieldProps<T>,\n>(props: Props, params: UseFieldPropsParams = {}): Props {\n  // We use ref here to \"memoize\" initial value\n  const isDisabledRef = useRef(params.unsafe__isDisabled ?? false);\n\n  const {\n    valuePropsMapper = ({ value, onChange }) => {\n      return {\n        value: value ?? null,\n        onChange,\n      };\n    },\n    defaultValidationTrigger = 'onBlur',\n  } = params;\n\n  const isInsideLegacyField = useInsideLegacyField();\n\n  // useWarn(isInsideLegacyField, {\n  //   key: 'use-field-props',\n  //   args: ['<Field /> is deprecated, use component without <Field /> instead.'],\n  // });\n\n  if (props.rules && !props.name) {\n    warn(\n      `The \"rules\" prop is not suitable for fields that are not part of a form. Use \"name\" prop to link the field to a form.`,\n    );\n  }\n\n  if (isInsideLegacyField || isDisabledRef.current === true) {\n    return props;\n  }\n\n  // For standalone fields (no name), just generate an ID without calling useField\n  const hasName = props.name != null;\n  const generatedId = useId();\n\n  if (!hasName) {\n    // Standalone field - just add generated ID if not provided\n    if (!props.id) {\n      const result = { ...props, id: generatedId };\n\n      if (result.id && !result.labelProps) {\n        result.labelProps = { for: result.id };\n      } else if (result.id && result.labelProps && !result.labelProps.for) {\n        result.labelProps = { ...result.labelProps, for: result.id };\n      }\n\n      return result as Props;\n    }\n    return props;\n  }\n\n  // Form-connected field - use full useField logic\n  const field = useField<T, Props>(props, {\n    defaultValidationTrigger: params.defaultValidationTrigger,\n  });\n\n  const isOutsideOfForm = field?.form == null;\n\n  if (props.rules && isOutsideOfForm) {\n    warn(\n      `The \"rules\" prop is not supported for fields that are not part of a form. The \"${props.name}\" field is placed outside the form.`,\n    );\n  }\n\n  const onBlurChained = useChainedCallback(\n    field?.onBlur,\n    'onBlur' in props ? (props as any).onBlur : undefined,\n  );\n\n  const onChangeEvent = useEvent((value, dontTouch: boolean) => {\n    field?.onChange?.(\n      value,\n      dontTouch,\n      field?.validateTrigger ?? defaultValidationTrigger,\n    );\n  });\n\n  const valueProps = !isOutsideOfForm\n    ? valuePropsMapper({\n        value: field.value,\n        onChange: onChangeEvent,\n      })\n    : {};\n\n  if (isInsideLegacyField && !isOutsideOfForm) {\n    const valuePropEventNames = !isOutsideOfForm\n      ? Object.keys(valueProps).filter((name) => name.startsWith('on'))\n      : [];\n\n    for (const valuePropName of valuePropEventNames) {\n      if (valuePropName in props) {\n        warn(\n          `The \"${valuePropName}\" listener is not supported for input \"${props.name}\" that is linked to a form via a <Field> component. Remove the <Field> component and move its properties to the input itself.`,\n        );\n      }\n    }\n  }\n\n  // Use errorMessage directly or fall back to validation errors\n  const compiledErrorMessage =\n    props.errorMessage !== undefined\n      ? props.errorMessage\n      : field?.field?.status === 'invalid' && field?.field?.errors?.length\n        ? field.field.errors[0]\n        : undefined;\n\n  // Exclude 'form' from field to prevent it from being spread to DOM elements\n  const { form: _form, ...fieldWithoutForm } = field ?? {};\n\n  const result: Props = isOutsideOfForm\n    ? props\n    : mergeProps(props, fieldWithoutForm, valueProps, {\n        validateTrigger: field.validateTrigger ?? defaultValidationTrigger,\n        onBlur: onBlurChained,\n        errorMessage: compiledErrorMessage,\n      });\n\n  if (result.id) {\n    if (!result.labelProps) {\n      result.labelProps = {};\n    }\n\n    result.labelProps.for = result.id;\n  }\n\n  if (process.env.NODE_ENV === 'development') {\n    useDebugValue(result);\n  }\n\n  return result;\n}\n"],"mappings":";;;;;;;;;;AA0BA,SAAgB,cAGd,OAAc,SAA8B,EAAE,EAAS;CAEvD,MAAM,gBAAgB,OAAO,OAAO,sBAAsB,MAAM;CAEhE,MAAM,EACJ,oBAAoB,EAAE,OAAO,eAAe;AAC1C,SAAO;GACL,OAAO,SAAS;GAChB;GACD;IAEH,2BAA2B,aACzB;CAEJ,MAAM,sBAAsB,sBAAsB;AAOlD,KAAI,MAAM,SAAS,CAAC,MAAM,KACxB,MACE,wHACD;AAGH,KAAI,uBAAuB,cAAc,YAAY,KACnD,QAAO;CAIT,MAAM,UAAU,MAAM,QAAQ;CAC9B,MAAM,cAAc,OAAO;AAE3B,KAAI,CAAC,SAAS;AAEZ,MAAI,CAAC,MAAM,IAAI;GACb,MAAM,SAAS;IAAE,GAAG;IAAO,IAAI;IAAa;AAE5C,OAAI,OAAO,MAAM,CAAC,OAAO,WACvB,QAAO,aAAa,EAAE,KAAK,OAAO,IAAI;YAC7B,OAAO,MAAM,OAAO,cAAc,CAAC,OAAO,WAAW,IAC9D,QAAO,aAAa;IAAE,GAAG,OAAO;IAAY,KAAK,OAAO;IAAI;AAG9D,UAAO;;AAET,SAAO;;CAIT,MAAM,QAAQ,SAAmB,OAAO,EACtC,0BAA0B,OAAO,0BAClC,CAAC;CAEF,MAAM,kBAAkB,OAAO,QAAQ;AAEvC,KAAI,MAAM,SAAS,gBACjB,MACE,kFAAkF,MAAM,KAAK,qCAC9F;CAGH,MAAM,gBAAgB,mBACpB,OAAO,QACP,YAAY,QAAS,MAAc,SAAS,OAC7C;CAED,MAAM,gBAAgB,UAAU,OAAO,cAAuB;AAC5D,SAAO,WACL,OACA,WACA,OAAO,mBAAmB,yBAC3B;GACD;CAEF,MAAM,aAAa,CAAC,kBAChB,iBAAiB;EACf,OAAO,MAAM;EACb,UAAU;EACX,CAAC,GACF,EAAE;AAEN,KAAI,uBAAuB,CAAC,iBAAiB;EAC3C,MAAM,sBAAsB,CAAC,kBACzB,OAAO,KAAK,WAAW,CAAC,QAAQ,SAAS,KAAK,WAAW,KAAK,CAAC,GAC/D,EAAE;AAEN,OAAK,MAAM,iBAAiB,oBAC1B,KAAI,iBAAiB,MACnB,MACE,QAAQ,cAAc,yCAAyC,MAAM,KAAK,+HAC3E;;CAMP,MAAM,uBACJ,MAAM,iBAAiB,SACnB,MAAM,eACN,OAAO,OAAO,WAAW,aAAa,OAAO,OAAO,QAAQ,SAC1D,MAAM,MAAM,OAAO,KACnB;CAGR,MAAM,EAAE,MAAM,OAAO,GAAG,qBAAqB,SAAS,EAAE;CAExD,MAAM,SAAgB,kBAClB,QACA,WAAW,OAAO,kBAAkB,YAAY;EAC9C,iBAAiB,MAAM,mBAAmB;EAC1C,QAAQ;EACR,cAAc;EACf,CAAC;AAEN,KAAI,OAAO,IAAI;AACb,MAAI,CAAC,OAAO,WACV,QAAO,aAAa,EAAE;AAGxB,SAAO,WAAW,MAAM,OAAO;;AAI/B,eAAc,OAAO;AAGvB,QAAO"}

package/dist/components/form/Form/use-field/use-field.d.ts

@@ -0,0 +1,14 @@
+
+import { ValidateTrigger } from "../../../../shared/form.js";
+import "../../../../shared/index.js";
+import { FieldTypes } from "../types.js";
+import { FieldReturnValue, UseFieldProps } from "./types.js";
+
+//#region src/components/form/Form/use-field/use-field.d.ts
+type UseFieldParams = {
+  defaultValidationTrigger?: ValidateTrigger;
+};
+declare function useField<T extends FieldTypes, Props extends UseFieldProps<T>>(props: Props, params: UseFieldParams): FieldReturnValue<T>;
+//#endregion
+export { UseFieldParams, useField };
+//# sourceMappingURL=use-field.d.ts.map