@konstructio/ui 0.1.2-alpha.37 → 0.1.2-alpha.39

package/dist/chevron-up-CRyLc5Ml.js

@@ -0,0 +1,54 @@
+import l, { forwardRef as c } from "react";
+import { P as a } from "./index--V_ZsiQe.js";
+function p() {
+  return p = Object.assign || function(e) {
+    for (var o = 1; o < arguments.length; o++) {
+      var t = arguments[o];
+      for (var r in t)
+        Object.prototype.hasOwnProperty.call(t, r) && (e[r] = t[r]);
+    }
+    return e;
+  }, p.apply(this, arguments);
+}
+function u(e, o) {
+  if (e == null) return {};
+  var t = v(e, o), r, n;
+  if (Object.getOwnPropertySymbols) {
+    var i = Object.getOwnPropertySymbols(e);
+    for (n = 0; n < i.length; n++)
+      r = i[n], !(o.indexOf(r) >= 0) && Object.prototype.propertyIsEnumerable.call(e, r) && (t[r] = e[r]);
+  }
+  return t;
+}
+function v(e, o) {
+  if (e == null) return {};
+  var t = {}, r = Object.keys(e), n, i;
+  for (i = 0; i < r.length; i++)
+    n = r[i], !(o.indexOf(n) >= 0) && (t[n] = e[n]);
+  return t;
+}
+var s = c(function(e, o) {
+  var t = e.color, r = t === void 0 ? "currentColor" : t, n = e.size, i = n === void 0 ? 24 : n, f = u(e, ["color", "size"]);
+  return /* @__PURE__ */ l.createElement("svg", p({
+    ref: o,
+    xmlns: "http://www.w3.org/2000/svg",
+    width: i,
+    height: i,
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: r,
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }, f), /* @__PURE__ */ l.createElement("polyline", {
+    points: "18 15 12 9 6 15"
+  }));
+});
+s.propTypes = {
+  color: a.string,
+  size: a.oneOfType([a.string, a.number])
+};
+s.displayName = "ChevronUp";
+export {
+  s as C
+};

package/dist/components/Dropdown/components/Wrapper.js

@@ -1,4 +1,4 @@
-import { jsxs as d, jsx as t } from "react/jsx-runtime";
+import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { forwardRef as Z, useId as ee, useRef as C, useMemo as te, useImperativeHandle as ae, useEffect as re } from "react";
 import { S as ne } from "../../../loader-juvMSJ9L.js";
 import { Typography as se } from "../../Typography/Typography.js";
@@ -12,27 +12,27 @@ import { useDropdownContext as fe } from "../contexts/dropdown.hook.js";
 const de = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]
