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

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/NumberInput/NumberInput.js

@@ -1,9 +1,9 @@
 import { jsxs as m, jsx as c } from "react/jsx-runtime";
-import { R as O } from "../../index-iXyXtdgP.js";
+import { R as O } from "../../index-DrWQH0QF.js";
 import f, { forwardRef as b, useId as N, useCallback as w } from "react";
 import { cn as y } from "../../utils/index.js";
 import { labelVariants as z, buttonVariants as j, numberInputVariants as _ } from "./NumberInput.variants.js";
-import { P as l } from "../../index-h-Ul0anl.js";
+import { P as l } from "../../index--V_ZsiQe.js";
 function h() {
   return h = Object.assign || function(e) {
     for (var o = 1; o < arguments.length; o++) {

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-slate-500",
+    "dark:bg-slate-800",
+    "dark:data-[state=open]:border-slate-500",
+    "dark:focus-within:border-slate-500"
+  ],
+  {
+    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,27 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { C as s } from "../../../../chevron-up-DrQr2Fwd.js";
+import { usePhoneNumberContext as l } from "../../contexts/phone-number.hook.js";
+const m = () => {
+  const { selectedCountry: o, isOpenSelector: t, handleOpenSelector: a } = l(), { 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(
+          s,
+          {
+            className: "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 {
+  m as FlagContent
+};