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

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

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

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

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

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

@@ -0,0 +1,25 @@
+import { c as a } from "../../../../index-D29mdTf5.js";
+const o = a([
+  "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",
+  "dark:border-metal-700",
+  "dark:bg-metal-800"
+]);
+export {
+  o as listVariants
+};

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

@@ -0,0 +1,119 @@
+import "../Item/Item.js";
+import { List as S } from "../List/List.js";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as k, useId as O, useImperativeHandle as C } from "react";
+import { S as D } from "../../../../loader-juvMSJ9L.js";
+import { Badge as L } from "../../../Badge/Badge.js";
+import { Typography as p } from "../../../Typography/Typography.js";
+import { cn as a } from "../../../../utils/index.js";
+import { useMultiSelectDropdown as M } from "../../hooks/useMultiSelectDropdown.js";
+import { labelVariants as R, multiSelectDropdownVariants as I, wrapperVariants as V } from "../../MultiSelectDropdown.variants.js";
+import { X as j } from "../../../../x-BXShoIAM.js";
+import { C as W } from "../../../../chevron-up-DEfvgPCw.js";
+import { useMultiSelectDropdown as $ } from "../../contexts/MultiSelectDropdown.hook.js";
+const B = k(
+  ({
+    isRequired: c,
+    label: n,
+    labelClassName: d,
+    name: s,
+    placeholder: f = "",
+    theme: u,
+    wrapperClassName: h
+  }, x) => {
+    const N = O(), i = s ? `${N}-name` : "id", {
+      inputRef: t,
+      isLoading: w,
+      isOpen: o,
+      selectedOptions: m,
+      onOpen: g,
+      onRemoveOption: v
+    } = $(), { wrapperRef: b, handleOpen: y } = M();
+    return C(x, () => t.current, [t]), /* @__PURE__ */ l(
+      "div",
+      {
+        ref: b,
+        className: a(
+          V({
+            className: h
+          })
+        ),
+        "data-theme": u,
+        children: [
+          n ? /* @__PURE__ */ l(
+            p,
+            {
+              component: "label",
+              variant: "labelLarge",
+              htmlFor: i,
+              className: a(
+                R({
+                  className: d
+                })
+              ),
+              onClick: () => g(!0),
+              children: [
+                n,
+                " ",
+                c && /* @__PURE__ */ e(
+                  p,
+                  {
+                    component: "span",
+                    className: "text-red-500 dark:text-red-500 text-sm font-normal",
+                    children: "*"
+                  }
+                )
+              ]
+            }
+          ) : null,
+          /* @__PURE__ */ l(
+            "div",
+            {
+              id: i,
+              className: a(I()),
+              role: "combobox",
+              onClick: y,
+              "aria-expanded": o,
+              children: [
+                m.length === 0 ? /* @__PURE__ */ e("span", { className: "text-base text-inherit select-none", children: f }) : /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-2", children: m.map((r) => /* @__PURE__ */ e(
+                  L,
+                  {
+                    "data-value": r.label,
+                    label: r.value ?? r.label ?? "",
+                    className: "select-none",
+                    rightIcon: /* @__PURE__ */ e(j, { onClick: () => v(r) })
+                  },
+                  r.id
+                )) }),
+                w ? /* @__PURE__ */ e(D, { className: "w-4 h-4 animate-spin shrink-0 text-gray-400" }) : /* @__PURE__ */ e(
+                  W,
+                  {
+                    className: a(
+                      "w-4 h-4 transition-all duration-50 shrink-0 text-gray-400",
+                      o ? "rotate-0" : "rotate-180"
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ e(
+            "input",
+            {
+              ref: t,
+              type: "text",
+              name: s,
+              className: "hidden",
+              readOnly: !0
+            }
+          ),
+          o ? /* @__PURE__ */ e(S, {}) : null
+        ]
+      }
+    );
+  }
+);
+B.displayName = "MultiSelectDropdownWrapper";
+export {
+  B 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
+};

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

@@ -0,0 +1,138 @@
+import { jsx as V } from "react/jsx-runtime";
+import { useRef as k, useState as R, useEffect as g, useCallback as S } from "react";
+import { MultiSelectDropdownContext as C } from "./MultiSelectDropdown.context.js";
+import { useToggle as E } from "../../../hooks/useToggle.js";
+const q = ({
+  children: x,
+  defaultOptions: r = [],
+  multiselect: i = !0,
+  value: f,
+  onChange: m,
+  onBlur: u,
+  name: h,
+  isLoading: b,
+  noOptionsText: j
+}) => {
+  const d = k(null), [w, I] = E(!1), [y, p] = R(r), [c, v] = R([]), o = f !== void 0;
+  g(() => {
+    if (!o) {
+      const n = new Set(
+        c.map((e) => e.id)
+      );
+      p(
+        i ? r.filter((e) => !n.has(e.id)) : r.map((e) => ({
+          ...e,
+          isSelected: n.has(e.id)
+        }))
+      );
+    }
+  }, [r, i, o, c]), g(() => {
+    if (o) {
+      const n = f || [];
+      v(n);
+      const e = new Set(n.map((s) => s.id));
+      p(
+        i ? r.filter((s) => !e.has(s.id)) : r.map((s) => ({
+          ...s,
+          isSelected: e.has(s.id)
+        }))
+      );
+    }
+  }, [f, o, r, i]);
+  const l = S(
+    (n) => {
+      const e = n.map(({ id: t, value: O, label: P }) => ({
+        id: t,
+        value: O ?? P
+      })), s = JSON.stringify(e);
+      d.current && (d.current.value = s), m && m({
+        target: {
+          value: n,
+          name: h ?? ""
+        }
+      });
+    },
+    [m, h]
+  ), a = S(
+    (n) => {
+      const e = w;
+      I(n), e && n === !1 && u && d.current && u({
+        target: d.current,
+        type: "blur"
+      });
+    },
+    [w, I, u, d]
+  ), D = S(
+    (n) => {
+      if (o) {
+        const t = [
+          ...i ? c : [],
+          n
+        ];
+        l(t), a(!1);
+        return;
+      }
+      const e = [
+        ...i ? c : [],
+        n
+      ];
+      v(e);
+      const s = e.map((t) => t.id);
+      p(() => i ? r.filter(
+        (t) => !s.includes(t.id)
+      ) : r.map((t) => ({
+        ...t,
+        isSelected: s.includes(t.id)
+      }))), l(e), a(!1);
+    },
+    [
+      r,
+      l,
+      i,
+      c,
+      a,
+      o
+    ]
+  ), M = S(
+    (n) => {
+      if (o) {
+        const t = c.filter(
+          (O) => O.id !== n.id
+        );
+        l(t);
+        return;
+      }
+      const e = c.filter(
+        (t) => t.id !== n.id
+      );
+      v(e);
+      const s = e.map((t) => t.id);
+      p(
+        () => r.filter(
+          (t) => !s.includes(t.id)
+        )
+      ), l(e);
+    },
+    [r, l, c, o]
+  );
+  return /* @__PURE__ */ V(
+    C.Provider,
+    {
+      value: {
+        options: y,
+        selectedOptions: c,
+        isOpen: w,
+        inputRef: d,
+        onSelectOption: D,
+        onRemoveOption: M,
+        onOpen: a,
+        isLoading: b,
+        noOptionsText: j
+      },
+      children: x
+    }
+  );
+};
+export {
+  q as MultiSelectDropdownProvider
+};

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

@@ -0,0 +1,6 @@
+import { useMultiSelectDropdown as r } from "./MultiSelectDropdown.hook.js";
+import { MultiSelectDropdownProvider as l } from "./MultiSelectDropdown.provider.js";
+export {
+  l as MultiSelectDropdownProvider,
+  r as useMultiSelectDropdown
+};

package/dist/components/MultiSelectDropdown/hooks/useMultiSelectDropdown.js

@@ -0,0 +1,32 @@
+import { useRef as l, useEffect as c, useCallback as u } from "react";
+import { useMultiSelectDropdown as i } from "../contexts/MultiSelectDropdown.hook.js";
+const f = () => {
+  const n = l(null), { onOpen: e } = i();
+  c(() => {
+    const t = new AbortController(), a = (o) => {
+      o.key === "Escape" && e(!1);
+    }, r = (o) => {
+      n.current?.contains(o.target) || e(!1);
+    };
+    return document.addEventListener("keydown", a, {
+      signal: t.signal
+    }), document.addEventListener("mousedown", r, {
+      signal: t.signal
+    }), () => {
+      t.abort();
+    };
+  }, [e, n]);
+  const s = u(
+    (t) => {
+      t.target?.closest("[data-value]") || e(!0);
+    },
+    [e]
+  );
+  return {
+    wrapperRef: n,
+    handleOpen: s
+  };
+};
+export {
+  f as useMultiSelectDropdown
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.js

@@ -0,0 +1,8 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { PhoneNumberProvider as t } from "./contexts/phone-number.provider.js";
+import { Wrapper as f } from "./components/Wrapper.js";
+const u = p(({ defaultCountryCode: o = "US", ...m }, e) => /* @__PURE__ */ r(t, { defaultCountryCode: o, children: /* @__PURE__ */ r(f, { ref: e, ...m }) }));
+export {
+  u as PhoneNumberInput
+};

package/dist/components/PhoneNumberInput/PhoneNumberInput.variants.js

@@ -0,0 +1,46 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const t = r(
+  [
+    "text-sm",
+    "relative",
+    "border",
+    "border-gray-300",
+    "rounded",
+    "data-[state=open]:border-aurora-500",
+    "focus-within:border-aurora-500",
+    "transition-colors",
+    "duration-150",
+    "dark:border-metal-700",
+    "dark:bg-metal-800",
+    "dark:data-[state=open]:border-metal-700",
+    "dark:focus-within:border-metal-700"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [],
+        error: [
+          "border-red-600",
+          "dark:border-red-500",
+          "data-[state=open]:border-red-500",
+          "focus-within:border-red-500",
+          "pr-8",
+          "focus-visible:ring-transparent"
+        ]
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+), e = r([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]);
+export {
+  e as labelVariants,
+  t as phoneNumberInputVariants
+};

package/dist/components/PhoneNumberInput/components/FlagContent/FlagContent.js

@@ -0,0 +1,36 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { cn as s } from "../../../../utils/index.js";
+import { C as l } from "../../../../chevron-up-DrQr2Fwd.js";
+import { usePhoneNumberContext as c } from "../../contexts/phone-number.hook.js";
+const u = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = c(), { flag: n } = o;
+  return /* @__PURE__ */ r(
+    "button",
+    {
+      type: "button",
+      className: "flex items-center gap-2 cursor-pointer",
+      onClick: () => a(!t),
+      children: [
+        /* @__PURE__ */ e(n, {}),
+        /* @__PURE__ */ e(
+          l,
+          {
+            className: s(
+              "transition-all",
+              "duration-100",
+              "data-[state=open]:rotate-0",
+              "data-[state=closed]:rotate-180",
+              "w-5",
+              "h-5",
+              "text-slate-400"
+            ),
+            "data-state": t ? "open" : "closed"
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  u as FlagContent
+};