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

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,271 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useMemo } from "react";
+import { Drawer as Drawer$1, Box, IconButton, Tooltip, Typography } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { r as resolvePreset } from "../../resolvePreset-B-IB0ehH.js";
+const DrawerContext = createContext(null);
+function useDrawerContext() {
+  const ctx = useContext(DrawerContext);
+  if (ctx) return ctx;
+  return { collapsed: false, width: 260 };
+}
+function buildDrawerSx({
+  width,
+  transitionDuration = 200
+}) {
+  return {
+    width,
+    flexShrink: 0,
+    whiteSpace: "nowrap",
+    boxSizing: "border-box",
+    transition: (theme) => theme.transitions.create("width", {
+      easing: theme.transitions.easing.sharp,
+      duration: transitionDuration
+    }),
+    "& .MuiDrawer-paper": {
+      width,
+      boxSizing: "border-box",
+      overflowX: "hidden",
+      transition: (theme) => theme.transitions.create("width", {
+        easing: theme.transitions.easing.sharp,
+        duration: transitionDuration
+      })
+    }
+  };
+}
+function buildDrawerItemSx({
+  collapsed,
+  active,
+  danger
+}) {
+  return (theme) => ({
+    minHeight: 44,
+    px: collapsed ? 1 : 2,
+    py: 1,
+    mx: 1,
+    my: 0.25,
+    borderRadius: 1,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: collapsed ? "center" : "flex-start",
+    gap: collapsed ? 0 : 1.5,
+    cursor: "pointer",
+    color: danger ? theme.palette.error.main : active ? theme.palette.primary.main : theme.palette.text.primary,
+    backgroundColor: active ? theme.palette.action.selected : "transparent",
+    transition: theme.transitions.create(
+      ["background-color", "color", "padding"],
+      { duration: 150 }
+    ),
+    "&:hover": {
+      backgroundColor: danger ? theme.palette.error.light + "22" : theme.palette.action.hover
+    },
+    "& .drawer-item__icon": {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      flexShrink: 0,
+      minWidth: 24
+    },
+    "& .drawer-item__label": {
+      flex: 1,
+      minWidth: 0,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      opacity: collapsed ? 0 : 1,
+      width: collapsed ? 0 : "auto",
+      transition: theme.transitions.create(["opacity", "width"], {
+        duration: collapsed ? 100 : 200
+      })
+    }
+  });
+}
+function Drawer({
+  children,
+  variant = "permanent",
+  anchor = "left",
+  collapsed = false,
+  onToggleCollapse,
+  open,
+  onClose,
+  expandedWidth = 260,
+  collapsedWidth = 72,
+  showCollapseButton,
+  header,
+  footer,
+  preset,
+  sx,
+  paperSx,
+  className
+}) {
+  const theme = useTheme();
+  const presetSx = resolvePreset("Drawer", preset, theme);
+  const supportsCollapsed = variant !== "temporary";
+  const effectiveWidth = supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;
+  const contextValue = useMemo(
+    () => ({
+      collapsed: supportsCollapsed && collapsed,
+      width: effectiveWidth
+    }),
+    [supportsCollapsed, collapsed, effectiveWidth]
+  );
+  const rootSx = [
+    buildDrawerSx({ width: effectiveWidth }),
+    ...presetSx ? [presetSx] : [],
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ];
+  const shouldShowToggle = showCollapseButton != null ? showCollapseButton : supportsCollapsed && !!onToggleCollapse;
+  const openProp = variant === "permanent" ? true : open !== void 0 ? open : false;
+  return /* @__PURE__ */ jsx(DrawerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    Drawer$1,
+    {
+      variant,
+      anchor,
+      open: openProp,
+      onClose,
+      className,
+      sx: rootSx,
+      PaperProps: {
+        sx: paperSx
+      },
+      children: [
+        header && /* @__PURE__ */ jsxs(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: contextValue.collapsed ? "center" : "space-between",
+              px: contextValue.collapsed ? 1 : 2,
+              py: 1.5,
+              minHeight: 64,
+              flexShrink: 0
+            },
+            children: [
+              !contextValue.collapsed && /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: header }),
+              shouldShowToggle && /* @__PURE__ */ jsx(
+                IconButton,
+                {
+                  size: "small",
+                  onClick: onToggleCollapse,
+                  "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
+                  children: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+                }
+              )
+            ]
+          }
+        ),
+        !header && shouldShowToggle && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              display: "flex",
+              justifyContent: contextValue.collapsed ? "center" : "flex-end",
+              px: 1,
+              py: 1
+            },
+            children: /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                size: "small",
+                onClick: onToggleCollapse,
+                "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
+                children: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronLeftIcon, {})
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            component: "nav",
+            sx: {
+              flex: 1,
+              overflowY: "auto",
+              overflowX: "hidden",
+              py: 1
+            },
+            children
+          }
+        ),
+        footer && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              flexShrink: 0,
+              borderTop: (t) => `1px solid ${t.palette.divider}`,
+              p: contextValue.collapsed ? 1 : 1.5,
+              display: "flex",
+              justifyContent: contextValue.collapsed ? "center" : "flex-start"
+            },
+            children: footer
+          }
+        )
+      ]
+    }
+  ) });
+}
+function DrawerItem({
+  icon,
+  label,
+  onClick,
+  active = false,
+  danger = false,
+  disabled = false,
+  endAdornment,
+  sx,
+  className
+}) {
+  const { collapsed } = useDrawerContext();
+  const baseSx = buildDrawerItemSx({ collapsed, active, danger });
+  const mergedSx = [
+    baseSx,
+    disabled && { pointerEvents: "none", opacity: 0.5 },
+    ...Array.isArray(sx) ? sx : sx ? [sx] : []
+  ].filter(Boolean);
+  const content = /* @__PURE__ */ jsxs(
+    Box,
+    {
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      "aria-disabled": disabled,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: (event) => {
+        if (disabled) return;
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick == null ? void 0 : onClick(event);
+        }
+      },
+      className,
+      sx: mergedSx,
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsx(Box, { className: "drawer-item__icon", component: "span", children: icon }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            component: "span",
+            variant: "body2",
+            className: "drawer-item__label",
+            sx: { fontWeight: active ? 600 : 400 },
+            children: label
+          }
+        ),
+        !collapsed && endAdornment && /* @__PURE__ */ jsx(Box, { component: "span", sx: { flexShrink: 0, ml: "auto" }, children: endAdornment })
+      ]
+    }
+  );
+  if (collapsed && typeof label === "string") {
+    return /* @__PURE__ */ jsx(Tooltip, { title: label, placement: "right", arrow: true, children: content });
+  }
+  return content;
+}
+export {
+  Drawer,
+  DrawerItem,
+  Drawer as default,
+  useDrawerContext
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/DrawerContext.ts","../../../src/components/Drawer/Drawer.sx.ts","../../../src/components/Drawer/Drawer.tsx","../../../src/components/Drawer/DrawerItem.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del Drawer. Permite que los sub-componentes (DrawerItem,\n * DrawerSection, etc.) reaccionen al estado `collapsed` sin necesidad de\n * recibirlo por props explícitas.\n */\nexport interface DrawerContextValue {\n  /** Si el drawer está en modo mini (solo iconos). */\n  collapsed: boolean;\n  /** Ancho actual del drawer (útil para sub-componentes que necesiten layout). */\n  width: number;\n}\n\nexport const DrawerContext = createContext<DrawerContextValue | null>(null);\n\n/**\n * Hook para leer el estado del drawer desde cualquier sub-componente. Si se\n * llama fuera de un `<Drawer>`, devuelve valores por defecto (collapsed=false)\n * para que los items renderizados sueltos no exploten.\n */\nexport function useDrawerContext(): DrawerContextValue {\n  const ctx = useContext(DrawerContext);\n  if (ctx) return ctx;\n  return { collapsed: false, width: 260 };\n}\n","import type { SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildDrawerSxArgs {\n  /** Ancho actual del drawer (expanded o collapsed). */\n  width: number;\n  /** Duración de la transición de ancho en ms. */\n  transitionDuration?: number;\n}\n\n/**\n * sx aplicado al root del MuiDrawer. Controla el ancho animado y el paper\n * interno. Los estilos visuales del paper (background, border) se dejan en\n * manos del theme / preset.\n */\nexport function buildDrawerSx({\n  width,\n  transitionDuration = 200,\n}: BuildDrawerSxArgs): SxProps<Theme> {\n  return {\n    width,\n    flexShrink: 0,\n    whiteSpace: 'nowrap',\n    boxSizing: 'border-box',\n    transition: (theme) =>\n      theme.transitions.create('width', {\n        easing: theme.transitions.easing.sharp,\n        duration: transitionDuration,\n      }),\n    '& .MuiDrawer-paper': {\n      width,\n      boxSizing: 'border-box',\n      overflowX: 'hidden',\n      transition: (theme) =>\n        theme.transitions.create('width', {\n          easing: theme.transitions.easing.sharp,\n          duration: transitionDuration,\n        }),\n    },\n  };\n}\n\nexport interface BuildDrawerItemSxArgs {\n  collapsed: boolean;\n  active?: boolean;\n  danger?: boolean;\n}\n\n/**\n * sx para un item del drawer. Centra el icono cuando está colapsado y\n * tiñe el fondo cuando el item está activo.\n */\nexport function buildDrawerItemSx({\n  collapsed,\n  active,\n  danger,\n}: BuildDrawerItemSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: 44,\n    px: collapsed ? 1 : 2,\n    py: 1,\n    mx: 1,\n    my: 0.25,\n    borderRadius: 1,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: collapsed ? 'center' : 'flex-start',\n    gap: collapsed ? 0 : 1.5,\n    cursor: 'pointer',\n    color: danger\n      ? theme.palette.error.main\n      : active\n        ? theme.palette.primary.main\n        : theme.palette.text.primary,\n    backgroundColor: active\n      ? theme.palette.action.selected\n      : 'transparent',\n    transition: theme.transitions.create(\n      ['background-color', 'color', 'padding'],\n      { duration: 150 },\n    ),\n    '&:hover': {\n      backgroundColor: danger\n        ? theme.palette.error.light + '22'\n        : theme.palette.action.hover,\n    },\n    '& .drawer-item__icon': {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      flexShrink: 0,\n      minWidth: 24,\n    },\n    '& .drawer-item__label': {\n      flex: 1,\n      minWidth: 0,\n      overflow: 'hidden',\n      textOverflow: 'ellipsis',\n      whiteSpace: 'nowrap',\n      opacity: collapsed ? 0 : 1,\n      width: collapsed ? 0 : 'auto',\n      transition: theme.transitions.create(['opacity', 'width'], {\n        duration: collapsed ? 100 : 200,\n      }),\n    },\n  });\n}\n","import React, { useMemo, type ReactNode } from 'react';\nimport {\n  Drawer as MuiDrawer,\n  IconButton,\n  Box,\n  type DrawerProps as MuiDrawerProps,\n} from '@mui/material';\nimport {\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\nimport ChevronLeftIcon from '@mui/icons-material/ChevronLeft';\nimport ChevronRightIcon from '@mui/icons-material/ChevronRight';\n\nimport { DrawerContext } from './DrawerContext';\nimport { buildDrawerSx } from './Drawer.sx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\n// ── Tipos públicos ──────────────────────────────────────────────────────\nexport type DrawerVariant = 'permanent' | 'persistent' | 'temporary';\nexport type DrawerAnchor = 'left' | 'right' | 'top' | 'bottom';\n\nexport interface DrawerProps {\n  /** Contenido del drawer (típicamente `<DrawerItem>`s). */\n  children?: ReactNode;\n  /**\n   * Variante del drawer:\n   * - `permanent` (default): siempre visible en desktop, soporta collapsed (mini).\n   * - `persistent`: se oculta/muestra, empuja el contenido principal.\n   * - `temporary`: flotante con backdrop (típico móvil).\n   */\n  variant?: DrawerVariant;\n  /** Lado del viewport. Default: `'left'`. */\n  anchor?: DrawerAnchor;\n  /**\n   * Estado mini (solo iconos). Solo se aplica con `variant=\"permanent\"` o\n   * `\"persistent\"`. Si no se provee, el drawer está siempre expandido.\n   */\n  collapsed?: boolean;\n  /** Callback del botón de toggle (chevron). */\n  onToggleCollapse?: () => void;\n  /** Estado abierto/cerrado (aplica a `temporary` y `persistent`). */\n  open?: boolean;\n  /** Callback de cierre (backdrop o ESC en temporary). */\n  onClose?: MuiDrawerProps['onClose'];\n  /** Ancho en estado expandido. Default: 260. */\n  expandedWidth?: number;\n  /** Ancho en estado colapsado (solo iconos). Default: 72. */\n  collapsedWidth?: number;\n  /** Muestra el botón chevron para toggle collapsed. Default: true si `onToggleCollapse` está definido. */\n  showCollapseButton?: boolean;\n  /** Contenido del header (por encima de los items). Típicamente logo/brand. */\n  header?: ReactNode;\n  /** Contenido del footer (por debajo de los items). Típicamente user profile. */\n  footer?: ReactNode;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.Drawer`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx aplicado al Drawer (root). Se mergea después del preset. */\n  sx?: SxProps<Theme>;\n  /** sx aplicado al Paper interno. */\n  paperSx?: SxProps<Theme>;\n  className?: string;\n}\n\nexport function Drawer({\n  children,\n  variant = 'permanent',\n  anchor = 'left',\n  collapsed = false,\n  onToggleCollapse,\n  open,\n  onClose,\n  expandedWidth = 260,\n  collapsedWidth = 72,\n  showCollapseButton,\n  header,\n  footer,\n  preset,\n  sx,\n  paperSx,\n  className,\n}: DrawerProps) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('Drawer', preset, theme);\n\n  // El mini-variant solo tiene sentido en permanent / persistent.\n  const supportsCollapsed = variant !== 'temporary';\n  const effectiveWidth =\n    supportsCollapsed && collapsed ? collapsedWidth : expandedWidth;\n\n  const contextValue = useMemo(\n    () => ({\n      collapsed: supportsCollapsed && collapsed,\n      width: effectiveWidth,\n    }),\n    [supportsCollapsed, collapsed, effectiveWidth],\n  );\n\n  const rootSx: SxProps<Theme> = [\n    buildDrawerSx({ width: effectiveWidth }),\n    ...(presetSx ? [presetSx] : []),\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ];\n\n  const shouldShowToggle =\n    showCollapseButton ?? (supportsCollapsed && !!onToggleCollapse);\n\n  const openProp =\n    variant === 'permanent'\n      ? true\n      : open !== undefined\n        ? open\n        : false;\n\n  return (\n    <DrawerContext.Provider value={contextValue}>\n      <MuiDrawer\n        variant={variant}\n        anchor={anchor}\n        open={openProp}\n        onClose={onClose}\n        className={className}\n        sx={rootSx}\n        PaperProps={{\n          sx: paperSx,\n        }}\n      >\n        {header && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'space-between',\n              px: contextValue.collapsed ? 1 : 2,\n              py: 1.5,\n              minHeight: 64,\n              flexShrink: 0,\n            }}\n          >\n            {!contextValue.collapsed && (\n              <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>\n            )}\n            {shouldShowToggle && (\n              <IconButton\n                size=\"small\"\n                onClick={onToggleCollapse}\n                aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n              >\n                {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n              </IconButton>\n            )}\n          </Box>\n        )}\n\n        {!header && shouldShowToggle && (\n          <Box\n            sx={{\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-end',\n              px: 1,\n              py: 1,\n            }}\n          >\n            <IconButton\n              size=\"small\"\n              onClick={onToggleCollapse}\n              aria-label={collapsed ? 'Expandir menú' : 'Colapsar menú'}\n            >\n              {collapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n            </IconButton>\n          </Box>\n        )}\n\n        <Box\n          component=\"nav\"\n          sx={{\n            flex: 1,\n            overflowY: 'auto',\n            overflowX: 'hidden',\n            py: 1,\n          }}\n        >\n          {children}\n        </Box>\n\n        {footer && (\n          <Box\n            sx={{\n              flexShrink: 0,\n              borderTop: (t) => `1px solid ${t.palette.divider}`,\n              p: contextValue.collapsed ? 1 : 1.5,\n              display: 'flex',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : 'flex-start',\n            }}\n          >\n            {footer}\n          </Box>\n        )}\n      </MuiDrawer>\n    </DrawerContext.Provider>\n  );\n}\n\nexport default Drawer;\n","import React, { type ReactNode, type MouseEvent } from 'react';\nimport { Box, Tooltip, Typography } from '@mui/material';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useDrawerContext } from './DrawerContext';\nimport { buildDrawerItemSx } from './Drawer.sx';\n\nexport interface DrawerItemProps {\n  /** Icono del item. Se muestra siempre (expanded y collapsed). */\n  icon?: ReactNode;\n  /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */\n  label: ReactNode;\n  /** Handler de click. */\n  onClick?: (event: MouseEvent<HTMLDivElement>) => void;\n  /** Marca el item como activo (destaca color y fondo). */\n  active?: boolean;\n  /** Marca el item como \"destructivo\" (p.ej. cerrar sesión): color error. */\n  danger?: boolean;\n  /** Deshabilita click + bajo opacidad. */\n  disabled?: boolean;\n  /** Contenido adicional a la derecha del label (badge, count, chevron). */\n  endAdornment?: ReactNode;\n  /** sx override del consumer, se mergea al final. */\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Item de un Drawer de shared-library. Lee el estado `collapsed` del\n * DrawerContext para adaptar layout y mostrar tooltip en modo mini.\n *\n * Uso típico:\n * ```tsx\n * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>\n *   <DrawerItem icon={<HomeIcon />} label=\"Inicio\" active />\n *   <DrawerItem icon={<UserIcon />} label=\"Perfil\" />\n * </Drawer>\n * ```\n */\nexport function DrawerItem({\n  icon,\n  label,\n  onClick,\n  active = false,\n  danger = false,\n  disabled = false,\n  endAdornment,\n  sx,\n  className,\n}: DrawerItemProps) {\n  const { collapsed } = useDrawerContext();\n\n  const baseSx = buildDrawerItemSx({ collapsed, active, danger });\n\n  const mergedSx: SxProps<Theme> = [\n    baseSx,\n    disabled && { pointerEvents: 'none', opacity: 0.5 },\n    ...(Array.isArray(sx) ? sx : sx ? [sx] : []),\n  ].filter(Boolean) as SxProps<Theme>;\n\n  const content = (\n    <Box\n      role=\"button\"\n      tabIndex={disabled ? -1 : 0}\n      aria-disabled={disabled}\n      onClick={disabled ? undefined : onClick}\n      onKeyDown={(event) => {\n        if (disabled) return;\n        if (event.key === 'Enter' || event.key === ' ') {\n          event.preventDefault();\n          onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n        }\n      }}\n      className={className}\n      sx={mergedSx}\n    >\n      {icon !== undefined && (\n        <Box className=\"drawer-item__icon\" component=\"span\">\n          {icon}\n        </Box>\n      )}\n      <Typography\n        component=\"span\"\n        variant=\"body2\"\n        className=\"drawer-item__label\"\n        sx={{ fontWeight: active ? 600 : 400 }}\n      >\n        {label}\n      </Typography>\n      {!collapsed && endAdornment && (\n        <Box component=\"span\" sx={{ flexShrink: 0, ml: 'auto' }}>\n          {endAdornment}\n        </Box>\n      )}\n    </Box>\n  );\n\n  // Cuando está colapsado, envolvemos en tooltip para revelar el label al hover.\n  if (collapsed && typeof label === 'string') {\n    return (\n      <Tooltip title={label} placement=\"right\" arrow>\n        {content}\n      </Tooltip>\n    );\n  }\n\n  return content;\n}\n\nexport default DrawerItem;\n"],"names":["MuiDrawer"],"mappings":";;;;;;;AAcO,MAAM,gBAAgB,cAAyC,IAAI;AAOnE,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,MAAI,IAAK,QAAO;AAChB,SAAO,EAAE,WAAW,OAAO,OAAO,IAAA;AACpC;ACXO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,qBAAqB;AACvB,GAAsC;AACpC,SAAO;AAAA,IACL;AAAA,IACA,YAAY;AAAA,IACZ,YAAY;AAAA,IACZ,WAAW;AAAA,IACX,YAAY,CAAC,UACX,MAAM,YAAY,OAAO,SAAS;AAAA,MAChC,QAAQ,MAAM,YAAY,OAAO;AAAA,MACjC,UAAU;AAAA,IAAA,CACX;AAAA,IACH,sBAAsB;AAAA,MACpB;AAAA,MACA,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAY,CAAC,UACX,MAAM,YAAY,OAAO,SAAS;AAAA,QAChC,QAAQ,MAAM,YAAY,OAAO;AAAA,QACjC,UAAU;AAAA,MAAA,CACX;AAAA,IAAA;AAAA,EACL;AAEJ;AAYO,SAAS,kBAAkB;AAAA,EAChC;AAAA,EACA;AAAA,EACA;AACF,GAA0C;AACxC,SAAO,CAAC,WAAW;AAAA,IACjB,WAAW;AAAA,IACX,IAAI,YAAY,IAAI;AAAA,IACpB,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,cAAc;AAAA,IACd,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,gBAAgB,YAAY,WAAW;AAAA,IACvC,KAAK,YAAY,IAAI;AAAA,IACrB,QAAQ;AAAA,IACR,OAAO,SACH,MAAM,QAAQ,MAAM,OACpB,SACE,MAAM,QAAQ,QAAQ,OACtB,MAAM,QAAQ,KAAK;AAAA,IACzB,iBAAiB,SACb,MAAM,QAAQ,OAAO,WACrB;AAAA,IACJ,YAAY,MAAM,YAAY;AAAA,MAC5B,CAAC,oBAAoB,SAAS,SAAS;AAAA,MACvC,EAAE,UAAU,IAAA;AAAA,IAAI;AAAA,IAElB,WAAW;AAAA,MACT,iBAAiB,SACb,MAAM,QAAQ,MAAM,QAAQ,OAC5B,MAAM,QAAQ,OAAO;AAAA,IAAA;AAAA,IAE3B,wBAAwB;AAAA,MACtB,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,UAAU;AAAA,IAAA;AAAA,IAEZ,yBAAyB;AAAA,MACvB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,UAAU;AAAA,MACV,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,SAAS,YAAY,IAAI;AAAA,MACzB,OAAO,YAAY,IAAI;AAAA,MACvB,YAAY,MAAM,YAAY,OAAO,CAAC,WAAW,OAAO,GAAG;AAAA,QACzD,UAAU,YAAY,MAAM;AAAA,MAAA,CAC7B;AAAA,IAAA;AAAA,EACH;AAEJ;ACrCO,SAAS,OAAO;AAAA,EACrB;AAAA,EACA,UAAU;AAAA,EACV,SAAS;AAAA,EACT,YAAY;AAAA,EACZ;AAAA,EACA;AAAA,EACA;AAAA,EACA,gBAAgB;AAAA,EAChB,iBAAiB;AAAA,EACjB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAgB;AACd,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,UAAU,QAAQ,KAAK;AAGtD,QAAM,oBAAoB,YAAY;AACtC,QAAM,iBACJ,qBAAqB,YAAY,iBAAiB;AAEpD,QAAM,eAAe;AAAA,IACnB,OAAO;AAAA,MACL,WAAW,qBAAqB;AAAA,MAChC,OAAO;AAAA,IAAA;AAAA,IAET,CAAC,mBAAmB,WAAW,cAAc;AAAA,EAAA;AAG/C,QAAM,SAAyB;AAAA,IAC7B,cAAc,EAAE,OAAO,gBAAgB;AAAA,IACvC,GAAI,WAAW,CAAC,QAAQ,IAAI,CAAA;AAAA,IAC5B,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC;AAG5C,QAAM,mBACJ,kDAAuB,qBAAqB,CAAC,CAAC;AAEhD,QAAM,WACJ,YAAY,cACR,OACA,SAAS,SACP,OACA;AAER,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B,UAAA;AAAA,IAACA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,MAAM;AAAA,MACN;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MACJ,YAAY;AAAA,QACV,IAAI;AAAA,MAAA;AAAA,MAGL,UAAA;AAAA,QAAA,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,YAAY;AAAA,cACZ,gBAAgB,aAAa,YACzB,WACA;AAAA,cACJ,IAAI,aAAa,YAAY,IAAI;AAAA,cACjC,IAAI;AAAA,cACJ,WAAW;AAAA,cACX,YAAY;AAAA,YAAA;AAAA,YAGb,UAAA;AAAA,cAAA,CAAC,aAAa,aACb,oBAAC,KAAA,EAAI,IAAI,EAAE,MAAM,GAAG,UAAU,EAAA,GAAM,UAAA,OAAA,CAAO;AAAA,cAE5C,oBACC;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,MAAK;AAAA,kBACL,SAAS;AAAA,kBACT,cAAY,YAAY,kBAAkB;AAAA,kBAEzC,UAAA,YAAY,oBAAC,kBAAA,CAAA,CAAiB,wBAAM,iBAAA,CAAA,CAAgB;AAAA,gBAAA;AAAA,cAAA;AAAA,YACvD;AAAA,UAAA;AAAA,QAAA;AAAA,QAKL,CAAC,UAAU,oBACV;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,SAAS;AAAA,cACT,gBAAgB,aAAa,YACzB,WACA;AAAA,cACJ,IAAI;AAAA,cACJ,IAAI;AAAA,YAAA;AAAA,YAGN,UAAA;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAK;AAAA,gBACL,SAAS;AAAA,gBACT,cAAY,YAAY,kBAAkB;AAAA,gBAEzC,UAAA,YAAY,oBAAC,kBAAA,CAAA,CAAiB,wBAAM,iBAAA,CAAA,CAAgB;AAAA,cAAA;AAAA,YAAA;AAAA,UACvD;AAAA,QAAA;AAAA,QAIJ;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,IAAI;AAAA,cACF,MAAM;AAAA,cACN,WAAW;AAAA,cACX,WAAW;AAAA,cACX,IAAI;AAAA,YAAA;AAAA,YAGL;AAAA,UAAA;AAAA,QAAA;AAAA,QAGF,UACC;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,WAAW,CAAC,MAAM,aAAa,EAAE,QAAQ,OAAO;AAAA,cAChD,GAAG,aAAa,YAAY,IAAI;AAAA,cAChC,SAAS;AAAA,cACT,gBAAgB,aAAa,YACzB,WACA;AAAA,YAAA;AAAA,YAGL,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MACH;AAAA,IAAA;AAAA,EAAA,GAGN;AAEJ;AC5KO,SAAS,WAAW;AAAA,EACzB;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAAS;AAAA,EACT,SAAS;AAAA,EACT,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AACF,GAAoB;AAClB,QAAM,EAAE,UAAA,IAAc,iBAAA;AAEtB,QAAM,SAAS,kBAAkB,EAAE,WAAW,QAAQ,QAAQ;AAE9D,QAAM,WAA2B;AAAA,IAC/B;AAAA,IACA,YAAY,EAAE,eAAe,QAAQ,SAAS,IAAA;AAAA,IAC9C,GAAI,MAAM,QAAQ,EAAE,IAAI,KAAK,KAAK,CAAC,EAAE,IAAI,CAAA;AAAA,EAAC,EAC1C,OAAO,OAAO;AAEhB,QAAM,UACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,UAAU,WAAW,KAAK;AAAA,MAC1B,iBAAe;AAAA,MACf,SAAS,WAAW,SAAY;AAAA,MAChC,WAAW,CAAC,UAAU;AACpB,YAAI,SAAU;AACd,YAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;AAC9C,gBAAM,eAAA;AACN,6CAAU;AAAA,QACZ;AAAA,MACF;AAAA,MACA;AAAA,MACA,IAAI;AAAA,MAEH,UAAA;AAAA,QAAA,SAAS,UACR,oBAAC,KAAA,EAAI,WAAU,qBAAoB,WAAU,QAC1C,UAAA,KAAA,CACH;AAAA,QAEF;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAQ;AAAA,YACR,WAAU;AAAA,YACV,IAAI,EAAE,YAAY,SAAS,MAAM,IAAA;AAAA,YAEhC,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAEF,CAAC,aAAa,gBACb,oBAAC,OAAI,WAAU,QAAO,IAAI,EAAE,YAAY,GAAG,IAAI,OAAA,GAC5C,UAAA,aAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAMN,MAAI,aAAa,OAAO,UAAU,UAAU;AAC1C,WACE,oBAAC,WAAQ,OAAO,OAAO,WAAU,SAAQ,OAAK,MAC3C,UAAA,QAAA,CACH;AAAA,EAEJ;AAEA,SAAO;AACT;"}

