@xola/ui-kit 3.0.8 → 3.4.0

package/build/components/Screens/Login.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+declare const backgrounds: {
+    readonly default: "https://files.xola.com/x2/images/login/old-photo-1554629947-334ff61d85dc.jpeg";
+    readonly x2: "https://files.xola.com/x2/images/login/x2-34fc260271ca80160c61777846784611.jpeg";
+    readonly admin: "https://files.xola.com/x2/images/login/admin-42e40b1836193f064f0fe0fafce1d2af.png";
+    readonly scaffold: "https://files.xola.com/x2/images/login/scaffold-f3bd19169b6976f1c75da53e7b61d0a7.jpeg";
+};
+type BackgroundType = keyof typeof backgrounds;
+export interface LoginValues {
+    email: string;
+    password: string;
+    shouldRemember: boolean;
+}
+export interface LoginProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSubmit"> {
+    defaultValues?: Partial<LoginValues>;
+    isLoading?: boolean;
+    error?: string | null;
+    onSubmit?: (values: LoginValues) => void;
+    passwordResetUrl?: string;
+    label?: React.ReactNode;
+    backgroundImage?: string | null;
+    backgroundType?: BackgroundType;
+}
+export declare const Login: ({ defaultValues, isLoading, error, onSubmit, passwordResetUrl, label, backgroundImage, backgroundType, ...rest }: LoginProps) => React.JSX.Element;
+export {};

package/build/components/Screens/Login.js

