@soyfri/shared-library 4.0.4 → 4.1.0

package/chunks/AppBarMenuToggle-BsN5zZTv.cjs

@@ -0,0 +1,134 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const material = require("@mui/material");
+const styles = require("@mui/material/styles");
+const mergeSx = require("./mergeSx-Dbccoo_H.cjs");
+const resolvePreset = require("./resolvePreset-CxTI6_Ln.cjs");
+const MenuIcon = require("@mui/icons-material/Menu");
+const MenuOpenIcon = require("@mui/icons-material/MenuOpen");
+const AppBarContext = React.createContext(null);
+function useAppBarContext() {
+  const ctx = React.useContext(AppBarContext);
+  return ctx != null ? ctx : {};
+}
+function buildAppBarStyles(theme, { height = 64, transparent = false }) {
+  return __spreadProps(__spreadValues({
+    minHeight: height,
+    justifyContent: "center",
+    backgroundImage: "none"
+  }, transparent && {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderBottom: `1px solid ${theme.palette.divider}`
+  }), {
+    "& .MuiToolbar-root": {
+      minHeight: height,
+      gap: theme.spacing(1.5)
+    }
+  });
+}
+const AppBarRoot = styles.styled(material.AppBar, {
+  name: "FriAppBar",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(
+  ({ theme, ownerState }) => buildAppBarStyles(theme, ownerState)
+);
+const AppBar = React.forwardRef(function AppBar2({
+  children,
+  position = "sticky",
+  color = "default",
+  elevation = 1,
+  height = 64,
+  onMenuToggle,
+  menuOpen,
+  preset,
+  sx,
+  toolbarSx,
+  appBarProps
+}, ref) {
+  const theme = styles.useTheme();
+  const presetSx = resolvePreset.resolvePreset("AppBar", preset, theme);
+  const ownerState = {
+    height,
+    transparent: color === "transparent"
+  };
+  const rootSx = mergeSx.mergeSx(presetSx != null ? presetSx : {}, sx);
+  const contextValue = React.useMemo(
+    () => ({ onMenuToggle, menuOpen }),
+    [onMenuToggle, menuOpen]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AppBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    AppBarRoot,
+    __spreadProps(__spreadValues({
+      ref,
+      ownerState,
+      position,
+      color,
+      elevation,
+      sx: rootSx
+    }, appBarProps), {
+      children: /* @__PURE__ */ jsxRuntime.jsx(material.Toolbar, { sx: toolbarSx, children })
+    })
+  ) });
+});
+function AppBarMenuToggle({
+  onClick,
+  menuOpen,
+  closedIcon,
+  openIcon,
+  tooltip = "Menú",
+  ariaLabel,
+  size = "medium",
+  hideIfNoHandler = true,
+  sx,
+  className
+}) {
+  var _a;
+  const ctx = useAppBarContext();
+  const handler = onClick != null ? onClick : ctx.onMenuToggle;
+  const open = (_a = menuOpen != null ? menuOpen : ctx.menuOpen) != null ? _a : false;
+  if (!handler && hideIfNoHandler) {
+    return null;
+  }
+  const icon = open ? openIcon != null ? openIcon : /* @__PURE__ */ jsxRuntime.jsx(MenuOpenIcon, {}) : closedIcon != null ? closedIcon : /* @__PURE__ */ jsxRuntime.jsx(MenuIcon, {});
+  return /* @__PURE__ */ jsxRuntime.jsx(material.Tooltip, { title: tooltip, arrow: true, children: /* @__PURE__ */ jsxRuntime.jsx("span", { children: /* @__PURE__ */ jsxRuntime.jsx(
+    material.IconButton,
+    {
+      size,
+      edge: "start",
+      color: "inherit",
+      "aria-label": ariaLabel != null ? ariaLabel : tooltip,
+      onClick: handler,
+      disabled: !handler,
+      className,
+      sx,
+      children: icon
+    }
+  ) }) });
+}
+exports.AppBar = AppBar;
+exports.AppBarContext = AppBarContext;
+exports.AppBarMenuToggle = AppBarMenuToggle;
+exports.useAppBarContext = useAppBarContext;
+//# sourceMappingURL=AppBarMenuToggle-BsN5zZTv.cjs.map

