prometeo-design-system 2.8.4 → 2.8.7

package/dist/components/SelectSearch/SelectSearch.js

@@ -0,0 +1,101 @@
+import { jsx as g } from "react/jsx-runtime";
+import { getAccessorValue as d } from "../../lib/utils.js";
+import { useRef as M, useEffect as k, useCallback as w, useMemo as I } from "react";
+import { useAutocomplete as N } from "../Autocomplete/useAutocomplete.js";
+import O from "../Select/Select.js";
+const j = (e) => {
+  const a = M(null);
+  k(() => {
+    e.controls && (e.controls.current = a.current);
+  }, [e.controls]);
+  const { asyncMode: t = "fetch_in_open" } = e, V = (n, o, l) => {
+    const b = {
+      options: n.options,
+      fetcher: n.fetcher,
+      asyncMode: o,
+      debounceDelay: n.debounceDelay,
+      minCharacters: n.minCharacters,
+      disabled: n.disabled,
+      optionValue: n.optionValue,
+      optionLabel: n.optionLabel,
+      onFetchingStart: () => {
+        o === "fetch_on_type" && l.current?.open();
+      },
+      onTypeStart: () => {
+        !n?.fetcher && l.current?.open();
+      },
+      inputRef: () => l.current?.searchInputRef,
+      subscribeOpenChange: l.current?.subscribeOpenChange,
+      name: n.name
+    };
+    return n.multiple ? {
+      ...b,
+      multiple: !0,
+      controlledValue: n.value,
+      onChange: n.onChange
+    } : {
+      ...b,
+      multiple: !1,
+      controlledValue: n.value,
+      onChange: n.onChange
+    };
+  }, { inputValue: C, setInputValue: _, filteredOptions: u, isLoading: i, value: c, onOptionClick: y, cleanInputValue: v } = N(V(e, t, a)), L = w(() => t === "fetch_on_type" ? i : !1, [t, i]), s = I(() => e.multiple ? c.map((n) => d(n, e.optionValue)) : c ? d(c, e.optionValue) : void 0, [c, e.optionValue, e.multiple]), r = (n) => {
+    const o = u.find((l) => d(l, e.optionValue) === n.id);
+    o && y(o);
+  }, { displayMode: S = e.multiple ? "chips" : "compact", dropdownOptions: p, overflow: m = "scroll", onChange: P, ...f } = e.selectComponentProps || {}, h = {
+    controledSearchValue: C,
+    onSearchValueChange: t === "fetch_on_type" ? _ : void 0,
+    onSearchClear: t === "fetch_on_type" ? v : void 0,
+    inputSearchPlaceholder: e.inputSearchPlaceholder,
+    isLoading: L(),
+    ...p || {}
+  };
+  return e.multiple ? /* @__PURE__ */ g(
+    O,
+    {
+      disabled: e.disabled,
+      className: e.className,
+      name: e.name,
+      overflow: m,
+      ...f,
+      multiple: !0,
+      value: s,
+      label: e.label || "",
+      options: u,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onOptionClick: r,
+      displayMode: S,
+      controls: a,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: h,
+      isLoading: t === "fetch_in_open" ? i : !1
+    }
+  ) : /* @__PURE__ */ g(
+    O,
+    {
+      disabled: e.disabled,
+      ...f,
+      className: e.className,
+      overflow: m,
+      name: e.name,
+      multiple: !1,
+      value: s,
+      label: e.label || "",
+      options: u,
+      optionValue: e.optionValue,
+      optionLabel: e.optionLabel,
+      renderOption: e.renderOption,
+      onOptionClick: r,
+      displayMode: "compact",
+      controls: a,
+      emptyMessage: "Use el buscador para obtener las opciones disponibles",
+      dropdownOptions: h,
+      isLoading: t === "fetch_in_open" ? i : !1
+    }
+  );
+};
+export {
+  j as default
+};

package/dist/components/Shared/Chip.js

