@akanjs/ui 0.0.150 → 0.0.152

package/esm/Refresh.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { BiLoaderAlt } from "react-icons/bi";
+import PullToRefresh from "react-simple-pull-to-refresh";
+const Refresh = ({ children, onRefresh }) => {
+  return /* @__PURE__ */ jsx(
+    PullToRefresh,
+    {
+      onRefresh,
+      refreshingContent: /* @__PURE__ */ jsx("div", { className: "bg-base-100 fixed left-1/2 flex size-10 -translate-x-1/2 items-center justify-center rounded-full shadow-sm", children: /* @__PURE__ */ jsx(BiLoaderAlt, { className: "animate-spin text-2xl" }) }),
+      children
+    }
+  );
+};
+export {
+  Refresh
+};

package/esm/ScreenNavigator.js

@@ -0,0 +1,103 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "@akanjs/client";
+import { useDrag } from "@use-gesture/react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { a, SpringValue, useSpringValue } from "react-spring";
+const ScreenNavigatorContext = createContext({
+  bind: () => ({}),
+  xValue: new SpringValue(0),
+  setMenu: null,
+  onClickMenu: null,
+  currentMenu: "",
+  menus: []
+});
+const ScreenNavigator = ({
+  children,
+  setMenu = () => {
+  },
+  menus
+}) => {
+  const [currentMenu, setCurrentMenu] = useState(menus[0]);
+  const xValue = useSpringValue(0, { config: { clamp: true } });
+  const ref = useRef(null);
+  useEffect(() => {
+    if (!ref.current)
+      return;
+    const deviceWidth = ref.current.clientWidth / 2;
+    if (currentMenu === menus[1])
+      xValue.set(-deviceWidth);
+    else
+      xValue.set(0);
+  }, []);
+  const bind = useDrag(
+    ({ first, last, offset: [x], velocity: [vx], direction: [dx], movement: [mx], cancel }) => {
+      if (!ref.current)
+        return;
+      //! 메뉴가 3개 이상일 경우 고려해야함
+      const deviceWidth = ref.current.clientWidth / 2;
+      if (x > 0 || x < -deviceWidth)
+        return;
+      if (dx < 1) {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(x);
+        } else {
+          void xValue.start(-deviceWidth);
+          setCurrentMenu(menus[1]);
+          setMenu(menus[1]);
+        }
+        if (last && x > -deviceWidth / 2) {
+          void xValue.start(0);
+        }
+      } else {
+        if (x > -deviceWidth / 2) {
+          void xValue.start(0);
+          setCurrentMenu(menus[0]);
+          setMenu(menus[0]);
+        } else {
+          void xValue.start(x);
+        }
+        if (last && x < -deviceWidth / 2) {
+          void xValue.start(-deviceWidth);
+        }
+      }
+    },
+    { axis: "x", filterTaps: true, threshold: 10 }
+  );
+  const onClickMenu = (menu) => {
+    if (!ref.current)
+      return;
+    const deviceWidth = ref.current.clientWidth / 2;
+    if (menu === menus[0]) {
+      void xValue.start(0);
+      setMenu(menus[0]);
+      setCurrentMenu(menus[0]);
+    } else {
+      void xValue.start(-deviceWidth);
+      setMenu(menus[1]);
+      setCurrentMenu(menus[1]);
+    }
+  };
+  return /* @__PURE__ */ jsx(ScreenNavigatorContext.Provider, { value: { bind, xValue, onClickMenu, menus, currentMenu, setMenu }, children: /* @__PURE__ */ jsx(a.div, { ...bind(), className: "flex h-full w-[200vw] overflow-x-scroll", style: { x: xValue }, ref, children }) });
+};
+const NavbarItem = ({ menu, children, className }) => {
+  const { onClickMenu, currentMenu } = useContext(ScreenNavigatorContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: clsx(className, currentMenu === menu ? "opacity-100" : "opacity-40"),
+      onClick: () => {
+        onClickMenu(menu);
+      },
+      children
+    }
+  );
+};
+ScreenNavigator.NavbarItem = NavbarItem;
+const Screen = ({ children }) => {
+  return /* @__PURE__ */ jsx("div", { className: "h-full w-screen overflow-scroll", style: { touchAction: "pan-y" }, children });
+};
+ScreenNavigator.Screen = Screen;
+export {
+  ScreenNavigator
+};

