prometeo-design-system 9.1.2 → 9.1.3

package/dist/PLNotificationsList.es.js

@@ -3,7 +3,7 @@ import { c as x } from "./cn-B6yFEsav.js";
 import { useState as K, useRef as l, useCallback as M, useEffect as p, useLayoutEffect as V, useMemo as S } from "react";
 import W from "./IconButton.es.js";
 import Y from "./NotificationCard.es.js";
-import { a as Z } from "./Scrollable-C2iwLEgl.js";
+import { a as Z } from "./Scrollable-B845sesY.js";
 import ee from "./Spinner.es.js";
 import te from "./Tabs.es.js";
 import { S as D } from "./Skeleton-C8OCBBLq.js";

package/dist/PyrionLayout.es.js

@@ -1,4 +1,4 @@
-import { P as f } from "./usePyrionLayout-DiYRqqHU.js";
+import { P as f } from "./usePyrionLayout-N9l4oGVr.js";
 export {
   f as default
 };

package/dist/{Scrollable-C2iwLEgl.js → Scrollable-B845sesY.js}

@@ -1,7 +1,8 @@
-import { j as t } from "./jsx-runtime-CqQglQKg.js";
-import b, { useLayoutEffect as D, useImperativeHandle as O } from "react";
-import { useScrollable as V } from "./useScrollable.es.js";
+import { j as s } from "./jsx-runtime-CqQglQKg.js";
+import p, { useLayoutEffect as P, useImperativeHandle as U } from "react";
+import { useScrollable as W } from "./useScrollable.es.js";
 import { c as n } from "./cn-B6yFEsav.js";
