@konstructio/ui 0.1.2-alpha.76 → 0.1.2-alpha.77

package/dist/components/Filter/events/index.js

@@ -1,7 +1,7 @@
 var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/KonstructFilter/event-OPEN", t.RESET = "@konstrtuctio/KonstructFilter/event-RESET", t))(e || {});
-const n = (t) => document.dispatchEvent(
-  new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })
-), o = () => document.dispatchEvent(new CustomEvent(
+const n = (t) => document.dispatchEvent(new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", {
+  detail: t
+})), o = () => document.dispatchEvent(new CustomEvent(
   "@konstrtuctio/KonstructFilter/event-RESET"
   /* RESET */
 ));

package/dist/components/ImageUpload/ImageUpload.js

@@ -65,157 +65,55 @@ const me = ({
     const r = 1024, V = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
     return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${V[w]}`;
   }, _ = b || (x ? "Invalid file format. Accepted file type is SVG, PNG, JPEG. Max file size is 5MB." : R || "Logo should be 32 x 32 pixels with transparent background (larger images will be downscaled proportionally to fit). Accepted file type is SVG, PNG, JPEG. Max file size is 5MB.");
-  return /* @__PURE__ */ l(
-    "div",
-    {
-      className: c(
-        ne({
-          status: a,
-          className: s
-        })
-      ),
-      "data-theme": u,
-      children: [
-        p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l(
-          "label",
-          {
-            htmlFor: U,
-            className: c(
-              re({
-                className: L
-              }),
-              "cursor-pointer"
-            ),
-            children: [
-              p,
-              S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
-            ]
-          }
-        ) }),
-        /* @__PURE__ */ l(
-          "div",
-          {
-            className: c(
-              ie({
-                status: a
-              })
-            ),
-            children: [
-              /* @__PURE__ */ l(
-                "div",
-                {
-                  className: c(
-                    le({
-                      status: a
-                    }),
-                    {
-                      "justify-between": x,
-                      "justify-start": !x
-                    }
-                  ),
-                  children: [
-                    a === t.Uploading && /* @__PURE__ */ l(j, { children: [
-                      /* @__PURE__ */ e(
-                        ce,
-                        {
-                          size: 20,
-                          className: "shrink-0 animate-spin text-metal-400"
-                        }
-                      ),
-                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
-                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
-                      ] })
-                    ] }),
-                    a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
-                      /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
-                        "img",
-                        {
-                          src: v,
-                          alt: d || "Uploaded image",
-                          className: "w-full h-full object-contain"
-                        }
-                      ) }),
-                      d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                        /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
-                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
-                      ] })
-                    ] }),
-                    (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
-                    x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
-                  ]
-                }
-              ),
-              (a === t.Default || a === t.Error) && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  onClick: Y,
-                  theme: u,
-                  className: "h-10 px-4 py-2 shrink-0",
-                  children: K
-                }
-              ),
-              a === t.Uploading && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  shape: "circle",
-                  size: "medium",
-                  onClick: I,
-                  theme: u,
-                  className: "shrink-0",
-                  "aria-label": "Cancel upload",
-                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
-                }
-              ),
-              a === t.Complete && /* @__PURE__ */ e(
-                F,
-                {
-                  variant: "secondary",
-                  shape: "circle",
-                  size: "medium",
-                  onClick: I,
-                  theme: u,
-                  className: "shrink-0",
-                  "aria-label": "Remove file",
-                  children: /* @__PURE__ */ e(P, { className: "w-6 h-6" })
-                }
-              )
-            ]
-          }
-        ),
-        /* @__PURE__ */ l("div", { className: "flex w-full gap-2", children: [
-          /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e(
-            "p",
-            {
-              className: c(
-                se({
-                  status: a
-                })
-              ),
-              children: _
-            }
-          ) }),
-          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
-          a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
+  return /* @__PURE__ */ l("div", { className: c(ne({
+    status: a,
+    className: s
+  })), "data-theme": u, children: [
+    p && /* @__PURE__ */ e("div", { className: c(A), children: /* @__PURE__ */ l("label", { htmlFor: U, className: c(re({
+      className: L
+    }), "cursor-pointer"), children: [
+      p,
+      S && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
+    ] }) }),
+    /* @__PURE__ */ l("div", { className: c(ie({
+      status: a
+    })), children: [
+      /* @__PURE__ */ l("div", { className: c(le({
+        status: a
+      }), {
+        "justify-between": x,
+        "justify-start": !x
+      }), children: [
+        a === t.Uploading && /* @__PURE__ */ l(j, { children: [
+          /* @__PURE__ */ e(ce, { size: 20, className: "shrink-0 animate-spin text-metal-400" }),
+          d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-metal-50", children: d }),
+            h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
+          ] })
         ] }),
-        /* @__PURE__ */ e(
-          "input",
-          {
-            ref: f,
-            id: U,
-            type: "file",
-            name: H,
-            accept: M,
-            onChange: Q,
-            className: "hidden",
-            "aria-label": typeof p == "string" ? p : "File upload"
-          }
-        )
-      ]
-    }
-  );
+        a === t.Complete && v && /* @__PURE__ */ l(j, { children: [
+          /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e("img", { src: v, alt: d || "Uploaded image", className: "w-full h-full object-contain" }) }),
+          d && /* @__PURE__ */ l("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+            /* @__PURE__ */ e("p", { className: "text-sm leading-5 truncate w-full text-slate-800 dark:text-slate-50 kubefirst-dark:text-slate-50", children: d }),
+            h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-slate-400 kubefirst-dark:text-slate-400 tracking-[0.15px]", children: h })
+          ] })
+        ] }),
+        (a === t.Default || a === t.Error && !v) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(oe, { className: "w-8 h-8 text-slate-400 dark:text-slate-500 kubefirst-dark:text-slate-500" }) }),
+        x && /* @__PURE__ */ e("div", { className: "shrink-0", children: /* @__PURE__ */ e(de, { className: "w-5 h-5 text-red-700 dark:text-red-500 kubefirst-dark:text-red-500" }) })
+      ] }),
+      (a === t.Default || a === t.Error) && /* @__PURE__ */ e(F, { variant: "secondary", onClick: Y, theme: u, className: "h-10 px-4 py-2 shrink-0", children: K }),
+      a === t.Uploading && /* @__PURE__ */ e(F, { variant: "secondary", shape: "circle", size: "medium", onClick: I, theme: u, className: "shrink-0", "aria-label": "Cancel upload", children: /* @__PURE__ */ e(P, { className: "w-6 h-6" }) }),
+      a === t.Complete && /* @__PURE__ */ e(F, { variant: "secondary", shape: "circle", size: "medium", onClick: I, theme: u, className: "shrink-0", "aria-label": "Remove file", children: /* @__PURE__ */ e(P, { className: "w-6 h-6" }) })
+    ] }),
+    /* @__PURE__ */ l("div", { className: "flex w-full gap-2", children: [
+      /* @__PURE__ */ e("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ e("p", { className: c(se({
+        status: a
+      })), children: _ }) }),
+      (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-29" }),
+      a === t.Uploading && /* @__PURE__ */ e("div", { className: "shrink-0 w-10" })
+    ] }),
+    /* @__PURE__ */ e("input", { ref: f, id: U, type: "file", name: H, accept: M, onChange: Q, className: "hidden", "aria-label": typeof p == "string" ? p : "File upload" })
+  ] });
 };
 me.displayName = "KonstructImageUpload";
 export {

package/dist/components/ImageUpload/ImageUpload.variants.js

@@ -1,105 +1,53 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(
-  ["flex", "flex-col", "gap-2", "w-full"],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: ""
-      }
-    },
-    defaultVariants: {
-      status: "default"
+const a = t(["flex", "flex-col", "gap-2", "w-full"], {
+  variants: {
+    status: {
+      default: "",
+      uploading: "",
+      complete: "",
+      error: ""
     }
+  },
+  defaultVariants: {
+    status: "default"
   }
-), r = t(
-  ["flex", "gap-2", "h-15", "items-center", "w-full"],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: ""
-      }
-    },
-    defaultVariants: {
-      status: "default"
+}), r = t(["flex", "gap-2", "h-15", "items-center", "w-full"], {
+  variants: {
+    status: {
+      default: "",
+      uploading: "",
+      complete: "",
+      error: ""
     }
+  },
+  defaultVariants: {
+    status: "default"
   }
-), s = t(
-  [
-    "flex",
-    "gap-4",
-    "grow",
-    "h-full",
-    "items-center",
-    "px-4",
-    "py-2",
-    "rounded",
-    "border",
-    "bg-white",
-    "border-gray-300",
-    "dark:bg-metal-800",
-    "dark:border-metal-700",
-    "kubefirst-dark:bg-slate-800",
-    "kubefirst-dark:border-slate-600"
-  ],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: [
-          "border-red-600",
-          "dark:border-red-500",
-          "kubefirst-dark:border-red-500"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "default"
+}), s = t(["flex", "gap-4", "grow", "h-full", "items-center", "px-4", "py-2", "rounded", "border", "bg-white", "border-gray-300", "dark:bg-metal-800", "dark:border-metal-700", "kubefirst-dark:bg-slate-800", "kubefirst-dark:border-slate-600"], {
+  variants: {
+    status: {
+      default: "",
+      uploading: "",
+      complete: "",
+      error: ["border-red-600", "dark:border-red-500", "kubefirst-dark:border-red-500"]
     }
+  },
+  defaultVariants: {
+    status: "default"
   }
-), l = t([
-  "flex",
-  "gap-1",
-  "items-center",
-  "text-sm",
-  "font-medium",
-  "leading-5",
-  "text-slate-500",
-  "dark:text-slate-50",
-  "kubefirst-dark:text-slate-50"
-]), d = t(
-  [
-    "text-xs",
-    "leading-5",
-    "text-slate-600",
-    "dark:text-slate-200",
-    "kubefirst-dark:text-slate-200"
-  ],
-  {
-    variants: {
-      status: {
-        default: "",
-        uploading: "",
-        complete: "",
-        error: [
-          "text-red-700",
-          "dark:text-red-400",
-          "kubefirst-dark:text-red-500"
-        ]
-      }
-    },
-    defaultVariants: {
-      status: "default"
+}), l = t(["flex", "gap-1", "items-center", "text-sm", "font-medium", "leading-5", "text-slate-500", "dark:text-slate-50", "kubefirst-dark:text-slate-50"]), d = t(["text-xs", "leading-5", "text-slate-600", "dark:text-slate-200", "kubefirst-dark:text-slate-200"], {
+  variants: {
+    status: {
+      default: "",
+      uploading: "",
+      complete: "",
+      error: ["text-red-700", "dark:text-red-400", "kubefirst-dark:text-red-500"]
     }
+  },
+  defaultVariants: {
+    status: "default"
   }
-);
+});
 export {
   d as helperTextVariants,
   a as imageUploadVariants,

package/dist/components/Input/Input.js

@@ -113,175 +113,50 @@ w.propTypes = {
   size: l.oneOfType([l.string, l.number])
 };
 w.displayName = "Eye";
-const F = y(
-  ({
-    className: t,
-    error: r,
-    helperText: n,
-    helperTextClassName: e,
-    isRequired: o = !1,
-    isSearch: a = !1,
-    label: c,
-    labelAction: O,
-    labelClassName: j,
-    labelWrapperClassName: k,
-    name: N,
-    theme: P,
-    type: f = "text",
-    ...E
-  }, z) => {
-    const b = W(), I = $(f === "password"), [h, _] = T(() => f !== "password"), m = typeof r == "string" && r.length >= 0, L = h ? w : x;
-    return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": P, children: [
-      c ? /* @__PURE__ */ u(
-        "div",
-        {
-          className: i(
-            "flex items-center justify-between",
-            k
-          ),
-          children: [
-            /* @__PURE__ */ u(
-              d,
-              {
-                component: "label",
-                variant: "labelLarge",
-                htmlFor: b,
-                className: i(
-                  "cursor-pointer",
-                  "flex",
-                  "gap-1",
-                  "text-sm",
-                  "font-medium",
-                  j
-                ),
-                children: [
-                  c,
-                  " ",
-                  o && /* @__PURE__ */ s(
-                    d,
-                    {
-                      component: "span",
-                      className: i(
-                        "text-red-600",
-                        "dark:text-red-500",
-                        "text-xs",
-                        "mt-0.5"
-                      ),
-                      children: "*"
-                    }
-                  )
-                ]
-              }
-            ),
-            O
-          ]
-        }
-      ) : null,
-      /* @__PURE__ */ u("div", { className: "relative", children: [
-        a ? /* @__PURE__ */ s(
-          "i",
-          {
-            className: i(
-              "absolute",
-              "left-2.5",
-              "top-1/2",
-              "-translate-y-[50%]",
-              "text-slate-400",
-              "dark:text-metal-400",
-              {
-                "text-red-700": m
-              }
-            ),
-            children: /* @__PURE__ */ s(C, { className: "w-5 h-5" })
-          }
-        ) : null,
-        /* @__PURE__ */ s(
-          "input",
-          {
-            id: c ? b : void 0,
-            ref: z,
-            name: N,
-            type: h ? I.current ? "text" : f : "password",
-            "data-error": m,
-            className: i(
-              S({
-                className: t,
-                variant: m ? "error" : "default"
-              }),
-              {
-                "pr-10": f === "password" || m,
-                "pl-8": a
-              }
-            ),
-            ...E
-          }
-        ),
-        m ? /* @__PURE__ */ s(
-          "i",
-          {
-            className: i(
-              "-translate-y-[50%]",
-              "absolute",
-              "right-3",
-              "text-red-700",
-              "top-1/2",
-              "dark:text-red-500"
-            ),
-            children: /* @__PURE__ */ s(M, { className: "w-5 h-5" })
-          }
-        ) : null,
-        f === "password" && !r ? /* @__PURE__ */ s(
-          "i",
-          {
-            className: i(
-              "-translate-y-[50%]",
-              "absolute",
-              "right-3",
-              "text-slate-400",
-              "top-1/2"
-            ),
-            children: /* @__PURE__ */ s(
-              L,
-              {
-                className: "w-5 h-5 cursor-pointer",
-                onClick: () => _(!h)
-              }
-            )
-          }
-        ) : null
+const F = y(({
+  className: t,
+  error: r,
+  helperText: n,
+  helperTextClassName: e,
+  isRequired: o = !1,
+  isSearch: a = !1,
+  label: c,
+  labelAction: O,
+  labelClassName: j,
+  labelWrapperClassName: k,
+  name: N,
+  theme: P,
+  type: f = "text",
+  ...E
+}, z) => {
+  const b = W(), I = $(f === "password"), [h, _] = T(() => f !== "password"), m = typeof r == "string" && r.length >= 0, L = h ? w : x;
+  return /* @__PURE__ */ u("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": P, children: [
+    c ? /* @__PURE__ */ u("div", { className: i("flex items-center justify-between", k), children: [
+      /* @__PURE__ */ u(d, { component: "label", variant: "labelLarge", htmlFor: b, className: i("cursor-pointer", "flex", "gap-1", "text-sm", "font-medium", j), children: [
+        c,
+        " ",
+        o && /* @__PURE__ */ s(d, { component: "span", className: i("text-red-600", "dark:text-red-500", "text-xs", "mt-0.5"), children: "*" })
       ] }),
-      r ? /* @__PURE__ */ s(
-        d,
-        {
-          component: "span",
-          className: i(
-            "text-xs",
-            "tracking-normal",
-            "text-red-700",
-            "dark:text-red-400"
-          ),
-          children: r
-        }
-      ) : null,
-      !r && n ? /* @__PURE__ */ s(
-        d,
-        {
-          component: "span",
-          variant: "body1",
-          className: i(
-            "text-xs",
-            "text-slate-600",
-            "dark:text-slate-200",
-            "select-none",
-            "tracking-normal",
-            e
-          ),
-          children: n
-        }
-      ) : null
-    ] });
-  }
-);
+      O
+    ] }) : null,
+    /* @__PURE__ */ u("div", { className: "relative", children: [
+      a ? /* @__PURE__ */ s("i", { className: i("absolute", "left-2.5", "top-1/2", "-translate-y-[50%]", "text-slate-400", "dark:text-metal-400", {
+        "text-red-700": m
+      }), children: /* @__PURE__ */ s(C, { className: "w-5 h-5" }) }) : null,
+      /* @__PURE__ */ s("input", { id: c ? b : void 0, ref: z, name: N, type: h ? I.current ? "text" : f : "password", "data-error": m, className: i(S({
+        className: t,
+        variant: m ? "error" : "default"
+      }), {
+        "pr-10": f === "password" || m,
+        "pl-8": a
+      }), ...E }),
+      m ? /* @__PURE__ */ s("i", { className: i("-translate-y-[50%]", "absolute", "right-3", "text-red-700", "top-1/2", "dark:text-red-500"), children: /* @__PURE__ */ s(M, { className: "w-5 h-5" }) }) : null,
+      f === "password" && !r ? /* @__PURE__ */ s("i", { className: i("-translate-y-[50%]", "absolute", "right-3", "text-slate-400", "top-1/2"), children: /* @__PURE__ */ s(L, { className: "w-5 h-5 cursor-pointer", onClick: () => _(!h) }) }) : null
+    ] }),
+    r ? /* @__PURE__ */ s(d, { component: "span", className: i("text-xs", "tracking-normal", "text-red-700", "dark:text-red-400"), children: r }) : null,
+    !r && n ? /* @__PURE__ */ s(d, { component: "span", variant: "body1", className: i("text-xs", "text-slate-600", "dark:text-slate-200", "select-none", "tracking-normal", e), children: n }) : null
+  ] });
+});
 F.displayName = "KonstructInput";
 export {
   F as Input

package/dist/components/Input/Input.variants.js

@@ -1,57 +1,15 @@
 import { c as e } from "../../index-D29mdTf5.js";
-const r = e(
-  [
-    "bg-white",
-    "border",
-    "border-gray-300",
-    "caret-text-slate-800",
-    "disabled:cursor-not-allowed",
-    "disabled:text-slate-500",
-    "flex",
-    "focus-visible:border-transparent",
-    "focus-visible:outline-none",
-    "focus-visible:ring-1",
-    "h-10",
-    "px-2.5",
-    "py-2",
-    "rounded",
-    "text-slate-800",
-    "text-sm",
-    "transition-all",
-    "w-full",
-    "disabled:bg-gray-50",
-    "placeholder:text-slate-400",
-    "data-[error=false]:dark:focus:ring-aurora-500",
-    "data-[error=false]:focus:ring-aurora-500",
-    "dark:bg-metal-800",
-    "dark:border-metal-700",
-    "dark:caret-text-metal-50",
-    "dark:disabled:bg-metal-900",
-    "dark:disabled:placeholder:text-metal-400",
-    "dark:disabled:text-metal-400",
-    "dark:disabled:text-slate-400",
-    "dark:placeholder:text-metal-300",
-    "dark:text-slate-50",
-    "dark:text-white"
-  ],
-  {
-    variants: {
-      variant: {
-        default: "",
-        error: [
-          "pr-8",
-          "border-red-600",
-          "focus-visible:border-red-600",
-          "focus-visible:ring-transparent",
-          "dark:border-red-500"
-        ]
-      }
-    },
-    defaultVariants: {
-      variant: "default"
+const r = e(["bg-white", "border", "border-gray-300", "caret-text-slate-800", "disabled:cursor-not-allowed", "disabled:text-slate-500", "flex", "focus-visible:border-transparent", "focus-visible:outline-none", "focus-visible:ring-1", "h-10", "px-2.5", "py-2", "rounded", "text-slate-800", "text-sm", "transition-all", "w-full", "disabled:bg-gray-50", "placeholder:text-slate-400", "data-[error=false]:dark:focus:ring-aurora-500", "data-[error=false]:focus:ring-aurora-500", "dark:bg-metal-800", "dark:border-metal-700", "dark:caret-text-metal-50", "dark:disabled:bg-metal-900", "dark:disabled:placeholder:text-metal-400", "dark:disabled:text-metal-400", "dark:disabled:text-slate-400", "dark:placeholder:text-metal-300", "dark:text-slate-50", "dark:text-white"], {
+  variants: {
+    variant: {
+      default: "",
+      error: ["pr-8", "border-red-600", "focus-visible:border-red-600", "focus-visible:ring-transparent", "dark:border-red-500"]
     }
+  },
+  defaultVariants: {
+    variant: "default"
   }
-);
+});
 export {
   r as inputVariants
 };