@skygraph/react 0.5.2 → 0.5.3

package/dist/form.cjs

@@ -421,7 +421,10 @@ function Form({
 }
 
 // src/components/complex/Field.tsx
-var import_react13 = require("react");
+var import_react14 = require("react");
+
+// src/components/ui/Input.tsx
+var import_react10 = __toESM(require("react"), 1);
 
 // src/components/ui/Spin.tsx
 var import_react9 = __toESM(require("react"), 1);
@@ -498,9 +501,14 @@ function Input({
   size: sizeProp,
   disabled: disabledProp,
   loading,
+  allowClear = false,
+  status,
+  prefix,
+  suffix,
   onChange,
   onBlur,
   onFocus,
+  onClear,
   "aria-invalid": ariaInvalid,
   "aria-required": ariaRequired,
   "aria-describedby": ariaDescribedBy,
@@ -512,45 +520,73 @@ function Input({
   const config = useConfig();
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
+  const [internalValue, setInternalValue] = import_react10.default.useState(defaultValue ?? "");
+  const currentValue = value ?? internalValue;
+  const isControlled = value !== void 0;
   const wrapperClasses = unstyled ? className ?? "" : [
     "sg-input-wrapper",
     `sg-input-wrapper-${size}`,
     loading ? "sg-input-wrapper-loading" : "",
     readOnly ? "sg-input-wrapper-readonly" : "",
+    status ? `sg-input-wrapper-status-${status}` : "",
     className
   ].filter(Boolean).join(" ");
   const inputClasses = unstyled ? "" : [
     "sg-input",
     `sg-input-${size}`,
-    readOnly ? "sg-input-readonly" : ""
+    readOnly ? "sg-input-readonly" : "",
+    status ? `sg-input-status-${status}` : ""
   ].filter(Boolean).join(" ");
+  const clearLabel = config.locale?.input?.clear ?? "Clear";
+  const showClear = allowClear && !disabled && !readOnly && !loading && currentValue !== "";
+  const handleChange = (e) => {
+    if (!isControlled) setInternalValue(e.target.value);
+    onChange?.(e.target.value);
+  };
+  const handleClear = () => {
+    if (!isControlled) setInternalValue("");
+    onChange?.("");
+    onClear?.();
+  };
+  const resolvedAriaInvalid = ariaInvalid ?? (status === "error" ? true : void 0);
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: wrapperClasses, style, children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sg-input-prefix", children: prefix }),
     /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       "input",
       {
         id,
         type,
         className: inputClasses,
-        value,
-        defaultValue,
+        value: currentValue,
         placeholder,
         disabled: disabled || loading,
         readOnly,
-        "aria-invalid": ariaInvalid,
+        "aria-invalid": resolvedAriaInvalid,
         "aria-required": ariaRequired,
         "aria-readonly": readOnly || void 0,
         "aria-describedby": ariaDescribedBy,
-        onChange: (e) => onChange?.(e.target.value),
+        onChange: handleChange,
         onBlur,
         onFocus
       }
     ),
-    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spin, { size: "small", unstyled })
+    showClear && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        type: "button",
+        className: "sg-input-clear",
+        "aria-label": clearLabel,
+        onClick: handleClear,
+        children: "\xD7"
+      }
+    ),
+    loading && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spin, { size: "small", unstyled }),
+    suffix && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "sg-input-suffix", children: suffix })
   ] });
 }
 
 // src/components/ui/Textarea.tsx
