prometeo-design-system 3.1.4 → 3.1.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "3.1.4",
+  "version": "3.1.5",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
@@ -186,6 +186,22 @@
       "types": "./dist/Scrollable.d.ts",
       "import": "./dist/Scrollable.es.js"
     },
+    "./PyrionNavigationDrawer": {
+      "types": "./dist/PyrionNavigationDrawer.d.ts",
+      "import": "./dist/PyrionNavigationDrawer.es.js"
+    },
+    "./usePyrionNavigation": {
+      "types": "./dist/usePyrionNavigation.d.ts",
+      "import": "./dist/usePyrionNavigation.es.js"
+    },
+    "./NotificationCard": {
+      "types": "./dist/NotificationCard.d.ts",
+      "import": "./dist/NotificationCard.es.js"
+    },
+    "./TicketCard": {
+      "types": "./dist/TicketCard.d.ts",
+      "import": "./dist/TicketCard.es.js"
+    },
     "./styles": "./dist/styles.css",
     "./intellisense": "./src/styles/intellisense.css"
   },

package/dist/Avatar.d.ts

@@ -1,4 +0,0 @@
-export {}
-import PrometeoDesignSystem from './exports/Avatar'
-export default PrometeoDesignSystem
-export {}

package/dist/Avatar.es.js

@@ -1,94 +0,0 @@
-import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import { g as j } from "./useLabelBackground-BDIHUdND.js";
-import { c as i } from "./cn-B6yFEsav.js";
-import { useState as C, useRef as u, useLayoutEffect as v } from "react";
-function R({
-  imageUrl: t,
-  sizeImage: a = "md",
-  sizeFallback: s = "md",
-  fallbackText: d = "Selene Soluciones",
-  subImageUrl: x
-}) {
-  const [m, f] = C(!1), n = t && t.trim() !== "" && !m, h = (l) => l.split(" ").map((w) => w.charAt(0)).join("").toUpperCase().slice(0, 2), c = {
-    xxxs: "w-6.5 h-6.5",
-    xxs: "w-8 h-8",
-    xs: "w-10 h-10",
-    sm: "w-16 h-16",
-    md: "w-24 h-24",
-    lg: "w-32 h-32",
-    xl: "w-40 h-40"
-  }, g = {
-    xxxs: "text-[12px]",
-    xxs: "text-xs",
-    xs: "text-sm",
-    sm: "text-lg",
-    md: "text-2xl",
-    lg: "text-3xl",
-    xl: "text-4xl"
-  }, b = {
-    xxxs: "w-3 h-3",
-    xxs: "w-[18px] h-[18px] bottom-0 right-0 translate-x-1/3 translate-y-1/3",
-    xs: "w-5 h-5",
-    sm: "w-8 h-8",
-    md: "w-12 h-12 border-3",
-    lg: "w-16 h-16 border-4",
-    xl: "w-20 h-20 border-5"
-  }, p = n ? a : s, r = u(null), o = u(null);
-  return v(() => {
-    if (!r.current || !o.current) return;
-    const l = j(r.current);
-    o.current.style.borderColor = l;
-  }, []), /* @__PURE__ */ e.jsxs("div", { className: "relative inline-block min-w-max ", ref: r, children: [
-    n ? /* @__PURE__ */ e.jsx(
-      "img",
-      {
-        onError: () => {
-          f(!0);
-        },
-        src: t,
-        className: `rounded-full object-cover ${c[a]}`,
-        alt: "Profile",
-        draggable: !1
-      }
-    ) : /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        className: ` flex items-center justify-center rounded-full aspect-square ${c[s]}`,
-        style: { backgroundColor: "#C6D2FF" },
-        children: /* @__PURE__ */ e.jsx(
-          "span",
-          {
-            className: i(
-              "text-[#312C85] font-semibold",
-              g[s]
-            ),
-            children: h(d)
-          }
-        )
-      },
-      "initials"
-    ),
-    x && /* @__PURE__ */ e.jsx(
-      "div",
-      {
-        className: i(
-          "absolute bottom-[-10px] right-[-10px] rounded-full border-1 overflow-hidden bg-gray-900",
-          b[p]
-        ),
-        ref: o,
-        children: /* @__PURE__ */ e.jsx(
-          "img",
-          {
-            draggable: !1,
-            src: x,
-            alt: "Sub badge",
-            className: "w-full h-full object-cover"
-          }
-        )
-      }
-    )
-  ] });
-}
-export {
-  R as default
-};

