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

package/dist/components/Input/Input.js

@@ -1,207 +1,274 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import l, { forwardRef as x, useId as _, useRef as I, useState as W } from "react";
-import { cn as u } from "../../utils/index.js";
+import { jsxs as h, jsx as s } from "react/jsx-runtime";
+import p, { forwardRef as y, useId as I, useRef as L, useState as W } from "react";
+import { cn as i } from "../../utils/index.js";
 import { inputVariants as $ } from "./Input.variants.js";
-import { SearchIcon as L } from "../../assets/icons/components/Search.js";
-import { Warning as T } from "../../assets/icons/components/Warning.js";
-import { P as i } from "../../index-BOE_3f_Z.js";
-function h() {
-  return h = Object.assign || function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var e in a)
-        Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
+import { Typography as u } from "../Typography/Typography.js";
+import { SearchIcon as T } from "../../assets/icons/components/Search.js";
+import { Warning as S } from "../../assets/icons/components/Warning.js";
+import { P as l } from "../../index-BOE_3f_Z.js";
+function g() {
+  return g = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n)
+        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
     }
     return t;
-  }, h.apply(this, arguments);
+  }, g.apply(this, arguments);
 }
-function S(t, n) {
+function C(t, r) {
   if (t == null) return {};
-  var a = C(t, n), e, r;
+  var n = M(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < o.length; r++)
-      e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < a.length; o++)
+      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
   }
-  return a;
+  return n;
 }
-function C(t, n) {
+function M(t, r) {
   if (t == null) return {};
-  var a = {}, e = Object.keys(t), r, o;
-  for (o = 0; o < e.length; o++)
-    r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
-  return a;
+  var n = {}, e = Object.keys(t), o, a;
+  for (a = 0; a < e.length; a++)
+    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
+  return n;
 }
-var v = x(function(t, n) {
-  var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = S(t, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", h({
-    ref: n,
+var x = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = C(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", g({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ p.createElement("path", {
     d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"
-  }), /* @__PURE__ */ l.createElement("line", {
+  }), /* @__PURE__ */ p.createElement("line", {
     x1: "1",
     y1: "1",
     x2: "23",
     y2: "23"
   }));
 });