@@ -0,0 +1,55 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { cn as r } from "../../lib/cn.js";
+import { memo as p } from "react";
+import { Close as m } from "../../Icons/Icons.js";
+const x = {
+  default: {
+    container: "text-neutral-default-default border-neutral-default-default ",
+    icon: ""
+  },
+  error: {
+    container: "",
+    icon: ""
+  },
+  success: {
+    container: "",
+    icon: ""
+  }
+}, l = {
+  icon: " text-neutral-default-disabled",
+  container: " border-neutral-strong-default text-neutral-default-disabled"
+}, s = ({ id: i, label: c, onRemove: a, className: u, disabled: e, variant: d = "default", tabIndex: n }) => /* @__PURE__ */ f(
+  "div",
+  {
+    tabIndex: n,
+    className: r(
+      "inline-flex max-w-[calc(50%-0.25rem)] items-center gap-1 px-2 py-1 bg-inherit text-xs rounded-lg border h-[30px]",
+      x[d].container,
+      e && l.container
+    ),
+    children: [
+      /* @__PURE__ */ t("span", { className: "truncate w-max ", children: c }),
+      a && /* @__PURE__ */ t(
+        "button",
+        {
+          onMouseDown: (o) => {
+            e || (o.stopPropagation(), o.preventDefault(), a?.(i));
+          },
+          className: r(
+            "shrink-0 p-0.5 transition-all duration-200 hover:text-neutral-default-hover cursor-pointer z-50 text-neutral-default-default hover:scale-105",
+            e && "cursor-default hover:scale-100",
+            u
+          ),
+          type: "button",
+          tabIndex: n,
+          children: /* @__PURE__ */ t(m, { size: 18, className: r(e && l.icon) })
+        }
+      )
+    ]
+  }
+);
+s.displayName = "Chip";
+const g = p(s);
+export {
+  g as default
+};

package/dist/components/Shared/HelperComponent.js

@@ -0,0 +1,24 @@
+import { jsx as t, jsxs as i } from "react/jsx-runtime";
+import { memo as o } from "react";
+import { cn as r } from "../../lib/cn.js";
+import { Check as n, Error as d, Info as u } from "../../Icons/Icons.js";
+const a = (e) => {
+  const { variant: s, className: m } = e, l = {
+    default: "text-neutral-medium-default pt-[1px]",
+    error: "text-error-medium-default pt-[1px]",
+    success: "text-success-medium-default"
+  }, c = {
+    default: /* @__PURE__ */ t(u, { size: 16, className: "text-neutral-medium-default " }),
+    error: /* @__PURE__ */ t(d, { size: 16, className: "text-error-medium-default" }),
+    success: /* @__PURE__ */ t(n, { size: 16, className: "text-success-medium-default" })
+  };
+  return /* @__PURE__ */ t("div", { ref: e.ref, className: r("pl-3 mt-1", m), children: typeof e.children == "string" ? /* @__PURE__ */ i("div", { className: "flex gap-0.5 items-start", children: [
+    c[s],
+    /* @__PURE__ */ t("p", { className: r(" prometeo-fonts-body-small", l[s]), children: e.children })
+  ] }) : e.children });
+};
+a.displayName = "HelperText";
+const h = o(a);
+export {
+  h as default
+};

package/dist/components/Sidebar/SecondaryBar/SecondaryBar.js