package/dist/components/Drawer/Drawer.sx.d.ts

@@ -0,0 +1,23 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface BuildDrawerSxArgs {
+    /** Ancho actual del drawer (expanded o collapsed). */
+    width: number;
+    /** Duración de la transición de ancho en ms. */
+    transitionDuration?: number;
+}
+/**
+ * sx aplicado al root del MuiDrawer. Controla el ancho animado y el paper
+ * interno. Los estilos visuales del paper (background, border) se dejan en
+ * manos del theme / preset.
+ */
+export declare function buildDrawerSx({ width, transitionDuration, }: BuildDrawerSxArgs): SxProps<Theme>;
+export interface BuildDrawerItemSxArgs {
+    collapsed: boolean;
+    active?: boolean;
+    danger?: boolean;
+}
+/**
+ * sx para un item del drawer. Centra el icono cuando está colapsado y
+ * tiñe el fondo cuando el item está activo.
+ */
+export declare function buildDrawerItemSx({ collapsed, active, danger, }: BuildDrawerItemSxArgs): SxProps<Theme>;

package/dist/components/Drawer/DrawerContext.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Context interno del Drawer. Permite que los sub-componentes (DrawerItem,
+ * DrawerSection, etc.) reaccionen al estado `collapsed` sin necesidad de
+ * recibirlo por props explícitas.
+ */
+export interface DrawerContextValue {
+    /** Si el drawer está en modo mini (solo iconos). */
+    collapsed: boolean;
+    /** Ancho actual del drawer (útil para sub-componentes que necesiten layout). */
+    width: number;
+}
+export declare const DrawerContext: import('react').Context<DrawerContextValue | null>;
+/**
+ * Hook para leer el estado del drawer desde cualquier sub-componente. Si se
+ * llama fuera de un `<Drawer>`, devuelve valores por defecto (collapsed=false)
+ * para que los items renderizados sueltos no exploten.
+ */
+export declare function useDrawerContext(): DrawerContextValue;