package/chunks/AppBarMenuToggle-BsN5zZTv.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarMenuToggle-BsN5zZTv.cjs","sources":["../../src/components/AppBar/AppBarContext.ts","../../src/components/AppBar/AppBar.sx.ts","../../src/components/AppBar/AppBar.tsx","../../src/components/AppBar/AppBarMenuToggle.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del AppBar. Permite que sub-componentes (MenuToggle, etc.)\n * consuman callbacks registrados en el AppBar padre sin tener que pasarlos\n * por props explícitas.\n */\nexport interface AppBarContextValue {\n  /** Handler del botón hamburguesa. Si es undefined, el toggle se oculta. */\n  onMenuToggle?: () => void;\n  /** Estado actual del drawer asociado (usado por el icono del toggle). */\n  menuOpen?: boolean;\n}\n\nexport const AppBarContext = createContext<AppBarContextValue | null>(null);\n\n/**\n * Hook para leer el contexto del AppBar. Si se llama fuera de un `<AppBar>`,\n * devuelve un objeto vacío — los sub-componentes caen en modo \"standalone\"\n * con sus defaults en lugar de romper.\n */\nexport function useAppBarContext(): AppBarContextValue {\n  const ctx = useContext(AppBarContext);\n  return ctx ?? {};\n}\n","import type { CSSObject, SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildAppBarSxArgs {\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /** Color del AppBar (se pasa al MuiAppBar). */\n  transparent?: boolean;\n}\n\n/**\n * Estilo de fábrica del AppBar, en CSS real (para `styled()`). Define altura\n * fija y layout del Toolbar interno; color/elevación quedan en las props\n * nativas de MuiAppBar.\n *\n * `gap` pasa por `theme.spacing`: en `sx` un `1.5` son 12px, en CSS plano\n * serían \"1.5px\".\n */\nexport function buildAppBarStyles(\n  theme: Theme,\n  { height = 64, transparent = false }: BuildAppBarSxArgs,\n): CSSObject {\n  return {\n    minHeight: height,\n    justifyContent: 'center',\n    backgroundImage: 'none',\n    ...(transparent && {\n      backgroundColor: 'transparent',\n      boxShadow: 'none',\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    }),\n    '& .MuiToolbar-root': {\n      minHeight: height,\n      gap: theme.spacing(1.5),\n    },\n  };\n}\n\n/**\n * @deprecated El componente ya no lo usa: su estilo de fábrica vive en el\n * `styled()`. Preferir `buildAppBarStyles`.\n */\nexport function buildAppBarSx({\n  height = 64,\n  transparent = false,\n}: BuildAppBarSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: height,\n    justifyContent: 'center',\n    backgroundImage: 'none',\n    ...(transparent && {\n      backgroundColor: 'transparent',\n      boxShadow: 'none',\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    }),\n    '& .MuiToolbar-root': {\n      minHeight: height,\n      gap: 1.5,\n    },\n  });\n}\n","import React, { forwardRef, useMemo, type ReactNode } from 'react';\nimport {\n  AppBar as MuiAppBar,\n  Toolbar,\n  type AppBarProps as MuiAppBarProps,\n} from '@mui/material';\nimport {\n  styled,\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\n\nimport { AppBarContext } from './AppBarContext';\nimport { buildAppBarStyles, type BuildAppBarSxArgs } from './AppBar.sx';\nimport { mergeSx } from '../_shared/mergeSx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\nexport type AppBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute' | 'relative';\nexport type AppBarColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'transparent'\n  | 'inherit';\n\nexport interface AppBarProps {\n  /** Contenido del AppBar (típicamente sub-componentes + acciones custom). */\n  children?: ReactNode;\n  /** Posicionamiento. Default: `'sticky'`. */\n  position?: AppBarPosition;\n  /** Color. Default: `'default'`. */\n  color?: AppBarColor;\n  /** Nivel de sombra. Default: 1. */\n  elevation?: number;\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /**\n   * Handler del botón hamburguesa. Se expone vía AppBarContext para que el\n   * sub-componente `<AppBarMenuToggle>` lo consuma sin prop drilling.\n   */\n  onMenuToggle?: () => void;\n  /** Estado del drawer asociado (para que el icono del toggle cambie). */\n  menuOpen?: boolean;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.AppBar`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx del root (se mergea después del preset). */\n  sx?: SxProps<Theme>;\n  /** sx del Toolbar interno. */\n  toolbarSx?: SxProps<Theme>;\n  className?: string;\n  /** Otras props nativas del MuiAppBar (ej. `enableColorOnDark`). */\n  appBarProps?: Omit<\n    MuiAppBarProps,\n    'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'\n  >;\n}\n\n/**\n * AppBar (header superior) del paquete. Se diseñó como un shell compositivo\n * — el consumer arma el contenido libremente (logo, título, menú de usuario,\n * etc.) y puede usar `<AppBarMenuToggle>` para el botón hamburguesa\n * integrado con el contexto.\n *\n * Patrón recomendado para navegación en dashboards:\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer}>\n *   <AppBarMenuToggle />\n *   <MyBrand />\n *   <Box sx={{ flex: 1 }} />\n *   <MyUserMenu />\n * </AppBar>\n * ```\n */\n/** Root themeable vía `theme.components.FriAppBar`. */\nconst AppBarRoot = styled(MuiAppBar, {\n  name: 'FriAppBar',\n  slot: 'Root',\n  shouldForwardProp: (prop) => prop !== 'ownerState',\n})<{ ownerState: BuildAppBarSxArgs }>(({ theme, ownerState }) =>\n  buildAppBarStyles(theme, ownerState),\n);\n\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar({\n  children,\n  position = 'sticky',\n  color = 'default',\n  elevation = 1,\n  height = 64,\n  onMenuToggle,\n  menuOpen,\n  preset,\n  sx,\n  toolbarSx,\n  appBarProps,\n}, ref) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('AppBar', preset, theme);\n\n  // El estilo de fábrica vive en `AppBarRoot` (styled).\n  const ownerState: BuildAppBarSxArgs = {\n    height,\n    transparent: color === 'transparent',\n  };\n  const rootSx = mergeSx(presetSx ?? {}, sx);\n\n  const contextValue = useMemo(\n    () => ({ onMenuToggle, menuOpen }),\n    [onMenuToggle, menuOpen],\n  );\n\n  return (\n    <AppBarContext.Provider value={contextValue}>\n      <AppBarRoot\n        ref={ref}\n        ownerState={ownerState}\n        position={position}\n        color={color}\n        elevation={elevation}\n        sx={rootSx}\n        {...appBarProps}\n      >\n        <Toolbar sx={toolbarSx}>{children}</Toolbar>\n      </AppBarRoot>\n    </AppBarContext.Provider>\n  );\n});\n\nexport default AppBar;\n","import { type ReactNode } from 'react';\nimport { IconButton, Tooltip } from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport MenuOpenIcon from '@mui/icons-material/MenuOpen';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useAppBarContext } from './AppBarContext';\n\nexport interface AppBarMenuToggleProps {\n  /**\n   * Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para\n   * usar el toggle fuera de un `<AppBar>` (p.ej. en un header custom).\n   */\n  onClick?: () => void;\n  /** Estado del drawer asociado. Si se omite, se lee del `AppBarContext`. */\n  menuOpen?: boolean;\n  /** Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`. */\n  closedIcon?: ReactNode;\n  /** Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`. */\n  openIcon?: ReactNode;\n  /** Texto de tooltip. Default: \"Menú\". */\n  tooltip?: string;\n  /** aria-label del botón. Default: el mismo tooltip. */\n  ariaLabel?: string;\n  /** Tamaño del IconButton. Default: `'medium'`. */\n  size?: 'small' | 'medium' | 'large';\n  /** Oculta el botón cuando no hay handler disponible. Default: true. */\n  hideIfNoHandler?: boolean;\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y\n * `menuOpen` del `AppBarContext` (pattern composicional), pero permite\n * overrides explícitos si se usa fuera de un `<AppBar>`.\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer} menuOpen={open}>\n *   <AppBarMenuToggle />\n *   ...\n * </AppBar>\n * ```\n */\nexport function AppBarMenuToggle({\n  onClick,\n  menuOpen,\n  closedIcon,\n  openIcon,\n  tooltip = 'Menú',\n  ariaLabel,\n  size = 'medium',\n  hideIfNoHandler = true,\n  sx,\n  className,\n}: AppBarMenuToggleProps) {\n  const ctx = useAppBarContext();\n\n  const handler = onClick ?? ctx.onMenuToggle;\n  const open = menuOpen ?? ctx.menuOpen ?? false;\n\n  if (!handler && hideIfNoHandler) {\n    return null;\n  }\n\n  const icon = open\n    ? (openIcon ?? <MenuOpenIcon />)\n    : (closedIcon ?? <MenuIcon />);\n\n  return (\n    <Tooltip title={tooltip} arrow>\n      <span>\n        <IconButton\n          size={size}\n          edge=\"start\"\n          color=\"inherit\"\n          aria-label={ariaLabel ?? tooltip}\n          onClick={handler}\n          disabled={!handler}\n          className={className}\n          sx={sx}\n        >\n          {icon}\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n}\n\nexport default AppBarMenuToggle;\n"],"names":["createContext","useContext","styled","MuiAppBar","forwardRef","AppBar","useTheme","resolvePreset","mergeSx","useMemo","jsx","Toolbar","Tooltip","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgBA,MAAAA,cAAyC,IAAI;AAOnE,SAAS,mBAAuC;AACrD,QAAM,MAAMC,MAAAA,WAAW,aAAa;AACpC,SAAO,oBAAO,CAAA;AAChB;ACPO,SAAS,kBACd,OACA,EAAE,SAAS,IAAI,cAAc,SAClB;AACX,SAAO;AAAA,IACL,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,KACb,eAAe;AAAA,IACjB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAAA,IAP7C;AAAA,IASL,sBAAsB;AAAA,MACpB,WAAW;AAAA,MACX,KAAK,MAAM,QAAQ,GAAG;AAAA,IAAA;AAAA,EACxB;AAEJ;AC4CA,MAAM,aAAaC,OAAAA,OAAOC,iBAAW;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC;AAAA,EAAqC,CAAC,EAAE,OAAO,iBAC9C,kBAAkB,OAAO,UAAU;AACrC;AAEO,MAAM,SAASC,MAAAA,WAAqC,SAASC,QAAO;AAAA,EACzE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,QAAM,QAAQC,OAAAA,SAAA;AACd,QAAM,WAAWC,cAAAA,cAAc,UAAU,QAAQ,KAAK;AAGtD,QAAM,aAAgC;AAAA,IACpC;AAAA,IACA,aAAa,UAAU;AAAA,EAAA;AAEzB,QAAM,SAASC,QAAAA,QAAQ,8BAAY,CAAA,GAAI,EAAE;AAEzC,QAAM,eAAeC,MAAAA;AAAAA,IACnB,OAAO,EAAE,cAAc;IACvB,CAAC,cAAc,QAAQ;AAAA,EAAA;AAGzB,SACEC,2BAAAA,IAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI;AAAA,OACA,cAPL;AAAA,MASC,UAAAA,2BAAAA,IAACC,SAAAA,SAAA,EAAQ,IAAI,WAAY,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,GAEtC;AAEJ,CAAC;ACtFM,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAA0B;;AACxB,QAAM,MAAM,iBAAA;AAEZ,QAAM,UAAU,4BAAW,IAAI;AAC/B,QAAM,QAAO,mCAAY,IAAI,aAAhB,YAA4B;AAEzC,MAAI,CAAC,WAAW,iBAAiB;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,OACR,8BAAYD,+BAAC,gBAAa,IAC1B,iEAAe,UAAA,CAAA,CAAS;AAE7B,wCACGE,SAAAA,SAAA,EAAQ,OAAO,SAAS,OAAK,MAC5B,yCAAC,QAAA,EACC,UAAAF,2BAAAA;AAAAA,IAACG,SAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,OAAM;AAAA,MACN,cAAY,gCAAa;AAAA,MACzB,SAAS;AAAA,MACT,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MAEC,UAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;;;;;"}

package/chunks/AppBarMenuToggle-DN_dFthr.mjs

@@ -0,0 +1,135 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, forwardRef, useMemo } from "react";
+import { Toolbar, AppBar as AppBar$1, Tooltip, IconButton } from "@mui/material";
+import { useTheme, styled } from "@mui/material/styles";
+import { m as mergeSx } from "./mergeSx-BXoNZjB_.mjs";
+import { r as resolvePreset } from "./resolvePreset-K6_BfWHD.mjs";
+import MenuIcon from "@mui/icons-material/Menu";
+import MenuOpenIcon from "@mui/icons-material/MenuOpen";
+const AppBarContext = createContext(null);
+function useAppBarContext() {
+  const ctx = useContext(AppBarContext);
+  return ctx != null ? ctx : {};
+}
+function buildAppBarStyles(theme, { height = 64, transparent = false }) {
+  return __spreadProps(__spreadValues({
+    minHeight: height,
+    justifyContent: "center",
+    backgroundImage: "none"
+  }, transparent && {
+    backgroundColor: "transparent",
+    boxShadow: "none",
+    borderBottom: `1px solid ${theme.palette.divider}`
+  }), {
+    "& .MuiToolbar-root": {
+      minHeight: height,
+      gap: theme.spacing(1.5)
+    }
+  });
+}
+const AppBarRoot = styled(AppBar$1, {
+  name: "FriAppBar",
+  slot: "Root",
+  shouldForwardProp: (prop) => prop !== "ownerState"
+})(
+  ({ theme, ownerState }) => buildAppBarStyles(theme, ownerState)
+);
+const AppBar = forwardRef(function AppBar2({
+  children,
+  position = "sticky",
+  color = "default",
+  elevation = 1,
+  height = 64,
+  onMenuToggle,
+  menuOpen,
+  preset,
+  sx,
+  toolbarSx,
+  appBarProps
+}, ref) {
+  const theme = useTheme();
+  const presetSx = resolvePreset("AppBar", preset, theme);
+  const ownerState = {
+    height,
+    transparent: color === "transparent"
+  };
+  const rootSx = mergeSx(presetSx != null ? presetSx : {}, sx);
+  const contextValue = useMemo(
+    () => ({ onMenuToggle, menuOpen }),
+    [onMenuToggle, menuOpen]
+  );
+  return /* @__PURE__ */ jsx(AppBarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    AppBarRoot,
+    __spreadProps(__spreadValues({
+      ref,
+      ownerState,
+      position,
+      color,
+      elevation,
+      sx: rootSx
+    }, appBarProps), {
+      children: /* @__PURE__ */ jsx(Toolbar, { sx: toolbarSx, children })
+    })
+  ) });
+});
+function AppBarMenuToggle({
+  onClick,
+  menuOpen,
+  closedIcon,
+  openIcon,
+  tooltip = "Menú",
+  ariaLabel,
+  size = "medium",
+  hideIfNoHandler = true,
+  sx,
+  className
+}) {
+  var _a;
+  const ctx = useAppBarContext();
+  const handler = onClick != null ? onClick : ctx.onMenuToggle;
+  const open = (_a = menuOpen != null ? menuOpen : ctx.menuOpen) != null ? _a : false;
+  if (!handler && hideIfNoHandler) {
+    return null;
+  }
+  const icon = open ? openIcon != null ? openIcon : /* @__PURE__ */ jsx(MenuOpenIcon, {}) : closedIcon != null ? closedIcon : /* @__PURE__ */ jsx(MenuIcon, {});
+  return /* @__PURE__ */ jsx(Tooltip, { title: tooltip, arrow: true, children: /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(
+    IconButton,
+    {
+      size,
+      edge: "start",
+      color: "inherit",
+      "aria-label": ariaLabel != null ? ariaLabel : tooltip,
+      onClick: handler,
+      disabled: !handler,
+      className,
+      sx,
+      children: icon
+    }
+  ) }) });
+}
+export {
+  AppBar as A,
+  AppBarMenuToggle as a,
+  AppBarContext as b,
+  useAppBarContext as u
+};
+//# sourceMappingURL=AppBarMenuToggle-DN_dFthr.mjs.map

