@sio-group/form-react 0.1.0

package/dist/index.cjs

@@ -0,0 +1,1919 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  DateInput: () => DateInput,
+  FileInput: () => FileInput,
+  Form: () => Form,
+  Input: () => Input,
+  Link: () => Link,
+  NumberInput: () => NumberInput,
+  Radio: () => Radio,
+  RangeInput: () => RangeInput,
+  Select: () => Select,
+  TextInput: () => TextInput,
+  Textarea: () => Textarea,
+  useForm: () => useForm
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/Form.tsx
+var import_react8 = require("react");
+
+// src/hooks/useForm.ts
+var import_react2 = require("react");
+
+// src/hooks/useConnectionStatus.ts
+var import_react = require("react");
+var useConnectionStatus = () => {
+  const [isOnline, setIsOnline] = (0, import_react.useState)(navigator.onLine);
+  (0, import_react.useEffect)(() => {
+    const handleOnline = () => setIsOnline(true);
+    const handleOffline = () => setIsOnline(false);
+    window.addEventListener("online", handleOnline);
+    window.addEventListener("offline", handleOffline);
+    return () => {
+      window.removeEventListener("online", handleOnline);
+      window.removeEventListener("offline", handleOffline);
+    };
+  }, []);
+  return isOnline;
+};
+
+// src/utils/slugify.ts
+var slugify = (string, separator = "_") => {
+  return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9 ]/g, "").replace(/\s+/g, separator);
+};
+
+// src/utils/create-field-state.ts
+var import_form_validation = require("@sio-group/form-validation");
+
+// src/utils/parse-date.ts
+var parseDateValue = (val) => {
+  if (val instanceof Date) {
+    return isNaN(val.getTime()) ? null : val;
+  }
+  if (typeof val !== "string") {
+    return null;
+  }
+  if (val.trim() === "") {
+    return null;
+  }
+  const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
+  if (timeRegex.test(val)) {
+    const [hours, minutes, seconds = 0] = val.split(":").map(Number);
+    const date2 = /* @__PURE__ */ new Date();
+    date2.setHours(hours, minutes, seconds, 0);
+    return date2;
+  }
+  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
+  if (dateRegex.test(val)) {
+    const date2 = /* @__PURE__ */ new Date(val + "T00:00:00");
+    return isNaN(date2.getTime()) ? null : date2;
+  }
+  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
+  if (dateTimeRegex.test(val)) {
+    const date2 = new Date(val);
+    return isNaN(date2.getTime()) ? null : date2;
+  }
+  const date = new Date(val);
+  return isNaN(date.getTime()) ? null : date;
+};
+
+// src/utils/create-field-state.ts
+var createFieldState = (name, id, config) => {
+  return {
+    ...config.config,
+    id,
+    name,
+    type: config.type,
+    value: config.config?.defaultValue ?? getDefaultValue(config),
+    validations: [
+      ...config.config?.validations ?? [],
+      ...getDefaultValidations(config)
+    ],
+    errors: [],
+    touched: false,
+    focused: false
+  };
+};
+function getDefaultValue(config) {
+  switch (config.type) {
+    case "checkbox":
+      return false;
+    case "range":
+      return config.config.min ?? 0;
+    case "select":
+    case "creatable":
+      return null;
+    case "file":
+      return [];
+    case "color":
+      return "#000000";
+    case "number":
+    case "text":
+    default:
+      return "";
+  }
+}
+function getDefaultValidations(config) {
+  const validations = [];
+  if (config.config?.required) {
+    validations.push((0, import_form_validation.isRequired)());
+  }
+  switch (config.type) {
+    case "email":
+      validations.push((0, import_form_validation.isEmail)());
+      break;
+    case "number":
+    case "range":
+      if (config.config?.min) validations.push((0, import_form_validation.isBiggerThan)(config.config?.min));
+      if (config.config?.max) validations.push((0, import_form_validation.isSmallerThan)(config.config?.max));
+      break;
+    case "date":
+    case "datetime-local":
+    case "time":
+      const min = config.config?.min;
+      const max = config.config?.max;
+      const parsedMin = parseDateValue(min);
+      const parsedMax = parseDateValue(max);
+      if (parsedMin) validations.push((0, import_form_validation.dateIsBiggerThan)(parsedMin));
+      if (parsedMax) validations.push((0, import_form_validation.dateIsSmallerThan)(parsedMax));
+      break;
+    case "url":
+      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
+      validations.push(
+        (0, import_form_validation.isUrl)(
+          config.config?.allowLocalhost || false,
+          config.config?.allowFtp || false,
+          config.config?.secureOnly || !(config.config?.allowLocalhost || config.config?.allowFtp)
+        )
+      );
+      break;
+    case "text":
+    case "tel":
+      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
+      break;
+  }
+  return validations;
+}
+
+// src/utils/get-column-classes.ts
+var getColumnClasses = (layout, className) => {
+  if (!layout) return "sio-col-xs-12";
+  const classes = [];
+  if (className) classes.push(className);
+  if (layout.sm) classes.push(`sio-col-sm-${layout.sm}`);
+  if (layout.md) classes.push(`sio-col-md-${layout.md}`);
+  if (layout.lg) classes.push(`sio-col-lg-${layout.lg}`);
+  if (layout.order) {
+    if (layout.order.sm) classes.push(`sio-order-sm-${layout.order.sm}`);
+    if (layout.order.md) classes.push(`sio-order-md-${layout.order.md}`);
+    if (layout.order.lg) classes.push(`sio-order-lg-${layout.order.lg}`);
+  }
+  return classes.join(" ");
+};
+
+// src/utils/create-field-props.ts
+var createFieldProps = (field, setters, disabled, renderLayout = false) => {
+  const classes = getColumnClasses(field.layout, field.styling?.className);
+  const baseProps = {
+    id: field.id,
+    name: field.name,
+    label: field.label,
+    placeholder: field.placeholder,
+    value: field.value,
+    errors: field.errors,
+    required: field.required,
+    autocomplete: field.autocomplete,
+    touched: field.touched,
+    focused: field.focused,
+    readOnly: field.readOnly,
+    disabled,
+    icon: field.icon,
+    description: field.description,
+    onChange: setters.handleChange,
+    setFocused: setters.setFocused,
+    setTouched: setters.setTouched,
+    className: renderLayout ? classes : field.styling?.className,
+    style: field.styling?.style
+  };
+  if (field.type === "textarea") {
+    return {
+      ...baseProps,
+      type: field.type,
+      rows: field.rows,
+      cols: field.cols
+    };
+  }
+  if (field.type === "file") {
+    return {
+      ...baseProps,
+      type: field.type,
+      accept: field.accept,
+      multiple: field.multiple ?? false,
+      capture: field.capture ?? false,
+      onError: setters.setErrors,
+      filesize: field.filesize ?? 10240,
+      onFileRemove: field.onFileRemove,
+      onRemoveAll: field.onRemoveAll
+    };
+  }
+  if (field.type === "range" || field.type === "number") {
+    const numberProps = {
+      ...baseProps,
+      type: field.type,
+      min: field.min ?? Number.MIN_SAFE_INTEGER,
+      max: field.max ?? Number.MAX_SAFE_INTEGER,
+      step: field.step ?? 1
+    };
+    if (field.type === "number") {
+      return {
+        ...numberProps,
+        spinner: field.spinner ?? true
+      };
+    }
+    if (field.type === "range") {
+      return {
+        ...numberProps,
+        showValue: field.showValue ?? true
+      };
+    }
+  }
+  if (field.type === "date" || field.type === "time" || field.type === "datetime-local") {
+    return {
+      ...baseProps,
+      type: field.type,
+      min: field.min ?? "",
+      max: field.max ?? "",
+      step: field.step ?? 1
+    };
+  }
+  if (field.type === "url") {
+    return {
+      ...baseProps,
+      type: field.type,
+      allowLocalhost: field.allowLocalhost ?? false,
+      allowFtp: field.allowFtp ?? false,
+      secureOnly: field.secureOnly ?? !(field.allowLocalhost || field.allowFtp)
+    };
+  }
+  if (field.type === "select" || field.type === "creatable") {
+    return {
+      ...baseProps,
+      type: field.type,
+      options: field.options || [],
+      multiple: field.multiple
+    };
+  }
+  if (field.type === "radio") {
+    return {
+      ...baseProps,
+      type: field.type,
+      options: field.options || [],
+      inline: field.inline ?? false
+    };
+  }
+  return { ...baseProps, type: field.type };
+};
+
+// src/hooks/useForm.ts
+var useForm = ({ disableWhenOffline } = { disableWhenOffline: true }) => {
+  const isOnline = useConnectionStatus();
+  const [fields, setFields] = (0, import_react2.useState)({});
+  const [isDirty, setIsDirty] = (0, import_react2.useState)(false);
+  const [isBusy, setIsBusy] = (0, import_react2.useState)(false);
+  const validateField = (value, validations, label) => {
+    return validations.map((validation) => validation(value, label)).filter((error) => !!error);
+  };
+  const validateForm = () => {
+    return Object.values(fields).every((field) => field.errors?.length === 0);
+  };
+  const register = (0, import_react2.useCallback)((name, config, renderLayout) => {
+    if (!name) throw new Error("Field name is required");
+    const id = slugify(name);
+    const existing = fields[name];
+    const shouldCreate = !existing || existing.type !== config.type;
+    let field;
+    if (shouldCreate) {
+      field = createFieldState(name, id, config);
+      setFields((prevState) => ({
+        ...prevState,
+        [name]: {
+          ...field,
+          errors: validateField(field.value, field.validations, field.label)
+        }
+      }));
+    } else {
+      field = existing;
+    }
+    const setters = {
+      handleChange: (value) => {
+        setIsDirty(true);
+        setFields((prevState) => {
+          const current = prevState[name];
+          if (!current) return prevState;
+          return {
+            ...prevState,
+            [name]: {
+              ...current,
+              value,
+              errors: validateField(value, current.validations, current.label)
+            }
+          };
+        });
+      },
+      setFocused: (focused) => {
+        setFields((prevState) => {
+          const current = prevState[name];
+          if (!current) return prevState;
+          return {
+            ...prevState,
+            [name]: {
+              ...current,
+              focused
+            }
+          };
+        });
+      },
+      setTouched: (touched) => {
+        setFields((prevState) => {
+          const current = prevState[name];
+          if (!current) return prevState;
+          return {
+            ...prevState,
+            [name]: {
+              ...current,
+              touched
+            }
+          };
+        });
+      },
+      setErrors: (errors) => {
+        setFields((prevState) => {
+          const current = prevState[name];
+          if (!current) return prevState;
+          return {
+            ...prevState,
+            [name]: {
+              ...current,
+              errors
+            }
+          };
+        });
+      }
+    };
+    return createFieldProps(
+      field,
+      setters,
+      config.config?.disabled || !isOnline && disableWhenOffline,
+      renderLayout
+    );
+  }, [disableWhenOffline, isOnline, fields]);
+  const unregister = (name) => {
+    setFields((prevState) => {
+      const { [name]: _, ...rest } = prevState;
+      return rest;
+    });
+  };
+  const setValue = (name, value) => {
+    if (fields[name]) {
+      setFields((prevState) => {
+        const current = prevState[name];
+        if (!current) return prevState;
+        return {
+          ...prevState,
+          [name]: {
+            ...current,
+            value,
+            errors: validateField(
+              value,
+              prevState[name].validations,
+              prevState[name].label
+            )
+          }
+        };
+      });
+    }
+  };
+  const getValues = () => {
+    return Object.keys(fields).reduce((acc, key) => {
+      acc[key] = fields[key].value || null;
+      return acc;
+    }, {});
+  };
+  const getValue = (name) => {
+    return fields[name]?.value ?? null;
+  };
+  const reset = () => {
+    setFields({});
+    setIsDirty(false);
+    setIsBusy(false);
+  };
+  const handleSubmit = async (onSubmit) => {
+    if (isBusy) return;
+    try {
+      setIsBusy(true);
+      await onSubmit(getValues());
+    } finally {
+      setIsBusy(false);
+    }
+  };
+  const getField = (name) => {
+    return fields[name] || void 0;
+  };
+  return {
+    register,
+    unregister,
+    setValue,
+    getValues,
+    getValue,
+    reset,
+    isValid: validateForm,
+    isDirty: () => isDirty,
+    isBusy: () => isBusy,
+    submit: handleSubmit,
+    getField
+  };
+};
+
+// src/components/Fields/InputWrapper/index.tsx
+var import_react3 = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var InputWrapper = ({
+  type = "text",
+  id,
+  label,
+  description,
+  required = false,
+  focused = false,
+  disabled = false,
+  hasValue = false,
+  hasError = false,
+  errors = [],
+  hideLayout = false,
+  className = "",
+  style = {},
+  children
+}) => {
+  const classes = [
+    "form-field",
+    `form-field__${type}`,
+    focused && "form-field--focused",
+    hasValue && "form-field--has-value",
+    hasError && "form-field--has-errors",
+    disabled && "form-field--disabled",
+    hideLayout && "form-field--hidden-layout",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: classes,
+      style,
+      "aria-required": required,
+      "aria-invalid": hasError,
+      children: [
+        label && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: id, id: `${id}-label`, children: [
+          label,
+          " ",
+          required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": true, children: "*" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `form-field__control`, children }),
+        description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "form-field__description", children: description }),
+        hasError && errors.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: "form-field__errors", role: "alert", children: [...new Set(errors)].map((x, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { className: "form-field__errors-item", children: x }, i)) })
+      ]
+    }
+  );
+};
+var InputWrapper_default = (0, import_react3.memo)(InputWrapper);
+
+// src/components/Icon/index.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Icon = ({ icon }) => {
+  if (!icon) return null;
+  if (typeof icon === "string") {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "form-field__icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: icon }) });
+  }
+  switch (icon.type) {
+    case "class":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "form-field__icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("i", { className: icon.value }) });
+    case "emoji":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "form-field__icon", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: icon.value }) });
+    case "html":
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { dangerouslySetInnerHTML: { __html: icon.value }, className: "form-field__icon" });
+  }
+};
+
+// src/components/Fields/Checkbox/index.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Checkbox = ({
+  value,
+  onChange,
+  name,
+  id,
+  label,
+  required,
+  setTouched,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: value === true,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      hideLayout: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("label", { htmlFor: id, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "input",
+            {
+              name,
+              type,
+              id,
+              checked: value,
+              onChange: (e) => {
+                onChange?.(e.target.checked);
+                setTouched?.(true);
+              },
+              readOnly,
+              disabled
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { children: label }),
+          " ",
+          required && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { "aria-hidden": true, children: "*" })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Input/Input.tsx
+var import_react6 = require("react");
+
+// src/components/Button/index.tsx
+var import_react4 = __toESM(require("react"), 1);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ButtonComponent = ({
+  type = "button",
+  label,
+  onClick,
+  variant = "primary",
+  color = "default",
+  size = "md",
+  block = false,
+  loading = false,
+  disabled = false,
+  className = "",
+  ariaLabel = "",
+  style = {},
+  children
+}) => {
+  const isDisabled = disabled || loading;
+  const handleClick = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+  };
+  const buttonClasses = [
+    "btn",
+    `btn--${variant}`,
+    `btn--${size}`,
+    `btn--${color}`,
+    block && "btn--block",
+    loading && "btn--loading",
+    isDisabled && "btn--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      type,
+      onClick: handleClick,
+      className: buttonClasses,
+      style,
+      disabled: isDisabled,
+      "aria-label": ariaLabel || label,
+      "aria-busy": loading,
+      "aria-disabled": isDisabled,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "10", cy: "10", r: "8" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "btn__loading-text", children: "Processing..." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        children,
+        label
+      ] })
+    }
+  );
+};
+var Button = import_react4.default.memo(ButtonComponent);
+
+// src/components/Fields/Input/NumberInput/index.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var NumberInput = ({
+  value,
+  min,
+  max,
+  step = 1,
+  spinner = true,
+  onChange,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  const getPrecision = (step2) => {
+    const stepStr = step2.toString();
+    if (!stepStr.includes(".")) return 0;
+    return stepStr.split(".")[1].length;
+  };
+  const handleIncrement = () => {
+    const newValue = Math.max(min ?? 0, Math.min(Number(value) + step, max ?? Infinity));
+    onChange(newValue.toFixed(getPrecision(step)));
+  };
+  const handleDecrement = () => {
+    const newValue = Math.max(Number(value) - step, min ?? -Infinity);
+    onChange(newValue.toFixed(getPrecision(step)));
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowUp") {
+      e.preventDefault();
+      handleIncrement();
+    } else if (e.key === "ArrowDown") {
+      e.preventDefault();
+      handleDecrement();
+    }
+  };
+  const handleChange = (e) => {
+    let value2 = "";
+    if (e.target.value) {
+      value2 = e.target.valueAsNumber.toString();
+    }
+    onChange(value2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: !!value,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      children: [
+        spinner && spinner === "horizontal" && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            className: "form-field__spinner-btn",
+            onClick: handleDecrement,
+            disabled: disabled || min !== void 0 && Number(value) <= min,
+            "aria-label": "Decrease value",
+            label: "-"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "input",
+          {
+            type: "number",
+            value: value !== "" ? Number(value) : "",
+            min,
+            max,
+            step,
+            onChange: handleChange,
+            onKeyDown: (e) => {
+              handleKeyDown(e);
+              setTouched?.(true);
+            },
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": Number(value),
+            name,
+            id,
+            placeholder: `${placeholder ?? ""}${!label && required ? " *" : ""}`,
+            autoComplete: autocomplete ? autocomplete : "off",
+            onBlur: () => {
+              setTouched?.(true);
+              setFocused?.(false);
+            },
+            onFocus: () => {
+              setFocused?.(true);
+            },
+            readOnly,
+            disabled,
+            "aria-label": label || placeholder,
+            style: spinner && spinner === "horizontal" ? { textAlign: "center" } : {}
+          }
+        ),
+        spinner && (spinner === "horizontal" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          Button,
+          {
+            type: "button",
+            variant: "link",
+            className: "form-field__spinner-btn",
+            onClick: handleIncrement,
+            disabled: disabled || max !== void 0 && Number(value) >= max,
+            "aria-label": "Increase value",
+            label: "+"
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "form-field__spinner", "aria-hidden": "true", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              type: "button",
+              onClick: handleIncrement,
+              disabled: disabled || max !== void 0 && Number(value) >= max,
+              "aria-label": "Increase value",
+              label: "\u25B2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              type: "button",
+              onClick: handleDecrement,
+              disabled: disabled || min !== void 0 && Number(value) <= min,
+              "aria-label": "Decrease value",
+              label: "\u25BC"
+            }
+          )
+        ] }))
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Input/RangeInput/index.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var RangeInput = ({
+  value,
+  min,
+  max,
+  step = 1,
+  showValue = true,
+  onChange,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: !!value,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { icon }),
+        showValue && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "form-field__range-value", children: Number(value) }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          "input",
+          {
+            type,
+            name,
+            id,
+            value: Number(value),
+            autoComplete: autocomplete ? autocomplete : "off",
+            onChange: (e) => onChange(Number(e.target.value)),
+            onBlur: () => {
+              if (setTouched) setTouched(true);
+              if (setFocused) setFocused(false);
+            },
+            onFocus: () => {
+              if (setFocused) setFocused(true);
+            },
+            min,
+            max,
+            step,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": Number(value),
+            readOnly,
+            disabled,
+            "aria-label": label || placeholder
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Input/DateInput/index.tsx
+var import_react5 = require("react");
+
+// src/utils/custom-icons.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var CustomIcons = {
+  Date: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2", stroke: "currentColor", fill: "none" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6", stroke: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6", stroke: "currentColor" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10", stroke: "currentColor" })
+  ] }),
+  Time: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "12 6 12 12 16 14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor", fillOpacity: "0.3", stroke: "none" })
+  ] }),
+  DateTime: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "2", y: "3", width: "14", height: "14", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "5", y1: "2", x2: "5", y2: "5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "13", y1: "2", x2: "13", y2: "5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "2", y1: "7", x2: "16", y2: "7" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "19", cy: "15", r: "4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "19 13 19 15 21 16" })
+  ] }),
+  FileUpload: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 12v6m0-6 2 2m-2-2-2 2" })
+  ] }),
+  CloudUpload: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 16v-6m0 0-2 2m2-2 2 2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M16 16h3a4 4 0 0 0 0-8h-1.5A5.5 5.5 0 0 0 7 9a5 5 0 0 0-1 9.8" })
+  ] }),
+  TrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 3v3M14 3v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "10", y1: "10", x2: "10", y2: "16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "14", y1: "10", x2: "14", y2: "16" })
+  ] }),
+  SimpleTrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "6", y: "8", width: "12", height: "12", rx: "1", ry: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 4h6" })
+  ] }),
+  DeleteTrashIcon: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M3 6h18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "6", y: "6", width: "12", height: "14", rx: "1", ry: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 3h6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 3v3M14 3v3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "9", y1: "10", x2: "15", y2: "16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "15", y1: "10", x2: "9", y2: "16" })
+  ] }),
+  FileIcon: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" })
+  ] }),
+  Word: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "13", x2: "16", y2: "13" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "16", x2: "16", y2: "16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "8", y1: "19", x2: "13", y2: "19" })
+  ] }),
+  Excel: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "7", y1: "15.5", x2: "17", y2: "15.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("line", { x1: "11.5", y1: "12", x2: "11.5", y2: "19" })
+  ] }),
+  PowerPoint: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "7", y: "12", width: "10", height: "7", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M9 17l2-3 2 2 2-3" })
+  ] }),
+  Pdf: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "7", y: "14", width: "10", height: "4", rx: "1" })
+  ] }),
+  Image: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "9", cy: "13", r: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M7 18l3-3 2 2 3-3 2 4" })
+  ] }),
+  Audio: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M8 16v-2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M10 17v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 18v-6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M14 17v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M16 16v-2" })
+  ] }),
+  Video: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polyline", { points: "13 2 13 9 20 9" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("rect", { x: "7", y: "12", width: "8", height: "6", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("polygon", { points: "11 14 14 15 11 16" })
+  ] }),
+  Globe: () => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "svg",
+    {
+      width: "20",
+      height: "20",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M2 12h20" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 0 20 15.3 15.3 0 0 1 0-20z" })
+      ]
+    }
+  )
+};
+
+// src/components/Fields/Input/DateInput/index.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DateInput = ({
+  value,
+  min,
+  max,
+  step = 1,
+  onChange,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  const inputRef = (0, import_react5.useRef)(null);
+  const showPicker = () => {
+    if (inputRef.current) {
+      inputRef.current.focus();
+      if (inputRef.current?.showPicker) {
+        inputRef.current.showPicker();
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: !!value,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          "input",
+          {
+            ref: inputRef,
+            type,
+            value: (value ?? "").toString(),
+            min,
+            max,
+            step,
+            onChange: (e) => onChange(e.target.value),
+            name,
+            id,
+            placeholder: `${placeholder}${!label && required ? " *" : ""}`,
+            autoComplete: autocomplete ? autocomplete : "off",
+            onBlur: () => {
+              if (setTouched) setTouched(true);
+              if (setFocused) setFocused(false);
+            },
+            onFocus: () => {
+              if (setFocused) setFocused(true);
+            },
+            readOnly,
+            disabled,
+            "aria-label": label || placeholder
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          Button,
+          {
+            className: "form-field__action",
+            type: "button",
+            onClick: showPicker,
+            disabled,
+            "aria-label": `Open ${type} picker`,
+            label: type === "date" ? CustomIcons.Date() : type === "time" ? CustomIcons.Time() : CustomIcons.DateTime()
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Input/FileInput/index.tsx
+var import_form_validation2 = require("@sio/form-validation");
+
+// src/utils/get-accept-string.ts
+var getAccept = (accept) => {
+  if (Array.isArray(accept)) {
+    return accept.map((item) => {
+      if (item === "image") return "image/*";
+      if (item === "video") return "video/*";
+      if (item === "audio") return "audio/*";
+      return item;
+    }).join(", ");
+  }
+  if (accept === "image") return "image/*";
+  if (accept === "video") return "video/*";
+  if (accept === "audio") return "audio/*";
+  return accept;
+};
+
+// src/utils/get-file-size.ts
+var getFileSize = (size) => {
+  const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
+  if (size === 0) return "0 Bytes";
+  const i = Math.floor(Math.log(size) / Math.log(1024));
+  return `${Math.round(size / Math.pow(1024, i))} ${sizes[i]}`;
+};
+
+// src/utils/file-type-icon.ts
+var FileTypeIcon = (mime) => {
+  let icon;
+  switch (mime) {
+    case "text/plain":
+      icon = CustomIcons.FileIcon();
+      break;
+    case "text/uri-list":
+      return CustomIcons.Globe();
+    case "application/xls":
+    case "application/vnd.ms-excel":
+    case "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":
+    case "application/vnd.ms-excel.sheet.macroEnabled.12":
+    case "application/vnd.ms-excel.sheet.binary.macroEnabled.12":
+      icon = CustomIcons.Excel();
+      break;
+    case "application/msword":
+    case "application/vnd.openxmlformats-officedocument.wordprocessingml.document":
+    case "application/vnd.ms-word":
+    case "application/vnd.ms-word.document.macroEnabled.12":
+      icon = CustomIcons.Word();
+      break;
+    case "application/vnd.ms-powerpoint":
+    case "application/vnd.openxmlformats-officedocument.presentationml.presentation":
+    case "application/vnd.ms-powerpoint.presentation.macroEnabled.12":
+    case "application/vnd.openxmlformats-officedocument.presentationml.slideshow":
+      icon = CustomIcons.PowerPoint();
+      break;
+    case "application/pdf":
+      icon = CustomIcons.Pdf();
+      break;
+    case "audio/mpeg":
+    case "audio/wav":
+    case "audio/x-wav":
+    case "audio/ogg":
+    case "audio/mp4":
+      icon = CustomIcons.Audio();
+      break;
+    case "image/jpeg":
+    case "image/png":
+    case "image/bmp":
+    case "image/gif":
+    case "image/webp":
+    case "image/svg+xml":
+    case "image/heic":
+    case "image/heif":
+      icon = CustomIcons.Image();
+      break;
+    case "video/mp4":
+    case "video/quicktime":
+    case "video/webm":
+    case "video/x-msvideo":
+    case "video/x-matroska":
+      icon = CustomIcons.Video();
+      break;
+    default:
+      icon = CustomIcons.FileIcon();
+  }
+  return icon;
+};
+
+// src/components/Fields/Input/FileInput/index.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FileInput = ({
+  value,
+  onChange,
+  onError,
+  accept,
+  filesize,
+  multiple = false,
+  capture,
+  onFileRemove,
+  onRemoveAll,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  const currentFiles = value ?? [];
+  const handleRemove = (index) => {
+    const removedFile = currentFiles[index];
+    const newFiles = currentFiles.filter((_, i) => i !== index);
+    onChange(newFiles);
+    onFileRemove?.(removedFile, index, newFiles);
+  };
+  const handleRemoveAll = () => {
+    const removedFiles = [...currentFiles];
+    onChange([]);
+    onRemoveAll?.(removedFiles);
+  };
+  const handleChange = (e) => {
+    const files = Array.from(e.target.files ?? []);
+    const validator = (0, import_form_validation2.isValidFile)(filesize, getAccept(accept));
+    let fileList = [...currentFiles];
+    const errorList = [];
+    for (let file of files) {
+      const error = validator(file);
+      if (error) {
+        errorList.push(error);
+      } else {
+        if (multiple) {
+          fileList.push(file);
+        } else {
+          fileList = [file];
+        }
+      }
+    }
+    onChange(fileList);
+    if (onError) onError(errorList ?? []);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      InputWrapper_default,
+      {
+        type,
+        id,
+        label,
+        description,
+        required,
+        focused,
+        disabled: disabled || readOnly,
+        hasValue: currentFiles.length > 0,
+        hasError: errors.length > 0 && touched,
+        errors,
+        className,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            "input",
+            {
+              type,
+              name,
+              id,
+              placeholder: `${placeholder}${!label && required ? " *" : ""}`,
+              autoComplete: autocomplete ? autocomplete : "off",
+              onChange: handleChange,
+              onBlur: () => {
+                if (setTouched) setTouched(true);
+                if (setFocused) setFocused(false);
+              },
+              onFocus: () => {
+                if (setFocused) setFocused(true);
+              },
+              accept: getAccept(accept),
+              capture,
+              readOnly,
+              disabled,
+              "aria-label": label || placeholder,
+              multiple
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            Button,
+            {
+              className: "form-field__action",
+              type: "button",
+              onClick: () => {
+                if (setTouched) setTouched(true);
+                document.getElementById(id)?.click();
+              },
+              disabled,
+              "aria-label": "Select files",
+              label: CustomIcons.FileUpload()
+            }
+          )
+        ]
+      }
+    ),
+    currentFiles.length !== 0 && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "form-field__upload-file-section", children: [
+      currentFiles.map((file, index) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "form-field__upload-file", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "form-field__upload-file-label", children: [
+          FileTypeIcon(file.type || "text/uri-list"),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { children: [
+            file.name,
+            file.size ? ` (${getFileSize(file.size)})` : ""
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "form-field__upload-file__buttons", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "button",
+          {
+            type: "button",
+            className: "form-field__upload-file-remove-button",
+            onClick: () => handleRemove(index),
+            children: CustomIcons.TrashIcon()
+          }
+        ) })
+      ] }, index)),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "form-field__upload-buttons", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+        "button",
+        {
+          type: "button",
+          className: "form-field__upload-remove-all-button",
+          onClick: handleRemoveAll,
+          children: [
+            CustomIcons.TrashIcon(),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: "Verwijder alles" })
+          ]
+        }
+      ) })
+    ] })
+  ] });
+};
+
+// src/components/Fields/Input/TextInput/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var TextInput = ({
+  value,
+  onChange,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: !!value,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "input",
+          {
+            type,
+            name,
+            id,
+            value,
+            placeholder: `${placeholder ?? ""}${!label && required ? " *" : ""}`,
+            autoComplete: autocomplete ? autocomplete : "off",
+            onChange: (e) => onChange(e.target.value),
+            onBlur: () => {
+              if (setTouched) setTouched(true);
+              if (setFocused) setFocused(false);
+            },
+            onFocus: () => {
+              if (setFocused) setFocused(true);
+            },
+            readOnly,
+            disabled,
+            "aria-label": label || placeholder
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Input/Input.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Input = (0, import_react6.memo)(
+  (props) => {
+    const { type = "text" } = props;
+    return (0, import_react6.useMemo)(() => {
+      switch (props.type) {
+        case "number":
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(NumberInput, { ...props });
+        case "range":
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(RangeInput, { ...props });
+        case "date":
+        case "time":
+        case "datetime-local":
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DateInput, { ...props });
+        case "file":
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(FileInput, { ...props });
+        case "hidden":
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "input",
+            {
+              type: props.type,
+              name: props.name,
+              id: props.id,
+              value: props.value
+            }
+          );
+        default:
+          return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TextInput, { ...props });
+      }
+    }, [type, props]);
+  }
+);
+
+// src/components/Fields/Radio/index.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Radio = ({
+  value,
+  onChange,
+  options,
+  inline,
+  name,
+  id,
+  label,
+  required,
+  setTouched,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className: `${className ?? ""}${inline ? " form-field__radio-inline" : ""}`,
+      style,
+      hideLayout: true,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { icon }),
+        options.filter((option) => typeof option === "string" || !option.hide).map((option) => {
+          const opt = typeof option === "string" ? { value: option, label: option } : option;
+          return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "label",
+            {
+              htmlFor: `${id}-${opt.value}`,
+              className: value === opt.value ? "form-field--has-value" : "",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "input",
+                  {
+                    name,
+                    type,
+                    id: `${id}-${opt.value}`,
+                    value: opt.value,
+                    checked: value === opt.value,
+                    onChange: () => {
+                      if (onChange) onChange(opt.value);
+                      if (setTouched) setTouched(true);
+                    },
+                    readOnly,
+                    disabled: opt.disabled || disabled
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { children: opt.label })
+              ]
+            },
+            opt.value
+          );
+        })
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Select/index.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Select = ({
+  value,
+  onChange,
+  options,
+  multiple,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  const renderOption = (option) => {
+    if (typeof option === "string") {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: option, children: option }, option);
+    }
+    if ("options" in option) {
+      return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("optgroup", { label: option.label, children: option.options.map(renderOption) }, option.label);
+    }
+    if (option.hide) return null;
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "option",
+      {
+        value: option.value,
+        disabled: option.disabled,
+        children: option.label
+      },
+      option.value
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: value !== void 0 && value !== null && value !== "",
+      hasError: errors.length > 0 && touched,
+      errors,
+      className: `${className ?? ""} ${multiple ? "form-field__select-multiple" : "form-field__select-single"}`,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "select",
+          {
+            name,
+            id,
+            value,
+            autoComplete: autocomplete ? autocomplete : "off",
+            onChange: (e) => {
+              if (multiple) {
+                const values = Array.from(e.target.selectedOptions).map((o) => o.value);
+                onChange(values);
+              } else {
+                onChange(e.target.value);
+              }
+            },
+            onBlur: () => {
+              if (setTouched) setTouched(true);
+              if (setFocused) setFocused(false);
+            },
+            onFocus: () => {
+              if (setFocused) setFocused(true);
+            },
+            disabled,
+            multiple,
+            "aria-label": label || placeholder,
+            children: [
+              placeholder && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("option", { value: "", selected: true, disabled: true, children: [
+                placeholder,
+                !label && required ? " *" : ""
+              ] }),
+              options.map(renderOption)
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Fields/Textarea/index.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var Textarea = ({
+  value,
+  onChange,
+  rows,
+  cols,
+  name,
+  id,
+  placeholder,
+  label,
+  required,
+  autocomplete,
+  setTouched,
+  setFocused,
+  readOnly,
+  disabled,
+  icon,
+  description,
+  focused,
+  errors,
+  touched,
+  type,
+  className,
+  style
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    InputWrapper_default,
+    {
+      type,
+      id,
+      label,
+      description,
+      required,
+      focused,
+      disabled: disabled || readOnly,
+      hasValue: !!value,
+      hasError: errors.length > 0 && touched,
+      errors,
+      className,
+      style,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "textarea",
+          {
+            name,
+            id,
+            value,
+            rows,
+            cols,
+            placeholder: `${placeholder ?? ""}${!label && required ? " *" : ""}`,
+            autoComplete: autocomplete ? autocomplete : "off",
+            onChange: (e) => onChange(e.target.value),
+            onBlur: () => {
+              if (setTouched) setTouched(true);
+              if (setFocused) setFocused(false);
+            },
+            onFocus: () => {
+              if (setFocused) setFocused(true);
+            },
+            readOnly,
+            disabled,
+            "aria-label": label || placeholder
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/components/Link/index.tsx
+var import_react7 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var LinkComponent = ({
+  label,
+  to = "#",
+  onClick,
+  color = "default",
+  size = "md",
+  block = false,
+  loading = false,
+  disabled = false,
+  className = "",
+  ariaLabel = "",
+  navigate,
+  external = false,
+  style = {},
+  children
+}) => {
+  const isDisabled = disabled || loading;
+  const isExternal = external || /^(https?:|mailto:|tel:|ftp:)/.test(to);
+  const handleClick = (e) => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
+    onClick?.(e);
+    if (!isExternal && navigate) {
+      e.preventDefault();
+      navigate();
+    }
+  };
+  const linkClasses = [
+    "link",
+    `link--${color}`,
+    `btn--${size}`,
+    block && "link--block",
+    loading && "link--loading",
+    isDisabled && "link--disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "a",
+    {
+      href: isDisabled ? void 0 : to,
+      onClick: handleClick,
+      className: linkClasses,
+      style,
+      "aria-label": ariaLabel || label,
+      "aria-busy": loading,
+      "aria-disabled": isDisabled,
+      target: isExternal ? "_blank" : void 0,
+      rel: isExternal ? "noopener noreferrer" : void 0,
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("svg", { viewBox: "0 0 20 20", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "10", cy: "10", r: "8" }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__loading-text", children: "Processing..." })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+        children,
+        label && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "btn__label", children: label })
+      ] })
+    }
+  );
+};
+var Link = import_react7.default.memo(LinkComponent);
+
+// src/components/Form.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react9 = require("react");
+var DefaultContainer = ({ children, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("form", { ...props, noValidate: true, children });
+var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "btn-group", children });
+var Form = ({
+  fields,
+  layout = [],
+  submitShow = true,
+  submitAction,
+  submitLabel = "Bewaar",
+  cancelShow = false,
+  cancelAction,
+  cancelLabel = "Annuleren",
+  buttons = [],
+  extraValidation = () => true,
+  className,
+  style,
+  disableWhenOffline = false,
+  container: Container = DefaultContainer,
+  buttonContainer: ButtonContainer = DefaultButtonContainer
+}) => {
+  const { register, getValues, isValid, isBusy, isDirty, reset, submit } = useForm({
+    disableWhenOffline
+  });
+  const loadElement = (field, renderLayout = false) => {
+    switch (field.type) {
+      case "textarea":
+        return /* @__PURE__ */ (0, import_react9.createElement)(Textarea, { ...register(field.name, field, renderLayout), key: field.name });
+      case "checkbox":
+        return /* @__PURE__ */ (0, import_react9.createElement)(Checkbox, { ...register(field.name, field, renderLayout), key: field.name });
+      case "radio":
+        return /* @__PURE__ */ (0, import_react9.createElement)(Radio, { ...register(field.name, field, renderLayout), key: field.name });
+      case "select":
+        return /* @__PURE__ */ (0, import_react9.createElement)(Select, { ...register(field.name, field, renderLayout), key: field.name });
+      case "text":
+      case "search":
+      case "email":
+      case "tel":
+      case "password":
+      case "url":
+      case "number":
+      case "range":
+      case "date":
+      case "time":
+      case "datetime-local":
+      case "color":
+      case "file":
+      case "hidden":
+        return /* @__PURE__ */ (0, import_react9.createElement)(Input, { ...register(field.name, field, renderLayout), key: field.name });
+      default:
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { children: [
+          field.type,
+          " to implement"
+        ] }, field.name);
+    }
+  };
+  const renderFields = () => {
+    const target = layout?.length ? layout : fields;
+    const hasLayout = layout?.length !== 0 || fields.some((f) => f.config.layout);
+    const content = target.map((element) => {
+      if ("fields" in element) {
+        const classes = getColumnClasses(element.layout, element.layout?.className);
+        return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          "div",
+          {
+            className: classes,
+            style: element.layout?.style,
+            children: element.fields.map((name) => {
+              const field = fieldMap.get(name);
+              return field ? loadElement(field) : null;
+            })
+          },
+          element.fields.join("-")
+        );
+      }
+      return loadElement(element, hasLayout);
+    });
+    return hasLayout ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "sio-row", children: content }) : content;
+  };
+  const fieldMap = (0, import_react8.useMemo)(() => {
+    const map = /* @__PURE__ */ new Map();
+    fields.forEach((f) => map.set(f.name, f));
+    return map;
+  }, [fields]);
+  const handleCancel = () => {
+    cancelAction?.();
+    reset();
+  };
+  const handleSubmit = async () => {
+    await submit(() => submitAction(getValues()));
+    reset();
+  };
+  const renderButton = (props, i) => {
+    return props.type === "link" ? /* @__PURE__ */ (0, import_react9.createElement)(Link, { ...props, key: i }) : /* @__PURE__ */ (0, import_react9.createElement)(Button, { ...props, key: i });
+  };
+  const renderButtons = () => {
+    return submitShow || cancelShow || buttons.length ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(ButtonContainer, { children: [
+      submitShow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Button,
+        {
+          type: "submit",
+          onClick: handleSubmit,
+          variant: "primary",
+          label: submitLabel,
+          loading: isBusy(),
+          disabled: !isValid() || !extraValidation(getValues())
+        }
+      ),
+      cancelShow && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        Button,
+        {
+          type: "button",
+          onClick: handleCancel,
+          variant: "secondary",
+          label: cancelLabel,
+          disabled: !isDirty()
+        }
+      ),
+      buttons?.map(renderButton)
+    ] }) : null;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Container, { className, style, noValidate: true, children: [
+    renderFields(),
+    renderButtons()
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button,
+  Checkbox,
+  DateInput,
+  FileInput,
+  Form,
+  Input,
+  Link,
+  NumberInput,
+  Radio,
+  RangeInput,
+  Select,
+  TextInput,
+  Textarea,
+  useForm
+});