package/dist/components/Drawer/DrawerItem.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode, MouseEvent } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface DrawerItemProps {
+    /** Icono del item. Se muestra siempre (expanded y collapsed). */
+    icon?: ReactNode;
+    /** Texto del item. Se oculta cuando el drawer está colapsado (muestra tooltip). */
+    label: ReactNode;
+    /** Handler de click. */
+    onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+    /** Marca el item como activo (destaca color y fondo). */
+    active?: boolean;
+    /** Marca el item como "destructivo" (p.ej. cerrar sesión): color error. */
+    danger?: boolean;
+    /** Deshabilita click + bajo opacidad. */
+    disabled?: boolean;
+    /** Contenido adicional a la derecha del label (badge, count, chevron). */
+    endAdornment?: ReactNode;
+    /** sx override del consumer, se mergea al final. */
+    sx?: SxProps<Theme>;
+    className?: string;
+}
+/**
+ * Item de un Drawer de shared-library. Lee el estado `collapsed` del
+ * DrawerContext para adaptar layout y mostrar tooltip en modo mini.
+ *
+ * Uso típico:
+ * ```tsx
+ * <Drawer collapsed={collapsed} onToggleCollapse={toggle}>
+ *   <DrawerItem icon={<HomeIcon />} label="Inicio" active />
+ *   <DrawerItem icon={<UserIcon />} label="Perfil" />
+ * </Drawer>
+ * ```
+ */
+export declare function DrawerItem({ icon, label, onClick, active, danger, disabled, endAdornment, sx, className, }: DrawerItemProps): import("react/jsx-runtime").JSX.Element;
+export default DrawerItem;

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

