{Array.from({ length: safeCount }, (_, index) => (
{children(index)}
))}
);
};
export { StackedAvatar };
`,__src__:"registry/default/ui/stacked-avatar.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" React "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { cn } "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:' "@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" StackedAvatar"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ({"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" className,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" count,"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" children,"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" Omit"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ComponentProps"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"div"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">, "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"children"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"> "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"&"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:" count"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" children"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" number"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"ReactNode"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:";"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"}) "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" safeCount"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" Math."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"max"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:"0"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", Math."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"floor"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(count));"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" data-slot"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"stacked-avatar"'})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"flex flex-row"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", className)}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"..."}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"props}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {Array."}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"({ length: safeCount }, ("}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"_"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:", "}),(0,n.jsx)(l.span,{style:{color:"#FFAB70"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:") "}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"=>"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ("})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" key"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{index}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:'"rounded-full border border-border"'}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:")}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:" style"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"{{ transform: "}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"`translateX(-${"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"index"}),(0,n.jsx)(l.span,{style:{color:"#F97583"},children:" *"}),(0,n.jsx)(l.span,{style:{color:"#79B8FF"},children:" 50"}),(0,n.jsx)(l.span,{style:{color:"#9ECBFF"},children:"}%)`"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" }}"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" >"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#B392F0"},children:"children"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"(index)}"})]}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" ))}"})}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" "}),(0,n.jsx)(l.span,{style:{color:"#85E89D"},children:"div"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:">"})]}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" );"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:"};"})}),`
`,(0,n.jsx)(l.span,{className:"line",children:" "}),`
`,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#F97583"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#E1E4E8"},children:" { StackedAvatar };"})]})]})})})}),(0,n.jsx)(s,{children:"Update the import paths to match your project setup."})]})})]}),`
`,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),`
`,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { StackedAvatar } from "