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

package/storybook-static/assets/Avatar-NbFfkZws.js

@@ -0,0 +1 @@
+import{r as y}from"./iframe-BAJnc_4n.js";import{g as M,a as N,u as T,s as b,c as z,d as U,m as E}from"./DefaultPropsProvider-BGoQxtDa.js";import{c as q}from"./createSvgIcon-D_Gca4vA.js";import{j as u}from"./jsx-runtime-D_zvdyIk.js";import{u as v}from"./useSlot-b6pXgp5_.js";const L=q(u.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"}));function B(o){return M("MuiAvatar",o)}N("MuiAvatar",["root","colorDefault","circular","rounded","square","img","fallback"]);const H=o=>{const{classes:t,variant:r,colorDefault:a}=o;return U({root:["root",r,a&&"colorDefault"],img:["img"],fallback:["fallback"]},B,t)},G=b("div",{name:"MuiAvatar",slot:"Root",overridesResolver:(o,t)=>{const{ownerState:r}=o;return[t.root,t[r.variant],r.colorDefault&&t.colorDefault]}})(E(({theme:o})=>({position:"relative",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,width:40,height:40,fontFamily:o.typography.fontFamily,fontSize:o.typography.pxToRem(20),lineHeight:1,borderRadius:"50%",overflow:"hidden",userSelect:"none",variants:[{props:{variant:"rounded"},style:{borderRadius:(o.vars||o).shape.borderRadius}},{props:{variant:"square"},style:{borderRadius:0}},{props:{colorDefault:!0},style:{color:(o.vars||o).palette.background.default,...o.vars?{backgroundColor:o.vars.palette.Avatar.defaultBg}:{backgroundColor:o.palette.grey[400],...o.applyStyles("dark",{backgroundColor:o.palette.grey[600]})}}}]}))),J=b("img",{name:"MuiAvatar",slot:"Img"})({width:"100%",height:"100%",textAlign:"center",objectFit:"cover",color:"transparent",textIndent:1e4}),K=b(L,{name:"MuiAvatar",slot:"Fallback"})({width:"75%",height:"75%"});function O({crossOrigin:o,referrerPolicy:t,src:r,srcSet:a}){const[n,s]=y.useState(!1);return y.useEffect(()=>{if(!r&&!a)return;s(!1);let c=!0;const e=new Image;return e.onload=()=>{c&&s("loaded")},e.onerror=()=>{c&&s("error")},e.crossOrigin=o,e.referrerPolicy=t,e.src=r,a&&(e.srcset=a),()=>{c=!1}},[o,t,r,a]),n}const Z=y.forwardRef(function(t,r){const a=T({props:t,name:"MuiAvatar"}),{alt:n,children:s,className:c,component:e="div",slots:p={},slotProps:i={},imgProps:x,sizes:A,src:f,srcSet:m,variant:P="circular",...S}=a;let d=null;const l={...a,component:e,variant:P},w=O({...x,...typeof i.img=="function"?i.img(l):i.img,src:f,srcSet:m}),h=f||m,k=h&&w!=="error";l.colorDefault=!k,delete l.ownerState;const g=H(l),[F,R]=v("root",{ref:r,className:z(g.root,c),elementType:G,externalForwardedProps:{slots:p,slotProps:i,component:e,...S},ownerState:l}),[C,I]=v("img",{className:g.img,elementType:J,externalForwardedProps:{slots:p,slotProps:{img:{...x,...i.img}}},additionalProps:{alt:n,src:f,srcSet:m,sizes:A},ownerState:l}),[j,D]=v("fallback",{className:g.fallback,elementType:K,externalForwardedProps:{slots:p,slotProps:i},shouldForwardComponentProp:!0,ownerState:l});return k?d=u.jsx(C,{...I}):s||s===0?d=s:h&&n?d=n[0]:d=u.jsx(j,{...D}),u.jsx(F,{...R,children:d})});export{Z as A};

package/storybook-static/assets/Avatar.stories-CwOYCzqU.js

@@ -0,0 +1,390 @@
+import{j as s}from"./jsx-runtime-D_zvdyIk.js";import{r as P,R}from"./iframe-BAJnc_4n.js";import{A as $}from"./AccountCircle-BDZFsbTw.js";import{B as y}from"./Box-BnhEcfFm.js";import{T as J}from"./Typography-BgntX2Ep.js";import{A as V}from"./Avatar-NbFfkZws.js";import{T as H}from"./Tooltip-DbnHUxNj.js";import"./preload-helper-PPVm8Dsz.js";import"./createSvgIcon-D_Gca4vA.js";import"./DefaultPropsProvider-BGoQxtDa.js";import"./extendSxProp-CEpa30hT.js";import"./emotion-react.browser.esm--g-C9cX9.js";import"./createSimplePaletteValueFilter-bm0fmN_7.js";import"./useSlot-b6pXgp5_.js";import"./useForkRef-0ANIrxcF.js";import"./useSlotProps-C0uMfuBt.js";import"./useTheme-BmOJK7ra.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";const K={sm:{px:32,border:2,font:14,overlap:8},md:{px:40,border:2,font:16,overlap:10},lg:{px:56,border:3,font:22,overlap:14},xl:{px:96,border:4,font:36,overlap:20}},Y=e=>typeof e=="number"?{px:e,border:Math.max(2,Math.round(e*.05)),font:Math.round(e*.4),overlap:Math.round(e*.25)}:K[e],A=(e,a)=>{if(!a)return e;const o=Array.isArray(e)?e:[e],i=Array.isArray(a)?a:[a];return[...o,...i]},w=({items:e,type:a,displayedAvatars:o=4,size:i="sm",showText:D=!0,showTooltip:E=!1,sx:B,avatarSx:O,className:I,overlap:C})=>{const[k,M]=P.useState(new Set),L=t=>{M(r=>{const n=new Set(r);return n.add(t),n})};if(!e||e.length===0)return null;const c=Y(i),W=C??c.overlap,b=e.slice(0,o),j={width:c.px,height:c.px,fontSize:c.font,fontWeight:700,border:t=>`${c.border}px solid ${t.palette.background.paper}`,boxSizing:"content-box"},q=(t,r)=>{const n=!!t.imageUrl&&!k.has(r),N=!!t.badge,F={bgcolor:t.backgroundColor??"action.selected",color:t.color??"text.secondary",...r>0&&{marginLeft:`-${W}px`},zIndex:b.length-r},_=A(A(j,F),O),S=s.jsx(V,{"data-testid":"avatar",alt:t.text||"User avatar",src:n?t.imageUrl:void 0,imgProps:{"data-testid":"image",onError:()=>L(r)},sx:_,children:!n&&N?s.jsx("span",{"data-testid":"badge","aria-label":t.text,children:t.badge}):n?null:s.jsx($,{"data-testid":"icon","aria-label":t.text,sx:{width:"100%",height:"100%"}})});return E&&t.text?s.jsx(H,{title:t.text,children:S},r):s.jsx(R.Fragment,{children:S},r)};return s.jsxs(y,{"data-testid":"avatar-container",className:I,sx:A({display:"flex",alignItems:"center",lineHeight:1,width:"fit-content"},B),children:[s.jsx(y,{sx:{display:"flex",alignItems:"center"},children:b.map((t,r)=>q(t,r))}),D&&e[0]?.text&&s.jsxs(J,{"data-testid":"text",variant:"caption",sx:{ml:1,fontSize:"0.75rem",fontWeight:400,color:"text.primary"},children:[a&&e.length===1&&s.jsxs(y,{component:"span","data-testid":"type",sx:{mr:.5},children:[a,":"]}),e[0].text,e.length>1&&` +${e.length-1}`]})]})};w.__docgenInfo={description:"",methods:[],displayName:"Avatar",props:{type:{required:!1,tsType:{name:"string"},description:""},items:{required:!0,tsType:{name:"Array",elements:[{name:"AvatarItem"}],raw:"AvatarItem[]"},description:""},displayedAvatars:{required:!1,tsType:{name:"number"},description:"",defaultValue:{value:"4",computed:!1}},size:{required:!1,tsType:{name:"union",raw:"'sm' | 'md' | 'lg' | 'xl' | number",elements:[{name:"literal",value:"'sm'"},{name:"literal",value:"'md'"},{name:"literal",value:"'lg'"},{name:"literal",value:"'xl'"},{name:"number"}]},description:"",defaultValue:{value:"'sm'",computed:!1}},showText:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"true",computed:!1}},showTooltip:{required:!1,tsType:{name:"boolean"},description:"",defaultValue:{value:"false",computed:!1}},sx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx aplicado al contenedor raíz."},avatarSx:{required:!1,tsType:{name:"SxProps",elements:[{name:"Theme"}],raw:"SxProps<Theme>"},description:"sx aplicado a cada MuiAvatar individual (se mergea sobre los defaults)."},className:{required:!1,tsType:{name:"string"},description:""},overlap:{required:!1,tsType:{name:"number"},description:"Overlap (px) entre avatares cuando hay varios. Default depende del tamaño."}}};const G=`
+import { Avatar } from './Avatar';
+
+export const DefaultAvatarExample = () => (
+    <Avatar
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=1' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=2' },
+        ]}
+    />
+);
+`,Q=`
+import { Avatar } from './Avatar';
+
+export const WithTypeAndTextExample = () => (
+    <Avatar
+        type="Owner"
+        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}
+        showText
+    />
+);
+`,X=`
+import { Avatar } from './Avatar';
+
+export const WithBadgesAndTooltipExample = () => (
+    <Avatar
+        showTooltip
+        items={[
+            { text: 'John D.', badge: 'JD', backgroundColor: '#EF5350', color: '#fff' },
+            { text: 'Alice B.', badge: 'AB', backgroundColor: '#AB47BC', color: '#fff' },
+        ]}
+    />
+);
+`,Z=`
+import { Avatar } from './Avatar';
+
+export const SizeSmallExample = () => (
+    <Avatar
+        size="sm"
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=11' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=12' },
+            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=13' },
+        ]}
+    />
+);
+`,ee=`
+import { Avatar } from './Avatar';
+
+export const SizeMediumExample = () => (
+    <Avatar
+        size="md"
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=21' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=22' },
+            { text: 'User Three', imageUrl: 'https://i.pravatar.cc/150?img=23' },
+        ]}
+    />
+);
+`,te=`
+import { Avatar } from './Avatar';
+
+export const SizeLargeExample = () => (
+    <Avatar
+        size="lg"
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=31' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=32' },
+        ]}
+    />
+);
+`,ae=`
+import { Avatar } from './Avatar';
+
+export const SizeExtraLargeExample = () => (
+    <Avatar
+        size="xl"
+        items={[{ text: 'Maria', imageUrl: 'https://i.pravatar.cc/150?img=5' }]}
+        showText={false}
+    />
+);
+`,re=`
+import { Avatar } from './Avatar';
+
+export const NumericSizeExample = () => (
+    <Avatar
+        size={72}
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=41' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=42' },
+        ]}
+        showText={false}
+    />
+);
+`,se=`
+import { Avatar } from './Avatar';
+
+export const FallbackIconExample = () => (
+    <Avatar
+        items={[
+            { text: 'Without image' },
+            { text: 'Broken image', imageUrl: 'https://example.invalid/broken.png' },
+        ]}
+        showTooltip
+    />
+);
+`,oe=`
+import { Avatar } from './Avatar';
+
+export const DisplayedAvatarsLimitExample = () => (
+    <Avatar
+        displayedAvatars={3}
+        items={[
+            { text: 'User 1', imageUrl: 'https://i.pravatar.cc/150?img=51' },
+            { text: 'User 2', imageUrl: 'https://i.pravatar.cc/150?img=52' },
+            { text: 'User 3', imageUrl: 'https://i.pravatar.cc/150?img=53' },
+            { text: 'User 4', imageUrl: 'https://i.pravatar.cc/150?img=54' },
+            { text: 'User 5', imageUrl: 'https://i.pravatar.cc/150?img=55' },
+        ]}
+    />
+);
+`,ne=`
+import { Avatar } from './Avatar';
+
+export const CustomStylingExample = () => (
+    <Avatar
+        size="md"
+        items={[
+            { text: 'User One', imageUrl: 'https://i.pravatar.cc/150?img=61' },
+            { text: 'User Two', imageUrl: 'https://i.pravatar.cc/150?img=62' },
+        ]}
+        sx={{
+            p: 1,
+            borderRadius: 2,
+            bgcolor: 'action.hover',
+        }}
+        avatarSx={{
+            border: (theme) => '3px solid ' + theme.palette.primary.main,
+        }}
+    />
+);
+`,{within:z,expect:T}=__STORYBOOK_MODULE_TEST__,Le={title:"Components/Avatar",component:w,parameters:{layout:"centered",docs:{description:{component:"Avatar basado en MUI Avatar con soporte para stacking, tooltips, fallback a icono/badge y passthrough de sx. Admite imagen, texto y badge por cada item."}}},tags:["autodocs"],argTypes:{items:{control:"object",description:"Array de `AvatarItem` (text/imageUrl/badge/color/backgroundColor)."},type:{control:"text",description:'Etiqueta que antecede al texto cuando hay un único item (ej. "Owner: Maria").'},displayedAvatars:{control:"number",description:"Número máximo de avatares visibles. El resto se contabiliza como `+N`."},size:{control:"select",options:["sm","md","lg","xl"],description:"Tamaño del avatar. Acepta presets (`sm | md | lg | xl`) o un número libre en px."},showText:{control:"boolean",description:"Muestra el texto al lado del avatar."},showTooltip:{control:"boolean",description:"Muestra el tooltip con `item.text` al hover."},overlap:{control:"number",description:"Overlap en px entre avatares cuando hay varios (override del default por tamaño)."},sx:{control:!1,description:"sx del contenedor raíz. Se mergea sobre los defaults."},avatarSx:{control:!1,description:"sx aplicado a cada MuiAvatar individual (borde, colores, etc)."}}},m={args:{items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=1"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=2"}]},parameters:{docs:{source:{code:G.trim()}}}},p={args:{type:"Owner",items:[{text:"Maria",imageUrl:"https://i.pravatar.cc/150?img=5"}],showText:!0},play:async({canvasElement:e})=>{const a=z(e),o=await a.findByTestId("text"),i=await a.findByTestId("type");T(o).toBeInTheDocument(),T(i).toHaveTextContent("Owner:")},parameters:{docs:{source:{code:Q.trim()}}}},l={args:{showTooltip:!0,items:[{text:"John D.",badge:"JD",backgroundColor:"#EF5350",color:"#fff"},{text:"Alice B.",badge:"AB",backgroundColor:"#AB47BC",color:"#fff"}]},play:async({canvasElement:e})=>{const o=await z(e).findAllByTestId("badge");T(o.length).toBe(2)},parameters:{docs:{source:{code:X.trim()}}}},d={args:{size:"sm",items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=11"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=12"},{text:"User Three",imageUrl:"https://i.pravatar.cc/150?img=13"}]},parameters:{docs:{source:{code:Z.trim()}}}},g={args:{size:"md",items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=21"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=22"},{text:"User Three",imageUrl:"https://i.pravatar.cc/150?img=23"}]},parameters:{docs:{source:{code:ee.trim()}}}},x={args:{size:"lg",items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=31"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=32"}]},parameters:{docs:{source:{code:te.trim()}}}},v={args:{size:"xl",items:[{text:"Maria",imageUrl:"https://i.pravatar.cc/150?img=5"}],showText:!1},parameters:{docs:{source:{code:ae.trim()}}}},u={args:{size:72,items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=41"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=42"}],showText:!1},parameters:{docs:{description:{story:"Pasando un número en `size` se calcula automáticamente el borde, font-size y overlap proporcional."},source:{code:re.trim()}}}},h={args:{showTooltip:!0,items:[{text:"Without image"},{text:"Broken image",imageUrl:"https://example.invalid/broken.png"}]},parameters:{docs:{description:{story:"Cuando no hay imagen (o falla la carga) y no hay badge, cae al icono `AccountCircle`."},source:{code:se.trim()}}}},f={args:{displayedAvatars:3,items:[{text:"User 1",imageUrl:"https://i.pravatar.cc/150?img=51"},{text:"User 2",imageUrl:"https://i.pravatar.cc/150?img=52"},{text:"User 3",imageUrl:"https://i.pravatar.cc/150?img=53"},{text:"User 4",imageUrl:"https://i.pravatar.cc/150?img=54"},{text:"User 5",imageUrl:"https://i.pravatar.cc/150?img=55"}]},parameters:{docs:{description:{story:"Solo se renderizan `displayedAvatars` avatares; el resto se cuenta en el `+N` del texto."},source:{code:oe.trim()}}}},U={args:{size:"md",items:[{text:"User One",imageUrl:"https://i.pravatar.cc/150?img=61"},{text:"User Two",imageUrl:"https://i.pravatar.cc/150?img=62"}],sx:{p:1,borderRadius:2,bgcolor:"action.hover"},avatarSx:{border:e=>`3px solid ${e.palette.primary.main}`}},parameters:{docs:{description:{story:"Demo del passthrough de `sx` (contenedor) y `avatarSx` (cada avatar). El consumidor puede overridear bordes, colores y el layout del wrapper sin tocar el componente."},source:{code:ne.trim()}}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
+  args: {
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=1'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=2'
+    }]
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: DefaultAvatarDefinition.trim()
+      }
+    }
+  }
+}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
+  args: {
+    type: 'Owner',
+    items: [{
+      text: 'Maria',
+      imageUrl: 'https://i.pravatar.cc/150?img=5'
+    }],
+    showText: true
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const text = await canvas.findByTestId('text');
+    const type = await canvas.findByTestId('type');
+    expect(text).toBeInTheDocument();
+    expect(type).toHaveTextContent('Owner:');
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: WithTypeAndTextDefinition.trim()
+      }
+    }
+  }
+}`,...p.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
+  args: {
+    showTooltip: true,
+    items: [{
+      text: 'John D.',
+      badge: 'JD',
+      backgroundColor: '#EF5350',
+      color: '#fff'
+    }, {
+      text: 'Alice B.',
+      badge: 'AB',
+      backgroundColor: '#AB47BC',
+      color: '#fff'
+    }]
+  },
+  play: async ({
+    canvasElement
+  }) => {
+    const canvas = within(canvasElement);
+    const badges = await canvas.findAllByTestId('badge');
+    expect(badges.length).toBe(2);
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: WithBadgesAndTooltipDefinition.trim()
+      }
+    }
+  }
+}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'sm',
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=11'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=12'
+    }, {
+      text: 'User Three',
+      imageUrl: 'https://i.pravatar.cc/150?img=13'
+    }]
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: SizeSmallDefinition.trim()
+      }
+    }
+  }
+}`,...d.parameters?.docs?.source}}};g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'md',
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=21'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=22'
+    }, {
+      text: 'User Three',
+      imageUrl: 'https://i.pravatar.cc/150?img=23'
+    }]
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: SizeMediumDefinition.trim()
+      }
+    }
+  }
+}`,...g.parameters?.docs?.source}}};x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'lg',
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=31'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=32'
+    }]
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: SizeLargeDefinition.trim()
+      }
+    }
+  }
+}`,...x.parameters?.docs?.source}}};v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'xl',
+    items: [{
+      text: 'Maria',
+      imageUrl: 'https://i.pravatar.cc/150?img=5'
+    }],
+    showText: false
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: SizeExtraLargeDefinition.trim()
+      }
+    }
+  }
+}`,...v.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 72,
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=41'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=42'
+    }],
+    showText: false
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Pasando un número en \`size\` se calcula automáticamente el borde, font-size y overlap proporcional.'
+      },
+      source: {
+        code: NumericSizeDefinition.trim()
+      }
+    }
+  }
+}`,...u.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  args: {
+    showTooltip: true,
+    items: [{
+      text: 'Without image'
+    }, {
+      text: 'Broken image',
+      imageUrl: 'https://example.invalid/broken.png'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Cuando no hay imagen (o falla la carga) y no hay badge, cae al icono \`AccountCircle\`.'
+      },
+      source: {
+        code: FallbackIconDefinition.trim()
+      }
+    }
+  }
+}`,...h.parameters?.docs?.source}}};f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`{
+  args: {
+    displayedAvatars: 3,
+    items: [{
+      text: 'User 1',
+      imageUrl: 'https://i.pravatar.cc/150?img=51'
+    }, {
+      text: 'User 2',
+      imageUrl: 'https://i.pravatar.cc/150?img=52'
+    }, {
+      text: 'User 3',
+      imageUrl: 'https://i.pravatar.cc/150?img=53'
+    }, {
+      text: 'User 4',
+      imageUrl: 'https://i.pravatar.cc/150?img=54'
+    }, {
+      text: 'User 5',
+      imageUrl: 'https://i.pravatar.cc/150?img=55'
+    }]
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Solo se renderizan \`displayedAvatars\` avatares; el resto se cuenta en el \`+N\` del texto.'
+      },
+      source: {
+        code: DisplayedAvatarsLimitDefinition.trim()
+      }
+    }
+  }
+}`,...f.parameters?.docs?.source}}};U.parameters={...U.parameters,docs:{...U.parameters?.docs,source:{originalSource:`{
+  args: {
+    size: 'md',
+    items: [{
+      text: 'User One',
+      imageUrl: 'https://i.pravatar.cc/150?img=61'
+    }, {
+      text: 'User Two',
+      imageUrl: 'https://i.pravatar.cc/150?img=62'
+    }],
+    sx: {
+      p: 1,
+      borderRadius: 2,
+      bgcolor: 'action.hover'
+    },
+    avatarSx: {
+      border: theme => \`3px solid \${theme.palette.primary.main}\`
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        story: 'Demo del passthrough de \`sx\` (contenedor) y \`avatarSx\` (cada avatar). El consumidor puede overridear bordes, colores y el layout del wrapper sin tocar el componente.'
+      },
+      source: {
+        code: CustomStylingDefinition.trim()
+      }
+    }
+  }
+}`,...U.parameters?.docs?.source}}};const We=["Default","WithTypeAndText","WithBadgesAndTooltip","SizeSmall","SizeMedium","SizeLarge","SizeExtraLarge","NumericSize","FallbackIcon","DisplayedAvatarsLimit","CustomStyling"];export{U as CustomStyling,m as Default,f as DisplayedAvatarsLimit,h as FallbackIcon,u as NumericSize,v as SizeExtraLarge,x as SizeLarge,g as SizeMedium,d as SizeSmall,l as WithBadgesAndTooltip,p as WithTypeAndText,We as __namedExportsOrder,Le as default};

