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

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,55 +65,157 @@ 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 })
-          ] })
+  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" })
         ] }),
-        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" })
-  ] });
+        /* @__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,53 +1,105 @@
 import { c as t } from "../../index-D29mdTf5.js";
-const a = t(["flex", "flex-col", "gap-2", "w-full"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ""
+const a = t(
+  ["flex", "flex-col", "gap-2", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
     }
-  },
-  defaultVariants: {
-    status: "default"
   }
-}), r = t(["flex", "gap-2", "h-15", "items-center", "w-full"], {
-  variants: {
-    status: {
-      default: "",
-      uploading: "",
-      complete: "",
-      error: ""
+), r = t(
+  ["flex", "gap-2", "h-15", "items-center", "w-full"],
+  {
+    variants: {
+      status: {
+        default: "",
+        uploading: "",
+        complete: "",
+        error: ""
+      }
+    },
+    defaultVariants: {
+      status: "default"
     }
-  },
-  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"]
+), 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"
     }
-  },
-  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"]
+), 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"
     }
-  },
-  defaultVariants: {
-    status: "default"
   }
-});
+);
 export {
   d as helperTextVariants,
   a as imageUploadVariants,

package/dist/components/Input/Input.js

@@ -113,50 +113,175 @@ 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: "*" })
+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
       ] }),
-      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
-  ] });
-});
+      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,15 +1,57 @@
 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"]
+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"
     }
-  },
-  defaultVariants: {
-    variant: "default"
   }
-});
+);
 export {
   r as inputVariants
 };