@konstructio/ui 0.1.2-alpha.44 → 0.1.2-alpha.47

package/dist/components/Counter/Counter.variants.js

@@ -0,0 +1,70 @@
+import { c as e } from "../../index-D29mdTf5.js";
+const t = e([
+  "[&::-webkit-inner-spin-button]:appearance-none",
+  "[&::-webkit-outer-spin-button]:appearance-none",
+  "[-moz-appearance:textfield]",
+  "appearance-none",
+  "border",
+  "border-x-0",
+  "focus-visible:outline-none",
+  "focus-visible:ring-transparent",
+  "h-9",
+  "max-w-16",
+  "text-right",
+  "px-3",
+  "border-gray-300",
+  "text-slate-800",
+  "bg-white",
+  "dark:bg-metal-800",
+  "dark:border-metal-700",
+  "dark:text-metal-50"
+]), r = e(
+  [
+    "h-9",
+    "w-9",
+    "flex",
+    "items-center",
+    "justify-center",
+    "border",
+    "text-slate-500",
+    "border-gray-300",
+    "bg-white",
+    "cursor-pointer",
+    "hover:bg-aurora-50",
+    "hover:text-slate-600",
+    "disabled:hover:bg-white",
+    "disabled:bg-white",
+    "disabled:text-slate-400",
+    "dark:bg-metal-800",
+    "dark:border-metal-700",
+    "dark:text-aurora-500",
+    "dark:hover:bg-aurora-900",
+    "dark:hover:text-aurora-500",
+    "dark:disabled:text-metal-400",
+    "dark:disabled:hover:bg-metal-800",
+    "dark:disabled:bg-metal-800",
+    "disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      button: {
+        left: ["rounded-e"],
+        rigth: ["rounded-s"]
+      }
+    }
+  }
+), o = e(["cursor-pointer"], {
+  variants: {
+    variant: {
+      default: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+export {
+  r as buttonVariants,
+  t as counterVariants,
+  o as labelVariants
+};

package/dist/components/Filter/Filter.js

@@ -9,7 +9,7 @@ const t = ({
   theme: o = "civo",
   children: r
 }) => /* @__PURE__ */ i("div", { className: m(a({ className: e })), "data-theme": o, children: r });
-t.displayName = "Filter";
+t.displayName = "KonstructFilter";
 t.BadgeMultiSelect = l;
 t.DateFilterDropdown = p;
 t.ResetButton = s;

package/dist/components/Filter/components/BadgeDropdown/BadgeMultiSelect.js

@@ -2,8 +2,8 @@ import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { Badge as o } from "../../../Badge/Badge.js";
 import { Button as m } from "../../../Button/Button.js";
 import { Checkbox as k } from "../../../Checkbox/Checkbox.js";
-import { cn as l } from "../../../../utils/index.js";
 import { filterButtonIconVariants as C, filterButtonVariants as y } from "../../Filter.variants.js";
+import { cn as r } from "../../../../utils/index.js";
 import { useBadgeMultiSelect as N } from "./BadgeMultiSelect.hook.js";
 import { C as B } from "../../../../chevron-down-DgT-uSF9.js";
 const $ = ({
@@ -14,7 +14,7 @@ const $ = ({
 }) => {
   const {
     wrapperRef: h,
-    isOpen: r,
+    isOpen: l,
     selectedOptions: u,
     selectedCount: c,
     handleOpen: g,
@@ -26,8 +26,8 @@ const $ = ({
     /* @__PURE__ */ t(
       "button",
       {
-        className: l(y(), {
-          "text-slate-700 dark:text-metal-50": r
+        className: r(y(), {
+          "text-slate-700 dark:text-metal-50": l
         }),
         onClick: g,
         children: [
@@ -36,19 +36,18 @@ const $ = ({
           /* @__PURE__ */ e(
             B,
             {
-              className: l(C(), {
-                "rotate-180": r,
-                "text-blue-600 dark:text-aurora-500": r
+              className: r(C(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": l
               })
             }
           )
         ]
       }
     ),
-    r && /* @__PURE__ */ t(
+    l && /* @__PURE__ */ t(
       "div",
       {
-        className: l(
+        className: r(
           "absolute",
           "top-full",
           "mt-1",
@@ -88,7 +87,7 @@ const $ = ({
           /* @__PURE__ */ t(
             "div",
             {
-              className: l(
+              className: r(
                 "flex",
                 "justify-center",
                 "items-center",

package/dist/components/Filter/components/DateFilterDropdown/DateFilterDropdown.js

@@ -1,55 +1,71 @@
 import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { Badge as g } from "../../../Badge/Badge.js";
+import { Badge as b } from "../../../Badge/Badge.js";
 import { Button as i } from "../../../Button/Button.js";
-import { DatePicker as w } from "../../../Datepicker/DatePicker.js";
-import { cn as o } from "../../../../utils/index.js";
-import { filterButtonIconVariants as x, filterButtonVariants as y } from "../../Filter.variants.js";
-import { useDateFilterDropdown as D } from "./DateFilterDropdown.hook.js";
-import { C as N } from "../../../../chevron-down-DgT-uSF9.js";
+import { DatePicker as g } from "../../../Datepicker/DatePicker.js";
+import { filterButtonIconVariants as x, filterButtonVariants as w } from "../../Filter.variants.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useDateFilterDropdown as y } from "./DateFilterDropdown.hook.js";
+import { C as k } from "../../../../chevron-down-DgT-uSF9.js";
 const R = ({
-  label: s,
+  label: d,
   position: l = "left",
-  onApply: p
+  onApply: s
 }) => {
   const {
-    id: c,
+    id: p,
     appliedDay: n,
-    isOpen: t,
-    selectedDay: r,
-    wrapperRef: d,
-    handleApply: m,
+    isOpen: r,
+    selectedDay: o,
+    wrapperRef: m,
+    handleApply: c,
     handleOpen: f,
     handleSelect: h,
     handleReset: u
-  } = D({ onApply: p });
-  return /* @__PURE__ */ a("div", { ref: d, className: "relative", children: [
+  } = y({ onApply: s });
+  return /* @__PURE__ */ a("div", { ref: m, className: "relative", children: [
     /* @__PURE__ */ a(
       "button",
       {
-        className: o(y(), {
-          "text-slate-700": t
+        className: t(w(), {
+          "text-slate-700": r
         }),
         onClick: f,
         children: [
-          s,
-          n && /* @__PURE__ */ e(g, { label: n }),
+          d,
+          n && /* @__PURE__ */ e(b, { label: n }),
           /* @__PURE__ */ e(
-            N,
+            k,
             {
-              className: o(x(), {
-                "rotate-180": t,
-                "text-blue-600": t
+              className: t(x(), {
+                "rotate-180 text-blue-600 dark:text-aurora-500": r
               })
             }
           )
         ]
       }
     ),
-    t && /* @__PURE__ */ a(
+    r && /* @__PURE__ */ a(
       "div",
       {
-        className: o(
-          "absolute top-full mt-1 bg-white rounded-md shadow-md animate-in fade-in-0 z-10 border border-gray-200 flex flex-col gap-4 py-4 px-6",
+        className: t(
+          "absolute",
+          "top-full",
+          "mt-1",
+          "bg-white",
+          "rounded-md",
+          "shadow-md",
+          "animate-in",
+          "fade-in-0",
+          "z-10",
+          "border",
+          "border-gray-200",
+          "flex",
+          "flex-col",
+          "gap-4",
+          "py-4",
+          "px-6",
+          "dark:bg-metal-800",
+          "dark:border-metal-700",
           {
             "left-0": l === "left",
             "right-0": l === "right"
@@ -57,29 +73,46 @@ const R = ({
         ),
         children: [
           /* @__PURE__ */ e(
-            w,
+            g,
             {
               className: "p-0",
               arrowClassName: "-top-1 right-0",
-              monthsClassName: "shadow-none p-0 w-auto",
-              defaultSelected: r,
-              defaultMonth: r,
+              monthsClassName: t(
+                "shadow-none",
+                "p-0",
+                "w-auto",
+                "dark:border-transparent"
+              ),
+              defaultSelected: o,
+              defaultMonth: o,
               onSelect: h
             },
-            r?.toISOString() ?? c
+            o?.toISOString() ?? p
           ),
-          /* @__PURE__ */ a("div", { className: "flex justify-end items-center gap-4 py-2", children: [
-            /* @__PURE__ */ e(
-              i,
-              {
-                variant: "secondary",
-                appearance: "compact",
-                onClick: u,
-                children: "Reset"
-              }
-            ),
-            /* @__PURE__ */ e(i, { appearance: "compact", onClick: m, children: "Apply" })
-          ] })
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: t(
+                "flex",
+                "justify-end",
+                "items-center",
+                "gap-4",
+                "py-2"
+              ),
+              children: [
+                /* @__PURE__ */ e(
+                  i,
+                  {
+                    variant: "secondary",
+                    appearance: "compact",
+                    onClick: u,
+                    children: "Reset"
+                  }
+                ),
+                /* @__PURE__ */ e(i, { appearance: "compact", onClick: c, children: "Apply" })
+              ]
+            }
+          )
         ]
       }
     )

package/dist/components/Filter/components/ResetButton/ResetButton.js

@@ -1,43 +1,32 @@
-import { jsx as n } from "react/jsx-runtime";
-import { useCallback as s } from "react";
-import { Button as p } from "../../../Button/Button.js";
-import { cn as m } from "../../../../utils/index.js";
-import { resetEvent as c } from "../../events/index.js";
-const b = ({
-  disabled: t,
-  className: e,
-  onClick: r,
-  ...a
+import { jsx as a } from "react/jsx-runtime";
+import { useCallback as m } from "react";
+import { Button as i } from "../../../Button/Button.js";
+import { cn as c } from "../../../../utils/index.js";
+import { resetEvent as p } from "../../events/index.js";
+const d = ({
+  disabled: e,
+  className: r,
+  onClick: t,
+  ...o
 }) => {
-  const o = s(() => {
-    c(), r?.();
-  }, [r]);
-  return /* @__PURE__ */ n(
-    p,
+  const n = m(() => {
+    p(), t?.();
+  }, [t]);
+  return /* @__PURE__ */ a(
+    i,
     {
       type: "button",
-      variant: "text",
+      variant: "link",
       appearance: "compact",
       version: "alternate",
-      onClick: o,
-      disabled: t,
-      className: m(
-        "text-aurora-500",
-        "hover:text-slate-700",
-        "disabled:text-aurora-500/60",
-        "bg-transparent",
-        "hover:bg-transparent",
-        "hover:text-aurora-500",
-        "border-transparent",
-        "dark:hover:text-aurora-500",
-        "dark:hover:bg-aurora-900",
-        e
-      ),
-      ...a,
+      onClick: n,
+      disabled: e,
+      className: c("hover:no-underline", r),
+      ...o,
       children: "Reset"
     }
   );
 };
 export {
-  b as ResetButton
+  d as ResetButton
 };

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

@@ -1,8 +1,8 @@
-var e = /* @__PURE__ */ ((t) => (t.OPEN = "@konstrtuctio/Filter/event-OPEN", t.RESET = "@konstrtuctio/Filter/event-RESET", t))(e || {});
+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/Filter/event-OPEN", { detail: t })
+  new CustomEvent("@konstrtuctio/KonstructFilter/event-OPEN", { detail: t })
 ), o = () => document.dispatchEvent(new CustomEvent(
-  "@konstrtuctio/Filter/event-RESET"
+  "@konstrtuctio/KonstructFilter/event-RESET"
   /* RESET */
 ));
 export {

package/dist/components/ImageUpload/ImageUpload.js

@@ -0,0 +1,221 @@
+import { jsxs as l, jsx as e, Fragment as S } from "react/jsx-runtime";
+import { useId as ee, useRef as j, useState as g, useEffect as te } from "react";
+import { S as ae } from "../../loader-juvMSJ9L.js";
+import { Button as F } from "../Button/Button.js";
+import { cn as m } from "../../utils/index.js";
+import { labelVariants as re, inputFieldVariants as le, inputContainerVariants as ie, helperTextVariants as se, imageUploadVariants as ne } from "./ImageUpload.variants.js";
+import { c as ce } from "../../createLucideIcon-D4r5Phnh.js";
+import { Warning as oe } from "../../assets/icons/components/Warning.js";
+import { X as D } from "../../x-BXShoIAM.js";
+const de = [
+  ["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2", ry: "2", key: "1m3agn" }],
+  ["circle", { cx: "9", cy: "9", r: "2", key: "af1f0g" }],
+  ["path", { d: "m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21", key: "1xmnt7" }]
+], me = ce("image", de);
+var t = /* @__PURE__ */ ((s) => (s.Default = "default", s.Uploading = "uploading", s.Complete = "complete", s.Error = "error", s))(t || {});
+const pe = ({
+  className: s,
+  error: b,
+  fileName: T,
+  fileSize: E,
+  fileUrl: z,
+  helperText: 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.",
+  isRequired: L = !1,
+  label: p = "Item logo",
+  labelClassName: P,
+  name: A,
+  onChange: N,
+  onRemove: H,
+  status: k = t.Default,
+  theme: u,
+  uploadButtonText: J = "Upload logo",
+  accept: M = "image/svg+xml,image/png,image/jpeg,image/jpg",
+  maxSize: K = 5 * 1024 * 1024
+}) => {
+  const U = ee(), f = j(null), n = j(null), [W, c] = g(k), [_, B] = g(z), [$, C] = g(T), [X, G] = g(E);
+  te(() => () => {
+    n.current && clearTimeout(n.current);
+  }, []);
+  const a = k !== t.Default ? k : W, y = z ?? _, o = T ?? $, h = E ?? X, x = !!b || a === t.Error, q = (i) => {
+    const r = i.target.files?.[0];
+    if (!r) return;
+    if (!M.split(",").map((d) => d.trim()).some((d) => {
+      if (d.includes("*")) {
+        const Z = d.split("/")[0];
+        return r.type.startsWith(Z);
+      }
+      return r.type === d;
+    })) {
+      c(t.Error), N?.(i);
+      return;
+    }
+    if (r.size > K) {
+      c(t.Error), N?.(i);
+      return;
+    }
+    c(t.Uploading), C(r.name), G(Q(r.size));
+    const v = new FileReader();
+    v.onloadend = () => {
+      B(v.result), n.current = setTimeout(() => {
+        c(t.Complete);
+      }, 500);
+    }, v.readAsDataURL(r), N?.(i);
+  }, V = () => {
+    n.current && (clearTimeout(n.current), n.current = null), B(void 0), C(void 0), G(void 0), c(t.Default), f.current && (f.current.value = ""), H?.();
+  }, O = () => {
+    f.current?.click();
+  }, Q = (i) => {
+    if (i === 0) return "0 Bytes";
+    const r = 1024, I = ["Bytes", "KB", "MB", "GB"], w = Math.floor(Math.log(i) / Math.log(r));
+    return `${parseFloat((i / Math.pow(r, w)).toFixed(2))}${I[w]}`;
+  }, Y = 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: m(
+        ne({
+          status: a,
+          className: s
+        })
+      ),
+      "data-theme": u,
+      children: [
+        p && /* @__PURE__ */ l(
+          "label",
+          {
+            htmlFor: U,
+            className: m(
+              re({
+                className: P
+              }),
+              "cursor-pointer"
+            ),
+            children: [
+              p,
+              L && /* @__PURE__ */ e("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: m(
+              ie({
+                status: a
+              })
+            ),
+            children: [
+              /* @__PURE__ */ l(
+                "div",
+                {
+                  className: m(
+                    le({
+                      status: a
+                    }),
+                    {
+                      "justify-between": x,
+                      "justify-start": !x
+                    }
+                  ),
+                  children: [
+                    a === t.Uploading && /* @__PURE__ */ l(S, { children: [
+                      /* @__PURE__ */ e(ae, { className: "w-5 h-5 shrink-0 animate-spin text-metal-400" }),
+                      o && /* @__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: o }),
+                        h && /* @__PURE__ */ e("p", { className: "text-xs leading-4 text-slate-600 dark:text-metal-300 tracking-[0.15px]", children: h })
+                      ] })
+                    ] }),
+                    a === t.Complete && y && /* @__PURE__ */ l(S, { children: [
+                      /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 relative", children: /* @__PURE__ */ e(
+                        "img",
+                        {
+                          src: y,
+                          alt: o || "Uploaded image",
+                          className: "w-full h-full object-contain"
+                        }
+                      ) }),
+                      o && /* @__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: o }),
+                        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 && !y) && /* @__PURE__ */ e("div", { className: "w-8 h-8 shrink-0 flex items-center justify-center", children: /* @__PURE__ */ e(me, { 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(oe, { 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: O,
+                  theme: u,
+                  className: "h-10 px-4 py-2 shrink-0",
+                  children: J
+                }
+              ),
+              a === t.Uploading && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: V,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Cancel upload",
+                  children: /* @__PURE__ */ e(D, { className: "w-6 h-6" })
+                }
+              ),
+              a === t.Complete && /* @__PURE__ */ e(
+                F,
+                {
+                  variant: "secondary",
+                  shape: "circle",
+                  size: "medium",
+                  onClick: V,
+                  theme: u,
+                  className: "shrink-0",
+                  "aria-label": "Remove file",
+                  children: /* @__PURE__ */ e(D, { 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: m(
+                se({
+                  status: a
+                })
+              ),
+              children: Y
+            }
+          ) }),
+          (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: A,
+            accept: M,
+            onChange: q,
+            className: "hidden",
+            "aria-label": typeof p == "string" ? p : "File upload"
+          }
+        )
+      ]
+    }
+  );
+};
+pe.displayName = "KonstructImageUpload";
+export {
+  pe as ImageUpload
+};