@@ -0,0 +1,62 @@
+import { jsx as r, Fragment as l, jsxs as p } from "react/jsx-runtime";
+import { cn as o } from "../../../lib/cn.js";
+import { useRef as x, useState as g, useLayoutEffect as v } from "react";
+import { useSidebarContext as S } from "../context/SidebarContext.js";
+import { useSecondaryBarAnimation as N } from "./hooks/useSecondaryBarAnimation.js";
+const d = ({
+  children: e,
+  isOpen: t = !1,
+  className: f = "",
+  width: u = "w-96",
+  action: m,
+  primarySidebarCollapsed: b,
+  onClose: h
+}) => {
+  const s = x(null), [c, y] = g({ left: 0, width: 0 }), { primarySidebarRef: a, tabBarRef: n } = S();
+  return v(() => {
+    if (a?.current && n?.current) {
+      const i = a.current.getBoundingClientRect();
+      y({
+        left: i.width + n.current.offsetWidth,
+        width: i.width
+      });
+    }
+  }, [a, t, b, n]), N(s, t), /* @__PURE__ */ r(l, { children: t && /* @__PURE__ */ p(l, { children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: "fixed inset-0 bg-black/95 z-40",
+        style: {
+          left: c.left
+        },
+        onClick: h
+      }
+    ),
+    /* @__PURE__ */ r(
+      "div",
+      {
+        ref: s,
+        className: o(
+          "h-screen bg-neutral-default-default border-r border-neutral-strong-default flex flex-col secondary-bar shrink-0",
+          "absolute top-0 z-50",
+          u,
+          f
+        ),
+        style: {
+          left: c.left
+        },
+        "data-action": m,
+        children: /* @__PURE__ */ r("div", { className: "secondary-bar-content", children: e })
+      }
+    )
+  ] }) });
+}, R = ({ children: e, className: t }) => /* @__PURE__ */ r("div", { className: o("h-16 ", t), children: e }), w = ({ children: e, className: t }) => /* @__PURE__ */ r("div", { className: o("flex-1 overflow-y-auto p-4", t), children: e }), B = ({ children: e, className: t }) => /* @__PURE__ */ r("div", { className: o("p-4 border-t border-neutral-strong-default", t), children: e }), C = ({ className: e }) => /* @__PURE__ */ r("div", { className: o("flex-1", e) }), A = Object.assign(d, {
+  Root: d,
+  Header: R,
+  Content: w,
+  Footer: B,
+  Spacer: C
+});
+export {
+  A as SecondaryBar
+};

package/dist/components/Sidebar/SecondaryBar/hooks/useSecondaryBarAnimation.js

@@ -0,0 +1,59 @@
+import { useGSAP as a } from "@gsap/react";
+import t from "gsap";
+const u = (r, n) => {
+  a(
+    () => {
+      if (!r.current) return;
+      const e = r.current, o = document.querySelector('[data-main-content="true"]');
+      if (n) {
+        t.fromTo(
+          e,
+          {
+            width: "0rem",
+            opacity: 0
+          },
+          {
+            width: "40rem",
+            opacity: 1,
+            duration: 0.4,
+            ease: "power2.out"
+          }
+        ), o && t.to(o, {
+          marginLeft: e.offsetWidth + "px",
+          duration: 0.4,
+          ease: "power2.out"
+        });
+        const i = e.querySelectorAll(".secondary-bar-content > *");
+        i.length > 0 && t.fromTo(
+          i,
+          {
+            y: 20,
+            opacity: 0
+          },
+          {
+            y: 0,
+            opacity: 1,
+            duration: 0.3,
+            stagger: 0.05,
+            delay: 0.1,
+            ease: "power1.out"
+          }
+        );
+      } else
+        t.to(e, {
+          width: "0rem",
+          opacity: 0,
+          duration: 0.3,
+          ease: "power2.in"
+        }), o && t.to(o, {
+          marginLeft: "0px",
+          duration: 0.3,
+          ease: "power2.in"
+        });
+    },
+    { scope: r, dependencies: [n] }
+  );
+};
+export {
+  u as useSecondaryBarAnimation
+};

package/dist/components/Sidebar/SidebarComposable.js

