anysystem-design 0.0.29 → 0.0.30

package/dist/components/AutoComplete/AutoCompleteBase.d.ts

@@ -13,6 +13,7 @@ export type AutoCompleteBaseProps<ListOption extends SelectOption> = {
     readOnly?: boolean;
     className?: string;
     placeholder?: string;
+    closeButton?: boolean;
     onChange?: (value: string) => void;
     onSearch?: (query: string) => void;
     valueField?: ValueField<ListOption>;

package/dist/components/AutoComplete/AutoCompleteBase.js

@@ -1,91 +1,113 @@
-import { jsx as a, jsxs as p } from "react/jsx-runtime";
-import c, { Fragment as y } from "react";
-import { t as h } from "../../bundle-mjs-SHnj3fHy.js";
-import { H as x } from "../../index-BVp57yIc.js";
-import { c as w } from "../../index-CBEJ8A3p.js";
-import { getValue as n } from "../Selectbox/helper.js";
-import { N as C, G as E, H as N, z as L, K as H } from "../../combobox-DcjIgW1K.js";
-import { X as S } from "../../transition-6o20faRl.js";
-const A = (t, r) => r.type === "SEARCH" ? {
+import { jsx as r, jsxs as m } from "react/jsx-runtime";
+import y, { Fragment as h } from "react";
+import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
+import { H as E } from "../../index-BVp57yIc.js";
+import { c as C } from "../../index-CBEJ8A3p.js";
+import { G as w } from "../../iconBase-Bipuk9tK.js";
+import { getValue as c } from "../Selectbox/helper.js";
+import { N, G as A, H as L, z as S, K as H } from "../../combobox-DcjIgW1K.js";
+import { X as T } from "../../transition-6o20faRl.js";
+function R(t) {
+  return w({ tag: "svg", attr: { viewBox: "0 0 512 512" }, child: [{ tag: "path", attr: { d: "m289.94 256 95-95A24 24 0 0 0 351 127l-95 95-95-95a24 24 0 0 0-34 34l95 95-95 95a24 24 0 1 0 34 34l95-95 95 95a24 24 0 0 0 34-34z" }, child: [] }] })(t);
+}
+const k = (t, a) => a.type === "SEARCH" ? {
   ...t,
-  query: r.query,
-  filterList: t.list.filter((l) => l.label.toLowerCase().includes(r.query.toLowerCase()))
-} : r.type === "SETVALUE" ? {
+  query: a.query,
+  filterList: t.list.filter((l) => l.label.toLowerCase().includes(a.query.toLowerCase()))
+} : a.type === "SETVALUE" ? {
   ...t,
-  value: r.value,
-  selected: t.list.find((l) => n(l, t.valueField) === r.value) || null
-} : r.type === "SETSELECT" ? {
+  value: a.value,
+  selected: t.list.find((l) => c(l, t.valueField) === a.value) || null
+} : a.type === "SETSELECT" ? {
   ...t,
-  selected: r.selected,
-  value: n(r.selected, t.valueField) + ""
-} : t, T = ({
+  selected: a.selected,
+  value: c(a.selected, t.valueField) + ""
+} : t, q = ({
   id: t,
-  name: r,
+  name: a,
   options: l,
   value: i = "",
-  valueField: o = "value",
-  onChange: d,
-  onSearch: f,
-  placeholder: v
-}, g) => {
-  const [m, s] = c.useReducer(A, {
+  valueField: d = "value",
+  onChange: u,
+  onSearch: p,
+  placeholder: v,
+  closeButton: g = !0
+}, b) => {
+  const [n, s] = y.useReducer(k, {
     list: l,
     query: "",
     filterList: l,
     value: i,
-    valueField: o,
+    valueField: d,
     selected: l.find((e) => {
-      const u = n(e, o);
-      return i ? u === i : !1;
+      const o = c(e, d);
+      return i ? o === i : !1;
     }) || null
   });
-  return c.useImperativeHandle(g, () => ({
+  return y.useImperativeHandle(b, () => ({
     search: (e) => s({ type: "SEARCH", query: e }),
     setValue: (e) => s({ type: "SETVALUE", value: e })
-  })), /* @__PURE__ */ a(
-    C,
+  })), /* @__PURE__ */ r(
+    N,
     {
-      value: m.selected,
+      value: n.selected,
       onChange: (e) => {
         s({
           type: "SETSELECT",
           selected: e
-        }), d && d(e ? n(e, o) : "");
+        }), u && u(e ? c(e, d) : "");
       },
-      children: /* @__PURE__ */ p("div", { className: "relative", children: [
-        /* @__PURE__ */ a(
-          E,
+      children: /* @__PURE__ */ m("div", { className: "relative", children: [
+        /* @__PURE__ */ r(
+          A,
           {
             placeholder: v,
             onChange: (e) => {
-              s({ type: "SEARCH", query: e.target.value }), f && f(e.target.value);
+              s({ type: "SEARCH", query: e.target.value }), p && p(e.target.value);
             },
             autoComplete: "off",
             displayValue: (e) => (e == null ? void 0 : e.label) || ""
           }
         ),
-        /* @__PURE__ */ a(N, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ a(
-          x,
-          {
-            className: "h-5 w-5 text-gray-400",
-            "aria-hidden": "true"
-          }
-        ) }),
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ m("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: [
+          /* @__PURE__ */ r(
+            "button",
+            {
+              type: "button",
+              className: f(
+                "size-5 text-gray-400 hover:text-gray-500 rounded-full hover:bg-gray-200 items-center flex justify-center",
+                n.value ? "" : "hidden",
+                g ? "" : "!hidden"
+              ),
+              onClick: () => {
+                s({ type: "SETVALUE", value: "" }), s({ type: "SEARCH", query: "" }), u && u("");
+              },
+              children: /* @__PURE__ */ r(R, {})
+            }
+          ),
+          /* @__PURE__ */ r(L, { className: "items-center", children: /* @__PURE__ */ r(
+            E,
+            {
+              className: "text-gray-400 size-5",
+              "aria-hidden": "true"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ r(
           "input",
           {
             className: "!hidden",
             type: "text",
             id: t,
-            name: r,
+            name: a,
             readOnly: !0,
-            value: m.value + ""
+            value: n.value + ""
           }
         ),
-        /* @__PURE__ */ a(
-          S,
+        /* @__PURE__ */ r(
+          T,
           {
-            as: y,
+            as: h,
             enter: "transition duration-100 ease-out",
             enterFrom: "scale-95 transform opacity-0",
             enterTo: "scale-100 transform opacity-100",
@@ -93,23 +115,23 @@ const A = (t, r) => r.type === "SEARCH" ? {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => s({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ a(L, { className: "absolute z-50 mt-5 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: m.filterList.map((e) => /* @__PURE__ */ a(H, { as: y, value: e, children: ({ selected: u, focus: b }) => /* @__PURE__ */ p(
+            children: /* @__PURE__ */ r(S, { className: "absolute z-50 w-full py-1 mt-5 overflow-auto text-base bg-white shadow-lg max-h-60 rounded-md ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: n.filterList.map((e) => /* @__PURE__ */ r(H, { as: h, value: e, children: ({ selected: o, focus: x }) => /* @__PURE__ */ m(
               "li",
               {
-                className: h(
+                className: f(
                   "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white",
-                  (u || b) && "bg-primary-100 dark:bg-gray-700",
+                  (o || x) && "bg-primary-100 dark:bg-gray-700",
                   e.enable === !1 && "cursor-not-allowed opacity-50"
                 ),
                 children: [
-                  /* @__PURE__ */ a("span", { className: "pl-5", children: e.label }),
-                  u ? /* @__PURE__ */ a(
+                  /* @__PURE__ */ r("span", { className: "pl-5", children: e.label }),
+                  o ? /* @__PURE__ */ r(
                     "span",
                     {
-                      className: h(
+                      className: f(
                         "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
                       ),
-                      children: /* @__PURE__ */ a(w, { className: "h-5 w-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ r(C, { className: "w-5 h-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ]
@@ -120,7 +142,7 @@ const A = (t, r) => r.type === "SEARCH" ? {
       ] })
     }
   );
-}, B = c.forwardRef(T);
+}, X = y.forwardRef(q);
 export {
-  B as default
+  X as default
 };

package/dist/components/AutoComplete/AutoCompleteMultiple.js

@@ -1,6 +1,6 @@
 import { jsx as l, jsxs as m } from "react/jsx-runtime";
 import p, { Fragment as v } from "react";
-import { _ as b } from "../../lodash-DH2GRwR5.js";
+import { _ as x } from "../../lodash-DH2GRwR5.js";
 import { t as E } from "../../bundle-mjs-SHnj3fHy.js";
 import { H as C } from "../../index-BVp57yIc.js";
 import { c as w } from "../../index-CBEJ8A3p.js";
@@ -50,7 +50,7 @@ const k = (r, t) => {
   onChange: f,
   onSearch: y,
   placeholder: g
-}, x) => {
+}, b) => {
   var h;
   const [s, c] = p.useReducer(k, {
     query: "",
@@ -60,10 +60,10 @@ const k = (r, t) => {
     valueField: n,
     selected: u.filter((e) => {
       const i = o(e, n);
-      return b.some(a, (d) => d + "" == i + "");
+      return x.some(a, (d) => d + "" == i + "");
     }) || []
   });
-  return p.useImperativeHandle(x, () => ({
+  return p.useImperativeHandle(b, () => ({
     search: (e) => {
       c({ type: "SEARCH", query: e });
     },
@@ -89,6 +89,7 @@ const k = (r, t) => {
           /* @__PURE__ */ l(
             "button",
             {
+              type: "button",
               onClick: () => c({ type: "REMOVESELECT", selected: e }),
               children: /* @__PURE__ */ l(N, { fontSize: 12, className: "font-bold" })
             }
@@ -114,7 +115,7 @@ const k = (r, t) => {
         /* @__PURE__ */ l(T, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
           C,
           {
-            className: "h-5 w-5 text-gray-400",
+            className: "w-5 h-5 text-gray-400",
             "aria-hidden": "true"
           }
         ) }),
@@ -140,7 +141,7 @@ const k = (r, t) => {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => c({ type: "SEARCH", query: "" }),
-            children: /* @__PURE__ */ l(q, { className: "absolute mt-10 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(A, { as: v, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
+            children: /* @__PURE__ */ l(q, { className: "absolute w-full py-1 mt-10 overflow-auto text-base bg-white shadow-lg max-h-60 rounded-md ring-1 ring-black/5 focus:outline-none dark:bg-gray-900 sm:text-sm", children: s.filterList.map((e) => /* @__PURE__ */ l(A, { as: v, value: e, children: ({ selected: i, focus: d }) => /* @__PURE__ */ m(
               "li",
               {
                 className: E(

package/dist/components/Checkbox/CheckboxBase.js

@@ -1,32 +1,57 @@
-import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { b as n, c as s } from "../../index-DUypCuzD.js";
-import { t as c } from "../../bundle-mjs-SHnj3fHy.js";
-const m = ({
-  className: t,
-  isError: o,
-  inputProps: l,
-  intermediate: a = !1,
-  ...r
-}) => /* @__PURE__ */ d("div", { className: "relative w-5 h-5 overflow-hidden rounded", children: [
-  /* @__PURE__ */ e(
-    "input",
-    {
-      type: "checkbox",
-      className: c(
-        "relative z-10",
-        "peer block h-full w-full cursor-pointer appearance-none rounded border-2 border-gray-400 focus:outline-4 focus:outline-blue-500",
-        "checked:border-primary-600",
-        a && "border-primary-600",
-        o && "border-red-500",
-        t
-      ),
-      value: (l == null ? void 0 : l.value) || (r == null ? void 0 : r.value) || "",
-      ...r
-    }
-  ),
-  a === !0 && /* @__PURE__ */ e("span", { className: "absolute left-1/2 top-1/2 flex h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 dark:fill-primary-600", children: /* @__PURE__ */ e(n, { className: "w-full h-full rounded" }) }),
-  /* @__PURE__ */ e("span", { className: "absolute left-1/2 top-1/2 hidden h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 peer-checked:flex dark:fill-primary-600", children: /* @__PURE__ */ e(s, { className: "w-full h-full rounded" }) })
-] });
+import { jsxs as i, jsx as r } from "react/jsx-runtime";
+import d from "react";
+import { b as s, c as u } from "../../index-DUypCuzD.js";
+import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
+const w = ({
+  className: n,
+  isError: c,
+  inputProps: t,
+  intermediate: o = !1,
+  ...l
+}) => {
+  const a = d.useRef(null);
+  return /* @__PURE__ */ i("div", { className: "relative w-5 h-5 overflow-hidden rounded", children: [
+    /* @__PURE__ */ r(
+      "input",
+      {
+        ref: a,
+        type: "checkbox",
+        className: f(
+          "relative ",
+          "peer block h-full w-full cursor-pointer appearance-none rounded border-2 border-gray-400 focus:outline-4 focus:outline-blue-500 bg-transparent",
+          "checked:border-primary-600",
+          o && "border-primary-600",
+          c && "border-red-500",
+          n
+        ),
+        value: (t == null ? void 0 : t.value) || (l == null ? void 0 : l.value) || "",
+        ...l
+      }
+    ),
+    o === !0 && /* @__PURE__ */ r(
+      "span",
+      {
+        className: "absolute left-1/2 top-1/2 flex h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 dark:fill-primary-600 bg-white cursor-pointer",
+        onClick: () => {
+          var e;
+          return (e = a.current) == null ? void 0 : e.click();
+        },
+        children: /* @__PURE__ */ r(s, { className: "w-full h-full rounded" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      "span",
+      {
+        className: "absolute left-1/2 top-1/2 hidden h-[150%] w-[150%] -translate-x-1/2 -translate-y-1/2 transform items-center justify-center overflow-hidden rounded font-bold text-primary-600 peer-checked:flex dark:fill-primary-600 bg-white cursor-pointer",
+        onClick: () => {
+          var e;
+          return (e = a.current) == null ? void 0 : e.click();
+        },
+        children: /* @__PURE__ */ r(u, { className: "w-full h-full rounded" })
+      }
+    )
+  ] });
+};
 export {
-  m as CheckboxBase
+  w as CheckboxBase
 };

package/dist/components/Checkbox/FormCheckbox.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { u as i } from "../../formik.esm-C1r1xebq.js";
+import { a as i } from "../../formik.esm-C4MFRNh0.js";
 import { Checkbox as m } from "./Checkbox.js";
 const f = ({
   name: o,

package/dist/components/DatePicker/DatePicker.d.ts

@@ -2,8 +2,8 @@ import { default as React } from 'react';
 
 export type DatePickerProps = {
     name: string;
-    value: number;
-    onChange: (value: number) => void;
+    value: string;
+    onChange: (value: string) => void;
     showTime?: boolean;
     readOnly?: boolean;
 };

package/dist/components/DatePicker/DatePicker.js

@@ -6578,24 +6578,24 @@ const ee = Object.assign(kd, {
         r === !0 ? "!hidden" : "md:hidden"
       ),
       type: r === !0 ? "datetime-local" : "date",
-      value: h(new Date(t * 1e3)).format(
+      value: h(new Date(+t * 1e3)).format(
         r === !0 ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD"
       ),
-      onChange: (i) => a(Math.round(new Date(i.target.value).getTime() / 1e3))
+      onChange: (i) => a(Math.round(new Date(i.target.value).getTime() / 1e3) + "")
     }
   ),
   /* @__PURE__ */ j("div", { className: We(r === !0 ? "" : "hidden md:flex"), children: /* @__PURE__ */ Ne(
     ee,
     {
       disabledKeyboardNavigation: !0,
-      value: t ? new Date(t * 1e3) : /* @__PURE__ */ new Date(),
-      onChange: (i) => a(Math.round(i.getTime() / 1e3)),
+      value: t ? new Date(+t * 1e3) : /* @__PURE__ */ new Date(),
+      onChange: (i) => a(Math.round(i.getTime() / 1e3) + ""),
       children: [
         /* @__PURE__ */ j(
           ee.Input,
           {
             name: e,
-            value: new Date(t * 1e3).getTime() / 1e3 || "",
+            value: new Date(+t * 1e3).getTime() / 1e3 || "",
             format: r === !0 ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd",
             id: e
           }
@@ -6607,8 +6607,8 @@ const ee = Object.assign(kd, {
             defaultType: "day",
             className: "xs:max-w-[320px] z-50 rounded-md border border-gray-300 bg-white p-2 shadow-2xl dark:border-gray-700 dark:bg-gray-900 md:p-4",
             children: ({ year: i, monthName: s, month: o, hour: u, minute: l }) => /* @__PURE__ */ Ne("div", { className: "flex w-[320px] flex-col gap-2", children: [
-              /* @__PURE__ */ Ne("div", { className: "flex w-full justify-between", children: [
-                /* @__PURE__ */ Ne("div", { className: "flex gap-1 text-2xl font-bold text-black dark:text-white", children: [
+              /* @__PURE__ */ Ne("div", { className: "flex justify-between w-full", children: [
+                /* @__PURE__ */ Ne("div", { className: "flex text-2xl font-bold text-black gap-1 dark:text-white", children: [
                   /* @__PURE__ */ j(ee.Button, { action: "toggleMonth", children: s }),
                   /* @__PURE__ */ j(ee.Button, { action: "toggleYear", children: i })
                 ] }),
@@ -6616,7 +6616,7 @@ const ee = Object.assign(kd, {
                   /* @__PURE__ */ j(
                     ee.Button,
                     {
-                      className: "rounded-md bg-gray-300 p-3 hover:bg-gray-400 dark:bg-gray-700",
+                      className: "p-3 bg-gray-300 rounded-md hover:bg-gray-400 dark:bg-gray-700",
                       action: "prev",
                       children: /* @__PURE__ */ j(Hn, { size: 20 })
                     }
@@ -6624,7 +6624,7 @@ const ee = Object.assign(kd, {
                   /* @__PURE__ */ j(
                     ee.Button,
                     {
-                      className: "rounded-md bg-gray-300 p-3 hover:bg-gray-400 dark:bg-gray-700",
+                      className: "p-3 bg-gray-300 rounded-md hover:bg-gray-400 dark:bg-gray-700",
                       action: "next",
                       children: /* @__PURE__ */ j(In, { size: 20 })
                     }
@@ -6671,7 +6671,7 @@ const ee = Object.assign(kd, {
                 ee.Button,
                 {
                   className: We(
-                    "relative w-full rounded bg-primary-600 p-2 text-white",
+                    "relative w-full p-2 text-white rounded bg-primary-600",
                     "after:absolute after:right-0 after:top-0 after:h-full after:w-0 after:rounded-l after:bg-gray-400 after:opacity-0 dark:after:bg-gray-600",
                     //after:
                     "hover:after:w-full hover:after:transform hover:after:opacity-20 hover:after:transition-all hover:after:duration-300"
@@ -6695,14 +6695,14 @@ const ee = Object.assign(kd, {
               /* @__PURE__ */ Ne(
                 ee.Picker,
                 {
-                  className: "flex max-h-56 rounded-md border border-gray-300 bg-white py-2 shadow-md dark:border-gray-700 dark:bg-gray-900 dark:text-white",
+                  className: "flex py-2 bg-white border border-gray-300 shadow-md max-h-56 rounded-md dark:border-gray-700 dark:bg-gray-900 dark:text-white",
                   id: "HourPicker",
                   children: [
                     /* @__PURE__ */ j(
                       ee.Items,
                       {
                         type: "hour",
-                        className: "overflow-y-auto scroll-smooth px-4",
+                        className: "px-4 overflow-y-auto scroll-smooth",
                         disableAutoScroll: !0,
                         children: ({ items: f }) => f.map((c) => /* @__PURE__ */ j(
                           ee.Item,
@@ -6723,7 +6723,7 @@ const ee = Object.assign(kd, {
                       ee.Items,
                       {
                         type: "minute",
-                        className: "overflow-y-auto scroll-smooth px-4",
+                        className: "px-4 overflow-y-auto scroll-smooth",
                         disableAutoScroll: !0,
                         children: ({ items: f }) => f.map((c) => /* @__PURE__ */ j(
                           ee.Item,

package/dist/components/FormControl/FormComponent.d.ts

@@ -1,11 +1,13 @@
 import { default as React } from 'react';
-import { FormikHelpers, FormikProps } from 'formik';
+import { FormFieldWithStructure } from './type';
+import { FormikHelpers, FormikProps, useFormikContext } from 'formik';
 
 export type FormProps<FormValues extends Record<string, unknown>> = FormikProps<FormValues>;
 export type FormComponentProps<FormValues extends Record<string, unknown>> = React.FormHTMLAttributes<HTMLFormElement> & {
-    initialValues: FormValues;
+    fields: FormFieldWithStructure;
     onSubmit: (values: FormValues, helpers: FormikHelpers<FormValues>) => void;
     children: React.ReactNode;
 };
-declare const FormComponent: <FormValues extends Record<string, unknown>>({ className, children, initialValues, onSubmit, }: FormComponentProps<FormValues>) => import("react/jsx-runtime").JSX.Element;
+declare const FormComponent: <FormValues extends Record<string, unknown>>({ className, children, fields, onSubmit, }: FormComponentProps<FormValues>) => import("react/jsx-runtime").JSX.Element;
 export default FormComponent;
+export { useFormikContext as useFormContext };

package/dist/components/FormControl/FormComponent.js

@@ -1,16 +1,34 @@
-import { jsx as e } from "react/jsx-runtime";
-import i from "react";
-import { t as s } from "../../bundle-mjs-SHnj3fHy.js";
-import { F as l, a as f } from "../../formik.esm-C1r1xebq.js";
-const F = ({
-  className: t,
-  children: o,
-  initialValues: r,
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import e from "react";
+import { t as l } from "../../bundle-mjs-SHnj3fHy.js";
+import { F as u, b as p } from "../../formik.esm-C4MFRNh0.js";
+import { u as R } from "../../formik.esm-C4MFRNh0.js";
+import { getFieldValue as f, getFieldValidation as c } from "./helpers.js";
+import F from "./FormContent.js";
+const b = ({
+  className: r,
+  children: m,
+  fields: o,
   onSubmit: a
 }) => {
-  const [m] = i.useState(r);
-  return /* @__PURE__ */ e(l, { enableReinitialize: !0, initialValues: m, onSubmit: a, children: /* @__PURE__ */ e(f, { autoComplete: "off", className: s(t), children: o }) });
+  const [i] = e.useState(
+    f(o)
+  ), n = e.useMemo(() => c(o), [o]);
+  return /* @__PURE__ */ t(
+    u,
+    {
+      enableReinitialize: !0,
+      validationSchema: n,
+      initialValues: i,
+      onSubmit: a,
+      children: /* @__PURE__ */ s(p, { autoComplete: "off", className: l(r), children: [
+        /* @__PURE__ */ t(F, { fields: o }),
+        m
+      ] })
+    }
+  );
 };
 export {
-  F as default
+  b as default,
+  R as useFormContext
 };

package/dist/components/FormControl/FormContent.d.ts

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+import { FormFieldWithStructure } from './type';
+
+export type FormContentProps = {
+    fields: FormFieldWithStructure;
+};
+declare const FormContent: React.FC<FormContentProps>;
+export default FormContent;

package/dist/components/FormControl/FormContent.js

@@ -0,0 +1,53 @@
+import { jsx as n, Fragment as s } from "react/jsx-runtime";
+import "react";
+import { u as y } from "../../formik.esm-C4MFRNh0.js";
+import "../../lodash-DH2GRwR5.js";
+import "../../index.esm-tvWIpiMA.js";
+import e from "../Row/Row.js";
+import C from "../Column/Column.js";
+import F from "./FormControl.js";
+const b = ({ fields: c }) => {
+  const { values: t, setFieldValue: u, touched: r, errors: m } = y();
+  return /* @__PURE__ */ n(s, { children: c.map((o, P) => {
+    var p, a;
+    return /* @__PURE__ */ n(e, { children: Array.isArray(o) ? /* @__PURE__ */ n(
+      e,
+      {
+        className: "space-y-2 md:space-y-0",
+        column: { md: o.length },
+        children: /* @__PURE__ */ n(b, { fields: o })
+      }
+    ) : /* @__PURE__ */ n(C, { children: o != null && o.component ? o == null ? void 0 : o.component(o == null ? void 0 : o.componentProps) : o.componentProps.type && [
+      "text",
+      "number",
+      "date",
+      "datetime",
+      "tel",
+      "email",
+      "password",
+      "radio",
+      "switch",
+      "confirm",
+      "select",
+      "autocomplete"
+    ].includes(o.componentProps.type) ? /* @__PURE__ */ n(
+      F,
+      {
+        ...o.componentProps,
+        name: o.name,
+        value: (t == null ? void 0 : t[o.name]) || "",
+        labelProps: {
+          ...(p = o.componentProps) != null && p.labelProps ? (a = o.componentProps) == null ? void 0 : a.labelProps : {},
+          isError: !!(r != null && r[o.name] && (m != null && m[o.name])),
+          errorMessage: (m == null ? void 0 : m[o.name]) || ""
+        },
+        onChange: (h) => {
+          u(o.name, h);
+        }
+      }
+    ) : /* @__PURE__ */ n(s, {}) }) }, P);
+  }) });
+};
+export {
+  b as default
+};

package/dist/components/FormControl/FormControl.d.ts

@@ -1,32 +1,7 @@
 import { default as React } from 'react';
-import { InputProps } from '../Input';
-import { LabelBaseProps } from '../Label';
-import { DatePickerProps } from '../DatePicker';
-import { RadioGroupProps } from '../RadioGroup';
-import { SwitchProps } from '../Switch';
-import { CheckboxProps } from '../Checkbox';
 import { SelectOption } from '../Selectbox';
+import { FormControlInputProps, FormControlDateTimeProps, FormControlRadioProps, FormControlSwitchProps, FormControlConfirmProps, FormControlTelephoneProps, FormControlSelectboxProps, FormControlAutoCompleteProps } from './type';
 
-export type FormControlProps<ListOption extends SelectOption> = ({
-    type: "password" | "text" | "tel" | "number" | "email";
-    labelProps: LabelBaseProps;
-} & InputProps<ListOption>) | ({
-    type: "date";
-    labelProps: LabelBaseProps;
-} & DatePickerProps) | ({
-    type: "datetime";
-    labelProps: LabelBaseProps;
-} & DatePickerProps) | ({
-    type: "radio";
-    labelProps: LabelBaseProps;
-} & RadioGroupProps<ListOption>) | ({
-    type: "switch";
-    labelProps: LabelBaseProps;
-} & SwitchProps) | ({
-    type: "confirm";
-    labelProps?: LabelBaseProps;
-} & CheckboxProps);
-declare const _default: <ListOption extends SelectOption>(props: FormControlProps<ListOption> & {
-    ref?: React.Ref<HTMLInputElement>;
-}) => JSX.Element;
-export default _default;
+export type FormControlProps<ListOption extends SelectOption> = FormControlInputProps | FormControlDateTimeProps | FormControlRadioProps<ListOption> | FormControlSwitchProps | FormControlConfirmProps | FormControlTelephoneProps | FormControlSelectboxProps<ListOption> | FormControlAutoCompleteProps<ListOption>;
+declare const FormControl: <ListOption extends SelectOption>({ type, onChange, ...props }: FormControlProps<ListOption>) => React.ReactElement;
+export default FormControl;