@skygraph/react 0.0.0-placeholder.0 → 0.4.0

package/dist/form.cjs

@@ -0,0 +1,1723 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/form.ts
+var form_exports = {};
+__export(form_exports, {
+  AutoField: () => AutoField,
+  Field: () => Field,
+  Form: () => Form,
+  FormContext: () => FormContext,
+  FormList: () => FormList,
+  FormProvider: () => FormProvider,
+  SchemaForm: () => SchemaForm,
+  SubmitButton: () => SubmitButton,
+  jsonSchemaToDefaults: () => jsonSchemaToDefaults,
+  jsonSchemaToFields: () => jsonSchemaToFields,
+  jsonSchemaToRules: () => jsonSchemaToRules,
+  useField: () => useField,
+  useFieldArray: () => useFieldArray,
+  useForm: () => useForm,
+  useFormContext: () => useFormContext,
+  useFormProvider: () => useFormProvider,
+  useWatch: () => useWatch,
+  zodDefaults: () => zodDefaults,
+  zodRule: () => zodRule,
+  zodRules: () => zodRules,
+  zodToJsonSchema: () => zodToJsonSchema
+});
+module.exports = __toCommonJS(form_exports);
+
+// src/hooks/useField.ts
+var import_react = require("react");
+function useField(core, form, name) {
+  const [value, setValue] = (0, import_react.useState)(() => form.getValue(name));
+  const [meta, setMeta] = (0, import_react.useState)(() => form.getFieldState(name));
+  const nameRef = (0, import_react.useRef)(name);
+  nameRef.current = name;
+  (0, import_react.useEffect)(() => {
+    const unsubs = [];
+    unsubs.push(
+      core.subscribe(name, (v) => {
+        setValue(v);
+      })
+    );
+    unsubs.push(
+      core.subscribe(`$meta.${name}.errors`, () => {
+        setMeta(form.getFieldState(nameRef.current));
+      })
+    );
+    unsubs.push(
+      core.subscribe(`$meta.${name}.warnings`, () => {
+        setMeta(form.getFieldState(nameRef.current));
+      })
+    );
+    unsubs.push(
+      core.subscribe(`$meta.${name}.touched`, () => {
+        setMeta(form.getFieldState(nameRef.current));
+      })
+    );
+    unsubs.push(
+      core.subscribe(`$meta.${name}.dirty`, () => {
+        setMeta(form.getFieldState(nameRef.current));
+      })
+    );
+    unsubs.push(
+      core.subscribe(`$meta.${name}.validating`, () => {
+        setMeta(form.getFieldState(nameRef.current));
+      })
+    );
+    return () => {
+      for (const u of unsubs) u();
+    };
+  }, [core, form, name]);
+  const onChange = (0, import_react.useCallback)(
+    (v) => {
+      form.setValue(nameRef.current, v);
+    },
+    [form]
+  );
+  const onBlur = (0, import_react.useCallback)(() => {
+    form.onFieldBlur(nameRef.current);
+  }, [form]);
+  return {
+    value,
+    errors: meta.errors,
+    warnings: meta.warnings,
+    error: meta.error,
+    touched: meta.touched,
+    dirty: meta.dirty,
+    validating: meta.validating,
+    status: meta.status,
+    onChange,
+    onBlur
+  };
+}
+
+// src/hooks/useForm.ts
+var import_react2 = require("react");
+var import_core = require("@skygraph/core");
+function useForm(options) {
+  const optionsRef = (0, import_react2.useRef)(options);
+  optionsRef.current = options;
+  const [{ core, form }] = (0, import_react2.useState)(() => {
+    const c = (0, import_core.createCore)();
+    const f = (0, import_core.createForm)(c, options);
+    return { core: c, form: f };
+  });
+  const [formState, setFormState] = (0, import_react2.useState)(() => form.getFormState());
+  const refreshState = (0, import_react2.useCallback)(() => {
+    setFormState(form.getFormState());
+  }, [form]);
+  const submit = (0, import_react2.useCallback)(async () => {
+    refreshState();
+    await form.submit(async (values) => {
+      await optionsRef.current?.onSubmit?.(values);
+    });
+    const state = form.getFormState();
+    setFormState(state);
+    if (!state.isValid && optionsRef.current?.onSubmitInvalid) {
+      optionsRef.current.onSubmitInvalid(
+        (await form.validate()).errors
+      );
+    }
+  }, [form, refreshState]);
+  const reset = (0, import_react2.useCallback)(
+    (values) => {
+      form.reset(values);
+      setFormState(form.getFormState());
+    },
+    [form]
+  );
+  const setFieldValue = (0, import_react2.useCallback)(
+    (name, value) => {
+      form.setValue(name, value);
+    },
+    [form]
+  );
+  const setFieldsValue = (0, import_react2.useCallback)(
+    (values) => {
+      form.setFieldsValue(values);
+    },
+    [form]
+  );
+  const getFieldValue = (0, import_react2.useCallback)((name) => form.getValue(name), [form]);
+  const getFieldsValue = (0, import_react2.useCallback)(() => form.getFieldsValue(), [form]);
+  const validateFields = (0, import_react2.useCallback)((name) => form.validate(name), [form]);
+  return (0, import_react2.useMemo)(
+    () => ({
+      core,
+      form,
+      formState,
+      submit,
+      reset,
+      setFieldValue,
+      setFieldsValue,
+      getFieldValue,
+      getFieldsValue,
+      validateFields
+    }),
+    [
+      core,
+      form,
+      formState,
+      submit,
+      reset,
+      setFieldValue,
+      setFieldsValue,
+      getFieldValue,
+      getFieldsValue,
+      validateFields
+    ]
+  );
+}
+
+// src/hooks/useFieldArray.ts
+var import_react3 = require("react");
+function useFieldArray(form, name) {
+  const counterRef = (0, import_react3.useRef)(0);
+  const genKey2 = (0, import_react3.useCallback)(() => `fa_${name}_${++counterRef.current}`, [name]);
+  const [keys, setKeys] = (0, import_react3.useState)(() => {
+    const list = form.getListValue(name);
+    return list.map(() => genKey2());
+  });
+  const fields = (0, import_react3.useMemo)(
+    () => keys.map((key, index) => ({ key, index })),
+    [keys]
+  );
+  const append = (0, import_react3.useCallback)(
+    (defaultValue) => {
+      form.listAdd(name, defaultValue);
+      setKeys((prev) => [...prev, genKey2()]);
+    },
+    [form, name, genKey2]
+  );
+  const remove = (0, import_react3.useCallback)(
+    (index) => {
+      form.listRemove(name, index);
+      setKeys((prev) => prev.filter((_, i) => i !== index));
+    },
+    [form, name]
+  );
+  const move = (0, import_react3.useCallback)(
+    (from, to) => {
+      form.listMove(name, from, to);
+      setKeys((prev) => {
+        const next = [...prev];
+        const [item] = next.splice(from, 1);
+        next.splice(to, 0, item);
+        return next;
+      });
+    },
+    [form, name]
+  );
+  const replace = (0, import_react3.useCallback)(
+    (values) => {
+      const currentLen = form.getListValue(name).length;
+      for (let i = currentLen - 1; i >= 0; i--) {
+        form.listRemove(name, i);
+      }
+      const newKeys = [];
+      for (const v of values) {
+        form.listAdd(name, v);
+        newKeys.push(genKey2());
+      }
+      setKeys(newKeys);
+    },
+    [form, name, genKey2]
+  );
+  return (0, import_react3.useMemo)(
+    () => ({ fields, append, remove, move, replace }),
+    [fields, append, remove, move, replace]
+  );
+}
+
+// src/hooks/useWatch.ts
+var import_react4 = require("react");
+function useWatch(core, name) {
+  const [value, setValue] = (0, import_react4.useState)(() => core.get(name));
+  (0, import_react4.useEffect)(() => {
+    setValue(core.get(name));
+    return core.subscribe(name, (v) => {
+      setValue(v);
+    });
+  }, [core, name]);
+  return value;
+}
+
+// src/components/complex/Form.tsx
+var import_react8 = require("react");
+
+// src/components/complex/FormContext.ts
+var import_react5 = require("react");
+var FormContext = (0, import_react5.createContext)(null);
+function useFormContext() {
+  const ctx = (0, import_react5.useContext)(FormContext);
+  if (!ctx) {
+    throw new Error("SkyGraph: useFormContext must be used inside <Form>");
+  }
+  return ctx;
+}
+
+// src/components/ConfigProvider.tsx
+var import_react6 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var SgConfigContext = (0, import_react6.createContext)({});
+function useConfig() {
+  return (0, import_react6.useContext)(SgConfigContext);
+}
+
+// src/components/complex/FormProvider.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormProviderContext = (0, import_react7.createContext)(null);
+function FormProvider({ onFormFinish, onFormChange, children }) {
+  const formsRef = (0, import_react7.useRef)({});
+  const registerForm = (0, import_react7.useCallback)((name, form) => {
+    formsRef.current[name] = form;
+  }, []);
+  const unregisterForm = (0, import_react7.useCallback)((name) => {
+    delete formsRef.current[name];
+  }, []);
+  const value = (0, import_react7.useMemo)(
+    () => ({
+      registerForm,
+      unregisterForm,
+      onFormFinish,
+      onFormChange
+    }),
+    [registerForm, unregisterForm, onFormFinish, onFormChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(FormProviderContext.Provider, { value, children });
+}
+function useFormProvider() {
+  return (0, import_react7.useContext)(FormProviderContext);
+}
+function useFormProviderRegister(name, form) {
+  const provider = (0, import_react7.useContext)(FormProviderContext);
+  import_react7.default.useEffect(() => {
+    if (!provider || !name) return;
+    provider.registerForm(name, form);
+    return () => provider.unregisterForm(name);
+  }, [provider, name, form]);
+  return provider;
+}
+
+// src/components/complex/Form.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Form({
+  form: externalForm,
+  name: formName,
+  layout = "vertical",
+  size: sizeProp,
+  disabled: disabledProp,
+  colon,
+  requiredMark,
+  labelCol,
+  wrapperCol,
+  labelAlign,
+  className,
+  style,
+  children,
+  scrollToFirstError,
+  preserve,
+  feedbackIcons,
+  onFinish,
+  initialValues,
+  ...formOptions
+}) {
+  const config = useConfig();
+  const size = sizeProp ?? config.size ?? "middle";
+  const disabled = disabledProp ?? config.disabled;
+  const mergedFormOptions = {
+    ...formOptions,
+    defaultValues: formOptions.defaultValues ?? initialValues,
+    onSubmit: async (values) => {
+      await formOptions.onSubmit?.(values);
+      await onFinish?.(values);
+    }
+  };
+  const internalForm = useForm(externalForm ? void 0 : mergedFormOptions);
+  const { core, form, submit } = externalForm ?? internalForm;
+  const formRef = (0, import_react8.useRef)(null);
+  useFormProviderRegister(formName, form);
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    await submit();
+    if (scrollToFirstError) {
+      const result = await form.validate();
+      if (!result.valid) {
+        const firstErrorField = Object.keys(result.errors)[0];
+        if (firstErrorField && formRef.current) {
+          const el = formRef.current.querySelector(`[data-field-name="${firstErrorField}"]`) ?? formRef.current.querySelector(`[name="${firstErrorField}"]`);
+          if (el) {
+            const scrollOpts = typeof scrollToFirstError === "object" ? scrollToFirstError : { behavior: "smooth", block: "center" };
+            el.scrollIntoView(scrollOpts);
+          }
+        }
+      }
+    }
+  };
+  const classes = ["sg-form", `sg-form-${layout}`, `sg-form-${size}`];
+  if (disabled) classes.push("sg-form-disabled");
+  if (className) classes.push(className);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    FormContext.Provider,
+    {
+      value: {
+        core,
+        form,
+        layout,
+        size,
+        disabled,
+        colon,
+        requiredMark,
+        labelCol,
+        wrapperCol,
+        labelAlign,
+        preserve,
+        feedbackIcons
+      },
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "form",
+        {
+          ref: formRef,
+          name: formName,
+          className: classes.join(" "),
+          style,
+          onSubmit: handleSubmit,
+          noValidate: true,
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/complex/Field.tsx
+var import_react13 = require("react");
+
+// src/components/ui/Spin.tsx
+var import_react9 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Spin({
+  spinning = true,
+  size: sizeProp,
+  delay,
+  tip,
+  fullscreen,
+  indicator,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const resolvedSize = sizeProp ?? config.size ?? "middle";
+  const [visible, setVisible] = import_react9.default.useState(delay ? false : spinning);
+  import_react9.default.useEffect(() => {
+    if (!delay) {
+      setVisible(spinning);
+      return;
+    }
+    if (spinning) {
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }
+    setVisible(false);
+  }, [spinning, delay]);
+  if (!visible && !children) return null;
+  if (!visible && children) return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children });
+  const spinSizeClass = resolvedSize === "middle" ? "default" : resolvedSize;
+  const spinClasses = unstyled ? className ?? "" : ["sg-spin", `sg-spin-${spinSizeClass}`, className].filter(Boolean).join(" ");
+  const spinElement = indicator ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "span",
+    {
+      className: spinClasses,
+      style,
+      role: "status",
+      "aria-live": "polite",
+      "aria-label": config.locale?.spin?.loading ?? "Loading"
+    }
+  );
+  if (fullscreen) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: unstyled ? "" : "sg-spin-fullscreen", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: unstyled ? "" : "sg-spin-fullscreen-inner", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }) });
+  }
+  if (!children) {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: unstyled ? "" : "sg-spin-standalone", style, children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: unstyled ? "" : "sg-spin-container", style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: unstyled ? "" : "sg-spin-overlay", children: [
+      spinElement,
+      tip && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: unstyled ? "" : "sg-spin-tip", children: tip })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: visible ? unstyled ? "" : "sg-spin-blur" : "", children })
+  ] });
+}
+
+// src/components/ui/Input.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function Input({
+  value,
+  defaultValue,
+  placeholder,
+  type = "text",
+  readOnly = false,
+  size: sizeProp,
+  disabled: disabledProp,
+  loading,
+  onChange,
+  onBlur,
+  onFocus,
+  "aria-invalid": ariaInvalid,
+  "aria-required": ariaRequired,
+  "aria-describedby": ariaDescribedBy,
+  id,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const size = sizeProp ?? config.size ?? "middle";
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const wrapperClasses = unstyled ? className ?? "" : [
+    "sg-input-wrapper",
+    `sg-input-wrapper-${size}`,
+    loading ? "sg-input-wrapper-loading" : "",
+    readOnly ? "sg-input-wrapper-readonly" : "",
+    className
+  ].filter(Boolean).join(" ");
+  const inputClasses = unstyled ? "" : [
+    "sg-input",
+    `sg-input-${size}`,
+    readOnly ? "sg-input-readonly" : ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: wrapperClasses, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "input",
+      {
+        id,
+        type,
+        className: inputClasses,
+        value,
+        defaultValue,
+        placeholder,
+        disabled: disabled || loading,
+        readOnly,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-readonly": readOnly || void 0,
+        "aria-describedby": ariaDescribedBy,
+        onChange: (e) => onChange?.(e.target.value),
+        onBlur,
+        onFocus
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spin, { size: "small", unstyled })
+  ] });
+}
+
+// src/components/ui/Textarea.tsx
+var import_react10 = __toESM(require("react"), 1);
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function Textarea({
+  value,
+  defaultValue,
+  placeholder,
+  rows = 4,
+  maxLength,
+  showCount,
+  disabled: disabledProp,
+  loading,
+  size: sizeProp,
+  onChange,
+  onBlur,
+  onFocus,
+  id,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-required": ariaRequired,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled;
+  const size = sizeProp ?? config.size ?? "middle";
+  const [internalValue, setInternalValue] = import_react10.default.useState(value ?? defaultValue ?? "");
+  const currentValue = value ?? internalValue;
+  const handleChange = (e) => {
+    const v = e.target.value;
+    if (maxLength && v.length > maxLength) return;
+    setInternalValue(v);
+    onChange?.(v);
+  };
+  const wrapperClass = unstyled ? className ?? "" : ["sg-textarea-wrapper", `sg-textarea-${size}`, loading ? "sg-textarea-wrapper-loading" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: wrapperClass, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "textarea",
+      {
+        id,
+        className: unstyled ? "" : "sg-input sg-textarea",
+        value: currentValue,
+        placeholder,
+        rows,
+        disabled: disabled || loading,
+        "aria-disabled": disabled || loading,
+        "aria-invalid": ariaInvalid,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": ariaRequired,
+        onChange: handleChange,
+        onBlur,
+        onFocus
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Spin, { size: "small", unstyled }),
+    showCount && !unstyled && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "sg-textarea-count", children: [
+      currentValue.length,
+      maxLength ? ` / ${maxLength}` : ""
+    ] })
+  ] });
+}
+
+// src/components/ui/Tooltip.tsx
+var import_react12 = require("react");
+
+// src/components/ui/Transition.tsx
+var import_react11 = __toESM(require("react"), 1);
+function Transition({
+  visible,
+  name = "sg-fade",
+  duration = 200,
+  enterFrom,
+  enterTo,
+  leaveFrom,
+  leaveTo,
+  onAfterEnter,
+  onAfterLeave,
+  children,
+  unmountOnExit = true
+}) {
+  const [mounted, setMounted] = (0, import_react11.useState)(visible);
+  const [phase, setPhase] = (0, import_react11.useState)(visible ? "idle" : "idle");
+  const nodeRef = (0, import_react11.useRef)(null);
+  const timerRef = (0, import_react11.useRef)(void 0);
+  const prevVisible = (0, import_react11.useRef)(visible);
+  const getEnterClasses = (0, import_react11.useCallback)(() => {
+    if (enterFrom && enterTo) return { from: enterFrom, active: `${name}-enter-active`, to: enterTo };
+    return { from: `${name}-enter-from`, active: `${name}-enter-active`, to: `${name}-enter-to` };
+  }, [name, enterFrom, enterTo]);
+  const getLeaveClasses = (0, import_react11.useCallback)(() => {
+    if (leaveFrom && leaveTo) return { from: leaveFrom, active: `${name}-leave-active`, to: leaveTo };
+    return { from: `${name}-leave-from`, active: `${name}-leave-active`, to: `${name}-leave-to` };
+  }, [name, leaveFrom, leaveTo]);
+  (0, import_react11.useEffect)(() => {
+    if (visible === prevVisible.current) return;
+    prevVisible.current = visible;
+    clearTimeout(timerRef.current);
+    if (visible) {
+      setMounted(true);
+      setPhase("enter");
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setPhase("enter-active"));
+      });
+      timerRef.current = setTimeout(() => {
+        setPhase("idle");
+        onAfterEnter?.();
+      }, duration);
+    } else {
+      setPhase("leave");
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setPhase("leave-active"));
+      });
+      timerRef.current = setTimeout(() => {
+        setPhase("idle");
+        if (unmountOnExit) setMounted(false);
+        onAfterLeave?.();
+      }, duration);
+    }
+  }, [visible, duration, unmountOnExit, onAfterEnter, onAfterLeave]);
+  (0, import_react11.useEffect)(() => {
+    return () => clearTimeout(timerRef.current);
+  }, []);
+  if (!mounted && unmountOnExit) return null;
+  const enterC = getEnterClasses();
+  const leaveC = getLeaveClasses();
+  let transitionClass = "";
+  switch (phase) {
+    case "enter":
+      transitionClass = `${enterC.from} ${enterC.active}`;
+      break;
+    case "enter-active":
+      transitionClass = `${enterC.to} ${enterC.active}`;
+      break;
+    case "leave":
+      transitionClass = `${leaveC.from} ${leaveC.active}`;
+      break;
+    case "leave-active":
+      transitionClass = `${leaveC.to} ${leaveC.active}`;
+      break;
+  }
+  return import_react11.default.cloneElement(children, {
+    ref: nodeRef,
+    className: [children.props.className, transitionClass].filter(Boolean).join(" ")
+  });
+}
+
+// src/components/ui/Tooltip.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function Tooltip({
+  title,
+  placement = "top",
+  children,
+  className,
+  unstyled
+}) {
+  const [visible, setVisible] = (0, import_react12.useState)(false);
+  const ref = (0, import_react12.useRef)(null);
+  const tooltipId = (0, import_react12.useId)();
+  const triggerWithAria = (0, import_react12.isValidElement)(children) ? (0, import_react12.cloneElement)(children, {
+    "aria-describedby": visible ? [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : children.props["aria-describedby"],
+    onFocus: (e) => {
+      setVisible(true);
+      children.props.onFocus?.(e);
+    },
+    onBlur: (e) => {
+      setVisible(false);
+      children.props.onBlur?.(e);
+    }
+  }) : children;
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "div",
+      {
+        className,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        style: { position: "relative", display: "inline-block" },
+        children: [
+          triggerWithAria,
+          visible && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { id: tooltipId, role: "tooltip", children: title })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      className: ["sg-tooltip-wrapper", className].filter(Boolean).join(" "),
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      ref,
+      children: [
+        triggerWithAria,
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Transition, { visible, name: "sg-fade", unmountOnExit: true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { id: tooltipId, role: "tooltip", className: `sg-tooltip sg-tooltip-${placement}`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sg-tooltip-content", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "sg-tooltip-arrow" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/complex/Field.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function FeedbackIcon({
+  status,
+  icons
+}) {
+  if (!status) return null;
+  const defaults = {
+    validating: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Spin, { size: "small" }),
+    error: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-feedback-icon sg-field-feedback-error", children: "\u2715" }),
+    warning: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-feedback-icon sg-field-feedback-warning", children: "!" }),
+    success: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-feedback-icon sg-field-feedback-success", children: "\u2713" })
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-feedback", children: icons?.[status] ?? defaults[status] });
+}
+function Field({
+  name,
+  label,
+  required,
+  rules = [],
+  warningRules,
+  dependencies,
+  hidden,
+  disabled: fieldDisabled,
+  unstyled,
+  placeholder,
+  type = "text",
+  help,
+  extra,
+  tooltip,
+  children,
+  noStyle,
+  normalize,
+  getValueFromEvent: _getValueFromEvent,
+  validateFirst,
+  validateStatus: manualStatus,
+  hasFeedback,
+  preserve,
+  labelCol: fieldLabelCol,
+  wrapperCol: fieldWrapperCol,
+  messageVariables: _messageVariables
+}) {
+  const ctx = useFormContext();
+  const { core, form } = ctx;
+  const disabled = fieldDisabled ?? ctx.disabled;
+  const formLocale = useConfig().locale?.form;
+  const requiredMarker = formLocale?.required ?? "*";
+  const optionalMarker = formLocale?.optional ?? "(optional)";
+  const autoId = (0, import_react13.useId)();
+  const fieldId = `sg-field-${autoId.replace(/:/g, "")}-${name.replace(/\./g, "-")}`;
+  const helpId = `${fieldId}-help`;
+  const field = useField(core, form, name);
+  const prevValueRef = (0, import_react13.useRef)(field.value);
+  (0, import_react13.useEffect)(() => {
+    const allRules = [...rules];
+    if (required) {
+      allRules.unshift({ required: true });
+    }
+    form.register(name, {
+      rules: allRules,
+      warningRules,
+      dependencies,
+      validateFirst,
+      label,
+      preserve: preserve ?? ctx.preserve
+    });
+    return () => form.unregister(name);
+  }, [name, form, required]);
+  if (hidden) return null;
+  const wrappedOnChange = normalize ? (v) => {
+    const normalized = normalize(v, prevValueRef.current);
+    prevValueRef.current = normalized;
+    field.onChange(normalized);
+  } : field.onChange;
+  const effectiveStatus = manualStatus ?? field.status;
+  const hasErrors = field.errors.length > 0;
+  const hasWarnings = field.warnings.length > 0;
+  const layout = ctx.layout ?? "vertical";
+  const lCol = fieldLabelCol ?? ctx.labelCol;
+  const wCol = fieldWrapperCol ?? ctx.wrapperCol;
+  const labelAlign = ctx.labelAlign ?? "right";
+  const labelNode = label ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "label",
+    {
+      htmlFor: fieldId,
+      className: "sg-field-label",
+      style: layout === "horizontal" && lCol?.offset ? { marginLeft: `${lCol.offset / 24 * 100}%` } : void 0,
+      children: [
+        tooltip ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Tooltip, { title: tooltip, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label }) }) : label,
+        (required || ctx.requiredMark === true) && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-required", children: requiredMarker }),
+        ctx.requiredMark === "optional" && !required && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "sg-field-optional", children: optionalMarker }),
+        ctx.colon && ":"
+      ]
+    }
+  ) : null;
+  const errorNodes = hasErrors ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: helpId, className: "sg-field-error", role: "alert", children: field.errors.map((e, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: e }, i)) }) : null;
+  const warningNodes = hasWarnings && !hasErrors ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: helpId, className: "sg-field-warning", children: field.warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { children: w }, i)) }) : null;
+  const helpNode = errorNodes ?? warningNodes ?? (help ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: helpId, className: "sg-field-help", children: help }) : null);
+  const describedBy = helpNode ? helpId : void 0;
+  const extraNode = extra ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "sg-field-extra", children: extra }) : null;
+  const feedbackIcon = hasFeedback && field.touched ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(FeedbackIcon, { status: effectiveStatus, icons: ctx.feedbackIcons }) : null;
+  const renderControl = () => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        children({ ...field, onChange: wrappedOnChange }),
+        feedbackIcon
+      ] });
+    }
+    if (children) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+        children,
+        feedbackIcon
+      ] });
+    }
+    const inputElement = type === "textarea" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Textarea,
+      {
+        id: fieldId,
+        value: field.value ?? "",
+        onChange: (v) => wrappedOnChange(v),
+        onBlur: field.onBlur,
+        disabled,
+        placeholder,
+        unstyled,
+        "aria-invalid": hasErrors || void 0,
+        "aria-required": required || void 0,
+        "aria-describedby": describedBy
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      Input,
+      {
+        id: fieldId,
+        type,
+        value: field.value ?? "",
+        onChange: (v) => wrappedOnChange(type === "number" ? Number(v) : v),
+        onBlur: field.onBlur,
+        disabled,
+        placeholder,
+        unstyled,
+        "aria-invalid": hasErrors || void 0,
+        "aria-required": required || void 0,
+        "aria-describedby": describedBy
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      inputElement,
+      feedbackIcon
+    ] });
+  };
+  if (noStyle) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_jsx_runtime8.Fragment, { children: renderControl() });
+  }
+  if (unstyled) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+      labelNode,
+      renderControl(),
+      helpNode,
+      extraNode
+    ] });
+  }
+  if (layout === "horizontal" && lCol) {
+    const labelSpan = lCol.span ?? 6;
+    const wrapperSpan = wCol?.span ?? 24 - labelSpan;
+    const labelPct = `${labelSpan / 24 * 100}%`;
+    const wrapperPct = `${wrapperSpan / 24 * 100}%`;
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        className: [
+          "sg-field",
+          "sg-field-horizontal",
+          hasErrors ? "sg-field-has-error" : "",
+          hasWarnings && !hasErrors ? "sg-field-has-warning" : "",
+          effectiveStatus ? `sg-field-status-${effectiveStatus}` : ""
+        ].filter(Boolean).join(" "),
+        "data-field-name": name,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            "div",
+            {
+              className: "sg-field-label-wrap",
+              style: {
+                width: labelPct,
+                textAlign: labelAlign
+              },
+              children: labelNode
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "sg-field-control-wrap", style: { width: wrapperPct }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "sg-field-control", children: renderControl() }),
+            helpNode,
+            extraNode
+          ] })
+        ]
+      }
+    );
+  }
+  const fieldClasses = [
+    "sg-field",
+    hasErrors ? "sg-field-has-error" : "",
+    hasWarnings && !hasErrors ? "sg-field-has-warning" : "",
+    effectiveStatus ? `sg-field-status-${effectiveStatus}` : ""
+  ];
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: fieldClasses.filter(Boolean).join(" "), "data-field-name": name, children: [
+    labelNode,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "sg-field-control", children: renderControl() }),
+    helpNode,
+    extraNode
+  ] });
+}
+
+// src/components/ui/Button.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Button({
+  type = "default",
+  size: sizeProp,
+  disabled: disabledProp,
+  loading,
+  htmlType = "button",
+  danger = false,
+  block = false,
+  onClick,
+  children,
+  className,
+  style,
+  unstyled
+}) {
+  const config = useConfig();
+  const size = sizeProp ?? config.size ?? "middle";
+  const disabled = disabledProp ?? config.disabled ?? false;
+  const classes = unstyled ? className ?? "" : [
+    "sg-button",
+    `sg-button-${type}`,
+    `sg-button-${size}`,
+    danger ? "sg-button-danger" : "",
+    block ? "sg-button-block" : "",
+    loading ? "sg-button-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+    "button",
+    {
+      type: htmlType,
+      className: classes,
+      style,
+      disabled: disabled || loading,
+      "aria-disabled": disabled || loading,
+      "aria-busy": loading,
+      onClick,
+      children: [
+        loading && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Spin, { size: "small", unstyled }),
+        children
+      ]
+    }
+  );
+}
+
+// src/components/complex/SubmitButton.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function SubmitButton({
+  children = "Submit",
+  disabled,
+  loading,
+  className,
+  style,
+  unstyled
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    Button,
+    {
+      type: "primary",
+      htmlType: "submit",
+      disabled,
+      loading,
+      className,
+      style,
+      unstyled,
+      children
+    }
+  );
+}
+
+// src/components/complex/FormList.tsx
+var import_react14 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var listUid = 0;
+function genKey() {
+  return `fl_${++listUid}`;
+}
+function FormList({ name, initialValue, draggable, children }) {
+  const { core, form } = useFormContext();
+  import_react14.default.useEffect(() => {
+    if (initialValue && !Array.isArray(core.get(name))) {
+      core.set(name, initialValue);
+    }
+  }, []);
+  const listValue = useWatch(core, name);
+  const items = Array.isArray(listValue) ? listValue : [];
+  const [keys, setKeys] = (0, import_react14.useState)(() => items.map(() => genKey()));
+  import_react14.default.useEffect(() => {
+    setKeys((prev) => {
+      if (prev.length === items.length) return prev;
+      if (items.length > prev.length) {
+        return [...prev, ...Array.from({ length: items.length - prev.length }, () => genKey())];
+      }
+      return prev.slice(0, items.length);
+    });
+  }, [items.length]);
+  const fields = (0, import_react14.useMemo)(
+    () => keys.slice(0, items.length).map((key, index) => ({ key, index })),
+    [keys, items.length]
+  );
+  const add = (0, import_react14.useCallback)(
+    (defaultValue, insertIndex) => {
+      form.listAdd(name, defaultValue, insertIndex);
+      setKeys((prev) => {
+        const k = genKey();
+        if (insertIndex !== void 0 && insertIndex >= 0 && insertIndex <= prev.length) {
+          const next = [...prev];
+          next.splice(insertIndex, 0, k);
+          return next;
+        }
+        return [...prev, k];
+      });
+    },
+    [form, name]
+  );
+  const remove = (0, import_react14.useCallback)(
+    (index) => {
+      form.listRemove(name, index);
+      setKeys((prev) => {
+        if (Array.isArray(index)) {
+          const indices = new Set(index);
+          return prev.filter((_, i) => !indices.has(i));
+        }
+        return prev.filter((_, i) => i !== index);
+      });
+    },
+    [form, name]
+  );
+  const move = (0, import_react14.useCallback)(
+    (from, to) => {
+      form.listMove(name, from, to);
+      setKeys((prev) => {
+        const next = [...prev];
+        const [item] = next.splice(from, 1);
+        next.splice(to, 0, item);
+        return next;
+      });
+    },
+    [form, name]
+  );
+  const replace = (0, import_react14.useCallback)(
+    (values) => {
+      form.listReplace(name, values);
+      setKeys(values.map(() => genKey()));
+    },
+    [form, name]
+  );
+  const operation = (0, import_react14.useMemo)(
+    () => ({ add, remove, move, replace }),
+    [add, remove, move, replace]
+  );
+  const meta = (0, import_react14.useMemo)(() => ({ errors: form.getFieldErrors(name) }), [form, name]);
+  const dragIdx = (0, import_react14.useRef)(-1);
+  const dragOverIdx = (0, import_react14.useRef)(-1);
+  if (!draggable) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: children(fields, operation, meta) });
+  }
+  const dragFields = fields.map((f) => ({
+    ...f,
+    dragProps: {
+      draggable: true,
+      onDragStart: () => {
+        dragIdx.current = f.index;
+      },
+      onDragOver: (e) => {
+        e.preventDefault();
+        dragOverIdx.current = f.index;
+      },
+      onDrop: () => {
+        if (dragIdx.current !== -1 && dragOverIdx.current !== -1 && dragIdx.current !== dragOverIdx.current) {
+          move(dragIdx.current, dragOverIdx.current);
+        }
+        dragIdx.current = -1;
+        dragOverIdx.current = -1;
+      },
+      onDragEnd: () => {
+        dragIdx.current = -1;
+        dragOverIdx.current = -1;
+      }
+    }
+  }));
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: children(dragFields, operation, meta) });
+}
+
+// src/components/complex/AutoField/AutoField.tsx
+var import_react15 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function AutoField(props) {
+  const {
+    name,
+    label,
+    type: forcedType,
+    options,
+    placeholder,
+    disabled: disabledProp,
+    className,
+    style,
+    min,
+    max,
+    step,
+    accept,
+    multiple
+  } = props;
+  const config = useConfig();
+  const disabled = disabledProp ?? config.disabled;
+  const { form } = useFormContext();
+  const value = form.getValue(name);
+  const meta = form.getFieldState(name);
+  const inferredType = (0, import_react15.useMemo)(() => {
+    if (forcedType) return forcedType;
+    if (options && options.length > 0) return "select";
+    if (typeof value === "boolean") return "boolean";
+    if (typeof value === "number") return "number";
+    if (typeof value === "string") {
+      if (value.includes("@")) return "email";
+      if (value.startsWith("http")) return "url";
+    }
+    return "string";
+  }, [forcedType, options, value]);
+  const handleChange = (newValue) => {
+    form.setValue(name, newValue);
+  };
+  const errorId = `${name}-error`;
+  const hasErrors = meta.errors.length > 0;
+  const hasWarnings = meta.warnings.length > 0;
+  const wrapperStyle = {
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+    ...style
+  };
+  const inputStyle = {
+    padding: "6px 12px",
+    border: `1px solid ${hasErrors ? "var(--sg-error, #ff4d4f)" : hasWarnings ? "var(--sg-warning, #faad14)" : "var(--sg-border, #d9d9d9)"}`,
+    borderRadius: "var(--sg-radius, 6px)",
+    fontSize: 14,
+    outline: "none",
+    background: disabled ? "var(--sg-bg-disabled, #f5f5f5)" : "var(--sg-bg, #fff)"
+  };
+  function renderInput() {
+    switch (inferredType) {
+      case "boolean":
+      case "switch":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => handleChange(e.target.checked),
+              disabled,
+              role: inferredType === "switch" ? "switch" : void 0
+            }
+          ),
+          label
+        ] });
+      case "number":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "number",
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value === "" ? null : Number(e.target.value)),
+            onBlur: () => form.onFieldBlur(name),
+            placeholder,
+            disabled,
+            min,
+            max,
+            step,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+      case "textarea":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "textarea",
+          {
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            onBlur: () => form.onFieldBlur(name),
+            placeholder,
+            disabled,
+            style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "select",
+          {
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: "", children: placeholder ?? "-- Select --" }),
+              options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "select",
+          {
+            multiple: true,
+            value: Array.isArray(value) ? value.map(String) : [],
+            onChange: (e) => {
+              const selected = Array.from(e.target.selectedOptions, (o) => o.value);
+              handleChange(selected);
+            },
+            disabled,
+            style: { ...inputStyle, minHeight: 80 },
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0,
+            children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        );
+      case "radio":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("label", { style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: value === opt.value,
+              onChange: () => handleChange(opt.value),
+              disabled
+            }
+          ),
+          opt.label
+        ] }, opt.value)) });
+      case "date":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "date",
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+      case "time":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "time",
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+      case "password":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "password",
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            onBlur: () => form.onFieldBlur(name),
+            placeholder,
+            disabled,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+      case "color":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "color",
+            value: value == null ? "#000000" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            disabled,
+            style: { ...inputStyle, padding: 2, width: 48, height: 32 }
+          }
+        );
+      case "slider":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "input",
+            {
+              type: "range",
+              value: value == null ? min ?? 0 : Number(value),
+              onChange: (e) => handleChange(Number(e.target.value)),
+              min: min ?? 0,
+              max: max ?? 100,
+              step: step ?? 1,
+              disabled,
+              style: { flex: 1 }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { minWidth: 32, textAlign: "right", fontSize: 14 }, children: String(value ?? min ?? 0) })
+        ] });
+      case "rate": {
+        const maxStars = max ?? 5;
+        const currentRate = typeof value === "number" ? value : 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: maxStars }, (_, i) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && handleChange(i + 1),
+            disabled,
+            style: {
+              background: "none",
+              border: "none",
+              cursor: disabled ? "default" : "pointer",
+              fontSize: 20,
+              color: i < currentRate ? "var(--sg-warning, #faad14)" : "var(--sg-border, #d9d9d9)",
+              padding: 0
+            },
+            "aria-label": `${i + 1} star${i !== 0 ? "s" : ""}`,
+            children: "\u2605"
+          },
+          i
+        )) });
+      }
+      case "file":
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "file",
+            accept,
+            multiple,
+            onChange: (e) => {
+              const files = e.target.files;
+              if (files) handleChange(multiple ? Array.from(files) : files[0] ?? null);
+            },
+            disabled,
+            style: inputStyle
+          }
+        );
+      case "email":
+      case "url":
+      case "string":
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: inferredType === "email" ? "email" : inferredType === "url" ? "url" : "text",
+            value: value == null ? "" : String(value),
+            onChange: (e) => handleChange(e.target.value),
+            onBlur: () => form.onFieldBlur(name),
+            placeholder,
+            disabled,
+            style: inputStyle,
+            "aria-invalid": hasErrors,
+            "aria-describedby": hasErrors ? errorId : void 0
+          }
+        );
+    }
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `sg-autofield ${className ?? ""}`, style: wrapperStyle, children: [
+    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { style: { fontWeight: 500, fontSize: 14 }, children: label }),
+    renderInput(),
+    hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { id: errorId, role: "alert", style: { color: "var(--sg-error, #ff4d4f)", fontSize: 12 }, children: meta.errors.join("; ") }),
+    hasWarnings && !hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: "var(--sg-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
+  ] });
+}
+
+// src/adapters/jsonSchemaAdapter.ts
+function jsonTypeToFieldType(schema) {
+  if (schema.enum || schema.oneOf) return "select";
+  if (schema.format === "email") return "email";
+  if (schema.format === "uri" || schema.format === "url") return "url";
+  if (schema.format === "date") return "date";
+  if (schema.format === "time") return "time";
+  if (schema.format === "password") return "password";
+  if (schema.format === "color") return "color";
+  switch (schema.type) {
+    case "number":
+    case "integer":
+      return "number";
+    case "boolean":
+      return "boolean";
+    case "array":
+      return "multiselect";
+    default:
+      if (schema.maxLength && schema.maxLength > 200) return "textarea";
+      return "string";
+  }
+}
+function buildOptions(schema) {
+  if (schema.oneOf) {
+    return schema.oneOf.map((item) => ({
+      value: item.const,
+      label: item.title ?? String(item.const)
+    }));
+  }
+  if (schema.enum) {
+    return schema.enum.map((val, i) => ({
+      value: val,
+      label: schema.enumNames?.[i] ?? String(val)
+    }));
+  }
+  return void 0;
+}
+function jsonSchemaToFields(schema) {
+  const result = [];
+  const props = schema.properties ?? {};
+  for (const [name, prop] of Object.entries(props)) {
+    result.push({
+      name,
+      label: prop.title ?? name,
+      type: jsonTypeToFieldType(prop),
+      placeholder: prop.description,
+      options: buildOptions(prop),
+      min: prop.minimum,
+      max: prop.maximum
+    });
+  }
+  return result;
+}
+function jsonSchemaToRules(schema) {
+  const result = {};
+  const props = schema.properties ?? {};
+  const requiredFields = new Set(schema.required ?? []);
+  for (const [name, prop] of Object.entries(props)) {
+    const rules = [];
+    if (requiredFields.has(name)) {
+      rules.push({ required: true, message: `${prop.title ?? name} is required` });
+    }
+    if (prop.type === "string") {
+      if (prop.minLength !== void 0) {
+        rules.push({ min: prop.minLength, message: `Minimum ${prop.minLength} characters` });
+      }
+      if (prop.maxLength !== void 0) {
+        rules.push({ max: prop.maxLength, message: `Maximum ${prop.maxLength} characters` });
+      }
+      if (prop.pattern) {
+        rules.push({ pattern: new RegExp(prop.pattern), message: `Invalid format` });
+      }
+    }
+    if (prop.type === "number" || prop.type === "integer") {
+      if (prop.minimum !== void 0) {
+        rules.push({ min: prop.minimum, type: "number" });
+      }
+      if (prop.maximum !== void 0) {
+        rules.push({ max: prop.maximum, type: "number" });
+      }
+    }
+    if (prop.format === "email") {
+      rules.push({ type: "email" });
+    }
+    if (prop.format === "uri" || prop.format === "url") {
+      rules.push({ type: "url" });
+    }
+    if (rules.length > 0) {
+      result[name] = rules;
+    }
+  }
+  return result;
+}
+function jsonSchemaToDefaults(schema) {
+  const result = {};
+  const props = schema.properties ?? {};
+  for (const [name, prop] of Object.entries(props)) {
+    if (prop.default !== void 0) {
+      result[name] = prop.default;
+    }
+  }
+  return result;
+}
+
+// src/adapters/zodAdapter.ts
+function zodRule(schema, options) {
+  const rule = (value) => {
+    const result = schema.safeParse(value);
+    if (result.success) return null;
+    const issues = result.error?.issues ?? [];
+    if (issues.length === 0) return options?.message ?? "Validation failed";
+    if (options?.pick === "all") {
+      return issues.map((i) => i.message).join("; ");
+    }
+    return options?.message ?? issues[0].message;
+  };
+  return rule;
+}
+function zodRules(schema, options) {
+  const result = {};
+  for (const [key, fieldSchema] of Object.entries(schema.shape)) {
+    result[key] = [zodRule(fieldSchema, options)];
+  }
+  return result;
+}
+function zodDefaults(schema) {
+  const defaults = {};
+  for (const [key, fieldSchema] of Object.entries(schema.shape)) {
+    try {
+      const result = fieldSchema.safeParse(void 0);
+      if (result.success && result.data !== void 0) {
+        defaults[key] = result.data;
+      }
+    } catch {
+    }
+  }
+  return defaults;
+}
+function zodToJsonSchema(schema) {
+  const properties = {};
+  const required = [];
+  const shape = schema.shape ?? schema.shape;
+  if (!shape) return { properties, required };
+  for (const [key, field] of Object.entries(shape)) {
+    const prop = { title: key };
+    let def = field._def;
+    if (def.typeName === "ZodOptional" || def.typeName === "ZodNullable") {
+      def = def.innerType?._def ?? def;
+    } else {
+      required.push(key);
+    }
+    if (def.typeName === "ZodDefault") {
+      prop.default = def.defaultValue?.();
+      def = def.innerType?._def ?? def;
+    }
+    switch (def.typeName) {
+      case "ZodString":
+        prop.type = "string";
+        for (const check of def.checks ?? []) {
+          if (check.kind === "min") prop.minLength = check.value;
+          if (check.kind === "max") prop.maxLength = check.value;
+          if (check.kind === "email") prop.format = "email";
+          if (check.kind === "url") prop.format = "url";
+          if (check.kind === "regex" && check.regex) prop.pattern = check.regex.source;
+        }
+        break;
+      case "ZodNumber":
+        prop.type = "number";
+        for (const check of def.checks ?? []) {
+          if (check.kind === "min") prop.minimum = check.value;
+          if (check.kind === "max") prop.maximum = check.value;
+        }
+        break;
+      case "ZodBoolean":
+        prop.type = "boolean";
+        break;
+      case "ZodEnum":
+        prop.type = "string";
+        prop.enum = def.values ?? [];
+        break;
+      case "ZodDate":
+        prop.type = "string";
+        prop.format = "date";
+        break;
+      default:
+        prop.type = "string";
+    }
+    if (field.description) prop.description = field.description;
+    properties[key] = prop;
+  }
+  return { properties, required };
+}
+
+// src/components/complex/SchemaForm.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function isZodSchema(schema) {
+  return typeof schema === "object" && schema !== null && "_def" in schema;
+}
+function SchemaForm({
+  schema: rawSchema,
+  onSubmit,
+  layout,
+  size,
+  disabled,
+  form: externalForm,
+  labelCol,
+  wrapperCol,
+  className,
+  style,
+  submitText: submitTextProp,
+  children
+}) {
+  const config = useConfig();
+  const submitText = submitTextProp ?? config.locale?.form?.submitText ?? "Submit";
+  const jsonSchema = isZodSchema(rawSchema) ? zodToJsonSchema(rawSchema) : rawSchema;
+  const fields = jsonSchemaToFields(jsonSchema);
+  const rulesMap = jsonSchemaToRules(jsonSchema);
+  const defaults = jsonSchemaToDefaults(jsonSchema);
+  const internalForm = useForm({
+    defaultValues: defaults,
+    onSubmit
+  });
+  const formInstance = externalForm ?? internalForm;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    Form,
+    {
+      form: formInstance,
+      layout,
+      size,
+      disabled,
+      labelCol,
+      wrapperCol,
+      className,
+      style,
+      children: [
+        fields.map((fieldConfig) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          Field,
+          {
+            name: fieldConfig.name,
+            label: typeof fieldConfig.label === "string" ? fieldConfig.label : void 0,
+            rules: rulesMap[fieldConfig.name],
+            children: (field) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+              AutoField,
+              {
+                name: fieldConfig.name,
+                type: fieldConfig.type,
+                options: fieldConfig.options,
+                placeholder: fieldConfig.placeholder,
+                min: fieldConfig.min,
+                max: fieldConfig.max,
+                disabled: disabled ?? field.validating
+              }
+            )
+          },
+          fieldConfig.name
+        )),
+        children ?? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "submit", className: "sg-button sg-button-primary", children: submitText })
+      ]
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AutoField,
+  Field,
+  Form,
+  FormContext,
+  FormList,
+  FormProvider,
+  SchemaForm,
+  SubmitButton,
+  jsonSchemaToDefaults,
+  jsonSchemaToFields,
+  jsonSchemaToRules,
+  useField,
+  useFieldArray,
+  useForm,
+  useFormContext,
+  useFormProvider,
+  useWatch,
+  zodDefaults,
+  zodRule,
+  zodRules,
+  zodToJsonSchema
+});
+//# sourceMappingURL=form.cjs.map