@@ -0,0 +1,6 @@
+export { Drawer, default } from './Drawer';
+export { DrawerItem } from './DrawerItem';
+export { useDrawerContext } from './DrawerContext';
+export type { DrawerProps, DrawerVariant, DrawerAnchor, } from './Drawer';
+export type { DrawerItemProps } from './DrawerItem';
+export type { DrawerContextValue } from './DrawerContext';

package/dist/components/Drawer.d.ts

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

package/{components → dist/components}/Icon/Icon.cjs

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("../../index.cjs");
+require('../../styles.css');;/* empty css                      */
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const material = require("@mui/material");
@@ -13,8 +13,12 @@ const sizeMap = {
 };
 const StyledIcon = material.styled("span")(({ color, fontSize, spin, outlined }) => ({
   display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
   color,
   fontSize,
+  width: fontSize,
+  height: fontSize,
   animation: spin ? "spin 1s linear infinite" : void 0,
   border: outlined ? "1px solid currentColor" : void 0,
   borderRadius: "50%",
@@ -22,17 +26,31 @@ const StyledIcon = material.styled("span")(({ color, fontSize, spin, outlined })
   "@keyframes spin": {
     "0%": { transform: "rotate(0deg)" },
     "100%": { transform: "rotate(360deg)" }
+  },
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    fill: "currentColor",
+    display: "block"
+  },
+  "& img": {
+    width: "100%",
+    height: "100%",
+    display: "block"
   }
 }));
 const Icon = ({
   children,
+  path,
+  url,
+  alt = "icon",
+  viewBox = "0 0 24 24",
   color = "var(--primary-color)",
   outlined = false,
   spin = false,
   badge,
   badgeColor = "primary",
   badgePosition = { vertical: "bottom", horizontal: "right" },
-  badgeSize = "medium",
   size = "sm",
   black,
   white,
@@ -44,6 +62,29 @@ const Icon = ({
     return color;
   }, [color, white, black]);
   const iconSize = sizeMap[size];
+  const content = React.useMemo(() => {
+    if (children) return children;
+    if (path) {
+      const trimmed = path.trim();
+      if (trimmed.startsWith("<svg")) {
+        return /* @__PURE__ */ jsxRuntime.jsx("span", { dangerouslySetInnerHTML: { __html: trimmed } });
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: trimmed })
+        }
+      );
+    }
+    if (url) {
+      return /* @__PURE__ */ jsxRuntime.jsx("img", { src: url, alt });
+    }
+    return null;
+  }, [children, path, url, alt, viewBox]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     material.Badge,
     {
@@ -60,7 +101,7 @@ const Icon = ({
           spin,
           outlined,
           className: `hsi-icon ${className || ""}`,
-          children
+          children: content
         }
       )
     }

