@vx-oss/heroui-v2-form 2.1.28-alpha.0

package/LICENSE

@@ -0,0 +1,32 @@
+SPDX-License-Identifier: MIT
+
+The MIT License (MIT)
+
+Parameters
+
+Creator / Maintainer    : Vezham Technologies Private Limited
+Original Author         : NextUI Inc
+Licensor                : Vezham Technologies Private Limited
+
+Copyright © 2025, Vezham Technologies Private Limited. All rights reserved.
+Copyright (c) 2020, NextUI Inc.
+
+---
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @vx-oss/heroui-v2-form
+
+A form is a group of inputs that allows users submit data to a server and supports field validation errors.
+
+Please refer to the [documentation](https://heroui.com/docs/components/form) for more information.
+
+## Installation
+
+```sh
+yarn add @vx-oss/heroui-v2-form
+# or
+npm i @vx-oss/heroui-v2-form
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/dist/base-form.d.mts

@@ -0,0 +1,22 @@
+import { FormProps as FormProps$1 } from '@react-types/form';
+import { DOMProps, ContextValue } from './utils.mjs';
+import React__default from 'react';
+import '@react-types/shared';
+
+interface FormProps extends FormProps$1, DOMProps {
+    /**
+     * Whether to use native HTML form validation to prevent form submission
+     * when a field value is missing or invalid, or mark fields as required
+     * or invalid via ARIA.
+     * @default 'native'
+     */
+    validationBehavior?: "aria" | "native";
+}
+declare const FormContext: React__default.Context<ContextValue<FormProps, HTMLFormElement>>;
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
+
+export { Form, FormContext, type FormProps };

package/dist/base-form.d.ts

@@ -0,0 +1,22 @@
+import { FormProps as FormProps$1 } from '@react-types/form';
+import { DOMProps, ContextValue } from './utils.js';
+import React__default from 'react';
+import '@react-types/shared';
+
+interface FormProps extends FormProps$1, DOMProps {
+    /**
+     * Whether to use native HTML form validation to prevent form submission
+     * when a field value is missing or invalid, or mark fields as required
+     * or invalid via ARIA.
+     * @default 'native'
+     */
+    validationBehavior?: "aria" | "native";
+}
+declare const FormContext: React__default.Context<ContextValue<FormProps, HTMLFormElement>>;
+/**
+ * A form is a group of inputs that allows users to submit data to a server,
+ * with support for providing field validation errors.
+ */
+declare const Form: React__default.ForwardRefExoticComponent<FormProps & React__default.RefAttributes<HTMLFormElement>>;
+
+export { Form, FormContext, type FormProps };

package/dist/base-form.js

@@ -0,0 +1,130 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/base-form.tsx
+var base_form_exports = {};
+__export(base_form_exports, {
+  Form: () => Form,
+  FormContext: () => FormContext
+});
+module.exports = __toCommonJS(base_form_exports);
+var import_form = require("@react-stately/form");
+var import_react2 = require("react");
+var import_heroui_v2_theme = require("@vx-oss/heroui-v2-theme");
+
+// src/utils.ts
+var import_react = require("react");
+var import_heroui_v2_shared_utils = require("@vx-oss/heroui-v2-shared-utils");
+var DEFAULT_SLOT = Symbol("default");
+function useObjectRef(ref) {
+  const objRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(void 0);
+  const refEffect = (0, import_react.useCallback)(
+    (instance) => {
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === "function") {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
+    },
+    [ref]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = void 0;
+        }
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
+      }
+    }),
+    [refEffect]
+  );
+}
+function useSlottedContext(context, slot) {
+  let ctx = (0, import_react.useContext)(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  let { ref: contextRef, ...contextProps } = ctx;
+  let mergedRef = useObjectRef((0, import_react.useMemo)(() => (0, import_heroui_v2_shared_utils.mergeRefs)(ref, contextRef), [ref, contextRef]));
+  let mergedProps = (0, import_heroui_v2_shared_utils.mergeProps)(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        let contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        let defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        let style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
+
+// src/base-form.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormContext = (0, import_react2.createContext)(null);
+var Form = (0, import_react2.forwardRef)(function Form2(props, ref) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  let { validationErrors, validationBehavior = "native", children, className, ...domProps } = props;
+  const styles = (0, import_react2.useMemo)(() => (0, import_heroui_v2_theme.form)({ className }), [className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { noValidate: validationBehavior !== "native", ...domProps, ref, className: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, { value: { ...props, validationBehavior }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form.FormValidationContext.Provider, { value: validationErrors != null ? validationErrors : {}, children }) }) });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormContext
+});

package/dist/base-form.mjs

@@ -0,0 +1,10 @@
+"use client";
+import {
+  Form,
+  FormContext
+} from "./chunk-TTDMASG4.mjs";
+import "./chunk-G2FFP3K6.mjs";
+export {
+  Form,
+  FormContext
+};

package/dist/chunk-6ZVVJ3SO.mjs

@@ -0,0 +1,19 @@
+"use client";
+import {
+  Form
+} from "./chunk-TTDMASG4.mjs";
+
+// src/form.tsx
+import { useProviderContext } from "@vx-oss/heroui-v2-system";
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Form2 = forwardRef(function Form3(props, ref) {
+  var _a, _b;
+  const globalContext = useProviderContext();
+  const validationBehavior = (_b = (_a = props.validationBehavior) != null ? _a : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _b : "native";
+  return /* @__PURE__ */ jsx(Form, { ...props, ref, validationBehavior });
+});
+
+export {
+  Form2 as Form
+};

package/dist/chunk-G2FFP3K6.mjs

@@ -0,0 +1,93 @@
+"use client";
+
+// src/utils.ts
+import { useContext, useMemo, useRef, useCallback } from "react";
+import { mergeProps, mergeRefs } from "@vx-oss/heroui-v2-shared-utils";
+var DEFAULT_SLOT = Symbol("default");
+function useObjectRef(ref) {
+  const objRef = useRef(null);
+  const cleanupRef = useRef(void 0);
+  const refEffect = useCallback(
+    (instance) => {
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === "function") {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
+    },
+    [ref]
+  );
+  return useMemo(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = void 0;
+        }
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
+      }
+    }),
+    [refEffect]
+  );
+}
+function useSlottedContext(context, slot) {
+  let ctx = useContext(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  let { ref: contextRef, ...contextProps } = ctx;
+  let mergedRef = useObjectRef(useMemo(() => mergeRefs(ref, contextRef), [ref, contextRef]));
+  let mergedProps = mergeProps(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        let contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        let defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        let style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
+
+export {
+  DEFAULT_SLOT,
+  useObjectRef,
+  useSlottedContext,
+  useContextProps
+};

package/dist/chunk-TTDMASG4.mjs

@@ -0,0 +1,22 @@
+"use client";
+import {
+  useContextProps
+} from "./chunk-G2FFP3K6.mjs";
+
+// src/base-form.tsx
+import { FormValidationContext } from "@react-stately/form";
+import { createContext, forwardRef, useMemo } from "react";
+import { form } from "@vx-oss/heroui-v2-theme";
+import { jsx } from "react/jsx-runtime";
+var FormContext = createContext(null);
+var Form = forwardRef(function Form2(props, ref) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  let { validationErrors, validationBehavior = "native", children, className, ...domProps } = props;
+  const styles = useMemo(() => form({ className }), [className]);
+  return /* @__PURE__ */ jsx("form", { noValidate: validationBehavior !== "native", ...domProps, ref, className: styles, children: /* @__PURE__ */ jsx(FormContext.Provider, { value: { ...props, validationBehavior }, children: /* @__PURE__ */ jsx(FormValidationContext.Provider, { value: validationErrors != null ? validationErrors : {}, children }) }) });
+});
+
+export {
+  FormContext,
+  Form
+};

package/dist/form.d.mts

@@ -0,0 +1,9 @@
+import { FormProps } from './base-form.mjs';
+import './utils.mjs';
+import * as React from 'react';
+import '@react-types/form';
+import '@react-types/shared';
+
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+
+export { Form };

package/dist/form.d.ts

@@ -0,0 +1,9 @@
+import { FormProps } from './base-form.js';
+import './utils.js';
+import * as React from 'react';
+import '@react-types/form';
+import '@react-types/shared';
+
+declare const Form: React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>>;
+
+export { Form };

package/dist/form.js

@@ -0,0 +1,141 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/form.tsx
+var form_exports = {};
+__export(form_exports, {
+  Form: () => Form3
+});
+module.exports = __toCommonJS(form_exports);
+var import_heroui_v2_system = require("@vx-oss/heroui-v2-system");
+var import_react3 = require("react");
+
+// src/base-form.tsx
+var import_form = require("@react-stately/form");
+var import_react2 = require("react");
+var import_heroui_v2_theme = require("@vx-oss/heroui-v2-theme");
+
+// src/utils.ts
+var import_react = require("react");
+var import_heroui_v2_shared_utils = require("@vx-oss/heroui-v2-shared-utils");
+var DEFAULT_SLOT = Symbol("default");
+function useObjectRef(ref) {
+  const objRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(void 0);
+  const refEffect = (0, import_react.useCallback)(
+    (instance) => {
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === "function") {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
+    },
+    [ref]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = void 0;
+        }
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
+      }
+    }),
+    [refEffect]
+  );
+}
+function useSlottedContext(context, slot) {
+  let ctx = (0, import_react.useContext)(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  let { ref: contextRef, ...contextProps } = ctx;
+  let mergedRef = useObjectRef((0, import_react.useMemo)(() => (0, import_heroui_v2_shared_utils.mergeRefs)(ref, contextRef), [ref, contextRef]));
+  let mergedProps = (0, import_heroui_v2_shared_utils.mergeProps)(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        let contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        let defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        let style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
+
+// src/base-form.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormContext = (0, import_react2.createContext)(null);
+var Form = (0, import_react2.forwardRef)(function Form2(props, ref) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  let { validationErrors, validationBehavior = "native", children, className, ...domProps } = props;
+  const styles = (0, import_react2.useMemo)(() => (0, import_heroui_v2_theme.form)({ className }), [className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { noValidate: validationBehavior !== "native", ...domProps, ref, className: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, { value: { ...props, validationBehavior }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form.FormValidationContext.Provider, { value: validationErrors != null ? validationErrors : {}, children }) }) });
+});
+
+// src/form.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Form3 = (0, import_react3.forwardRef)(function Form4(props, ref) {
+  var _a, _b;
+  const globalContext = (0, import_heroui_v2_system.useProviderContext)();
+  const validationBehavior = (_b = (_a = props.validationBehavior) != null ? _a : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _b : "native";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Form, { ...props, ref, validationBehavior });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form
+});

package/dist/form.mjs

@@ -0,0 +1,9 @@
+"use client";
+import {
+  Form
+} from "./chunk-6ZVVJ3SO.mjs";
+import "./chunk-TTDMASG4.mjs";
+import "./chunk-G2FFP3K6.mjs";
+export {
+  Form
+};

package/dist/index.d.mts

@@ -0,0 +1,6 @@
+export { FormContext, FormProps } from './base-form.mjs';
+export { useSlottedContext } from './utils.mjs';
+export { Form } from './form.mjs';
+import '@react-types/form';
+import 'react';
+import '@react-types/shared';

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { FormContext, FormProps } from './base-form.js';
+export { useSlottedContext } from './utils.js';
+export { Form } from './form.js';
+import '@react-types/form';
+import 'react';
+import '@react-types/shared';

package/dist/index.js

@@ -0,0 +1,143 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Form: () => Form3,
+  FormContext: () => FormContext,
+  useSlottedContext: () => useSlottedContext
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils.ts
+var import_react = require("react");
+var import_heroui_v2_shared_utils = require("@vx-oss/heroui-v2-shared-utils");
+var DEFAULT_SLOT = Symbol("default");
+function useObjectRef(ref) {
+  const objRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(void 0);
+  const refEffect = (0, import_react.useCallback)(
+    (instance) => {
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === "function") {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
+    },
+    [ref]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = void 0;
+        }
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
+      }
+    }),
+    [refEffect]
+  );
+}
+function useSlottedContext(context, slot) {
+  let ctx = (0, import_react.useContext)(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  let { ref: contextRef, ...contextProps } = ctx;
+  let mergedRef = useObjectRef((0, import_react.useMemo)(() => (0, import_heroui_v2_shared_utils.mergeRefs)(ref, contextRef), [ref, contextRef]));
+  let mergedProps = (0, import_heroui_v2_shared_utils.mergeProps)(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        let contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        let defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        let style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
+
+// src/base-form.tsx
+var import_form = require("@react-stately/form");
+var import_react2 = require("react");
+var import_heroui_v2_theme = require("@vx-oss/heroui-v2-theme");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormContext = (0, import_react2.createContext)(null);
+var Form = (0, import_react2.forwardRef)(function Form2(props, ref) {
+  [props, ref] = useContextProps(props, ref, FormContext);
+  let { validationErrors, validationBehavior = "native", children, className, ...domProps } = props;
+  const styles = (0, import_react2.useMemo)(() => (0, import_heroui_v2_theme.form)({ className }), [className]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("form", { noValidate: validationBehavior !== "native", ...domProps, ref, className: styles, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FormContext.Provider, { value: { ...props, validationBehavior }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_form.FormValidationContext.Provider, { value: validationErrors != null ? validationErrors : {}, children }) }) });
+});
+
+// src/form.tsx
+var import_heroui_v2_system = require("@vx-oss/heroui-v2-system");
+var import_react3 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Form3 = (0, import_react3.forwardRef)(function Form4(props, ref) {
+  var _a, _b;
+  const globalContext = (0, import_heroui_v2_system.useProviderContext)();
+  const validationBehavior = (_b = (_a = props.validationBehavior) != null ? _a : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _b : "native";
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Form, { ...props, ref, validationBehavior });
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormContext,
+  useSlottedContext
+});

package/dist/index.mjs

@@ -0,0 +1,15 @@
+"use client";
+import {
+  Form
+} from "./chunk-6ZVVJ3SO.mjs";
+import {
+  FormContext
+} from "./chunk-TTDMASG4.mjs";
+import {
+  useSlottedContext
+} from "./chunk-G2FFP3K6.mjs";
+export {
+  Form,
+  FormContext,
+  useSlottedContext
+};

package/dist/utils.d.mts

@@ -0,0 +1,43 @@
+import { CSSProperties, ReactNode, ForwardedRef, Context, MutableRefObject } from 'react';
+import { DOMProps as DOMProps$1, RefObject } from '@react-types/shared';
+
+declare const DEFAULT_SLOT: unique symbol;
+interface SlottedValue<T> {
+    slots?: Record<string | symbol, T>;
+}
+type WithRef<T, E> = T & {
+    ref?: ForwardedRef<E>;
+};
+type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
+interface StyleProps {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
+    style?: CSSProperties;
+}
+interface DOMProps extends StyleProps, DOMProps$1 {
+    /** The children of the component. */
+    children?: ReactNode;
+}
+interface SlotProps {
+    /**
+     * A slot name for the component. Slots allow the component to receive props from a parent component.
+     * An explicit `null` value indicates that the local props completely override all props received from a parent.
+     */
+    slot?: string | null;
+}
+/**
+ * Offers an object ref for a given callback ref or an object ref. Especially
+ * helfpul when passing forwarded refs (created using `React.forwardRef`) to
+ * React Aria hooks.
+ *
+ * @param ref The original ref intended to be used.
+ * @returns An object ref that updates the given ref.
+ * @see https://react.dev/reference/react/forwardRef
+ */
+declare function useObjectRef<T>(ref?: ((instance: T | null) => (() => void) | void) | MutableRefObject<T | null> | null): MutableRefObject<T | null>;
+declare function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined;
+declare function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>];
+
+export { type ContextValue, DEFAULT_SLOT, type DOMProps, type SlotProps, type SlottedContextValue, type StyleProps, type WithRef, useContextProps, useObjectRef, useSlottedContext };

package/dist/utils.d.ts

@@ -0,0 +1,43 @@
+import { CSSProperties, ReactNode, ForwardedRef, Context, MutableRefObject } from 'react';
+import { DOMProps as DOMProps$1, RefObject } from '@react-types/shared';
+
+declare const DEFAULT_SLOT: unique symbol;
+interface SlottedValue<T> {
+    slots?: Record<string | symbol, T>;
+}
+type WithRef<T, E> = T & {
+    ref?: ForwardedRef<E>;
+};
+type SlottedContextValue<T> = SlottedValue<T> | T | null | undefined;
+type ContextValue<T, E> = SlottedContextValue<WithRef<T, E>>;
+interface StyleProps {
+    /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. */
+    className?: string;
+    /** The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. */
+    style?: CSSProperties;
+}
+interface DOMProps extends StyleProps, DOMProps$1 {
+    /** The children of the component. */
+    children?: ReactNode;
+}
+interface SlotProps {
+    /**
+     * A slot name for the component. Slots allow the component to receive props from a parent component.
+     * An explicit `null` value indicates that the local props completely override all props received from a parent.
+     */
+    slot?: string | null;
+}
+/**
+ * Offers an object ref for a given callback ref or an object ref. Especially
+ * helfpul when passing forwarded refs (created using `React.forwardRef`) to
+ * React Aria hooks.
+ *
+ * @param ref The original ref intended to be used.
+ * @returns An object ref that updates the given ref.
+ * @see https://react.dev/reference/react/forwardRef
+ */
+declare function useObjectRef<T>(ref?: ((instance: T | null) => (() => void) | void) | MutableRefObject<T | null> | null): MutableRefObject<T | null>;
+declare function useSlottedContext<T>(context: Context<SlottedContextValue<T>>, slot?: string | null): T | null | undefined;
+declare function useContextProps<T, U extends SlotProps, E extends Element>(props: T & SlotProps, ref: ForwardedRef<E>, context: Context<ContextValue<U, E>>): [T, RefObject<E | null>];
+
+export { type ContextValue, DEFAULT_SLOT, type DOMProps, type SlotProps, type SlottedContextValue, type StyleProps, type WithRef, useContextProps, useObjectRef, useSlottedContext };

package/dist/utils.js

@@ -0,0 +1,119 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/utils.ts
+var utils_exports = {};
+__export(utils_exports, {
+  DEFAULT_SLOT: () => DEFAULT_SLOT,
+  useContextProps: () => useContextProps,
+  useObjectRef: () => useObjectRef,
+  useSlottedContext: () => useSlottedContext
+});
+module.exports = __toCommonJS(utils_exports);
+var import_react = require("react");
+var import_heroui_v2_shared_utils = require("@vx-oss/heroui-v2-shared-utils");
+var DEFAULT_SLOT = Symbol("default");
+function useObjectRef(ref) {
+  const objRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(void 0);
+  const refEffect = (0, import_react.useCallback)(
+    (instance) => {
+      if (typeof ref === "function") {
+        const refCallback = ref;
+        const refCleanup = refCallback(instance);
+        return () => {
+          if (typeof refCleanup === "function") {
+            refCleanup();
+          } else {
+            refCallback(null);
+          }
+        };
+      } else if (ref) {
+        ref.current = instance;
+        return () => {
+          ref.current = null;
+        };
+      }
+    },
+    [ref]
+  );
+  return (0, import_react.useMemo)(
+    () => ({
+      get current() {
+        return objRef.current;
+      },
+      set current(value) {
+        objRef.current = value;
+        if (cleanupRef.current) {
+          cleanupRef.current();
+          cleanupRef.current = void 0;
+        }
+        if (value != null) {
+          cleanupRef.current = refEffect(value);
+        }
+      }
+    }),
+    [refEffect]
+  );
+}
+function useSlottedContext(context, slot) {
+  let ctx = (0, import_react.useContext)(context);
+  if (slot === null) {
+    return null;
+  }
+  if (ctx && typeof ctx === "object" && "slots" in ctx && ctx.slots) {
+    let availableSlots = new Intl.ListFormat().format(Object.keys(ctx.slots).map((p) => `"${p}"`));
+    if (!slot && !ctx.slots[DEFAULT_SLOT]) {
+      throw new Error(`A slot prop is required. Valid slot names are ${availableSlots}.`);
+    }
+    let slotKey = slot || DEFAULT_SLOT;
+    if (!ctx.slots[slotKey]) {
+      throw new Error(`Invalid slot "${slot}". Valid slot names are ${availableSlots}.`);
+    }
+    return ctx.slots[slotKey];
+  }
+  return ctx;
+}
+function useContextProps(props, ref, context) {
+  let ctx = useSlottedContext(context, props.slot) || {};
+  let { ref: contextRef, ...contextProps } = ctx;
+  let mergedRef = useObjectRef((0, import_react.useMemo)(() => (0, import_heroui_v2_shared_utils.mergeRefs)(ref, contextRef), [ref, contextRef]));
+  let mergedProps = (0, import_heroui_v2_shared_utils.mergeProps)(contextProps, props);
+  if ("style" in contextProps && contextProps.style && "style" in props && props.style) {
+    if (typeof contextProps.style === "function" || typeof props.style === "function") {
+      mergedProps.style = (renderProps) => {
+        let contextStyle = typeof contextProps.style === "function" ? contextProps.style(renderProps) : contextProps.style;
+        let defaultStyle = { ...renderProps.defaultStyle, ...contextStyle };
+        let style = typeof props.style === "function" ? props.style({ ...renderProps, defaultStyle }) : props.style;
+        return { ...defaultStyle, ...style };
+      };
+    } else {
+      mergedProps.style = { ...contextProps.style, ...props.style };
+    }
+  }
+  return [mergedProps, mergedRef];
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_SLOT,
+  useContextProps,
+  useObjectRef,
+  useSlottedContext
+});

package/dist/utils.mjs

@@ -0,0 +1,13 @@
+"use client";
+import {
+  DEFAULT_SLOT,
+  useContextProps,
+  useObjectRef,
+  useSlottedContext
+} from "./chunk-G2FFP3K6.mjs";
+export {
+  DEFAULT_SLOT,
+  useContextProps,
+  useObjectRef,
+  useSlottedContext
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@vx-oss/heroui-v2-form",
+  "version": "2.1.28-alpha.0",
+  "description": "A form is a group of inputs that allows users submit data to a server and supports field validation errors.",
+  "keywords": [
+    "form"
+  ],
+  "author": "Vx OSS Devs <oss-developers@vezham.com>",
+  "homepage": "https://vezham.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vezham/heroui-v2.git",
+    "directory": "packages/components/form"
+  },
+  "bugs": {
+    "url": "https://github.com/vezham/heroui-v2/issues"
+  },
+  "peerDependencies": {
+    "@vx-oss/heroui-v2-system": ">=2.4.24-alpha.0",
+    "@vx-oss/heroui-v2-theme": ">=2.4.24-alpha.0",
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@react-types/shared": "3.32.1",
+    "@react-stately/form": "3.2.2",
+    "@react-types/form": "3.7.16",
+    "@vx-oss/heroui-v2-system": "2.4.24-alpha.0",
+    "@vx-oss/heroui-v2-theme": "2.4.24-alpha.0",
+    "@vx-oss/heroui-v2-shared-utils": "2.1.13-alpha.0"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}