-], xe = ue("search", de), be = Z(
+], xe = ue("search", de), je = Z(
   ({
-    additionalOptions: V,
-    className: O,
+    additionalOptions: b,
+    className: z,
     defaultValue: x,
-    disabled: a = !1,
-    error: m,
+    disabled: t = !1,
+    error: f,
     iconClassName: R,
     inputClassName: F,
-    isLoading: k,
+    isLoading: g,
     isRequired: h,
     label: v,
-    labelClassName: T,
-    listClassName: D,
-    listItemClassName: E,
-    listItemSecondRowClassName: M,
-    name: f,
-    placeholder: N,
-    searchable: g = !1,
-    showSearchIcon: w,
-    theme: S,
+    labelClassName: S,
+    listClassName: T,
+    listItemClassName: D,
+    listItemSecondRowClassName: E,
+    name: d,
+    placeholder: w,
+    searchable: k = !1,
+    showSearchIcon: N,
+    theme: M,
     wrapperClassName: W,
     isInfiniteScrollEnabled: _ = !1,
     onFetchMoreOptions: $,
@@ -50,104 +50,109 @@ const de = [
       setSearchTerm: G,
       setCanFilter: J,
       toggleOpen: K
-    } = fe(), e = te(() => n.find(({ value: r }) => r === s), [n, s]), { wrapperRef: Q, wrapperInputRef: j, handleOpen: b } = ce({
+    } = fe(), e = te(() => n.find(({ value: a }) => a === s), [n, s]), { wrapperRef: Q, wrapperInputRef: V, handleOpen: j } = ce({
       ulRef: L,
       inputRef: l,
-      disabled: a,
+      disabled: t,
       internalValue: e,
       onBlur: H
-    }), p = f ? `${I}-${f}` : I;
+    }), p = d ? `${I}-${d}` : I;
     ae(q, () => l.current, [l]), re(() => {
       if (x && !s) {
-        const r = n && n.find((u) => u.value === x);
-        r && c(r.value);
+        const a = n && n.find((u) => u.value === x);
+        a && c(a.value);
       }
     }, [x, n, c, s]);
-    const X = (r) => {
-      const u = r.target.value;
+    const X = (a) => {
+      const u = a.target.value;
       J(!0), c(""), G(u ?? ""), P?.(u);
-      const z = n.find(
+      const O = n.find(
         (Y) => Y.value.toLocaleLowerCase() === u.toLocaleLowerCase()
       );
-      c(z ? z.value : e?.value ?? "");
+      c(O ? O.value : e?.value ?? "");
     };
-    return /* @__PURE__ */ d(
+    return /* @__PURE__ */ m(
       "div",
       {
         ref: Q,
         className: o("flex flex-col w-full relative", W),
-        "data-theme": S,
+        "data-theme": M,
         children: [
-          v ? /* @__PURE__ */ d(
+          v ? /* @__PURE__ */ m(
             "label",
             {
               id: p,
-              className: o(oe({ className: T })),
+              className: o(oe({ className: S })),
               htmlFor: p,
-              onClick: () => !a && b(),
+              onClick: () => !t && j(),
               children: [
                 v,
-                h && /* @__PURE__ */ t("span", { className: "text-red-600 ml-1", children: "*" })
+                h && /* @__PURE__ */ r("span", { className: "text-red-600 ml-1", children: "*" })
               ]
             }
           ) : null,
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ m(
             "div",
             {
-              ref: j,
+              ref: V,
               id: p,
               className: o(
-                ie({ className: O, hasError: !!m, disabled: a })
+                ie({ className: z, hasError: !!f, disabled: t })
               ),
               role: "combobox",
-              onClick: () => !a && K(!i),
+              onClick: () => !t && K(!i),
               "aria-expanded": i,
               tabIndex: A.current,
               "aria-labelledby": p,
               children: [
-                /* @__PURE__ */ d("div", { className: "flex gap-2.5 items-center flex-1", children: [
-                  e?.leftIcon && !w && /* @__PURE__ */ t("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
-                  w && /* @__PURE__ */ t(xe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
-                  g ? /* @__PURE__ */ t(
+                /* @__PURE__ */ m("div", { className: "flex gap-2.5 items-center flex-1", children: [
+                  e?.leftIcon && !N && /* @__PURE__ */ r("span", { className: "w-4 h-4 flex justify-center items-center dark:text-slate-50", children: e.leftIcon }),
+                  N && /* @__PURE__ */ r(xe, { className: "w-4 h-4 text-zinc-500 select-none dark:text-slate-300 dark:group-focus-within:text-slate-50 transition-colors duration-300" }),
+                  k ? /* @__PURE__ */ r(
                     "input",
                     {
                       type: "text",
                       value: i ? B : e?.label ?? s ?? "",
                       onChange: X,
-                      placeholder: N,
+                      placeholder: w,
                       className: o(le({ className: F }), {
-                        "text-red-700 placeholder:text-red-700": !!m
+                        "text-red-700 placeholder:text-red-700": !!f
                       }),
-                      onClick: (r) => {
-                        r.stopPropagation(), a || b();
+                      onClick: (a) => {
+                        a.stopPropagation(), t || j();
                       },
-                      "aria-label": v || N,
+                      "aria-label": v || w,
                       "aria-labelledby": p,
                       required: h,
                       autoComplete: "off",
                       autoCapitalize: "words",
-                      disabled: a,
+                      disabled: t,
                       tabIndex: -1,
                       ...y
                     }
-                  ) : /* @__PURE__ */ t(
+                  ) : /* @__PURE__ */ m(
                     se,
                     {
                       variant: "body2",
                       className: o(
-                        "flex-1 text-zinc-400 text-sm dark:text-slate-400",
+                        "flex-1 text-zinc-400 text-sm dark:text-slate-400 flex gap-2 items-center",
                         {
-                          "text-red-700": !!m,
+                          "text-red-700": !!f,
                           "select-none": !e,
                           "text-slate-800 dark:text-slate-50": e,
-                          "text-slate-400/50 dark:text-slate-50/50": a
-                        }
+                          "text-slate-400/50 dark:text-slate-50/50": t
+                        },
+                        e?.wrapperClassNameOnSelectedValue
                       ),
-                      children: e?.label || N
+                      children: [
+                        e?.label || w,
+                        " ",
+                        e?.showRightComponentOnselectedValue ? e?.rightComponent : null
+                      ]
                     }
                   )
                 ] }),
-                k ? /* @__PURE__ */ t(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !w && /* @__PURE__ */ t(
+                g ? /* @__PURE__ */ r(ne, { className: "w-4 h-4 text-slate-400 animate-spin select-none" }) : !N && /* @__PURE__ */ r(
                   me,
                   {
                     "data-state": i ? "open" : "closed",
@@ -155,8 +160,8 @@ const de = [
                       "w-4 h-4 text-zinc-500 transition-all duration-100 data-[state=open]:rotate-0 data-[state=closed]:rotate-180 select-none dark:group-focus-within:text-slate-50",
                       R,
                       {
-                        "text-red-700": !!m,
-                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": a
+                        "text-red-700": !!f,
+                        "text-slate-400/50 dark:group-focus-within:text-zinc-500": t
                       }
                     )
                   }
@@ -164,12 +169,12 @@ const de = [
               ]
             }
           ),
-          /* @__PURE__ */ t(
+          /* @__PURE__ */ r(
             "input",
             {
               ref: l,
               type: "text",
-              name: f,
+              name: d,
               className: "hidden",
               "aria-hidden": "true",
               required: h,
@@ -178,20 +183,20 @@ const de = [
               ...y
             }
           ),
-          i && /* @__PURE__ */ t(
+          i && /* @__PURE__ */ r(
             pe,
             {
               ref: L,
-              additionalOptions: V,
-              className: D,
-              itemClassName: E,
-              name: f,
-              wrapperInputRef: j,
+              additionalOptions: b,
+              className: T,
+              itemClassName: D,
+              name: d,
+              wrapperInputRef: V,
               inputRef: l,
               options: n,
-              isLoading: !!k,
-              searchable: g,
-              listItemSecondRowClassName: M,
+              isLoading: !!g,
+              searchable: k,
+              listItemSecondRowClassName: E,
               isInfiniteScrollEnabled: _,
               onFetchMoreOptions: $,
               noOptionsText: U
@@ -203,5 +208,5 @@ const de = [
   }
 );
 export {
-  be as Wrapper
+  je as Wrapper
 };

package/dist/components/MultiSelectDropdown/MultiSelectDropdown.js

@@ -0,0 +1,21 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import { MultiSelectDropdownProvider as c } from "./contexts/MultiSelectDropdown.provider.js";
+import { Wrapper as n } from "./components/Wrapper/Wrapper.js";
+const x = l(
+  ({ options: t, multiselect: p, value: e, onChange: i, onBlur: f, name: r, ...m }, d) => /* @__PURE__ */ o(
+    c,
+    {
+      defaultOptions: t,
+      multiselect: p,
+      value: e,
+      onChange: i,
+      onBlur: f,
+      name: r,
+      children: /* @__PURE__ */ o(n, { ref: d, ...m, name: r })
+    }
+  )
+);
+export {
+  x 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,33 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { cn as m } from "../../../../utils/index.js";
+import { wrapperVariants as i } from "./Item.variants.js";
+import { useMultiSelectDropdown as s } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+import { Tag as p } from "../../../Tag/Tag.js";
+const x = ({ option: r, theme: a, isSelected: o }) => {
+  const { onSelectOption: e } = s();
+  return /* @__PURE__ */ l(
+    "li",
+    {
+      role: "option",
+      "data-theme": a,
+      className: m(i({ isSelected: o })),
+      onClick: () => e(r),
+      children: [
+        /* @__PURE__ */ t(c, { variant: "body2", className: "text-slate-800", children: r.label }),
+        /* @__PURE__ */ t(
+          p,
+          {
+            id: r.id,
+            label: r.tagLabel,
+            color: r.tagColor,
+            isSelected: o
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  x 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,29 @@
+import { jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../../../utils/index.js";
+import { Item as a } from "../Item/Item.js";
+import { wrapperVariants as p } from "./List.variants.js";
+import { useMultiSelectDropdown as l } from "../../contexts/MultiSelectDropdown.hook.js";
+import { Typography as c } from "../../../Typography/Typography.js";
+const y = ({ theme: o }) => {
+  const { options: r, selectedOptions: i } = l();
+  return /* @__PURE__ */ e("ul", { role: "listbox", "data-theme": o, className: s(p()), children: r.length > 0 ? r.map((t) => /* @__PURE__ */ e(
+    a,
+    {
+      option: t,
+      isSelected: i.some(
+        (m) => m.id === t.id
+      )
+    },
+    t.id
+  )) : /* @__PURE__ */ e(
+    c,
+    {
+      variant: "body2",
+      className: "text-zinc-800 dark:text-slate-50 italic px-2 py-2",
+      children: "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,96 @@
+import "../Item/Item.js";
+import { List as v } from "../List/List.js";
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import * as c from "react";
+import { forwardRef as N, useId as b, useImperativeHandle as C } from "react";
+import { Tag as O } from "../../../Tag/Tag.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as R } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as S, multiSelectDropdownVariants as k, wrapperVariants as D } from "../../MultiSelectDropdown.variants.js";
+import { C as M } from "../../../../chevron-up-CRyLc5Ml.js";
+import { useMultiSelectDropdown as y } from "../../contexts/MultiSelectDropdown.hook.js";
+const I = (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" })), Z = N(
+  ({ label: r, labelClassName: p, name: l, placeholder: d = "", theme: h, wrapperClassName: f }, u) => {
+    const i = b(), { selectedOptions: n, isOpen: o, onOpen: w, onRemoveOption: L, inputRef: s } = y(), { wrapperRef: g, handleOpen: x } = R();
+    return C(u, () => s.current, [s]), /* @__PURE__ */ m(
+      "div",
+      {
+        ref: g,
+        className: a(
+          D({
+            className: f
+          })
+        ),
+        "data-theme": h,
+        children: [
+          r ? /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: l ?? i,
+              className: a(
+                S({
+                  className: p
+                })
+              ),
+              onClick: () => w(!0),
+              children: r
+            }
+          ) : null,
+          /* @__PURE__ */ m(
+            "div",
+            {
+              id: l ?? i,
+              className: a(k()),
+              role: "combobox",
+              onClick: x,
+              "aria-expanded": o,
+              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((t) => /* @__PURE__ */ e(
+                  O,
+                  {
+                    id: t.id,
+                    label: t.tagLabel,
+                    color: t.tagColor || "gray-800",
+                    className: "select-none gap-2",
+                    rightIcon: /* @__PURE__ */ e(
+                      I,
+                      {
+                        className: "w-2 h-2",
+                        onClick: () => L(t)
+                      }
+                    ),
+                    "data-value": t.label
+                  },
+                  t.id
+                )) }),
+                /* @__PURE__ */ e(
+                  M,
+                  {
+                    className: a(
+                      "w-4 h-4 text-inherit transition-all duration-50 shrink-0",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: s,
+              type: "text",
+              name: l,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          o ? /* @__PURE__ */ e(v, {}) : null
+        ]
+      }
+    );
+  }
+);
+export {
+  Z 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,19 @@
+import { createContext as t } from "react";
+const n = {
+  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.");
+  }
+}, o = t(n);
+export {
+  o 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
+};