@@ -0,0 +1,84 @@
+import { jsx as t, jsxs as x } from "react/jsx-runtime";
+import { cn as o } from "../../lib/cn.js";
+import { forwardRef as p, useRef as f, useCallback as w, useEffect as b } from "react";
+import { useSidebarContext as g } from "./context/SidebarContext.js";
+import { SidebarProvider as S } from "./hooks/SidebarProvider.js";
+import { useNavbarAnimations as R } from "./ui/useNavbarAnimation.js";
+import y from "../TabSwitch/TabSwitch.js";
+import { CloseNavBarDesktop as v } from "../../Icons/Icons.js";
+const C = p(
+  ({ children: r, isCollapsed: e = !1, className: c = "", tabs: u = [], currentTabName: h }, a) => {
+    const n = f(null), i = f(null), { registerPrimarySidebar: d, registerTabBar: m } = g(), N = w((s) => {
+      n.current = s, typeof a == "function" ? a(s) : a && (a.current = s);
+    }, [a]);
+    return b(() => {
+      n.current && d(n);
+    }, [d]), b(() => {
+      i.current && m(i);
+    }, [m]), R(n, e, !1), /* @__PURE__ */ x(
+      "div",
+      {
+        className: o(
+          "flex"
+        ),
+        children: [
+          u.length > 0 && /* @__PURE__ */ t(
+            y,
+            {
+              tabs: u,
+              ref: i,
+              activeColor: "var(--neutral-900)",
+              currentTabName: h
+            }
+          ),
+          /* @__PURE__ */ t(
+            "div",
+            {
+              ref: N,
+              className: `bg-neutral-default-default hidden overflow-hidden h-screen md:flex flex-col border-r border-neutral-strong-default transition-all duration-300 relative z-50 shrink-0
+          ${e ? "w-16" : "w-64"} ${c}`,
+              children: r
+            }
+          )
+        ]
+      }
+    );
+  }
+), l = p(
+  (r, e) => /* @__PURE__ */ t(S, { children: /* @__PURE__ */ t(C, { ...r, ref: e }) })
+);
+l.displayName = "SidebarRoot";
+const j = ({ isCollapsed: r, onToggleCollapse: e }) => /* @__PURE__ */ t("div", { className: o("flex  mt-5 mb-4 justify-end mr-5 container-icon-collapsade", r && ""), children: /* @__PURE__ */ t(
+  "button",
+  {
+    type: "button",
+    onClick: e,
+    title: r ? "Expandir Navbar" : "Contraer Navbar",
+    "aria-label": r ? "Expandir Navbar" : "Contraer Navbar",
+    className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
+    children: r ? /* @__PURE__ */ t(v, { size: 24, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ t(v, { size: 24, className: "rotate-0 transition-transform duration-300" })
+  }
+) }), z = ({ children: r, className: e }) => /* @__PURE__ */ t("div", { className: `${e} sidebar-header`, children: r }), B = ({ className: r }) => /* @__PURE__ */ t("div", { className: o("px-3 flex justify-center items-center w-full mb-4", r), children: /* @__PURE__ */ t("div", { className: "border-b border-neutral-strong-default border w-full" }) }), k = ({ children: r, className: e }) => /* @__PURE__ */ t("div", { className: e, children: r }), E = ({ className: r, size: e = "auto" }) => /* @__PURE__ */ t("div", { className: o((() => {
+  switch (e) {
+    case "auto":
+      return "flex-grow";
+    case "small":
+      return "h-2 w-2";
+    case "medium":
+      return "h-4 w-4";
+    case "large":
+      return "h-8 w-8";
+  }
+})(), r) }), I = ({ children: r, className: e }) => /* @__PURE__ */ t("div", { className: e, children: r }), q = Object.assign(l, {
+  Root: l,
+  CollapseButton: j,
+  Header: z,
+  Divider: B,
+  Content: k,
+  Spacer: E,
+  Footer: I
+});
+export {
+  j as CollapseButton,
+  q as Sidebar
+};

package/dist/components/Sidebar/components/NavigationLink.js

@@ -0,0 +1,34 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { cn as m } from "../../../lib/cn.js";
+const d = ({
+  children: r,
+  icon: n,
+  label: t,
+  href: a,
+  onClick: l,
+  isActive: s = !1,
+  className: i
+}) => /* @__PURE__ */ o(
+  a ? "a" : "button",
+  {
+    href: a,
+    onClick: l,
+    className: m(
+      "nav-link-item",
+      "flex items-center w-full px-3 py-2 text-left",
+      "hover:bg-neutral-medium-default transition-colors rounded-lg",
+      "focus:outline-none focus:ring-2 focus:ring-primary-default-default",
+      s && "bg-neutral-medium-default",
+      i
+    ),
+    children: [
+      n && /* @__PURE__ */ e("div", { className: "nav-icon-wrapper mr-3 flex-shrink-0", children: /* @__PURE__ */ e("div", { className: "nav-icon flex items-center justify-center w-5 h-5", children: n }) }),
+      t && /* @__PURE__ */ e("span", { className: "nav-label text-sm text-neutral-strong-default", children: t }),
+      r
+    ]
+  }
+);
+export {
+  d as NavigationLink,
+  d as default
+};

package/dist/components/Sidebar/components/badge.js

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import { cn as o } from "../../../lib/cn.js";
+const g = ({
+  count: s,
+  maxCount: t = 9,
+  className: n = "",
+  size: a = "medium",
+  variant: l = "primary",
+  showZero: i = !1
+}) => {
+  const e = s, u = e > t ? `+${t}` : e;
+  if (e === 0 && !i) return null;
+  const d = {
+    small: "w-4.5 h-4.5 text-xs ",
+    medium: "w-5 h-5 text-xs",
+    large: "w-6 h-6 text-sm"
+  }, m = {
+    primary: "bg-primary-default-default text-neutral-strong-default",
+    secondary: "bg-neutral-medium-default text-neutral-strong-default",
+    success: "bg-green-500 text-white",
+    warning: "bg-yellow-500 text-black",
+    danger: "bg-red-500 text-white"
+  };
+  return /* @__PURE__ */ r("div", { className: o(
+    "rounded-full flex items-center justify-center font-medium ",
+    d[a],
+    m[l],
+    n
+  ), children: /* @__PURE__ */ r("span", { children: u }) });
+};
+export {
+  g as Badge
+};

package/dist/components/Sidebar/components/changue-account.js

@@ -0,0 +1,31 @@
+import { jsx as e } from "react/jsx-runtime";
+import { CardProfile as n } from "../../CardProfile/CardProfile.js";
+function c({
+  sessions: l,
+  handleTokenLogin: o
+}) {
+  return /* @__PURE__ */ e("div", { className: "profile-options-container w-full ", children: l?.map((a) => /* @__PURE__ */ e(
+    "button",
+    {
+      className: "w-full  ",
+      onClick: () => o?.(a.token),
+      children: /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+        n.Content,
+        {
+          onClick: () => {
+            console.log("hola");
+          },
+          isExpanded: !1,
+          nameUser: a.name,
+          nameArea: a?.areaId?.name,
+          nameCompany: a.companyId.name,
+          cardProfile: /* @__PURE__ */ e(n.Image, { isExpanded: !1 })
+        }
+      ) })
+    },
+    a._id
+  )) });
+}
+export {
+  c as default
+};