package/esm/Select.js

@@ -0,0 +1,264 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Enum } from "@akanjs/base";
+import { clsx } from "@akanjs/client";
+import { useDebounce, usePage } from "@akanjs/next";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { BiCheck, BiChevronDown, BiX } from "react-icons/bi";
+import { BsQuestionCircleFill } from "react-icons/bs";
+import { TiDelete } from "react-icons/ti";
+const Select = ({
+  label,
+  desc,
+  labelClassName,
+  className,
+  value,
+  options,
+  nullable,
+  disabled,
+  multiple,
+  searchable,
+  placeholder,
+  selectClassName,
+  selectorClassName,
+  selectedClassName,
+  onOpen,
+  onChange,
+  onSearch,
+  renderOption,
+  renderSelected
+}) => {
+  const { l } = usePage();
+  const [isOpen, setIsOpen] = useState(false);
+  const labeledOptions = useMemo(
+    () => options instanceof Enum ? options.values.map((v) => ({ label: v, value: v })) : options[0]?.label && options[0]?.value ? options : options.map((v) => ({ label: v, value: v })),
+    [options]
+  );
+  const [selectedValues, setSelectedValues] = useState(multiple ? value : [value]);
+  const [searchText, setSearchText] = useState("");
+  const [searchOptions, setSearchOptions] = useState(labeledOptions);
+  const dropdownRef = useRef(null);
+  const selected = (v) => {
+    if (multiple)
+      return selectedValues.includes(v);
+    return v === selectedValues[0];
+  };
+  const handleClickOutside = (event) => {
+    if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      setIsOpen(false);
+    }
+  };
+  const onSelect = (v, index) => {
+    if (multiple) {
+      if (selectedValues.includes(v)) {
+        setSelectedValues(selectedValues.filter((rev) => rev !== v));
+        onChange(
+          selectedValues.filter((rev) => rev !== v),
+          selectedValues
+        );
+      } else {
+        setSelectedValues([...selectedValues, v]);
+        onChange([...selectedValues, v], selectedValues);
+      }
+    } else {
+      setSelectedValues([v]);
+      onChange(v, selectedValues[0]);
+      setIsOpen(false);
+    }
+  };
+  const debouncedOnSearch = useDebounce(
+    (text) => {
+      onSearch?.(text);
+    },
+    [searchText],
+    300
+  );
+  useEffect(() => {
+    if (isOpen)
+      document.addEventListener("mousedown", handleClickOutside);
+    else
+      document.removeEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  useEffect(() => {
+    setSearchOptions(labeledOptions);
+  }, [labeledOptions]);
+  useEffect(() => {
+    if (isOpen)
+      onOpen?.();
+  }, [isOpen]);
+  useEffect(() => {
+    if (multiple)
+      setSelectedValues(value);
+    else
+      setSelectedValues([value]);
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: clsx("relative min-w-[150px]", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-open": isOpen,
+        className: clsx(
+          "btn flex h-auto min-h-[40px] w-full cursor-pointer items-center px-0 py-1 pr-5 pl-1 focus:outline-hidden",
+          "bg-base-100 data-[open=true]:border-primary",
+          disabled && "cursor-not-allowed opacity-50",
+          selectClassName,
+          { "border-base-300": isOpen }
+        ),
+        onClick: () => {
+          setIsOpen(!isOpen);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("span", { className: "flex w-full flex-wrap items-center gap-1", children: [
+            multiple ? /* @__PURE__ */ jsx(Fragment, { children: value.map((v, index) => {
+              const optionValue = labeledOptions.find((option) => option.value === v);
+              if (!optionValue)
+                return null;
+              return /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: "bg-success/70 text-success-content flex items-center gap-2 rounded-lg px-2 py-1 text-xs",
+                  children: [
+                    renderSelected ? renderSelected(optionValue.value) : optionValue.label,
+                    /* @__PURE__ */ jsx(
+                      "button",
+                      {
+                        onClick: (e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          onSelect(optionValue.value, index);
+                        },
+                        className: "opacity-50 duration-300 hover:opacity-100",
+                        children: /* @__PURE__ */ jsx(BiX, { className: "text-base" })
+                      }
+                    )
+                  ]
+                },
+                index
+              );
+            }) }) : /* @__PURE__ */ jsx("div", { className: "px-2 py-1", children: value ? /* @__PURE__ */ jsx(Fragment, { children: (() => {
+              const optionValue = searchOptions.find((option) => selected(option.value));
+              if (!optionValue)
+                return null;
+              return renderSelected ? renderSelected(optionValue.value) : optionValue.label;
+            })() }) : "" }),
+            searchable && /* @__PURE__ */ jsx(
+              "input",
+              {
+                type: "text",
+                className: "input w-full flex-1 border-none bg-transparent shadow-none outline-none focus:border-none focus:shadow-none focus:outline-none",
+                placeholder: selectedValues.length > 0 ? "" : placeholder,
+                value: searchText,
+                onChange: (e) => {
+                  if (!isOpen)
+                    setIsOpen(true);
+                  if (!onSearch)
+                    setSearchOptions(
+                      labeledOptions.filter(
+                        (option) => option.label.toString().toLowerCase().includes(e.target.value.toLowerCase())
+                      )
+                    );
+                  setSearchText(e.target.value);
+                  debouncedOnSearch(e.target.value);
+                },
+                onClick: (e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  setIsOpen(!isOpen);
+                }
+              }
+            )
+          ] }),
+          multiple && selectedValues.length || !multiple && selectedValues[0] !== void 0 && selectedValues[0] !== null ? /* @__PURE__ */ jsx(
+            TiDelete,
+            {
+              className: "absolute right-8 z-[2] h-full text-lg duration-300 hover:cursor-pointer hover:opacity-50",
+              onClick: (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+                setSearchText("");
+                setSelectedValues([]);
+                if (multiple)
+                  onChange([], selectedValues);
+                else
+                  onChange(null, selectedValues[0]);
+                setIsOpen(false);
+              }
+            }
+          ) : null,
+          /* @__PURE__ */ jsx(
+            BiChevronDown,
+            {
+              className: clsx("absolute top-1/2 right-2 -translate-y-1/2 text-lg duration-100", { "rotate-180": isOpen })
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-open": isOpen,
+        className: clsx(
+          "scrollbar-thin scrollbar-thumb-base-content/20 scrollbar-track scrollbar-track-base-content/40 bg-base-200 border-base-300 absolute z-20 mt-0.5 w-full overflow-y-scroll rounded-md shadow-lg transition-all",
+          "origin-center duration-200 data-[open=false]:h-0 data-[open=false]:border-none data-[open=true]:h-[270px] data-[open=true]:border",
+          selectorClassName
+        ),
+        children: [
+          nullable && /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "cursor-pointer p-2",
+              onClick: () => {
+                setIsOpen(false);
+              }
+            }
+          ),
+          searchOptions.length > 0 ? /* @__PURE__ */ jsx(Fragment, { children: searchOptions.map((option, index) => {
+            const isSelected = selected(option.value);
+            return /* @__PURE__ */ jsxs("div", { className: "group", children: [
+              /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: clsx(
+                    "hover:bg-base-300 relative m-2 cursor-pointer rounded-sm p-2 duration-100 last:border-b-0",
+                    {
+                      selectedClassName: !multiple && isSelected,
+                      "bg-success/70 text-success-content": isSelected
+                    }
+                  ),
+                  onClick: () => {
+                    onSelect(option.value, index);
+                    setSearchText("");
+                  },
+                  children: [
+                    renderOption ? renderOption(option.value) : option.label,
+                    /* @__PURE__ */ jsx("div", { className: clsx("absolute top-1/2 right-2 -translate-y-1/2 flex-wrap duration-200", {}), children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: clsx("duration-200", {
+                          "translate-y-0 opacity-100": isSelected,
+                          "-translate-y-full opacity-0": !isSelected
+                        }),
+                        children: /* @__PURE__ */ jsx(BiCheck, {})
+                      }
+                    ) })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx("div", { className: "h-px w-full px-2 group-last:hidden", children: /* @__PURE__ */ jsx("div", { className: "bg-base-content/10 size-full" }) })
+            ] }, index);
+          }) }) : /* @__PURE__ */ jsxs("div", { className: "text-base-content/50 flex size-full flex-col items-center justify-center gap-2 p-2 text-center text-5xl", children: [
+            /* @__PURE__ */ jsx(BsQuestionCircleFill, {}),
+            /* @__PURE__ */ jsx("div", { className: "text-sm", children: l("shared.noOptions") })
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Select
+};

package/esm/Signal/Arg.js

@@ -0,0 +1,248 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { getNonArrayModel, isGqlScalar } from "@akanjs/base";
+import { getGqlTypeStr, getScalarExample } from "@akanjs/constant";
+import { usePage } from "@akanjs/next";
+import { st } from "@akanjs/store";
+import { AiOutlineDelete } from "react-icons/ai";
+import { DatePicker } from "../DatePicker";
+import { Input } from "../Input";
+import Object from "./Object";
+function Arg({ argType, value, onChange }) {
+  return argType === "ID" ? /* @__PURE__ */ jsx(Arg.ID, { value, onChange }) : argType === "Int" ? /* @__PURE__ */ jsx(Arg.Int, { value, onChange }) : argType === "Float" ? /* @__PURE__ */ jsx(Arg.Float, { value, onChange }) : argType === "String" ? /* @__PURE__ */ jsx(Arg.String, { value, onChange }) : argType === "Boolean" ? /* @__PURE__ */ jsx(Arg.Boolean, { value, onChange }) : argType === "Date" ? /* @__PURE__ */ jsx(Arg.Date, { value, onChange }) : argType === "JSON" ? /* @__PURE__ */ jsx(Arg.Json, { value, onChange }) : argType === "Upload" ? /* @__PURE__ */ jsx(Arg.Upload, { value, onChange }) : /* @__PURE__ */ jsx(Fragment, {});
+}
+const ArgTable = ({ sigMeta, gqlMeta, argMetas }) => {
+  const { l } = usePage();
+  const onCopy = (text) => {
+    void navigator.clipboard.writeText(text);
+    st.do.showMessage({ content: "\uD074\uB9BD\uBCF4\uB4DC\uC5D0 \uBCF5\uC0AC\uB418\uC5C8\uC2B5\uB2C8\uB2E4.", type: "success", duration: 3 });
+  };
+  return /* @__PURE__ */ jsxs("table", { className: "table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { className: "text-bold", children: [
+      /* @__PURE__ */ jsx("th", { children: "Arg Key" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center", children: "Type" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center", children: "Enum" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center", children: "Name" }),
+      /* @__PURE__ */ jsx("th", { className: "text-center", children: "Description" })
+    ] }) }),
+    argMetas.map((argMeta, idx) => {
+      const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+      return /* @__PURE__ */ jsx("tbody", { className: "font-normal", children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("td", { children: argMeta.name }),
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: /* @__PURE__ */ jsx(Object.Type, { objRef: argRef, arrDepth: argArrDepth }) }),
+        /* @__PURE__ */ jsx("td", { width: argMeta.argsOption.enum ? "20%" : "10%", className: "text-center", children: argMeta.argsOption.enum ? /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: argMeta.argsOption.enum.map((opt, idx2) => /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            "data-tip": l.enum(sigMeta.refName, argMeta.name, opt),
+            onClick: () => {
+              onCopy(opt);
+            },
+            className: "tooltip tooltip-primary btn btn-secondary btn-xs",
+            children: opt
+          },
+          idx2
+        ) }, idx2)) }) : "-" }),
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: l.arg(sigMeta.refName, gqlMeta.key, argMeta.name) }),
+        /* @__PURE__ */ jsx("td", { className: "text-center", children: l.argdesc(sigMeta.refName, gqlMeta.key, argMeta.name) })
+      ] }) }, idx);
+    })
+  ] });
+};
+Arg.Table = ArgTable;
+const ArgParam = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  if (!isGqlScalar(argRef))
+    throw new Error(`Param arg - ${argMeta.key}/${argMeta.name} must be scalar`);
+  else if (argArrDepth > 0)
+    throw new Error(`Param arg - ${argMeta.key}/${argMeta.name} must not be array`);
+  const argType = getGqlTypeStr(argRef);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Arg, { argType, value, onChange }) })
+  ] });
+};
+Arg.Param = ArgParam;
+const ArgQuery = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  if (!isGqlScalar(argRef))
+    throw new Error(`Query arg - ${argMeta.key}/${argMeta.name} must be scalar`);
+  else if (argArrDepth > 1)
+    throw new Error(`Query arg - ${argMeta.key}/${argMeta.name} must not be more than 2D array`);
+  const argType = getGqlTypeStr(argRef);
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: argArrDepth && Array.isArray(value) ? /* @__PURE__ */ jsxs("div", { children: [
+      value.map((val, idx) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx(
+          Arg,
+          {
+            argType,
+            value: val,
+            onChange: (val2) => {
+              onChange([...value.slice(0, idx), val2, ...value.slice(idx + 1)]);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            className: "btn btn-sm btn-square",
+            onClick: () => {
+              onChange([...value.slice(0, idx), ...value.slice(idx + 1)]);
+            },
+            children: /* @__PURE__ */ jsx(AiOutlineDelete, {})
+          }
+        )
+      ] }, idx)),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: "btn btn-sm",
+          onClick: () => {
+            onChange([...value, getScalarExample(argRef)]);
+          },
+          children: "+ Add"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsx(Arg, { argType, value, onChange }) })
+  ] });
+};
+Arg.Query = ArgQuery;
+const ArgFormData = ({ argMeta, value, onChange }) => {
+  const [argRef, argArrDepth] = getNonArrayModel(argMeta.returns());
+  if (getGqlTypeStr(argRef) !== "Upload")
+    throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be Upload`);
+  else if (argArrDepth < 1)
+    throw new Error(`FormData arg - ${argMeta.key}/${argMeta.name} must be array`);
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "w-36 pl-2", children: [
+      "- ",
+      argMeta.name
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(Arg, { argType: "Upload", value, onChange }) })
+  ] });
+};
+Arg.FormData = ArgFormData;
+const ArgID = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.ID = ArgID;
+const ArgInt = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.Int = ArgInt;
+const ArgFloat = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input.Number,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2 ?? 0);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.Float = ArgFloat;
+const ArgString = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input,
+    {
+      inputClassName: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      },
+      validate: (e) => true
+    }
+  );
+};
+Arg.String = ArgString;
+const ArgBoolean = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input.Checkbox,
+    {
+      className: "w-full",
+      checked: value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Boolean = ArgBoolean;
+const ArgDate = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    DatePicker,
+    {
+      className: "w-full",
+      value,
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Date = ArgDate;
+const ArgJson = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    Input.TextArea,
+    {
+      validate: (e) => true,
+      className: "w-full",
+      inputClassName: "w-full min-h-[300px]",
+      value,
+      onPressEnter: (value2) => {
+        onChange(value2);
+      },
+      onChange: (value2) => {
+        onChange(value2);
+      }
+    }
+  );
+};
+Arg.Json = ArgJson;
+const ArgUpload = ({ value, onChange }) => {
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "file",
+      multiple: true,
+      className: "file-input w-full max-w-xs",
+      onChange: (e) => {
+        onChange(new Array(e.target.files?.length).fill(0).map((_, idx) => e.target.files?.[idx]));
+      }
+    }
+  );
+};
+Arg.Upload = ArgUpload;
+export {
+  Arg as default
+};