@konstructio/ui 0.1.2-alpha.46 → 0.1.2-alpha.48

package/dist/assets/icons/index.js

@@ -0,0 +1,7 @@
+import { S as a } from "../../loader-juvMSJ9L.js";
+import * as e from "react";
+const L = (t) => /* @__PURE__ */ e.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M8.16667 0.8225L7.34417 0L4.08333 3.26083L0.8225 0L0 0.8225L3.26083 4.08333L0 7.34417L0.8225 8.16667L4.08333 4.90583L7.34417 8.16667L8.16667 7.34417L4.90583 4.08333L8.16667 0.8225Z", fill: "#364153" }));
+export {
+  a as Loader,
+  L as X
+};

package/dist/components/Badge/Badge.js

@@ -1,73 +1,74 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { useRef as v, useState as y, useCallback as N, useEffect as S } from "react";
-import { S as w } from "../../loader-juvMSJ9L.js";
-import { cn as u } from "../../utils/index.js";
-import { buttonDismissVariants as x, badgeVariants as V } from "./Badge.variants.js";
-import { S as D } from "../../index-BvoZGpli.js";
-import { X as j } from "../../x-BXShoIAM.js";
-const X = ({
-  className: c,
-  dismissible: p = !1,
-  isSelectable: b = !0,
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { useRef as y, useState as w, useCallback as S, useEffect as x } from "react";
+import { S as V } from "../../loader-juvMSJ9L.js";
+import { cn as c } from "../../utils/index.js";
+import { buttonDismissVariants as D, badgeVariants as j } from "./Badge.variants.js";
+import { S as p } from "../../index-BvoZGpli.js";
+import { X as E } from "../../x-BXShoIAM.js";
+const q = ({
+  className: b,
+  dismissible: f = !1,
+  isSelectable: h = !0,
   label: r,
   leftIcon: i,
-  loading: o = !1,
-  size: n,
-  variant: l,
+  loading: n = !1,
+  rightIcon: o,
+  size: l,
+  variant: m,
   onClick: e,
-  onDismiss: m
+  onDismiss: d
 }) => {
-  const s = v(null), [f, h] = y("visible"), g = N(
+  const a = y(null), [v, N] = w("visible"), g = S(
     (t) => {
-      t.stopPropagation(), m?.(), h("hidden");
+      t.stopPropagation(), d?.(), N("hidden");
     },
-    [m]
+    [d]
   );
-  return S(() => {
+  return x(() => {
     const t = new AbortController();
-    return s.current?.addEventListener(
+    return a.current?.addEventListener(
       "animationend",
       () => {
-        s.current?.style.setProperty("display", "none"), s.current?.remove();
+        a.current?.style.setProperty("display", "none"), a.current?.remove();
       },
       { signal: t.signal }
     ), () => t.abort();
-  }, []), /* @__PURE__ */ d(
+  }, []), /* @__PURE__ */ u(
     "span",
     {
-      ref: s,
-      className: u(V({ variant: l, size: n, className: c }), {
-        "select-none": !b,
+      ref: a,
+      className: c(j({ variant: m, size: l, className: b }), {
+        "select-none": !h,
         "cursor-pointer": e
       }),
       role: e ? "button" : void 0,
       onClick: e,
       tabIndex: e ? 0 : void 0,
       "aria-label": e ? `${r} badge` : void 0,
-      "aria-busy": o,
+      "aria-busy": n,
       "aria-live": "polite",
-      "data-state": f,
+      "data-state": v,
       children: [
-        o && /* @__PURE__ */ a(w, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
-        i ? /* @__PURE__ */ a(D, { className: "h-3 w-3", children: i }) : null,
+        n && /* @__PURE__ */ s(V, { className: "h-3 w-3 animate-spin animate-duration-time-2" }),
+        i ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: i }) : null,
         r,
-        p && /* @__PURE__ */ d(
+        f ? /* @__PURE__ */ u(
           "button",
           {
             type: "button",
-            className: u(x({ size: n, variant: l })),
+            className: c(D({ size: l, variant: m })),
             onClick: g,
             "aria-label": "Dismiss",
             children: [
-              /* @__PURE__ */ a(j, { className: "h-full w-full" }),
-              /* @__PURE__ */ a("span", { className: "sr-only", children: "Dismiss" })
+              /* @__PURE__ */ s(E, { className: "h-full w-full" }),
+              /* @__PURE__ */ s("span", { className: "sr-only", children: "Dismiss" })
             ]
           }
-        )
+        ) : o ? /* @__PURE__ */ s(p, { className: "h-3 w-3", children: o }) : null
       ]
     }
   );
 };
 export {
-  X as Badge
+  q as Badge
 };

package/dist/components/Counter/Counter.js

@@ -0,0 +1,210 @@
+import { jsxs as f, jsx as u } from "react/jsx-runtime";
+import { R as j } from "../../index-BKjcReYh.js";
+import p, { forwardRef as g, useId as $, useCallback as k } from "react";
+import { cn as d } from "../../utils/index.js";
+import { labelVariants as T, buttonVariants as N, counterVariants as W } from "./Counter.variants.js";
+import { Typography as V } from "../Typography/Typography.js";
+import { P as a } from "../../index-BOE_3f_Z.js";
+function v() {
+  return v = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, v.apply(this, arguments);
+}
+function M(e, o) {
+  if (e == null) return {};
+  var r = R(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function R(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var O = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = M(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+O.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+O.displayName = "Minus";
+function b() {
+  return b = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var r = arguments[o];
+      for (var t in r)
+        Object.prototype.hasOwnProperty.call(r, t) && (e[t] = r[t]);
+    }
+    return e;
+  }, b.apply(this, arguments);
+}
+function C(e, o) {
+  if (e == null) return {};
+  var r = B(e, o), t, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(e, t) && (r[t] = e[t]);
+  }
+  return r;
+}
+function B(e, o) {
+  if (e == null) return {};
+  var r = {}, t = Object.keys(e), n, i;
+  for (i = 0; i < t.length; i++)
+    n = t[i], !(o.indexOf(n) >= 0) && (r[n] = e[n]);
+  return r;
+}
+var w = g(function(e, o) {
+  var r = e.color, t = r === void 0 ? "currentColor" : r, n = e.size, i = n === void 0 ? 24 : n, l = C(e, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", b({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: t,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, l), /* @__PURE__ */ p.createElement("line", {
+    x1: "12",
+    y1: "5",
+    x2: "12",
+    y2: "19"
+  }), /* @__PURE__ */ p.createElement("line", {
+    x1: "5",
+    y1: "12",
+    x2: "19",
+    y2: "12"
+  }));
+});
+w.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+w.displayName = "Plus";
+const J = g(
+  ({
+    canDecrement: e = !0,
+    canIncrement: o = !0,
+    className: r,
+    decrementButtonClassName: t,
+    incrementButtonClassName: n,
+    isRequired: i,
+    label: l,
+    max: y = -1 / 0,
+    min: h = 1 / 0,
+    name: x,
+    theme: P,
+    value: z,
+    onChange: m
+  }, I) => {
+    const _ = $(), s = z ?? 0, E = k(() => {
+      let c = 0;
+      h === 1 / 0 ? c = s - 1 : c = Math.max(h, s - 1), m?.({ target: { value: c } });
+    }, [s, h, m]), L = k(() => {
+      let c = 0;
+      y === -1 / 0 ? c = s + 1 : c = Math.min(y, s + 1), m?.({ target: { value: c } });
+    }, [s, y, m]);
+    return /* @__PURE__ */ f("div", { className: "flex flex-col gap-1", "data-theme": P, children: [
+      l ? /* @__PURE__ */ f(
+        V,
+        {
+          component: "label",
+          htmlFor: x ?? _,
+          variant: "labelLarge",
+          className: d(T()),
+          children: [
+            "Number of nodes",
+            " ",
+            i && /* @__PURE__ */ u("span", { className: "text-red-600 dark:text-red-500", children: "*" })
+          ]
+        }
+      ) : null,
+      /* @__PURE__ */ f("div", { className: "flex items-center", role: "presentation", children: [
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: E,
+            className: d(
+              N({
+                button: "rigth",
+                className: t
+              })
+            ),
+            disabled: !e,
+            children: [
+              /* @__PURE__ */ u(O, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Decrement" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ u(
+          "input",
+          {
+            ref: I,
+            type: "number",
+            value: s,
+            name: x,
+            className: d(W({ className: r })),
+            readOnly: !0,
+            "aria-label": typeof l == "string" ? l : "number input"
+          }
+        ),
+        /* @__PURE__ */ f(
+          "button",
+          {
+            type: "button",
+            onClick: L,
+            className: d(
+              N({
+                button: "left",
+                className: n
+              })
+            ),
+            disabled: !o,
+            children: [
+              /* @__PURE__ */ u(w, { className: "w-4 h-4" }),
+              /* @__PURE__ */ u(j, { children: "Increment" })
+            ]
+          }
+        )
+      ] })
+    ] });
+  }
+);
+export {
+  J as Counter
+};

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/ImageUpload/ImageUpload.js

@@ -24,19 +24,19 @@ const pe = ({
   label: p = "Item logo",
   labelClassName: P,
   name: A,
-  onChange: N,
+  onChange: k,
   onRemove: H,
-  status: k = t.Default,
+  status: N = 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);
+  const U = ee(), f = j(null), n = j(null), [W, c] = g(N), [_, 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 a = N !== t.Default ? N : 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) => {
@@ -46,11 +46,11 @@ const pe = ({
       }
       return r.type === d;
     })) {
-      c(t.Error), N?.(i);
+      c(t.Error), k?.(i);
       return;
     }
     if (r.size > K) {
-      c(t.Error), N?.(i);
+      c(t.Error), k?.(i);
       return;
     }
     c(t.Uploading), C(r.name), G(Q(r.size));
@@ -59,7 +59,7 @@ const pe = ({
       B(v.result), n.current = setTimeout(() => {
         c(t.Complete);
       }, 500);
-    }, v.readAsDataURL(r), N?.(i);
+    }, v.readAsDataURL(r), k?.(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 = () => {
@@ -92,7 +92,7 @@ const pe = ({
             ),
             children: [
               p,
-              L && /* @__PURE__ */ e("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
+              L && /* @__PURE__ */ e("span", { className: "text-red-600 dark:text-red-500 text-xs mt-0.5", children: "*" })
             ]
           }
         ),
@@ -195,7 +195,7 @@ const pe = ({
               children: Y
             }
           ) }),
-          (a === t.Default || a === t.Error) && /* @__PURE__ */ e("div", { className: "shrink-0 w-[calc(100px+1rem)]" }),
+          (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(

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

@@ -15,7 +15,7 @@ const a = t(
     }
   }
 ), r = t(
-  ["flex", "gap-2", "h-[60px]", "items-center", "w-full"],
+  ["flex", "gap-2", "h-15", "items-center", "w-full"],
   {
     variants: {
       status: {