package/storybook-static/assets/Box-BnhEcfFm.js

@@ -0,0 +1 @@
+import{C as d,D as f,c as h,a as B,E as C,T as N,F as p}from"./DefaultPropsProvider-BGoQxtDa.js";import{r as T}from"./iframe-BAJnc_4n.js";import{j as E}from"./jsx-runtime-D_zvdyIk.js";import{a as g,e as j}from"./extendSxProp-CEpa30hT.js";function y(r={}){const{themeId:t,defaultTheme:m,defaultClassName:a="MuiBox-root",generateClassName:o}=r,n=d("div",{shouldForwardProp:e=>e!=="theme"&&e!=="sx"&&e!=="as"})(f);return T.forwardRef(function(c,x){const s=g(m),{className:l,component:i="div",...u}=j(c);return E.jsx(n,{as:i,ref:x,className:h(l,o?o(a):a),theme:t&&s[t]||s,...u})})}const F=B("MuiBox",["root"]),I=p(),P=y({themeId:N,defaultTheme:I,defaultClassName:F.root,generateClassName:C.generate});export{P as B};

package/storybook-static/assets/Button-D9h7OggD.js

@@ -0,0 +1 @@
+import{j as y}from"./jsx-runtime-D_zvdyIk.js";import{B as R}from"./Button-DBpqmVB_.js";const T=({children:e,variant:a,disabled:t,startIcon:n,endIcon:r,size:i,className:s,onClick:l,loading:o,loadingPosition:d,loadingIndicator:m,color:u,href:c,"data-testid":p,type:v,sx:f})=>y.jsx(R,{disabled:t,variant:a,startIcon:n,endIcon:r,size:i,className:s,onClick:l,loading:o,loadingPosition:d,loadingIndicator:m,sx:{textTransform:"none",...f},disableRipple:!0,disableElevation:!0,color:u,"data-testid":p,href:c,type:v,children:e});T.__docgenInfo={description:"",methods:[],displayName:"Button",props:{children:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},variant:{required:!1,tsType:{name:"union",raw:'"text" | "outlined" | "contained"',elements:[{name:"literal",value:'"text"'},{name:"literal",value:'"outlined"'},{name:"literal",value:'"contained"'}]},description:""},disabled:{required:!1,tsType:{name:"boolean"},description:""},endIcon:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},startIcon:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},size:{required:!1,tsType:{name:"union",raw:'"small" | "medium" | "large"',elements:[{name:"literal",value:'"small"'},{name:"literal",value:'"medium"'},{name:"literal",value:'"large"'}]},description:""},className:{required:!1,tsType:{name:"string"},description:""},onClick:{required:!1,tsType:{name:"signature",type:"function",raw:"(event: React.MouseEvent<HTMLButtonElement>) => void",signature:{arguments:[{type:{name:"ReactMouseEvent",raw:"React.MouseEvent<HTMLButtonElement>",elements:[{name:"HTMLButtonElement"}]},name:"event"}],return:{name:"void"}}},description:""},loading:{required:!1,tsType:{name:"boolean"},description:""},loadingIndicator:{required:!1,tsType:{name:"ReactReactNode",raw:"React.ReactNode"},description:""},loadingPosition:{required:!1,tsType:{name:"union",raw:'"start" | "end" | "center"',elements:[{name:"literal",value:'"start"'},{name:"literal",value:'"end"'},{name:"literal",value:'"center"'}]},description:""},color:{required:!1,tsType:{name:"union",raw:'"primary" | "success" | "error" | "info" | "warning"',elements:[{name:"literal",value:'"primary"'},{name:"literal",value:'"success"'},{name:"literal",value:'"error"'},{name:"literal",value:'"info"'},{name:"literal",value:'"warning"'}]},description:""},href:{required:!1,tsType:{name:"string"},description:""},"data-testid":{required:!1,tsType:{name:"string"},description:""},type:{required:!1,tsType:{name:"union",raw:'"button" | "submit"',elements:[{name:"literal",value:'"button"'},{name:"literal",value:'"submit"'}]},description:""}},composes:["PickButtonProps"]};export{T as B};