package/dist/components/Sidebar/components/collapse-button.js

@@ -0,0 +1,18 @@
+import { jsx as a } from "react/jsx-runtime";
+import { CloseNavBarDesktop as t } from "../../../Icons/Icons.js";
+const i = ({
+  isCollapsed: r,
+  onToggle: o
+}) => /* @__PURE__ */ a("div", { className: "", children: /* @__PURE__ */ a(
+  "button",
+  {
+    onClick: o,
+    title: r ? "Expandir Navbar" : "Contraer Navbar",
+    "aria-label": r ? "Expandir Navbar" : "Contraer Navbar",
+    className: "cursor-pointer text-neutral-default-default hover:text-primary-default transition-colors duration-300",
+    children: r ? /* @__PURE__ */ a(t, { size: 34, className: "rotate-180 transition-transform duration-300" }) : /* @__PURE__ */ a(t, { size: 34, className: "rotate-0 transition-transform duration-300" })
+  }
+) });
+export {
+  i as NavbarCollapseButton
+};

package/dist/components/Sidebar/components/company-logo.js

@@ -0,0 +1,12 @@
+import { jsx as e } from "react/jsx-runtime";
+const r = ({ logoUrl: l, companyName: s }) => /* @__PURE__ */ e("div", { className: "w-full flex justify-center items-center p-2 h-20", children: /* @__PURE__ */ e(
+  "img",
+  {
+    src: l,
+    className: "h-2/3 rounded-full",
+    alt: s ?? ""
+  }
+) });
+export {
+  r as CompanyLogo
+};