+import { useDragScroll as A } from "./useDragScroll.es.js";
 import { ChevronLeft as N } from "./Icon-ChevronLeft.es.js";
 const E = (o) => {
   switch (o) {
@@ -14,7 +15,7 @@ const E = (o) => {
     default:
       return " overflow-auto";
   }
-}, f = (o) => {
+}, b = (o) => {
   const { position: i, type: l } = o;
   let a = " absolute z-100";
   if (l === "icon")
@@ -48,17 +49,21 @@ const E = (o) => {
         break;
     }
   return a;
-}, P = (o) => o.hide ? " prometeo-scrollbar-none" : o.size === "small" ? " prometeo-scrollbar-thin" : "", U = (o) => {
+}, _ = (o) => o.hide ? " prometeo-scrollbar-none" : o.size === "small" ? " prometeo-scrollbar-thin" : "", $ = (o) => {
   const {
     debugMode: i = !1,
     className: l,
     axis: a = "both",
     children: j,
-    scrollTopButton: u,
+    scrollTopButton: d,
     contentClassName: I,
-    persistScroll: v
+    persistScroll: v,
     // Añadir persistScroll a las props desestructuradas
-  } = o, M = o.scrollableState || {
+    disableDragScroll: g = !1
+  } = o, { bind: M, ref: R } = A({
+    axis: a,
+    disabled: g
+  }), k = o.scrollableState || {
     state: {
       scrollableElement: null,
       scrollableBaseElement: null,
@@ -98,117 +103,120 @@ const E = (o) => {
       handleIndicatorWheel: () => {
       }
     }
-  }, { state: c, handlers: R } = M, { finalIndicators: h, finalScrollbarProps: g, scrollTopButtonVisible: k } = c, {
-    setScrollableRef: B,
-    setScrollableBaseRef: z,
+  }, { state: c, handlers: B } = k, { finalIndicators: h, finalScrollbarProps: z, scrollTopButtonVisible: C } = c, {
+    setScrollableRef: D,
+    setScrollableBaseRef: H,
     handleIndicatorClick: y,
     handleIndicatorMouseEnter: x,
     handleIndicatorMouseLeave: w,
     handleIndicatorMouseDown: m,
     handleIndicatorMouseUp: S,
     handleIndicatorWheel: T,
-    scrollToTop: C
-  } = R, H = b.Children.toArray(j), L = Object.values(h).some((r) => r?.show && r?.type === "icon"), d = b.useRef(null);
-  return D(() => {
-    d.current && c.indicatorRefs.top?.style.setProperty("--hyper-extension-top-slot-height", `${d.current.clientHeight}px`);
-  }, [d.current]), /* @__PURE__ */ t.jsxs("div", { ref: z, className: n("relative p-0", l, E(a), "scrolleable", L ? "overflow-visible" : "overflow-hidden!", "scrollable-base-container"), children: [
-    o.hyperExtensionTopSlot && /* @__PURE__ */ t.jsx("div", { className: "hyper-extension-top-slot w-full ", ref: d, children: typeof o.hyperExtensionTopSlot == "function" ? o.hyperExtensionTopSlot({ scrollableState: c }) : o.hyperExtensionTopSlot }),
-    /* @__PURE__ */ t.jsx(
+    scrollToTop: L
+  } = B, O = p.Children.toArray(j), V = Object.values(h).some((t) => t?.show && t?.type === "icon"), u = p.useRef(null);
+  return P(() => {
+    u.current && c.indicatorRefs.top?.style.setProperty("--hyper-extension-top-slot-height", `${u.current.clientHeight}px`);
+  }, [u.current]), /* @__PURE__ */ s.jsxs("div", { ref: H, className: n("relative p-0", l, E(a), "scrolleable", V ? "overflow-visible" : "overflow-hidden!", "scrollable-base-container"), children: [
+    o.hyperExtensionTopSlot && /* @__PURE__ */ s.jsx("div", { className: "hyper-extension-top-slot w-full ", ref: u, children: typeof o.hyperExtensionTopSlot == "function" ? o.hyperExtensionTopSlot({ scrollableState: c }) : o.hyperExtensionTopSlot }),
+    /* @__PURE__ */ s.jsx(
       "div",
       {
-        ref: B,
+        ref: (t) => {
+          D(t), R.current = t;
+        },
         id: v ? `scrollable-content-${v}` : void 0,
         className: n(
           i && "border border-red-900 border-dashed",
           "py-2 relative w-full h-full min-h-full",
           I,
           E(a),
-          P(g),
+          _(z),
           "overscroll-y-contain"
         ),
-        children: H?.map((r) => b.cloneElement(r, { className: n(r?.props?.className, "shrink-0! pointer-events-auto") }))
+        ...M,
+        children: O?.map((t) => p.cloneElement(t, { className: n(t?.props?.className, "shrink-0! pointer-events-auto") }))
       }
     ),
-    o.hyperExtensionBottomSlot && /* @__PURE__ */ t.jsx("div", { className: "hyper-extension-bottom-slot w-full ", children: typeof o.hyperExtensionBottomSlot == "function" ? o.hyperExtensionBottomSlot({ scrollableState: c }) : o.hyperExtensionBottomSlot }),
-    /* @__PURE__ */ t.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit] shadow-indicators-container", children: Object.entries(h).map(([r, e]) => {
+    o.hyperExtensionBottomSlot && /* @__PURE__ */ s.jsx("div", { className: "hyper-extension-bottom-slot w-full ", children: typeof o.hyperExtensionBottomSlot == "function" ? o.hyperExtensionBottomSlot({ scrollableState: c }) : o.hyperExtensionBottomSlot }),
+    /* @__PURE__ */ s.jsx("div", { className: "h-full w-full z-10 absolute inset-0 pointer-events-none overflow-hidden rounded-[inherit] shadow-indicators-container", children: Object.entries(h).map(([t, e]) => {
       if (!e?.show || e.type !== "shadow") return null;
-      const s = r;
-      return /* @__PURE__ */ t.jsxs(
+      const r = t;
+      return /* @__PURE__ */ s.jsxs(
         "span",
         {
-          ref: (p) => {
-            c.indicatorRefs[r] = p;
+          ref: (f) => {
+            c.indicatorRefs[t] = f;
           },
           className: n(
             e.behavior === "scroll-on-click" ? "cursor-pointer" : "cursor-default",
             "ease-in-out z-100",
             "opacity-0 pointer-events-none"
           ),
-          onClick: () => y(s, e.behavior, e.type),
-          onMouseEnter: () => x(s, e.behavior, e.type),
-          onMouseLeave: () => w(s, e.behavior, e.type),
-          onMouseDown: () => m(s, e.behavior, e.type),
-          onMouseUp: () => S(s, e.behavior, e.type),
+          onClick: () => y(r, e.behavior, e.type),
+          onMouseEnter: () => x(r, e.behavior, e.type),
+          onMouseLeave: () => w(r, e.behavior, e.type),
+          onMouseDown: () => m(r, e.behavior, e.type),
+          onMouseUp: () => S(r, e.behavior, e.type),
           onWheel: T,
           children: [
-            /* @__PURE__ */ t.jsx("span", { className: n(f({ position: s, type: "shadow" }), "shadow-base", e.className) }),
-            /* @__PURE__ */ t.jsx("span", { className: n(f({ position: s, type: "shadow" }), "shadow-hover opacity-0 transition-opacity duration-300", e.className) })
+            /* @__PURE__ */ s.jsx("span", { className: n(b({ position: r, type: "shadow" }), "shadow-base", e.className) }),
+            /* @__PURE__ */ s.jsx("span", { className: n(b({ position: r, type: "shadow" }), "shadow-hover opacity-0 transition-opacity duration-300", e.className) })
           ]
         },
-        r
+        t
       );
     }) }),
-    /* @__PURE__ */ t.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none icons-indicators-container", children: Object.entries(h).map(([r, e]) => {
+    /* @__PURE__ */ s.jsx("div", { className: "h-full w-full z-20 absolute inset-0 pointer-events-none icons-indicators-container", children: Object.entries(h).map(([t, e]) => {
       if (!e?.show || e.type !== "icon") return null;
-      const s = r;
-      return /* @__PURE__ */ t.jsx(
+      const r = t;
+      return /* @__PURE__ */ s.jsx(
         "span",
         {
-          ref: (p) => {
-            c.indicatorRefs[r] = p;
+          ref: (f) => {
+            c.indicatorRefs[t] = f;
           },
           className: "pointer-events-auto cursor-default transition-all duration-300 opacity-0",
-          onClick: () => y(s, e.behavior, e.type),
-          onMouseEnter: () => x(s, e.behavior, e.type),
-          onMouseLeave: () => w(s, e.behavior, e.type),
-          onMouseDown: () => m(s, e.behavior, e.type),
-          onMouseUp: () => S(s, e.behavior, e.type),
+          onClick: () => y(r, e.behavior, e.type),
+          onMouseEnter: () => x(r, e.behavior, e.type),
+          onMouseLeave: () => w(r, e.behavior, e.type),
+          onMouseDown: () => m(r, e.behavior, e.type),
+          onMouseUp: () => S(r, e.behavior, e.type),
           onWheel: T,
-          children: /* @__PURE__ */ t.jsx(N, { size: 20, className: n(f({ position: s, type: "icon" }), e.className) })
+          children: /* @__PURE__ */ s.jsx(N, { size: 20, className: n(b({ position: r, type: "icon" }), e.className) })
         },
-        r
+        t
       );
     }) }),
-    u && /* @__PURE__ */ t.jsx(
+    d && /* @__PURE__ */ s.jsx(
       "button",
       {
-        tabIndex: u.tabIndex ?? -1,
-        onClick: C,
+        tabIndex: d.tabIndex ?? -1,
+        onClick: L,
         className: n(
           "absolute bottom-6 right-6 z-50 p-3.5! aspect-square rounded-full! shadow-lg transition-all duration-300 hover:scale-110 pointer-events-auto cursor-pointer scroll-to-top-button",
           "bg-brand-primary-default hover:bg-brand-primary-hover text-white",
           // Transiciones de aparición/desaparición
           "transform translate-y-0 opacity-70",
-          !k && "translate-y-4 opacity-0 pointer-events-none",
-          u.className
+          !C && "translate-y-4 opacity-0 pointer-events-none",
+          d.className
         ),
         "aria-label": "Scroll to top",
         style: {
           transition: "all 0.3s ease-in-out"
         },
-        children: u.icon ? /* @__PURE__ */ t.jsx(u.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ t.jsx(N, { size: 20, className: "text-white rotate-90" })
+        children: d.icon ? /* @__PURE__ */ s.jsx(d.icon, { size: 20, className: "text-white" }) : /* @__PURE__ */ s.jsx(N, { size: 20, className: "text-white rotate-90" })
       }
     )
   ] });
-}, K = (o) => {
-  const { controls: i } = o, l = V(o);
-  return O(i, () => ({
+}, X = (o) => {
+  const { controls: i } = o, l = W(o);
+  return U(i, () => ({
     subscribeToScrollTarget: l.handlers.subscribeToScrollTarget,
     subscribeToHyperextension: l.handlers.subscribeToHyperextension,
     releaseHyperextensionOverscroll: l.handlers.releaseHyperextensionOverscroll
-  }), [l]), /* @__PURE__ */ t.jsx(U, { ...o, scrollableState: l });
+  }), [l]), /* @__PURE__ */ s.jsx($, { ...o, scrollableState: l });
 };
 export {
-  K as S,
-  U as a
+  X as S,
+  $ as a
 };

package/dist/Scrollable.es.js

@@ -1,4 +1,4 @@
-import { S as r } from "./Scrollable-C2iwLEgl.js";
+import { S as r } from "./Scrollable-B845sesY.js";
 export {
   r as Scrollable
 };

package/dist/TabSwitch.es.js

@@ -1,4 +1,4 @@
-import { T, T as e } from "./usePyrionLayout-DiYRqqHU.js";
+import { T, T as e } from "./usePyrionLayout-N9l4oGVr.js";
 export {
   T as TabSwitch,
   e as default

package/dist/Tabs.es.js

@@ -6,7 +6,7 @@ import { Badge as R } from "./Badge.es.js";
 import { i as E } from "./iconUtils-rTOfKDxE.js";
 import { PlainTooltip as M } from "./PlainTooltip.es.js";
 import { Info as L } from "./Icon-Info.es.js";
-import { S as $ } from "./Scrollable-C2iwLEgl.js";
+import { S as $ } from "./Scrollable-B845sesY.js";
 const A = b(
   "relative transition-colors duration-200 ease-in-out p-0 gap-0 flex",
   {

package/dist/UserAccountMenu.es.js

@@ -2,7 +2,7 @@ import { j as e } from "./jsx-runtime-CqQglQKg.js";
 import { c as u } from "./cn-B6yFEsav.js";
 import f from "./UserCard.es.js";
 import h from "./ListItem.es.js";
-import { S as v } from "./Scrollable-C2iwLEgl.js";
+import { S as v } from "./Scrollable-B845sesY.js";
 import b from "./Divider.es.js";
 import { Settings as y } from "./Icon-Settings.es.js";
 import { Logout as N } from "./Icon-Logout.es.js";

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

@@ -70,6 +70,8 @@ export interface ScrollableProps {
     children?: React.ReactNode;
     scrollbarProps?: ScrollbarProps;
     disableMouseScroll?: boolean;
+    /** Desactiva el scroll por drag (click y arrastrar). @default false */
+    disableDragScroll?: boolean;
     defaultBehavior?: 'scroll-on-click' | 'scroll-on-hover' | 'none';
     persistScroll?: boolean | string;
     controls?: React.RefObject<ScrollableControlsHandler | null>;

package/dist/prometeo-design-system.es.js

@@ -65,7 +65,7 @@ import { default as fa } from "./Spinner.es.js";
 import { S as pa } from "./Star-DKhRZoa9.js";
 import { Steps as xa } from "./Steps.es.js";
 import { Subtitle as ga } from "./Subtitle.es.js";
-import { T as Ca } from "./usePyrionLayout-DiYRqqHU.js";
+import { T as Ca } from "./usePyrionLayout-N9l4oGVr.js";
 import { TertiaryLevelSidebar as wa } from "./TertiaryLevelSidebar.es.js";
 import { TextArea as Ta, TextArea as La } from "./TextArea.es.js";
 import { Title as Na } from "./Title.es.js";

package/dist/{usePyrionLayout-DiYRqqHU.js → usePyrionLayout-N9l4oGVr.js}

@@ -8,7 +8,7 @@ import Z, { useDrawerSidebarOpen as Jt } from "./NavigationDrawer.es.js";
 import { a as ce, u as Me } from "./useDrawerCollapsed-CJOXf2Fw.js";
 import { Sidebar as Qt } from "./Sidebar.es.js";
 import { NavigationRail as ee } from "./NavigationRail.es.js";
-import { S as nt } from "./Scrollable-C2iwLEgl.js";
+import { S as nt } from "./Scrollable-B845sesY.js";
 import je from "./Divider.es.js";
 import { SidebarItem as le } from "./SidebarItem.es.js";
 import { Collapsible as qe } from "./Collapsible.es.js";

package/dist/usePyrionLayout.es.js

@@ -1,4 +1,4 @@
-import { u as f } from "./usePyrionLayout-DiYRqqHU.js";
+import { u as f } from "./usePyrionLayout-N9l4oGVr.js";
 export {
   f as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "prometeo-design-system",
   "private": false,
-  "version": "9.1.2",
+  "version": "9.1.3",
   "type": "module",
   "description": "design kit system",
   "main": "dist/prometeo-design-system.umd.js",