@rxdrag/form 0.1.0

package/dist/index.mjs

@@ -0,0 +1,983 @@
+import * as React from "react";
+import React__default, { createContext, useContext, useRef, useCallback, useMemo, useEffect, useId } from "react";
+import { useForm, useStore } from "@tanstack/react-form";
+import { useStore as useStore2 } from "@tanstack/react-form";
+import { Button, cn, Label, InputGroup, InputGroupAddon, InputGroupInput, Textarea as Textarea$1, Select as Select$1, SelectTrigger, SelectValue, SelectContent, SelectItem, Checkbox as Checkbox$1 } from "@rxdrag/shadcn";
+import { EyeClosedIcon, EyeIcon } from "@rxdrag/rxcms-common";
+const AppFormContext = createContext(
+  void 0
+);
+function useAppFormContext() {
+  const ctx = useContext(AppFormContext);
+  if (!ctx)
+    throw new Error("useAppFormContext 必须在 <AppForm> 内使用");
+  return ctx;
+}
+function useMaybeAppFormContext() {
+  return useContext(AppFormContext);
+}
+const FieldNamePrefixContext = createContext("");
+function useFieldNamePrefix() {
+  return useContext(FieldNamePrefixContext);
+}
+function joinFieldName(prefix, name) {
+  if (!prefix)
+    return name;
+  if (!name)
+    return prefix;
+  return `${prefix}.${name}`;
+}
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production = {};
+/**
+ * @license React
+ * react-jsx-runtime.production.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactJsxRuntime_production;
+function requireReactJsxRuntime_production() {
+  if (hasRequiredReactJsxRuntime_production)
+    return reactJsxRuntime_production;
+  hasRequiredReactJsxRuntime_production = 1;
+  var REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment");
+  function jsxProd(type, config, maybeKey) {
+    var key = null;
+    void 0 !== maybeKey && (key = "" + maybeKey);
+    void 0 !== config.key && (key = "" + config.key);
+    if ("key" in config) {
+      maybeKey = {};
+      for (var propName in config)
+        "key" !== propName && (maybeKey[propName] = config[propName]);
+    } else
+      maybeKey = config;
+    config = maybeKey.ref;
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type,
+      key,
+      ref: void 0 !== config ? config : null,
+      props: maybeKey
+    };
+  }
+  reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+  reactJsxRuntime_production.jsx = jsxProd;
+  reactJsxRuntime_production.jsxs = jsxProd;
+  return reactJsxRuntime_production;
+}
+var reactJsxRuntime_development = {};
+/**
+ * @license React
+ * react-jsx-runtime.development.js
+ *
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+var hasRequiredReactJsxRuntime_development;
+function requireReactJsxRuntime_development() {
+  if (hasRequiredReactJsxRuntime_development)
+    return reactJsxRuntime_development;
+  hasRequiredReactJsxRuntime_development = 1;
+  "production" !== process.env.NODE_ENV && function() {
+    function getComponentNameFromType(type) {
+      if (null == type)
+        return null;
+      if ("function" === typeof type)
+        return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
+      if ("string" === typeof type)
+        return type;
+      switch (type) {
+        case REACT_FRAGMENT_TYPE:
+          return "Fragment";
+        case REACT_PROFILER_TYPE:
+          return "Profiler";
+        case REACT_STRICT_MODE_TYPE:
+          return "StrictMode";
+        case REACT_SUSPENSE_TYPE:
+          return "Suspense";
+        case REACT_SUSPENSE_LIST_TYPE:
+          return "SuspenseList";
+        case REACT_ACTIVITY_TYPE:
+          return "Activity";
+      }
+      if ("object" === typeof type)
+        switch ("number" === typeof type.tag && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), type.$$typeof) {
+          case REACT_PORTAL_TYPE:
+            return "Portal";
+          case REACT_CONTEXT_TYPE:
+            return type.displayName || "Context";
+          case REACT_CONSUMER_TYPE:
+            return (type._context.displayName || "Context") + ".Consumer";
+          case REACT_FORWARD_REF_TYPE:
+            var innerType = type.render;
+            type = type.displayName;
+            type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
+            return type;
+          case REACT_MEMO_TYPE:
+            return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
+          case REACT_LAZY_TYPE:
+            innerType = type._payload;
+            type = type._init;
+            try {
+              return getComponentNameFromType(type(innerType));
+            } catch (x) {
+            }
+        }
+      return null;
+    }
+    function testStringCoercion(value) {
+      return "" + value;
+    }
+    function checkKeyStringCoercion(value) {
+      try {
+        testStringCoercion(value);
+        var JSCompiler_inline_result = false;
+      } catch (e) {
+        JSCompiler_inline_result = true;
+      }
+      if (JSCompiler_inline_result) {
+        JSCompiler_inline_result = console;
+        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
+        JSCompiler_temp_const.call(
+          JSCompiler_inline_result,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          JSCompiler_inline_result$jscomp$0
+        );
+        return testStringCoercion(value);
+      }
+    }
+    function getTaskName(type) {
+      if (type === REACT_FRAGMENT_TYPE)
+        return "<>";
+      if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
+        return "<...>";
+      try {
+        var name = getComponentNameFromType(type);
+        return name ? "<" + name + ">" : "<...>";
+      } catch (x) {
+        return "<...>";
+      }
+    }
+    function getOwner() {
+      var dispatcher = ReactSharedInternals.A;
+      return null === dispatcher ? null : dispatcher.getOwner();
+    }
+    function UnknownOwner() {
+      return Error("react-stack-top-frame");
+    }
+    function hasValidKey(config) {
+      if (hasOwnProperty.call(config, "key")) {
+        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+        if (getter && getter.isReactWarning)
+          return false;
+      }
+      return void 0 !== config.key;
+    }
+    function defineKeyPropWarningGetter(props, displayName) {
+      function warnAboutAccessingKey() {
+        specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          displayName
+        ));
+      }
+      warnAboutAccessingKey.isReactWarning = true;
+      Object.defineProperty(props, "key", {
+        get: warnAboutAccessingKey,
+        configurable: true
+      });
+    }
+    function elementRefGetterWithDeprecationWarning() {
+      var componentName = getComponentNameFromType(this.type);
+      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      ));
+      componentName = this.props.ref;
+      return void 0 !== componentName ? componentName : null;
+    }
+    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+      var refProp = props.ref;
+      type = {
+        $$typeof: REACT_ELEMENT_TYPE,
+        type,
+        key,
+        props,
+        _owner: owner
+      };
+      null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
+        enumerable: false,
+        get: elementRefGetterWithDeprecationWarning
+      }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+      type._store = {};
+      Object.defineProperty(type._store, "validated", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: 0
+      });
+      Object.defineProperty(type, "_debugInfo", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: null
+      });
+      Object.defineProperty(type, "_debugStack", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugStack
+      });
+      Object.defineProperty(type, "_debugTask", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugTask
+      });
+      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+      return type;
+    }
+    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
+      var children = config.children;
+      if (void 0 !== children)
+        if (isStaticChildren)
+          if (isArrayImpl(children)) {
+            for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
+              validateChildKeys(children[isStaticChildren]);
+            Object.freeze && Object.freeze(children);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else
+          validateChildKeys(children);
+      if (hasOwnProperty.call(config, "key")) {
+        children = getComponentNameFromType(type);
+        var keys = Object.keys(config).filter(function(k) {
+          return "key" !== k;
+        });
+        isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
+        didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
+          'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+          isStaticChildren,
+          children,
+          keys,
+          children
+        ), didWarnAboutKeySpread[children + isStaticChildren] = true);
+      }
+      children = null;
+      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
+      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
+      if ("key" in config) {
+        maybeKey = {};
+        for (var propName in config)
+          "key" !== propName && (maybeKey[propName] = config[propName]);
+      } else
+        maybeKey = config;
+      children && defineKeyPropWarningGetter(
+        maybeKey,
+        "function" === typeof type ? type.displayName || type.name || "Unknown" : type
+      );
+      return ReactElement(
+        type,
+        children,
+        maybeKey,
+        getOwner(),
+        debugStack,
+        debugTask
+      );
+    }
+    function validateChildKeys(node) {
+      isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
+    }
+    function isValidElement(object) {
+      return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    var React2 = React__default, REACT_ELEMENT_TYPE = Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = Symbol.for("react.memo"), REACT_LAZY_TYPE = Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = Symbol.for("react.client.reference"), ReactSharedInternals = React2.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    React2 = {
+      react_stack_bottom_frame: function(callStackForError) {
+        return callStackForError();
+      }
+    };
+    var specialPropKeyWarningShown;
+    var didWarnAboutElementRef = {};
+    var unknownOwnerDebugStack = React2.react_stack_bottom_frame.bind(
+      React2,
+      UnknownOwner
+    )();
+    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+    var didWarnAboutKeySpread = {};
+    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+    reactJsxRuntime_development.jsx = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        false,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+    reactJsxRuntime_development.jsxs = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        true,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+  }();
+  return reactJsxRuntime_development;
+}
+if (process.env.NODE_ENV === "production") {
+  jsxRuntime.exports = requireReactJsxRuntime_production();
+} else {
+  jsxRuntime.exports = requireReactJsxRuntime_development();
+}
+var jsxRuntimeExports = jsxRuntime.exports;
+function useAppForm(opts) {
+  const submitRef = useRef(opts.onSubmit);
+  submitRef.current = opts.onSubmit;
+  const appOptionsRef = useRef(null);
+  if (!appOptionsRef.current) {
+    appOptionsRef.current = {
+      defaultValues: opts.defaultValues,
+      onSubmit: async ({ value }) => {
+        var _a;
+        await ((_a = submitRef.current) == null ? void 0 : _a.call(submitRef, value));
+      }
+    };
+  }
+  const form = useForm(appOptionsRef.current);
+  form.__appOptions = appOptionsRef.current;
+  return form;
+}
+function syncAppDefaults(form, next) {
+  const appOptions = form.__appOptions;
+  if (appOptions)
+    appOptions.defaultValues = next;
+}
+function refillForm(form, next) {
+  form.reset(next);
+  syncAppDefaults(form, next);
+}
+function commitForm(form, patch) {
+  const current = form.state.values;
+  refillForm(form, { ...current, ...patch });
+}
+function AppForm(props) {
+  const { form, children, className, style, onDirtyChange } = props;
+  const metasRef = useRef([]);
+  const registerFieldMeta = useCallback((meta) => {
+    metasRef.current = [...metasRef.current, meta];
+    return () => {
+      metasRef.current = metasRef.current.filter((m) => m !== meta);
+    };
+  }, []);
+  const getFieldMetas = useCallback(() => metasRef.current, []);
+  const ctx = useMemo(
+    () => ({ form, registerFieldMeta, getFieldMetas, name: props.name }),
+    [form, registerFieldMeta, getFieldMetas, props.name]
+  );
+  const isDefaultValue = useStore(form.store, (s) => s.isDefaultValue);
+  useEffect(() => {
+    onDirtyChange == null ? void 0 : onDirtyChange(!isDefaultValue);
+  }, [isDefaultValue, onDirtyChange]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AppFormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "form",
+    {
+      className,
+      style,
+      onSubmit: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        void form.handleSubmit();
+      },
+      children
+    }
+  ) });
+}
+function SubmitButton(props) {
+  const { form } = useAppFormContext();
+  const isSubmitting = useStore(form.store, (s) => s.isSubmitting);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Button,
+    {
+      type: "submit",
+      className: "cursor-pointer",
+      loading: isSubmitting,
+      disabled: isSubmitting || props.disabled,
+      ...props
+    }
+  );
+}
+const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+const URL_RE = /^https?:\/\/[^\s]+$/i;
+function isEmpty(v) {
+  if (v === void 0 || v === null || v === "")
+    return true;
+  if (Array.isArray(v) && v.length === 0)
+    return true;
+  return false;
+}
+function buildFieldValidators(props, label) {
+  const { validateSchema, zodSchema } = props;
+  const required = props.required ?? (validateSchema == null ? void 0 : validateSchema.required);
+  const rules = validateSchema == null ? void 0 : validateSchema.rules;
+  if (!required && !zodSchema && !rules)
+    return void 0;
+  const requiredMessage = typeof required === "string" ? required : `请输入${typeof label === "string" ? label : ""}`;
+  const validate = ({ value }) => {
+    var _a, _b, _c;
+    if (required && isEmpty(value))
+      return requiredMessage;
+    if (!isEmpty(value)) {
+      const s = typeof value === "string" ? value : String(value ?? "");
+      if ((rules == null ? void 0 : rules.max) && s.length > rules.max.value) {
+        return rules.max.message || `长度不能超过 ${rules.max.value} 个字符`;
+      }
+      if ((rules == null ? void 0 : rules.min) && s.length < rules.min.value) {
+        return rules.min.message || `长度不能少于 ${rules.min.value} 个字符`;
+      }
+      if ((rules == null ? void 0 : rules.email) && !EMAIL_RE.test(s)) {
+        return typeof rules.email === "object" && rules.email.message || "请输入合法的邮箱";
+      }
+      if ((rules == null ? void 0 : rules.url) && !URL_RE.test(s)) {
+        return typeof rules.url === "object" && rules.url.message || "请输入合法的网址";
+      }
+      if (zodSchema) {
+        const r = zodSchema.safeParse(value);
+        if (!r.success)
+          return ((_c = (_b = (_a = r.error) == null ? void 0 : _a.issues) == null ? void 0 : _b[0]) == null ? void 0 : _c.message) || "格式不正确";
+      }
+    }
+    return void 0;
+  };
+  return { onChange: validate, onSubmit: validate };
+}
+function firstErrorMessage(errors) {
+  const e = errors == null ? void 0 : errors[0];
+  if (!e)
+    return void 0;
+  if (typeof e === "string")
+    return e;
+  if (typeof e === "object" && e && "message" in e)
+    return String(e.message);
+  return String(e);
+}
+const LEGACY_KEYS = [
+  "required",
+  "zodSchema",
+  "validateSchema",
+  "coerce",
+  "valueComputer",
+  "initialValue",
+  "defaultValue"
+];
+function bindField(Component, options) {
+  const { displayDefault = "", controlType } = options || {};
+  return function BoundField(props) {
+    const all = props;
+    const { name, required, coerce } = all;
+    const { form, registerFieldMeta } = useAppFormContext();
+    const prefix = useFieldNamePrefix();
+    const fullName = name ? joinFieldName(prefix, name) : "";
+    const id = useId();
+    const rest = {};
+    for (const key of Object.keys(all)) {
+      if (key === "name")
+        continue;
+      if (LEGACY_KEYS.includes(key))
+        continue;
+      rest[key] = all[key];
+    }
+    const labelText = typeof rest.label === "string" ? rest.label : void 0;
+    useEffect(() => {
+      if (!name)
+        return;
+      return registerFieldMeta({ name: fullName, label: labelText, type: controlType });
+    }, [name, fullName, labelText, registerFieldMeta]);
+    const validators = buildFieldValidators(
+      { required, zodSchema: all.zodSchema, validateSchema: all.validateSchema },
+      labelText
+    );
+    if (!name) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Component,
+        {
+          id,
+          ...required ? { requried: true } : void 0,
+          ...rest
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(form.Field, { name: fullName, validators, children: (field) => {
+      const raw = field.state.value;
+      const errorMessage = firstErrorMessage(field.state.meta.errors);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Component,
+        {
+          id,
+          ...required ? { requried: true } : void 0,
+          ...rest,
+          value: raw === void 0 || raw === null ? displayDefault : raw,
+          onValueChange: (v) => {
+            field.handleChange(coerce ? coerce(v) : v);
+          },
+          isInvalid: !!errorMessage,
+          errorMessage
+        }
+      );
+    } });
+  };
+}
+function Input(props) {
+  const {
+    id: idProp,
+    label,
+    labelPlacement,
+    description,
+    isInvalid,
+    errorMessage,
+    onValueChange,
+    startContent,
+    endContent,
+    className,
+    classNames,
+    size,
+    variant,
+    required,
+    requried,
+    onChange,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const reactId = React.useId();
+  const id = idProp ?? reactId;
+  const requiredFlag = required ?? requried;
+  const invalid = Boolean(isInvalid || errorMessage);
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e);
+    onValueChange == null ? void 0 : onValueChange(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("grid w-full gap-2", className, classNames == null ? void 0 : classNames.base), children: [
+    label && labelPlacement !== "inside" ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Label, { className: cn("text-sm", classNames == null ? void 0 : classNames.label), htmlFor: id, children: [
+      label,
+      requiredFlag ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "ml-1 text-destructive", children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      InputGroup,
+      {
+        className: cn("overflow-hidden", classNames == null ? void 0 : classNames.inputWrapper),
+        "data-disabled": rest.disabled ? true : void 0,
+        size,
+        variant,
+        children: [
+          startContent ? /* @__PURE__ */ jsxRuntimeExports.jsx(InputGroupAddon, { align: "inline-start", children: startContent }) : null,
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            InputGroupInput,
+            {
+              "aria-invalid": ariaInvalid ?? invalid,
+              className: classNames == null ? void 0 : classNames.input,
+              id,
+              onChange: handleChange,
+              required: requiredFlag,
+              size,
+              ...rest
+            }
+          ),
+          endContent ? /* @__PURE__ */ jsxRuntimeExports.jsx(InputGroupAddon, { align: "inline-end", children: endContent }) : null
+        ]
+      }
+    ),
+    invalid ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-xs text-destructive", classNames == null ? void 0 : classNames.errorMessage), children: errorMessage }) : description ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn("text-xs text-muted-foreground", classNames == null ? void 0 : classNames.description),
+        children: description
+      }
+    ) : null
+  ] });
+}
+function Textarea(props) {
+  const {
+    id: idProp,
+    label,
+    labelPlacement,
+    description,
+    isInvalid,
+    errorMessage,
+    onValueChange,
+    required,
+    requried,
+    minRows,
+    rows,
+    className,
+    classNames,
+    onChange,
+    "aria-invalid": ariaInvalid,
+    ...rest
+  } = props;
+  const rowsValue = rows ?? minRows;
+  const reactId = React.useId();
+  const id = idProp ?? reactId;
+  const invalid = Boolean(isInvalid || errorMessage);
+  const requiredFlag = required ?? requried;
+  const handleChange = (e) => {
+    onChange == null ? void 0 : onChange(e);
+    onValueChange == null ? void 0 : onValueChange(e.target.value);
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("grid w-full gap-2", className, classNames == null ? void 0 : classNames.base), children: [
+    label && labelPlacement !== "inside" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: cn("text-sm", classNames == null ? void 0 : classNames.label), htmlFor: id, children: label }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Textarea$1,
+      {
+        "aria-invalid": ariaInvalid ?? invalid,
+        className: classNames == null ? void 0 : classNames.textarea,
+        id,
+        onChange: handleChange,
+        required: requiredFlag,
+        rows: rowsValue,
+        ...rest
+      }
+    ),
+    invalid ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-xs text-destructive", classNames == null ? void 0 : classNames.errorMessage), children: errorMessage }) : description ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-xs text-muted-foreground", classNames == null ? void 0 : classNames.description), children: description }) : null
+  ] });
+}
+function Select(props) {
+  const {
+    id: idProp,
+    label,
+    labelPlacement,
+    placeholder,
+    description,
+    isInvalid,
+    errorMessage,
+    value,
+    onValueChange,
+    disabled,
+    className,
+    classNames,
+    children
+  } = props;
+  const reactId = React.useId();
+  const id = idProp ?? reactId;
+  const invalid = Boolean(isInvalid || errorMessage);
+  const valueString = value === void 0 || value === null ? void 0 : String(value);
+  const items = React.useMemo(() => {
+    return React.Children.toArray(children).map((child) => {
+      if (!React.isValidElement(child)) {
+        return null;
+      }
+      const optionValue = child.props.value ?? child.key;
+      if (optionValue === null || optionValue === void 0) {
+        return null;
+      }
+      const disabledFromChild = Boolean(
+        child.props.isDisabled || child.props.disabled
+      );
+      return {
+        value: String(optionValue),
+        label: child.props.children,
+        disabled: disabledFromChild
+      };
+    }).filter(Boolean);
+  }, [children]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("grid w-full gap-2", classNames == null ? void 0 : classNames.base), children: [
+    label && labelPlacement !== "inside" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: cn("text-sm", classNames == null ? void 0 : classNames.label), htmlFor: id, children: label }) : null,
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      Select$1,
+      {
+        value: valueString,
+        onValueChange: (v) => {
+          onValueChange == null ? void 0 : onValueChange(v);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            SelectTrigger,
+            {
+              "aria-invalid": invalid,
+              className: cn(className, classNames == null ? void 0 : classNames.trigger),
+              disabled,
+              id,
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectContent, { className: cn(classNames == null ? void 0 : classNames.content), children: items.map((item) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { disabled: item.disabled, value: item.value, children: item.label }, item.value)) })
+        ]
+      }
+    ),
+    invalid ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-xs text-destructive", classNames == null ? void 0 : classNames.errorMessage), children: errorMessage }) : description ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("text-xs text-muted-foreground", classNames == null ? void 0 : classNames.description), children: description }) : null
+  ] });
+}
+function SingleSelect(props) {
+  const { value, onValueChange, ...rest } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Select,
+    {
+      ...rest,
+      onValueChange: (v) => onValueChange == null ? void 0 : onValueChange(v),
+      value
+    }
+  );
+}
+function Switch(props) {
+  const { value, onValueChange, size = "md", className, children, ...rest } = props;
+  const checked = Boolean(value);
+  const disabled = Boolean(rest.disabled);
+  const toggle = () => onValueChange == null ? void 0 : onValueChange(!checked);
+  const trackClass = cn(
+    "relative inline-flex shrink-0 cursor-pointer items-center rounded-full border border-border transition-colors",
+    checked ? "bg-primary" : "bg-muted",
+    disabled && "cursor-not-allowed opacity-50",
+    size === "sm" && "h-5 w-9",
+    size === "md" && "h-6 w-11",
+    size === "lg" && "h-7 w-14"
+  );
+  const thumbClass = cn(
+    "pointer-events-none inline-block rounded-full bg-background shadow transition-transform",
+    size === "sm" && "ml-0.5 size-4",
+    size === "md" && "ml-0.5 size-5",
+    size === "lg" && "ml-0.5 size-6",
+    checked && size === "sm" && "translate-x-4",
+    checked && size === "md" && "translate-x-5",
+    checked && size === "lg" && "translate-x-7"
+  );
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: cn("inline-flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
+      {
+        "aria-checked": checked,
+        onClick: (e) => {
+          e.preventDefault();
+          if (disabled) {
+            return;
+          }
+          toggle();
+        },
+        role: "switch",
+        type: "button",
+        ...rest,
+        className: trackClass,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: thumbClass })
+      }
+    ),
+    children ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm cursor-pointer", children }) : null
+  ] });
+}
+function Checkbox(props) {
+  const { id: idProp, value, onValueChange, isInvalid, errorMessage, children } = props;
+  const reactId = React.useId();
+  const id = idProp ?? reactId;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-1", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Checkbox$1,
+        {
+          "aria-invalid": isInvalid,
+          checked: !!value,
+          id,
+          onCheckedChange: (checked) => {
+            onValueChange == null ? void 0 : onValueChange(checked === true);
+          }
+        }
+      ),
+      children ? /* @__PURE__ */ jsxRuntimeExports.jsx(Label, { className: "text-sm", htmlFor: id, children }) : null
+    ] }),
+    isInvalid && errorMessage ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-destructive", children: errorMessage }) : null
+  ] });
+}
+function ColorInput(props) {
+  const { value, onValueChange } = props;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "color",
+        value,
+        onChange: (e) => onValueChange == null ? void 0 : onValueChange(e.target.value),
+        className: "w-10 h-10 rounded border border-border cursor-pointer"
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onValueChange == null ? void 0 : onValueChange(e.target.value),
+        className: "border border-input rounded-md px-3 py-1.5 w-32"
+      }
+    )
+  ] });
+}
+function Password(props) {
+  const { endContent, ...rest } = props;
+  const [isVisible, setIsVisible] = React.useState(false);
+  const toggleVisibility = () => setIsVisible(!isVisible);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Input,
+    {
+      endContent: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        endContent,
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            "aria-label": isVisible ? "Hide password" : "Show password",
+            className: "inline-flex size-8 items-center justify-center rounded-md text-muted-foreground hover:text-foreground",
+            onClick: toggleVisibility,
+            type: "button",
+            children: isVisible ? /* @__PURE__ */ jsxRuntimeExports.jsx(EyeClosedIcon, { className: "size-5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(EyeIcon, { className: "size-5" })
+          }
+        )
+      ] }),
+      type: isVisible ? "text" : "password",
+      ...rest
+    }
+  );
+}
+const BaseInputField = bindField(Input, {
+  controlType: "text",
+  displayDefault: ""
+});
+function InputField(props) {
+  const coerce = props.type === "number" ? (raw) => {
+    const s = String(raw ?? "").trim();
+    if (s === "")
+      return void 0;
+    const n = Number(s);
+    return Number.isNaN(n) ? raw : n;
+  } : void 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(BaseInputField, { coerce, ...props });
+}
+const TextareaField = bindField(Textarea, {
+  controlType: "textarea",
+  displayDefault: ""
+});
+const SelectField = bindField(Select, {
+  controlType: "select",
+  displayDefault: ""
+});
+const SingleSelectField = bindField(
+  SingleSelect,
+  { controlType: "select", displayDefault: "" }
+);
+const SwitchField = bindField(Switch, {
+  controlType: "switch",
+  displayDefault: false
+});
+const CheckboxField = bindField(Checkbox, {
+  controlType: "checkbox",
+  displayDefault: false
+});
+const PasswordField = bindField(Password, {
+  controlType: "password",
+  displayDefault: ""
+});
+const ColorField = bindField(ColorInput, {
+  controlType: "color",
+  displayDefault: ""
+});
+function toField(Component, options) {
+  const displayDefault = options && "defaultValue" in options ? options.defaultValue : (options == null ? void 0 : options.displayDefault) ?? "";
+  return bindField(Component, {
+    displayDefault,
+    controlType: options == null ? void 0 : options.controlType
+  });
+}
+function ObjectField(props) {
+  const parentPrefix = useFieldNamePrefix();
+  const prefix = joinFieldName(parentPrefix, props.name);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(FieldNamePrefixContext.Provider, { value: prefix, children: props.children });
+}
+function getByPath(obj, path) {
+  if (!path)
+    return obj;
+  return path.split(".").reduce((acc, key) => acc == null ? acc : acc[key], obj);
+}
+function useFormValues() {
+  const { form } = useAppFormContext();
+  return useStore(form.store, (s) => s.values);
+}
+const useFormValue = useFormValues;
+function useFieldValue(name) {
+  const { form } = useAppFormContext();
+  const prefix = useFieldNamePrefix();
+  const full = joinFieldName(prefix, name);
+  return useStore(form.store, (s) => getByPath(s.values, full));
+}
+function useFormModified() {
+  const { form } = useAppFormContext();
+  const isDefaultValue = useStore(form.store, (s) => s.isDefaultValue);
+  const setModified = useCallback(
+    (v) => {
+      if (!v) {
+        commitForm(form);
+      }
+    },
+    [form]
+  );
+  return { modified: !isDefaultValue, setModified };
+}
+async function validateForm(form) {
+  await form.validateAllFields("submit");
+  return { ok: !!form.state.isValid, value: form.state.values };
+}
+function useSetFieldValue() {
+  const { form } = useAppFormContext();
+  const prefix = useFieldNamePrefix();
+  return (name, value) => form.setFieldValue(joinFieldName(prefix, name), value);
+}
+export {
+  AppForm,
+  AppFormContext,
+  Checkbox,
+  CheckboxField,
+  ColorField,
+  ColorInput,
+  FieldNamePrefixContext,
+  Input,
+  InputField,
+  ObjectField,
+  Password,
+  PasswordField,
+  Select,
+  SelectField,
+  SingleSelect,
+  SingleSelectField,
+  SubmitButton,
+  Switch,
+  SwitchField,
+  Textarea,
+  TextareaField,
+  bindField,
+  buildFieldValidators,
+  commitForm,
+  firstErrorMessage,
+  joinFieldName,
+  refillForm,
+  toField,
+  useAppForm,
+  useAppFormContext,
+  useFieldNamePrefix,
+  useFieldValue,
+  useFormModified,
+  useFormValue,
+  useFormValues,
+  useMaybeAppFormContext,
+  useSetFieldValue,
+  useStore2 as useStore,
+  validateForm
+};
+//# sourceMappingURL=index.mjs.map