package/dist/components/Sidebar/components/nav-actions.js

@@ -0,0 +1,98 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import { cn as u } from "../../../lib/cn.js";
+import { motion as a, AnimatePresence as h } from "framer-motion";
+import { Badge as w } from "./badge.js";
+const j = ({
+  linkActions: d,
+  onClick: m,
+  activeAction: f
+}) => /* @__PURE__ */ e("nav", { className: "flex flex-col gap-1", children: d?.map((p, s) => {
+  const { isView: i = !1, actionName: r, title: v, icon: o, count: n, viewAccess: c } = p || {}, x = (typeof i == "function" ? i() : i !== !1) && (!c || c()), t = f === r;
+  return x && /* @__PURE__ */ e(
+    a.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      transition: {
+        duration: 0.4,
+        delay: s * 0.03,
+        ease: "easeOut"
+      },
+      className: "relative flex justify-center w-full items-center px-3",
+      children: /* @__PURE__ */ l(
+        "button",
+        {
+          onClick: () => {
+            m?.(r);
+          },
+          className: u(
+            "nav-link-item flex rounded-lg cursor-pointer relative overflow-hidden  h-10 ",
+            "transition-all duration-300 ease-out w-full",
+            "group hover:bg-neutral-medium-selected",
+            t ? "text-primary-default-default bg-neutral-medium-selected" : "text-neutral-default-default"
+          ),
+          children: [
+            /* @__PURE__ */ e(h, { mode: "wait", children: t && /* @__PURE__ */ e(
+              a.div,
+              {
+                layoutId: "nav-active-bg",
+                className: "absolute inset-0 bg-neutral-medium-selected rounded-lg",
+                initial: !1,
+                animate: { opacity: 1 },
+                exit: { opacity: 0 },
+                transition: {
+                  type: "tween",
+                  duration: 0.25,
+                  ease: "easeInOut"
+                }
+              }
+            ) }),
+            /* @__PURE__ */ l(
+              a.div,
+              {
+                className: "nav-content-wrapper flex items-center justify-between gap-3 px-3 relative z-10 w-full",
+                animate: {
+                  x: 0
+                },
+                transition: {
+                  duration: 0.25,
+                  ease: "easeOut"
+                },
+                children: [
+                  /* @__PURE__ */ l("div", { className: "flex items-center gap-3", children: [
+                    /* @__PURE__ */ e(
+                      a.div,
+                      {
+                        className: "nav-icon-wrapper flex items-center justify-center flex-shrink-0",
+                        animate: {
+                          scale: t ? 1.05 : 1
+                        },
+                        transition: {
+                          duration: 0.25,
+                          ease: "easeOut"
+                        },
+                        children: typeof o == "function" ? o({
+                          size: 24,
+                          className: u(
+                            "nav-icon transition-colors duration-250 ease-out",
+                            t ? "text-primary-default-default" : "text-neutral-default-default group-hover:text-white-prometeo"
+                          )
+                        }) : null
+                      }
+                    ),
+                    /* @__PURE__ */ e("span", { className: "nav-label whitespace-nowrap text-sm font-semibold ", children: v })
+                  ] }),
+                  /* @__PURE__ */ e("div", { className: "badge-in-link", children: n && n >= 1 ? /* @__PURE__ */ e(w, { count: n, maxCount: 9, className: "" }) : "" })
+                ]
+              }
+            )
+          ]
+        }
+      )
+    },
+    s
+  );
+}) });
+export {
+  j as NavBarActions
+};