package/dist/components/Icon/Icon.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","sources":["../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React, { type ReactNode, useMemo } from 'react';\nimport { Badge, styled } from '@mui/material';\n\nexport type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n\nexport interface IconProps {\n  /**\n   * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.\n   * Si se usa junto con `path` o `url`, `children` tiene prioridad.\n   */\n  children?: ReactNode;\n  /**\n   * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para\n   * los iconos custom de Metronic que vienen como strings de path.\n   *\n   * ```tsx\n   * <Icon path=\"M12 2L2 22h20L12 2z\" />\n   * ```\n   *\n   * Si el string contiene el tag `<svg>` completo (no solo el `d`), también\n   * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.\n   */\n  path?: string;\n  /**\n   * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.\n   *\n   * ```tsx\n   * <Icon url=\"/assets/icons/custom-warning.svg\" />\n   * ```\n   */\n  url?: string;\n  /**\n   * Alt text cuando se usa `url`. Default: `\"icon\"`.\n   */\n  alt?: string;\n  /**\n   * ViewBox cuando se usa `path`. Default: `\"0 0 24 24\"`. Ignorado si `path`\n   * ya viene como `<svg>` completo.\n   */\n  viewBox?: string;\n  color?: string;\n  outlined?: boolean;\n  spin?: boolean;\n  badge?: string | number;\n  badgeColor?: 'primary' | 'secondary' | 'error';\n  badgePosition?: {\n    vertical: 'top' | 'bottom';\n    horizontal: 'right' | 'left';\n  };\n  badgeSize?: 'small' | 'medium' | 'large';\n  size?: IconSize;\n  black?: boolean;\n  white?: boolean;\n  className?: string;\n}\n\nconst sizeMap: Record<IconSize, number> = {\n  xs: 18,\n  sm: 24,\n  md: 36,\n  lg: 48,\n  xl: 64,\n};\n\nconst StyledIcon = styled('span')<{\n  color?: string;\n  fontSize?: number;\n  spin?: boolean;\n  outlined?: boolean;\n}>(({ color, fontSize, spin, outlined }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  color: color,\n  fontSize: fontSize,\n  width: fontSize,\n  height: fontSize,\n  animation: spin ? 'spin 1s linear infinite' : undefined,\n  border: outlined ? '1px solid currentColor' : undefined,\n  borderRadius: '50%',\n  padding: outlined ? 4 : 0,\n  '@keyframes spin': {\n    '0%': { transform: 'rotate(0deg)' },\n    '100%': { transform: 'rotate(360deg)' },\n  },\n  '& svg': {\n    width: '100%',\n    height: '100%',\n    fill: 'currentColor',\n    display: 'block',\n  },\n  '& img': {\n    width: '100%',\n    height: '100%',\n    display: 'block',\n  },\n}));\n\nexport const Icon: React.FC<IconProps> = ({\n  children,\n  path,\n  url,\n  alt = 'icon',\n  viewBox = '0 0 24 24',\n  color = 'var(--primary-color)',\n  outlined = false,\n  spin = false,\n  badge,\n  badgeColor = 'primary',\n  badgePosition = { vertical: 'bottom', horizontal: 'right' },\n  size = 'sm',\n  black,\n  white,\n  className,\n}) => {\n  const finalColor = useMemo(() => {\n    if (white) return 'white';\n    if (black) return 'black';\n    return color;\n  }, [color, white, black]);\n\n  const iconSize = sizeMap[size];\n\n  // Resolver el contenido según la prop activa.\n  const content = useMemo(() => {\n    if (children) return children;\n\n    if (path) {\n      const trimmed = path.trim();\n      // Si es un SVG completo (empieza con <svg), lo inyectamos tal cual.\n      if (trimmed.startsWith('<svg')) {\n        return <span dangerouslySetInnerHTML={{ __html: trimmed }} />;\n      }\n      // Si no, asumimos que es el atributo `d` de un <path>.\n      return (\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox={viewBox}\n          fill=\"currentColor\"\n          aria-hidden=\"true\"\n        >\n          <path d={trimmed} />\n        </svg>\n      );\n    }\n\n    if (url) {\n      return <img src={url} alt={alt} />;\n    }\n\n    return null;\n  }, [children, path, url, alt, viewBox]);\n\n  return (\n    <Badge\n      badgeContent={badge}\n      color={badgeColor}\n      anchorOrigin={badgePosition}\n      invisible={badge === undefined}\n      sx={{ '.MuiBadge-badge': { transform: 'scale(1)' } }}\n    >\n      <StyledIcon\n        color={finalColor}\n        fontSize={iconSize}\n        spin={spin}\n        outlined={outlined}\n        className={`hsi-icon ${className || ''}`}\n      >\n        {content}\n      </StyledIcon>\n    </Badge>\n  );\n};\n\nexport default Icon;\n"],"names":["styled","useMemo","jsx","Badge"],"mappings":";;;;;;AAwDA,MAAM,UAAoC;AAAA,EACxC,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACN;AAEA,MAAM,aAAaA,SAAAA,OAAO,MAAM,EAK7B,CAAC,EAAE,OAAO,UAAU,MAAM,gBAAgB;AAAA,EAC3C,SAAS;AAAA,EACT,YAAY;AAAA,EACZ,gBAAgB;AAAA,EAChB;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,WAAW,OAAO,4BAA4B;AAAA,EAC9C,QAAQ,WAAW,2BAA2B;AAAA,EAC9C,cAAc;AAAA,EACd,SAAS,WAAW,IAAI;AAAA,EACxB,mBAAmB;AAAA,IACjB,MAAM,EAAE,WAAW,eAAA;AAAA,IACnB,QAAQ,EAAE,WAAW,iBAAA;AAAA,EAAiB;AAAA,EAExC,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA,EAAA;AAAA,EAEX,SAAS;AAAA,IACP,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,SAAS;AAAA,EAAA;AAEb,EAAE;AAEK,MAAM,OAA4B,CAAC;AAAA,EACxC;AAAA,EACA;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,aAAa;AAAA,EACb,gBAAgB,EAAE,UAAU,UAAU,YAAY,QAAA;AAAA,EAClD,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAaC,MAAAA,QAAQ,MAAM;AAC/B,QAAI,MAAO,QAAO;AAClB,QAAI,MAAO,QAAO;AAClB,WAAO;AAAA,EACT,GAAG,CAAC,OAAO,OAAO,KAAK,CAAC;AAExB,QAAM,WAAW,QAAQ,IAAI;AAG7B,QAAM,UAAUA,MAAAA,QAAQ,MAAM;AAC5B,QAAI,SAAU,QAAO;AAErB,QAAI,MAAM;AACR,YAAM,UAAU,KAAK,KAAA;AAErB,UAAI,QAAQ,WAAW,MAAM,GAAG;AAC9B,8CAAQ,QAAA,EAAK,yBAAyB,EAAE,QAAQ,WAAW;AAAA,MAC7D;AAEA,aACEC,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN;AAAA,UACA,MAAK;AAAA,UACL,eAAY;AAAA,UAEZ,UAAAA,2BAAAA,IAAC,QAAA,EAAK,GAAG,QAAA,CAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IAGxB;AAEA,QAAI,KAAK;AACP,aAAOA,2BAAAA,IAAC,OAAA,EAAI,KAAK,KAAK,IAAA,CAAU;AAAA,IAClC;AAEA,WAAO;AAAA,EACT,GAAG,CAAC,UAAU,MAAM,KAAK,KAAK,OAAO,CAAC;AAEtC,SACEA,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,cAAc;AAAA,MACd,OAAO;AAAA,MACP,cAAc;AAAA,MACd,WAAW,UAAU;AAAA,MACrB,IAAI,EAAE,mBAAmB,EAAE,WAAW,aAAW;AAAA,MAEjD,UAAAD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,UAAU;AAAA,UACV;AAAA,UACA;AAAA,UACA,WAAW,YAAY,aAAa,EAAE;AAAA,UAErC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN;;"}

package/dist/components/Icon/Icon.d.ts

@@ -0,0 +1,54 @@
+import { default as React, ReactNode } from 'react';
+export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export interface IconProps {
+    /**
+     * Contenido icono. Modo legacy: acepta un elemento MUI o SVG ya armado.
+     * Si se usa junto con `path` o `url`, `children` tiene prioridad.
+     */
+    children?: ReactNode;
+    /**
+     * Ruta SVG inline (el contenido del atributo `d` de un `<path>`). Útil para
+     * los iconos custom de Metronic que vienen como strings de path.
+     *
+     * ```tsx
+     * <Icon path="M12 2L2 22h20L12 2z" />
+     * ```
+     *
+     * Si el string contiene el tag `<svg>` completo (no solo el `d`), también
+     * se soporta y se inyecta tal cual via `dangerouslySetInnerHTML`.
+     */
+    path?: string;
+    /**
+     * URL a un archivo `.svg` (asset local o remoto). Se renderiza vía `<img>`.
+     *
+     * ```tsx
+     * <Icon url="/assets/icons/custom-warning.svg" />
+     * ```
+     */
+    url?: string;
+    /**
+     * Alt text cuando se usa `url`. Default: `"icon"`.
+     */
+    alt?: string;
+    /**
+     * ViewBox cuando se usa `path`. Default: `"0 0 24 24"`. Ignorado si `path`
+     * ya viene como `<svg>` completo.
+     */
+    viewBox?: string;
+    color?: string;
+    outlined?: boolean;
+    spin?: boolean;
+    badge?: string | number;
+    badgeColor?: 'primary' | 'secondary' | 'error';
+    badgePosition?: {
+        vertical: 'top' | 'bottom';
+        horizontal: 'right' | 'left';
+    };
+    badgeSize?: 'small' | 'medium' | 'large';
+    size?: IconSize;
+    black?: boolean;
+    white?: boolean;
+    className?: string;
+}
+export declare const Icon: React.FC<IconProps>;
+export default Icon;

package/{components → dist/components}/Icon/Icon.js

@@ -1,4 +1,4 @@
-import "../../index.js";
+import '../../styles.css';/* empty css                    */
 import { jsx } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { styled, Badge } from "@mui/material";
@@ -11,8 +11,12 @@ const sizeMap = {
 };
 const StyledIcon = styled("span")(({ color, fontSize, spin, outlined }) => ({
   display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
   color,
   fontSize,
+  width: fontSize,
+  height: fontSize,
   animation: spin ? "spin 1s linear infinite" : void 0,
   border: outlined ? "1px solid currentColor" : void 0,
   borderRadius: "50%",
@@ -20,17 +24,31 @@ const StyledIcon = styled("span")(({ color, fontSize, spin, outlined }) => ({
   "@keyframes spin": {
     "0%": { transform: "rotate(0deg)" },
     "100%": { transform: "rotate(360deg)" }
+  },
+  "& svg": {
+    width: "100%",
+    height: "100%",
+    fill: "currentColor",
+    display: "block"
+  },
+  "& img": {
+    width: "100%",
+    height: "100%",
+    display: "block"
   }
 }));
 const Icon = ({
   children,
+  path,
+  url,
+  alt = "icon",
+  viewBox = "0 0 24 24",
   color = "var(--primary-color)",
   outlined = false,
   spin = false,
   badge,
   badgeColor = "primary",
   badgePosition = { vertical: "bottom", horizontal: "right" },
-  badgeSize = "medium",
   size = "sm",
   black,
   white,
@@ -42,6 +60,29 @@ const Icon = ({
     return color;
   }, [color, white, black]);
   const iconSize = sizeMap[size];
+  const content = useMemo(() => {
+    if (children) return children;
+    if (path) {
+      const trimmed = path.trim();
+      if (trimmed.startsWith("<svg")) {
+        return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: trimmed } });
+      }
+      return /* @__PURE__ */ jsx(
+        "svg",
+        {
+          xmlns: "http://www.w3.org/2000/svg",
+          viewBox,
+          fill: "currentColor",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsx("path", { d: trimmed })
+        }
+      );
+    }
+    if (url) {
+      return /* @__PURE__ */ jsx("img", { src: url, alt });
+    }
+    return null;
+  }, [children, path, url, alt, viewBox]);
   return /* @__PURE__ */ jsx(
     Badge,
     {
@@ -58,7 +99,7 @@ const Icon = ({
           spin,
           outlined,
           className: `hsi-icon ${className || ""}`,
-          children
+          children: content
         }
       )
     }