@konstructio/ui 0.1.2-alpha.4 → 0.1.2-alpha.41

package/dist/components/Dropdown/hooks/useNavigationList.js

@@ -1,62 +1,50 @@
-import { useRef as g, useEffect as l } from "react";
-import { useDropdownContext as d } from "../contexts/dropdown.hook.js";
-const w = ({
-  inputRef: s,
-  searchable: i,
-  ulRef: e,
-  wrapperInputRef: u,
-  wrapperRef: a
+import { useRef as g, useEffect as a } from "react";
+import { useDropdownContext as k } from "../contexts/dropdown.hook.js";
+const A = ({
+  searchable: o,
+  ulRef: n,
+  wrapperInputRef: e,
+  filteredOptions: f
 }) => {
-  const r = g(0), { isOpen: b } = d();
-  l(() => {
-    const o = e.current?.querySelectorAll("li") ?? [], t = Array.from(o).filter(
-      (n) => n.getAttribute("data-action") !== "true"
-    ), c = new AbortController(), f = () => {
+  const r = g(0), { isOpen: s } = k();
+  a(() => {
+    const m = n.current?.querySelectorAll("li") ?? [], t = Array.from(m).filter(
+      (c) => c.getAttribute("data-action") !== "true"
+    ), u = new AbortController(), i = () => {
       r.current < t.length - 1 ? (r.current = r.current + 1, t[r.current].focus()) : (r.current = 0, t[0].focus());
-    }, m = () => {
-      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, s?.current && i ? s.current.focus() : u.current?.focus());
+    }, l = () => {
+      r.current > 0 ? (r.current = r.current - 1, t[r.current].focus()) : (r.current = 0, e?.current && o ? e.current.querySelector("input")?.focus() : e.current?.focus());
     };
-    return e.current?.addEventListener(
+    return n.current?.addEventListener(
       "keydown",
-      (n) => {
-        switch (n.preventDefault(), n.key) {
+      (c) => {
+        switch (c.preventDefault(), c.key) {
           case "ArrowDown": {
-            f();
+            i();
             break;
           }
           case "Tab": {
-            n.shiftKey ? m() : f();
+            c.shiftKey ? l() : i();
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? u.current?.focus() : m();
+            r.current === 0 ? e.current?.focus() : l();
             break;
           }
           case "Enter": {
-            t[r.current].querySelector("button")?.click();
+            t[r.current]?.click();
             break;
           }
         }
       },
-      { signal: c.signal }
+      { signal: u.signal }
     ), () => {
-      c.abort();
+      u.abort();
     };
-  }, [e, r, u, s, i]), l(() => {
-    const o = new AbortController();
-    return a.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (e.current?.querySelectorAll("li") ?? []).forEach((c) => c.blur());
-      },
-      { signal: o.signal }
-    ), () => {
-      o.abort();
-    };
-  }, [e, a]), l(() => {
-    b || (r.current = 0);
-  }, [b]);
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
 };
 export {
-  w as useNavigationUlList
+  A as useNavigationUlList
 };

package/dist/components/DropdownButton/DropdownButton.js

@@ -2,7 +2,7 @@ import { jsxs as h, jsx as p } from "react/jsx-runtime";
 import v, { forwardRef as x, useState as C, useRef as w, useCallback as b, useEffect as E } from "react";
 import { cn as l } from "../../utils/index.js";
 import { Button as P } from "../Button/Button.js";
-import { P as c } from "../../index-h-Ul0anl.js";
+import { P as c } from "../../index--V_ZsiQe.js";
 function m() {
   return m = Object.assign || function(e) {
     for (var i = 1; i < arguments.length; i++) {

package/dist/components/Filter/Filter.variants.js

@@ -9,8 +9,8 @@ const a = t(["flex", "gap-8", "items-center"]), n = t([
   "w-max"
 ]), r = t([
   "text-slate-400",
-  "h-[20px]",
-  "w-[20px]",
+  "h-5",
+  "w-5",
   "transition-all",
   "duration-150",
   "ease-in-out"

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

@@ -5,7 +5,7 @@ import { Checkbox as C } from "../../../Checkbox/Checkbox.js";
 import { cn as n } from "../../../../utils/index.js";
 import { filterButtonIconVariants as y, filterButtonVariants as N } from "../../Filter.variants.js";
 import { useBadgeMultiSelect as B } from "./BadgeMultiSelect.hook.js";
-import { C as O } from "../../../../chevron-down-BLZPftpV.js";
+import { C as O } from "../../../../chevron-down-DgT-uSF9.js";
 const $ = ({
   options: i,
   label: p,

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

@@ -5,7 +5,7 @@ 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-BLZPftpV.js";
+import { C as N } from "../../../../chevron-down-DgT-uSF9.js";
 const R = ({
   label: s,
   position: l = "left",

package/dist/components/Input/Input.js

@@ -4,7 +4,7 @@ import { cn as u } 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-h-Ul0anl.js";
+import { P as i } from "../../index--V_ZsiQe.js";
 function h() {
   return h = Object.assign || function(t) {
     for (var n = 1; n < arguments.length; n++) {

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

@@ -19,6 +19,7 @@ const a = r(
     "text-sm",
     "w-full",
     "transition-all",
+    "focus-visible:border-transparent",
     "data-[error=false]:dark:focus:ring-aurora-500",
     "data-[error=false]:focus:ring-aurora-500",
     "data-[error=false]:kubefirst:focus:ring-kubefirst-primary",
@@ -39,7 +40,7 @@ const a = r(
     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: "border-red-600 kubefirst-dark:border-red-500 dark:border-red-500 pr-8 focus-visible:border-red-600 focus-visible:ring-transparent"
       }
     },
     defaultVariants: {

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-DbC6TvM5.js";
-/**
-* @license lucide-react v0.544.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-C9T9HQaa.js";
-import { M as d } from "../../Modal-V67Uz78z.js";
+import "react-dom";
+import { M as d } from "../../Modal-CtAG97Ts.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-BtQfgaSF.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-BtQfgaSF.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-BtQfgaSF.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-iXyXtdgP.js";
+import "../../../../index-DrWQH0QF.js";
 import "react";
-import "../../../../Combination-VYaRRJBZ.js";
-import { W as f } from "../../../../Modal-V67Uz78z.js";
+import "../../../../Combination-BtmnusWq.js";
+import { W as f } from "../../../../Modal-CtAG97Ts.js";
 import "../../../../utils/index.js";
 import "./Wrapper.variants.js";
-import "../../../../x-BPcqkRZd.js";
+import "../../../../x-DPU9OdYH.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-V67Uz78z.js";
+import { W as a } from "../../../Modal-CtAG97Ts.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 a } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as s } from "./components/Wrapper/Wrapper.js";
+const u = n(
+  ({
+    options: t,
+    multiselect: e,
+    value: p,
+    onChange: i,
+    onBlur: l,
+    name: o,
+    isLoading: d,
+    noOptionsText: m,
+    ...f
+  }, c) => /* @__PURE__ */ r(
+    a,
+    {
+      defaultOptions: t,
+      multiselect: e,
+      value: p,
+      onChange: i,
+      onBlur: l,
+      name: o,
+      isLoading: d,
+      noOptionsText: m,
+      children: /* @__PURE__ */ r(s, { ref: c, ...f, name: o })
+    }
+  )
+);
+u.displayName = "MultiSelectDropdown";
+export {
+  u as MultiSelectDropdown
+};

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

@@ -0,0 +1,34 @@
+import { c as t } from "../../index-D29mdTf5.js";
+const r = t([
+  "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",
+  "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"
+]);
+export {
+  a as labelVariants,
+  o as multiSelectDropdownVariants,
+  r as wrapperVariants
+};

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

@@ -0,0 +1,38 @@
+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 = ({
+  option: r,
+  theme: e,
+  isSelected: a,
+  className: o
+}) => {
+  const { onSelectOption: l } = c();
+  return /* @__PURE__ */ m(
+    "li",
+    {
+      role: "option",
+      "data-theme": e,
+      className: i(s({ isSelected: a }), o),
+      onClick: () => l(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
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  u as Item
+};

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

@@ -0,0 +1,38 @@
+import { c as e } from "../../../../index-D29mdTf5.js";
+const r = e(
+  [
+    "cursor-pointer",
+    "py-1.5",
+    "px-2",
+    "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"
+  ],
+  {
+    variants: {
+      isSelected: {
+        true: "",
+        false: ""
+      }
+    },
+    compoundVariants: [
+      {
+        isSelected: !0,
+        class: ["bg-slate-50"]
+      }
+    ],
+    defaultVariants: {
+      isSelected: !1
+    }
+  }
+);
+export {
+  r as wrapperVariants
+};

package/dist/components/MultiSelectDropdown/components/List/List.js

@@ -0,0 +1,37 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { Item as i } from "../Item/Item.js";
+import { wrapperVariants as p } from "./List.variants.js";
+import { useMultiSelectDropdown as c } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as d } from "../../../Typography/Typography.js";
+const y = ({ theme: s }) => {
+  const { options: o, selectedOptions: n, isLoading: r, noOptionsText: a } = c();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": s, className: m(p()), children: r ? /* @__PURE__ */ e(
+    i,
+    {
+      option: { id: "loading", label: "Loading..." },
+      className: "select-none pointer-events-none",
+      isSelected: !1
+    },
+    "loading"
+  ) : o.length > 0 ? o.map((t) => /* @__PURE__ */ e(
+    i,
+    {
+      option: t,
+      isSelected: n.some(
+        (l) => l.id === t.id
+      )
+    },
+    t.id
+  )) : /* @__PURE__ */ e("li", { className: "select-none", children: /* @__PURE__ */ e(
+    d,
+    {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-slate-50 italic px-2 py-2",
+      children: a ?? "No options"
+    }
+  ) }) });
+};
+export {
+  y as List
+};

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

@@ -0,0 +1,23 @@
+import { c as o } from "../../../../index-D29mdTf5.js";
+const a = o([
+  "absolute",
+  "bg-white",
+  "border",
+  "duration-100",
+  "flex",
+  "flex-col",
+  "mt-0.5",
+  "rounded",
+  "shadow-xs",
+  "top-full",
+  "transition-all",
+  "w-full",
+  "z-10",
+  "animate-in",
+  "fade-in-50",
+  "overflow-hidden",
+  "border-gray-200"
+]);
+export {
+  a as wrapperVariants
+};

package/dist/components/MultiSelectDropdown/components/Wrapper/Wrapper.js

@@ -0,0 +1,105 @@
+import "../Item/Item.js";
+import { List as N } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { forwardRef as S, useId as b, useImperativeHandle as C } from "react";
+import { S as O } from "../../../../loader-juvMSJ9L.js";
+import { cn as t } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as k } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as D, multiSelectDropdownVariants as M, wrapperVariants as R } from "../../MultiSelectDropdown.variants.js";
+import { C as y } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useMultiSelectDropdown as I } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Tag as V } from "../../../Tag/Tag.js";
+const j = (r) => /* @__PURE__ */ c.createElement("svg", { width: 9, height: 9, viewBox: "0 0 9 9", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...r }, /* @__PURE__ */ c.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" })), E = S(
+  ({ label: r, labelClassName: p, name: l, placeholder: d = "", theme: h, wrapperClassName: f }, u) => {
+    const o = b(), {
+      selectedOptions: n,
+      isOpen: s,
+      onOpen: w,
+      onRemoveOption: L,
+      inputRef: i,
+      isLoading: g
+    } = I(), { wrapperRef: x, handleOpen: v } = k();
+    return C(u, () => i.current, [i]), /* @__PURE__ */ m(
+      "div",
+      {
+        ref: x,
+        className: t(
+          R({
+            className: f
+          })
+        ),
+        "data-theme": h,
+        children: [
+          r ? /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: l ?? o,
+              className: t(
+                D({
+                  className: p
+                })
+              ),
+              onClick: () => w(!0),
+              children: r
+            }
+          ) : null,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              id: l ?? o,
+              className: t(M()),
+              role: "combobox",
+              onClick: v,
+              "aria-expanded": s,
+              children: [
+                n.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: d }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: n.map((a) => /* @__PURE__ */ e(
+                  V,
+                  {
+                    id: a.id,
+                    label: a.value || a.tagLabel || "",
+                    color: a.tagColor || "gray-800",
+                    className: "select-none gap-2",
+                    rightIcon: /* @__PURE__ */ e(
+                      j,
+                      {
+                        className: "w-2 h-2",
+                        onClick: () => L(a)
+                      }
+                    ),
+                    "data-value": a.label
+                  },
+                  a.id
+                )) }),
+                g ? /* @__PURE__ */ e(O, { className: "w-4 h-4 text-slate-400 animate-spin shrink-0" }) : /* @__PURE__ */ e(
+                  y,
+                  {
+                    className: t(
+                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
+                      s ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: i,
+              type: "text",
+              name: l,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          s ? /* @__PURE__ */ e(N, {}) : null
+        ]
+      }
+    );
+  }
+);
+E.displayName = "MultiSelectDropdownWrapper";
+export {
+  E as Wrapper
+};

package/dist/components/MultiSelectDropdown/components/index.js

@@ -0,0 +1,8 @@
+import { Item as e } from "./Item/Item.js";
+import { List as t } from "./List/List.js";
+import { Wrapper as f } from "./Wrapper/Wrapper.js";
+export {
+  e as Item,
+  t as List,
+  f as Wrapper
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.context.js

@@ -0,0 +1,21 @@
+import { createContext as n } from "react";
+const t = {
+  options: [],
+  selectedOptions: [],
+  isOpen: !1,
+  inputRef: null,
+  onSelectOption() {
+    throw new Error("Function not implemented.");
+  },
+  onRemoveOption() {
+    throw new Error("Function not implemented.");
+  },
+  onOpen() {
+    throw new Error("Function not implemented.");
+  },
+  isLoading: !1,
+  noOptionsText: void 0
+}, e = n(t);
+export {
+  e as MultiSelectDropdownContext
+};

package/dist/components/MultiSelectDropdown/contexts/MultiSelectDropdown.hook.js

@@ -0,0 +1,13 @@
+import { useContext as o } from "react";
+import { MultiSelectDropdownContext as e } from "./MultiSelectDropdown.context.js";
+const i = () => {
+  const t = o(e);
+  if (!t)
+    throw new Error(
+      "useMultiSelectDropdown must be used within a MultiSelectDropdownProvider"
+    );
+  return t;
+};
+export {
+  i as useMultiSelectDropdown
+};