@sio-group/form-react 0.2.0 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.4.0
+
+### Minor Changes
+
+- fix bug in component
+
+## 0.3.0
+
+### Minor Changes
+
+- 370b198: Update render method to render buttons outside of container
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/index.cjs

@@ -75,264 +75,11 @@ var slugify = (string, separator = "_") => {
   return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9 ]/g, "").replace(/\s+/g, separator);
 };
 
-// ../form-validation/dist/index.js
-var isRequired = (errorMessage) => (val, label = "Dit") => {
-  const message = errorMessage?.replace("{label}", label) || `${label} is een verplicht veld.`;
-  if (val === null || val === void 0) {
-    return message;
-  }
-  if (typeof val === "string" && val.trim().length === 0) {
-    return message;
-  }
-  if (typeof val === "boolean" && !val) {
-    return message;
-  }
-  if (Array.isArray(val) && val.length === 0) {
-    return message;
-  }
-  return null;
-};
-var isEmail = (errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0) {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return errorMessage || `${label} is geen geldig e-mailadres.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    return null;
-  }
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
-  return emailRegex.test(trimmed) ? null : errorMessage || `${label} is geen geldig e-mailadres.`;
-};
-var isUrl = (allowLocalhost = false, allowFtp = false, secureOnly = true) => (val, label = "Dit") => {
-  if (val === null || val === void 0) {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return `${label} is geen geldige URL.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    return null;
-  }
-  try {
-    const url = new URL(trimmed);
-    if (secureOnly && url.protocol !== "https:") {
-      return `${label} moet https gebruiken.`;
-    }
-    if (!allowFtp && url.protocol === "ftp") {
-      return `${label} mag geen ftp gebruiken.`;
-    }
-    if (!allowLocalhost && (url.hostname === "localhost" || url.hostname === "127.0.0.1")) {
-      return `${label} mag geen localhost zijn.`;
-    }
-    return null;
-  } catch {
-    return `${label} is geen geldige URL.`;
-  }
-};
-var isBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const num = Number(val);
-  if (Number.isNaN(num)) {
-    return `${label} moet een geldig getal zijn.`;
-  }
-  return min <= num ? null : errorMessage?.replace("{label}", label)?.replace("{min}", min.toString()) || `${label} mag niet kleiner zijn dan ${min}.`;
-};
-var isSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const num = Number(val);
-  if (Number.isNaN(num)) {
-    return `${label} moet een geldig getal zijn.`;
-  }
-  return num <= max ? null : errorMessage?.replace("{label}", label)?.replace("{max}", max.toString()) || `${label} mag niet groter zijn dan ${max}.`;
-};
-var parseDateValue = (val) => {
-  if (val instanceof Date) {
-    return {
-      type: hasExplicitTime(val) ? "datetime" : "date",
-      value: isNaN(val.getTime()) ? null : val
-    };
-  }
-  if (typeof val !== "string") {
-    return { type: "invalid", value: null };
-  }
-  const trimmed = val.trim();
-  if (trimmed === "") {
-    return { type: "invalid", value: null };
-  }
-  const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
-  if (timeRegex.test(trimmed)) {
-    const [hours, minutes, seconds = 0] = trimmed.split(":").map(Number);
-    const date = /* @__PURE__ */ new Date();
-    date.setHours(hours, minutes, seconds, 0);
-    return { type: "time", value: date };
-  }
-  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-  if (dateRegex.test(trimmed)) {
-    const date = /* @__PURE__ */ new Date(trimmed + "T00:00:00.000Z");
-    return {
-      type: "date",
-      value: isNaN(date.getTime()) ? null : date
-    };
-  }
-  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
-  if (dateTimeRegex.test(trimmed)) {
-    const date = /* @__PURE__ */ new Date(trimmed + ".000Z");
-    return {
-      type: "datetime",
-      value: isNaN(date.getTime()) ? null : date
-    };
-  }
-  return { type: "invalid", value: null };
-};
-function hasExplicitTime(date) {
-  return date.getUTCHours() !== 0 || date.getUTCMinutes() !== 0 || date.getUTCSeconds() !== 0 || date.getUTCMilliseconds() !== 0;
-}
-var dateIsBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const parsed = parseDateValue(val);
-  if (!parsed.value) {
-    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
-  }
-  let formattedMin;
-  switch (parsed.type) {
-    case "time":
-      formattedMin = min.toLocaleTimeString("nl-NL", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    case "date":
-      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-      break;
-    case "datetime":
-      formattedMin = min.toLocaleString("nl-NL", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    default:
-      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-  }
-  if (parsed.type === "time") {
-    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
-    const minTime = min.getHours() * 60 + min.getMinutes();
-    return timeValue >= minTime ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
-  }
-  return min.getTime() <= parsed.value.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
-};
-var dateIsSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const parsed = parseDateValue(val);
-  if (!parsed.value) {
-    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
-  }
-  let formattedMax;
-  switch (parsed.type) {
-    case "time":
-      formattedMax = max.toLocaleTimeString("nl-NL", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    case "date":
-      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-      break;
-    case "datetime":
-      formattedMax = max.toLocaleString("nl-NL", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    default:
-      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-  }
-  if (parsed.type === "time") {
-    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
-    const macTime = max.getHours() * 60 + max.getMinutes();
-    return macTime >= timeValue ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
-  }
-  return parsed.value.getTime() <= max.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
-};
-var isValidFile = (maxSize, accept) => (file) => {
-  if (!file) {
-    return null;
-  }
-  if (maxSize && file.size / 1024 > maxSize) {
-    return `${file.name} is te groot (max ${maxSize} KB).`;
-  }
-  if (accept) {
-    const allowed = accept.split(",").map((s) => s.trim().toLowerCase());
-    const ext = `.${file.name.split(".").pop()?.toLowerCase()}`;
-    const mime = file.type.toLowerCase();
-    const valid = allowed.some((pattern) => {
-      if (pattern === mime) return true;
-      if (pattern.endsWith("/*")) {
-        return mime.startsWith(pattern.replace("/*", "/"));
-      }
-      return pattern === ext;
-    });
-    if (!valid) {
-      return `${file.name} is niet toegelaten.`;
-    }
-  }
-  return null;
-};
-var isPattern = (pattern, errorMsg) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return errorMsg || `${label} heeft een ongeldig patroon.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed === "") {
-    return null;
-  }
-  let regex;
-  if (typeof pattern === "string") {
-    if (pattern.startsWith("/") && pattern.lastIndexOf("/") > 0) {
-      const lastSlash = pattern.lastIndexOf("/");
-      const patternBody = pattern.substring(1, lastSlash);
-      const flags = pattern.substring(lastSlash + 1);
-      const safeFlags = flags.replace("g", "");
-      regex = new RegExp(patternBody, safeFlags);
-    } else {
-      regex = new RegExp(pattern);
-    }
-  } else {
-    regex = new RegExp(pattern.source, pattern.flags.replace("g", ""));
-  }
-  return regex.test(trimmed) ? null : errorMsg || `${label} heeft een ongeldig patroon.`;
-};
+// src/utils/create-field-state.ts
+var import_form_validation = require("@sio-group/form-validation");
 
 // src/utils/parse-date.ts
-var parseDateValue2 = (val) => {
+var parseDateValue = (val) => {
   if (val instanceof Date) {
     return isNaN(val.getTime()) ? null : val;
   }
@@ -402,31 +149,31 @@ function getDefaultValue(config) {
 function getDefaultValidations(config) {
   const validations = [];
   if (config.config?.required) {
-    validations.push(isRequired());
+    validations.push((0, import_form_validation.isRequired)());
   }
   switch (config.type) {
     case "email":
-      validations.push(isEmail());
+      validations.push((0, import_form_validation.isEmail)());
       break;
     case "number":
     case "range":
-      if (config.config?.min) validations.push(isBiggerThan(config.config?.min));
-      if (config.config?.max) validations.push(isSmallerThan(config.config?.max));
+      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 = parseDateValue2(min);
-      const parsedMax = parseDateValue2(max);
-      if (parsedMin) validations.push(dateIsBiggerThan(parsedMin));
-      if (parsedMax) validations.push(dateIsSmallerThan(parsedMax));
+      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(isPattern(config.config.pattern));
+      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
       validations.push(
-        isUrl(
+        (0, import_form_validation.isUrl)(
           config.config?.allowLocalhost || false,
           config.config?.allowFtp || false,
           config.config?.secureOnly || !(config.config?.allowLocalhost || config.config?.allowFtp)
@@ -435,7 +182,7 @@ function getDefaultValidations(config) {
       break;
     case "text":
     case "tel":
-      if (config.config?.pattern) validations.push(isPattern(config.config.pattern));
+      if (config.config?.pattern) validations.push((0, import_form_validation.isPattern)(config.config.pattern));
       break;
   }
   return validations;
@@ -1368,6 +1115,9 @@ var DateInput = ({
   );
 };
 
+// src/components/Fields/Input/FileInput/index.tsx
+var import_form_validation2 = require("@sio-group/form-validation");
+
 // src/utils/get-accept-string.ts
 var getAccept = (accept) => {
   if (Array.isArray(accept)) {
@@ -1498,7 +1248,7 @@ var FileInput = ({
   };
   const handleChange = (e) => {
     const files = Array.from(e.target.files ?? []);
-    const validator = isValidFile(filesize, getAccept(accept));
+    const validator = (0, import_form_validation2.isValidFile)(filesize, getAccept(accept));
     let fileList = [...currentFiles];
     const errorList = [];
     for (let file of files) {
@@ -2026,7 +1776,7 @@ 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 DefaultContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { children });
 var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "btn-group", children });
 var Form = ({
   fields,
@@ -2145,8 +1895,8 @@ var Form = ({
       buttons?.map(renderButton)
     ] }) : null;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(Container, { className, style, noValidate: true, children: [
-    renderFields(),
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { className, style, noValidate: true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Container, { children: renderFields() }),
     renderButtons()
   ] });
 };

package/dist/index.d.cts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio/form-types';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
 import { Properties } from 'csstype';
-import { ValidationRule } from '@sio/form-types/src/core/valudation-rule';
+import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
 
 interface FormLayout {
   fields: string[];

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ComponentType, ComponentPropsWithoutRef, HTMLAttributes } from 'react';
-import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio/form-types';
+import { LayoutType, FormField, IconType, AcceptType, CaptureType, SpinnerVariant, SelectOption, Option, FieldConfigMap } from '@sio-group/form-types';
 import { Properties } from 'csstype';
-import { ValidationRule } from '@sio/form-types/src/core/valudation-rule';
+import { ValidationRule } from '@sio-group/form-types/src/core/valudation-rule';
 
 interface FormLayout {
   fields: string[];

package/dist/index.js

@@ -26,264 +26,20 @@ var slugify = (string, separator = "_") => {
   return string.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim().replace(/[^a-z0-9 ]/g, "").replace(/\s+/g, separator);
 };
 
-// ../form-validation/dist/index.js
-var isRequired = (errorMessage) => (val, label = "Dit") => {
-  const message = errorMessage?.replace("{label}", label) || `${label} is een verplicht veld.`;
-  if (val === null || val === void 0) {
-    return message;
-  }
-  if (typeof val === "string" && val.trim().length === 0) {
-    return message;
-  }
-  if (typeof val === "boolean" && !val) {
-    return message;
-  }
-  if (Array.isArray(val) && val.length === 0) {
-    return message;
-  }
-  return null;
-};
-var isEmail = (errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0) {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return errorMessage || `${label} is geen geldig e-mailadres.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    return null;
-  }
-  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;
-  return emailRegex.test(trimmed) ? null : errorMessage || `${label} is geen geldig e-mailadres.`;
-};
-var isUrl = (allowLocalhost = false, allowFtp = false, secureOnly = true) => (val, label = "Dit") => {
-  if (val === null || val === void 0) {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return `${label} is geen geldige URL.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed.length === 0) {
-    return null;
-  }
-  try {
-    const url = new URL(trimmed);
-    if (secureOnly && url.protocol !== "https:") {
-      return `${label} moet https gebruiken.`;
-    }
-    if (!allowFtp && url.protocol === "ftp") {
-      return `${label} mag geen ftp gebruiken.`;
-    }
-    if (!allowLocalhost && (url.hostname === "localhost" || url.hostname === "127.0.0.1")) {
-      return `${label} mag geen localhost zijn.`;
-    }
-    return null;
-  } catch {
-    return `${label} is geen geldige URL.`;
-  }
-};
-var isBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const num = Number(val);
-  if (Number.isNaN(num)) {
-    return `${label} moet een geldig getal zijn.`;
-  }
-  return min <= num ? null : errorMessage?.replace("{label}", label)?.replace("{min}", min.toString()) || `${label} mag niet kleiner zijn dan ${min}.`;
-};
-var isSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const num = Number(val);
-  if (Number.isNaN(num)) {
-    return `${label} moet een geldig getal zijn.`;
-  }
-  return num <= max ? null : errorMessage?.replace("{label}", label)?.replace("{max}", max.toString()) || `${label} mag niet groter zijn dan ${max}.`;
-};
-var parseDateValue = (val) => {
-  if (val instanceof Date) {
-    return {
-      type: hasExplicitTime(val) ? "datetime" : "date",
-      value: isNaN(val.getTime()) ? null : val
-    };
-  }
-  if (typeof val !== "string") {
-    return { type: "invalid", value: null };
-  }
-  const trimmed = val.trim();
-  if (trimmed === "") {
-    return { type: "invalid", value: null };
-  }
-  const timeRegex = /^([0-1]?[0-9]|2[0-3]):[0-5][0-9](:[0-5][0-9])?$/;
-  if (timeRegex.test(trimmed)) {
-    const [hours, minutes, seconds = 0] = trimmed.split(":").map(Number);
-    const date = /* @__PURE__ */ new Date();
-    date.setHours(hours, minutes, seconds, 0);
-    return { type: "time", value: date };
-  }
-  const dateRegex = /^\d{4}-\d{2}-\d{2}$/;
-  if (dateRegex.test(trimmed)) {
-    const date = /* @__PURE__ */ new Date(trimmed + "T00:00:00.000Z");
-    return {
-      type: "date",
-      value: isNaN(date.getTime()) ? null : date
-    };
-  }
-  const dateTimeRegex = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/;
-  if (dateTimeRegex.test(trimmed)) {
-    const date = /* @__PURE__ */ new Date(trimmed + ".000Z");
-    return {
-      type: "datetime",
-      value: isNaN(date.getTime()) ? null : date
-    };
-  }
-  return { type: "invalid", value: null };
-};
-function hasExplicitTime(date) {
-  return date.getUTCHours() !== 0 || date.getUTCMinutes() !== 0 || date.getUTCSeconds() !== 0 || date.getUTCMilliseconds() !== 0;
-}
-var dateIsBiggerThan = (min, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const parsed = parseDateValue(val);
-  if (!parsed.value) {
-    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
-  }
-  let formattedMin;
-  switch (parsed.type) {
-    case "time":
-      formattedMin = min.toLocaleTimeString("nl-NL", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    case "date":
-      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-      break;
-    case "datetime":
-      formattedMin = min.toLocaleString("nl-NL", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    default:
-      formattedMin = min.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-  }
-  if (parsed.type === "time") {
-    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
-    const minTime = min.getHours() * 60 + min.getMinutes();
-    return timeValue >= minTime ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
-  }
-  return min.getTime() <= parsed.value.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMin) || `${label} mag niet voor ${formattedMin} zijn.`;
-};
-var dateIsSmallerThan = (max, errorMessage) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  const parsed = parseDateValue(val);
-  if (!parsed.value) {
-    return `${label} moet een geldige ${parsed.type === "time" ? "tijd" : "datum"} zijn.`;
-  }
-  let formattedMax;
-  switch (parsed.type) {
-    case "time":
-      formattedMax = max.toLocaleTimeString("nl-NL", {
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    case "date":
-      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-      break;
-    case "datetime":
-      formattedMax = max.toLocaleString("nl-NL", {
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-        hour: "2-digit",
-        minute: "2-digit",
-        hour12: false,
-        timeZone: "UTC"
-      });
-      break;
-    default:
-      formattedMax = max.toLocaleDateString("nl-NL", { timeZone: "UTC" });
-  }
-  if (parsed.type === "time") {
-    const timeValue = parsed.value.getHours() * 60 + parsed.value.getMinutes();
-    const macTime = max.getHours() * 60 + max.getMinutes();
-    return macTime >= timeValue ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
-  }
-  return parsed.value.getTime() <= max.getTime() ? null : errorMessage?.replace("{label}", label)?.replace("{min}", formattedMax) || `${label} mag niet na ${formattedMax} zijn.`;
-};
-var isValidFile = (maxSize, accept) => (file) => {
-  if (!file) {
-    return null;
-  }
-  if (maxSize && file.size / 1024 > maxSize) {
-    return `${file.name} is te groot (max ${maxSize} KB).`;
-  }
-  if (accept) {
-    const allowed = accept.split(",").map((s) => s.trim().toLowerCase());
-    const ext = `.${file.name.split(".").pop()?.toLowerCase()}`;
-    const mime = file.type.toLowerCase();
-    const valid = allowed.some((pattern) => {
-      if (pattern === mime) return true;
-      if (pattern.endsWith("/*")) {
-        return mime.startsWith(pattern.replace("/*", "/"));
-      }
-      return pattern === ext;
-    });
-    if (!valid) {
-      return `${file.name} is niet toegelaten.`;
-    }
-  }
-  return null;
-};
-var isPattern = (pattern, errorMsg) => (val, label = "Dit") => {
-  if (val === null || val === void 0 || val === "") {
-    return null;
-  }
-  if (typeof val !== "string") {
-    return errorMsg || `${label} heeft een ongeldig patroon.`;
-  }
-  const trimmed = val.trim();
-  if (trimmed === "") {
-    return null;
-  }
-  let regex;
-  if (typeof pattern === "string") {
-    if (pattern.startsWith("/") && pattern.lastIndexOf("/") > 0) {
-      const lastSlash = pattern.lastIndexOf("/");
-      const patternBody = pattern.substring(1, lastSlash);
-      const flags = pattern.substring(lastSlash + 1);
-      const safeFlags = flags.replace("g", "");
-      regex = new RegExp(patternBody, safeFlags);
-    } else {
-      regex = new RegExp(pattern);
-    }
-  } else {
-    regex = new RegExp(pattern.source, pattern.flags.replace("g", ""));
-  }
-  return regex.test(trimmed) ? null : errorMsg || `${label} heeft een ongeldig patroon.`;
-};
+// src/utils/create-field-state.ts
+import {
+  dateIsBiggerThan,
+  dateIsSmallerThan,
+  isBiggerThan,
+  isEmail,
+  isPattern,
+  isRequired,
+  isSmallerThan,
+  isUrl
+} from "@sio-group/form-validation";
 
 // src/utils/parse-date.ts
-var parseDateValue2 = (val) => {
+var parseDateValue = (val) => {
   if (val instanceof Date) {
     return isNaN(val.getTime()) ? null : val;
   }
@@ -369,8 +125,8 @@ function getDefaultValidations(config) {
     case "time":
       const min = config.config?.min;
       const max = config.config?.max;
-      const parsedMin = parseDateValue2(min);
-      const parsedMax = parseDateValue2(max);
+      const parsedMin = parseDateValue(min);
+      const parsedMax = parseDateValue(max);
       if (parsedMin) validations.push(dateIsBiggerThan(parsedMin));
       if (parsedMax) validations.push(dateIsSmallerThan(parsedMax));
       break;
@@ -1319,6 +1075,9 @@ var DateInput = ({
   );
 };
 
+// src/components/Fields/Input/FileInput/index.tsx
+import { isValidFile } from "@sio-group/form-validation";
+
 // src/utils/get-accept-string.ts
 var getAccept = (accept) => {
   if (Array.isArray(accept)) {
@@ -1977,7 +1736,7 @@ var Link = React4.memo(LinkComponent);
 // src/components/Form.tsx
 import { jsx as jsx16, jsxs as jsxs14 } from "react/jsx-runtime";
 import { createElement } from "react";
-var DefaultContainer = ({ children, ...props }) => /* @__PURE__ */ jsx16("form", { ...props, noValidate: true, children });
+var DefaultContainer = ({ children }) => /* @__PURE__ */ jsx16("div", { children });
 var DefaultButtonContainer = ({ children }) => /* @__PURE__ */ jsx16("div", { className: "btn-group", children });
 var Form = ({
   fields,
@@ -2096,8 +1855,8 @@ var Form = ({
       buttons?.map(renderButton)
     ] }) : null;
   };
-  return /* @__PURE__ */ jsxs14(Container, { className, style, noValidate: true, children: [
-    renderFields(),
+  return /* @__PURE__ */ jsxs14("form", { className, style, noValidate: true, children: [
+    /* @__PURE__ */ jsx16(Container, { children: renderFields() }),
     renderButtons()
   ] });
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sio-group/form-react",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

package/src/components/Form.tsx

@@ -8,8 +8,8 @@ import { Checkbox, Input, Radio, Select, Textarea } from "./Fields";
 import { Link } from "./Link";
 import { Button } from "./Button";
 
-const DefaultContainer: React.FC<FormContainerProps> = ({ children, ...props }) => (
-  <form {...props} noValidate>{children}</form>
+const DefaultContainer: React.FC<FormContainerProps> = ({ children }) => (
+  <div>{children}</div>
 );
 
 const DefaultButtonContainer: React.FC<ButtonContainerProps> = ({ children }) => (
@@ -155,9 +155,11 @@ export const Form = ({
   };
 
   return (
-    <Container className={className} style={style} noValidate>
-      {renderFields()}
+    <form className={className} style={style} noValidate>
+      <Container>
+        {renderFields()}
+      </Container>
       {renderButtons()}
-    </Container>
+    </form>
   );
 }

package/tsconfig.tsbuildinfo

@@ -1 +1 @@
-{"root":["./src/index.ts","./src/hooks/useconnectionstatus.ts","./src/hooks/useform.ts","./src/types/field-props.d.ts","./src/types/field-setters.d.ts","./src/types/field-state.d.ts","./src/types/form-config.d.ts","./src/types/form-layout.d.ts","./src/types/index.ts","./src/types/ui-props.d.ts","./src/types/use-form-options.d.ts","./src/utils/create-field-props.ts","./src/utils/create-field-state.ts","./src/utils/file-type-icon.ts","./src/utils/get-accept-string.ts","./src/utils/get-column-classes.ts","./src/utils/get-file-size.ts","./src/utils/parse-date.ts","./src/utils/slugify.ts","./src/components/form.tsx","./src/components/button/index.tsx","./src/components/fields/index.tsx","./src/components/fields/checkbox/index.tsx","./src/components/fields/input/input.tsx","./src/components/fields/input/dateinput/index.tsx","./src/components/fields/input/fileinput/index.tsx","./src/components/fields/input/numberinput/index.tsx","./src/components/fields/input/rangeinput/index.tsx","./src/components/fields/input/textinput/index.tsx","./src/components/fields/inputwrapper/index.tsx","./src/components/fields/radio/index.tsx","./src/components/fields/select/index.tsx","./src/components/fields/textarea/index.tsx","./src/components/icon/index.tsx","./src/components/link/index.tsx","./src/utils/custom-icons.tsx"],"version":"5.9.3"}
+{"root":["./src/index.ts","./src/hooks/useconnectionstatus.ts","./src/hooks/useform.ts","./src/types/field-props.d.ts","./src/types/field-setters.d.ts","./src/types/field-state.d.ts","./src/types/form-config.d.ts","./src/types/form-layout.d.ts","./src/types/index.ts","./src/types/ui-props.d.ts","./src/types/use-form-options.d.ts","./src/utils/create-field-props.ts","./src/utils/create-field-state.ts","./src/utils/file-type-icon.ts","./src/utils/get-accept-string.ts","./src/utils/get-column-classes.ts","./src/utils/get-file-size.ts","./src/utils/parse-date.ts","./src/utils/slugify.ts","./src/components/form.tsx","./src/components/button/index.tsx","./src/components/fields/index.tsx","./src/components/fields/checkbox/index.tsx","./src/components/fields/input/input.tsx","./src/components/fields/input/dateinput/index.tsx","./src/components/fields/input/fileinput/index.tsx","./src/components/fields/input/numberinput/index.tsx","./src/components/fields/input/rangeinput/index.tsx","./src/components/fields/input/textinput/index.tsx","./src/components/fields/inputwrapper/index.tsx","./src/components/fields/radio/index.tsx","./src/components/fields/select/index.tsx","./src/components/fields/textarea/index.tsx","./src/components/icon/index.tsx","./src/components/link/index.tsx","./src/utils/custom-icons.tsx"],"errors":true,"version":"5.9.3"}