@xola/ui-kit 3.4.6 → 3.6.0

package/build/components/Search.js

@@ -1,174 +0,0 @@
-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 { debounce as le } from "lodash-es";
-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 { Key as n } from "./Key.js";
-import { Spinner as ce } from "./Spinner.js";
-import { SearchIcon as oe } from "../icons/src/SearchIcon.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(oe, { 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(ce, { 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

@@ -1,13 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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 { Avatar as g } from "../Avatar.js";
-import { ChevronRightIcon as S } from "../../icons/src/ChevronRightIcon.js";
-const j = ({
-  name: n,
-  description: o,
-  image: h,
-  icon: x = /* @__PURE__ */ e(S, {}),
-  isResponsive: r = !1,
-  className: b,
-  ...y
-}) => {
-  const t = w(null), [s, a] = d(!r), [p, u] = d(!r), v = h ?? /* @__PURE__ */ e(g, { 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

@@ -1,10 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

@@ -1,56 +0,0 @@
-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 = ({
-  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 >= 140 || e.current.offsetWidth < 100));
-    };
-    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-11",
-        {
-          "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(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" })
-      ]
-    }
-  );
-};
-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

@@ -1,10 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

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

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

@@ -1,58 +0,0 @@
-import { default as React } from 'react';
-interface NotificationDrawer {
-    count: number;
-    content: React.ReactNode;
-    title: string;
-    hide?: boolean;
-    onClose?: () => void;
-}
-export interface SidebarProps {
-    logo?: React.ReactElement;
-    footer: React.ReactElement;
-    notifications?: {
-        announcements?: NotificationDrawer;
-        notices?: NotificationDrawer;
-    };
-    isFixed?: boolean;
-    isStickyHeader?: boolean;
-    isStickyFooter?: boolean;
-    isLeftDrawerOpen?: boolean;
-    isRightDrawerOpen?: boolean;
-    children: React.ReactNode;
-    className?: string;
-    onLogoClick: () => void;
-    handleDrawerStateChange?: (drawer: "left" | "right") => void;
-    onSidebarResize?: (width: number) => void;
-}
-export declare const Sidebar: {
-    ({ logo, footer, notifications, isFixed, isStickyHeader, isStickyFooter, isLeftDrawerOpen, isRightDrawerOpen, children, className, onLogoClick, handleDrawerStateChange, onSidebarResize, }: SidebarProps): React.JSX.Element;
-    Account: {
-        ({ name, description, image, icon, isResponsive, className, ...rest }: import('./Sidebar.Account').SidebarAccountProps): React.JSX.Element;
-        displayName: string;
-    };
-    Button: {
-        ({ icon: Icon, label, className, ...rest }: import('./Sidebar.Button').SidebarButtonProps): React.JSX.Element;
-        displayName: string;
-    };
-    Footer: {
-        ({ children, ...rest }: import('./Sidebar.Footer').SidebarFooterProps): React.JSX.Element;
-        displayName: string;
-    };
-    Link: {
-        ({ isActive, icon: Icon, isSubMenuItem, align, children, classNames, ...rest }: import('./Sidebar.Link').SidebarLinkProps): React.JSX.Element;
-        displayName: string;
-    };
-    Separator: {
-        ({ className }: import('./Sidebar.Link').SidebarSeparatorProps): React.JSX.Element;
-        displayName: string;
-    };
-    Menu: {
-        ({ content, children, ...rest }: import('./Sidebar.Menu').SidebarMenuProps): React.JSX.Element;
-        displayName: string;
-    };
-    Heading: {
-        ({ icon: Icon, label, className }: import('./Sidebar.Heading').SidebarHeadingProps): React.JSX.Element;
-        displayName: string;
-    };
-};
-export {};