-var import_react10 = __toESM(require("react"), 1);
+var import_react11 = __toESM(require("react"), 1);
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function Textarea({
   value,
@@ -576,7 +612,7 @@ function Textarea({
   const config = useConfig();
   const disabled = disabledProp ?? config.disabled;
   const size = sizeProp ?? config.size ?? "middle";
-  const [internalValue, setInternalValue] = import_react10.default.useState(value ?? defaultValue ?? "");
+  const [internalValue, setInternalValue] = import_react11.default.useState(value ?? defaultValue ?? "");
   const currentValue = value ?? internalValue;
   const handleChange = (e) => {
     const v = e.target.value;
@@ -613,10 +649,10 @@ function Textarea({
 }
 
 // src/components/ui/Tooltip.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 
 // src/components/ui/Transition.tsx
-var import_react11 = __toESM(require("react"), 1);
+var import_react12 = __toESM(require("react"), 1);
 function Transition({
   visible,
   name = "sg-fade",
@@ -630,20 +666,20 @@ function Transition({
   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)(() => {
+  const [mounted, setMounted] = (0, import_react12.useState)(visible);
+  const [phase, setPhase] = (0, import_react12.useState)(visible ? "idle" : "idle");
+  const nodeRef = (0, import_react12.useRef)(null);
+  const timerRef = (0, import_react12.useRef)(void 0);
+  const prevVisible = (0, import_react12.useRef)(visible);
+  const getEnterClasses = (0, import_react12.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)(() => {
+  const getLeaveClasses = (0, import_react12.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)(() => {
+  (0, import_react12.useEffect)(() => {
     if (visible === prevVisible.current) return;
     prevVisible.current = visible;
     clearTimeout(timerRef.current);
@@ -669,7 +705,7 @@ function Transition({
       }, duration);
     }
   }, [visible, duration, unmountOnExit, onAfterEnter, onAfterLeave]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     return () => clearTimeout(timerRef.current);
   }, []);
   if (!mounted && unmountOnExit) return null;
@@ -690,7 +726,7 @@ function Transition({
       transitionClass = `${leaveC.to} ${leaveC.active}`;
       break;
   }
-  return import_react11.default.cloneElement(children, {
+  return import_react12.default.cloneElement(children, {
     ref: nodeRef,
     className: [children.props.className, transitionClass].filter(Boolean).join(" ")
   });
@@ -705,10 +741,10 @@ function Tooltip({
   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, {
+  const [visible, setVisible] = (0, import_react13.useState)(false);
+  const ref = (0, import_react13.useRef)(null);
+  const tooltipId = (0, import_react13.useId)();
+  const triggerWithAria = (0, import_react13.isValidElement)(children) ? (0, import_react13.cloneElement)(children, {
     "aria-describedby": visible ? [children.props["aria-describedby"], tooltipId].filter(Boolean).join(" ") : children.props["aria-describedby"],
     onFocus: (e) => {
       setVisible(true);
@@ -800,12 +836,12 @@ function Field({
   const formLocale = useConfig().locale?.form;
   const requiredMarker = formLocale?.required ?? "*";
   const optionalMarker = formLocale?.optional ?? "(optional)";
-  const autoId = (0, import_react13.useId)();
+  const autoId = (0, import_react14.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 prevValueRef = (0, import_react14.useRef)(field.value);
+  (0, import_react14.useEffect)(() => {
     const allRules = [...rules];
     if (required) {
       allRules.unshift({ required: true });
@@ -1035,7 +1071,7 @@ function SubmitButton({
 }
 
 // src/components/complex/FormList.tsx
-var import_react14 = __toESM(require("react"), 1);
+var import_react15 = __toESM(require("react"), 1);
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var listUid = 0;
 function genKey() {
@@ -1043,15 +1079,15 @@ function genKey() {
 }
 function FormList({ name, initialValue, draggable, children }) {
   const { core, form } = useFormContext();
-  import_react14.default.useEffect(() => {
+  import_react15.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(() => {
+  const [keys, setKeys] = (0, import_react15.useState)(() => items.map(() => genKey()));
+  import_react15.default.useEffect(() => {
     setKeys((prev) => {
       if (prev.length === items.length) return prev;
       if (items.length > prev.length) {
@@ -1060,11 +1096,11 @@ function FormList({ name, initialValue, draggable, children }) {
       return prev.slice(0, items.length);
     });
   }, [items.length]);
-  const fields = (0, import_react14.useMemo)(
+  const fields = (0, import_react15.useMemo)(
     () => keys.slice(0, items.length).map((key, index) => ({ key, index })),
     [keys, items.length]
   );
-  const add = (0, import_react14.useCallback)(
+  const add = (0, import_react15.useCallback)(
     (defaultValue, insertIndex) => {
       form.listAdd(name, defaultValue, insertIndex);
       setKeys((prev) => {
@@ -1079,7 +1115,7 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const remove = (0, import_react14.useCallback)(
+  const remove = (0, import_react15.useCallback)(
     (index) => {
       form.listRemove(name, index);
       setKeys((prev) => {
@@ -1092,7 +1128,7 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const move = (0, import_react14.useCallback)(
+  const move = (0, import_react15.useCallback)(
     (from, to) => {
       form.listMove(name, from, to);
       setKeys((prev) => {
@@ -1104,20 +1140,20 @@ function FormList({ name, initialValue, draggable, children }) {
     },
     [form, name]
   );
-  const replace = (0, import_react14.useCallback)(
+  const replace = (0, import_react15.useCallback)(
     (values) => {
       form.listReplace(name, values);
       setKeys(values.map(() => genKey()));
     },
     [form, name]
   );
-  const operation = (0, import_react14.useMemo)(
+  const operation = (0, import_react15.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);
+  const meta = (0, import_react15.useMemo)(() => ({ errors: form.getFieldErrors(name) }), [form, name]);
+  const dragIdx = (0, import_react15.useRef)(-1);
+  const dragOverIdx = (0, import_react15.useRef)(-1);
   if (!draggable) {
     return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_jsx_runtime11.Fragment, { children: children(fields, operation, meta) });
   }
@@ -1149,7 +1185,7 @@ function FormList({ name, initialValue, draggable, children }) {
 }
 
 // src/components/complex/AutoField/AutoField.tsx
-var import_react15 = require("react");
+var import_react16 = require("react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 function AutoField(props) {
   const {
@@ -1172,7 +1208,7 @@ function AutoField(props) {
   const { form } = useFormContext();
   const value = form.getValue(name);
   const meta = form.getFieldState(name);
-  const inferredType = (0, import_react15.useMemo)(() => {
+  const inferredType = (0, import_react16.useMemo)(() => {
     if (forcedType) return forcedType;
     if (options && options.length > 0) return "select";
     if (typeof value === "boolean") return "boolean";
@@ -1189,20 +1225,10 @@ function AutoField(props) {
   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)"
-  };
+  const inputClass = [
+    "sg-autofield-input",
+    hasErrors ? "sg-autofield-input-error" : hasWarnings ? "sg-autofield-input-warning" : ""
+  ].filter(Boolean).join(" ");
   function renderInput() {
     switch (inferredType) {
       case "boolean":
@@ -1233,7 +1259,7 @@ function AutoField(props) {
             min,
             max,
             step,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1247,7 +1273,7 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: { ...inputStyle, minHeight: 80, resize: "vertical" },
+            className: `${inputClass} sg-autofield-input-textarea`,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1259,7 +1285,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0,
             children: [
@@ -1279,27 +1305,34 @@ function AutoField(props) {
               handleChange(selected);
             },
             disabled,
-            style: { ...inputStyle, minHeight: 80 },
+            className: `${inputClass} sg-autofield-input-multiple`,
             "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)) });
+        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",
@@ -1308,7 +1341,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1321,7 +1354,7 @@ function AutoField(props) {
             value: value == null ? "" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1336,7 +1369,7 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "aria-invalid": hasErrors,
             "aria-describedby": hasErrors ? errorId : void 0
           }
@@ -1349,7 +1382,7 @@ function AutoField(props) {
             value: value == null ? "#000000" : String(value),
             onChange: (e) => handleChange(e.target.value),
             disabled,
-            style: { ...inputStyle, padding: 2, width: 48, height: 32 }
+            className: `${inputClass} sg-autofield-input-color`
           }
         );
       case "slider":
@@ -1383,7 +1416,7 @@ function AutoField(props) {
               border: "none",
               cursor: disabled ? "default" : "pointer",
               fontSize: 20,
-              color: i < currentRate ? "var(--sg-warning, #faad14)" : "var(--sg-border, #d9d9d9)",
+              color: i < currentRate ? "var(--sg-color-warning, #faad14)" : "var(--sg-color-border, #d9d9d9)",
               padding: 0
             },
             "aria-label": `${i + 1} star${i !== 0 ? "s" : ""}`,
@@ -1404,7 +1437,7 @@ function AutoField(props) {
               if (files) handleChange(multiple ? Array.from(files) : files[0] ?? null);
             },
             disabled,
-            style: inputStyle
+            className: inputClass
           }
         );
       case "email":
@@ -1420,18 +1453,26 @@ function AutoField(props) {
             onBlur: () => form.onFieldBlur(name),
             placeholder,
             disabled,
-            style: inputStyle,
+            className: inputClass,
             "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 }),
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `sg-autofield ${className ?? ""}`, style, children: [
+    inferredType !== "boolean" && inferredType !== "switch" && label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "sg-autofield-label", 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("; ") })
+    hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "span",
+      {
+        id: errorId,
+        role: "alert",
+        style: { color: "var(--sg-color-error, #ff4d4f)", fontSize: 12 },
+        children: meta.errors.join("; ")
+      }
+    ),
+    hasWarnings && !hasErrors && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { style: { color: "var(--sg-color-warning, #faad14)", fontSize: 12 }, children: meta.warnings.join("; ") })
   ] });
 }