@soyfri/shared-library 2.0.0-beta.0 → 2.0.0-beta.10

package/storybook-static/assets/AppBar.stories-DcX3M5th.js

@@ -0,0 +1,172 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{r as f,R as Y}from"./iframe-BAJnc_4n.js";import{N as Z}from"./Notifications-DY_A-Sho.js";import{c as O}from"./createSvgIcon-D_Gca4vA.js";import{P as ee}from"./Person-CkQl-mpq.js";import{S as re}from"./Settings-BLKc1CnO.js";import{L as ae}from"./Logout-gj-P3AfU.js";import{r as oe}from"./resolvePreset-CN2aOJJr.js";import{u as ne}from"./useTheme-BmOJK7ra.js";import{g as $,a as _,u as F,s as G,c as K,b as P,d as J,m as Q}from"./DefaultPropsProvider-BGoQxtDa.js";import{c as te}from"./createSimplePaletteValueFilter-bm0fmN_7.js";import{P as se}from"./Paper-SwQBhqI7.js";import{B as u}from"./Box-BnhEcfFm.js";import{T as g}from"./Typography-BgntX2Ep.js";import{T as w}from"./Tooltip-DbnHUxNj.js";import{I as D}from"./IconButton-9OYSTH58.js";import{A as ie}from"./Avatar-NbFfkZws.js";import{M as le}from"./Menu-ClzfjLc3.js";import{D as W}from"./Divider-BbCj9wT4.js";import{M as pe}from"./MenuItem-iU6tAqJI.js";import{L as ce}from"./ListItemIcon-hca6xN79.js";import{L as de}from"./ListItemText-BFLAwLdl.js";import{B as ue}from"./Button-DBpqmVB_.js";import"./preload-helper-PPVm8Dsz.js";import"./extendSxProp-CEpa30hT.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./useSlotProps-C0uMfuBt.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useTimeout-DNjRaOWc.js";import"./useControlled-DsVh1a5j.js";import"./useId-b4fZxjOL.js";import"./getReactElementRef-BQ3ANZdy.js";import"./index-CY7j4a7o.js";import"./index-BF3FAXTk.js";import"./Grow-8y4FglGK.js";import"./Popper-CnCTYXxy.js";import"./ownerDocument-DW-IO8s5.js";import"./Portal-Cj8XF9Lf.js";import"./isFocusVisible-B8k4qzLc.js";import"./ButtonBase-qyaMEhe4.js";import"./CircularProgress-DC7ZNWwl.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./mergeSlotProps-B0UBKBMe.js";import"./Modal-3okp9H2i.js";import"./Fade-Ll96CvH8.js";import"./listItemTextClasses-CC_rwJam.js";function me(r){return $("MuiAppBar",r)}_("MuiAppBar",["root","positionFixed","positionAbsolute","positionSticky","positionStatic","positionRelative","colorDefault","colorPrimary","colorSecondary","colorInherit","colorTransparent","colorError","colorInfo","colorSuccess","colorWarning"]);const ge=r=>{const{color:a,position:o,classes:n}=r,t={root:["root",`color${P(a)}`,`position${P(o)}`]};return J(t,me,n)},E=(r,a)=>r?`${r?.replace(")","")}, ${a})`:a,fe=G(se,{name:"MuiAppBar",slot:"Root",overridesResolver:(r,a)=>{const{ownerState:o}=r;return[a.root,a[`position${P(o.position)}`],a[`color${P(o.color)}`]]}})(Q(({theme:r})=>({display:"flex",flexDirection:"column",width:"100%",boxSizing:"border-box",flexShrink:0,variants:[{props:{position:"fixed"},style:{position:"fixed",zIndex:(r.vars||r).zIndex.appBar,top:0,left:"auto",right:0,"@media print":{position:"absolute"}}},{props:{position:"absolute"},style:{position:"absolute",zIndex:(r.vars||r).zIndex.appBar,top:0,left:"auto",right:0}},{props:{position:"sticky"},style:{position:"sticky",zIndex:(r.vars||r).zIndex.appBar,top:0,left:"auto",right:0}},{props:{position:"static"},style:{position:"static"}},{props:{position:"relative"},style:{position:"relative"}},{props:{color:"inherit"},style:{"--AppBar-color":"inherit"}},{props:{color:"default"},style:{"--AppBar-background":r.vars?r.vars.palette.AppBar.defaultBg:r.palette.grey[100],"--AppBar-color":r.vars?r.vars.palette.text.primary:r.palette.getContrastText(r.palette.grey[100]),...r.applyStyles("dark",{"--AppBar-background":r.vars?r.vars.palette.AppBar.defaultBg:r.palette.grey[900],"--AppBar-color":r.vars?r.vars.palette.text.primary:r.palette.getContrastText(r.palette.grey[900])})}},...Object.entries(r.palette).filter(te(["contrastText"])).map(([a])=>({props:{color:a},style:{"--AppBar-background":(r.vars??r).palette[a].main,"--AppBar-color":(r.vars??r).palette[a].contrastText}})),{props:a=>a.enableColorOnDark===!0&&!["inherit","transparent"].includes(a.color),style:{backgroundColor:"var(--AppBar-background)",color:"var(--AppBar-color)"}},{props:a=>a.enableColorOnDark===!1&&!["inherit","transparent"].includes(a.color),style:{backgroundColor:"var(--AppBar-background)",color:"var(--AppBar-color)",...r.applyStyles("dark",{backgroundColor:r.vars?E(r.vars.palette.AppBar.darkBg,"var(--AppBar-background)"):null,color:r.vars?E(r.vars.palette.AppBar.darkColor,"var(--AppBar-color)"):null})}},{props:{color:"transparent"},style:{"--AppBar-background":"transparent","--AppBar-color":"inherit",backgroundColor:"var(--AppBar-background)",color:"var(--AppBar-color)",...r.applyStyles("dark",{backgroundImage:"none"})}}]}))),xe=f.forwardRef(function(a,o){const n=F({props:a,name:"MuiAppBar"}),{className:t,color:l="primary",enableColorOnDark:p=!1,position:c="fixed",...d}=n,s={...n,color:l,position:c,enableColorOnDark:p},m=ge(s);return e.jsx(fe,{square:!0,component:"header",ownerState:s,elevation:4,className:K(m.root,t,c==="fixed"&&"mui-fixed"),ref:o,...d})});function he(r){return $("MuiToolbar",r)}_("MuiToolbar",["root","gutters","regular","dense"]);const ye=r=>{const{classes:a,disableGutters:o,variant:n}=r;return J({root:["root",!o&&"gutters",n]},he,a)},ve=G("div",{name:"MuiToolbar",slot:"Root",overridesResolver:(r,a)=>{const{ownerState:o}=r;return[a.root,!o.disableGutters&&a.gutters,a[o.variant]]}})(Q(({theme:r})=>({position:"relative",display:"flex",alignItems:"center",variants:[{props:({ownerState:a})=>!a.disableGutters,style:{paddingLeft:r.spacing(2),paddingRight:r.spacing(2),[r.breakpoints.up("sm")]:{paddingLeft:r.spacing(3),paddingRight:r.spacing(3)}}},{props:{variant:"dense"},style:{minHeight:48}},{props:{variant:"regular"},style:r.mixins.toolbar}]}))),Be=f.forwardRef(function(a,o){const n=F({props:a,name:"MuiToolbar"}),{className:t,component:l="div",disableGutters:p=!1,variant:c="regular",...d}=n,s={...n,component:l,disableGutters:p,variant:c},m=ye(s);return e.jsx(ve,{as:l,className:K(m.root,t),ref:o,ownerState:s,...d})}),be=O(e.jsx("path",{d:"M11 18h2v-2h-2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2m0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8m0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4"})),Ae=O(e.jsx("path",{d:"M3 13h8V3H3zm0 8h8v-6H3zm10 0h8V11h-8zm0-18v6h8V3z"})),X=f.createContext(null);function Te(){return f.useContext(X)??{}}function je({height:r=64,transparent:a=!1}){return o=>({minHeight:r,justifyContent:"center",backgroundImage:"none",...a&&{backgroundColor:"transparent",boxShadow:"none",borderBottom:`1px solid ${o.palette.divider}`},"& .MuiToolbar-root":{minHeight:r,gap:1.5}})}function x({children:r,position:a="sticky",color:o="default",elevation:n=1,height:t=64,onMenuToggle:l,menuOpen:p,preset:c,sx:d,toolbarSx:s,className:m,appBarProps:h}){const y=ne(),v=oe("AppBar",c,y),A=[je({height:t,transparent:o==="transparent"}),...v?[v]:[],...Array.isArray(d)?d:d?[d]:[]],i=f.useMemo(()=>({onMenuToggle:l,menuOpen:p}),[l,p]);return e.jsx(X.Provider,{value:i,children:e.jsx(xe,{position:a,color:o==="transparent"?"transparent":o,elevation:n,className:m,sx:A,...h,children:e.jsx(Be,{sx:s,children:r})})})}x.__docgenInfo={description:`AppBar (header superior) del paquete. Se diseñó como un shell compositivo
+— el consumer arma el contenido con los sub-componentes que exporta el
+paquete (\`AppBarBrand\`, \`AppBarMenuToggle\`, \`AppBarUserMenu\`) + cualquier
+otra cosa custom.
+
+Patrón recomendado para navegación en dashboards:
+
+\`\`\`tsx
+<AppBar onMenuToggle={toggleDrawer}>
+  <AppBarMenuToggle />
+  <AppBarBrand logo={<Logo />} title="Afiliaciones" />
+  <Box sx={{ flex: 1 }} />
+  <AppBarUserMenu user={user} items={menuItems} />
+</AppBar>
+\`\`\``,methods:[],displayName:"AppBar",props:{children:{required:!1,tsType:{name:"ReactNode"},description:"Contenido del AppBar (típicamente sub-componentes + acciones custom)."},position:{required:!1,tsType:{name:"union",raw:"'fixed' | 'sticky' | 'static' | 'absolute' | 'relative'",elements:[{name:"literal",value:"'fixed'"},{name:"literal",value:"'sticky'"},{name:"literal",value:"'static'"},{name:"literal",value:"'absolute'"},{name:"literal",value:"'relative'"}]},description:"Posicionamiento. Default: `'sticky'`.",defaultValue:{value:"'sticky'",computed:!1}},color:{required:!1,tsType:{name:"union",raw:`| 'default'
+| 'primary'
+| 'secondary'
+| 'transparent'
+| 'inherit'`,elements:[{name:"literal",value:"'default'"},{name:"literal",value:"'primary'"},{name:"literal",value:"'secondary'"},{name:"literal",value:"'transparent'"},{name:"literal",value:"'inherit'"}]},description:"Color. Default: `'default'`.",defaultValue:{value:"'default'",computed:!1}},elevation:{required:!1,tsType:{name:"number"},description:"Nivel de sombra. Default: 1.",defaultValue:{value:"1",computed:!1}},height:{required:!1,tsType:{name:"number"},description:"Altura en px. Default: 64.",defaultValue:{value:"64",computed:!1}},onMenuToggle:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Handler del botón hamburguesa. Se expone vía AppBarContext para que el\nsub-componente `<AppBarMenuToggle>` lo consuma sin prop drilling."},menuOpen:{required:!1,tsType:{name:"boolean"},description:"Estado del drawer asociado (para que el icono del toggle cambie)."},preset:{required:!1,tsType:{name:"string"},description:'Nombre del preset de estilo registrado en `theme.styles.AppBar`.\n- `"default"` (o ausente) = estilo built-in del paquete.'},sx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del root (se mergea después del preset)."},toolbarSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del Toolbar interno."},className:{required:!1,tsType:{name:"string"},description:""},appBarProps:{required:!1,tsType:{name:"Omit",elements:[{name:"MuiAppBarProps"},{name:"union",raw:"'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'",elements:[{name:"literal",value:"'position'"},{name:"literal",value:"'color'"},{name:"literal",value:"'elevation'"},{name:"literal",value:"'sx'"},{name:"literal",value:"'children'"},{name:"literal",value:"'className'"}]}],raw:`Omit<
+  MuiAppBarProps,
+  'position' | 'color' | 'elevation' | 'sx' | 'children' | 'className'
+>`},description:"Otras props nativas del MuiAppBar (ej. `enableColorOnDark`)."}}};function B({logo:r,title:a,subtitle:o,onClick:n,hideTitleOnMobile:t=!0,sx:l,className:p}){const c=!!n,d=[{display:"flex",alignItems:"center",gap:1.25,cursor:c?"pointer":"default",userSelect:"none",minWidth:0},...Array.isArray(l)?l:l?[l]:[]];return e.jsxs(u,{role:c?"button":void 0,tabIndex:c?0:void 0,onClick:n,onKeyDown:s=>{c&&(s.key==="Enter"||s.key===" ")&&(s.preventDefault(),n?.(s))},className:p,sx:d,children:[r&&e.jsx(u,{component:"span",sx:{display:"flex",alignItems:"center",flexShrink:0},children:r}),(a||o)&&e.jsxs(u,{sx:{display:t?{xs:"none",sm:"flex"}:"flex",flexDirection:"column",minWidth:0,lineHeight:1.2},children:[a&&e.jsx(g,{component:"span",variant:"subtitle1",noWrap:!0,sx:{fontWeight:700},children:a}),o&&e.jsx(g,{component:"span",variant:"caption",color:"text.secondary",noWrap:!0,children:o})]})]})}B.__docgenInfo={description:`Brand del AppBar: combina logo + título + subtítulo opcional con un
+click handler global (típicamente para navegar al home).
+
+\`\`\`tsx
+<AppBarBrand
+  logo={<img src={logo} alt="" height={32} />}
+  title="Afiliaciones"
+  subtitle="Panel administrativo"
+  onClick={() => navigate('/')}
+/>
+\`\`\``,methods:[],displayName:"AppBarBrand",props:{logo:{required:!1,tsType:{name:"ReactNode"},description:"Logo (img, svg, componente). Se muestra a la izquierda del título."},title:{required:!1,tsType:{name:"ReactNode"},description:"Título del sistema."},subtitle:{required:!1,tsType:{name:"ReactNode"},description:"Subtítulo opcional (p.ej. nombre de módulo actual)."},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: MouseEvent<HTMLDivElement>) => void",signature:{arguments:[{type:{name:"MouseEvent",elements:[{name:"HTMLDivElement"}],raw:"MouseEvent<HTMLDivElement>"},name:"event"}],return:{name:"void"}}},description:"Handler de click sobre todo el brand (típicamente navega al home)."},hideTitleOnMobile:{required:!1,tsType:{name:"boolean"},description:"Oculta solo el título en viewports pequeños (mantiene el logo). Default: true.",defaultValue:{value:"true",computed:!1}},sx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:""},className:{required:!1,tsType:{name:"string"},description:""}}};const Me=O(e.jsx("path",{d:"M3 18h18v-2H3zm0-5h18v-2H3zm0-7v2h18V6z"})),Se=O(e.jsx("path",{d:"M3 18h13v-2H3zm0-5h10v-2H3zm0-7v2h13V6zm18 9.59L17.42 12 21 8.41 19.59 7l-5 5 5 5z"}));function z({onClick:r,menuOpen:a,closedIcon:o,openIcon:n,tooltip:t="Menú",ariaLabel:l,size:p="medium",hideIfNoHandler:c=!0,sx:d,className:s}){const m=Te(),h=r??m.onMenuToggle,y=a??m.menuOpen??!1;if(!h&&c)return null;const v=y?n??e.jsx(Se,{}):o??e.jsx(Me,{});return e.jsx(w,{title:t,arrow:!0,children:e.jsx("span",{children:e.jsx(D,{size:p,edge:"start",color:"inherit","aria-label":l??t,onClick:h,disabled:!h,className:s,sx:d,children:v})})})}z.__docgenInfo={description:"Botón hamburguesa del AppBar. Por default consume `onMenuToggle` y\n`menuOpen` del `AppBarContext` (pattern composicional), pero permite\noverrides explícitos si se usa fuera de un `<AppBar>`.\n\n```tsx\n<AppBar onMenuToggle={toggleDrawer} menuOpen={open}>\n  <AppBarMenuToggle />\n  ...\n</AppBar>\n```",methods:[],displayName:"AppBarMenuToggle",props:{onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"() => void",signature:{arguments:[],return:{name:"void"}}},description:"Callback explícito. Si se omite, se consume del `AppBarContext`. Útil para\nusar el toggle fuera de un `<AppBar>` (p.ej. en un header custom)."},menuOpen:{required:!1,tsType:{name:"boolean"},description:"Estado del drawer asociado. Si se omite, se lee del `AppBarContext`."},closedIcon:{required:!1,tsType:{name:"ReactNode"},description:"Icono custom cuando el drawer está cerrado. Default: `<MenuIcon />`."},openIcon:{required:!1,tsType:{name:"ReactNode"},description:"Icono custom cuando el drawer está abierto. Default: `<MenuOpenIcon />`."},tooltip:{required:!1,tsType:{name:"string"},description:'Texto de tooltip. Default: "Menú".',defaultValue:{value:"'Menú'",computed:!1}},ariaLabel:{required:!1,tsType:{name:"string"},description:"aria-label del botón. Default: el mismo tooltip."},size:{required:!1,tsType:{name:"union",raw:"'small' | 'medium' | 'large'",elements:[{name:"literal",value:"'small'"},{name:"literal",value:"'medium'"},{name:"literal",value:"'large'"}]},description:"Tamaño del IconButton. Default: `'medium'`.",defaultValue:{value:"'medium'",computed:!1}},hideIfNoHandler:{required:!1,tsType:{name:"boolean"},description:"Oculta el botón cuando no hay handler disponible. Default: true.",defaultValue:{value:"true",computed:!1}},sx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:""},className:{required:!1,tsType:{name:"string"},description:""}}};function ke(r){if(typeof r!="string")return"?";const a=r.trim().split(/\s+/).filter(Boolean);if(a.length===0)return"?";const o=a[0]?.charAt(0)??"",n=a.length>1?a[a.length-1]?.charAt(0)??"":"";return(o+n).toUpperCase()}function N({user:r,items:a,hideUserHeader:o=!1,triggerTooltip:n="Cuenta",avatarSize:t=36,menuSx:l,triggerSx:p,className:c}){const[d,s]=f.useState(null),m=!!d,h=i=>{s(i.currentTarget)},y=()=>s(null),v=(i,T)=>{i.stopPropagation(),T.onClick?.(i),y()},U=r?.initials??ke(r?.name),A=!o&&(r?.name||r?.email);return e.jsxs(u,{component:"span",className:c,children:[e.jsx(w,{title:n,arrow:!0,children:e.jsx(D,{onClick:h,size:"small","aria-label":n,"aria-haspopup":"menu","aria-expanded":m||void 0,sx:[{p:.5},...Array.isArray(p)?p:p?[p]:[]],children:e.jsx(ie,{src:r?.avatarUrl,sx:{width:t,height:t,fontSize:t*.4,fontWeight:600},children:!r?.avatarUrl&&U})})}),e.jsxs(le,{anchorEl:d,open:m,onClose:y,anchorOrigin:{vertical:"bottom",horizontal:"right"},transformOrigin:{vertical:"top",horizontal:"right"},slotProps:{paper:{sx:{minWidth:240,...l}}},children:[A&&e.jsxs(u,{sx:{px:2,py:1.25,display:"flex",flexDirection:"column",gap:.25},children:[r?.name&&e.jsx(g,{variant:"subtitle2",noWrap:!0,sx:{fontWeight:700},children:r.name}),r?.email&&e.jsx(g,{variant:"caption",color:"text.secondary",noWrap:!0,children:r.email})]}),A&&e.jsx(W,{}),a.map((i,T)=>{const R=i.key??`${String(i.label)}-${T}`,V=e.jsxs(pe,{disabled:i.disabled,onClick:j=>v(j,i),sx:j=>({color:i.danger?j.palette.error.main:"inherit","& .MuiListItemIcon-root":{color:i.danger?j.palette.error.main:"inherit",minWidth:32}}),children:[i.icon&&e.jsx(ce,{children:i.icon}),e.jsx(de,{primary:i.label})]},R);return i.dividerBefore&&T>0?e.jsxs(Y.Fragment,{children:[e.jsx(W,{}),V]},`${R}-frag`):V})]})]})}N.__docgenInfo={description:`Menú de usuario del AppBar: avatar clickable que despliega un menú con la
+info del usuario (nombre + email) y una lista de acciones (perfil, cerrar
+sesión, etc).
+
+\`\`\`tsx
+<AppBarUserMenu
+  user={{ name: 'Andrea', email: 'a@soyfri.com' }}
+  items={[
+    { label: 'Perfil', icon: <PersonIcon />, onClick: goToProfile },
+    { label: 'Cerrar sesión', icon: <LogoutIcon />, onClick: logout, danger: true, dividerBefore: true },
+  ]}
+/>
+\`\`\``,methods:[],displayName:"AppBarUserMenu",props:{user:{required:!1,tsType:{name:"AppBarUserMenuUser"},description:"Datos del usuario a mostrar."},items:{required:!0,tsType:{name:"Array",elements:[{name:"AppBarUserMenuItem"}],raw:"AppBarUserMenuItem[]"},description:"Items del menú."},hideUserHeader:{required:!1,tsType:{name:"boolean"},description:"Si `true`, oculta la fila con nombre + email en el tope del menú.\nDefault: `false`.",defaultValue:{value:"false",computed:!1}},triggerTooltip:{required:!1,tsType:{name:"string"},description:'Tooltip del trigger. Default: "Cuenta".',defaultValue:{value:"'Cuenta'",computed:!1}},avatarSize:{required:!1,tsType:{name:"number"},description:"Tamaño del Avatar en px. Default: 36.",defaultValue:{value:"36",computed:!1}},menuSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del Paper del Menu."},triggerSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del trigger (IconButton)."},className:{required:!1,tsType:{name:"string"},description:""}}};const Ar={title:"Components/AppBar",component:x,tags:["autodocs"],parameters:{layout:"fullscreen",docs:{description:{component:"AppBar (header superior) pensado como shell compositivo. El consumer arma su contenido con los sub-componentes `AppBarBrand`, `AppBarMenuToggle` y `AppBarUserMenu`, además de cualquier acción custom. Reemplaza el header de Metronic."}}},argTypes:{position:{control:"select",options:["fixed","sticky","static","absolute","relative"]},color:{control:"select",options:["default","primary","secondary","transparent","inherit"]},elevation:{control:{type:"number",min:0,max:24,step:1}},height:{control:{type:"number",min:48,max:96,step:4}}}},b=()=>e.jsx(u,{sx:{width:32,height:32,borderRadius:1,display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"primary.main",color:"primary.contrastText",fontWeight:700,fontSize:14},children:"F"}),H=()=>e.jsxs(u,{sx:{p:3},children:[e.jsx(g,{variant:"h5",gutterBottom:!0,children:"Contenido de la página"}),e.jsx(g,{variant:"body2",color:"text.secondary",sx:{mb:2},children:"Este bloque sólo demuestra el layout bajo el AppBar."}),Array.from({length:20}).map((r,a)=>e.jsxs(g,{variant:"body2",sx:{mb:1},children:["Línea ",a+1," — contenido de ejemplo para scroll sticky."]},a))]}),L=[{label:"Mi perfil",icon:e.jsx(ee,{fontSize:"small"}),onClick:()=>console.log("profile")},{label:"Configuración",icon:e.jsx(re,{fontSize:"small"}),onClick:()=>console.log("settings")},{label:"Cerrar sesión",icon:e.jsx(ae,{fontSize:"small"}),onClick:()=>console.log("logout"),danger:!0,dividerBefore:!0}],M={args:{position:"sticky",color:"default",elevation:1,height:64},render:r=>e.jsxs(e.Fragment,{children:[e.jsx(x,{...r,children:e.jsx(B,{logo:e.jsx(b,{}),title:"Afiliaciones",subtitle:"Panel administrativo"})}),e.jsx(H,{})]})},S={render:r=>{const[a,o]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs(x,{...r,onMenuToggle:()=>o(n=>!n),menuOpen:a,children:[e.jsx(z,{}),e.jsx(B,{logo:e.jsx(b,{}),title:"Afiliaciones"})]}),e.jsx(u,{sx:{p:3},children:e.jsxs(g,{variant:"body2",children:["Drawer ",a?"abierto":"cerrado"," — el icono cambia según el estado. Click en el botón hamburguesa para alternar."]})})]})}},k={render:r=>e.jsxs(e.Fragment,{children:[e.jsxs(x,{...r,children:[e.jsx(B,{logo:e.jsx(b,{}),title:"Afiliaciones"}),e.jsx(u,{sx:{flex:1}}),e.jsx(N,{user:{name:"Andrea Pineda",email:"andrea@soyfri.com"},items:L})]}),e.jsx(H,{})]})},I={render:r=>{const[a,o]=f.useState(!0);return e.jsxs(e.Fragment,{children:[e.jsxs(x,{...r,onMenuToggle:()=>o(n=>!n),menuOpen:a,children:[e.jsx(z,{}),e.jsx(B,{logo:e.jsx(b,{}),title:"Afiliaciones",subtitle:"Panel administrativo",onClick:()=>console.log("go home")}),e.jsx(u,{sx:{flex:1}}),e.jsx(w,{title:"Notificaciones",arrow:!0,children:e.jsx(D,{color:"inherit",children:e.jsx(Z,{})})}),e.jsx(w,{title:"Ayuda",arrow:!0,children:e.jsx(D,{color:"inherit",children:e.jsx(be,{})})}),e.jsx(N,{user:{name:"Andrea Pineda",email:"andrea@soyfri.com"},items:L})]}),e.jsx(H,{})]})}},C={args:{color:"transparent",elevation:0},render:r=>e.jsxs(u,{sx:{minHeight:"100vh",background:"linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 50%, #fff5f5 100%)"},children:[e.jsxs(x,{...r,children:[e.jsx(B,{logo:e.jsx(b,{}),title:"Afiliaciones"}),e.jsx(u,{sx:{flex:1}}),e.jsx(ue,{variant:"contained",color:"primary",size:"small",children:"Iniciar sesión"})]}),e.jsxs(u,{sx:{p:3},children:[e.jsx(g,{variant:"h5",children:"Landing page transparente"}),e.jsx(g,{variant:"body2",color:"text.secondary",children:"Sin sombra, con borde sutil — útil para headers sobre hero sections."})]})]})},q={args:{color:"primary"},render:r=>{const[a,o]=f.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsxs(x,{...r,onMenuToggle:()=>o(n=>!n),menuOpen:a,children:[e.jsx(z,{}),e.jsx(Ae,{sx:{mr:1}}),e.jsx(g,{variant:"h6",sx:{fontWeight:700},children:"Dashboard"}),e.jsx(u,{sx:{flex:1}}),e.jsx(N,{user:{name:"Andrea Pineda",email:"andrea@soyfri.com"},items:L})]}),e.jsx(H,{})]})}};M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+  args: {
+    position: 'sticky',
+    color: 'default',
+    elevation: 1,
+    height: 64
+  },
+  render: args => <>
+      <AppBar {...args}>
+        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" subtitle="Panel administrativo" />
+      </AppBar>
+      <SampleBody />
+    </>
+}`,...M.parameters?.docs?.source}}};S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <AppBar {...args} onMenuToggle={() => setOpen(value => !value)} menuOpen={open}>
+          <AppBarMenuToggle />
+          <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        </AppBar>
+        <Box sx={{
+        p: 3
+      }}>
+          <Typography variant="body2">
+            Drawer {open ? 'abierto' : 'cerrado'} — el icono cambia según el
+            estado. Click en el botón hamburguesa para alternar.
+          </Typography>
+        </Box>
+      </>;
+  }
+}`,...S.parameters?.docs?.source}}};k.parameters={...k.parameters,docs:{...k.parameters?.docs,source:{originalSource:`{
+  render: args => <>
+      <AppBar {...args}>
+        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        <Box sx={{
+        flex: 1
+      }} />
+        <AppBarUserMenu user={{
+        name: 'Andrea Pineda',
+        email: 'andrea@soyfri.com'
+      }} items={userMenuItems} />
+      </AppBar>
+      <SampleBody />
+    </>
+}`,...k.parameters?.docs?.source}}};I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
+  render: args => {
+    const [open, setOpen] = useState(true);
+    return <>
+        <AppBar {...args} onMenuToggle={() => setOpen(value => !value)} menuOpen={open}>
+          <AppBarMenuToggle />
+          <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" subtitle="Panel administrativo" onClick={() => console.log('go home')} />
+          <Box sx={{
+          flex: 1
+        }} />
+          <Tooltip title="Notificaciones" arrow>
+            <IconButton color="inherit">
+              <NotificationsIcon />
+            </IconButton>
+          </Tooltip>
+          <Tooltip title="Ayuda" arrow>
+            <IconButton color="inherit">
+              <HelpOutlineIcon />
+            </IconButton>
+          </Tooltip>
+          <AppBarUserMenu user={{
+          name: 'Andrea Pineda',
+          email: 'andrea@soyfri.com'
+        }} items={userMenuItems} />
+        </AppBar>
+        <SampleBody />
+      </>;
+  }
+}`,...I.parameters?.docs?.source}}};C.parameters={...C.parameters,docs:{...C.parameters?.docs,source:{originalSource:`{
+  args: {
+    color: 'transparent',
+    elevation: 0
+  },
+  render: args => <Box sx={{
+    minHeight: '100vh',
+    background: 'linear-gradient(135deg, #f0f4ff 0%, #e6f7ff 50%, #fff5f5 100%)'
+  }}>
+      <AppBar {...args}>
+        <AppBarBrand logo={<SampleLogo />} title="Afiliaciones" />
+        <Box sx={{
+        flex: 1
+      }} />
+        <Button variant="contained" color="primary" size="small">
+          Iniciar sesión
+        </Button>
+      </AppBar>
+      <Box sx={{
+      p: 3
+    }}>
+        <Typography variant="h5">Landing page transparente</Typography>
+        <Typography variant="body2" color="text.secondary">
+          Sin sombra, con borde sutil — útil para headers sobre hero sections.
+        </Typography>
+      </Box>
+    </Box>
+}`,...C.parameters?.docs?.source}}};q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  args: {
+    color: 'primary'
+  },
+  render: args => {
+    const [open, setOpen] = useState(false);
+    return <>
+        <AppBar {...args} onMenuToggle={() => setOpen(value => !value)} menuOpen={open}>
+          <AppBarMenuToggle />
+          <DashboardIcon sx={{
+          mr: 1
+        }} />
+          <Typography variant="h6" sx={{
+          fontWeight: 700
+        }}>
+            Dashboard
+          </Typography>
+          <Box sx={{
+          flex: 1
+        }} />
+          <AppBarUserMenu user={{
+          name: 'Andrea Pineda',
+          email: 'andrea@soyfri.com'
+        }} items={userMenuItems} />
+        </AppBar>
+        <SampleBody />
+      </>;
+  }
+}`,...q.parameters?.docs?.source}}};const Tr=["BasicHeader","WithMenuToggle","WithUserMenu","CompleteDashboardHeader","TransparentVariant","PrimaryColorWithMenu"];export{M as BasicHeader,I as CompleteDashboardHeader,q as PrimaryColorWithMenu,C as TransparentVariant,S as WithMenuToggle,k as WithUserMenu,Tr as __namedExportsOrder,Ar as default};