package/storybook-static/assets/Button-DBpqmVB_.js

@@ -0,0 +1 @@
+import{r as v}from"./iframe-BAJnc_4n.js";import{a as G,g as A,A as D,u as H,s as x,c as R,b as i,d as q,r as J,m as K}from"./DefaultPropsProvider-BGoQxtDa.js";import{c as Q}from"./createSimplePaletteValueFilter-bm0fmN_7.js";import{j as s}from"./jsx-runtime-D_zvdyIk.js";import{u as X}from"./useId-b4fZxjOL.js";import{B as Y}from"./ButtonBase-qyaMEhe4.js";import{C as Z}from"./CircularProgress-DC7ZNWwl.js";function _(o){return A("MuiButton",o)}const d=G("MuiButton",["root","text","textInherit","textPrimary","textSecondary","textSuccess","textError","textInfo","textWarning","outlined","outlinedInherit","outlinedPrimary","outlinedSecondary","outlinedSuccess","outlinedError","outlinedInfo","outlinedWarning","contained","containedInherit","containedPrimary","containedSecondary","containedSuccess","containedError","containedInfo","containedWarning","disableElevation","focusVisible","disabled","colorInherit","colorPrimary","colorSecondary","colorSuccess","colorError","colorInfo","colorWarning","textSizeSmall","textSizeMedium","textSizeLarge","outlinedSizeSmall","outlinedSizeMedium","outlinedSizeLarge","containedSizeSmall","containedSizeMedium","containedSizeLarge","sizeMedium","sizeSmall","sizeLarge","fullWidth","startIcon","endIcon","icon","iconSizeSmall","iconSizeMedium","iconSizeLarge","loading","loadingWrapper","loadingIconPlaceholder","loadingIndicator","loadingPositionCenter","loadingPositionStart","loadingPositionEnd"]),oo=v.createContext({}),ao=v.createContext(void 0),to=o=>{const{color:a,disableElevation:t,fullWidth:n,size:p,variant:c,loading:u,loadingPosition:f,classes:y}=o,b={root:["root",u&&"loading",c,`${c}${i(a)}`,`size${i(p)}`,`${c}Size${i(p)}`,`color${i(a)}`,t&&"disableElevation",n&&"fullWidth",u&&`loadingPosition${i(f)}`],startIcon:["icon","startIcon",`iconSize${i(p)}`],endIcon:["icon","endIcon",`iconSize${i(p)}`],loadingIndicator:["loadingIndicator"],loadingWrapper:["loadingWrapper"]},S=q(b,_,y);return{...y,...S}},E=[{props:{size:"small"},style:{"& > *:nth-of-type(1)":{fontSize:18}}},{props:{size:"medium"},style:{"& > *:nth-of-type(1)":{fontSize:20}}},{props:{size:"large"},style:{"& > *:nth-of-type(1)":{fontSize:22}}}],no=x(Y,{shouldForwardProp:o=>J(o)||o==="classes",name:"MuiButton",slot:"Root",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.root,a[t.variant],a[`${t.variant}${i(t.color)}`],a[`size${i(t.size)}`],a[`${t.variant}Size${i(t.size)}`],t.color==="inherit"&&a.colorInherit,t.disableElevation&&a.disableElevation,t.fullWidth&&a.fullWidth,t.loading&&a.loading]}})(K(({theme:o})=>{const a=o.palette.mode==="light"?o.palette.grey[300]:o.palette.grey[800],t=o.palette.mode==="light"?o.palette.grey.A100:o.palette.grey[700];return{...o.typography.button,minWidth:64,padding:"6px 16px",border:0,borderRadius:(o.vars||o).shape.borderRadius,transition:o.transitions.create(["background-color","box-shadow","border-color","color"],{duration:o.transitions.duration.short}),"&:hover":{textDecoration:"none"},[`&.${d.disabled}`]:{color:(o.vars||o).palette.action.disabled},variants:[{props:{variant:"contained"},style:{color:"var(--variant-containedColor)",backgroundColor:"var(--variant-containedBg)",boxShadow:(o.vars||o).shadows[2],"&:hover":{boxShadow:(o.vars||o).shadows[4],"@media (hover: none)":{boxShadow:(o.vars||o).shadows[2]}},"&:active":{boxShadow:(o.vars||o).shadows[8]},[`&.${d.focusVisible}`]:{boxShadow:(o.vars||o).shadows[6]},[`&.${d.disabled}`]:{color:(o.vars||o).palette.action.disabled,boxShadow:(o.vars||o).shadows[0],backgroundColor:(o.vars||o).palette.action.disabledBackground}}},{props:{variant:"outlined"},style:{padding:"5px 15px",border:"1px solid currentColor",borderColor:"var(--variant-outlinedBorder, currentColor)",backgroundColor:"var(--variant-outlinedBg)",color:"var(--variant-outlinedColor)",[`&.${d.disabled}`]:{border:`1px solid ${(o.vars||o).palette.action.disabledBackground}`}}},{props:{variant:"text"},style:{padding:"6px 8px",color:"var(--variant-textColor)",backgroundColor:"var(--variant-textBg)"}},...Object.entries(o.palette).filter(Q()).map(([n])=>({props:{color:n},style:{"--variant-textColor":(o.vars||o).palette[n].main,"--variant-outlinedColor":(o.vars||o).palette[n].main,"--variant-outlinedBorder":o.alpha((o.vars||o).palette[n].main,.5),"--variant-containedColor":(o.vars||o).palette[n].contrastText,"--variant-containedBg":(o.vars||o).palette[n].main,"@media (hover: hover)":{"&:hover":{"--variant-containedBg":(o.vars||o).palette[n].dark,"--variant-textBg":o.alpha((o.vars||o).palette[n].main,(o.vars||o).palette.action.hoverOpacity),"--variant-outlinedBorder":(o.vars||o).palette[n].main,"--variant-outlinedBg":o.alpha((o.vars||o).palette[n].main,(o.vars||o).palette.action.hoverOpacity)}}}})),{props:{color:"inherit"},style:{color:"inherit",borderColor:"currentColor","--variant-containedBg":o.vars?o.vars.palette.Button.inheritContainedBg:a,"@media (hover: hover)":{"&:hover":{"--variant-containedBg":o.vars?o.vars.palette.Button.inheritContainedHoverBg:t,"--variant-textBg":o.alpha((o.vars||o).palette.text.primary,(o.vars||o).palette.action.hoverOpacity),"--variant-outlinedBg":o.alpha((o.vars||o).palette.text.primary,(o.vars||o).palette.action.hoverOpacity)}}}},{props:{size:"small",variant:"text"},style:{padding:"4px 5px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"text"},style:{padding:"8px 11px",fontSize:o.typography.pxToRem(15)}},{props:{size:"small",variant:"outlined"},style:{padding:"3px 9px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"outlined"},style:{padding:"7px 21px",fontSize:o.typography.pxToRem(15)}},{props:{size:"small",variant:"contained"},style:{padding:"4px 10px",fontSize:o.typography.pxToRem(13)}},{props:{size:"large",variant:"contained"},style:{padding:"8px 22px",fontSize:o.typography.pxToRem(15)}},{props:{disableElevation:!0},style:{boxShadow:"none","&:hover":{boxShadow:"none"},[`&.${d.focusVisible}`]:{boxShadow:"none"},"&:active":{boxShadow:"none"},[`&.${d.disabled}`]:{boxShadow:"none"}}},{props:{fullWidth:!0},style:{width:"100%"}},{props:{loadingPosition:"center"},style:{transition:o.transitions.create(["background-color","box-shadow","border-color"],{duration:o.transitions.duration.short}),[`&.${d.loading}`]:{color:"transparent"}}}]}})),io=x("span",{name:"MuiButton",slot:"StartIcon",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.startIcon,t.loading&&a.startIconLoadingStart,a[`iconSize${i(t.size)}`]]}})(({theme:o})=>({display:"inherit",marginRight:8,marginLeft:-4,variants:[{props:{size:"small"},style:{marginLeft:-2}},{props:{loadingPosition:"start",loading:!0},style:{transition:o.transitions.create(["opacity"],{duration:o.transitions.duration.short}),opacity:0}},{props:{loadingPosition:"start",loading:!0,fullWidth:!0},style:{marginRight:-8}},...E]})),ro=x("span",{name:"MuiButton",slot:"EndIcon",overridesResolver:(o,a)=>{const{ownerState:t}=o;return[a.endIcon,t.loading&&a.endIconLoadingEnd,a[`iconSize${i(t.size)}`]]}})(({theme:o})=>({display:"inherit",marginRight:-4,marginLeft:8,variants:[{props:{size:"small"},style:{marginRight:-2}},{props:{loadingPosition:"end",loading:!0},style:{transition:o.transitions.create(["opacity"],{duration:o.transitions.duration.short}),opacity:0}},{props:{loadingPosition:"end",loading:!0,fullWidth:!0},style:{marginLeft:-8}},...E]})),so=x("span",{name:"MuiButton",slot:"LoadingIndicator"})(({theme:o})=>({display:"none",position:"absolute",visibility:"visible",variants:[{props:{loading:!0},style:{display:"flex"}},{props:{loadingPosition:"start"},style:{left:14}},{props:{loadingPosition:"start",size:"small"},style:{left:10}},{props:{variant:"text",loadingPosition:"start"},style:{left:6}},{props:{loadingPosition:"center"},style:{left:"50%",transform:"translate(-50%)",color:(o.vars||o).palette.action.disabled}},{props:{loadingPosition:"end"},style:{right:14}},{props:{loadingPosition:"end",size:"small"},style:{right:10}},{props:{variant:"text",loadingPosition:"end"},style:{right:6}},{props:{loadingPosition:"start",fullWidth:!0},style:{position:"relative",left:-10}},{props:{loadingPosition:"end",fullWidth:!0},style:{position:"relative",right:-10}}]})),W=x("span",{name:"MuiButton",slot:"LoadingIconPlaceholder"})({display:"inline-block",width:"1em",height:"1em"}),xo=v.forwardRef(function(a,t){const n=v.useContext(oo),p=v.useContext(ao),c=D(n,a),u=H({props:c,name:"MuiButton"}),{children:f,color:y="primary",component:b="button",className:S,disabled:z=!1,disableElevation:L=!1,disableFocusRipple:I=!1,endIcon:B,focusVisibleClassName:M,fullWidth:N=!1,id:C,loading:e=null,loadingIndicator:k,loadingPosition:g="center",size:j="medium",startIcon:P,type:h,variant:T="text",...V}=u,w=X(C),$=k??s.jsx(Z,{"aria-labelledby":w,color:"inherit",size:16}),l={...u,color:y,component:b,disabled:z,disableElevation:L,disableFocusRipple:I,fullWidth:N,loading:e,loadingIndicator:$,loadingPosition:g,size:j,type:h,variant:T},r=to(l),O=(P||e&&g==="start")&&s.jsx(io,{className:r.startIcon,ownerState:l,children:P||s.jsx(W,{className:r.loadingIconPlaceholder,ownerState:l})}),F=(B||e&&g==="end")&&s.jsx(ro,{className:r.endIcon,ownerState:l,children:B||s.jsx(W,{className:r.loadingIconPlaceholder,ownerState:l})}),U=p||"",m=typeof e=="boolean"?s.jsx("span",{className:r.loadingWrapper,style:{display:"contents"},children:e&&s.jsx(so,{className:r.loadingIndicator,ownerState:l,children:$})}):null;return s.jsxs(no,{ownerState:l,className:R(n.className,r.root,S,U),component:b,disabled:z||e,focusRipple:!I,focusVisibleClassName:R(r.focusVisible,M),ref:t,type:h,id:e?w:C,...V,classes:r,children:[O,g!=="end"&&m,f,g==="end"&&m,F]})});export{xo as B};