anysystem-design 0.0.55 → 0.0.57

package/dist/components/AutoComplete/AutoCompleteBase.js

@@ -1,30 +1,30 @@
 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 f, { Fragment as h } from "react";
+import { t as y } 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 { c as w } from "../../index-CBEJ8A3p.js";
+import { G as C } from "../../iconBase-Bipuk9tK.js";
 import { getValue as d } from "../Selectbox/helper.js";
-import { N, G as A, H as L, z as S, K as H } from "../../combobox-BGEhR2HT.js";
-import { X as k } from "../../transition-6o20faRl.js";
-function T(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);
+import { N, G as k, H as A, z as L, K as S } from "../../combobox-BGEhR2HT.js";
+import { X as H } from "../../transition-6o20faRl.js";
+function T(a) {
+  return C({ 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: [] }] })(a);
 }
-const R = (t, a) => a.type === "SEARCH" ? {
-  ...t,
-  query: a.query,
-  filterList: t.list.filter((l) => l.label.toLowerCase().includes(a.query.toLowerCase()))
-} : a.type === "SETVALUE" ? {
-  ...t,
-  value: a.value,
-  selected: t.list.find((l) => d(l, t.valueField) === a.value) || null
-} : a.type === "SETSELECT" ? {
-  ...t,
-  selected: a.selected,
-  value: d(a.selected, t.valueField) + ""
-} : t, q = ({
-  id: t,
-  name: a,
+const R = (a, t) => t.type === "SEARCH" ? {
+  ...a,
+  query: t.query,
+  filterList: a.list.filter((l) => l.label.toLowerCase().includes(t.query.toLowerCase()))
+} : t.type === "SETVALUE" ? {
+  ...a,
+  value: t.value,
+  selected: a.list.find((l) => d(l, a.valueField) === t.value) || null
+} : t.type === "SETSELECT" ? {
+  ...a,
+  selected: t.selected,
+  value: d(t.selected, a.valueField) + ""
+} : a, q = ({
+  id: a,
+  name: t,
   options: l,
   value: i = "",
   valueField: c = "value",
@@ -33,7 +33,7 @@ const R = (t, a) => a.type === "SEARCH" ? {
   placeholder: v,
   closeButton: g = !0
 }, b) => {
-  const [n, s] = y.useReducer(R, {
+  const [n, s] = f.useReducer(R, {
     list: l,
     query: "",
     filterList: l,
@@ -44,7 +44,7 @@ const R = (t, a) => a.type === "SEARCH" ? {
       return i ? o === i : !1;
     }) || null
   });
-  return y.useImperativeHandle(b, () => ({
+  return f.useImperativeHandle(b, () => ({
     search: (e) => s({ type: "SEARCH", query: e }),
     setValue: (e) => s({ type: "SETVALUE", value: e })
   })), /* @__PURE__ */ r(
@@ -59,14 +59,15 @@ const R = (t, a) => a.type === "SEARCH" ? {
       },
       children: /* @__PURE__ */ m("div", { className: "relative", children: [
         /* @__PURE__ */ r(
-          A,
+          k,
           {
             placeholder: v,
             onChange: (e) => {
               s({ type: "SEARCH", query: e.target.value }), p && p(e.target.value);
             },
             autoComplete: "off",
-            displayValue: (e) => (e == null ? void 0 : e.label) || ""
+            displayValue: (e) => (e == null ? void 0 : e.label) || "",
+            className: "dark:bg-gray-950 dark:text-white"
           }
         ),
         /* @__PURE__ */ m("div", { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: [
@@ -74,7 +75,7 @@ const R = (t, a) => a.type === "SEARCH" ? {
             "button",
             {
               type: "button",
-              className: f(
+              className: y(
                 "size-5 text-gray-400 hover:text-gray-500 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 items-center flex justify-center",
                 n.value ? "" : "hidden",
                 g ? "" : "!hidden"
@@ -85,7 +86,7 @@ const R = (t, a) => a.type === "SEARCH" ? {
               children: /* @__PURE__ */ r(T, {})
             }
           ),
-          /* @__PURE__ */ r(L, { className: "items-center", children: /* @__PURE__ */ r(
+          /* @__PURE__ */ r(A, { className: "items-center", children: /* @__PURE__ */ r(
             E,
             {
               className: "text-gray-400 size-5",
@@ -98,14 +99,14 @@ const R = (t, a) => a.type === "SEARCH" ? {
           {
             className: "!hidden",
             type: "text",
-            id: t,
-            name: a,
+            id: a,
+            name: t,
             readOnly: !0,
             value: n.value + ""
           }
         ),
         /* @__PURE__ */ r(
-          k,
+          H,
           {
             as: h,
             enter: "transition duration-100 ease-out",
@@ -115,10 +116,10 @@ const R = (t, a) => a.type === "SEARCH" ? {
             leaveFrom: "scale-100 transform opacity-100",
             leaveTo: "scale-95 transform opacity-0",
             afterLeave: () => s({ type: "SEARCH", query: "" }),
-            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(
+            children: /* @__PURE__ */ r(L, { 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(S, { as: h, value: e, children: ({ selected: o, focus: x }) => /* @__PURE__ */ m(
               "li",
               {
-                className: f(
+                className: y(
                   "relative flex cursor-pointer justify-between px-5 py-4 text-black hover:bg-primary-100 dark:text-white dark:hover:bg-primary-900",
                   (o || x) && "bg-primary-100 dark:bg-primary-900",
                   e.enable === !1 && "cursor-not-allowed opacity-50"
@@ -128,10 +129,10 @@ const R = (t, a) => a.type === "SEARCH" ? {
                   o ? /* @__PURE__ */ r(
                     "span",
                     {
-                      className: f(
+                      className: y(
                         "absolute inset-y-0 left-0 flex items-center pl-3 text-primary-600"
                       ),
-                      children: /* @__PURE__ */ r(C, { className: "w-5 h-5", "aria-hidden": "true" })
+                      children: /* @__PURE__ */ r(w, { className: "w-5 h-5", "aria-hidden": "true" })
                     }
                   ) : null
                 ]
@@ -142,7 +143,7 @@ const R = (t, a) => a.type === "SEARCH" ? {
       ] })
     }
   );
-}, X = y.forwardRef(q);
+}, X = f.forwardRef(q);
 export {
   X as default
 };

package/dist/components/AutoComplete/AutoCompleteMultiple.js

@@ -6,7 +6,7 @@ import { H as C } from "../../index-BVp57yIc.js";
 import { c as w } from "../../index-CBEJ8A3p.js";
 import { g as N } from "../../index-Be1bsSGe.js";
 import { getValue as o } from "../Selectbox/helper.js";
-import { N as L, G as S, H as k, z as T, K as q } from "../../combobox-BGEhR2HT.js";
+import { N as k, G as L, H as S, z as T, K as q } from "../../combobox-BGEhR2HT.js";
 import { X as A } from "../../transition-6o20faRl.js";
 const R = (r, t) => {
   if (t.type === "SEARCH")
@@ -71,7 +71,7 @@ const R = (r, t) => {
       c({ type: "SETVALUE", value: e });
     }
   })), /* @__PURE__ */ l(
-    L,
+    k,
     {
       value: s.selected,
       onChange: (e) => {
@@ -96,13 +96,14 @@ const R = (r, t) => {
           )
         ] }) }, i)) }),
         /* @__PURE__ */ l(
-          S,
+          L,
           {
             placeholder: E,
             value: s.query,
             onChange: (e) => {
               c({ type: "SEARCH", query: e.target.value }), y && y(e.target.value);
             },
+            className: "dark:bg-gray-950 dark:text-white",
             onKeyDown: (e) => {
               e.key === "Backspace" && s.query === "" && s.selected.length > 0 && c({
                 type: "REMOVESELECT",
@@ -112,7 +113,7 @@ const R = (r, t) => {
             autoComplete: "off"
           }
         ),
-        /* @__PURE__ */ l(k, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
+        /* @__PURE__ */ l(S, { className: "absolute inset-y-0 right-0 flex items-center pr-2", children: /* @__PURE__ */ l(
           C,
           {
             className: "w-5 h-5 text-gray-400",

package/dist/components/DatePicker/DatePicker.js

@@ -1,17 +1,17 @@
-import { jsx as r, jsxs as o, Fragment as n } from "react/jsx-runtime";
+import { jsx as r, jsxs as o, Fragment as s } from "react/jsx-runtime";
 import { h as m, G as a } from "../../headless-datepicker-DRvAXFm1.js";
 import { t as l } from "../../bundle-mjs-SHnj3fHy.js";
 import { d as k, e as v } from "../../index-Be1bsSGe.js";
 import w from "../Label/Label.js";
 const B = ({
   name: c,
-  value: s,
+  value: n,
   showTime: d,
   onChange: g,
   readOnly: u,
   labelProps: y
 }) => {
-  const h = () => /* @__PURE__ */ o(n, { children: [
+  const h = () => /* @__PURE__ */ o(s, { children: [
     /* @__PURE__ */ r(
       "input",
       {
@@ -20,7 +20,7 @@ const B = ({
           d === !0 ? "!hidden" : "md:hidden"
         ),
         type: d === !0 ? "datetime-local" : "date",
-        value: m(new Date(+s * 1e3)).format(
+        value: m(new Date(+n * 1e3)).format(
           d === !0 ? "YYYY-MM-DD HH:mm" : "YYYY-MM-DD"
         ),
         onChange: (i) => g(Math.round(new Date(i.target.value).getTime() / 1e3) + "")
@@ -30,16 +30,17 @@ const B = ({
       a,
       {
         disabledKeyboardNavigation: !0,
-        value: s ? new Date(+s * 1e3) : /* @__PURE__ */ new Date(),
+        value: n ? new Date(+n * 1e3) : /* @__PURE__ */ new Date(),
         onChange: (i) => g(Math.round(i.getTime() / 1e3) + ""),
         children: [
           /* @__PURE__ */ r(
             a.Input,
             {
               name: c,
-              value: new Date(+s * 1e3).getTime() / 1e3 || "",
+              value: new Date(+n * 1e3).getTime() / 1e3 || "",
               format: d === !0 ? "yyyy-MM-dd HH:mm" : "yyyy-MM-dd",
-              id: c
+              id: c,
+              className: "dark:bg-gray-950 dark:text-white"
             }
           ),
           /* @__PURE__ */ r(
@@ -99,10 +100,10 @@ const B = ({
                         ...e.type === "minute" && d === !0 && { action: "close" },
                         ...e.type === "month" || e.type === "year" ? { action: "showDay" } : void 0,
                         children: [
-                          e.type === "day" && /* @__PURE__ */ r(n, { children: e.isHeader ? e.text.substring(0, 3) : e.text }),
-                          e.type === "month" && /* @__PURE__ */ r(n, { children: e.text.substring(0, 3) }),
-                          e.type === "year" && /* @__PURE__ */ r(n, { children: e.text }),
-                          e.type === "hour" && /* @__PURE__ */ r(n, { children: e.text })
+                          e.type === "day" && /* @__PURE__ */ r(s, { children: e.isHeader ? e.text.substring(0, 3) : e.text }),
+                          e.type === "month" && /* @__PURE__ */ r(s, { children: e.text.substring(0, 3) }),
+                          e.type === "year" && /* @__PURE__ */ r(s, { children: e.text }),
+                          e.type === "hour" && /* @__PURE__ */ r(s, { children: e.text })
                         ]
                       },
                       e.key

package/dist/components/Input/InputBase.js

@@ -1,17 +1,17 @@
-import { jsx as n, jsxs as v } from "react/jsx-runtime";
-import d from "react";
-import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
-import h from "../Label/Label.js";
-const y = ({ name: a, inputProps: t, inputBefore: i, inputAfter: u, className: e, labelProps: l, ...r }, m) => {
-  const c = d.useRef(null);
-  d.useImperativeHandle(
-    m,
-    () => c.current
+import { jsx as n, jsxs as m } from "react/jsx-runtime";
+import f from "react";
+import { t as d } from "../../bundle-mjs-SHnj3fHy.js";
+import v from "../Label/Label.js";
+const y = ({ name: x, inputProps: t, inputBefore: i, inputAfter: u, className: e, labelProps: l, ...r }, h) => {
+  const a = f.useRef(null);
+  f.useImperativeHandle(
+    h,
+    () => a.current
   );
-  const x = () => /* @__PURE__ */ v(
+  const c = () => /* @__PURE__ */ m(
     "div",
     {
-      className: f(
+      className: d(
         "flex w-full items-center",
         (e == null ? void 0 : e.container) && e.container
       ),
@@ -19,7 +19,7 @@ const y = ({ name: a, inputProps: t, inputBefore: i, inputAfter: u, className: e
         i && /* @__PURE__ */ n(
           "div",
           {
-            className: f(
+            className: d(
               "btn-before mr-2 flex h-9 items-center justify-center rounded-full px-3 text-gray-400"
             ),
             children: i
@@ -28,19 +28,22 @@ const y = ({ name: a, inputProps: t, inputBefore: i, inputAfter: u, className: e
         /* @__PURE__ */ n(
           "input",
           {
-            ref: c,
+            ref: a,
             ...t && t,
             ...r,
             value: (t == null ? void 0 : t.value) || (r == null ? void 0 : r.value) || "",
-            className: f((e == null ? void 0 : e.input) && e.input),
+            className: d(
+              "dark:bg-gray-950 dark:text-white",
+              (e == null ? void 0 : e.input) && e.input
+            ),
             readOnly: r.readOnly,
-            id: a
+            id: x
           }
         ),
         u && /* @__PURE__ */ n(
           "div",
           {
-            className: f(
+            className: d(
               "btn-after mr-2 flex h-9 items-center justify-center rounded-full text-gray-400"
             ),
             children: u
@@ -49,8 +52,8 @@ const y = ({ name: a, inputProps: t, inputBefore: i, inputAfter: u, className: e
       ]
     }
   );
-  return l ? /* @__PURE__ */ n(h, { ...l, children: x() }) : x();
-}, g = d.forwardRef(y);
+  return l ? /* @__PURE__ */ n(v, { ...l, children: c() }) : c();
+}, w = f.forwardRef(y);
 export {
-  g as default
+  w as default
 };

package/dist/components/Input/Textarea.js

@@ -1,62 +1,65 @@
-import { jsxs as m, jsx as d } from "react/jsx-runtime";
+import { jsxs as m, jsx as f } from "react/jsx-runtime";
 import i from "react";
-import { t as f } from "../../bundle-mjs-SHnj3fHy.js";
-const v = ({ name: h, inputProps: n, inputBefore: u, inputAfter: c, className: t, ...e }, x) => {
-  const a = i.useRef(null);
+import { t as l } from "../../bundle-mjs-SHnj3fHy.js";
+const v = ({ name: x, inputProps: n, inputBefore: u, inputAfter: h, className: t, ...e }, c) => {
+  const d = i.useRef(null);
   i.useImperativeHandle(
-    x,
-    () => a.current
+    c,
+    () => d.current
   );
   const g = (r) => {
-    let l = (r.match(/\n/g) || []).length + 1;
-    a.current.style.height = `${l * 1.25 + 1}em`;
+    let a = (r.match(/\n/g) || []).length + 1;
+    d.current.style.height = `${a * 1.25 + 1}em`;
   };
   return /* @__PURE__ */ m(
     "div",
     {
-      className: f(
+      className: l(
         "flex w-full items-center",
         (t == null ? void 0 : t.container) && t.container
       ),
       children: [
-        u && /* @__PURE__ */ d(
+        u && /* @__PURE__ */ f(
           "div",
           {
-            className: f(
+            className: l(
               "btn-before mr-2 flex h-9 items-center justify-center rounded-full px-3 text-gray-400"
             ),
             children: u
           }
         ),
-        /* @__PURE__ */ d(
+        /* @__PURE__ */ f(
           "textarea",
           {
-            ref: a,
+            ref: d,
             ...n && n,
             ...e,
             value: (n == null ? void 0 : n.value) || (e == null ? void 0 : e.value) || "",
-            className: f((t == null ? void 0 : t.input) && t.input),
+            className: l(
+              "dark:bg-gray-950 dark:text-white",
+              (t == null ? void 0 : t.input) && t.input
+            ),
             readOnly: e.readOnly,
-            id: h,
+            id: x,
             onChange: (r) => {
-              var l;
-              (l = e == null ? void 0 : e.onChange) == null || l.call(e, r), g(r.target.value);
+              var a;
+              (a = e == null ? void 0 : e.onChange) == null || a.call(e, r), g(r.target.value);
             }
           }
         ),
-        c && /* @__PURE__ */ d(
+        h && /* @__PURE__ */ f(
           "div",
           {
-            className: f(
+            className: l(
               "btn-after mr-2 flex h-9 items-center justify-center rounded-full text-gray-400"
             ),
-            children: c
+            children: h
           }
         )
       ]
     }
   );
-}, R = i.forwardRef(v);
+}, w = i.forwardRef(v);
 export {
-  R as default
+  w as default
 };

package/dist/components/Label/Label.js

@@ -1,12 +1,12 @@
 import { jsxs as r, jsx as a } from "react/jsx-runtime";
-import { t as d } from "../../bundle-mjs-SHnj3fHy.js";
+import { t as o } from "../../bundle-mjs-SHnj3fHy.js";
 import { F as f } from "../../index-CBEJ8A3p.js";
-const h = ({
+const g = ({
   label: l,
   className: s,
   htmlFor: i,
   isError: t = !1,
-  errorMessage: o,
+  errorMessage: d,
   type: e = "border",
   variant: m = "md",
   children: c
@@ -14,7 +14,7 @@ const h = ({
   /* @__PURE__ */ r(
     "div",
     {
-      className: d(
+      className: o(
         "relative flex w-full flex-col ",
         e === "border" && "rounded border border-gray-400 dark:border-gray-600 dark:bg-gray-950",
         e === "horizontal" ? "flex-row gap-2" : "form-group",
@@ -26,8 +26,8 @@ const h = ({
         l && /* @__PURE__ */ a(
           "label",
           {
-            className: d(
-              e === "border" && "hidden text-gray-600 opacity-0 dark:text-white",
+            className: o(
+              e === "border" && "hidden text-gray-600 opacity-0 dark:text-white dark:bg-gray-950",
               e === "horizontal" && "flex items-center justify-center",
               "mb-1 text-sm font-semibold"
             ),
@@ -39,11 +39,11 @@ const h = ({
       ]
     }
   ),
-  t && o && /* @__PURE__ */ r("span", { className: "flex items-center text-sm text-red-600 gap-1", children: [
+  t && d && /* @__PURE__ */ r("span", { className: "flex items-center text-sm text-red-600 gap-1", children: [
     /* @__PURE__ */ a("div", { className: "w-4", children: /* @__PURE__ */ a(f, {}) }),
-    o
+    d
   ] })
 ] });
 export {
-  h as default
+  g as default
 };

package/dist/components/PasswordInput/PasswordInput.js

@@ -1,35 +1,36 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as f, jsx as e } from "react/jsx-runtime";
 import r from "react";
-import { t as d } from "../../bundle-mjs-SHnj3fHy.js";
-import { a as u, b as l } from "../../index-CBEJ8A3p.js";
-const p = ({ type: o = "password", ...a }, n) => {
-  const t = r.useRef(null), [s, f] = r.useState(o !== "password");
+import { t as o } from "../../bundle-mjs-SHnj3fHy.js";
+import { a as l, b as u } from "../../index-CBEJ8A3p.js";
+const c = ({ type: n = "password", ...t }, d) => {
+  const a = r.useRef(null), [s, i] = r.useState(n !== "password");
   return r.useImperativeHandle(
-    n,
-    () => t.current
-  ), /* @__PURE__ */ i("div", { className: "flex w-full items-center", children: [
+    d,
+    () => a.current
+  ), /* @__PURE__ */ f("div", { className: "flex w-full items-center", children: [
     /* @__PURE__ */ e(
       "input",
       {
-        ref: t,
+        ref: a,
         type: s ? "text" : "password",
-        ...a
+        ...t,
+        className: o("dark:bg-gray-950 dark:text-white", t.className)
       }
     ),
     /* @__PURE__ */ e(
       "a",
       {
-        className: d(
+        className: o(
           "mr-2 flex h-9 w-10 cursor-pointer items-center justify-center rounded-full text-gray-600",
           "hover:bg-gray-100 dark:hover:bg-gray-700 hover:duration-200",
           "btn-show-password"
         ),
-        onClick: () => f(!s),
-        children: s ? /* @__PURE__ */ e(u, { fontSize: 14 }) : /* @__PURE__ */ e(l, { fontSize: 14 })
+        onClick: () => i(!s),
+        children: s ? /* @__PURE__ */ e(l, { fontSize: 14 }) : /* @__PURE__ */ e(u, { fontSize: 14 })
       }
     )
   ] });
-}, x = r.forwardRef(p);
+}, g = r.forwardRef(c);
 export {
-  x as default
+  g as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anysystem-design",
-  "version": "0.0.55",
+  "version": "0.0.57",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",