anysystem-design 0.0.29 → 0.0.31

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,10 +1,10 @@
 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";
-import { d as N } from "../../index-DUypCuzD.js";
+import { f as N } from "../../index-CHNNgawm.js";
 import { getValue as o } from "../Selectbox/helper.js";
 import { N as L, G as S, H as T, z as q, K as A } from "../../combobox-DcjIgW1K.js";
 import { X as R } from "../../transition-6o20faRl.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-CHNNgawm.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/Column/Column.d.ts

@@ -1,7 +1,7 @@
 import { default as React } from 'react';
 import { ResponsiveColumn } from '../Row';
 
-export type ColumnProps = {
+export type ColumnProps = React.HtmlHTMLAttributes<HTMLDivElement> & {
     className?: string;
     span?: ResponsiveColumn;
     children: React.ReactNode;

package/dist/components/Column/Column.js

@@ -1,6 +1,6 @@
-import { jsx as p } from "react/jsx-runtime";
-import { t as l } from "../../bundle-mjs-SHnj3fHy.js";
-const o = (a) => {
+import { jsx as o } from "react/jsx-runtime";
+import { t as r } from "../../bundle-mjs-SHnj3fHy.js";
+const n = (a) => {
   if (!a)
     return "";
   const s = [];
@@ -119,14 +119,24 @@ const o = (a) => {
       break;
   }
   return s.join(" ");
-}, u = ({
-  span: a = { sm: 1, md: 1 },
-  className: s,
-  children: e
+}, h = ({
+  id: a,
+  span: s = { sm: 1, md: 1 },
+  className: e,
+  children: c,
+  ...p
 }) => {
-  const c = o(a);
-  return /* @__PURE__ */ p("div", { className: l("my-col", c, s), children: e });
+  const l = n(s);
+  return /* @__PURE__ */ o(
+    "div",
+    {
+      className: r("my-col", l, e),
+      id: a,
+      ...p,
+      children: c
+    }
+  );
 };
 export {
-  u as default
+  h as default
 };

package/dist/components/DataTable/components/FieldSelectbox.js

@@ -1,6 +1,6 @@
 import { jsxs as n, jsx as s, Fragment as F } from "react/jsx-runtime";
 import w, { Fragment as k } from "react";
-import { A as N, a as T } from "../../../index-DUypCuzD.js";
+import { A as N, a as T } from "../../../index-CHNNgawm.js";
 import { t as c } from "../../../bundle-mjs-SHnj3fHy.js";
 import { u as C, a as D, b as S, c as j, d as M, e as R } from "../../../calculate-active-index-xXUBsarF.js";
 import { DataTableContext as A } from "../contexts/DataTableContext.js";

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;
 };