@soyfri/shared-library 2.0.0-beta.4 → 2.0.0-beta.6

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

@@ -96,6 +96,7 @@ function Drawer({
   collapsedWidth = 72,
   showCollapseButton,
   header,
+  logo,
   footer,
   preset,
   sx,
@@ -133,20 +134,22 @@ function Drawer({
         sx: paperSx
       },
       children: [
-        header && /* @__PURE__ */ jsxRuntime.jsxs(
+        (logo || shouldShowToggle) && /* @__PURE__ */ jsxRuntime.jsxs(
           material.Box,
           {
             sx: {
               display: "flex",
+              flexDirection: contextValue.collapsed ? "column" : "row",
               alignItems: "center",
-              justifyContent: contextValue.collapsed ? "center" : "space-between",
+              justifyContent: contextValue.collapsed ? "center" : logo ? "space-between" : "flex-end",
+              gap: contextValue.collapsed ? 0.5 : 0,
               px: contextValue.collapsed ? 1 : 2,
-              py: 1.5,
+              py: 1,
               minHeight: 64,
               flexShrink: 0
             },
             children: [
-              !contextValue.collapsed && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1, minWidth: 0 }, children: header }),
+              logo && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: logo }),
               shouldShowToggle && /* @__PURE__ */ jsxRuntime.jsx(
                 material.IconButton,
                 {
@@ -159,24 +162,18 @@ function Drawer({
             ]
           }
         ),
-        !header && shouldShowToggle && /* @__PURE__ */ jsxRuntime.jsx(
+        header && !contextValue.collapsed && /* @__PURE__ */ jsxRuntime.jsx(
           material.Box,
           {
             sx: {
               display: "flex",
-              justifyContent: contextValue.collapsed ? "center" : "flex-end",
-              px: 1,
-              py: 1
+              alignItems: "center",
+              px: 2,
+              py: 1.5,
+              minHeight: 56,
+              flexShrink: 0
             },
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              material.IconButton,
-              {
-                size: "small",
-                onClick: onToggleCollapse,
-                "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
-                children: collapsed ? /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeftIcon, {})
-              }
-            )
+            children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { flex: 1, minWidth: 0 }, children: header })
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(

package/components/Drawer/Drawer.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.cjs","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  /**\n   * Logo/brand que se muestra junto al botón de toggle.\n   * - Expandido: logo a la izquierda, toggle a la derecha en la misma fila.\n   * - Colapsado: logo arriba centrado, toggle debajo centrado (stack vertical).\n   * Siempre visible (a diferencia de `header`, que se oculta al colapsar).\n   */\n  logo?: 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  logo,\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        {(logo || shouldShowToggle) && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: contextValue.collapsed ? 'column' : 'row',\n              alignItems: 'center',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : logo\n                  ? 'space-between'\n                  : 'flex-end',\n              gap: contextValue.collapsed ? 0.5 : 0,\n              px: contextValue.collapsed ? 1 : 2,\n              py: 1,\n              minHeight: 64,\n              flexShrink: 0,\n            }}\n          >\n            {logo && (\n              <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>\n                {logo}\n              </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 && !contextValue.collapsed && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              px: 2,\n              py: 1.5,\n              minHeight: 56,\n              flexShrink: 0,\n            }}\n          >\n            <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>\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":["createContext","useContext","useTheme","resolvePreset","useMemo","jsx","jsxs","MuiDrawer","Box","IconButton","Typography","Tooltip"],"mappings":"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"}

package/{dist/components → components}/Drawer/Drawer.d.ts

@@ -34,6 +34,13 @@ export interface DrawerProps {
     showCollapseButton?: boolean;
     /** Contenido del header (por encima de los items). Típicamente logo/brand. */
     header?: ReactNode;
+    /**
+     * Logo/brand que se muestra junto al botón de toggle.
+     * - Expandido: logo a la izquierda, toggle a la derecha en la misma fila.
+     * - Colapsado: logo arriba centrado, toggle debajo centrado (stack vertical).
+     * Siempre visible (a diferencia de `header`, que se oculta al colapsar).
+     */
+    logo?: ReactNode;
     /** Contenido del footer (por debajo de los items). Típicamente user profile. */
     footer?: ReactNode;
     /**
@@ -47,5 +54,5 @@ export interface DrawerProps {
     paperSx?: SxProps<Theme>;
     className?: string;
 }
-export declare function Drawer({ children, variant, anchor, collapsed, onToggleCollapse, open, onClose, expandedWidth, collapsedWidth, showCollapseButton, header, footer, preset, sx, paperSx, className, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+export declare function Drawer({ children, variant, anchor, collapsed, onToggleCollapse, open, onClose, expandedWidth, collapsedWidth, showCollapseButton, header, logo, footer, preset, sx, paperSx, className, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export default Drawer;

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

@@ -94,6 +94,7 @@ function Drawer({
   collapsedWidth = 72,
   showCollapseButton,
   header,
+  logo,
   footer,
   preset,
   sx,
@@ -131,20 +132,22 @@ function Drawer({
         sx: paperSx
       },
       children: [
-        header && /* @__PURE__ */ jsxs(
+        (logo || shouldShowToggle) && /* @__PURE__ */ jsxs(
           Box,
           {
             sx: {
               display: "flex",
+              flexDirection: contextValue.collapsed ? "column" : "row",
               alignItems: "center",
-              justifyContent: contextValue.collapsed ? "center" : "space-between",
+              justifyContent: contextValue.collapsed ? "center" : logo ? "space-between" : "flex-end",
+              gap: contextValue.collapsed ? 0.5 : 0,
               px: contextValue.collapsed ? 1 : 2,
-              py: 1.5,
+              py: 1,
               minHeight: 64,
               flexShrink: 0
             },
             children: [
-              !contextValue.collapsed && /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: header }),
+              logo && /* @__PURE__ */ jsx(Box, { sx: { display: "flex", alignItems: "center", minWidth: 0 }, children: logo }),
               shouldShowToggle && /* @__PURE__ */ jsx(
                 IconButton,
                 {
@@ -157,24 +160,18 @@ function Drawer({
             ]
           }
         ),
-        !header && shouldShowToggle && /* @__PURE__ */ jsx(
+        header && !contextValue.collapsed && /* @__PURE__ */ jsx(
           Box,
           {
             sx: {
               display: "flex",
-              justifyContent: contextValue.collapsed ? "center" : "flex-end",
-              px: 1,
-              py: 1
+              alignItems: "center",
+              px: 2,
+              py: 1.5,
+              minHeight: 56,
+              flexShrink: 0
             },
-            children: /* @__PURE__ */ jsx(
-              IconButton,
-              {
-                size: "small",
-                onClick: onToggleCollapse,
-                "aria-label": collapsed ? "Expandir menú" : "Colapsar menú",
-                children: collapsed ? /* @__PURE__ */ jsx(ChevronRightIcon, {}) : /* @__PURE__ */ jsx(ChevronLeftIcon, {})
-              }
-            )
+            children: /* @__PURE__ */ jsx(Box, { sx: { flex: 1, minWidth: 0 }, children: header })
           }
         ),
         /* @__PURE__ */ jsx(

package/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  /**\n   * Logo/brand que se muestra junto al botón de toggle.\n   * - Expandido: logo a la izquierda, toggle a la derecha en la misma fila.\n   * - Colapsado: logo arriba centrado, toggle debajo centrado (stack vertical).\n   * Siempre visible (a diferencia de `header`, que se oculta al colapsar).\n   */\n  logo?: 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  logo,\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        {(logo || shouldShowToggle) && (\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: contextValue.collapsed ? 'column' : 'row',\n              alignItems: 'center',\n              justifyContent: contextValue.collapsed\n                ? 'center'\n                : logo\n                  ? 'space-between'\n                  : 'flex-end',\n              gap: contextValue.collapsed ? 0.5 : 0,\n              px: contextValue.collapsed ? 1 : 2,\n              py: 1,\n              minHeight: 64,\n              flexShrink: 0,\n            }}\n          >\n            {logo && (\n              <Box sx={{ display: 'flex', alignItems: 'center', minWidth: 0 }}>\n                {logo}\n              </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 && !contextValue.collapsed && (\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              px: 2,\n              py: 1.5,\n              minHeight: 56,\n              flexShrink: 0,\n            }}\n          >\n            <Box sx={{ flex: 1, minWidth: 0 }}>{header}</Box>\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":"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"}

package/package.json

@@ -1,22 +1,10 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "2.0.0-beta.4",
+  "version": "2.0.0-beta.6",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css",
-    "watch:css": "tailwindcss -i ./src/styles.css -o ./dist/styles.css --watch",
-    "build": "vite build --mode lib",
-    "dev": "tsup --watch",
-    "rm": "node cleanDirectories",
-    "clean": "rimraf dist",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "dist": "node build"
-  },
   "keywords": [],
   "author": "",
   "license": "ISC",
@@ -40,37 +28,170 @@
     "react-hook-form": "^7.62.0",
     "tailwindcss": "^4.1.7"
   },
-  "devDependencies": {
-    "@chromatic-com/storybook": "^4.0.1",
-    "@rollup/plugin-alias": "^5.1.1",
-    "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-node-resolve": "^16.0.1",
-    "@rollup/plugin-terser": "^0.4.4",
-    "@storybook/addon-docs": "^9.0.15",
-    "@storybook/addon-onboarding": "^9.0.15",
-    "@storybook/addon-vitest": "^9.0.15",
-    "@storybook/react-vite": "^9.0.15",
-    "@types/react": "^19.1.6",
-    "@types/react-dom": "^19.1.5",
-    "@vitest/browser": "^3.1.4",
-    "@vitest/coverage-v8": "^3.1.4",
-    "chromatic": "^12.0.0",
-    "glob": "^11.0.2",
-    "playwright": "^1.52.0",
-    "prettier": "3.5.3",
-    "rimraf": "^6.0.1",
-    "rollup": "^4.41.1",
-    "rollup-plugin-peer-deps-external": "^2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-typescript2": "^0.36.0",
-    "storybook": "^9.0.15",
-    "tsup": "^8.5.0",
-    "typescript": "^5.8.3",
-    "vite-plugin-dts": "^4.5.4",
-    "vite-plugin-lib-inject-css": "^2.2.2",
-    "vitest": "^3.1.4"
-  },
   "overrides": {
     "storybook": "$storybook"
+  },
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "require": "./index.cjs",
+      "types": "./index.d.ts"
+    },
+    "./package.json": "./package.json",
+    "./components/Tooltip": {
+      "import": "./components/Tooltip/Tooltip.js",
+      "require": "./components/Tooltip/Tooltip.cjs",
+      "types": "./components/Tooltip/Tooltip.d.ts"
+    },
+    "./components/Timeline": {
+      "import": "./components/Timeline/Timeline.js",
+      "require": "./components/Timeline/Timeline.cjs",
+      "types": "./components/Timeline/Timeline.d.ts"
+    },
+    "./components/Tabs": {
+      "import": "./components/Tabs/Tabs.js",
+      "require": "./components/Tabs/Tabs.cjs",
+      "types": "./components/Tabs/Tabs.d.ts"
+    },
+    "./components/Table": {
+      "import": "./components/Table/Table.js",
+      "require": "./components/Table/Table.cjs",
+      "types": "./components/Table/Table.d.ts"
+    },
+    "./components/Stepper": {
+      "import": "./components/Stepper/Stepper.js",
+      "require": "./components/Stepper/Stepper.cjs",
+      "types": "./components/Stepper/Stepper.d.ts"
+    },
+    "./components/StatusMessage": {
+      "import": "./components/StatusMessage/StatusMessage.js",
+      "require": "./components/StatusMessage/StatusMessage.cjs",
+      "types": "./components/StatusMessage/StatusMessage.d.ts"
+    },
+    "./components/Stat": {
+      "import": "./components/Stat/Stat.js",
+      "require": "./components/Stat/Stat.cjs",
+      "types": "./components/Stat/Stat.d.ts"
+    },
+    "./components/Select": {
+      "import": "./components/Select/Select.js",
+      "require": "./components/Select/Select.cjs",
+      "types": "./components/Select/Select.d.ts"
+    },
+    "./components/ScrollTopButton": {
+      "import": "./components/ScrollTopButton/ScrollTopButton.js",
+      "require": "./components/ScrollTopButton/ScrollTopButton.cjs",
+      "types": "./components/ScrollTopButton/ScrollTopButton.d.ts"
+    },
+    "./components/PageLoader": {
+      "import": "./components/PageLoader/PageLoader.js",
+      "require": "./components/PageLoader/PageLoader.cjs",
+      "types": "./components/PageLoader/PageLoader.d.ts"
+    },
+    "./components/Modal": {
+      "import": "./components/Modal/Modal.js",
+      "require": "./components/Modal/Modal.cjs",
+      "types": "./components/Modal/Modal.d.ts"
+    },
+    "./components/MenuButton": {
+      "import": "./components/MenuButton/MenuButton.js",
+      "require": "./components/MenuButton/MenuButton.cjs",
+      "types": "./components/MenuButton/MenuButton.d.ts"
+    },
+    "./components/InputGroup": {
+      "import": "./components/InputGroup/InputGroup.js",
+      "require": "./components/InputGroup/InputGroup.cjs",
+      "types": "./components/InputGroup/InputGroup.d.ts"
+    },
+    "./components/Input": {
+      "import": "./components/Input/Input.js",
+      "require": "./components/Input/Input.cjs",
+      "types": "./components/Input/Input.d.ts"
+    },
+    "./components/Icon": {
+      "import": "./components/Icon/Icon.js",
+      "require": "./components/Icon/Icon.cjs",
+      "types": "./components/Icon/Icon.d.ts"
+    },
+    "./components/Gallery": {
+      "import": "./components/Gallery/Gallery.js",
+      "require": "./components/Gallery/Gallery.cjs",
+      "types": "./components/Gallery/Gallery.d.ts"
+    },
+    "./components/Flyout": {
+      "import": "./components/Flyout/Flyout.js",
+      "require": "./components/Flyout/Flyout.cjs",
+      "types": "./components/Flyout/Flyout.d.ts"
+    },
+    "./components/Drawer": {
+      "import": "./components/Drawer/Drawer.js",
+      "require": "./components/Drawer/Drawer.cjs",
+      "types": "./components/Drawer/Drawer.d.ts"
+    },
+    "./components/DateTimePicker": {
+      "import": "./components/DateTimePicker/DateTimePicker.js",
+      "require": "./components/DateTimePicker/DateTimePicker.cjs",
+      "types": "./components/DateTimePicker/DateTimePicker.d.ts"
+    },
+    "./components/DateRangePicker": {
+      "import": "./components/DateRangePicker/DateRangePicker.js",
+      "require": "./components/DateRangePicker/DateRangePicker.cjs",
+      "types": "./components/DateRangePicker/DateRangePicker.d.ts"
+    },
+    "./components/DatePicker": {
+      "import": "./components/DatePicker/DatePicker.js",
+      "require": "./components/DatePicker/DatePicker.cjs",
+      "types": "./components/DatePicker/DatePicker.d.ts"
+    },
+    "./components/Column": {
+      "import": "./components/Column/Column.js",
+      "require": "./components/Column/Column.cjs",
+      "types": "./components/Column/Column.d.ts"
+    },
+    "./components/Chip": {
+      "import": "./components/Chip/Chip.js",
+      "require": "./components/Chip/Chip.cjs",
+      "types": "./components/Chip/Chip.d.ts"
+    },
+    "./components/Card": {
+      "import": "./components/Card/Card.js",
+      "require": "./components/Card/Card.cjs",
+      "types": "./components/Card/Card.d.ts"
+    },
+    "./components/Button": {
+      "import": "./components/Button/Button.js",
+      "require": "./components/Button/Button.cjs",
+      "types": "./components/Button/Button.d.ts"
+    },
+    "./components/Avatar": {
+      "import": "./components/Avatar/Avatar.js",
+      "require": "./components/Avatar/Avatar.cjs",
+      "types": "./components/Avatar/Avatar.d.ts"
+    },
+    "./components/Autocomplete": {
+      "import": "./components/Autocomplete/Autocomplete.js",
+      "require": "./components/Autocomplete/Autocomplete.cjs",
+      "types": "./components/Autocomplete/Autocomplete.d.ts"
+    },
+    "./components/AppBar": {
+      "import": "./components/AppBar/AppBar.js",
+      "require": "./components/AppBar/AppBar.cjs",
+      "types": "./components/AppBar/AppBar.d.ts"
+    },
+    "./components/ActionMenu": {
+      "import": "./components/ActionMenu/ActionMenu.js",
+      "require": "./components/ActionMenu/ActionMenu.cjs",
+      "types": "./components/ActionMenu/ActionMenu.d.ts"
+    },
+    "./hooks/Wizard": {
+      "import": "./hooks/Wizard/Wizard.js",
+      "require": "./hooks/Wizard/Wizard.cjs",
+      "types": "./hooks/Wizard/Wizard.d.ts"
+    },
+    "./hooks/ClipBoard": {
+      "import": "./hooks/ClipBoard/ClipBoard.js",
+      "require": "./hooks/ClipBoard/ClipBoard.cjs",
+      "types": "./hooks/ClipBoard/ClipBoard.d.ts"
+    }
   }
 }

package/.dockerignore

@@ -1,8 +0,0 @@
-# Ignore dependencies, build artifacts, and local environment files
-node_modules
-dist
-
-# Ignore git and docker files
-.git
-.gitignore
-.dockerignore

package/.github/workflows/publish.yml

@@ -1,107 +0,0 @@
-name: Node.js CI
-
-on:
-  push:
-    branches: [ "main" ]
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [v23.6.1]
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-
-      - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          npm-version: '10.9.2'
-          cache: 'npm' # Se asume que package-lock.json está en el repositorio
-      
-      - name: Install dependencies
-        run: npm install --frozen-lockfile # Uso de --frozen-lockfile para CI/CD
-
-      - name: Remove underscore-prefixed directories
-        run: npm run rm --if-present
-
-      - name: Build package
-        run: npm run build --if-present
-      
-      - name: Dist package
-        run: npm run dist --if-present
-
-      - name: Upload build artifact
-        uses: actions/upload-artifact@v4
-        with:
-          name: dist-package
-          path: dist/ # Guarda el directorio de distribución como un artefacto
-
-  publish:
-    runs-on: ubuntu-latest
-    needs: build # 👈 Depende del trabajo de construcción
-    environment: production # 👈 Asocia este trabajo con el ambiente 'production'
-    
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        
-      - name: Download build artifact
-        uses: actions/download-artifact@v4
-        with:
-          name: dist-package
-          path: dist/ # Descarga el artefacto en el directorio 'dist'
-
-      - name: Use Node.js 20.x for publishing
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          npm-version: '10.9.2'
-          registry-url: 'https://registry.npmjs.org'
-          
-      - name: Publish package
-        working-directory: dist
-        run: npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
-  
-  notify:
-    runs-on: ubuntu-latest
-    needs: publish
-    environment: production
-    
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v4
-        
-      - name: Get package version
-        id: get_version
-        run: echo "PACKAGE_VERSION=$(npm pkg get version | tr -d '\"')" >> $GITHUB_ENV
-        
-      - name: Get commit message and author
-        id: get_commit_info
-        run: |
-          echo "COMMIT_MESSAGE=$(git log -1 --pretty=format:%s)" >> $GITHUB_ENV
-          echo "COMMIT_AUTHOR=$(git log -1 --pretty=format:%an)" >> $GITHUB_ENV
-        
-      - name: Send Discord notification (Success)
-        if: success()
-        uses: tsickert/discord-webhook@v5.3.0
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: "✅ **Publicación Exitosa:** Nueva versión de la librería de componentes en npm.\n**Paquete:** [@soyfri/shared-library](https://www.npmjs.com/package/@soyfri/shared-library/v/${{ env.PACKAGE_VERSION }})\n**Versión:** `v${{ env.PACKAGE_VERSION }}`\n**Notas del commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
-          username: "GitHub Actions"
-          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"
-      
-      - name: Send Discord notification (Failure)
-        if: failure()
-        uses: tsickert/discord-webhook@v5.3.0
-        with:
-          webhook-url: ${{ secrets.DISCORD_WEBHOOK_URL }}
-          content: "❌ **Publicación Fallida:** Falló la publicación de la librería de componentes en npm.\n**Commit:** ${{ env.COMMIT_MESSAGE }}\n**Autor:** ${{ env.COMMIT_AUTHOR }}"
-          username: "GitHub Actions"
-          avatar-url: "https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png"

package/.prettierrc

@@ -1,3 +0,0 @@
-{
-  "tabWidth": 2
-}

package/.storybook/main.ts

@@ -1,19 +0,0 @@
-import type { StorybookConfig } from '@storybook/react-vite';
-
-const config: StorybookConfig = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx|mdx)"
-  ],
-  "addons": [
-    "@storybook/addon-onboarding",
-    "@chromatic-com/storybook",
-    "@storybook/addon-vitest",
-    "@storybook/addon-docs"
-  ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
-export default config;

package/.storybook/preview.ts

@@ -1,14 +0,0 @@
-import type { Preview } from '@storybook/react-vite'
-
-const preview: Preview = {
-  parameters: {
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-  },
-};
-
-export default preview;

package/.storybook/vitest.setup.ts

@@ -1,9 +0,0 @@
-import { beforeAll } from 'vitest';
-import { setProjectAnnotations } from '@storybook/react-vite';
-import * as projectAnnotations from './preview';
-
-// This is an important step to apply the right configuration when testing your stories.
-// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
-const project = setProjectAnnotations([projectAnnotations]);
-
-beforeAll(project.beforeAll);