-v.propTypes = {
-  color: i.string,
-  size: i.oneOfType([i.string, i.number])
+x.propTypes = {
+  color: l.string,
+  size: l.oneOfType([l.string, l.number])
 };
-v.displayName = "EyeOff";
-function g() {
-  return g = Object.assign || function(t) {
-    for (var n = 1; n < arguments.length; n++) {
-      var a = arguments[n];
-      for (var e in a)
-        Object.prototype.hasOwnProperty.call(a, e) && (t[e] = a[e]);
+x.displayName = "EyeOff";
+function v() {
+  return v = Object.assign || function(t) {
+    for (var r = 1; r < arguments.length; r++) {
+      var n = arguments[r];
+      for (var e in n)
+        Object.prototype.hasOwnProperty.call(n, e) && (t[e] = n[e]);
     }
     return t;
-  }, g.apply(this, arguments);
+  }, v.apply(this, arguments);
 }
-function M(t, n) {
+function R(t, r) {
   if (t == null) return {};
-  var a = R(t, n), e, r;
+  var n = A(t, r), e, o;
   if (Object.getOwnPropertySymbols) {
-    var o = Object.getOwnPropertySymbols(t);
-    for (r = 0; r < o.length; r++)
-      e = o[r], !(n.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (a[e] = t[e]);
+    var a = Object.getOwnPropertySymbols(t);
+    for (o = 0; o < a.length; o++)
+      e = a[o], !(r.indexOf(e) >= 0) && Object.prototype.propertyIsEnumerable.call(t, e) && (n[e] = t[e]);
   }
-  return a;
+  return n;
 }
-function R(t, n) {
+function A(t, r) {
   if (t == null) return {};
-  var a = {}, e = Object.keys(t), r, o;
-  for (o = 0; o < e.length; o++)
-    r = e[o], !(n.indexOf(r) >= 0) && (a[r] = t[r]);
-  return a;
+  var n = {}, e = Object.keys(t), o, a;
+  for (a = 0; a < e.length; a++)
+    o = e[a], !(r.indexOf(o) >= 0) && (n[o] = t[o]);
+  return n;
 }
-var y = x(function(t, n) {
-  var a = t.color, e = a === void 0 ? "currentColor" : a, r = t.size, o = r === void 0 ? 24 : r, c = M(t, ["color", "size"]);
-  return /* @__PURE__ */ l.createElement("svg", g({
-    ref: n,
+var w = y(function(t, r) {
+  var n = t.color, e = n === void 0 ? "currentColor" : n, o = t.size, a = o === void 0 ? 24 : o, c = R(t, ["color", "size"]);
+  return /* @__PURE__ */ p.createElement("svg", v({
+    ref: r,
     xmlns: "http://www.w3.org/2000/svg",
-    width: o,
-    height: o,
+    width: a,
+    height: a,
     viewBox: "0 0 24 24",
     fill: "none",
     stroke: e,
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round"
-  }, c), /* @__PURE__ */ l.createElement("path", {
+  }, c), /* @__PURE__ */ p.createElement("path", {
     d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"
-  }), /* @__PURE__ */ l.createElement("circle", {
+  }), /* @__PURE__ */ p.createElement("circle", {
     cx: "12",
     cy: "12",
     r: "3"
   }));
 });
-y.propTypes = {
-  color: i.string,
-  size: i.oneOfType([i.string, i.number])
+w.propTypes = {
+  color: l.string,
+  size: l.oneOfType([l.string, l.number])
 };
-y.displayName = "Eye";
-const A = x(
+w.displayName = "Eye";
+const B = y(
   ({
     className: t,
-    error: n,
-    isRequired: a = !1,
-    isSearch: e = !1,
-    label: r,
-    labelClassName: o,
-    name: c,
-    theme: O,
+    error: r,
+    helperText: n,
+    helperTextClassName: e,
+    isRequired: o = !1,
+    isSearch: a = !1,
+    label: c,
+    labelClassName: O,
+    name: j,
+    theme: k,
     type: f = "text",
-    helperText: w,
-    helperTextClassName: j,
-    ...k
-  }, N) => {
-    const b = _(), P = I(f === "password"), [d, E] = W(() => f !== "password"), p = typeof n == "string" && n.length >= 0, z = d ? y : v;
-    return /* @__PURE__ */ m("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": O, children: [
-      r ? /* @__PURE__ */ m(
-        "label",
+    ...N
+  }, P) => {
+    const b = I(), E = L(f === "password"), [d, z] = W(() => f !== "password"), m = typeof r == "string" && r.length >= 0, _ = d ? w : x;
+    return /* @__PURE__ */ h("div", { className: "flex flex-col gap-2 w-full relative", "data-theme": k, children: [
+      c ? /* @__PURE__ */ h(
+        u,
         {
+          component: "label",
+          variant: "labelLarge",
           htmlFor: b,
-          className: u(
-            "cursor-pointer text-slate-500 flex gap-1 text-sm font-medium dark:text-slate-50 kubefirst-dark:text-slate-50",
-            o
+          className: i(
+            "cursor-pointer",
+            "flex",
+            "gap-1",
+            "text-sm",
+            "font-medium",
+            O
           ),
           children: [
-            r,
+            c,
             " ",
-            a && /* @__PURE__ */ s("span", { className: "text-red-600 text-xs mt-0.5", children: "*" })
+            o && /* @__PURE__ */ s(
+              u,
+              {
+                component: "span",
+                className: i(
+                  "text-red-600",
+                  "dark:text-red-500",
+                  "text-xs",
+                  "mt-0.5"
+                ),
+                children: "*"
+              }
+            )
           ]
         }
       ) : null,
-      /* @__PURE__ */ m("div", { className: "relative", children: [
-        e ? /* @__PURE__ */ s(
+      /* @__PURE__ */ h("div", { className: "relative", children: [
+        a ? /* @__PURE__ */ s(
           "i",
           {
-            className: u(
-              "absolute left-2.5 top-1/2 -translate-y-[50%] text-slate-400",
+            className: i(
+              "absolute",
+              "left-2.5",
+              "top-1/2",
+              "-translate-y-[50%]",
+              "text-slate-400",
+              "dark:text-metal-400",
               {
-                "text-red-700": p
+                "text-red-700": m
               }
             ),
-            children: /* @__PURE__ */ s(L, { className: "w-5 h-5" })
+            children: /* @__PURE__ */ s(T, { className: "w-5 h-5" })
           }
         ) : null,
         /* @__PURE__ */ s(
           "input",
           {
-            id: r ? b : void 0,
-            ref: N,
-            name: c,
-            type: d ? P.current ? "text" : f : "password",
-            "data-error": p,
-            className: u(
+            id: c ? b : void 0,
+            ref: P,
+            name: j,
+            type: d ? E.current ? "text" : f : "password",
+            "data-error": m,
+            className: i(
               $({
                 className: t,
-                variant: p ? "error" : "default"
+                variant: m ? "error" : "default"
               }),
               {
-                "pr-10": f === "password" || p,
-                "pl-8": e
+                "pr-10": f === "password" || m,
+                "pl-8": a
               }
             ),
-            ...k
+            ...N
           }
         ),
-        p ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-red-700 dark:text-red-500 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(T, { className: "w-5 h-5" }) }) : null,
-        f === "password" && !n ? /* @__PURE__ */ s("i", { className: "absolute right-3 text-slate-400 top-1/2 -translate-y-[50%]", children: /* @__PURE__ */ s(
-          z,
+        m ? /* @__PURE__ */ s(
+          "i",
           {
-            className: "w-5 h-5 cursor-pointer",
-            onClick: () => E(!d)
+            className: i(
+              "-translate-y-[50%]",
+              "absolute",
+              "right-3",
+              "text-red-700",
+              "top-1/2",
+              "dark:text-red-500"
+            ),
+            children: /* @__PURE__ */ s(S, { className: "w-5 h-5" })
           }
-        ) }) : null
+        ) : null,
+        f === "password" && !r ? /* @__PURE__ */ s(
+          "i",
+          {
+            className: i(
+              "-translate-y-[50%]",
+              "absolute",
+              "right-3",
+              "text-slate-400",
+              "top-1/2"
+            ),
+            children: /* @__PURE__ */ s(
+              _,
+              {
+                className: "w-5 h-5 cursor-pointer",
+                onClick: () => z(!d)
+              }
+            )
+          }
+        ) : null
       ] }),
-      n ? /* @__PURE__ */ s("span", { className: "text-xs text-red-700 dark:text-red-500", children: n }) : null,
-      !n && w ? /* @__PURE__ */ s(
-        "span",
+      r ? /* @__PURE__ */ s(
+        u,
+        {
+          component: "span",
+          className: i(
+            "text-xs",
+            "tracking-normal",
+            "text-red-700",
+            "dark:text-red-400"
+          ),
+          children: r
+        }
+      ) : null,
+      !r && n ? /* @__PURE__ */ s(
+        u,
         {
-          className: u(
-            "text-xs text-slate-600 dark:text-slate-200 kubefirst-dark:text-slate-200",
-            j
+          component: "span",
+          variant: "body1",
+          className: i(
+            "text-xs",
+            "text-slate-600",
+            "dark:text-slate-200",
+            "select-none",
+            "tracking-normal",
+            e
           ),
-          children: w
+          children: n
         }
       ) : null
     ] });
   }
 );
-A.displayName = "KonstructInput";
+B.displayName = "KonstructInput";
 export {
-  A as Input
+  B as Input
 };

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

@@ -1,41 +1,38 @@
-import { c as r } from "../../index-D29mdTf5.js";
-const a = r(
+import { c as e } from "../../index-D29mdTf5.js";
+const r = e(
   [
     "bg-white",
-    "border-gray-300",
     "border",
-    "disabled:bg-gray-50",
+    "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",
-    "placeholder:text-zinc-400",
-    "dark:placeholder:text-metal-300",
     "px-2.5",
     "py-2",
     "rounded",
     "text-slate-800",
     "text-sm",
-    "w-full",
     "transition-all",
-    "focus-visible:border-transparent",
+    "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",
-    "data-[error=false]:kubefirst:focus:ring-kubefirst-primary",
     "dark:bg-metal-800",
     "dark:border-metal-700",
-    "dark:disabled:bg-slate-900",
+    "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",
-    "kubefirst-dark:bg-slate-800",
-    "kubefirst-dark:border-slate-600",
-    "kubefirst-dark:disabled:bg-slate-900",
-    "kubefirst-dark:disabled:text-slate-400",
-    "kubefirst-dark:text-slate-50",
-    "kubefirst-dark:text-white"
+    "dark:text-white"
   ],
   {
     variants: {
@@ -46,8 +43,7 @@ const a = r(
           "border-red-600",
           "focus-visible:border-red-600",
           "focus-visible:ring-transparent",
-          "dark:border-red-500",
-          "kubefirst-dark:border-red-500"
+          "dark:border-red-500"
         ]
       }
     },
@@ -57,5 +53,5 @@ const a = r(
   }
 );
 export {
-  a as inputVariants
+  r as inputVariants
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -1,34 +1,34 @@
 import { jsx as r } from "react/jsx-runtime";
 import { forwardRef as n } from "react";
-import { MultiSelectDropdownProvider as a } from "./contexts/MultiSelectDropdown.provider.js";
-import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
-const u = n(
+import { MultiSelectDropdownProvider as s } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as u } from "./components/Wrapper/Wrapper.js";
+const a = n(
   ({
-    options: t,
+    isLoading: t,
     multiselect: e,
-    value: p,
-    onChange: i,
-    onBlur: l,
     name: o,
-    isLoading: d,
-    noOptionsText: m,
+    noOptionsText: p,
+    options: i,
+    value: l,
+    onChange: d,
+    onBlur: m,
     ...f
   }, c) => /* @__PURE__ */ r(
-    a,
+    s,
     {
-      defaultOptions: t,
+      defaultOptions: i,
       multiselect: e,
-      value: p,
-      onChange: i,
-      onBlur: l,
+      value: l,
+      onChange: d,
+      onBlur: m,
       name: o,
-      isLoading: d,
-      noOptionsText: m,
-      children: /* @__PURE__ */ r(s, { ref: c, ...f, name: o })
+      isLoading: t,
+      noOptionsText: p,
+      children: /* @__PURE__ */ r(u, { ref: c, name: o, ...f })
     }
   )
 );
-u.displayName = "MultiSelectDropdown";
+a.displayName = "KonstructMultiSelectDropdown";
 export {
-  u as MultiSelectDropdown
+  a as MultiSelectDropdown
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.variants.js

@@ -1,18 +1,12 @@
-import { c as t } from "../../index-D29mdTf5.js";
-const r = t([
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r([
   "flex",
   "flex-col",
   "w-full",
   "relative",
-  "text-slate-500",
-  "mb-1",
-  "cursor-pointer",
-  "text-sm",
-  "leading-5",
-  "tracking-[0.1px]",
-  "dark:text-slate-50"
-]), a = t(["cursor-pointer", "mb-1"]), o = t([
-  "h-9",
+  "cursor-pointer"
+]), o = r(["cursor-pointer", "mb-1", "select-none"]), a = r([
+  "min-h-9",
   "border",
   "cursor-pointer",
   "duration-250",
@@ -25,10 +19,12 @@ const r = t([
   "rounded-md",
   "transition-all",
   "w-full",
-  "border-gray-200"
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
 ]);
 export {
-  a as labelVariants,
-  o as multiSelectDropdownVariants,
-  r as wrapperVariants
+  o as labelVariants,
+  a as multiSelectDropdownVariants,
+  t as wrapperVariants
 };

package/dist/components/MultiSelectDropdown/components/Item/Item.js

@@ -1,38 +1,30 @@
-import { jsxs as m, jsx as t } from "react/jsx-runtime";
-import { cn as i } from "../../../../utils/index.js";
-import { wrapperVariants as s } from "./Item.variants.js";
-import { useMultiSelectDropdown as c } from "../../contexts/MultiSelectDropdown.hook.js";
-import { Typography as p } from "../../../Typography/Typography.js";
-import { Tag as n } from "../../../Tag/Tag.js";
-const u = ({
+import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { Badge as l } from "../../../Badge/Badge.js";
+import { Typography as n } from "../../../Typography/Typography.js";
+import { cn as c } from "../../../../utils/index.js";
+import { itemVariants as p } from "./Item.variants.js";
+import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
+const x = ({
   option: r,
-  theme: e,
-  isSelected: a,
-  className: o
+  theme: o,
+  isSelected: t,
+  className: m
 }) => {
-  const { onSelectOption: l } = c();
-  return /* @__PURE__ */ m(
+  const { onSelectOption: a } = s();
+  return /* @__PURE__ */ i(
     "li",
     {
       role: "option",
-      "data-theme": e,
-      className: i(s({ isSelected: a }), o),
-      onClick: () => l(r),
+      "data-theme": o,
+      className: c(p({ isSelected: t }), m),
+      onClick: () => a(r),
       children: [
-        /* @__PURE__ */ t(p, { variant: "body2", className: "text-slate-800", children: r.label }),
-        r.tagLabel && /* @__PURE__ */ t(
-          n,
-          {
-            id: r.id,
-            label: r.tagLabel,
-            color: r.tagColor,
-            isSelected: a
-          }
-        )
+        /* @__PURE__ */ e(n, { variant: "body2", children: r.label }),
+        r.badge && /* @__PURE__ */ e(l, { label: r.badge })
       ]
     }
   );
 };
 export {
-  u as Item
+  x as Item
 };

package/dist/components/MultiSelectDropdown/components/Item/Item.variants.js

@@ -1,5 +1,5 @@
 import { c as e } from "../../../../index-D29mdTf5.js";
-const r = e(
+const t = e(
   [
     "cursor-pointer",
     "py-1.5",
@@ -7,13 +7,13 @@ const r = e(
     "last:pb-2",
     "first:pt-2",
     "h-full",
-    "hover:bg-gray-50",
-    "focus:bg-gray-50",
-    "dark:hover:bg-slate-700",
-    "dark:focus:bg-slate-700",
     "flex",
     "items-center",
-    "gap-4"
+    "gap-2",
+    "hover:bg-gray-50",
+    "focus:bg-gray-50",
+    "dark:hover:bg-metal-700",
+    "dark:focus:bg-metal-700"
   ],
   {
     variants: {
@@ -25,7 +25,7 @@ const r = e(
     compoundVariants: [
       {
         isSelected: !0,
-        class: ["bg-slate-50"]
+        class: ["bg-slate-50", "dark:bg-metal-700"]
       }
     ],
     defaultVariants: {
@@ -34,5 +34,5 @@ const r = e(
   }
 );
 export {
-  r as wrapperVariants
+  t as itemVariants
 };