@soyfri/shared-library 2.0.0-beta.17 → 2.0.0-beta.18

package/storybook-static/assets/ActionMenu-EynP8yU1.js

@@ -0,0 +1,19 @@
+import{j as t}from"./jsx-runtime-D_zvdyIk.js";import{c as j}from"./createSvgIcon-D_Gca4vA.js";import{r as M,R as i}from"./iframe-BAJnc_4n.js";import{M as T}from"./MoreVert-BoIVG4gh.js";import{T as z}from"./Tooltip-DbnHUxNj.js";import{I as k}from"./IconButton-9OYSTH58.js";import{M as E}from"./Menu-ClzfjLc3.js";import{M as q}from"./MenuItem-iU6tAqJI.js";import{L as A}from"./ListItemIcon-hca6xN79.js";import{L as C}from"./ListItemText-BFLAwLdl.js";import{D as w}from"./Divider-BbCj9wT4.js";const F=j(t.jsx("path",{d:"M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"}));function D({items:h,trigger:r,triggerTooltip:s="Acciones",anchorOrigin:f={vertical:"bottom",horizontal:"right"},transformOrigin:g={vertical:"top",horizontal:"right"},menuSx:v,disabled:o=!1,className:b}){const[c,m]=M.useState(null),x=!!c,l=e=>{o||(e.stopPropagation(),m(e.currentTarget))},u=()=>m(null),y=(e,n)=>{e.stopPropagation(),n.onClick?.(e),u()},I=r?i.isValidElement(r)?i.cloneElement(r,{onClick:l,disabled:o}):t.jsx("span",{onClick:l,children:r}):t.jsx(z,{title:s,arrow:!0,children:t.jsx("span",{children:t.jsx(k,{size:"small",onClick:l,disabled:o,"aria-label":s,children:t.jsx(T,{fontSize:"small"})})})});return t.jsxs("span",{className:b,children:[I,t.jsx(E,{anchorEl:c,open:x,onClose:u,anchorOrigin:f,transformOrigin:g,slotProps:{paper:{sx:{minWidth:180,...v}}},children:h.map((e,n)=>{const p=e.key??`${String(e.label)}-${n}`,d=t.jsxs(q,{disabled:e.disabled,onClick:a=>y(a,e),sx:a=>({color:e.danger?a.palette.error.main:"inherit","& .MuiListItemIcon-root":{color:e.danger?a.palette.error.main:"inherit",minWidth:32}}),children:[e.icon&&t.jsx(A,{children:e.icon}),t.jsx(C,{primary:e.label})]},p);return e.dividerBefore&&n>0?t.jsxs(i.Fragment,{children:[t.jsx(w,{}),d]},`${p}-frag`):d})})]})}D.__docgenInfo={description:`Menú de acciones compacto, pensado para celdas de tabla y cabeceras.
+Reemplaza los patrones \`<Dropdown>\` de react-bootstrap.
+
+\`\`\`tsx
+<ActionMenu
+  items={[
+    { label: 'Editar', icon: <EditIcon />, onClick: handleEdit },
+    { label: 'Duplicar', icon: <CopyIcon />, onClick: handleDup },
+    { label: 'Eliminar', icon: <TrashIcon />, onClick: handleDel, danger: true, dividerBefore: true },
+  ]}
+/>
+\`\`\``,methods:[],displayName:"ActionMenu",props:{items:{required:!0,tsType:{name:"Array",elements:[{name:"ActionMenuItem"}],raw:"ActionMenuItem[]"},description:"Lista de items del menú."},trigger:{required:!1,tsType:{name:"ReactNode"},description:`Elemento trigger. Si no se provee, se renderiza un IconButton con icono
+de tres puntos (MoreVertIcon) — el patrón típico de celda de tabla.`},triggerTooltip:{required:!1,tsType:{name:"string"},description:'Texto de tooltip sobre el trigger default. Default: "Acciones".',defaultValue:{value:"'Acciones'",computed:!1}},anchorOrigin:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  vertical: 'top' | 'center' | 'bottom';
+  horizontal: 'left' | 'center' | 'right';
+}`,signature:{properties:[{key:"vertical",value:{name:"union",raw:"'top' | 'center' | 'bottom'",elements:[{name:"literal",value:"'top'"},{name:"literal",value:"'center'"},{name:"literal",value:"'bottom'"}],required:!0}},{key:"horizontal",value:{name:"union",raw:"'left' | 'center' | 'right'",elements:[{name:"literal",value:"'left'"},{name:"literal",value:"'center'"},{name:"literal",value:"'right'"}],required:!0}}]}},description:"Anchor origin del menu. Default: { vertical: 'bottom', horizontal: 'right' }.",defaultValue:{value:"{ vertical: 'bottom', horizontal: 'right' }",computed:!1}},transformOrigin:{required:!1,tsType:{name:"signature",type:"object",raw:`{
+  vertical: 'top' | 'center' | 'bottom';
+  horizontal: 'left' | 'center' | 'right';
+}`,signature:{properties:[{key:"vertical",value:{name:"union",raw:"'top' | 'center' | 'bottom'",elements:[{name:"literal",value:"'top'"},{name:"literal",value:"'center'"},{name:"literal",value:"'bottom'"}],required:!0}},{key:"horizontal",value:{name:"union",raw:"'left' | 'center' | 'right'",elements:[{name:"literal",value:"'left'"},{name:"literal",value:"'center'"},{name:"literal",value:"'right'"}],required:!0}}]}},description:"Transform origin del menu. Default: { vertical: 'top', horizontal: 'right' }.",defaultValue:{value:"{ vertical: 'top', horizontal: 'right' }",computed:!1}},menuSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx del Menu (Paper interno)."},disabled:{required:!1,tsType:{name:"boolean"},description:"Deshabilita el trigger entero.",defaultValue:{value:"false",computed:!1}},className:{required:!1,tsType:{name:"string"},description:""}}};export{D as A,F as E};

package/storybook-static/assets/ActionMenu.stories-DqSqRGix.js

@@ -0,0 +1,185 @@
+import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{f as o}from"./index-B1tlhOpe.js";import{A as C,E as r}from"./ActionMenu-EynP8yU1.js";import{C as u}from"./ContentCopy-BfLTDb10.js";import{D as m}from"./Delete-D2SMMmIA.js";import{c as p}from"./createSvgIcon-D_Gca4vA.js";import{B as x}from"./Button-DBpqmVB_.js";import{P as h}from"./Paper-SwQBhqI7.js";import{T as j,a as z,b,c as i,d as S}from"./TableRow-CS88-1HF.js";import{C as E}from"./Chip-C3vKPpzR.js";import"./iframe-BAJnc_4n.js";import"./preload-helper-PPVm8Dsz.js";import"./MoreVert-BoIVG4gh.js";import"./Tooltip-DbnHUxNj.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./useSlotProps-C0uMfuBt.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useTheme-BmOJK7ra.js";import"./extendSxProp-CEpa30hT.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"./IconButton-9OYSTH58.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./ButtonBase-qyaMEhe4.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./CircularProgress-DC7ZNWwl.js";import"./Menu-ClzfjLc3.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./mergeSlotProps-B0UBKBMe.js";import"./Modal-3okp9H2i.js";import"./Fade-Ll96CvH8.js";import"./MenuItem-iU6tAqJI.js";import"./listItemTextClasses-CC_rwJam.js";import"./ListItemIcon-hca6xN79.js";import"./ListItemText-BFLAwLdl.js";import"./Typography-BgntX2Ep.js";import"./Divider-BbCj9wT4.js";const f=p(e.jsx("path",{d:"M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5M12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"})),I=p(e.jsx("path",{d:"M5 20h14v-2H5zM19 9h-4V3H9v6H5l7 7z"})),k=p(e.jsx("path",{d:"M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"})),T=p(e.jsx("path",{d:"M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"})),ze={title:"Components/ActionMenu",component:C,tags:["autodocs"],parameters:{docs:{description:{component:"Menú de acciones compacto pensado para celdas de tabla, cabeceras y cualquier lugar donde hagan falta acciones secundarias detrás de un trigger. Reemplaza los patrones `<Dropdown>` de react-bootstrap."}}}},t={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Ver detalle",icon:e.jsx(f,{fontSize:"small"}),onClick:o()}]},parameters:{docs:{description:{story:"Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick."}}}},l={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0,dividerBefore:!0}]},parameters:{docs:{description:{story:"Item final marcado como `danger` (pintado en rojo) con `dividerBefore: true` para separarlo visualmente del resto. Patrón típico para acciones destructivas."}}}},n={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Exportar",icon:e.jsx(I,{fontSize:"small"}),onClick:o(),disabled:!0},{label:"Compartir",icon:e.jsx(k,{fontSize:"small"}),onClick:o(),disabled:!0}]},parameters:{docs:{description:{story:"Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó)."}}}},s={args:{items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Duplicar",icon:e.jsx(u,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0}],trigger:e.jsx(x,{variant:"outlined",startIcon:e.jsx(T,{}),children:"Más"})},parameters:{docs:{description:{story:"El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El `onClick` del menú se inyecta automáticamente al trigger clonado."}}}},c={render:()=>{const g=[{id:1,name:"Comercio A",status:"Activo"},{id:2,name:"Comercio B",status:"Pendiente"},{id:3,name:"Comercio C",status:"Suspendido"}];return e.jsx(h,{sx:{maxWidth:720},children:e.jsxs(j,{size:"small",children:[e.jsx(z,{children:e.jsxs(b,{children:[e.jsx(i,{children:"ID"}),e.jsx(i,{children:"Comercio"}),e.jsx(i,{children:"Estado"}),e.jsx(i,{align:"right",children:"Acciones"})]})}),e.jsx(S,{children:g.map(a=>e.jsxs(b,{hover:!0,children:[e.jsx(i,{children:a.id}),e.jsx(i,{children:a.name}),e.jsx(i,{children:e.jsx(E,{label:a.status,size:"small",color:a.status==="Activo"?"success":a.status==="Pendiente"?"warning":"error"})}),e.jsx(i,{align:"right",children:e.jsx(C,{items:[{label:"Ver detalle",icon:e.jsx(f,{fontSize:"small"}),onClick:o(()=>console.log("Ver",a.id))},{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o(()=>console.log("Editar",a.id))},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(()=>console.log("Eliminar",a.id)),danger:!0,dividerBefore:!0}]})})]},a.id))})]})})},parameters:{docs:{description:{story:"Caso de uso principal: un `ActionMenu` por cada fila de una tabla. Reemplaza exactamente el patrón `DropDownActions` + `react-bootstrap Dropdown` usado hoy en Afiliaciones."}}}},d={args:{disabled:!0,items:[{label:"Editar",icon:e.jsx(r,{fontSize:"small"}),onClick:o()},{label:"Eliminar",icon:e.jsx(m,{fontSize:"small"}),onClick:o(),danger:!0}]},parameters:{docs:{description:{story:"Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando `disabled`."}}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Ver detalle',
+      icon: <VisibilityIcon fontSize="small" />,
+      onClick: fn()
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Menú básico con trigger de 3 puntos (icono por defecto). Cada item tiene label + icono + onClick.'
+      }
+    }
+  }
+}`,...t.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true,
+      dividerBefore: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Item final marcado como \`danger\` (pintado en rojo) con \`dividerBefore: true\` para separarlo visualmente del resto. Patrón típico para acciones destructivas.'
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Exportar',
+      icon: <DownloadIcon fontSize="small" />,
+      onClick: fn(),
+      disabled: true
+    }, {
+      label: 'Compartir',
+      icon: <ShareIcon fontSize="small" />,
+      onClick: fn(),
+      disabled: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Items deshabilitados condicionalmente — útil cuando una acción no aplica al estado actual del row (ej. exportar un recurso que aún no se procesó).'
+      }
+    }
+  }
+}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Duplicar',
+      icon: <ContentCopyIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true
+    }],
+    trigger: <Button variant="outlined" startIcon={<MoreHorizIcon />}>
+        Más
+      </Button>
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'El trigger por defecto es un IconButton de 3 puntos, pero podés pasar cualquier nodo (botón, chip, icono custom). El \`onClick\` del menú se inyecta automáticamente al trigger clonado.'
+      }
+    }
+  }
+}`,...s.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const rows = [{
+      id: 1,
+      name: 'Comercio A',
+      status: 'Activo'
+    }, {
+      id: 2,
+      name: 'Comercio B',
+      status: 'Pendiente'
+    }, {
+      id: 3,
+      name: 'Comercio C',
+      status: 'Suspendido'
+    }];
+    return <Paper sx={{
+      maxWidth: 720
+    }}>
+        <Table size="small">
+          <TableHead>
+            <TableRow>
+              <TableCell>ID</TableCell>
+              <TableCell>Comercio</TableCell>
+              <TableCell>Estado</TableCell>
+              <TableCell align="right">Acciones</TableCell>
+            </TableRow>
+          </TableHead>
+          <TableBody>
+            {rows.map(row => <TableRow key={row.id} hover>
+                <TableCell>{row.id}</TableCell>
+                <TableCell>{row.name}</TableCell>
+                <TableCell>
+                  <Chip label={row.status} size="small" color={row.status === 'Activo' ? 'success' : row.status === 'Pendiente' ? 'warning' : 'error'} />
+                </TableCell>
+                <TableCell align="right">
+                  <ActionMenu items={[{
+                label: 'Ver detalle',
+                icon: <VisibilityIcon fontSize="small" />,
+                onClick: fn(() => console.log('Ver', row.id))
+              }, {
+                label: 'Editar',
+                icon: <EditIcon fontSize="small" />,
+                onClick: fn(() => console.log('Editar', row.id))
+              }, {
+                label: 'Eliminar',
+                icon: <DeleteIcon fontSize="small" />,
+                onClick: fn(() => console.log('Eliminar', row.id)),
+                danger: true,
+                dividerBefore: true
+              }]} />
+                </TableCell>
+              </TableRow>)}
+          </TableBody>
+        </Table>
+      </Paper>;
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Caso de uso principal: un \`ActionMenu\` por cada fila de una tabla. Reemplaza exactamente el patrón \`DropDownActions\` + \`react-bootstrap Dropdown\` usado hoy en Afiliaciones.'
+      }
+    }
+  }
+}`,...c.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    disabled: true,
+    items: [{
+      label: 'Editar',
+      icon: <EditIcon fontSize="small" />,
+      onClick: fn()
+    }, {
+      label: 'Eliminar',
+      icon: <DeleteIcon fontSize="small" />,
+      onClick: fn(),
+      danger: true
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cuando el row o la acción no tiene permisos, se puede deshabilitar el trigger entero pasando \`disabled\`.'
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};const Se=["Default","WithDangerItem","WithDisabledItems","CustomTrigger","InsideTableCell","DisabledTrigger"];export{s as CustomTrigger,t as Default,d as DisabledTrigger,c as InsideTableCell,l as WithDangerItem,n as WithDisabledItems,Se as __namedExportsOrder,ze as default};

package/storybook-static/assets/Alert-3zvTPc0p.js

@@ -0,0 +1 @@
+import{r as V}from"./iframe-BAJnc_4n.js";import{a as Z,g as D,u as q,s as d,c as G,b as v,d as J,m as K}from"./DefaultPropsProvider-BGoQxtDa.js";import{u as n}from"./useSlot-b6pXgp5_.js";import{c as f}from"./createSimplePaletteValueFilter-bm0fmN_7.js";import{c as u}from"./createSvgIcon-D_Gca4vA.js";import{j as e}from"./jsx-runtime-D_zvdyIk.js";import{C as Q}from"./Close-Cy8nELYU.js";import{I as X}from"./IconButton-9OYSTH58.js";import{P as Y}from"./Paper-SwQBhqI7.js";function _(o){return D("MuiAlert",o)}const M=Z("MuiAlert",["root","action","icon","message","filled","colorSuccess","colorInfo","colorWarning","colorError","filledSuccess","filledInfo","filledWarning","filledError","outlined","outlinedSuccess","outlinedInfo","outlinedWarning","outlinedError","standard","standardSuccess","standardInfo","standardWarning","standardError"]),oo=u(e.jsx("path",{d:"M20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4C12.76,4 13.5,4.11 14.2, 4.31L15.77,2.74C14.61,2.26 13.34,2 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0, 0 22,12M7.91,10.08L6.5,11.5L11,16L21,6L19.59,4.58L11,13.17L7.91,10.08Z"})),to=u(e.jsx("path",{d:"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"})),eo=u(e.jsx("path",{d:"M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"})),so=u(e.jsx("path",{d:"M11,9H13V7H11M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20, 12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10, 10 0 0,0 12,2M11,17H13V11H11V17Z"})),ro=o=>{const{variant:s,color:r,severity:t,classes:i}=o,g={root:["root",`color${v(r||t)}`,`${s}${v(r||t)}`,`${s}`],icon:["icon"],message:["message"],action:["action"]};return J(g,_,i)},lo=d(Y,{name:"MuiAlert",slot:"Root",overridesResolver:(o,s)=>{const{ownerState:r}=o;return[s.root,s[r.variant],s[`${r.variant}${v(r.color||r.severity)}`]]}})(K(({theme:o})=>{const s=o.palette.mode==="light"?o.darken:o.lighten,r=o.palette.mode==="light"?o.lighten:o.darken;return{...o.typography.body2,backgroundColor:"transparent",display:"flex",padding:"6px 16px",variants:[...Object.entries(o.palette).filter(f(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"standard"},style:{color:o.vars?o.vars.palette.Alert[`${t}Color`]:s(o.palette[t].light,.6),backgroundColor:o.vars?o.vars.palette.Alert[`${t}StandardBg`]:r(o.palette[t].light,.9),[`& .${M.icon}`]:o.vars?{color:o.vars.palette.Alert[`${t}IconColor`]}:{color:o.palette[t].main}}})),...Object.entries(o.palette).filter(f(["light"])).map(([t])=>({props:{colorSeverity:t,variant:"outlined"},style:{color:o.vars?o.vars.palette.Alert[`${t}Color`]:s(o.palette[t].light,.6),border:`1px solid ${(o.vars||o).palette[t].light}`,[`& .${M.icon}`]:o.vars?{color:o.vars.palette.Alert[`${t}IconColor`]}:{color:o.palette[t].main}}})),...Object.entries(o.palette).filter(f(["dark"])).map(([t])=>({props:{colorSeverity:t,variant:"filled"},style:{fontWeight:o.typography.fontWeightMedium,...o.vars?{color:o.vars.palette.Alert[`${t}FilledColor`],backgroundColor:o.vars.palette.Alert[`${t}FilledBg`]}:{backgroundColor:o.palette.mode==="dark"?o.palette[t].dark:o.palette[t].main,color:o.palette.getContrastText(o.palette[t].main)}}}))]}})),ao=d("div",{name:"MuiAlert",slot:"Icon"})({marginRight:12,padding:"7px 0",display:"flex",fontSize:22,opacity:.9}),no=d("div",{name:"MuiAlert",slot:"Message"})({padding:"8px 0",minWidth:0,overflow:"auto"}),io=d("div",{name:"MuiAlert",slot:"Action"})({display:"flex",alignItems:"flex-start",padding:"4px 0 0 16px",marginLeft:"auto",marginRight:-8}),j={success:e.jsx(oo,{fontSize:"inherit"}),warning:e.jsx(to,{fontSize:"inherit"}),error:e.jsx(eo,{fontSize:"inherit"}),info:e.jsx(so,{fontSize:"inherit"})},Ao=V.forwardRef(function(s,r){const t=q({props:s,name:"MuiAlert"}),{action:i,children:g,className:P,closeText:m="Close",color:C,components:x={},componentsProps:$={},icon:A,iconMapping:z=j,onClose:S,role:b="alert",severity:c="success",slotProps:L={},slots:k={},variant:h="standard",...B}=t,l={...t,color:C,severity:c,variant:h,colorSeverity:C||c},p=ro(l),a={slots:{closeButton:x.CloseButton,closeIcon:x.CloseIcon,...k},slotProps:{...$,...L}},[R,T]=n("root",{ref:r,shouldForwardComponentProp:!0,className:G(p.root,P),elementType:lo,externalForwardedProps:{...a,...B},ownerState:l,additionalProps:{role:b,elevation:0}}),[w,E]=n("icon",{className:p.icon,elementType:ao,externalForwardedProps:a,ownerState:l}),[O,W]=n("message",{className:p.message,elementType:no,externalForwardedProps:a,ownerState:l}),[y,I]=n("action",{className:p.action,elementType:io,externalForwardedProps:a,ownerState:l}),[F,H]=n("closeButton",{elementType:X,externalForwardedProps:a,ownerState:l}),[N,U]=n("closeIcon",{elementType:Q,externalForwardedProps:a,ownerState:l});return e.jsxs(R,{...T,children:[A!==!1?e.jsx(w,{...E,children:A||z[c]||j[c]}):null,e.jsx(O,{...W,children:g}),i!=null?e.jsx(y,{...I,children:i}):null,i==null&&S?e.jsx(y,{...I,children:e.jsx(F,{size:"small","aria-label":m,title:m,color:"inherit",onClick:S,...H,children:e.jsx(N,{fontSize:"small",...U})})}):null]})});export{Ao as A};

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};