@konstructio/ui 0.1.2-alpha.5 → 0.1.2-alpha.51

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-N2OStZoU.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,45 +1,50 @@
-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-slate-400",
     "px-2.5",
     "py-2",
     "rounded",
     "text-slate-800",
     "text-sm",
-    "w-full",
     "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",
-    "data-[error=false]:kubefirst:focus:ring-kubefirst-primary",
-    "dark:bg-slate-800",
-    "dark:border-slate-600",
-    "dark:disabled:bg-slate-900",
+    "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",
-    "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: {
       variant: {
         default: "",
-        error: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 dark:border-red-500 pr-8 focus-visible:ring-transparent"
+        error: [
+          "pr-8",
+          "border-red-600",
+          "focus-visible:border-red-600",
+          "focus-visible:ring-transparent",
+          "dark:border-red-500"
+        ]
       }
     },
     defaultVariants: {
@@ -48,5 +53,5 @@ const a = r(
   }
 );
 export {
-  a as inputVariants
+  r as inputVariants
 };

package/dist/components/Loading/Loading.js

@@ -1,13 +1,7 @@
 import { jsx as e } from "react/jsx-runtime";
 import { cn as c } from "../../utils/index.js";
 import { loadingVariants as i } from "./Loading.variants.js";
-import { c as t } from "../../createLucideIcon-D2CN7Ma9.js";
-/**
-* @license lucide-react v0.545.0 - ISC
-*
-* This source code is licensed under the ISC license.
-* See the LICENSE file in the root directory of this source tree.
-*/
+import { c as t } from "../../createLucideIcon-D4r5Phnh.js";
 const d = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], m = t("loader-circle", d), n = ({ className: o, theme: a, ...r }) => /* @__PURE__ */ e(
   m,
   {

package/dist/components/Modal/Modal.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
-import "../../index-BITvcJAz.js";
-import { M as d } from "../../Modal-D-NOEWMX.js";
+import "react-dom";
+import { M as d } from "../../Modal-CjC-CIJ8.js";
 import "./components/Header/Header.js";
 import "./components/Body/Body.js";
 import "./components/Footer/Footer.js";

package/dist/components/Modal/components/Body/Body.js

@@ -1,5 +1,5 @@
 import { jsx as r } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
+import { S as n } from "../../../../index-BvoZGpli.js";
 import { cn as e } from "../../../../utils/index.js";
 const i = ({ children: o, asChild: t, className: m }) => /* @__PURE__ */ r(t ? n : "div", { className: e("flex-1", m), children: o });
 export {

package/dist/components/Modal/components/Footer/Footer.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
+import { S as n } from "../../../../index-BvoZGpli.js";
 import { cn as e } from "../../../../utils/index.js";
 const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
 export {

package/dist/components/Modal/components/Header/Header.js

@@ -1,5 +1,5 @@
 import { jsx as m } from "react/jsx-runtime";
-import { S as n } from "../../../../index-DQH6odE9.js";
+import { S as n } from "../../../../index-BvoZGpli.js";
 import { cn as e } from "../../../../utils/index.js";
 const a = ({ children: o, asChild: r, className: t }) => /* @__PURE__ */ m(r ? n : "div", { className: e("border-zinc-200", t), children: o });
 export {

package/dist/components/Modal/components/Wrapper/Wrapper.js

@@ -1,11 +1,11 @@
 import "react/jsx-runtime";
-import "../../../../index-DBbEcSUG.js";
+import "../../../../index-BKjcReYh.js";
 import "react";
-import "../../../../Combination-VYaRRJBZ.js";
-import { W as f } from "../../../../Modal-D-NOEWMX.js";
+import "../../../../Combination-BtmnusWq.js";
+import { W as f } from "../../../../Modal-CjC-CIJ8.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../x-4F_5p77m.js";
+import "../../../../x-Eoa9FJjA.js";
 export {
   f as Wrapper
 };

package/dist/components/Modal/components/index.js

@@ -1,7 +1,7 @@
 import { Body as e } from "./Body/Body.js";
 import { Footer as t } from "./Footer/Footer.js";
 import { Header as m } from "./Header/Header.js";
-import { W as a } from "../../../Modal-D-NOEWMX.js";
+import { W as a } from "../../../Modal-CjC-CIJ8.js";
 export {
   e as Body,
   t as Footer,

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

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

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

@@ -0,0 +1,30 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r([
+  "flex",
+  "flex-col",
+  "w-full",
+  "relative",
+  "cursor-pointer"
+]), o = r(["cursor-pointer", "mb-1", "select-none"]), a = r([
+  "min-h-9",
+  "border",
+  "cursor-pointer",
+  "duration-250",
+  "ease-in-out",
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-1",
+  "rounded-md",
+  "transition-all",
+  "w-full",
+  "border-gray-200",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  o as labelVariants,
+  a as multiSelectDropdownVariants,
+  t as wrapperVariants
+};

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

@@ -0,0 +1,30 @@
+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: o,
+  isSelected: t,
+  className: m
+}) => {
+  const { onSelectOption: a } = s();
+  return /* @__PURE__ */ i(
+    "li",
+    {
+      role: "option",
+      "data-theme": o,
+      className: c(p({ isSelected: t }), m),
+      onClick: () => a(r),
+      children: [
+        /* @__PURE__ */ e(n, { variant: "body2", children: r.label }),
+        r.badge && /* @__PURE__ */ e(l, { label: r.badge })
+      ]
+    }
+  );
+};
+export {
+  x as Item
+};