prometeo-design-system 4.3.1 → 4.3.2

package/dist/Toast.es.js

@@ -1,59 +1,67 @@
-import { j as e } from "./jsx-runtime-GkKLlHH4.js";
-import w from "react";
-import { toast as p } from "sonner";
-import { c as s } from "./cn-B6yFEsav.js";
-import { Info as m } from "./Icons/Info.es.js";
-import { Error as u } from "./Icons/Error.es.js";
-import { Cancel as f } from "./Icons/Cancel.es.js";
-import { CheckCircle as b } from "./Icons/CheckCircle.es.js";
-import h from "./Button.es.js";
-import { Close as C } from "./Icons/Close.es.js";
-const x = {
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { c as l } from "./cn-B6yFEsav.js";
+import P, { useRef as b, useEffect as I } from "react";
+import { toast as h } from "sonner";
+import { Info as w } from "./Icons/Info.es.js";
+import { Error as v } from "./Icons/Error.es.js";
+import { Cancel as y } from "./Icons/Cancel.es.js";
+import { CheckCircle as j } from "./Icons/CheckCircle.es.js";
+import C from "./Button.es.js";
+import { Close as E } from "./Icons/Close.es.js";
+const p = {
   dark: {
     success: {
       container: "border-b-[2px] border-success-default-default",
       iconClass: "text-success-medium-default",
-      icon: b
+      icon: j,
+      loading: "bg-success-default-default"
     },
     error: {
       container: "border-b-[2px] border-error-default-default",
       iconClass: "text-error-medium-default",
-      icon: f
+      icon: y,
+      loading: "bg-error-default-default"
     },
     warning: {
       container: "border-b-[2px] border-warning-default-default",
       iconClass: "text-warning-medium-default",
-      icon: u
+      icon: v,
+      loading: "bg-warning-default-default"
     },
     info: {
       container: " border-b-[2px] border-primary-default-default",
       iconClass: "text-primary-default-default",
-      icon: m
+      icon: w,
+      loading: "bg-primary-default-default"
     }
   },
   light: {
     success: {
       container: "",
       iconClass: "text-success-default-pressed",
-      icon: b
+      icon: j,
+      loading: "bg-success-default-pressed"
     },
     error: {
       container: "",
       iconClass: "text-error-medium-pressed",
-      icon: f
+      icon: y,
+      loading: "bg-error-medium-pressed"
     },
     warning: {
       container: "",
       iconClass: "text-warning-medium-pressed",
-      icon: u
+      icon: v,
+      loading: "bg-warning-medium-pressed"
     },
     info: {
       container: "",
       iconClass: "text-primary-default-pressed",
-      icon: m
+      icon: w,
+      loading: "bg-primary-default-pressed"
     }
   }
-}, l = {
+}, x = {
   dark: {
     container: "bg-neutral-default-default",
     title: "text-neutral-strong-default",
@@ -66,85 +74,121 @@ const x = {
     description: "text-neutral-medium-focused",
     shadow: "0px 0px 2px 0px rgba(0, 0, 0, 0.35),8px 8px 20px 0px rgba(0, 0, 0, 0.3),0px 0px 15px 0px rgba(0, 0, 0, 0.2),0px 0px 20px 0px rgba(21, 21, 21, 0.3) inset,6px 0px 100px 0px rgba(0, 0, 0, 0.05) inset"
   }
-}, v = (c) => {
-  const { title: r, description: i, button: a, id: n, icon: d, variant: o = "info", colorMode: t = "dark", showClose: g = !1 } = c;
-  return /* @__PURE__ */ e.jsxs(
+}, T = (d) => {
+  const { title: r, description: n, button: a, id: i, icon: s, variant: o = "info", colorMode: e = "dark", showClose: m = !1, loading: c = !1, loadingTimeout: g = 2500, finishLoader: u = !1 } = d;
+  return /* @__PURE__ */ t.jsxs(
     "div",
     {
       style: {
-        boxShadow: l[t].shadow
+        boxShadow: x[e].shadow
       },
-      className: s(
+      className: l(
         "flex p-3 pb-4 md:w-[485px] md:max-w-[485px] md:min-w-[485px] md:h-[68px] md:max-h-[68px] rounded-lg gap-2",
-        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px]",
-        l[t].container,
-        x[t][o].container
+        "w-[345px] max-w-[345px] min-w-[345px] h-[68px] max-h-[68px] relative",
+        x[e].container,
+        p[e][o].container,
+        c && "border-b-0"
       ),
       children: [
-        /* @__PURE__ */ e.jsxs(
+        /* @__PURE__ */ t.jsxs(
           "div",
           {
             className: "flex items-center justify-start gap-2 max-h-[38px] h-[38px] overflow-hidden flex-1 ",
             children: [
-              /* @__PURE__ */ e.jsx("div", { className: "f", style: { color: "inherit" }, children: w.createElement(d || x[t][o].icon, { size: 24, className: x[t][o].iconClass }) }),
-              /* @__PURE__ */ e.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
-                /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", l[t].title), children: r }),
-                i && /* @__PURE__ */ e.jsx("p", { className: s("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", l[t].description), children: i })
+              /* @__PURE__ */ t.jsx("div", { className: "f", style: { color: "inherit" }, children: P.createElement(s || p[e][o].icon, { size: 24, className: p[e][o].iconClass }) }),
+              /* @__PURE__ */ t.jsxs("div", { className: "flex-1 flex flex-col gap-1", children: [
+                /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-label-medium md:prometeo-fonts-label-xlarge", x[e].title), children: r }),
+                n && /* @__PURE__ */ t.jsx("p", { className: l("select-none prometeo-fonts-body-xsmall md:prometeo-fonts-body-small text-nowrap overflow-ellipsis ", x[e].description), children: n })
               ] })
             ]
           }
         ),
-        a?.label && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        c && /* @__PURE__ */ t.jsx(z, { color: o, timeOut: g, finished: u, colorMode: e }),
+        a?.label && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
+          C,
           {
             label: a?.label,
             onClick: () => {
-              a?.onClick(), p.dismiss(n);
+              a?.onClick(), h.dismiss(i);
             },
             size: "small",
             color: "secondary"
           }
         ) }),
-        g && /* @__PURE__ */ e.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ e.jsx(
-          h,
+        m && /* @__PURE__ */ t.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ t.jsx(
+          C,
           {
             onClick: () => {
-              p.dismiss(n);
+              h.dismiss(i);
             },
             label: "",
             size: "small",
             color: "secondary",
-            icon: /* @__PURE__ */ e.jsx(C, { className: s(t === "light" ? "text-neutral-medium-focused " : "") }),
+            icon: /* @__PURE__ */ t.jsx(E, { className: l(e === "light" ? "text-neutral-medium-focused " : "") }),
             variant: "text",
             animate: !1,
-            className: s(t === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
+            className: l(e === "light" ? "hover:bg-neutral-default-hover-light focus:bg-inherit active:bg-neutral-weak-hover " : "")
           }
         ) })
       ]
     }
   );
+}, z = ({ className: d, color: r, timeOut: n, finished: a, colorMode: i }) => {
+  const s = b(0), o = b(Date.now()), e = b(null);
+  I(() => {
+    if (a) {
+      s.current = 1, e.current && (e.current.style.width = "100%");
+      return;
+    }
+    o.current = Date.now(), s.current = 0;
+    const c = setInterval(() => {
+      const g = Date.now() - o.current, u = Math.min(g / n, 1), N = u * 0.95, k = Math.sin(u * Math.PI * 2) * 0.15 + 0.05, M = Math.random() < k;
+      let f;
+      if (M)
+        f = s.current;
+      else {
+        const R = (Math.random() - 0.5) * 0.25;
+        f = Math.max(s.current, Math.min(0.95, N + R));
+      }
+      s.current = f, e.current && (e.current.style.width = `${f * 100}%`), (u >= 1 || a) && clearInterval(c);
+    }, 50);
+    return () => clearInterval(c);
+  }, [n, a]);
+  const m = p[i][r].loading;
+  return /* @__PURE__ */ t.jsx("div", { className: l(
+    "absolute bottom-0 translate-y-0 left-0 w-full h-2 overflow-hidden rounded-b-xl",
+    'after:content-[""] after:w-[calc(100%-0px)] after:absolute after:bottom-0 after:left-1/2 after:bg-neutral-default-default after:h-2 after:-translate-x-1/2 after:-translate-y-[2px] after:rounded-b-full after:overflow-hidden',
+    d
+  ), children: /* @__PURE__ */ t.jsx(
+    "div",
+    {
+      ref: e,
+      className: l("h-full transition-all duration-300 ease-out", m),
+      style: { width: "0%" }
+    }
+  ) });
 };
-function _(c, r) {
-  const { duration: i = 2500, showClose: a = !1, colorMode: n = "dark", position: d } = r || {};
-  return p.custom((o) => /* @__PURE__ */ e.jsx(
-    v,
+function G(d, r) {
+  const { duration: n = 2500, showClose: a = !1, colorMode: i = "dark", position: s } = r || {};
+  return h.custom((o) => /* @__PURE__ */ t.jsx(
+    T,
     {
       id: o,
       variant: r?.variant || "success",
-      title: c,
+      title: d,
       description: r?.description,
       icon: r?.icon,
       button: r?.button,
       showClose: a,
-      colorMode: n
+      colorMode: i
     }
   ), {
-    duration: i,
-    position: d,
+    duration: n,
+    position: s,
     unstyled: !0
   });
 }
 export {
-  v as default,
-  _ as toastpyrion
+  T as default,
+  G as toastpyrion
 };

package/dist/UserCard.d.ts

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

package/dist/UserCard.es.js

@@ -0,0 +1,28 @@
+import { j as t } from "./jsx-runtime-GkKLlHH4.js";
+import { memo as d, useCallback as a } from "react";
+import { c as n } from "./cn-B6yFEsav.js";
+import o from "./Avatar.es.js";
+const m = ({ name: r, imageUrl: f, avatarSize: s = "xxs", subImageUrl: i, className: u, mainSlot: l = r, secondarySlot: e, avatarProps: c }) => {
+  const p = a(() => l ? typeof l == "string" ? /* @__PURE__ */ t.jsx("p", { className: "prometeo-fonts-label-large text-neutral-default-default line-clamp-1 select-text", children: l }) : typeof l == "function" ? l() : l : null, [l]), x = a(() => e ? typeof e == "string" ? /* @__PURE__ */ t.jsx("p", { className: "prometeo-fonts-body-small text-neutral-default-default line-clamp-1 whitespace-pre text-ellipsis select-text", children: e }) : typeof e == "function" ? e() : e : null, [e]);
+  return /* @__PURE__ */ t.jsxs("div", { className: n("flex items-center gap-2 p-3 rounded-lg max-w-full max-h-full select-none ", u), children: [
+    /* @__PURE__ */ t.jsx(
+      o,
+      {
+        fallbackText: r,
+        sizeImage: s,
+        sizeFallback: s,
+        imageUrl: f,
+        subImageUrl: i,
+        ...c
+      }
+    ),
+    /* @__PURE__ */ t.jsxs("div", { className: n("usercard-content flex flex-col gap-0 flex-1 overflow-hidden w-full transition-all duration-300 ease-in-out ", e && "gap-1"), children: [
+      /* @__PURE__ */ t.jsx("div", { className: "w-full", children: p() }),
+      /* @__PURE__ */ t.jsx("div", { className: "flex gap-1 justify-between overflow-hidden relative w-full", children: x() })
+    ] })
+  ] });
+}, h = d(m);
+h.displayName = "UserCard";
+export {
+  h as default
+};

package/dist/badge-BEx-0Q-K.js

@@ -0,0 +1,35 @@
+import { j as s } from "./jsx-runtime-GkKLlHH4.js";
+import { c } from "./cn-B6yFEsav.js";
+const g = ({
+  count: r,
+  maxCount: t = 9,
+  className: a = "",
+  size: n = "medium",
+  variant: l = "primary",
+  showZero: i = !1,
+  disabled: d = !1
+}) => {
+  const e = r, u = e > t ? `+${t}` : e;
+  if (e === 0 && !i) return null;
+  const m = {
+    small: "w-4.5 h-4.5 text-xs ",
+    medium: "w-5 h-5 text-xs",
+    large: "w-6 h-6 text-sm"
+  }, o = {
+    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__ */ s.jsx("div", { className: c(
+    "rounded-full flex items-center justify-center font-medium select-none",
+    m[n],
+    o[l],
+    a,
+    d && "text-neutral-strong-disabled bg-primary-medium-disabled"
+  ), children: /* @__PURE__ */ s.jsx("span", { children: u }) });
+};
+export {
+  g as B
+};

package/dist/components/Avatar/Avatar.d.ts

@@ -1,5 +1,5 @@
 export type SizeVariant = "xxxs" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl";
-interface IAvatar {
+export interface IAvatar {
     imageUrl?: string;
     sizeImage?: SizeVariant;
     sizeFallback?: SizeVariant;
@@ -7,7 +7,5 @@ interface IAvatar {
     subImageUrl?: string;
     borderColor?: string;
     fallbackType?: "initials" | "defaultAvatar";
-    sizeFallbackIcon?: number;
 }
-export default function Avatar({ imageUrl, sizeImage, sizeFallback, sizeFallbackIcon, fallbackText, subImageUrl, fallbackType, }: IAvatar): import("react/jsx-runtime").JSX.Element;
-export {};
+export default function Avatar({ imageUrl, sizeImage, sizeFallback, fallbackText, subImageUrl, fallbackType, }: IAvatar): import("react/jsx-runtime").JSX.Element;

package/dist/components/CardProfile/CardProfile.d.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { IAvatar as AvatarProps } from '../Avatar/Avatar';
 interface ICardProfile {
     children: ReactNode;
     dropMenu?: ReactNode;
@@ -29,9 +30,10 @@ interface IDropMenu {
     handleTokenLogin: () => void;
 }
 interface ICardProfileImage {
-    isExpanded: boolean;
+    isExpanded?: boolean;
     imageUrl?: string;
     fallbackText?: string;
+    avatarProps?: AvatarProps;
 }
 interface ICardProfileContent {
     isExpanded: boolean;
@@ -39,7 +41,8 @@ interface ICardProfileContent {
     nameCompany: string;
     nameArea: string;
     cardProfile: ReactNode;
-    onClick: () => void;
+    onClick?: () => void;
+    unassigned?: boolean;
 }
 interface ICardProfileOptions {
     onClick: () => void;
@@ -47,8 +50,8 @@ interface ICardProfileOptions {
 }
 export declare const CardProfile: (({ children }: ICardProfile) => import("react/jsx-runtime").JSX.Element) & {
     Menu: ({ isExpanded, sessions, onClickLogout, handleTokenLogin, }: IDropMenu) => import("react/jsx-runtime").JSX.Element;
-    Image: ({ imageUrl, fallbackText }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
-    Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
+    Image: ({ imageUrl, fallbackText, avatarProps }: ICardProfileImage) => import("react/jsx-runtime").JSX.Element;
+    Content: ({ isExpanded, nameUser, nameCompany, nameArea, cardProfile, onClick, unassigned }: ICardProfileContent) => import("react/jsx-runtime").JSX.Element;
     Separator: () => import("react/jsx-runtime").JSX.Element;
     Options: ({ isExpanded, onClick }: ICardProfileOptions) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/components/DropZone/useFileDropzone.d.ts

@@ -1,8 +1,15 @@
 import { default as React } from 'react';
 import { DropzoneOptions } from 'react-dropzone';
-export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop"> {
+type MIMETypeString = 'image/*' | 'image/png' | 'image/jpeg' | 'image/gif' | 'image/svg+xml' | 'image/webp' | 'image/vnd.dwg' | 'image/vnd.dxf' | 'text/plain' | 'text/markdown' | 'text/csv' | 'application/pdf' | 'application/postscript' | 'application/illustrator' | 'application/msword' | 'application/vnd.ms-excel' | 'application/vnd.ms-powerpoint' | 'application/vnd.visio' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'application/zip' | 'application/vnd.rar' | 'application/x-7z-compressed' | 'application/gzip' | 'application/x-tar' | 'video/*' | 'video/mp4' | 'video/x-msvideo' | 'video/quicktime' | 'video/webm' | 'video/x-matroska' | 'audio/*' | 'audio/mpeg' | 'audio/wav' | 'audio/mp4' | 'audio/ogg' | 'application/acad' | 'application/step' | 'application/iges' | 'model/stl' | 'message/rfc822' | 'application/vnd.ms-outlook' | 'application/mbox' | 'application/hl7-v2' | 'application/dicom' | 'application/octet-stream';
+export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop" | "accept"> {
     onFilesAccepted?: (files: File[]) => void;
     onFilesRejected?: (rejectedFiles: unknown[]) => void;
+    accept?: Partial<Record<MIMETypeString, string[]>>;
+}
+export interface UseFileDropzoneOptions extends Omit<DropzoneOptions, "onDrop" | "accept"> {
+    onFilesAccepted?: (files: File[]) => void;
+    onFilesRejected?: (rejectedFiles: unknown[]) => void;
+    accept?: Partial<Record<MIMETypeString, string[]>>;
 }
 export declare function useFileDropzone({ onFilesAccepted, onFilesRejected, ...options }: UseFileDropzoneOptions): {
     hasErrors: boolean;
@@ -19,3 +26,4 @@ export declare function useFileDropzone({ onFilesAccepted, onFilesRejected, ...o
     getRootProps: <T extends import('react-dropzone').DropzoneRootProps>(props?: T) => T;
     getInputProps: <T extends import('react-dropzone').DropzoneInputProps>(props?: T) => T;
 };
+export {};

package/dist/components/NotificationCard/NotificationCard.d.ts

@@ -17,10 +17,11 @@ export interface NotificationCardProps<NotificationMetadata = any> {
     body: string | React.ReactNode | ((metadata?: NotificationMetadata) => React.ReactNode);
     date: string | Date;
     actions?: [NotificationAction<NotificationMetadata>, NotificationAction<NotificationMetadata>] | [NotificationAction<NotificationMetadata>];
-    isNew?: boolean;
+    read?: boolean;
     className?: string;
     metadata?: NotificationMetadata;
+    onClick?: (metadata?: NotificationMetadata) => void;
 }
-declare const NotificationCard: <NotificationMetadata = unknown>({ user, body, date, actions, isNew, className, metadata }: NotificationCardProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
+declare const NotificationCard: <NotificationMetadata = unknown>({ user, body, date, actions, read, className, metadata, onClick }: NotificationCardProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
 export default NotificationCard;
 export type NotificationCardComponent = typeof NotificationCard;

package/dist/components/PyrionNavigationDrawer/PLNotificationsList.d.ts

@@ -1,15 +1,18 @@
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
+import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 interface PLNotificationsDrawerProps<NotificationMetadata> {
     onCloseClick?: VoidFunction;
     onMarkAllAsRead?: () => void;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<NotificationMetadata> | null>;
+    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 }
 export interface NotificationsListControlsHandler<NotificationMetadata> {
-    addNewNotification: (notification: NotificationCardProps<NotificationMetadata> | NotificationCardProps<NotificationMetadata>[]) => void;
+    addNewNotification: (notification: NotificationCardProps<NotificationMetadata> | NotificationCardProps<NotificationMetadata>[], position?: 'top' | 'bottom') => void;
     subscribeToUpdates: (callback: (notifications: NotificationCardProps<NotificationMetadata>[], count: number) => void) => () => void;
     removeNotification: (id: string | string[]) => void;
     removeAllNotifications: () => void;
     setNotifications: (notifications: NotificationCardProps<NotificationMetadata>[]) => void;
+    setLoading: (loading: boolean) => void;
 }
-declare const PLNotificationsList: <NotificationMetadata = unknown>({ onCloseClick, onMarkAllAsRead, notificationsListControls }: PLNotificationsDrawerProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
+declare const PLNotificationsList: <NotificationMetadata = unknown>({ onCloseClick, onMarkAllAsRead, notificationsListControls, scrollableControls }: PLNotificationsDrawerProps<NotificationMetadata>) => import("react/jsx-runtime").JSX.Element;
 export default PLNotificationsList;

package/dist/components/PyrionNavigationDrawer/PLSidebar.d.ts

@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 import { PLSidebarContentHandle } from './PLSidebarContent';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
-declare const _DrawerSidebarWrapper: <TNotificationMetadata = unknown>({ options, helpSection, sidebarContentRef, initialSectionRef, notificationsListControls, }: {
+import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
+declare const _DrawerSidebarWrapper: <TNotificationMetadata = unknown>({ options, helpSection, sidebarContentRef, initialSectionRef, notificationsListControls, scrollableControls, }: {
     options?: any;
     helpSection?: ReactNode | (() => ReactNode);
     sidebarContentRef: React.RefObject<PLSidebarContentHandle | null>;
     initialSectionRef: React.RefObject<"notifications" | "help">;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
+    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const DrawerSidebarWrapper: typeof _DrawerSidebarWrapper;
 export default DrawerSidebarWrapper;

package/dist/components/PyrionNavigationDrawer/PLSidebarContent.d.ts

@@ -1,6 +1,7 @@
 import { ReactElement, ReactNode, ForwardedRef } from 'react';
 import { PyrionLayoutOptions } from './PyrionLayout';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
+import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 export type PLSidebarContentHandle = {
     setActiveSection: (section: 'notifications' | 'help') => void;
 };
@@ -10,6 +11,7 @@ export type PLSidebarContentProps<TNotificationMetadata = unknown> = {
     helpSection?: ReactNode | (() => ReactNode);
     initialSection?: 'notifications' | 'help';
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
+    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
 };
 declare const PLSidebarContent: <TNotificationMetadata = unknown>(props: PLSidebarContentProps<TNotificationMetadata> & {
     ref?: ForwardedRef<PLSidebarContentHandle>;

package/dist/components/PyrionNavigationDrawer/PLayoutBase.d.ts

@@ -6,6 +6,7 @@ import { TicketCardHandlerProps } from '../TicketCard';
 import { NotificationsListControlsHandler } from './PLNotificationsList';
 import { PLSidebarContentHandle } from './PLSidebarContent';
 import { AuthSession, PyrionNavigationControls, PyrionLayoutOptions, PyrionLayoutProps } from './PyrionLayout';
+import { ScrollableControlsHandler } from '../Scrollable/Scrollable';
 export type TLayoutBaseProps<TAppMetadata = unknown, TNotificationMetadata = unknown> = {
     links?: PyrionLayoutLinkItemProps[];
     handleNavigation: (path: string) => void;
@@ -29,6 +30,7 @@ export type TLayoutBaseProps<TAppMetadata = unknown, TNotificationMetadata = unk
     initialSectionRef: React.RefObject<'notifications' | 'help'>;
     navigationControlsRef: React.RefObject<PyrionNavigationControls<TNotificationMetadata>>;
     notificationsListControls?: React.RefObject<NotificationsListControlsHandler<TNotificationMetadata> | null>;
+    scrollableControls?: React.RefObject<ScrollableControlsHandler | null>;
     outletRef: React.RefObject<HTMLDivElement | null>;
     onProfileClick?: (collapsed: boolean) => void;
 };

package/dist/components/PyrionNavigationDrawer/PyrionLayout.d.ts

@@ -3,6 +3,7 @@ import { PyrionLayoutActionItemProps } from '../NavigationDrawer/NavigationDrawe
 import { PyrionLayoutLinkItemProps } from '../NavigationDrawer/NavigationDrawerLinkItem';
 import { NavigationDrawerSidebarProps } from '../NavigationDrawer/NavigationDrawerSidebar';
 import { NotificationCardProps } from '../NotificationCard/NotificationCard';
+import { ScrollTargetData, ScrollTargetConfig } from '../Scrollable/Scrollable';
 import { AllOptionAccessor } from '../Shared/types';
 import { TabSwitchElement } from '../TabSwitch/TabSwitch';
 import { subImageUrlAccessor } from './PLSystemSessions';
@@ -135,11 +136,13 @@ export type PyrionNavigationControls<TNotificationMetadata = unknown> = {
     openNotifications?: () => void;
     showErrorModal?: (node: (ReactNode | (() => ReactNode)), disableDrawer: boolean, hideCloseButton?: boolean) => void;
     closeErrorModal?: () => void;
-    addNewNotification?: (notification: NotificationCardProps<TNotificationMetadata> | NotificationCardProps<TNotificationMetadata>[]) => void;
+    addNewNotification?: (notification: NotificationCardProps<TNotificationMetadata> | NotificationCardProps<TNotificationMetadata>[], position?: 'top' | 'bottom') => void;
     subscribeToNotificationsUpdates?: (callback: (notifications: NotificationCardProps<TNotificationMetadata>[], count: number) => void) => () => void;
     setNotifications?: (notifications: NotificationCardProps<TNotificationMetadata>[]) => void;
     removeAllNotifications?: () => void;
     removeNotification?: (id: string | string[]) => void;
+    setNotificationsLoading?: (loading: boolean) => void;
+    subscribeToNotificationsScroll?: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
 };
 export declare const usePyrionLayout: <TNotificationMetadata = unknown>() => PyrionNavigationControls<TNotificationMetadata>;
 declare const PyrionLayout: <TAppMetadata = unknown, TNotificationMetadata = unknown>({ children, helpSection, state, links: navlinks, onLinkClick, onNavigate, onLogoutClick, actions, activeActionId, onActionClick, tabsProps, currentSystemId, onSessionClick, onSystemLogoClick, onProfileClick, ...props }: PyrionLayoutProps<TAppMetadata, TNotificationMetadata>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Scrollable/Scrollable.d.ts

@@ -17,6 +17,33 @@ type ScrollbarProps = {
     hide?: boolean;
     size?: "small" | 'medium';
 };
+export interface ScrollTargetData {
+    percentage: number;
+    direction: 'up' | 'down' | 'left' | 'right';
+    scrollTop: number;
+    scrollLeft: number;
+    scrollHeight: number;
+    scrollWidth: number;
+    clientHeight: number;
+    clientWidth: number;
+}
+export interface ScrollTargetConfig {
+    target: number;
+    direction?: 'x' | 'y' | 'both';
+    trip?: 'forth' | 'back' | 'round-trip';
+}
+export interface ScrollableControlsHandler {
+    subscribeToScrollTarget: (callback: (data: ScrollTargetData) => void, config?: ScrollTargetConfig) => () => void;
+}
+type ScrollTopButtonTarget = string;
+type ScrollTopButtonProps = {
+    target?: ScrollTopButtonTarget;
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    className?: string;
+};
 export interface ScrollableProps {
     debugMode?: boolean;
     className?: string;
@@ -27,6 +54,8 @@ export interface ScrollableProps {
     disableMouseScroll?: boolean;
     defaultBehavior?: 'scroll-on-click' | 'scroll-on-hover' | 'none';
     persistScroll?: boolean | string;
+    controls?: React.RefObject<ScrollableControlsHandler | null>;
+    scrollTopButton?: ScrollTopButtonProps;
 }
 declare const Scrollable: (props: ScrollableProps) => import("react/jsx-runtime").JSX.Element;
 export default Scrollable;

package/dist/components/TabLinks/TabLinks.d.ts

@@ -30,3 +30,22 @@ declare namespace TabLinks {
 }
 declare const _default: import('react').MemoExoticComponent<typeof TabLinks>;
 export default _default;
+interface TabLinkItemProps {
+    id: string | number;
+    title: string;
+    iconPosition?: "left" | "right" | "top" | "bottom";
+    onClick: () => void;
+    disabled?: boolean;
+    className?: string;
+    isActive?: boolean;
+    activeClassName?: string;
+    icon?: IconComponent | React.ReactNode | (() => React.ReactNode);
+    animated?: boolean;
+    indicatorClassName?: string;
+    onIconHover?: () => void;
+    onIconClick?: () => void;
+    iconTooltipTitle?: string;
+    iconTooltipProps?: PlainTooltipProps;
+    iconSize?: number;
+}
+export declare const TabLinkItem: ({ id, title, icon, iconPosition, onClick, disabled, className, isActive, activeClassName, animated, onIconHover, onIconClick, iconTooltipTitle, iconTooltipProps, iconSize, indicatorClassName }: TabLinkItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Toaster/Toaster.d.ts

@@ -1,9 +1,10 @@
-import { ColorMode } from '../Shared/types';
 import { IconComponent } from '../../Icons/types';
+import { ColorMode } from '../Shared/types';
 type ToastElementsProps = {
     container: string;
     iconClass: string;
     icon: IconComponent;
+    loading: string;
 };
 type ToastVarians = 'success' | 'error' | 'warning' | 'info';
 type ToastVariantClassnames = {
@@ -30,7 +31,18 @@ export interface PyrionToastProps {
     colorMode?: ColorMode;
     showClose?: boolean;
     position?: ToastPosition;
+    loading?: boolean;
+    loadingTimeout?: number;
+    finishLoader?: boolean;
 }
 declare const PyrionToast: (props: PyrionToastProps) => import("react/jsx-runtime").JSX.Element;
 export default PyrionToast;
 export declare function toastpyrion(title: string, options?: Omit<PyrionToastProps, 'id'>): string | number;
+export declare const toastPyrionPromise: (promise: Promise<any>, options?: {
+    loading?: Omit<PyrionToastProps, "id">;
+    success?: Omit<PyrionToastProps, "id">;
+    error?: Omit<PyrionToastProps, "id">;
+    colorMode?: ColorMode;
+    position?: ToastPosition;
+    timeOut?: number;
+}) => Promise<any>;

package/dist/components/UserCard/UserCard.d.ts

@@ -1,4 +1,4 @@
-import { SizeVariant } from '../Avatar/Avatar';
+import { IAvatar, SizeVariant } from '../Avatar/Avatar';
 export interface UserCardProps {
     name: string;
     mainSlot?: string | React.ReactNode | (() => React.ReactNode);
@@ -7,6 +7,7 @@ export interface UserCardProps {
     subImageUrl?: string;
     avatarSize?: SizeVariant;
     className?: string;
+    avatarProps?: IAvatar;
 }
-declare const UserCard: import('react').MemoExoticComponent<({ name, imageUrl, avatarSize, subImageUrl, className, mainSlot, secondarySlot }: UserCardProps) => import("react/jsx-runtime").JSX.Element>;
+declare const UserCard: import('react').MemoExoticComponent<({ name, imageUrl, avatarSize, subImageUrl, className, mainSlot, secondarySlot, avatarProps }: UserCardProps) => import("react/jsx-runtime").JSX.Element>;
 export default UserCard;

package/dist/exports/UserCard.d.ts

@@ -0,0 +1,2 @@
+export { default } from '../components/UserCard/UserCard';
+export type { UserCardProps } from '../components/UserCard/UserCard';

package/dist/hooks/useLabelBackground.d.ts

@@ -2,5 +2,6 @@ interface UseLabelBackgroundResult<T extends HTMLElement> {
     ref: React.RefObject<T | null>;
 }
 export declare const getActualBackgroundColor: (element: HTMLElement) => string;
+export declare const rgbHueAlterate: (rgb: string, variation: number, opacity?: number) => string;
 export declare function useLabelBackground<T extends HTMLElement = HTMLElement>(): UseLabelBackgroundResult<T>;
 export {};