package/dist/Button.d.ts

@@ -1,6 +0,0 @@
-export * from './exports/Button'
-export {}
-import PrometeoDesignSystem from './exports/Button'
-export default PrometeoDesignSystem
-export * from './exports/Button'
-export {}

package/dist/Button.es.js

@@ -1,400 +0,0 @@
-import { j as t } from "./jsx-runtime-GkKLlHH4.js";
-import { memo as A, useMemo as E } from "react";
-import M from "./Spinner.es.js";
-import { c as p } from "./index-BOQuZ0gG.js";
-import { c as m } from "./cn-B6yFEsav.js";
-const v = {
-  small: {
-    container: "h-10 px-4 py-2"
-  },
-  medium: {
-    container: "h-12 px-6 py-2"
-  },
-  large: {
-    container: "h-14 px-6 py-2"
-  }
-}, e = {
-  fill: {
-    primary: {
-      container: ` bg-primary-default-default border-primary-default-default
-            hover:bg-primary-default-hover
-            active:bg-primary-default-focused            
-            `,
-      label: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!",
-      icon: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
-    },
-    secondary: {
-      container: `bg-neutral-medium-default border-neutral-medium-default
-            hover:bg-neutral-medium-hover
-            active:bg-neutral-medium-pressed`,
-      label: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!",
-      icon: "text-neutral-strong-default! group-hover:text-neutral-strong-hover! group-active:text-neutral-strong-pressed!"
-    },
-    success: {
-      container: "bg-success-default-default border-success-default-default hover:bg-success-default-hover active:bg-success-default-pressed",
-      label: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed",
-      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
-    },
-    error: {
-      container: "bg-error-default-default hover:bg-error-default-hover active:bg-error-default-pressed",
-      label: "text-neutral-strong-default group-hover:text-neutral-strong-hover group-active:text-neutral-strong-pressed",
-      icon: "text-neutral-strong-default group-hover:text-neutral-strong-hover group-active:text-neutral-strong-pressed"
-    },
-    warning: {
-      container: "bg-warning-default-default hover:bg-warning-default-hover active:bg-warning-default-pressed",
-      label: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed",
-      icon: "text-neutral-weak-default group-hover:text-neutral-weak-hover group-active:text-neutral-weak-pressed"
-    },
-    disabled: {
-      container: "bg-primary-medium-disabled border-transparent cursor-default!",
-      label: "text-neutral-strong-disabled group-hover:text-neutral-strong-disabled group-active:text-neutral-strong-disabled",
-      icon: "text-neutral-strong-disabled group-hover:text-neutral-strong-disabled group-active:text-neutral-strong-disabled"
-    }
-  },
-  outline: {
-    primary: {
-      container: `bg-transparent border-primary-default-default border
-            hover:bg-neutral-default-hover hover:border-primary-medium-hover
-            active:bg-neutral-default-pressed active:border-primary-medium-pressed
-            `,
-      label: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed",
-      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
-    },
-    secondary: {
-      container: "bg-transparent border-neutral-medium-default border hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed active:border-neutral-medium-pressed",
-      label: "text-neutral-strong-default group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed",
-      icon: "text-neutral-strong-default group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
-    },
-    success: {
-      container: "border border-success-default-default hover:border-success-default-hover hover:bg-neutral-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
-      label: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed",
-      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
-    },
-    error: {
-      container: "border border-error-default-default hover:border-error-default-hover hover:bg-neutral-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
-      label: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed",
-      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
-    },
-    warning: {
-      container: "border border-warning-default-default hover:border-warning-default-hover hover:bg-neutral-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
-      label: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed",
-      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
-    },
-    disabled: {
-      container: "bg-neutral-default-disabled border-neutral-default-disabled border cursor-default!",
-      label: "text-neutral-default-disabled group-hover:text-neutral-default-disabled group-active:text-neutral-default-disabled",
-      icon: "text-neutral-default-disabled group-hover:text-neutral-default-disabled group-active:text-neutral-default-disabled"
-    }
-  },
-  text: {
-    primary: {
-      container: " bg-transparent border-0 text-primary-default-default hover:bg-neutral-default-hover hover:border-primary-medium-hover active:bg-neutral-default-pressed",
-      label: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed",
-      icon: "text-primary-default-default group-hover:text-primary-medium-hover group-active:text-primary-medium-pressed"
-    },
-    secondary: {
-      container: "bg-transparent border-0 hover:bg-neutral-default-hover hover:border-neutral-medium-hover active:bg-neutral-default-pressed",
-      label: "text-neutral-strong-hover group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed",
-      icon: "text-neutral-strong-hover group-hover:text-neutral-storng-hover group-active:text-neutral-storng-pressed"
-    },
-    success: {
-      container: "border border-transparent hover:border-success-default-hover hover:bg-neutral-default-hover hover:border-success-default-hover active:border-success-default-pressed active:bg-neutral-default-pressed",
-      label: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed",
-      icon: "text-success-medium-default group-hover:text-success-medium-hover group-active:text-success-medium-pressed"
-    },
-    error: {
-      container: "border border-transparent hover:border-error-default-hover hover:bg-neutral-default-hover hover:border-error-default-hover active:border-error-default-pressed active:bg-neutral-default-pressed",
-      label: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed",
-      icon: "text-error-medium-default group-hover:text-error-medium-hover group-active:text-error-medium-pressed"
-    },
-    warning: {
-      container: "border border-transparent hover:border-warning-default-hover hover:bg-neutral-default-hover hover:border-warning-default-hover active:border-warning-default-pressed active:bg-neutral-default-pressed",
-      label: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed",
-      icon: "text-warning-medium-default group-hover:text-warning-medium-hover group-active:text-warning-medium-pressed"
-    },
-    disabled: {
-      container: "bg-transparent border-neutral-default-disabled border-none cursor-default! hover:bg-transparent",
-      label: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused",
-      icon: "text-neutral-medium-focused group-hover:text-neutral-medium-focused group-active:text-neutral-medium-focused"
-    }
-  }
-}, r = {
-  small: {
-    container: "",
-    label: "prometeo-fonts-label-large",
-    icon: ""
-  },
-  medium: {
-    container: "",
-    label: "prometeo-fonts-label-xlarge",
-    icon: ""
-  },
-  large: {
-    container: "",
-    label: "prometeo-fonts-label-xlarge",
-    icon: ""
-  }
-}, g = {
-  container: "flex justify-center items-center gap-1 w-max rounded-lg bg-transparent cursor-pointer transition-all ease-in-out duration-300 relative",
-  label: "w-max transition-all ease-in-out duration-300",
-  icon: "w-max transition-all ease-in-out duration-300 flex justify-center items-center"
-}, y = {
-  true: {
-    container: "hover:scale-105 active:scale-95 disabled:scale-100"
-  },
-  false: {
-    container: ""
-  }
-}, w = {
-  true: {
-    icon: "group-hover:rotate-90 group-active:rotate-0 group-disabled:rotate-0"
-  },
-  false: {
-    icon: ""
-  }
-}, R = p(g.container, {
-  variants: {
-    size: {
-      small: `${r.small.container} ${v.small.container}`,
-      medium: `${r.medium.container} ${v.medium.container}`,
-      large: `${r.large.container} ${v.large.container}`
-    },
-    variant: {
-      fill: "",
-      outline: "",
-      text: ""
-    },
-    color: {
-      primary: "",
-      secondary: "",
-      success: "",
-      error: "",
-      warning: "",
-      disabled: ""
-    },
-    animation: {
-      true: y.true.container,
-      false: y.false.container
-    }
-  },
-  compoundVariants: [
-    { variant: "fill", color: "primary", class: e.fill.primary.container },
-    { variant: "fill", color: "secondary", class: e.fill.secondary.container },
-    { variant: "fill", color: "success", class: e.fill.success.container },
-    { variant: "fill", color: "error", class: e.fill.error.container },
-    { variant: "fill", color: "warning", class: e.fill.warning.container },
-    { variant: "fill", color: "disabled", class: e.fill.disabled.container },
-    { variant: "outline", color: "primary", class: e.outline.primary.container },
-    { variant: "outline", color: "secondary", class: e.outline.secondary.container },
-    { variant: "outline", color: "success", class: e.outline.success.container },
-    { variant: "outline", color: "error", class: e.outline.error.container },
-    { variant: "outline", color: "warning", class: e.outline.warning.container },
-    { variant: "outline", color: "disabled", class: e.outline.disabled.container },
-    { variant: "text", color: "primary", class: e.text.primary.container },
-    { variant: "text", color: "secondary", class: e.text.secondary.container },
-    { variant: "text", color: "success", class: e.text.success.container },
-    { variant: "text", color: "error", class: e.text.error.container },
-    { variant: "text", color: "warning", class: e.text.warning.container },
-    { variant: "text", color: "disabled", class: e.text.disabled.container }
-  ],
-  defaultVariants: {
-    size: "medium",
-    variant: "fill",
-    color: "primary",
-    animation: !0
-  }
-}), V = p(g.label, {
-  variants: {
-    size: {
-      small: r.small.label,
-      medium: r.medium.label,
-      large: r.large.label
-    },
-    variant: {
-      fill: "",
-      outline: "",
-      text: ""
-    },
-    color: {
-      primary: "",
-      secondary: "",
-      success: "",
-      error: "",
-      warning: "",
-      disabled: ""
-    }
-  },
-  compoundVariants: [
-    { variant: "fill", color: "primary", class: e.fill.primary.label },
-    { variant: "fill", color: "secondary", class: e.fill.secondary.label },
-    { variant: "fill", color: "success", class: e.fill.success.label },
-    { variant: "fill", color: "error", class: e.fill.error.label },
-    { variant: "fill", color: "warning", class: e.fill.warning.label },
-    { variant: "fill", color: "disabled", class: e.fill.disabled.label },
-    { variant: "outline", color: "primary", class: e.outline.primary.label },
-    { variant: "outline", color: "secondary", class: e.outline.secondary.label },
-    { variant: "outline", color: "success", class: e.outline.success.label },
-    { variant: "outline", color: "error", class: e.outline.error.label },
-    { variant: "outline", color: "warning", class: e.outline.warning.label },
-    { variant: "outline", color: "disabled", class: e.outline.disabled.label },
-    { variant: "text", color: "primary", class: e.text.primary.label },
-    { variant: "text", color: "secondary", class: e.text.secondary.label },
-    { variant: "text", color: "success", class: e.text.success.label },
-    { variant: "text", color: "error", class: e.text.error.label },
-    { variant: "text", color: "warning", class: e.text.warning.label },
-    { variant: "text", color: "disabled", class: e.text.disabled.label }
-  ],
-  defaultVariants: {
-    size: "medium",
-    variant: "fill",
-    color: "primary"
-  }
-}), q = p(g.icon, {
-  variants: {
-    size: {
-      small: r.small.icon,
-      medium: r.medium.icon,
-      large: r.large.icon
-    },
-    variant: {
-      fill: "",
-      outline: "",
-      text: ""
-    },
-    color: {
-      primary: "",
-      secondary: "",
-      success: "",
-      error: "",
-      warning: "",
-      disabled: ""
-    },
-    animateIcon: {
-      true: w.true.icon,
-      false: w.false.icon
-    }
-  },
-  compoundVariants: [
-    { variant: "fill", color: "primary", class: e.fill.primary.icon },
-    { variant: "fill", color: "secondary", class: e.fill.secondary.icon },
-    { variant: "fill", color: "success", class: e.fill.success.icon },
-    { variant: "fill", color: "error", class: e.fill.error.icon },
-    { variant: "fill", color: "warning", class: e.fill.warning.icon },
-    { variant: "fill", color: "disabled", class: e.fill.disabled.icon },
-    { variant: "outline", color: "primary", class: e.outline.primary.icon },
-    { variant: "outline", color: "secondary", class: e.outline.secondary.icon },
-    { variant: "outline", color: "success", class: e.outline.success.icon },
-    { variant: "outline", color: "error", class: e.outline.error.icon },
-    { variant: "outline", color: "warning", class: e.outline.warning.icon },
-    { variant: "outline", color: "disabled", class: e.outline.disabled.icon },
-    { variant: "text", color: "primary", class: e.text.primary.icon },
-    { variant: "text", color: "secondary", class: e.text.secondary.icon },
-    { variant: "text", color: "success", class: e.text.success.icon },
-    { variant: "text", color: "error", class: e.text.error.icon },
-    { variant: "text", color: "warning", class: e.text.warning.icon },
-    { variant: "text", color: "disabled", class: e.text.disabled.icon }
-  ],
-  defaultVariants: {
-    size: "medium",
-    variant: "fill",
-    color: "primary",
-    animateIcon: !0
-  }
-}), D = ({
-  label: i,
-  onClick: j,
-  icon: u,
-  contentClassName: c,
-  loadingText: f = "Cargando...",
-  animate: k = !1,
-  animateIcon: $ = !1,
-  isLoading: a = !1,
-  children: d,
-  hideSpinner: b = !1,
-  spinner: x = /* @__PURE__ */ t.jsx(M, { size: "small", variant: "clip", color: "var(--neutral-600)", className: "size-4 " }),
-  type: N,
-  className: z,
-  disabled: s,
-  variant: l = "fill",
-  form: I,
-  size: o = "medium",
-  color: S = "primary"
-}) => {
-  const h = !!($ && !s && !a), B = !!(k && !s && !a), n = s || a ? "disabled" : S, C = E(() => d || (a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
-    !b && x,
-    /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: m(
-          V({
-            size: o,
-            variant: l,
-            color: n
-          }),
-          o === "small" ? "prometeo-fonts-label-xsmall" : ""
-        ),
-        children: f
-      }
-    )
-  ] }) : /* @__PURE__ */ t.jsxs("div", { className: m("flex items-center gap-1 select-none", c), children: [
-    u && /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: q({
-          size: o,
-          variant: l,
-          color: n,
-          animateIcon: h
-        }),
-        children: u
-      }
-    ),
-    i && /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: V({
-          size: o,
-          variant: l,
-          color: n
-        }),
-        children: i
-      }
-    )
-  ] })), [
-    d,
-    c,
-    u,
-    i,
-    l,
-    o,
-    n,
-    a,
-    b,
-    x,
-    f,
-    h
-  ]);
-  return /* @__PURE__ */ t.jsx(
-    "button",
-    {
-      type: N,
-      className: m(
-        "group",
-        R({
-          size: o,
-          variant: l,
-          color: n,
-          animation: B
-        }),
-        z
-      ),
-      disabled: s || a,
-      form: I,
-      onClick: j,
-      children: /* @__PURE__ */ t.jsx("div", { className: `flex items-center gap-1 ${c}`, children: C })
-    }
-  );
-}, O = A(D);
-export {
-  O as default
-};