@xola/ui-kit 3.4.6 → 3.5.0

package/build/components/Sidebar/Sidebar.Account.js

@@ -1,6 +1,6 @@
 import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import m from "clsx";
-import { useRef as w, useState as d, useEffect as N } from "react";
+import { useRef as w, useState as m, useEffect as N } from "react";
+import d from "../../helpers/classnames.js";
 import { Avatar as g } from "../Avatar.js";
 import { ChevronRightIcon as S } from "../../icons/src/ChevronRightIcon.js";
 const j = ({
@@ -12,7 +12,7 @@ const j = ({
   className: b,
   ...y
 }) => {
-  const t = w(null), [s, a] = d(!r), [p, u] = d(!r), v = h ?? /* @__PURE__ */ e(g, { size: "tiny", name: n });
+  const t = w(null), [s, a] = m(!r), [p, u] = m(!r), v = h ?? /* @__PURE__ */ e(g, { size: "tiny", name: n });
   return N(() => {
     if (!r) {
       a(!0), u(!0);
@@ -31,7 +31,7 @@ const j = ({
     {
       ref: t,
       type: "button",
-      className: m(
+      className: d(
         "ui-sidebar-account",
         "flex h-12 w-full cursor-pointer items-center justify-center rounded px-4 py-3 hover:bg-gray-darker",
         "xl:justify-start",
@@ -40,7 +40,7 @@ const j = ({
       ),
       ...y,
       children: [
-        p && /* @__PURE__ */ e("div", { className: m(r && "m-auto", "flex-shrink-0"), children: v }),
+        p && /* @__PURE__ */ e("div", { className: d(r && "m-auto", "flex-shrink-0"), children: v }),
         s && /* @__PURE__ */ l("div", { className: "ml-2 min-w-0 text-left", children: [
           /* @__PURE__ */ e("div", { className: "truncate text-base", children: n }),
           o && /* @__PURE__ */ e("div", { className: "truncate text-sm text-gray-dark", children: o })

package/build/components/Sidebar/Sidebar.Button.js

@@ -1,10 +1,10 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import n from "clsx";
-const i = ({ icon: r, label: t, className: s, ...a }) => /* @__PURE__ */ o(
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import o from "../../helpers/classnames.js";
+const i = ({ icon: r, label: t, className: s, ...a }) => /* @__PURE__ */ n(
   "button",
   {
     type: "button",
-    className: n(
+    className: o(
       "ui-sidebar-button flex w-full cursor-pointer items-center rounded px-4 py-2 hover:bg-gray-darker",
       s
     ),

package/build/components/Sidebar/Sidebar.Heading.js

@@ -1,8 +1,8 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import i from "clsx";
-const m = ({ icon: s, label: a, className: r }) => /* @__PURE__ */ t("p", { className: i("ml-4 flex items-center text-white", r), children: [
-  /* @__PURE__ */ e(s, { className: "mr-3 h-5 w-5" }),
-  /* @__PURE__ */ e("span", { className: "text-md font-bold", children: a })
+import i from "../../helpers/classnames.js";
+const m = ({ icon: a, label: r, className: s }) => /* @__PURE__ */ t("p", { className: i("ml-4 flex items-center text-white", s), children: [
+  /* @__PURE__ */ e(a, { className: "mr-3 h-5 w-5" }),
+  /* @__PURE__ */ e("span", { className: "text-md font-bold", children: r })
 ] });
 m.displayName = "Sidebar.Heading";
 export {

package/build/components/Sidebar/Sidebar.Link.js

@@ -1,28 +1,29 @@
-import { jsxs as u, jsx as o } from "react/jsx-runtime";
-import n from "clsx";
-import { useRef as g, useState as l, useEffect as w } from "react";
-import { Dot as b } from "../Dot/Dot.js";
-import { ChevronRightIcon as k } from "../../icons/src/ChevronRightIcon.js";
-const j = ({
+import { jsxs as b, jsx as o } from "react/jsx-runtime";
+import { useRef as g, useState as h, useEffect as w } from "react";
+import n from "../../helpers/classnames.js";
+import { Dot as k } from "../Dot/Dot.js";
+import { useSidebarMenu as j } from "./Sidebar.Menu.js";
+import { ChevronRightIcon as N } from "../../icons/src/ChevronRightIcon.js";
+const S = ({
   isActive: t = !1,
   icon: i,
   isSubMenuItem: r,
-  align: h,
+  align: l,
   children: d,
   classNames: s,
-  ...p
+  ...m
 }) => {
-  const e = g(null), [a, m] = l(!0), [x, y] = l(!0);
+  const e = g(null), [a, p] = h(!0), [u, x] = h(!0), { hasSubmenu: y } = j();
   return w(() => {
     const c = () => {
-      e.current && (m(e.current.offsetWidth >= 140), y(e.current.offsetWidth >= 140 || e.current.offsetWidth < 100));
+      e.current && (p(e.current.offsetWidth >= 140), x(e.current.offsetWidth >= 140 || e.current.offsetWidth < 100));
     };
     c();
     const f = new ResizeObserver(c);
     return e.current && f.observe(e.current), () => {
       f.disconnect();
     };
-  }, []), /* @__PURE__ */ u(
+  }, []), /* @__PURE__ */ b(
     "button",
     {
       ref: e,
@@ -38,19 +39,19 @@ const j = ({
           "justify-center px-6 py-3": !r
         }
       ),
-      ...p,
+      ...m,
       children: [
-        r ? /* @__PURE__ */ o(b, { className: n("mr-3 shrink-0", { "bg-white": t, "bg-gray": !t }) }) : x && i && /* @__PURE__ */ o("div", { className: n(!a && "flex w-full justify-center"), children: /* @__PURE__ */ o(i, { className: n("h-5 w-5 shrink-0", a && "mr-3") }) }),
-        (a ?? r) && /* @__PURE__ */ o("span", { className: n("px-1", { "text-left": r ?? h === "left" }, s == null ? void 0 : s.text), children: d }),
-        !r && a && /* @__PURE__ */ o(k, { className: "ml-auto h-3 w-3" })
+        r ? /* @__PURE__ */ o(k, { className: n("mr-3 shrink-0", { "bg-white": t, "bg-gray": !t }) }) : u && i && /* @__PURE__ */ o("div", { className: n(!a && "flex w-full justify-center"), children: /* @__PURE__ */ o(i, { className: n("h-5 w-5 shrink-0", a && "mr-3") }) }),
+        (a || r) && /* @__PURE__ */ o("span", { className: n("px-1", { "text-left": r ?? l === "left" }, s == null ? void 0 : s.text), children: d }),
+        !r && a && y && /* @__PURE__ */ o(N, { className: "ml-auto h-3 w-3" })
       ]
     }
   );
 };
-j.displayName = "Sidebar.Link";
-const N = ({ className: t }) => /* @__PURE__ */ o("hr", { className: n("mx-3 my-4 border-gray-lighter/20", t) });
-N.displayName = "Sidebar.Separator";
+S.displayName = "Sidebar.Link";
+const v = ({ className: t }) => /* @__PURE__ */ o("hr", { className: n("mx-3 my-4 border-gray-lighter/20", t) });
+v.displayName = "Sidebar.Separator";
 export {
-  j as SidebarLink,
-  N as SidebarSeparator
+  S as SidebarLink,
+  v as SidebarSeparator
 };

package/build/components/Sidebar/Sidebar.Menu.d.ts

@@ -1,4 +1,7 @@
 import { default as React } from 'react';
+export declare const useSidebarMenu: () => {
+    hasSubmenu: boolean;
+};
 export interface SidebarMenuProps {
     [key: string]: any;
     content: React.ReactNode;

package/build/components/Sidebar/Sidebar.Menu.js

@@ -1,28 +1,30 @@
 import { jsx as e } from "react/jsx-runtime";
-import n from "@tippyjs/react";
-import t from "clsx";
-import a from "./Sidebar.Menu.module.css.js";
-const d = typeof window > "u" ? void 0 : window.document.body, m = ({ content: o, children: r, ...i }) => /* @__PURE__ */ e(
-  n,
+import i from "@tippyjs/react";
+import { useContext as a, createContext as s } from "react";
+import d from "../../helpers/classnames.js";
+import m from "./Sidebar.Menu.module.css.js";
+const u = typeof window > "u" ? void 0 : window.document.body, r = s({ hasSubmenu: !1 }), h = () => a(r), c = ({ content: o, children: n, ...t }) => /* @__PURE__ */ e(r.Provider, { value: { hasSubmenu: !0 }, children: /* @__PURE__ */ e(
+  i,
   {
     interactive: !0,
     trigger: "mouseenter",
     hideOnClick: "toggle",
-    appendTo: d,
+    appendTo: u,
     placement: "right",
     offset: [0, 4],
     arrow: !1,
-    className: t(
+    className: d(
       "ui-sidebar-menu",
-      a.main,
+      m.main,
       "!rounded-none bg-black bg-opacity-90 p-2 backdrop-blur-sm backdrop-filter"
     ),
     content: o,
-    ...i,
-    children: /* @__PURE__ */ e("span", { className: "block", children: r })
+    ...t,
+    children: /* @__PURE__ */ e("span", { className: "block", children: n })
   }
-);
-m.displayName = "Sidebar.Menu";
+) });
+c.displayName = "Sidebar.Menu";
 export {
-  m as SidebarMenu
+  c as SidebarMenu,
+  h as useSidebarMenu
 };

package/build/components/Sidebar/Sidebar.js

@@ -1,6 +1,6 @@
 import { jsxs as d, jsx as i } from "react/jsx-runtime";
-import s from "clsx";
 import $, { useState as x, useRef as K, useEffect as b } from "react";
+import s from "../../helpers/classnames.js";
 import { Counter as I } from "../Counter.js";
 import { Drawer as k } from "../Drawer.js";
 import { SidebarAccount as P } from "./Sidebar.Account.js";

package/build/components/Skeleton.js

@@ -1,14 +1,14 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import r from "clsx";
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import r from "../helpers/classnames.js";
 import d from "./Skeleton.module.css.js";
 const c = ({
   style: l,
   height: i = 300,
   shouldAnimate: o = !0,
-  children: s,
+  children: n,
   classNames: e = {},
-  ...m
-}) => /* @__PURE__ */ n(
+  ...s
+}) => /* @__PURE__ */ m(
   "div",
   {
     className: r(
@@ -17,10 +17,10 @@ const c = ({
       e.container
     ),
     style: { height: i, ...l },
-    ...m,
+    ...s,
     children: [
       o ? /* @__PURE__ */ t("div", { className: r(d.shimmer, "absolute h-full w-full", e.shimmer) }) : null,
-      /* @__PURE__ */ t("div", { className: r("text-gray", e.text), children: s })
+      /* @__PURE__ */ t("div", { className: r("text-gray", e.text), children: n })
     ]
   }
 );

package/build/components/Spinner.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import c from "clsx";
+import c from "../helpers/classnames.js";
 import { CircleNotch as i } from "../icons/src/CircleNotch.js";
 const o = {
   primary: "text-primary",

package/build/components/Table.js

@@ -1,6 +1,6 @@
 import { jsx as a } from "react/jsx-runtime";
-import s from "clsx";
 import T, { Children as k, cloneElement as B, useState as u, useRef as h, useEffect as A } from "react";
+import s from "../helpers/classnames.js";
 const n = ({ className: e, ...l }) => /* @__PURE__ */ a("div", { className: "ui-table flex flex-col", children: /* @__PURE__ */ a("div", { className: "-my-2 overflow-x-auto", children: /* @__PURE__ */ a("div", { className: "inline-block min-w-full py-2 align-middle", children: /* @__PURE__ */ a("div", { className: "overflow-hidden border-b border-gray-lighter sm:rounded-lg", children: /* @__PURE__ */ a("table", { className: s(e, "min-w-full divide-y border border-gray-lighter"), ...l }) }) }) }) }), g = ({ className: e, ...l }) => /* @__PURE__ */ a("thead", { className: s("ui-table-head", "bg-gray-lighter", e), ...l });
 g.displayName = "Table.Head";
 const f = ({ className: e, ...l }) => /* @__PURE__ */ a("th", { className: s("ui-table-header", "px-4 py-2 text-left text-base font-bold", e), ...l });

package/build/components/Tabs/Tabs.Panel.js

@@ -1,7 +1,7 @@
-import { jsx as e } from "react/jsx-runtime";
-import r from "clsx";
-const l = ({ className: a, ...s }) => /* @__PURE__ */ e("div", { className: r("ui-tabs-panel", a), ...s });
-l.displayName = "Tabs.Panel";
+import { jsx as r } from "react/jsx-runtime";
+import s from "../../helpers/classnames.js";
+const m = ({ className: a, ...e }) => /* @__PURE__ */ r("div", { className: s("ui-tabs-panel", a), ...e });
+m.displayName = "Tabs.Panel";
 export {
-  l as Panel
+  m as Panel
 };

package/build/components/Tabs/Tabs.Tab.js

@@ -1,5 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-import t from "clsx";
+import { jsx as l } from "react/jsx-runtime";
+import t from "../../helpers/classnames.js";
 const n = {
   default: (r) => t(
     "border-b border-gray-light",
@@ -15,11 +15,11 @@ const n = {
   isActive: a = !1,
   isHidden: o = !1,
   className: s,
-  ...l
+  ...b
 }) => {
-  const b = e ?? "button";
-  return o ? null : /* @__PURE__ */ i(
-    b,
+  const i = e ?? "button";
+  return o ? null : /* @__PURE__ */ l(
+    i,
     {
       className: t(
         "ui-tabs-tab",
@@ -27,7 +27,7 @@ const n = {
         "cursor-pointer whitespace-nowrap px-8 py-4 text-center font-semibold focus-visible:ring",
         n[r](a)
       ),
-      ...l
+      ...b
     }
   );
 };

package/build/components/Tabs/Tabs.js

@@ -1,17 +1,17 @@
 import { jsxs as a, Fragment as y, jsx as n } from "react/jsx-runtime";
-import h from "clsx";
-import s, { Children as x, cloneElement as w } from "react";
-import { Panel as i } from "./Tabs.Panel.js";
+import i, { Children as h, cloneElement as x } from "react";
+import w from "../../helpers/classnames.js";
+import { Panel as s } from "./Tabs.Panel.js";
 import { Tab as m } from "./Tabs.Tab.js";
 const A = {
   default: "border-t border-gray-light",
   simple: "bg-gray-lighter"
 }, d = ({ variant: e = "default", value: t, children: f, className: b, onChange: c, ...g }) => {
-  const l = x.toArray(f), p = l.filter((r) => s.isValidElement(r) && r.type === m), u = l.filter((r) => s.isValidElement(r) && r.type === i);
+  const l = h.toArray(f), p = l.filter((r) => i.isValidElement(r) && r.type === m), u = l.filter((r) => i.isValidElement(r) && r.type === s);
   return /* @__PURE__ */ a(y, { children: [
-    /* @__PURE__ */ a("nav", { className: h("ui-tabs", "flex overflow-x-auto", A[e], b), ...g, children: [
+    /* @__PURE__ */ a("nav", { className: w("ui-tabs", "flex overflow-x-auto", A[e], b), ...g, children: [
       e === "default" ? /* @__PURE__ */ n("div", { className: "min-w-10 flex-shrink-0 border-b border-gray-light" }) : null,
-      p.map((r, o) => w(r, {
+      p.map((r, o) => x(r, {
         variant: e,
         isActive: o === t,
         onClick: () => c(o)
@@ -22,7 +22,7 @@ const A = {
   ] });
 };
 d.Tab = m;
-d.Panel = i;
+d.Panel = s;
 export {
   d as Tabs
 };

package/build/components/Tag.js

@@ -1,5 +1,5 @@
-import { jsxs as g, jsx as n } from "react/jsx-runtime";
-import a from "clsx";
+import { jsxs as c, jsx as g } from "react/jsx-runtime";
+import a from "../helpers/classnames.js";
 import { CloseIcon as d } from "../icons/src/CloseIcon.js";
 const b = {
   primary: "bg-primary-lighter text-black border border-primary",
@@ -12,13 +12,13 @@ const b = {
   small: "px-1 py-0.75 text-sm leading-3.5",
   medium: "px-2 py-1 text-base leading-3.5",
   large: "px-2 py-1.5 text-base leading-4"
-}, y = ({ color: t = "primary", size: e = "small", children: s, className: i, onClose: r, ...l }) => {
-  const o = (c) => {
-    c.stopPropagation(), r == null || r();
+}, y = ({ color: t = "primary", size: e = "small", children: i, className: o, onClose: r, ...s }) => {
+  const l = (n) => {
+    n.stopPropagation(), r == null || r();
   };
-  return /* @__PURE__ */ g("span", { className: a("ui-tag", "inline-flex rounded", b[t], m[e], i), ...l, children: [
-    s,
-    r ? /* @__PURE__ */ n(
+  return /* @__PURE__ */ c("span", { className: a("ui-tag", "inline-flex rounded", b[t], m[e], o), ...s, children: [
+    i,
+    r ? /* @__PURE__ */ g(
       d,
       {
         size: "small",
@@ -26,7 +26,7 @@ const b = {
           "ui-tag-close ml-2 cursor-pointer leading-4 hover:text-gray-darker",
           e === "large" ? "mt-0.5" : "mt-0.25"
         ),
-        onClick: o
+        onClick: l
       }
     ) : null
   ] });

package/build/components/Utilities/Phone.js

@@ -1,8 +1,8 @@
 import { jsx as i } from "react/jsx-runtime";
-import a from "clsx";
-import { formatPhoneNumber as s, getRegionCode as c } from "../../helpers/phone.js";
+import a from "../../helpers/classnames.js";
+import { formatPhoneNumber as c, getRegionCode as s } from "../../helpers/phone.js";
 const g = ({ countryCode: o = "US", children: t, className: r }) => {
-  const e = t.toString(), n = s(e, o), m = c(e, o);
+  const e = t.toString(), n = c(e, o), m = s(e, o);
   return /* @__PURE__ */ i(
     "span",
     {