@soyfri/shared-library 1.5.0-beta.4 → 2.0.0-beta.0

package/dist/components/ScrollTopButton/ScrollTopButton.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollTopButton.cjs","sources":["../../../src/components/ScrollTopButton/scrollToTop.ts","../../../src/components/ScrollTopButton/ScrollTopButton.tsx"],"sourcesContent":["export interface ScrollToTopOptions {\n  /** Comportamiento del scroll. Default: `'smooth'`. */\n  behavior?: ScrollBehavior;\n  /**\n   * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n   * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n   */\n  target?: Window | HTMLElement;\n  /** Offset desde el top. Default: `0`. */\n  top?: number;\n}\n\n/**\n * Reemplaza imperativamente a `ScrollTopComponent.goTop()` de Metronic.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * // Reemplazo directo del legacy:\n * // Antes: ScrollTopComponent.goTop()\n * scrollToTop();\n *\n * // Con opciones:\n * scrollToTop({ behavior: 'auto' });\n * scrollToTop({ target: myScrollableRef.current });\n * ```\n */\nexport function scrollToTop({\n  behavior = 'smooth',\n  target = typeof window !== 'undefined' ? window : undefined,\n  top = 0,\n}: ScrollToTopOptions = {}): void {\n  if (!target) return;\n  target.scrollTo({ top, left: 0, behavior });\n}\n","import React, { useEffect, useState, type ReactNode } from 'react';\nimport { Fab, Zoom, useTheme } from '@mui/material';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { scrollToTop } from './scrollToTop';\n\nexport type ScrollTopButtonPosition =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport interface ScrollTopButtonProps {\n  /**\n   * Distancia en px que hay que scrollear antes de mostrar el botón.\n   * Default: `300`.\n   */\n  threshold?: number;\n  /**\n   * Posición del botón en la pantalla. Default: `'bottom-right'`.\n   */\n  position?: ScrollTopButtonPosition;\n  /**\n   * Elemento scrolleable a observar y al que se hace scrollTop. Si se omite,\n   * se usa `window` (caso más común).\n   */\n  scrollTarget?: Window | HTMLElement | null;\n  /** Tamaño del FAB. Default: `'medium'`. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Color del FAB. Default: `'default'`.\n   */\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';\n  /** Icono custom. Default: `<KeyboardArrowUpIcon />`. */\n  icon?: ReactNode;\n  /** Texto accesible (aria-label). Default: `\"Subir al inicio\"`. */\n  ariaLabel?: string;\n  /** Preset registrado en `theme.styles.ScrollTopButton`. */\n  preset?: string;\n  /** sx del Fab. Se compone sobre la posición + preset. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\nconst positionSx: Record<ScrollTopButtonPosition, SxProps<Theme>> = {\n  'bottom-right': { position: 'fixed', bottom: 24, right: 24 },\n  'bottom-left': { position: 'fixed', bottom: 24, left: 24 },\n  'bottom-center': {\n    position: 'fixed',\n    bottom: 24,\n    left: '50%',\n    transform: 'translateX(-50%)',\n  },\n};\n\n/**\n * Botón flotante que aparece tras scrollear más de `threshold` px y, al\n * clickearse, hace scroll suave hasta el tope. Reemplaza al componente\n * visible de `ScrollTopComponent` de Metronic.\n *\n * Para el caso imperativo (llamar `goTop()` tras una mutación), usar el\n * helper `scrollToTop()` directamente.\n *\n * ```tsx\n * <ScrollTopButton threshold={400} position=\"bottom-right\" />\n * ```\n */\nexport function ScrollTopButton({\n  threshold = 300,\n  position = 'bottom-right',\n  scrollTarget,\n  size = 'medium',\n  color = 'default',\n  icon,\n  ariaLabel = 'Subir al inicio',\n  preset,\n  sx,\n  className,\n}: ScrollTopButtonProps) {\n  const theme = useTheme();\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    // Si viene scrollTarget explícito, usarlo; si no, window.\n    const target: Window | HTMLElement | null =\n      scrollTarget ?? (typeof window !== 'undefined' ? window : null);\n    if (!target) return;\n\n    const readScrollTop = () =>\n      target === window\n        ? window.scrollY || document.documentElement.scrollTop\n        : (target as HTMLElement).scrollTop;\n\n    const handleScroll = () => {\n      setVisible(readScrollTop() > threshold);\n    };\n\n    handleScroll(); // check inicial por si ya estamos scrolleados\n    target.addEventListener('scroll', handleScroll, { passive: true });\n    return () => target.removeEventListener('scroll', handleScroll);\n  }, [threshold, scrollTarget]);\n\n  const handleClick = () => {\n    scrollToTop({\n      target: scrollTarget ?? (typeof window !== 'undefined' ? window : undefined),\n    });\n  };\n\n  const presetSx = resolvePreset('ScrollTopButton', preset, theme);\n\n  const mergedSx: SxProps<Theme> = [\n    positionSx[position],\n    { zIndex: theme.zIndex.speedDial },\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  return (\n    <Zoom in={visible} unmountOnExit>\n      <Fab\n        size={size}\n        color={color}\n        aria-label={ariaLabel}\n        onClick={handleClick}\n        className={className}\n        sx={mergedSx}\n      >\n        {icon ?? <KeyboardArrowUpIcon />}\n      </Fab>\n    </Zoom>\n  );\n}\n\nexport default ScrollTopButton;\n"],"names":["useTheme","useState","useEffect","resolvePreset","jsx","Zoom","Fab"],"mappings":";;;;;;;AA6BO,SAAS,YAAY;AAAA,EAC1B,WAAW;AAAA,EACX,SAAS,OAAO,WAAW,cAAc,SAAS;AAAA,EAClD,MAAM;AACR,IAAwB,IAAU;AAChC,MAAI,CAAC,OAAQ;AACb,SAAO,SAAS,EAAE,KAAK,MAAM,GAAG,UAAU;AAC5C;ACSA,MAAM,aAA8D;AAAA,EAClE,gBAAgB,EAAE,UAAU,SAAS,QAAQ,IAAI,OAAO,GAAA;AAAA,EACxD,eAAe,EAAE,UAAU,SAAS,QAAQ,IAAI,MAAM,GAAA;AAAA,EACtD,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EAAA;AAEf;AAcO,SAAS,gBAAgB;AAAA,EAC9B,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,QAAQA,SAAAA,SAAA;AACd,QAAM,CAAC,SAAS,UAAU,IAAIC,MAAAA,SAAS,KAAK;AAE5CC,QAAAA,UAAU,MAAM;AAEd,UAAM,SACJ,sCAAiB,OAAO,WAAW,cAAc,SAAS;AAC5D,QAAI,CAAC,OAAQ;AAEb,UAAM,gBAAgB,MACpB,WAAW,SACP,OAAO,WAAW,SAAS,gBAAgB,YAC1C,OAAuB;AAE9B,UAAM,eAAe,MAAM;AACzB,iBAAW,cAAA,IAAkB,SAAS;AAAA,IACxC;AAEA,iBAAA;AACA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM;AACjE,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAChE,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,cAAc,MAAM;AACxB,gBAAY;AAAA,MACV,QAAQ,sCAAiB,OAAO,WAAW,cAAc,SAAS;AAAA,IAAA,CACnE;AAAA,EACH;AAEA,QAAM,WAAWC,cAAAA,cAAc,mBAAmB,QAAQ,KAAK;AAE/D,QAAM,WAA2B;AAAA,IAC/B,WAAW,QAAQ;AAAA,IACnB,EAAE,QAAQ,MAAM,OAAO,UAAA;AAAA,IACvB,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,SACEC,2BAAAA,IAACC,SAAAA,MAAA,EAAK,IAAI,SAAS,eAAa,MAC9B,UAAAD,2BAAAA;AAAAA,IAACE,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT;AAAA,MACA,IAAI;AAAA,MAEH,UAAA,qDAAS,qBAAA,CAAA,CAAoB;AAAA,IAAA;AAAA,EAAA,GAElC;AAEJ;;;;"}

package/dist/components/ScrollTopButton/ScrollTopButton.d.ts

@@ -0,0 +1,48 @@
+import { ReactNode } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export type ScrollTopButtonPosition = 'bottom-right' | 'bottom-left' | 'bottom-center';
+export interface ScrollTopButtonProps {
+    /**
+     * Distancia en px que hay que scrollear antes de mostrar el botón.
+     * Default: `300`.
+     */
+    threshold?: number;
+    /**
+     * Posición del botón en la pantalla. Default: `'bottom-right'`.
+     */
+    position?: ScrollTopButtonPosition;
+    /**
+     * Elemento scrolleable a observar y al que se hace scrollTop. Si se omite,
+     * se usa `window` (caso más común).
+     */
+    scrollTarget?: Window | HTMLElement | null;
+    /** Tamaño del FAB. Default: `'medium'`. */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * Color del FAB. Default: `'default'`.
+     */
+    color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
+    /** Icono custom. Default: `<KeyboardArrowUpIcon />`. */
+    icon?: ReactNode;
+    /** Texto accesible (aria-label). Default: `"Subir al inicio"`. */
+    ariaLabel?: string;
+    /** Preset registrado en `theme.styles.ScrollTopButton`. */
+    preset?: string;
+    /** sx del Fab. Se compone sobre la posición + preset. */
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+/**
+ * Botón flotante que aparece tras scrollear más de `threshold` px y, al
+ * clickearse, hace scroll suave hasta el tope. Reemplaza al componente
+ * visible de `ScrollTopComponent` de Metronic.
+ *
+ * Para el caso imperativo (llamar `goTop()` tras una mutación), usar el
+ * helper `scrollToTop()` directamente.
+ *
+ * ```tsx
+ * <ScrollTopButton threshold={400} position="bottom-right" />
+ * ```
+ */
+export declare function ScrollTopButton({ threshold, position, scrollTarget, size, color, icon, ariaLabel, preset, sx, className, }: ScrollTopButtonProps): import("react/jsx-runtime").JSX.Element;
+export default ScrollTopButton;

package/dist/components/ScrollTopButton/ScrollTopButton.js

@@ -0,0 +1,79 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { useTheme, Zoom, Fab } from "@mui/material";
+import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+function scrollToTop({
+  behavior = "smooth",
+  target = typeof window !== "undefined" ? window : void 0,
+  top = 0
+} = {}) {
+  if (!target) return;
+  target.scrollTo({ top, left: 0, behavior });
+}
+const positionSx = {
+  "bottom-right": { position: "fixed", bottom: 24, right: 24 },
+  "bottom-left": { position: "fixed", bottom: 24, left: 24 },
+  "bottom-center": {
+    position: "fixed",
+    bottom: 24,
+    left: "50%",
+    transform: "translateX(-50%)"
+  }
+};
+function ScrollTopButton({
+  threshold = 300,
+  position = "bottom-right",
+  scrollTarget,
+  size = "medium",
+  color = "default",
+  icon,
+  ariaLabel = "Subir al inicio",
+  preset,
+  sx,
+  className
+}) {
+  const theme = useTheme();
+  const [visible, setVisible] = useState(false);
+  useEffect(() => {
+    const target = scrollTarget != null ? scrollTarget : typeof window !== "undefined" ? window : null;
+    if (!target) return;
+    const readScrollTop = () => target === window ? window.scrollY || document.documentElement.scrollTop : target.scrollTop;
+    const handleScroll = () => {
+      setVisible(readScrollTop() > threshold);
+    };
+    handleScroll();
+    target.addEventListener("scroll", handleScroll, { passive: true });
+    return () => target.removeEventListener("scroll", handleScroll);
+  }, [threshold, scrollTarget]);
+  const handleClick = () => {
+    scrollToTop({
+      target: scrollTarget != null ? scrollTarget : typeof window !== "undefined" ? window : void 0
+    });
+  };
+  const presetSx = resolvePreset("ScrollTopButton", preset, theme);
+  const mergedSx = [
+    positionSx[position],
+    { zIndex: theme.zIndex.speedDial },
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  return /* @__PURE__ */ jsx(Zoom, { in: visible, unmountOnExit: true, children: /* @__PURE__ */ jsx(
+    Fab,
+    {
+      size,
+      color,
+      "aria-label": ariaLabel,
+      onClick: handleClick,
+      className,
+      sx: mergedSx,
+      children: icon != null ? icon : /* @__PURE__ */ jsx(KeyboardArrowUpIcon, {})
+    }
+  ) });
+}
+export {
+  ScrollTopButton,
+  ScrollTopButton as default,
+  scrollToTop
+};
+//# sourceMappingURL=ScrollTopButton.js.map

package/dist/components/ScrollTopButton/ScrollTopButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollTopButton.js","sources":["../../../src/components/ScrollTopButton/scrollToTop.ts","../../../src/components/ScrollTopButton/ScrollTopButton.tsx"],"sourcesContent":["export interface ScrollToTopOptions {\n  /** Comportamiento del scroll. Default: `'smooth'`. */\n  behavior?: ScrollBehavior;\n  /**\n   * Elemento target del scroll. Default: `window`. Útil cuando el contenedor\n   * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).\n   */\n  target?: Window | HTMLElement;\n  /** Offset desde el top. Default: `0`. */\n  top?: number;\n}\n\n/**\n * Reemplaza imperativamente a `ScrollTopComponent.goTop()` de Metronic.\n *\n * Llamar tras mutaciones / cambios de filtros / apertura de modales para\n * asegurar que el usuario vea el mensaje de confirmación en la parte\n * superior de la página.\n *\n * ```ts\n * // Reemplazo directo del legacy:\n * // Antes: ScrollTopComponent.goTop()\n * scrollToTop();\n *\n * // Con opciones:\n * scrollToTop({ behavior: 'auto' });\n * scrollToTop({ target: myScrollableRef.current });\n * ```\n */\nexport function scrollToTop({\n  behavior = 'smooth',\n  target = typeof window !== 'undefined' ? window : undefined,\n  top = 0,\n}: ScrollToTopOptions = {}): void {\n  if (!target) return;\n  target.scrollTo({ top, left: 0, behavior });\n}\n","import React, { useEffect, useState, type ReactNode } from 'react';\nimport { Fab, Zoom, useTheme } from '@mui/material';\nimport KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { resolvePreset } from '../_shared/resolvePreset';\nimport { scrollToTop } from './scrollToTop';\n\nexport type ScrollTopButtonPosition =\n  | 'bottom-right'\n  | 'bottom-left'\n  | 'bottom-center';\n\nexport interface ScrollTopButtonProps {\n  /**\n   * Distancia en px que hay que scrollear antes de mostrar el botón.\n   * Default: `300`.\n   */\n  threshold?: number;\n  /**\n   * Posición del botón en la pantalla. Default: `'bottom-right'`.\n   */\n  position?: ScrollTopButtonPosition;\n  /**\n   * Elemento scrolleable a observar y al que se hace scrollTop. Si se omite,\n   * se usa `window` (caso más común).\n   */\n  scrollTarget?: Window | HTMLElement | null;\n  /** Tamaño del FAB. Default: `'medium'`. */\n  size?: 'small' | 'medium' | 'large';\n  /**\n   * Color del FAB. Default: `'default'`.\n   */\n  color?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';\n  /** Icono custom. Default: `<KeyboardArrowUpIcon />`. */\n  icon?: ReactNode;\n  /** Texto accesible (aria-label). Default: `\"Subir al inicio\"`. */\n  ariaLabel?: string;\n  /** Preset registrado en `theme.styles.ScrollTopButton`. */\n  preset?: string;\n  /** sx del Fab. Se compone sobre la posición + preset. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\nconst positionSx: Record<ScrollTopButtonPosition, SxProps<Theme>> = {\n  'bottom-right': { position: 'fixed', bottom: 24, right: 24 },\n  'bottom-left': { position: 'fixed', bottom: 24, left: 24 },\n  'bottom-center': {\n    position: 'fixed',\n    bottom: 24,\n    left: '50%',\n    transform: 'translateX(-50%)',\n  },\n};\n\n/**\n * Botón flotante que aparece tras scrollear más de `threshold` px y, al\n * clickearse, hace scroll suave hasta el tope. Reemplaza al componente\n * visible de `ScrollTopComponent` de Metronic.\n *\n * Para el caso imperativo (llamar `goTop()` tras una mutación), usar el\n * helper `scrollToTop()` directamente.\n *\n * ```tsx\n * <ScrollTopButton threshold={400} position=\"bottom-right\" />\n * ```\n */\nexport function ScrollTopButton({\n  threshold = 300,\n  position = 'bottom-right',\n  scrollTarget,\n  size = 'medium',\n  color = 'default',\n  icon,\n  ariaLabel = 'Subir al inicio',\n  preset,\n  sx,\n  className,\n}: ScrollTopButtonProps) {\n  const theme = useTheme();\n  const [visible, setVisible] = useState(false);\n\n  useEffect(() => {\n    // Si viene scrollTarget explícito, usarlo; si no, window.\n    const target: Window | HTMLElement | null =\n      scrollTarget ?? (typeof window !== 'undefined' ? window : null);\n    if (!target) return;\n\n    const readScrollTop = () =>\n      target === window\n        ? window.scrollY || document.documentElement.scrollTop\n        : (target as HTMLElement).scrollTop;\n\n    const handleScroll = () => {\n      setVisible(readScrollTop() > threshold);\n    };\n\n    handleScroll(); // check inicial por si ya estamos scrolleados\n    target.addEventListener('scroll', handleScroll, { passive: true });\n    return () => target.removeEventListener('scroll', handleScroll);\n  }, [threshold, scrollTarget]);\n\n  const handleClick = () => {\n    scrollToTop({\n      target: scrollTarget ?? (typeof window !== 'undefined' ? window : undefined),\n    });\n  };\n\n  const presetSx = resolvePreset('ScrollTopButton', preset, theme);\n\n  const mergedSx: SxProps<Theme> = [\n    positionSx[position],\n    { zIndex: theme.zIndex.speedDial },\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  return (\n    <Zoom in={visible} unmountOnExit>\n      <Fab\n        size={size}\n        color={color}\n        aria-label={ariaLabel}\n        onClick={handleClick}\n        className={className}\n        sx={mergedSx}\n      >\n        {icon ?? <KeyboardArrowUpIcon />}\n      </Fab>\n    </Zoom>\n  );\n}\n\nexport default ScrollTopButton;\n"],"names":[],"mappings":";;;;;AA6BO,SAAS,YAAY;AAAA,EAC1B,WAAW;AAAA,EACX,SAAS,OAAO,WAAW,cAAc,SAAS;AAAA,EAClD,MAAM;AACR,IAAwB,IAAU;AAChC,MAAI,CAAC,OAAQ;AACb,SAAO,SAAS,EAAE,KAAK,MAAM,GAAG,UAAU;AAC5C;ACSA,MAAM,aAA8D;AAAA,EAClE,gBAAgB,EAAE,UAAU,SAAS,QAAQ,IAAI,OAAO,GAAA;AAAA,EACxD,eAAe,EAAE,UAAU,SAAS,QAAQ,IAAI,MAAM,GAAA;AAAA,EACtD,iBAAiB;AAAA,IACf,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,WAAW;AAAA,EAAA;AAEf;AAcO,SAAS,gBAAgB;AAAA,EAC9B,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,QAAQ,SAAA;AACd,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAE5C,YAAU,MAAM;AAEd,UAAM,SACJ,sCAAiB,OAAO,WAAW,cAAc,SAAS;AAC5D,QAAI,CAAC,OAAQ;AAEb,UAAM,gBAAgB,MACpB,WAAW,SACP,OAAO,WAAW,SAAS,gBAAgB,YAC1C,OAAuB;AAE9B,UAAM,eAAe,MAAM;AACzB,iBAAW,cAAA,IAAkB,SAAS;AAAA,IACxC;AAEA,iBAAA;AACA,WAAO,iBAAiB,UAAU,cAAc,EAAE,SAAS,MAAM;AACjE,WAAO,MAAM,OAAO,oBAAoB,UAAU,YAAY;AAAA,EAChE,GAAG,CAAC,WAAW,YAAY,CAAC;AAE5B,QAAM,cAAc,MAAM;AACxB,gBAAY;AAAA,MACV,QAAQ,sCAAiB,OAAO,WAAW,cAAc,SAAS;AAAA,IAAA,CACnE;AAAA,EACH;AAEA,QAAM,WAAW,cAAc,mBAAmB,QAAQ,KAAK;AAE/D,QAAM,WAA2B;AAAA,IAC/B,WAAW,QAAQ;AAAA,IACnB,EAAE,QAAQ,MAAM,OAAO,UAAA;AAAA,IACvB,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,SACE,oBAAC,MAAA,EAAK,IAAI,SAAS,eAAa,MAC9B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAY;AAAA,MACZ,SAAS;AAAA,MACT;AAAA,MACA,IAAI;AAAA,MAEH,UAAA,0CAAS,qBAAA,CAAA,CAAoB;AAAA,IAAA;AAAA,EAAA,GAElC;AAEJ;"}

package/dist/components/ScrollTopButton/index.d.ts

@@ -0,0 +1,4 @@
+export { ScrollTopButton, default } from './ScrollTopButton';
+export type { ScrollTopButtonProps, ScrollTopButtonPosition, } from './ScrollTopButton';
+export { scrollToTop } from './scrollToTop';
+export type { ScrollToTopOptions } from './scrollToTop';

package/dist/components/ScrollTopButton/scrollToTop.d.ts

@@ -0,0 +1,29 @@
+export interface ScrollToTopOptions {
+    /** Comportamiento del scroll. Default: `'smooth'`. */
+    behavior?: ScrollBehavior;
+    /**
+     * Elemento target del scroll. Default: `window`. Útil cuando el contenedor
+     * scrolleable NO es `window` (p.ej. un `<Box>` con `overflow: auto`).
+     */
+    target?: Window | HTMLElement;
+    /** Offset desde el top. Default: `0`. */
+    top?: number;
+}
+/**
+ * Reemplaza imperativamente a `ScrollTopComponent.goTop()` de Metronic.
+ *
+ * Llamar tras mutaciones / cambios de filtros / apertura de modales para
+ * asegurar que el usuario vea el mensaje de confirmación en la parte
+ * superior de la página.
+ *
+ * ```ts
+ * // Reemplazo directo del legacy:
+ * // Antes: ScrollTopComponent.goTop()
+ * scrollToTop();
+ *
+ * // Con opciones:
+ * scrollToTop({ behavior: 'auto' });
+ * scrollToTop({ target: myScrollableRef.current });
+ * ```
+ */
+export declare function scrollToTop({ behavior, target, top, }?: ScrollToTopOptions): void;

package/dist/components/ScrollTopButton.d.ts

@@ -0,0 +1,6 @@
+export * from './ScrollTopButton/index'
+export {}
+import _default from './ScrollTopButton/index'
+export default _default
+export * from './ScrollTopButton/index'
+export {}

package/dist/components/Select/Select.cjs

@@ -0,0 +1,448 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const reactHookForm = require("react-hook-form");
+const formField_sx = require("../../formField.sx-CQ1mbk9M.cjs");
+const resolvePreset = require("../../resolvePreset-CT3kU-K2.cjs");
+const ClearIcon = require("@mui/icons-material/Clear");
+const CheckIcon = require("@mui/icons-material/Check");
+const buildSelectSx = (borderRadius, labelPosition) => formField_sx.buildFormFieldSx({ borderRadius, labelPosition });
+const filterOptionsByLabel = (options, search) => {
+  if (!search) return options;
+  const needle = search.toLowerCase();
+  return options.filter((opt) => opt.label.toLowerCase().includes(needle));
+};
+const groupOptions = (options) => {
+  const groups = {};
+  options.forEach((opt) => {
+    const group = opt.group || "__default";
+    if (!groups[group]) groups[group] = [];
+    groups[group].push(opt);
+  });
+  return groups;
+};
+const isGroupedOptionsEmpty = (groups) => {
+  const keys = Object.keys(groups);
+  if (keys.length === 0) return true;
+  if (keys.length === 1 && groups["__default"] && groups["__default"].length === 0) {
+    return true;
+  }
+  return false;
+};
+const normalizeSelectValue = (value, multiple) => {
+  if (multiple) return value != null ? value : [];
+  return value != null ? value : "";
+};
+const isSelectValueEmpty = (normalizedValue, multiple) => {
+  if (multiple) return Array.isArray(normalizedValue) && normalizedValue.length === 0;
+  return normalizedValue === "" || normalizedValue === null || normalizedValue === void 0;
+};
+const SelectSearchHeader = ({
+  value,
+  onChange,
+  placeholder = "Buscar...",
+  inputRef
+}) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.ListSubheader,
+    {
+      sx: {
+        px: 2,
+        pt: 1,
+        pb: 1,
+        backgroundColor: "background.paper",
+        zIndex: 1,
+        position: "sticky",
+        top: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        material.TextField,
+        {
+          inputRef,
+          placeholder,
+          variant: "standard",
+          size: "small",
+          fullWidth: true,
+          value,
+          onChange: (e) => onChange(e.target.value),
+          slotProps: { htmlInput: { autoFocus: true } },
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => e.stopPropagation()
+        }
+      )
+    }
+  );
+};
+function SelectValue(props) {
+  var _a;
+  const {
+    selected,
+    options,
+    multiple,
+    placeholder,
+    maxChipsToShow,
+    chipVariant,
+    renderChipLabel,
+    onDeleteChip,
+    currentValues
+  } = props;
+  const isEmpty = !selected || Array.isArray(selected) && selected.length === 0;
+  if (isEmpty) {
+    return /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "text.disabled" }, children: placeholder || "" });
+  }
+  if (!multiple) {
+    const item = options.find((opt) => opt.value === selected);
+    if (renderChipLabel && item) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderChipLabel(item) });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_a = item == null ? void 0 : item.label) != null ? _a : String(selected) });
+  }
+  const selectedValuesArray = selected;
+  const displayedChips = selectedValuesArray.slice(0, maxChipsToShow);
+  const hiddenChipsCount = selectedValuesArray.length - maxChipsToShow;
+  const handleDelete = (chipValue) => {
+    if (!onDeleteChip || !currentValues) return;
+    onDeleteChip(currentValues.filter((v) => v !== chipValue));
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5 }, children: [
+    displayedChips.map((val) => {
+      const item = options.find((o) => o.value === val);
+      if (!item) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        material.Chip,
+        {
+          variant: chipVariant,
+          color: "primary",
+          size: "small",
+          label: renderChipLabel ? renderChipLabel(item) : item.label,
+          avatar: item.img ? /* @__PURE__ */ jsxRuntime.jsx(material.Avatar, { src: item.img }) : void 0,
+          onDelete: () => handleDelete(val),
+          deleteIcon: /* @__PURE__ */ jsxRuntime.jsx(ClearIcon, { fontSize: "small" })
+        },
+        String(val)
+      );
+    }),
+    hiddenChipsCount > 0 && /* @__PURE__ */ jsxRuntime.jsx(material.Chip, { size: "small", variant: chipVariant, label: `+${hiddenChipsCount} más` })
+  ] });
+}
+const renderSelectMenuItem = ({
+  option,
+  selected,
+  customRender
+}) => /* @__PURE__ */ jsxRuntime.jsxs(
+  material.MenuItem,
+  {
+    value: option.value,
+    disabled: option.disabled,
+    selected,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(material.ListItemIcon, { sx: { minWidth: 32 }, children: selected && /* @__PURE__ */ jsxRuntime.jsx(CheckIcon, { color: "success", fontSize: "small" }) }),
+      customRender ? customRender(option) : option.label
+    ]
+  },
+  String(option.value)
+);
+function Option(_props) {
+  return null;
+}
+Option.displayName = "Option";
+function Select(props) {
+  const _a = props, {
+    label,
+    options = [],
+    value,
+    onChange,
+    defaultValue,
+    size = "small",
+    multiple = false,
+    filterable = false,
+    placeholder,
+    children,
+    maxHeight = 300,
+    maxWidth,
+    maxChipsToShow = 3,
+    renderChipLabel,
+    chipVariant = "outlined",
+    loadOptions,
+    loadingMessage = "Cargando opciones...",
+    noOptionsMessage = "No hay opciones",
+    debounceTimeout = 300,
+    disabled = false,
+    error = false,
+    helperText,
+    borderRadius = 10,
+    labelPosition = "outside",
+    preset,
+    sx,
+    className
+  } = _a, rest = __objRest(_a, [
+    "label",
+    "options",
+    "value",
+    "onChange",
+    "defaultValue",
+    "size",
+    "multiple",
+    "filterable",
+    "placeholder",
+    "children",
+    "maxHeight",
+    "maxWidth",
+    "maxChipsToShow",
+    "renderChipLabel",
+    "chipVariant",
+    "loadOptions",
+    "loadingMessage",
+    "noOptionsMessage",
+    "debounceTimeout",
+    "disabled",
+    "error",
+    "helperText",
+    "borderRadius",
+    "labelPosition",
+    "preset",
+    "sx",
+    "className"
+  ]);
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("Select", preset, theme);
+  const isRHFMode = "control" in rest && rest.control !== void 0;
+  const customRender = React.useMemo(() => {
+    var _a2;
+    if (React.Children.count(children) === 1) {
+      const child = React.Children.only(children);
+      if (React.isValidElement(child) && ((_a2 = child.type) == null ? void 0 : _a2.displayName) === "Option") {
+        return child.props.children;
+      }
+    }
+    return null;
+  }, [children]);
+  const [search, setSearch] = React.useState("");
+  const [asyncOptions, setAsyncOptions] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const debounceTimerRef = React.useRef(null);
+  const searchInputRef = React.useRef(null);
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [isFocused, setIsFocused] = React.useState(false);
+  const isAsync = typeof loadOptions === "function";
+  const currentOptions = isAsync ? asyncOptions : options;
+  React.useEffect(() => {
+    var _a2;
+    if (!isAsync) return;
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (search) {
+      setLoading(true);
+      debounceTimerRef.current = window.setTimeout(() => {
+        loadOptions(search).then(setAsyncOptions).finally(() => {
+          var _a3;
+          setLoading(false);
+          (_a3 = searchInputRef.current) == null ? void 0 : _a3.focus();
+        });
+      }, debounceTimeout);
+    } else {
+      setAsyncOptions([]);
+      setLoading(false);
+      (_a2 = searchInputRef.current) == null ? void 0 : _a2.focus();
+    }
+  }, [search, isAsync, loadOptions, debounceTimeout]);
+  const filteredOptions = React.useMemo(() => {
+    if (isAsync) return currentOptions;
+    if (!filterable) return currentOptions;
+    return filterOptionsByLabel(currentOptions, search);
+  }, [search, filterable, currentOptions, isAsync]);
+  const groupedOptions = React.useMemo(() => groupOptions(filteredOptions), [filteredOptions]);
+  const menuItems = React.useMemo(() => {
+    const items = [];
+    if (filterable || isAsync) {
+      items.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SelectSearchHeader,
+          {
+            value: search,
+            onChange: setSearch,
+            inputRef: searchInputRef
+          },
+          "search-header"
+        )
+      );
+    }
+    const noOptions = isGroupedOptionsEmpty(groupedOptions);
+    if (loading) {
+      items.push(
+        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(material.CircularProgress, { size: 20 }),
+          /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: loadingMessage })
+        ] }) }, "loading-message")
+      );
+    } else if (noOptions) {
+      items.push(
+        /* @__PURE__ */ jsxRuntime.jsx(material.MenuItem, { disabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { children: noOptionsMessage }) }, "no-options-message")
+      );
+    } else {
+      Object.entries(groupedOptions).forEach(([group, opts]) => {
+        if (group !== "__default") {
+          items.push(
+            /* @__PURE__ */ jsxRuntime.jsx(material.ListSubheader, { disableSticky: true, children: group }, group)
+          );
+        }
+        opts.forEach((opt) => {
+          var _a2;
+          const isSelected = multiple ? (_a2 = value == null ? void 0 : value.includes(opt.value)) != null ? _a2 : false : value === opt.value;
+          items.push(
+            renderSelectMenuItem({
+              option: opt,
+              selected: isSelected,
+              customRender
+            })
+          );
+        });
+      });
+    }
+    return items;
+  }, [
+    groupedOptions,
+    customRender,
+    filterable,
+    isAsync,
+    search,
+    loading,
+    loadingMessage,
+    noOptionsMessage,
+    multiple,
+    value
+  ]);
+  const handleChangeInternal = (event, rhfOnChange) => {
+    const newValue = event.target.value;
+    if (isRHFMode) {
+      rhfOnChange == null ? void 0 : rhfOnChange(newValue);
+    } else {
+      onChange == null ? void 0 : onChange(newValue);
+    }
+  };
+  const mergedSx = [
+    buildSelectSx(borderRadius, labelPosition),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  const renderSelect = (selectValue, selectOnChange, onBlur, inputRef, rhfError, rhfHelperText) => {
+    const finalError = rhfError != null ? rhfError : error;
+    const finalHelperText = rhfHelperText != null ? rhfHelperText : helperText;
+    const inputElement = labelPosition === "floating" ? /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, { label }) : /* @__PURE__ */ jsxRuntime.jsx(material.OutlinedInput, {});
+    const normalizedValue = normalizeSelectValue(selectValue, multiple);
+    const isEmpty = isSelectValueEmpty(normalizedValue, multiple);
+    const shouldShrink = !isEmpty || isFocused || isOpen;
+    const shouldDisplayPlaceholder = isEmpty && (isFocused || isOpen) && !!placeholder;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.FormControl,
+      {
+        fullWidth: true,
+        size,
+        error: finalError,
+        disabled,
+        className,
+        sx: mergedSx,
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(material.InputLabel, { shrink: shouldShrink, children: label }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            material.Select,
+            __spreadProps(__spreadValues({
+              value: normalizedValue,
+              defaultValue,
+              multiple,
+              onChange: selectOnChange,
+              onBlur: (e) => {
+                setIsFocused(false);
+                onBlur == null ? void 0 : onBlur(e);
+              },
+              onFocus: () => setIsFocused(true),
+              onOpen: () => setIsOpen(true),
+              onClose: () => setIsOpen(false),
+              renderValue: (selected) => /* @__PURE__ */ jsxRuntime.jsx(
+                SelectValue,
+                {
+                  selected,
+                  options: currentOptions,
+                  multiple,
+                  placeholder,
+                  maxChipsToShow,
+                  chipVariant,
+                  renderChipLabel,
+                  currentValues: value != null ? value : [],
+                  onDeleteChip: (next) => onChange == null ? void 0 : onChange(next)
+                }
+              ),
+              displayEmpty: shouldDisplayPlaceholder,
+              input: inputElement,
+              disabled,
+              MenuProps: {
+                PaperProps: {
+                  style: { maxHeight, maxWidth }
+                }
+              },
+              inputRef
+            }, rest), {
+              children: menuItems
+            })
+          ),
+          finalHelperText && /* @__PURE__ */ jsxRuntime.jsx(material.FormHelperText, { children: finalHelperText })
+        ]
+      }
+    );
+  };
+  if (isRHFMode) {
+    const rhfProps = rest;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactHookForm.Controller,
+      {
+        name: rhfProps.name,
+        control: rhfProps.control,
+        rules: rhfProps.validation,
+        render: ({ field, fieldState: { error: fieldError } }) => renderSelect(
+          field.value,
+          (e) => handleChangeInternal(e, field.onChange),
+          field.onBlur,
+          field.ref,
+          !!fieldError,
+          fieldError == null ? void 0 : fieldError.message
+        )
+      }
+    );
+  }
+  return renderSelect(value, (e) => handleChangeInternal(e));
+}
+exports.Option = Option;
+exports.Select = Select;
+exports.default = Select;
+//# sourceMappingURL=Select.cjs.map