@konstructio/ui 0.1.2-alpha.3 → 0.1.2-alpha.31

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

@@ -1,58 +1,50 @@
-import { useRef as b, useEffect as u } from "react";
-import { useDropdownContext as f } from "../contexts/dropdown.hook.js";
-const d = ({
-  ulRef: t,
-  wrapperRef: i,
-  wrapperInputRef: o
+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 = b(0), { isOpen: l } = f();
-  u(() => {
-    const e = t.current?.querySelectorAll("li") ?? [], c = new AbortController(), n = () => {
-      r.current < e.length - 1 ? (r.current = r.current + 1, e[r.current].focus()) : (r.current = 0, e[0].focus());
-    }, a = () => {
-      r.current > 0 ? (r.current = r.current - 1, e[r.current].focus()) : (r.current = 0, o.current?.focus());
+  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());
+    }, 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 t.current?.addEventListener(
+    return n.current?.addEventListener(
       "keydown",
-      (s) => {
-        switch (s.preventDefault(), s.key) {
+      (c) => {
+        switch (c.preventDefault(), c.key) {
           case "ArrowDown": {
-            n();
+            i();
             break;
           }
           case "Tab": {
-            s.shiftKey ? a() : n();
+            c.shiftKey ? l() : i();
             break;
           }
           case "ArrowUp": {
-            r.current === 0 ? o.current?.focus() : a();
+            r.current === 0 ? e.current?.focus() : l();
             break;
           }
           case "Enter": {
-            e[r.current].querySelector("button")?.click();
+            t[r.current]?.click();
             break;
           }
         }
       },
-      { signal: c.signal }
+      { signal: u.signal }
     ), () => {
-      c.abort();
+      u.abort();
     };
-  }, [t, r, o]), u(() => {
-    const e = new AbortController();
-    return i.current?.addEventListener(
-      "mouseenter",
-      () => {
-        (t.current?.querySelectorAll("li") ?? []).forEach((n) => n.blur());
-      },
-      { signal: e.signal }
-    ), () => {
-      e.abort();
-    };
-  }, [t, i]), u(() => {
-    l || (r.current = 0);
-  }, [l]);
+  }, [n, r, e, o, f.length]), a(() => {
+    s || (r.current = 0);
+  }, [s]);
 };
 export {
-  d 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

@@ -39,7 +39,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: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-5xSxFoaD.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 { W as f } from "../../../../Modal-5xSxFoaD.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-5xSxFoaD.js";
 export {
   e as Body,
   t as Footer,

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,45 @@
+import { c as r } from "../../index-D29mdTf5.js";
+const e = r(
+  [
+    "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"
+    }
+  }
+), t = r([
+  "cursor-pointer",
+  "text-sm",
+  "leading-5",
+  "tracking-[0.1px]",
+  "dark:text-slate-50"
+]);
+export {
+  t as labelVariants,
+  e 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
+};