prometeo-design-system 3.1.3 → 3.1.5

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "3.1.3",
+  "version": "3.1.5",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",
   "module": "dist/prometeo-design-system.es.js",
   "types": "dist/index.d.ts",
-  "sideEffects":false,
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -182,6 +182,26 @@
       "types": "./dist/RecurrentDatePickerRRule.d.ts",
       "import": "./dist/RecurrentDatePickerRRule.es.js"
     },
+    "./Scrollable": {
+      "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"
   },
@@ -255,7 +275,7 @@
     "react-dropzone": "^14.3.8",
     "react-router": "^7.9.3",
     "react-router-dom": "^7.9.3",
-    "rrule": "^2.7.2",
+    "rrule": "^2.8.1",
     "sonner": "^2.0.7",
     "storybook": "^9.1.3",
     "tailwind-merge": "^3.3.1",
@@ -271,9 +291,8 @@
   "peerDependencies": {
     "@emotion/is-prop-valid": "^1.4.0",
     "@gsap/react": "^2.0.0",
-    "clsx": "^2.0.0",
-    "tailwindcss": "^4.1.12",
     "@tailwindcss/postcss": "^4.1.14",
+    "clsx": "^2.0.0",
     "framer-motion": "^12.0.0",
     "gsap": "^3.12.5",
     "react": "^19.0.0",
@@ -284,6 +303,7 @@
     "rrule": "^2.7.2",
     "sonner": "^2.0.7",
     "tailwind-merge": "^3.0.0",
+    "tailwindcss": "^4.1.12",
     "use-debounce": "^10.0.0"
   },
   "overrides": {

package/src/styles/base.css

@@ -2,6 +2,7 @@
 @import "./palette.css";
 @import "./utilities.css";
 
+
 /* Component Styles */
 @import "../components/Drawer/Drawer.styles.css";
 @import "../components/DatePicker/DatePicker.css";
@@ -11,6 +12,7 @@
 @import "../components/TabSwitch/Tabswitch.styles.css";
 @import "../components/NavigationDrawer/NavigationDrawer.css";
 @import "../components/NavigationDrawer/NavItem.css";
+@import "../components/PyrionNavigationDrawer/PyrionNavigationDrawer.css";
 
 
 * {
@@ -1353,3 +1355,26 @@ width: var(--input-width, 100%);
         opacity: 1;
     }
 }
+
+@keyframes shadowPulse {
+    0% {
+        opacity: 0;
+        transform: scaleY(1);
+    }
+    20% {
+        opacity: 0.3;
+        transform: scaleY(1.05);
+    }
+    50% {
+        opacity: 0.05;
+        transform: scaleY(1);
+    }
+    80% {
+        opacity: 0.3;
+        transform: scaleY(1.05);
+    }
+    100% {
+        opacity: 0.05;
+        transform: scaleY(1);
+    }
+}

package/src/styles/palette.css

@@ -79,5 +79,8 @@
         --progress-300: #51a2ff;
         --progress-500: #155dfc;
         --progress-800: #193cb8;
+
+        /* Pyrion Colors  */
+        --pyrion-orange-500: #FC5509;
     }
 }

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,88 +0,0 @@
-import { j as s } from "./jsx-runtime-DKDX3adD.js";
-import { c as a } from "./cn-B6yFEsav.js";
-import { useState as j } from "react";
-function C({
-  imageUrl: t,
-  sizeImage: l = "md",
-  sizeFallback: e = "md",
-  fallbackText: i = "Selene Soluciones",
-  subImageUrl: r,
-  borderColor: n = "white"
-}) {
-  const [c, m] = j(!1), x = t && t.trim() !== "" && !c, d = (f) => f.split(" ").map((p) => p.charAt(0)).join("").toUpperCase().slice(0, 2), o = {
-    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"
-  }, h = {
-    xxxs: "text-[12px]",
-    xxs: "text-xs",
-    xs: "text-sm",
-    sm: "text-lg",
-    md: "text-2xl",
-    lg: "text-3xl",
-    xl: "text-4xl"
-  }, u = {
-    xxxs: "w-3 h-3",
-    xxs: "w-4 h-4 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",
-    lg: "w-16 h-16",
-    xl: "w-20 h-20"
-  }, w = x ? l : e;
-  return /* @__PURE__ */ s.jsxs("div", { className: "relative inline-block", children: [
-    x ? /* @__PURE__ */ s.jsx(
-      "img",
-      {
-        onError: () => {
-          m(!0);
-        },
-        src: t,
-        className: `rounded-full object-cover ${o[l]}`,
-        alt: "Profile"
-      }
-    ) : /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        className: ` flex items-center justify-center rounded-full aspect-square ${o[e]}`,
-        style: { backgroundColor: "#C6D2FF" },
-        children: /* @__PURE__ */ s.jsx(
-          "span",
-          {
-            className: a(
-              "text-[#312C85] font-semibold",
-              h[e]
-            ),
-            children: d(i)
-          }
-        )
-      },
-      "initials"
-    ),
-    r && /* @__PURE__ */ s.jsx(
-      "div",
-      {
-        className: a(
-          "absolute bottom-[-10px] right-[-10px] rounded-full border-4 overflow-hidden bg-gray-900",
-          u[w]
-        ),
-        style: { borderColor: n },
-        children: /* @__PURE__ */ s.jsx(
-          "img",
-          {
-            src: r,
-            alt: "Sub badge",
-            className: "w-full h-full object-cover"
-          }
-        )
-      }
-    )
-  ] });
-}
-export {
-  C 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-DKDX3adD.js";
-import { memo as A, useMemo as E } from "react";
-import M from "./Spinner.es.js";
-import { c as v } from "./index-BOQuZ0gG.js";
-import { c as d } from "./cn-B6yFEsav.js";
-const m = {
-  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: ""
-  }
-}, p = {
-  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 = v(p.container, {
-  variants: {
-    size: {
-      small: `${r.small.container} ${m.small.container}`,
-      medium: `${r.medium.container} ${m.medium.container}`,
-      large: `${r.large.container} ${m.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 = v(p.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 = v(p.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: g,
-  onClick: j,
-  icon: i,
-  contentClassName: u,
-  loadingText: f = "Cargando...",
-  animate: k = !0,
-  animateIcon: $ = !0,
-  isLoading: a = !1,
-  children: c,
-  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(() => c || (a ? /* @__PURE__ */ t.jsxs("div", { className: "flex items-center gap-1", children: [
-    !b && x,
-    /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: d(
-          V({
-            size: o,
-            variant: l,
-            color: n
-          }),
-          o === "small" ? "prometeo-fonts-label-xsmall" : ""
-        ),
-        children: f
-      }
-    )
-  ] }) : /* @__PURE__ */ t.jsxs("div", { className: d("flex items-center gap-1", u), children: [
-    i && /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: q({
-          size: o,
-          variant: l,
-          color: n,
-          animateIcon: h
-        }),
-        children: i
-      }
-    ),
-    /* @__PURE__ */ t.jsx(
-      "span",
-      {
-        className: V({
-          size: o,
-          variant: l,
-          color: n
-        }),
-        children: g
-      }
-    )
-  ] })), [
-    c,
-    u,
-    i,
-    g,
-    l,
-    o,
-    n,
-    a,
-    b,
-    x,
-    f,
-    h
-  ]);
-  return /* @__PURE__ */ t.jsx(
-    "button",
-    {
-      type: N,
-      className: d(
-        "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 ${u}`, children: C })
-    }
-  );
-}, O = A(D);
-export {
-  O as default
-};