@skygraph/react 0.0.0-placeholder.0 → 0.5.0

package/dist/chunk-MLEBVELO.js

@@ -0,0 +1,1412 @@
+import {
+  Button,
+  Input,
+  Transition
+} from "./chunk-ZJF6SJLP.js";
+import {
+  Spin,
+  useConfig
+} from "./chunk-2OCEO636.js";
+
+// src/hooks/useField.ts
+import { useEffect, useState, useCallback, useRef } from "react";
+function useField(core, form, name) {
+  const [value, setValue] = useState(() => form.getValue(name));
+  const [meta, setMeta] = useState(() => form.getFieldState(name));
+  const nameRef = useRef(name);
+  nameRef.current = name;
+  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 = useCallback(
+    (v) => {
+      form.setValue(nameRef.current, v);
+    },
+    [form]
+  );
+  const onBlur = 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
+import { useState as useState2, useCallback as useCallback2, useMemo, useRef as useRef2 } from "react";
+import { createCore, createForm } from "@skygraph/core";
+function useForm(options) {
+  const optionsRef = useRef2(options);
+  optionsRef.current = options;
+  const [{ core, form }] = useState2(() => {
+    const c = createCore();
+    const f = createForm(c, options);
+    return { core: c, form: f };
+  });
+  const [formState, setFormState] = useState2(() => form.getFormState());
+  const refreshState = useCallback2(() => {
+    setFormState(form.getFormState());
+  }, [form]);
+  const submit = useCallback2(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 = useCallback2(
+    (values) => {
+      form.reset(values);
+      setFormState(form.getFormState());
+    },
+    [form]
+  );
+  const setFieldValue = useCallback2(
+    (name, value) => {
+      form.setValue(name, value);
+    },
+    [form]
+  );
+  const setFieldsValue = useCallback2(
+    (values) => {
+      form.setFieldsValue(values);
+    },
+    [form]
+  );
+  const getFieldValue = useCallback2((name) => form.getValue(name), [form]);
+  const getFieldsValue = useCallback2(() => form.getFieldsValue(), [form]);
+  const validateFields = useCallback2((name) => form.validate(name), [form]);
+  return useMemo(
+    () => ({
+      core,
+      form,
+      formState,
+      submit,
+      reset,
+      setFieldValue,
+      setFieldsValue,
+      getFieldValue,
+      getFieldsValue,
+      validateFields
+    }),
+    [
+      core,
+      form,
+      formState,
+      submit,
+      reset,
+      setFieldValue,
+      setFieldsValue,
+      getFieldValue,
+      getFieldsValue,
+      validateFields
+    ]
+  );
+}
+
+// src/components/complex/FormContext.ts
+import { createContext, useContext } from "react";
+var FormContext = createContext(null);
+function useFormContext() {
+  const ctx = useContext(FormContext);
+  if (!ctx) {
+    throw new Error("SkyGraph: useFormContext must be used inside <Form>");
+  }
+  return ctx;
+}
+
+// src/components/complex/FormProvider.tsx
+import React, { createContext as createContext2, useCallback as useCallback3, useContext as useContext2, useMemo as useMemo2, useRef as useRef3 } from "react";
+import { jsx } from "react/jsx-runtime";
+var FormProviderContext = createContext2(null);
+function FormProvider({ onFormFinish, onFormChange, children }) {
+  const formsRef = useRef3({});
+  const registerForm = useCallback3((name, form) => {
+    formsRef.current[name] = form;
+  }, []);
+  const unregisterForm = useCallback3((name) => {
+    delete formsRef.current[name];
+  }, []);
+  const value = useMemo2(
+    () => ({
+      registerForm,
+      unregisterForm,
+      onFormFinish,
+      onFormChange
+    }),
+    [registerForm, unregisterForm, onFormFinish, onFormChange]
+  );
+  return /* @__PURE__ */ jsx(FormProviderContext.Provider, { value, children });
+}
+function useFormProvider() {
+  return useContext2(FormProviderContext);
+}
+function useFormProviderRegister(name, form) {
+  const provider = useContext2(FormProviderContext);
+  React.useEffect(() => {
+    if (!provider || !name) return;
+    provider.registerForm(name, form);
+    return () => provider.unregisterForm(name);
+  }, [provider, name, form]);
+  return provider;
+}
+
+// src/components/complex/Form.tsx
+import { useRef as useRef4 } from "react";
+import { jsx as jsx2 } from "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 = useRef4(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__ */ jsx2(
+    FormContext.Provider,
+    {
+      value: {
+        core,
+        form,
+        layout,
+        size,
+        disabled,
+        colon,
+        requiredMark,
+        labelCol,
+        wrapperCol,
+        labelAlign,
+        preserve,
+        feedbackIcons
+      },
+      children: /* @__PURE__ */ jsx2(
+        "form",
+        {
+          ref: formRef,
+          name: formName,
+          className: classes.join(" "),
+          style,
+          onSubmit: handleSubmit,
+          noValidate: true,
+          children
+        }
+      )
+    }
+  );
+}
+
+// src/components/ui/Textarea.tsx
+import React3 from "react";
+import { jsx as jsx3, jsxs } from "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] = React3.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__ */ jsxs("div", { className: wrapperClass, style, children: [
+    /* @__PURE__ */ jsx3(
+      "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__ */ jsx3(Spin, { size: "small", unstyled }),
+    showCount && !unstyled && /* @__PURE__ */ jsxs("span", { className: "sg-textarea-count", children: [
+      currentValue.length,
+      maxLength ? ` / ${maxLength}` : ""
+    ] })
+  ] });
+}
+
+// src/components/ui/Tooltip.tsx
+import { useState as useState3, useRef as useRef5, useId, cloneElement, isValidElement } from "react";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+function Tooltip({
+  title,
+  placement = "top",
+  children,
+  className,
+  unstyled
+}) {
+  const [visible, setVisible] = useState3(false);
+  const ref = useRef5(null);
+  const tooltipId = useId();
+  const triggerWithAria = isValidElement(children) ? 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__ */ jsxs2(
+      "div",
+      {
+        className,
+        onMouseEnter: () => setVisible(true),
+        onMouseLeave: () => setVisible(false),
+        style: { position: "relative", display: "inline-block" },
+        children: [
+          triggerWithAria,
+          visible && /* @__PURE__ */ jsx4("div", { id: tooltipId, role: "tooltip", children: title })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: ["sg-tooltip-wrapper", className].filter(Boolean).join(" "),
+      onMouseEnter: () => setVisible(true),
+      onMouseLeave: () => setVisible(false),
+      ref,
+      children: [
+        triggerWithAria,
+        /* @__PURE__ */ jsx4(Transition, { visible, name: "sg-fade", unmountOnExit: true, children: /* @__PURE__ */ jsxs2("div", { id: tooltipId, role: "tooltip", className: `sg-tooltip sg-tooltip-${placement}`, children: [
+          /* @__PURE__ */ jsx4("div", { className: "sg-tooltip-content", children: title }),
+          /* @__PURE__ */ jsx4("div", { className: "sg-tooltip-arrow" })
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/complex/Field.tsx
+import { useEffect as useEffect2, useId as useId2, useRef as useRef6 } from "react";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function FeedbackIcon({
+  status,
+  icons
+}) {
+  if (!status) return null;
+  const defaults = {
+    validating: /* @__PURE__ */ jsx5(Spin, { size: "small" }),
+    error: /* @__PURE__ */ jsx5("span", { className: "sg-field-feedback-icon sg-field-feedback-error", children: "\u2715" }),
+    warning: /* @__PURE__ */ jsx5("span", { className: "sg-field-feedback-icon sg-field-feedback-warning", children: "!" }),
+    success: /* @__PURE__ */ jsx5("span", { className: "sg-field-feedback-icon sg-field-feedback-success", children: "\u2713" })
+  };
+  return /* @__PURE__ */ jsx5("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 = useId2();
+  const fieldId = `sg-field-${autoId.replace(/:/g, "")}-${name.replace(/\./g, "-")}`;
+  const helpId = `${fieldId}-help`;
+  const field = useField(core, form, name);
+  const prevValueRef = useRef6(field.value);
+  useEffect2(() => {
+    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__ */ jsxs3(
+    "label",
+    {
+      htmlFor: fieldId,
+      className: "sg-field-label",
+      style: layout === "horizontal" && lCol?.offset ? { marginLeft: `${lCol.offset / 24 * 100}%` } : void 0,
+      children: [
+        tooltip ? /* @__PURE__ */ jsx5(Tooltip, { title: tooltip, children: /* @__PURE__ */ jsx5("span", { children: label }) }) : label,
+        (required || ctx.requiredMark === true) && /* @__PURE__ */ jsx5("span", { className: "sg-field-required", children: requiredMarker }),
+        ctx.requiredMark === "optional" && !required && /* @__PURE__ */ jsx5("span", { className: "sg-field-optional", children: optionalMarker }),
+        ctx.colon && ":"
+      ]
+    }
+  ) : null;
+  const errorNodes = hasErrors ? /* @__PURE__ */ jsx5("div", { id: helpId, className: "sg-field-error", role: "alert", children: field.errors.map((e, i) => /* @__PURE__ */ jsx5("div", { children: e }, i)) }) : null;
+  const warningNodes = hasWarnings && !hasErrors ? /* @__PURE__ */ jsx5("div", { id: helpId, className: "sg-field-warning", children: field.warnings.map((w, i) => /* @__PURE__ */ jsx5("div", { children: w }, i)) }) : null;
+  const helpNode = errorNodes ?? warningNodes ?? (help ? /* @__PURE__ */ jsx5("div", { id: helpId, className: "sg-field-help", children: help }) : null);
+  const describedBy = helpNode ? helpId : void 0;
+  const extraNode = extra ? /* @__PURE__ */ jsx5("div", { className: "sg-field-extra", children: extra }) : null;
+  const feedbackIcon = hasFeedback && field.touched ? /* @__PURE__ */ jsx5(FeedbackIcon, { status: effectiveStatus, icons: ctx.feedbackIcons }) : null;
+  const renderControl = () => {
+    if (typeof children === "function") {
+      return /* @__PURE__ */ jsxs3(Fragment, { children: [
+        children({ ...field, onChange: wrappedOnChange }),
+        feedbackIcon
+      ] });
+    }
+    if (children) {
+      return /* @__PURE__ */ jsxs3(Fragment, { children: [
+        children,
+        feedbackIcon
+      ] });
+    }
+    const inputElement = type === "textarea" ? /* @__PURE__ */ jsx5(
+      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__ */ jsx5(
+      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__ */ jsxs3(Fragment, { children: [
+      inputElement,
+      feedbackIcon
+    ] });
+  };
+  if (noStyle) {
+    return /* @__PURE__ */ jsx5(Fragment, { children: renderControl() });
+  }
+  if (unstyled) {
+    return /* @__PURE__ */ jsxs3(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__ */ jsxs3(
+      "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__ */ jsx5(
+            "div",
+            {
+              className: "sg-field-label-wrap",
+              style: {
+                width: labelPct,
+                textAlign: labelAlign
+              },
+              children: labelNode
+            }
+          ),
+          /* @__PURE__ */ jsxs3("div", { className: "sg-field-control-wrap", style: { width: wrapperPct }, children: [
+            /* @__PURE__ */ jsx5("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__ */ jsxs3("div", { className: fieldClasses.filter(Boolean).join(" "), "data-field-name": name, children: [
+    labelNode,
+    /* @__PURE__ */ jsx5("div", { className: "sg-field-control", children: renderControl() }),
+    helpNode,
+    extraNode
+  ] });
+}
+
+// src/components/complex/SubmitButton.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SubmitButton({
+  children = "Submit",
+  disabled,
+  loading,
+  className,
+  style,
+  unstyled
+}) {
+  return /* @__PURE__ */ jsx6(
+    Button,
+    {
+      type: "primary",
+      htmlType: "submit",
+      disabled,
+      loading,
+      className,
+      style,
+      unstyled,
+      children
+    }
+  );
+}
+
+// src/hooks/useWatch.ts
+import { useEffect as useEffect3, useState as useState4 } from "react";
+function useWatch(core, name) {
+  const [value, setValue] = useState4(() => core.get(name));
+  useEffect3(() => {
+    setValue(core.get(name));
+    return core.subscribe(name, (v) => {
+      setValue(v);
+    });
+  }, [core, name]);
+  return value;
+}
+
+// src/components/complex/FormList.tsx
+import React6, { useState as useState5, useCallback as useCallback4, useMemo as useMemo3, useRef as useRef7 } from "react";
+import { Fragment as Fragment2, jsx as jsx7 } from "react/jsx-runtime";
+var listUid = 0;
+function genKey() {
+  return `fl_${++listUid}`;
+}
+function FormList({ name, initialValue, draggable, children }) {
+  const { core, form } = useFormContext();
+  React6.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] = useState5(() => items.map(() => genKey()));
+  React6.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 = useMemo3(
+    () => keys.slice(0, items.length).map((key, index) => ({ key, index })),
+    [keys, items.length]
+  );
+  const add = useCallback4(
+    (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 = useCallback4(
+    (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 = useCallback4(
+    (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 = useCallback4(
+    (values) => {
+      form.listReplace(name, values);
+      setKeys(values.map(() => genKey()));
+    },
+    [form, name]
+  );
+  const operation = useMemo3(
+    () => ({ add, remove, move, replace }),
+    [add, remove, move, replace]
+  );
+  const meta = useMemo3(() => ({ errors: form.getFieldErrors(name) }), [form, name]);
+  const dragIdx = useRef7(-1);
+  const dragOverIdx = useRef7(-1);
+  if (!draggable) {
+    return /* @__PURE__ */ jsx7(Fragment2, { 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__ */ jsx7(Fragment2, { children: children(dragFields, operation, meta) });
+}
+
+// src/hooks/useFieldArray.ts
+import { useState as useState6, useCallback as useCallback5, useMemo as useMemo4, useRef as useRef8 } from "react";
+function useFieldArray(form, name) {
+  const counterRef = useRef8(0);
+  const genKey2 = useCallback5(() => `fa_${name}_${++counterRef.current}`, [name]);
+  const [keys, setKeys] = useState6(() => {
+    const list = form.getListValue(name);
+    return list.map(() => genKey2());
+  });
+  const fields = useMemo4(
+    () => keys.map((key, index) => ({ key, index })),
+    [keys]
+  );
+  const append = useCallback5(
+    (defaultValue) => {
+      form.listAdd(name, defaultValue);
+      setKeys((prev) => [...prev, genKey2()]);
+    },
+    [form, name, genKey2]
+  );
+  const remove = useCallback5(
+    (index) => {
+      form.listRemove(name, index);
+      setKeys((prev) => prev.filter((_, i) => i !== index));
+    },
+    [form, name]
+  );
+  const move = useCallback5(
+    (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 = useCallback5(
+    (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 useMemo4(
+    () => ({ fields, append, remove, move, replace }),
+    [fields, append, remove, move, replace]
+  );
+}
+
+// src/components/complex/AutoField/AutoField.tsx
+import { useMemo as useMemo5 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "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 = useMemo5(() => {
+    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__ */ jsxs4("label", { style: { display: "flex", alignItems: "center", gap: 8, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              type: "checkbox",
+              checked: !!value,
+              onChange: (e) => handleChange(e.target.checked),
+              disabled,
+              role: inferredType === "switch" ? "switch" : void 0
+            }
+          ),
+          label
+        ] });
+      case "number":
+        return /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsxs4(
+          "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__ */ jsx8("option", { value: "", children: placeholder ?? "-- Select --" }),
+              options?.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
+            ]
+          }
+        );
+      case "multiselect":
+        return /* @__PURE__ */ jsx8(
+          "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__ */ jsx8("option", { value: opt.value, children: opt.label }, opt.value))
+          }
+        );
+      case "radio":
+        return /* @__PURE__ */ jsx8("div", { role: "radiogroup", style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: options?.map((opt) => /* @__PURE__ */ jsxs4("label", { style: { display: "flex", alignItems: "center", gap: 4, cursor: "pointer" }, children: [
+          /* @__PURE__ */ jsx8(
+            "input",
+            {
+              type: "radio",
+              name,
+              value: opt.value,
+              checked: value === opt.value,
+              onChange: () => handleChange(opt.value),
+              disabled
+            }
+          ),
+          opt.label
+        ] }, opt.value)) });
+      case "date":
+        return /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+          /* @__PURE__ */ jsx8(
+            "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__ */ jsx8("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__ */ jsx8("div", { style: { display: "flex", gap: 2 }, children: Array.from({ length: maxStars }, (_, i) => /* @__PURE__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsx8(
+          "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__ */ jsxs4("div", { className: `sg-autofield ${className ?? ""}`, style: wrapperStyle, children: [
+    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ jsx8("label", { style: { fontWeight: 500, fontSize: 14 }, children: label }),
+    renderInput(),
+    hasErrors && /* @__PURE__ */ jsx8("span", { id: errorId, role: "alert", style: { color: "var(--sg-error, #ff4d4f)", fontSize: 12 }, children: meta.errors.join("; ") }),
+    hasWarnings && !hasErrors && /* @__PURE__ */ jsx8("span", { style: { color: "var(--sg-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
+  ] });
+}
+
+// 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/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/components/complex/SchemaForm.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "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__ */ jsxs5(
+    Form,
+    {
+      form: formInstance,
+      layout,
+      size,
+      disabled,
+      labelCol,
+      wrapperCol,
+      className,
+      style,
+      children: [
+        fields.map((fieldConfig) => /* @__PURE__ */ jsx9(
+          Field,
+          {
+            name: fieldConfig.name,
+            label: typeof fieldConfig.label === "string" ? fieldConfig.label : void 0,
+            rules: rulesMap[fieldConfig.name],
+            children: (field) => /* @__PURE__ */ jsx9(
+              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__ */ jsx9("button", { type: "submit", className: "sg-button sg-button-primary", children: submitText })
+      ]
+    }
+  );
+}
+
+export {
+  useField,
+  useForm,
+  FormContext,
+  useFormContext,
+  FormProvider,
+  useFormProvider,
+  Form,
+  Textarea,
+  Tooltip,
+  Field,
+  SubmitButton,
+  useWatch,
+  FormList,
+  useFieldArray,
+  AutoField,
+  zodRule,
+  zodRules,
+  zodDefaults,
+  zodToJsonSchema,
+  jsonSchemaToFields,
+  jsonSchemaToRules,
+  jsonSchemaToDefaults,
+  SchemaForm
+};
+//# sourceMappingURL=chunk-MLEBVELO.js.map