@@ -0,0 +1,144 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { XolaLogoSimple as j } from "../../icons/build/images/XolaLogoSimple.js";
+import { Alert as I } from "../Alert.js";
+import { Button as R } from "../Buttons/Button.js";
+import { Checkbox as F } from "../Forms/Checkbox.js";
+import { FormGroup as u } from "../Forms/FormGroup.js";
+import { Input as f } from "../Forms/Input.js";
+import { Label as p } from "../Forms/Label.js";
+import { Spinner as B } from "../Spinner.js";
+const g = {
+  default: "https://files.xola.com/x2/images/login/old-photo-1554629947-334ff61d85dc.jpeg",
+  x2: "https://files.xola.com/x2/images/login/x2-34fc260271ca80160c61777846784611.jpeg",
+  admin: "https://files.xola.com/x2/images/login/admin-42e40b1836193f064f0fe0fafce1d2af.png",
+  scaffold: "https://files.xola.com/x2/images/login/scaffold-f3bd19169b6976f1c75da53e7b61d0a7.jpeg"
+}, G = ({
+  defaultValues: h,
+  isLoading: c = !1,
+  error: t = null,
+  onSubmit: o,
+  passwordResetUrl: x,
+  label: m,
+  backgroundImage: b = null,
+  backgroundType: y = "default",
+  ...w
+}) => {
+  const [r, d] = C({
+    email: "",
+    password: "",
+    shouldRemember: !1,
+    ...h
+  }), i = (l) => {
+    const { name: n, value: s } = l.target;
+    d({ ...r, [n]: s });
+  }, v = (l) => {
+    const { name: n, checked: s } = l.target;
+    d({ ...r, [n]: s });
+  }, k = (l) => {
+    l.preventDefault(), o == null || o(r);
+  }, N = {
+    backgroundImage: `url("${b ?? g[y] ?? g.default}")`,
+    backgroundRepeat: "no-repeat",
+    backgroundPosition: "center",
+    backgroundSize: "cover"
+  };
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      className: "ui-login h-screen overflow-hidden bg-white bg-opacity-100 bg-blend-overlay md:bg-opacity-0",
+      style: N,
+      ...w,
+      children: [
+        /* @__PURE__ */ e("div", { className: "md:full flex h-[88%] w-full flex-col items-center justify-center space-y-8", children: /* @__PURE__ */ a("div", { className: "w-85 rounded-lg px-9 py-0 md:bg-white md:py-10", children: [
+          /* @__PURE__ */ a("div", { className: "mb-12 space-y-4 md:mb-20", children: [
+            /* @__PURE__ */ e(j, { className: "mx-auto h-10 w-auto md:h-12" }),
+            m && /* @__PURE__ */ e("div", { className: "flex items-center justify-center", children: m })
+          ] }),
+          /* @__PURE__ */ e("form", { onSubmit: k, children: /* @__PURE__ */ a("fieldset", { className: "space-y-6", disabled: c, children: [
+            /* @__PURE__ */ a("div", { className: "-space-y-px rounded-md bg-white", children: [
+              /* @__PURE__ */ a(u, { className: "md:mb-7", children: [
+                /* @__PURE__ */ e(p, { children: "Email" }),
+                /* @__PURE__ */ e(
+                  f,
+                  {
+                    required: !0,
+                    name: "email",
+                    type: "email",
+                    autoComplete: "email",
+                    value: r.email,
+                    isError: !!t,
+                    onChange: i
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ a(u, { children: [
+                /* @__PURE__ */ e(p, { children: "Password" }),
+                /* @__PURE__ */ e(
+                  f,
+                  {
+                    required: !0,
+                    name: "password",
+                    type: "password",
+                    autoComplete: "current-password",
+                    value: r.password,
+                    isError: !!t,
+                    onChange: i
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ e(
+              F,
+              {
+                name: "shouldRemember",
+                label: "Remember me",
+                checked: r.shouldRemember,
+                onChange: v
+              }
+            ),
+            t ? /* @__PURE__ */ e(I, { color: "danger", children: t }) : null,
+            /* @__PURE__ */ a(R, { type: "submit", className: "w-full", color: "primary", children: [
+              c ? /* @__PURE__ */ e(B, { size: "current", color: "current", className: "mr-2" }) : null,
+              "Login"
+            ] }),
+            /* @__PURE__ */ e("div", { className: "mt-5 text-center text-sm", children: /* @__PURE__ */ e(
+              "a",
+              {
+                href: x,
+                className: "font-semibold text-gray-darker underline hover:text-black",
+                target: "_blank",
+                rel: "noreferrer",
+                children: "Forgot your password?"
+              }
+            ) })
+          ] }) })
+        ] }) }),
+        /* @__PURE__ */ e("footer", { children: /* @__PURE__ */ e("div", { className: "flex w-full flex-col items-center justify-center overflow-hidden px-4 py-1 sm:px-6 lg:px-8", children: /* @__PURE__ */ a("div", { className: "m-5 w-85 rounded-lg px-4 text-center text-xs opacity-80 md:text-sm", children: [
+          /* @__PURE__ */ a(
+            "a",
+            {
+              href: "https://www.xola.com/team",
+              target: "_blank",
+              className: "text-gray md:text-gray-dark",
+              rel: "noreferrer",
+              children: [
+                "Designed in San Francisco & Rouen, France",
+                /* @__PURE__ */ e("br", {}),
+                "Built in Houston, Belgrade, Ukraine & Bengaluru"
+              ]
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "text-center text-gray md:text-gray-dark", children: [
+            "© ",
+            (/* @__PURE__ */ new Date()).getFullYear(),
+            " Xola, Inc."
+          ] })
+        ] }) }) })
+      ]
+    }
+  );
+};
+export {
+  G as Login
+};

package/build/components/Search.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+export interface SearchProps<T = any> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "onSelect" | "onSubmit" | "children"> {
+    className?: string;
+    items?: T[];
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    onSubmit?: (value: string) => void;
+    onSelect?: (item: T) => void;
+    children?: (item: T, isHighlighted: boolean) => React.ReactNode;
+    isLoading?: boolean;
+    shouldStayOpen?: boolean;
+    shouldDestroyOnClose?: boolean;
+    shouldHideMenu?: boolean;
+    minChars?: number;
+}
+export declare const Search: <T = any>({ className, items, defaultValue, onChange, onSubmit, onSelect, children, isLoading, shouldStayOpen, shouldDestroyOnClose, shouldHideMenu, minChars, ...rest }: SearchProps<T>) => React.JSX.Element;

package/build/components/Search.js

@@ -0,0 +1,174 @@
+import { jsxs as l, jsx as t, Fragment as re } from "react/jsx-runtime";
+import I from "clsx";
+import { useCombobox as w } from "downshift";
+import le from "lodash-es/debounce";
+import { useState as u, useRef as E, useEffect as K } from "react";
+import { useHotkeys as O } from "react-hotkeys-hook";
+import { isOSX as ae } from "../helpers/browser.js";
+import { useId as R } from "../hooks/useId.js";
+import { useIsClient as ne } from "../hooks/useIsClient.js";
+import { SearchIcon as ce } from "../icons/build/SearchIcon.js";
+import { Key as n } from "./Key.js";
+import { Spinner as oe } from "./Spinner.js";
+const ie = le((m, h) => m(h), 500), Ie = ({
+  className: m,
+  items: h = [],
+  defaultValue: D,
+  onChange: o,
+  onSubmit: d,
+  onSelect: p,
+  children: f,
+  isLoading: C = !1,
+  shouldStayOpen: M = !1,
+  shouldDestroyOnClose: $ = !0,
+  shouldHideMenu: T = !1,
+  minChars: g = 0,
+  ...j
+}) => {
+  const [z, k] = u(!0), [r, x] = u(D ?? ""), [B, P] = u(!1), a = E(null), U = R("search-input"), H = R("search-menu"), X = ne(), q = E(null), [A, v] = u(!0);
+  K(() => {
+    r.length > 0 ? P(!0) : P(!1);
+  }, [r]);
+  const i = { value: r }, c = r ? [i, ...h] : [], G = ({ selectedItem: e, type: s }) => {
+    var F, S;
+    s !== w.stateChangeTypes.InputBlur && s !== w.stateChangeTypes.FunctionCloseMenu && (e === i ? (d == null || d(r), (F = a.current) == null || F.blur()) : e && (p == null || p(e), (S = a.current) == null || S.blur()), _());
+  }, J = ({ inputValue: e }) => {
+    const s = e ?? "";
+    x(s), o && ie(o, s);
+  }, {
+    isOpen: b,
+    openMenu: L,
+    getMenuProps: Q,
+    getInputProps: W,
+    getComboboxProps: Y,
+    highlightedIndex: V,
+    getItemProps: Z,
+    closeMenu: _
+  } = w({
+    items: c,
+    inputValue: r,
+    onInputValueChange: J,
+    itemToString: () => r,
+    // We will not change the search input after an item is selected.
+    defaultHighlightedIndex: 0,
+    onSelectedItemChange: G
+  });
+  K(() => {
+    b ? v(!1) : setTimeout(() => v(!0), 1);
+  }, [b, v]);
+  const ee = () => {
+    k(!1), L();
+  }, te = () => {
+    var e;
+    x(""), o && o(""), (e = a.current) == null || e.focus();
+  };
+  O(
+    ae ? "cmd+k" : "ctrl+k",
+    (e) => {
+      var s;
+      e.preventDefault(), (s = a.current) == null || s.focus();
+    },
+    { enableOnTags: ["INPUT"] }
+  ), O(
+    "esc",
+    (e) => {
+      var s;
+      (document == null ? void 0 : document.activeElement) === a.current && (e.preventDefault(), r.length > 0 ? te() : (s = a.current) == null || s.blur());
+    },
+    { enableOnTags: ["INPUT"] }
+  );
+  const N = (b || !A || M) && c.length > 0 && !T, se = N && !C && c.length <= 1 && r.length >= g, y = N || !$;
+  return /* @__PURE__ */ l("div", { className: "ui-search relative w-full", children: [
+    /* @__PURE__ */ l("div", { ...Y({ className: "w-full relative rounded-md" }), children: [
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-y-0 -top-0.5 left-0 hidden items-center md:flex", children: /* @__PURE__ */ t(ce, { className: "h-4 w-4 text-gray-darker" }) }),
+      /* @__PURE__ */ t(
+        "input",
+        {
+          ...W({
+            id: U,
+            type: "text",
+            className: I(
+              "ui-search-input",
+              "block w-full border-none pl-0 md:pl-7 text-base md:text-md text-gray-darker leading-p2 focus:ring-0",
+              m
+            ),
+            ref: a,
+            onFocus: ee,
+            onBlur: () => k(!0),
+            onChange: (e) => x(e.target.value),
+            ...j
+          })
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: "pointer-events-none absolute inset-y-0 right-0 hidden items-center space-x-1 pr-3 lg:flex", children: X && z ? /* @__PURE__ */ l(re, { children: [
+        /* @__PURE__ */ t(n, { char: "cmd" }),
+        " ",
+        /* @__PURE__ */ t(n, { char: "K" })
+      ] }) : null })
+    ] }),
+    /* @__PURE__ */ t("div", { className: "relative", children: T && /* @__PURE__ */ t(
+      "div",
+      {
+        ref: q,
+        className: `text-gray-500 absolute left-0 top-full transform
+                       text-xs transition-all duration-200
+                       ease-in-out ${B ? "translate-y-0 opacity-100" : "-translate-y-2 opacity-0"}`,
+        children: /* @__PURE__ */ l("span", { className: "inline-flex items-center gap-1", children: [
+          /* @__PURE__ */ t(n, { char: "Esc" }),
+          /* @__PURE__ */ t("span", { children: "Clear search" })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ l(
+      "ul",
+      {
+        ...Q({
+          id: H,
+          className: I(
+            "ui-search-menu",
+            "absolute top-10 divide-y divide-gray-light w-full xl:w-[590px] max-h-[75vh] border border-secondary-lighter shadow-xl mt-1 rounded overflow-auto z-20 bg-white",
+            { hidden: !N }
+          )
+        }),
+        children: [
+          y ? c.map((e, s) => /* @__PURE__ */ t(
+            "li",
+            {
+              ...Z({ key: s, item: e, index: s, className: "ui-search-item" }),
+              children: e === i ? C ? /* @__PURE__ */ t("div", { className: "p-3 text-center", children: /* @__PURE__ */ t(oe, { size: "small" }) }) : r.length < g ? /* @__PURE__ */ t(
+                "div",
+                {
+                  className: I(
+                    "cursor-pointer p-2",
+                    V === s ? "bg-blue-light text-white" : ""
+                  ),
+                  children: `Enter at least ${g} characters to begin search`
+                }
+              ) : null : f == null ? void 0 : f(e, V === s)
+            },
+            e === i ? "submit-value" : `search-item-${s}`
+          )) : null,
+          y && se ? /* @__PURE__ */ t("li", { className: "cursor-not-allowed p-2", children: "No results found" }) : null,
+          y && c.length < 5 ? /* @__PURE__ */ l("li", { className: "search-footer pointer-events sticky bottom-0 flex space-x-5 p-2 text-sm text-gray-dark", children: [
+            /* @__PURE__ */ l("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ t(n, { char: "up", className: "mr-0.5" }),
+              /* @__PURE__ */ t(n, { char: "down", className: "mr-2" }),
+              " navigate results"
+            ] }),
+            /* @__PURE__ */ l("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ t(n, { char: "enter", className: "mr-2" }),
+              " submit"
+            ] }),
+            /* @__PURE__ */ l("span", { className: "flex items-center", children: [
+              /* @__PURE__ */ t(n, { char: "esc", className: "mr-2" }),
+              " close search"
+            ] })
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+};
+export {
+  Ie as Search
+};

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

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface SidebarAccountProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    name: string;
+    description?: string;
+    image?: React.ReactElement;
+    icon?: React.ReactElement;
+    isResponsive?: boolean;
+    className?: string;
+}
+export declare const SidebarAccount: {
+    ({ name, description, image, icon, isResponsive, className, ...rest }: SidebarAccountProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,56 @@
+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 { ChevronRightIcon as g } from "../../icons/build/ChevronRightIcon.js";
+import { Avatar as S } from "../Avatar.js";
+const j = ({
+  name: n,
+  description: o,
+  image: h,
+  icon: x = /* @__PURE__ */ e(g, {}),
+  isResponsive: r = !1,
+  className: b,
+  ...y
+}) => {
+  const t = w(null), [s, a] = d(!r), [p, u] = d(!r), v = h ?? /* @__PURE__ */ e(S, { size: "tiny", name: n });
+  return N(() => {
+    if (!r) {
+      a(!0), u(!0);
+      return;
+    }
+    const i = () => {
+      t.current && (a(t.current.offsetWidth > 135), u(t.current.offsetWidth > 175 || t.current.offsetWidth < 135));
+    };
+    i();
+    const f = new ResizeObserver(i), c = t.current;
+    return c && f.observe(c), () => {
+      c && f.unobserve(c);
+    };
+  }, [r]), /* @__PURE__ */ l(
+    "button",
+    {
+      ref: t,
+      type: "button",
+      className: m(
+        "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",
+        // Full layout on xl screens
+        b
+      ),
+      ...y,
+      children: [
+        p && /* @__PURE__ */ e("div", { className: m(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 })
+        ] }),
+        s && /* @__PURE__ */ e("span", { className: "ml-auto", children: x })
+      ]
+    }
+  );
+};
+j.displayName = "Sidebar.Account";
+export {
+  j as SidebarAccount
+};

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

@@ -0,0 +1,10 @@
+import { default as React, ComponentType } from 'react';
+export interface SidebarButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    icon: ComponentType<React.SVGProps<SVGSVGElement>>;
+    label: string;
+    className?: string;
+}
+export declare const SidebarButton: {
+    ({ icon: Icon, label, className, ...rest }: SidebarButtonProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,21 @@
+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(
+  "button",
+  {
+    type: "button",
+    className: n(
+      "ui-sidebar-button flex w-full cursor-pointer items-center rounded px-4 py-2 hover:bg-gray-darker",
+      s
+    ),
+    ...a,
+    children: [
+      /* @__PURE__ */ e("div", { className: "p-1.5", children: /* @__PURE__ */ e(r, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ e("span", { className: "ml-2", children: t })
+    ]
+  }
+);
+i.displayName = "Sidebar.Button";
+export {
+  i as SidebarButton
+};

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+export interface SidebarFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+}
+export declare const SidebarFooter: {
+    ({ children, ...rest }: SidebarFooterProps): React.JSX.Element;
+    displayName: string;
+};

package/build/components/Sidebar/Sidebar.Footer.js

@@ -0,0 +1,9 @@
+import { jsxs as o, jsx as a } from "react/jsx-runtime";
+const d = ({ children: r, ...e }) => /* @__PURE__ */ o("div", { className: "ui-sidebar-footer py-3", ...e, children: [
+  /* @__PURE__ */ a("div", { className: "mx-4 border-t border-secondary-darker pb-2" }),
+  r
+] });
+d.displayName = "Sidebar.Footer";
+export {
+  d as SidebarFooter
+};

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

@@ -0,0 +1,10 @@
+import { default as React, ComponentType } from 'react';
+export interface SidebarHeadingProps {
+    icon: ComponentType<React.SVGProps<SVGSVGElement>>;
+    label: string;
+    className?: string;
+}
+export declare const SidebarHeading: {
+    ({ icon: Icon, label, className }: SidebarHeadingProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,10 @@
+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 })
+] });
+m.displayName = "Sidebar.Heading";
+export {
+  m as SidebarHeading
+};

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

@@ -0,0 +1,24 @@
+import { default as React, ComponentType } from 'react';
+type SidebarLinkAlign = "center" | "left" | "right";
+export interface SidebarLinkProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    isActive?: boolean;
+    icon?: ComponentType<React.SVGProps<SVGSVGElement>>;
+    isSubMenuItem?: boolean;
+    align?: SidebarLinkAlign;
+    children: React.ReactNode;
+    classNames?: {
+        text?: string;
+    };
+}
+export declare const SidebarLink: {
+    ({ isActive, icon: Icon, isSubMenuItem, align, children, classNames, ...rest }: SidebarLinkProps): React.JSX.Element;
+    displayName: string;
+};
+export interface SidebarSeparatorProps {
+    className?: string;
+}
+export declare const SidebarSeparator: {
+    ({ className }: SidebarSeparatorProps): React.JSX.Element;
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,56 @@
+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 { Dot as k } from "../Dot/Dot.js";
+const j = ({
+  isActive: t = !1,
+  icon: i,
+  isSubMenuItem: r,
+  align: h,
+  children: d,
+  classNames: s,
+  ...p
+}) => {
+  const e = g(null), [a, m] = l(!0), [x, y] = l(!0);
+  return w(() => {
+    const c = () => {
+      e.current && (m(e.current.offsetWidth >= 140), y(e.current.offsetWidth > 174 || e.current.offsetWidth < 140));
+    };
+    c();
+    const f = new ResizeObserver(c);
+    return e.current && f.observe(e.current), () => {
+      f.disconnect();
+    };
+  }, []), /* @__PURE__ */ u(
+    "button",
+    {
+      ref: e,
+      type: "button",
+      className: n(
+        "ui-sidebar-link",
+        "flex w-full items-center rounded leading-none transition-colors xl:justify-start",
+        !r && "h-10",
+        {
+          "bg-primary text-white hover:bg-primary-dark": t,
+          "text-gray hover:bg-gray-darker": !t,
+          "justify-start px-6 py-2": r,
+          "justify-center px-6 py-3": !r
+        }
+      ),
+      ...p,
+      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" })
+      ]
+    }
+  );
+};
+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";
+export {
+  j as SidebarLink,
+  N as SidebarSeparator
+};

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

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface SidebarMenuProps {
+    [key: string]: any;
+    content: React.ReactNode;
+    children: React.ReactNode;
+}
+export declare const SidebarMenu: {
+    ({ content, children, ...rest }: SidebarMenuProps): React.JSX.Element;
+    displayName: string;
+};

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

@@ -0,0 +1,28 @@
+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,
+  {
+    interactive: !0,
+    trigger: "mouseenter",
+    hideOnClick: "toggle",
+    appendTo: d,
+    placement: "right",
+    offset: [0, 4],
+    arrow: !1,
+    className: t(
+      "ui-sidebar-menu",
+      a.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 })
+  }
+);
+m.displayName = "Sidebar.Menu";
+export {
+  m as SidebarMenu
+};

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

@@ -0,0 +1,7 @@
+const a = "_main_1bcuo_1", n = {
+  main: a
+};
+export {
+  n as default,
+  a as main
+};