@xola/ui-kit 3.4.5 → 3.5.0

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 { ChevronRightIcon as b } from "../../icons/build/ChevronRightIcon.js";
+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";
-const j = ({
+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,
@@ -30,7 +31,7 @@ const j = ({
       className: n(
         "ui-sidebar-link",
         "flex w-full items-center rounded leading-none transition-colors xl:justify-start",
-        !r && "h-10",
+        !r && "h-11",
         {
           "bg-primary text-white hover:bg-primary-dark": t,
           "text-gray hover:bg-gray-darker": !t,
@@ -38,19 +39,19 @@ const j = ({
           "justify-center px-6 py-3": !r
         }
       ),
-      ...p,
+      ...m,
       children: [
-        r ? /* @__PURE__ */ o(k, { 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(b, { 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,18 +1,18 @@
 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 { AnnounceIcon as P } from "../../icons/build/AnnounceIcon.js";
-import { BellIcon as U } from "../../icons/build/BellIcon.js";
-import { XolaLogoSimple as _ } from "../../icons/build/images/XolaLogoSimple.js";
+import s from "../../helpers/classnames.js";
 import { Counter as I } from "../Counter.js";
 import { Drawer as k } from "../Drawer.js";
-import { SidebarAccount as q } from "./Sidebar.Account.js";
-import { SidebarButton as J } from "./Sidebar.Button.js";
-import { SidebarFooter as Q } from "./Sidebar.Footer.js";
-import { SidebarHeading as S } from "./Sidebar.Heading.js";
-import { SidebarLink as V, SidebarSeparator as Y } from "./Sidebar.Link.js";
-import { SidebarMenu as Z } from "./Sidebar.Menu.js";
-import D from "./SidebarScroll.module.css.js";
+import { SidebarAccount as P } from "./Sidebar.Account.js";
+import { SidebarButton as U } from "./Sidebar.Button.js";
+import { SidebarFooter as _ } from "./Sidebar.Footer.js";
+import { SidebarHeading as q } from "./Sidebar.Heading.js";
+import { SidebarLink as J, SidebarSeparator as Q } from "./Sidebar.Link.js";
+import { SidebarMenu as S } from "./Sidebar.Menu.js";
+import V from "./SidebarScroll.module.css.js";
+import { AnnounceIcon as Y } from "../../icons/src/AnnounceIcon.js";
+import { BellIcon as Z } from "../../icons/src/BellIcon.js";
+import { XolaLogoSimple as D } from "../../icons/src/images/XolaLogoSimple.js";
 const C = {
   // From Figma
   background: "linear-gradient(138.65deg, #583DFF 19.59%, #F849C7 62.96%, #FFC03D 97.07%)"
@@ -50,7 +50,7 @@ const C = {
       return t ? Number.parseInt(t, 10) : E(window.innerWidth);
     }
     return 200;
-  }), [A, N] = x(!1), [u, M] = x(!1), h = K(null), { announcements: c, notices: n } = z ?? {}, B = ((n == null ? void 0 : n.count) ?? 0) <= 0 || !n, G = a && y;
+  }), [A, N] = x(!1), [u, M] = x(!1), h = K(null), { announcements: c, notices: n } = z ?? {}, B = ((n == null ? void 0 : n.count) ?? 0) <= 0 || !n, R = a && y;
   b(() => {
     const t = () => {
       const f = E(window.innerWidth);
@@ -76,7 +76,7 @@ const C = {
       return () => clearTimeout(t);
     }
   }, [e, m]);
-  const R = (t) => {
+  const G = (t) => {
     t.preventDefault(), M(!0);
   };
   return /* @__PURE__ */ d(
@@ -84,7 +84,7 @@ const C = {
     {
       ref: h,
       className: s(
-        D,
+        V,
         "ui-sidebar",
         g ? "fixed" : "relative",
         "z-20 flex h-full flex-col overflow-x-hidden border-r-4 border-black bg-black px-1 py-2 text-white transition-all duration-300",
@@ -97,7 +97,7 @@ const C = {
           "div",
           {
             className: "absolute -right-3 bottom-0 top-0 z-10 w-4 cursor-ew-resize",
-            onMouseDown: R,
+            onMouseDown: G,
             onMouseEnter: () => N(!0),
             onMouseLeave: () => N(!1)
           }
@@ -127,7 +127,7 @@ const C = {
                   },
                   onClick: () => o == null ? void 0 : o("left"),
                   children: [
-                    /* @__PURE__ */ i(P, { className: s(e <= 168 && "hidden") }),
+                    /* @__PURE__ */ i(Y, { className: s(e <= 168 && "hidden") }),
                     c.count
                   ]
                 }
@@ -147,7 +147,7 @@ const C = {
                   },
                   onClick: () => o == null ? void 0 : o("right"),
                   children: [
-                    /* @__PURE__ */ i(U, { className: s(e <= 168 && "hidden") }),
+                    /* @__PURE__ */ i(Z, { className: s(e <= 168 && "hidden") }),
                     n.count
                   ]
                 }
@@ -181,7 +181,7 @@ const C = {
             onClose: (t) => !!t && (o == null ? void 0 : o("right"))
           }
         ),
-        /* @__PURE__ */ d("div", { className: s("flex-grow space-y-2", G && "overflow-y-auto overflow-x-hidden"), children: [
+        /* @__PURE__ */ d("div", { className: s("flex-grow space-y-2", R && "overflow-y-auto overflow-x-hidden"), children: [
           e > 60 && /* @__PURE__ */ i("div", { className: "text-center", children: r ? $.cloneElement(r, {
             className: s(
               "inline-block",
@@ -190,7 +190,7 @@ const C = {
               r.props.className
             )
           }) : e > 90 && /* @__PURE__ */ i(
-            _,
+            D,
             {
               className: s(
                 "inline-block h-12 w-12 ",
@@ -207,13 +207,13 @@ const C = {
     }
   );
 };
-l.Account = q;
-l.Button = J;
-l.Footer = Q;
-l.Link = V;
-l.Separator = Y;
-l.Menu = Z;
-l.Heading = S;
+l.Account = P;
+l.Button = U;
+l.Footer = _;
+l.Link = J;
+l.Separator = Q;
+l.Menu = S;
+l.Heading = q;
 export {
   l as Sidebar
 };

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,6 +1,6 @@
 import { jsx as s } from "react/jsx-runtime";
-import c from "clsx";
-import { CircleNotch as i } from "../icons/build/CircleNotch.js";
+import c from "../helpers/classnames.js";
+import { CircleNotch as i } from "../icons/src/CircleNotch.js";
 const o = {
   primary: "text-primary",
   secondary: "text-secondary",

package/build/components/Table.js

@@ -1,11 +1,11 @@
 import { jsx as a } from "react/jsx-runtime";
-import s from "clsx";
-import R, { Children as k, cloneElement as B, useState as u, useRef as h, useEffect as A } from "react";
+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 });
 f.displayName = "Table.Header";
-const y = ({ isStriped: e = !1, children: l, className: i, ...d }) => /* @__PURE__ */ a("tbody", { className: s("ui-table-body", "border-none", i), ...d, children: k.map(l, (t) => !t || !R.isValidElement(t) ? t : B(t, { isStriped: e })) });
+const y = ({ isStriped: e = !1, children: l, className: i, ...d }) => /* @__PURE__ */ a("tbody", { className: s("ui-table-body", "border-none", i), ...d, children: k.map(l, (t) => !t || !T.isValidElement(t) ? t : B(t, { isStriped: e })) });
 y.displayName = "Table.Body";
 const p = ({ isStriped: e = !1, className: l, ...i }) => /* @__PURE__ */ a("tr", { className: s("ui-table-row", e && "even:bg-gray-lighter", l), ...i });
 p.displayName = "Table.Row";
@@ -22,7 +22,7 @@ const N = ({ value: e, className: l, onSave: i, ...d }) => {
     b(!1), o !== e && i(o);
   }, E = () => {
     t || b(!0);
-  }, T = (r) => {
+  }, R = (r) => {
     w(r.target.value), r.target.style.height = "auto", r.target.style.height = `${r.target.scrollHeight}px`;
   };
   return A(() => {
@@ -52,7 +52,7 @@ const N = ({ value: e, className: l, onSave: i, ...d }) => {
           value: o,
           style: { height: v },
           className: "h-auto w-full rounded border-none p-1 focus:outline-0 focus:!ring-gray-light",
-          onChange: T,
+          onChange: R,
           onBlur: H
         }
       ) : /* @__PURE__ */ a("div", { ref: c, className: "cursor-text whitespace-pre-wrap", children: o || /* @__PURE__ */ a("span", { className: "text-gray", children: "Not Available" }) })

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,6 +1,6 @@
-import { jsxs as g, jsx as n } from "react/jsx-runtime";
-import a from "clsx";
-import { CloseIcon as d } from "../icons/build/CloseIcon.js";
+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",
   secondary: "bg-secondary-light text-gray-darker border border-secondary",
@@ -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: l, onClose: r, ...i }) => {
-  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], l), ...i, 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",
     {