package/chunks/AppBarMenuToggle-DN_dFthr.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppBarMenuToggle-DN_dFthr.mjs","sources":["../../src/components/AppBar/AppBarContext.ts","../../src/components/AppBar/AppBar.sx.ts","../../src/components/AppBar/AppBar.tsx","../../src/components/AppBar/AppBarMenuToggle.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\n/**\n * Context interno del AppBar. Permite que sub-componentes (MenuToggle, etc.)\n * consuman callbacks registrados en el AppBar padre sin tener que pasarlos\n * por props explícitas.\n */\nexport interface AppBarContextValue {\n  /** Handler del botón hamburguesa. Si es undefined, el toggle se oculta. */\n  onMenuToggle?: () => void;\n  /** Estado actual del drawer asociado (usado por el icono del toggle). */\n  menuOpen?: boolean;\n}\n\nexport const AppBarContext = createContext<AppBarContextValue | null>(null);\n\n/**\n * Hook para leer el contexto del AppBar. Si se llama fuera de un `<AppBar>`,\n * devuelve un objeto vacío — los sub-componentes caen en modo \"standalone\"\n * con sus defaults en lugar de romper.\n */\nexport function useAppBarContext(): AppBarContextValue {\n  const ctx = useContext(AppBarContext);\n  return ctx ?? {};\n}\n","import type { CSSObject, SxProps, Theme } from '@mui/material/styles';\n\nexport interface BuildAppBarSxArgs {\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /** Color del AppBar (se pasa al MuiAppBar). */\n  transparent?: boolean;\n}\n\n/**\n * Estilo de fábrica del AppBar, en CSS real (para `styled()`). Define altura\n * fija y layout del Toolbar interno; color/elevación quedan en las props\n * nativas de MuiAppBar.\n *\n * `gap` pasa por `theme.spacing`: en `sx` un `1.5` son 12px, en CSS plano\n * serían \"1.5px\".\n */\nexport function buildAppBarStyles(\n  theme: Theme,\n  { height = 64, transparent = false }: BuildAppBarSxArgs,\n): CSSObject {\n  return {\n    minHeight: height,\n    justifyContent: 'center',\n    backgroundImage: 'none',\n    ...(transparent && {\n      backgroundColor: 'transparent',\n      boxShadow: 'none',\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    }),\n    '& .MuiToolbar-root': {\n      minHeight: height,\n      gap: theme.spacing(1.5),\n    },\n  };\n}\n\n/**\n * @deprecated El componente ya no lo usa: su estilo de fábrica vive en el\n * `styled()`. Preferir `buildAppBarStyles`.\n */\nexport function buildAppBarSx({\n  height = 64,\n  transparent = false,\n}: BuildAppBarSxArgs): SxProps<Theme> {\n  return (theme) => ({\n    minHeight: height,\n    justifyContent: 'center',\n    backgroundImage: 'none',\n    ...(transparent && {\n      backgroundColor: 'transparent',\n      boxShadow: 'none',\n      borderBottom: `1px solid ${theme.palette.divider}`,\n    }),\n    '& .MuiToolbar-root': {\n      minHeight: height,\n      gap: 1.5,\n    },\n  });\n}\n","import React, { forwardRef, useMemo, type ReactNode } from 'react';\nimport {\n  AppBar as MuiAppBar,\n  Toolbar,\n  type AppBarProps as MuiAppBarProps,\n} from '@mui/material';\nimport {\n  styled,\n  useTheme,\n  type SxProps,\n  type Theme,\n} from '@mui/material/styles';\n\nimport { AppBarContext } from './AppBarContext';\nimport { buildAppBarStyles, type BuildAppBarSxArgs } from './AppBar.sx';\nimport { mergeSx } from '../_shared/mergeSx';\nimport { resolvePreset } from '../_shared/resolvePreset';\n\nexport type AppBarPosition = 'fixed' | 'sticky' | 'static' | 'absolute' | 'relative';\nexport type AppBarColor =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'transparent'\n  | 'inherit';\n\nexport interface AppBarProps {\n  /** Contenido del AppBar (típicamente sub-componentes + acciones custom). */\n  children?: ReactNode;\n  /** Posicionamiento. Default: `'sticky'`. */\n  position?: AppBarPosition;\n  /** Color. Default: `'default'`. */\n  color?: AppBarColor;\n  /** Nivel de sombra. Default: 1. */\n  elevation?: number;\n  /** Altura en px. Default: 64. */\n  height?: number;\n  /**\n   * Handler del botón hamburguesa. Se expone vía AppBarContext para que el\n   * sub-componente `<AppBarMenuToggle>` lo consuma sin prop drilling.\n   */\n  onMenuToggle?: () => void;\n  /** Estado del drawer asociado (para que el icono del toggle cambie). */\n  menuOpen?: boolean;\n  /**\n   * Nombre del preset de estilo registrado en `theme.styles.AppBar`.\n   * - `\"default\"` (o ausente) = estilo built-in del paquete.\n   */\n  preset?: string;\n  /** sx del root (se mergea después del preset). */\n  sx?: SxProps<Theme>;\n  /** sx del Toolbar interno. */\n  toolbarSx?: SxProps<Theme>;\n  className?: string;\n  /** Otras props nativas del MuiAppBar (ej. `enableColorOnDark`). */\n  appBarProps?: Omit<\n    MuiAppBarProps,\n    'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'\n  >;\n}\n\n/**\n * AppBar (header superior) del paquete. Se diseñó como un shell compositivo\n * — el consumer arma el contenido libremente (logo, título, menú de usuario,\n * etc.) y puede usar `<AppBarMenuToggle>` para el botón hamburguesa\n * integrado con el contexto.\n *\n * Patrón recomendado para navegación en dashboards:\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer}>\n *   <AppBarMenuToggle />\n *   <MyBrand />\n *   <Box sx={{ flex: 1 }} />\n *   <MyUserMenu />\n * </AppBar>\n * ```\n */\n/** Root themeable vía `theme.components.FriAppBar`. */\nconst AppBarRoot = styled(MuiAppBar, {\n  name: 'FriAppBar',\n  slot: 'Root',\n  shouldForwardProp: (prop) => prop !== 'ownerState',\n})<{ ownerState: BuildAppBarSxArgs }>(({ theme, ownerState }) =>\n  buildAppBarStyles(theme, ownerState),\n);\n\nexport const AppBar = forwardRef<HTMLElement, AppBarProps>(function AppBar({\n  children,\n  position = 'sticky',\n  color = 'default',\n  elevation = 1,\n  height = 64,\n  onMenuToggle,\n  menuOpen,\n  preset,\n  sx,\n  toolbarSx,\n  appBarProps,\n}, ref) {\n  const theme = useTheme();\n  const presetSx = resolvePreset('AppBar', preset, theme);\n\n  // El estilo de fábrica vive en `AppBarRoot` (styled).\n  const ownerState: BuildAppBarSxArgs = {\n    height,\n    transparent: color === 'transparent',\n  };\n  const rootSx = mergeSx(presetSx ?? {}, sx);\n\n  const contextValue = useMemo(\n    () => ({ onMenuToggle, menuOpen }),\n    [onMenuToggle, menuOpen],\n  );\n\n  return (\n    <AppBarContext.Provider value={contextValue}>\n      <AppBarRoot\n        ref={ref}\n        ownerState={ownerState}\n        position={position}\n        color={color}\n        elevation={elevation}\n        sx={rootSx}\n        {...appBarProps}\n      >\n        <Toolbar sx={toolbarSx}>{children}</Toolbar>\n      </AppBarRoot>\n    </AppBarContext.Provider>\n  );\n});\n\nexport default AppBar;\n","import { type ReactNode } from 'react';\nimport { IconButton, Tooltip } from '@mui/material';\nimport MenuIcon from '@mui/icons-material/Menu';\nimport MenuOpenIcon from '@mui/icons-material/MenuOpen';\nimport type { SxProps, Theme } from '@mui/material/styles';\n\nimport { useAppBarContext } from './AppBarContext';\n\nexport interface AppBarMenuToggleProps {\n  /**\n   * Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para\n   * usar el toggle fuera de un `<AppBar>` (p.ej. en un header custom).\n   */\n  onClick?: () => void;\n  /** Estado del drawer asociado. Si se omite, se lee del `AppBarContext`. */\n  menuOpen?: boolean;\n  /** Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`. */\n  closedIcon?: ReactNode;\n  /** Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`. */\n  openIcon?: ReactNode;\n  /** Texto de tooltip. Default: \"Menú\". */\n  tooltip?: string;\n  /** aria-label del botón. Default: el mismo tooltip. */\n  ariaLabel?: string;\n  /** Tamaño del IconButton. Default: `'medium'`. */\n  size?: 'small' | 'medium' | 'large';\n  /** Oculta el botón cuando no hay handler disponible. Default: true. */\n  hideIfNoHandler?: boolean;\n  sx?: SxProps<Theme>;\n  className?: string;\n}\n\n/**\n * Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y\n * `menuOpen` del `AppBarContext` (pattern composicional), pero permite\n * overrides explícitos si se usa fuera de un `<AppBar>`.\n *\n * ```tsx\n * <AppBar onMenuToggle={toggleDrawer} menuOpen={open}>\n *   <AppBarMenuToggle />\n *   ...\n * </AppBar>\n * ```\n */\nexport function AppBarMenuToggle({\n  onClick,\n  menuOpen,\n  closedIcon,\n  openIcon,\n  tooltip = 'Menú',\n  ariaLabel,\n  size = 'medium',\n  hideIfNoHandler = true,\n  sx,\n  className,\n}: AppBarMenuToggleProps) {\n  const ctx = useAppBarContext();\n\n  const handler = onClick ?? ctx.onMenuToggle;\n  const open = menuOpen ?? ctx.menuOpen ?? false;\n\n  if (!handler && hideIfNoHandler) {\n    return null;\n  }\n\n  const icon = open\n    ? (openIcon ?? <MenuOpenIcon />)\n    : (closedIcon ?? <MenuIcon />);\n\n  return (\n    <Tooltip title={tooltip} arrow>\n      <span>\n        <IconButton\n          size={size}\n          edge=\"start\"\n          color=\"inherit\"\n          aria-label={ariaLabel ?? tooltip}\n          onClick={handler}\n          disabled={!handler}\n          className={className}\n          sx={sx}\n        >\n          {icon}\n        </IconButton>\n      </span>\n    </Tooltip>\n  );\n}\n\nexport default AppBarMenuToggle;\n"],"names":["MuiAppBar","AppBar"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,gBAAgB,cAAyC,IAAI;AAOnE,SAAS,mBAAuC;AACrD,QAAM,MAAM,WAAW,aAAa;AACpC,SAAO,oBAAO,CAAA;AAChB;ACPO,SAAS,kBACd,OACA,EAAE,SAAS,IAAI,cAAc,SAClB;AACX,SAAO;AAAA,IACL,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,KACb,eAAe;AAAA,IACjB,iBAAiB;AAAA,IACjB,WAAW;AAAA,IACX,cAAc,aAAa,MAAM,QAAQ,OAAO;AAAA,EAAA,IAP7C;AAAA,IASL,sBAAsB;AAAA,MACpB,WAAW;AAAA,MACX,KAAK,MAAM,QAAQ,GAAG;AAAA,IAAA;AAAA,EACxB;AAEJ;AC4CA,MAAM,aAAa,OAAOA,UAAW;AAAA,EACnC,MAAM;AAAA,EACN,MAAM;AAAA,EACN,mBAAmB,CAAC,SAAS,SAAS;AACxC,CAAC;AAAA,EAAqC,CAAC,EAAE,OAAO,iBAC9C,kBAAkB,OAAO,UAAU;AACrC;AAEO,MAAM,SAAS,WAAqC,SAASC,QAAO;AAAA,EACzE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAG,KAAK;AACN,QAAM,QAAQ,SAAA;AACd,QAAM,WAAW,cAAc,UAAU,QAAQ,KAAK;AAGtD,QAAM,aAAgC;AAAA,IACpC;AAAA,IACA,aAAa,UAAU;AAAA,EAAA;AAEzB,QAAM,SAAS,QAAQ,8BAAY,CAAA,GAAI,EAAE;AAEzC,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,cAAc;IACvB,CAAC,cAAc,QAAQ;AAAA,EAAA;AAGzB,SACE,oBAAC,cAAc,UAAd,EAAuB,OAAO,cAC7B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,IAAI;AAAA,OACA,cAPL;AAAA,MASC,UAAA,oBAAC,SAAA,EAAQ,IAAI,WAAY,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA,GAEtC;AAEJ,CAAC;ACtFM,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,OAAO;AAAA,EACP,kBAAkB;AAAA,EAClB;AAAA,EACA;AACF,GAA0B;;AACxB,QAAM,MAAM,iBAAA;AAEZ,QAAM,UAAU,4BAAW,IAAI;AAC/B,QAAM,QAAO,mCAAY,IAAI,aAAhB,YAA4B;AAEzC,MAAI,CAAC,WAAW,iBAAiB;AAC/B,WAAO;AAAA,EACT;AAEA,QAAM,OAAO,OACR,8BAAY,oBAAC,gBAAa,IAC1B,sDAAe,UAAA,CAAA,CAAS;AAE7B,6BACG,SAAA,EAAQ,OAAO,SAAS,OAAK,MAC5B,8BAAC,QAAA,EACC,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,OAAM;AAAA,MACN,cAAY,gCAAa;AAAA,MACzB,SAAS;AAAA,MACT,UAAU,CAAC;AAAA,MACX;AAAA,MACA;AAAA,MAEC,UAAA;AAAA,IAAA;AAAA,EAAA,GAEL,EAAA,CACF;AAEJ;"}