@quietmind/mdx-docs 0.1.19 → 0.1.20

package/dist/assets/card-Fe9yzzA9.js

@@ -0,0 +1,230 @@
+import{r as T,j as h,n as J,o as n,p as a,F as ae}from"./react-vendor-BVjvCnQb.js";import{c as I}from"./prism-DjoQ0BfU.js";import{g as A,a as w,u as S,e as j,s as u,P as re,b as x,T as s,t as k,c as O,I as z,B as oe}from"./index-C5FzG5L5.js";import{B as N}from"./Button-BXcSdEL6.js";import{A as F}from"./Avatar-BJ0S7JKg.js";import{F as ie}from"./Favorite-DeeoxvxH.js";import"./router-d4Dt6g8h.js";function se(t){return A("MuiCard",t)}w("MuiCard",["root"]);const de=t=>{const{classes:e}=t;return j({root:["root"]},se,e)},ce=u(re,{name:"MuiCard",slot:"Root"})({overflow:"hidden"}),m=T.forwardRef(function(e,r){const o=S({props:e,name:"MuiCard"}),{className:c,raised:d=!1,...l}=o,i={...o,raised:d},p=de(i);return h.jsx(ce,{className:I(p.root,c),elevation:d?8:void 0,ref:r,ownerState:i,...l})});function le(t){return A("MuiCardActions",t)}w("MuiCardActions",["root","spacing"]);const he=t=>{const{classes:e,disableSpacing:r}=t;return j({root:["root",!r&&"spacing"]},le,e)},pe=u("div",{name:"MuiCardActions",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:r}=t;return[e.root,!r.disableSpacing&&e.spacing]}})({display:"flex",alignItems:"center",padding:8,variants:[{props:{disableSpacing:!1},style:{"& > :not(style) ~ :not(style)":{marginLeft:8}}}]}),D=T.forwardRef(function(e,r){const o=S({props:e,name:"MuiCardActions"}),{disableSpacing:c=!1,className:d,...l}=o,i={...o,disableSpacing:c},p=he(i);return h.jsx(pe,{className:I(p.root,d),ownerState:i,ref:r,...l})});function me(t){return A("MuiCardContent",t)}w("MuiCardContent",["root"]);const ue=t=>{const{classes:e}=t;return j({root:["root"]},me,e)},ge=u("div",{name:"MuiCardContent",slot:"Root"})({padding:16,"&:last-child":{paddingBottom:24}}),M=T.forwardRef(function(e,r){const o=S({props:e,name:"MuiCardContent"}),{className:c,component:d="div",...l}=o,i={...o,component:d},p=ue(i);return h.jsx(ge,{as:d,className:I(p.root,c),ownerState:i,ref:r,...l})});function Ce(t){return A("MuiCardHeader",t)}const R=w("MuiCardHeader",["root","avatar","action","content","title","subheader"]),ye=t=>{const{classes:e}=t;return j({root:["root"],avatar:["avatar"],action:["action"],content:["content"],title:["title"],subheader:["subheader"]},Ce,e)},ve=u("div",{name:"MuiCardHeader",slot:"Root",overridesResolver:(t,e)=>[{[`& .${R.title}`]:e.title},{[`& .${R.subheader}`]:e.subheader},e.root]})({display:"flex",alignItems:"center",padding:16}),xe=u("div",{name:"MuiCardHeader",slot:"Avatar"})({display:"flex",flex:"0 0 auto",marginRight:16}),be=u("div",{name:"MuiCardHeader",slot:"Action"})({flex:"0 0 auto",alignSelf:"flex-start",marginTop:-4,marginRight:-8,marginBottom:-4}),fe=u("div",{name:"MuiCardHeader",slot:"Content"})({flex:"1 1 auto",[`.${k.root}:where(& .${R.title}), .${k.root}:where(& .${R.subheader})`]:{display:"block"}}),$=T.forwardRef(function(e,r){const o=S({props:e,name:"MuiCardHeader"}),{action:c,avatar:d,component:l="div",disableTypography:i=!1,subheader:p,subheaderTypographyProps:P,title:H,titleTypographyProps:C,slots:U={},slotProps:B={},...W}=o,g={...o,component:l,disableTypography:i},y=ye(g),v={slots:U,slotProps:{title:C,subheader:P,...B}};let b=H;const[_,G]=x("title",{className:y.title,elementType:s,externalForwardedProps:v,ownerState:g,additionalProps:{variant:d?"body2":"h5",component:"span"}});b!=null&&b.type!==s&&!i&&(b=h.jsx(_,{...G,children:b}));let f=p;const[K,V]=x("subheader",{className:y.subheader,elementType:s,externalForwardedProps:v,ownerState:g,additionalProps:{variant:d?"body2":"body1",color:"textSecondary",component:"span"}});f!=null&&f.type!==s&&!i&&(f=h.jsx(K,{...V,children:f}));const[X,q]=x("root",{ref:r,className:y.root,elementType:ve,externalForwardedProps:{...v,...W,component:l},ownerState:g}),[Q,Y]=x("avatar",{className:y.avatar,elementType:xe,externalForwardedProps:v,ownerState:g}),[Z,ee]=x("content",{className:y.content,elementType:fe,externalForwardedProps:v,ownerState:g}),[ne,te]=x("action",{className:y.action,elementType:be,externalForwardedProps:v,ownerState:g});return h.jsxs(X,{...q,children:[d&&h.jsx(Q,{...Y,children:d}),h.jsxs(Z,{...ee,children:[b,f]}),c&&h.jsx(ne,{...te,children:c})]})});function Me(t){return A("MuiCardMedia",t)}w("MuiCardMedia",["root","media","img"]);const Te=t=>{const{classes:e,isMediaComponent:r,isImageComponent:o}=t;return j({root:["root",r&&"media",o&&"img"]},Me,e)},Ae=u("div",{name:"MuiCardMedia",slot:"Root",overridesResolver:(t,e)=>{const{ownerState:r}=t,{isMediaComponent:o,isImageComponent:c}=r;return[e.root,o&&e.media,c&&e.img]}})({display:"block",backgroundSize:"cover",backgroundRepeat:"no-repeat",backgroundPosition:"center",variants:[{props:{isMediaComponent:!0},style:{width:"100%"}},{props:{isImageComponent:!0},style:{objectFit:"cover"}}]}),we=["video","audio","picture","iframe","img"],Se=["picture","img"],E=T.forwardRef(function(e,r){const o=S({props:e,name:"MuiCardMedia"}),{children:c,className:d,component:l="div",image:i,src:p,style:P,...H}=o,C=we.includes(l),U=!C&&i?{backgroundImage:`url("${i}")`,...P}:P,B={...o,component:l,isMediaComponent:C,isImageComponent:Se.includes(l)},W=Te(B);return h.jsx(Ae,{className:I(W.root,d),as:l,role:!C&&i?"img":void 0,ref:r,style:U,ownerState:B,src:C?i||p:void 0,...H,children:c})}),je=O(h.jsx("path",{d:"M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"})),Pe=O(h.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"}));function L(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...J(),...t.components};return a(ae,{children:[n(e.h1,{children:"Card"}),`
+`,a(e.p,{children:["The ",n(e.code,{children:"Card"})," component is a versatile container for displaying content. Material UI's Card component provides a consistent, accessible, and customizable way to present information in a structured format."]}),`
+`,n(e.p,{children:"Cards are used to display content and actions about a single topic, such as articles, products, user profiles, or any other grouped information."}),`
+`,n(e.h2,{children:"Basic Card"}),`
+`,n(e.p,{children:"A simple card with content:"}),`
+`,n(m,{sx:{maxWidth:345},children:a(M,{children:[n(s,{gutterBottom:!0,variant:"h5",component:"div",children:"Card Title"}),n(s,{variant:"body2",color:"text.secondary",children:`This is a basic card with content. Cards are useful for displaying
+information in a structured format.`})]})}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardContent>
+    <Typography gutterBottom variant="h5" component="div">
+      Card Title
+    </Typography>
+    <Typography variant="body2" color="text.secondary">
+      This is a basic card with content.
+    </Typography>
+  </CardContent>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Card with Media"}),`
+`,n(e.p,{children:"Cards can include images or other media:"}),`
+`,a(m,{sx:{maxWidth:345},children:[n(E,{component:"img",height:"140",image:"https://mui.com/static/images/cards/contemplative-reptile.jpg",alt:"Green iguana"}),a(M,{children:[n(s,{gutterBottom:!0,variant:"h5",component:"div",children:"Lizard"}),n(s,{variant:"body2",color:"text.secondary",children:`Lizards are a widespread group of squamate reptiles, with over 6,000
+species, ranging across all continents except Antarctica.`})]})]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardMedia
+    component="img"
+    height="140"
+    image="/path/to/image.jpg"
+    alt="Image description"
+  />
+  <CardContent>
+    <Typography gutterBottom variant="h5" component="div">
+      Card Title
+    </Typography>
+    <Typography variant="body2" color="text.secondary">
+      Card description text.
+    </Typography>
+  </CardContent>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Card with Actions"}),`
+`,n(e.p,{children:"Cards can include action buttons:"}),`
+`,a(m,{sx:{maxWidth:345},children:[a(M,{children:[n(s,{gutterBottom:!0,variant:"h5",component:"div",children:"Card with Actions"}),n(s,{variant:"body2",color:"text.secondary",children:"This card includes action buttons at the bottom."})]}),a(D,{children:[n(N,{size:"small",children:"Share"}),n(N,{size:"small",children:"Learn More"})]})]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardContent>
+    <Typography variant="h5">Card with Actions</Typography>
+    <Typography variant="body2" color="text.secondary">
+      Card content here.
+    </Typography>
+  </CardContent>
+  <CardActions>
+    <Button size="small">Share</Button>
+    <Button size="small">Learn More</Button>
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Card with Header"}),`
+`,n(e.p,{children:"Cards can include a header with an avatar and action buttons:"}),`
+`,a(m,{sx:{maxWidth:345},children:[n($,{avatar:n(F,{sx:{bgcolor:"primary.main"},"aria-label":"recipe",children:"R"}),action:n(z,{"aria-label":"settings",children:n(je,{})}),title:"Shrimp and Chorizo Paella",subheader:"September 14, 2016"}),n(E,{component:"img",height:"194",image:"https://mui.com/static/images/cards/paella.jpg",alt:"Paella dish"}),n(M,{children:n(s,{variant:"body2",color:"text.secondary",children:`This impressive paella is a perfect party dish and a fun meal to cook
+together with your guests.`})}),a(D,{disableSpacing:!0,children:[n(z,{"aria-label":"add to favorites",children:n(ie,{})}),n(z,{"aria-label":"share",children:n(Pe,{})})]})]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardHeader
+    avatar={
+      <Avatar sx={{ bgcolor: "primary.main" }}>R</Avatar>
+    }
+    action={
+      <IconButton>
+        <MoreVert />
+      </IconButton>
+    }
+    title="Card Title"
+    subheader="Subtitle"
+  />
+  <CardContent>
+    <Typography variant="body2" color="text.secondary">
+      Card content here.
+    </Typography>
+  </CardContent>
+  <CardActions>
+    <IconButton>
+      <Favorite />
+    </IconButton>
+    <IconButton>
+      <Share />
+    </IconButton>
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Complete Card Example"}),`
+`,n(e.p,{children:"A card with all features combined:"}),`
+`,a(m,{sx:{maxWidth:345},children:[n($,{avatar:n(F,{sx:{bgcolor:"secondary.main"},children:"JD"}),title:"John Doe",subheader:"Product Designer"}),n(E,{component:"img",height:"140",image:"https://mui.com/static/images/cards/contemplative-reptile.jpg",alt:"Profile"}),a(M,{children:[n(s,{gutterBottom:!0,variant:"h6",component:"div",children:"Featured Project"}),n(s,{variant:"body2",color:"text.secondary",children:"This is a complete card example with header, media, content, and actions."})]}),a(D,{children:[n(N,{size:"small",color:"primary",children:"View Project"}),n(N,{size:"small",color:"primary",children:"Contact"})]})]}),`
+`,n(e.h2,{children:"Elevation"}),`
+`,n(e.p,{children:"Cards support different elevation levels for depth:"}),`
+`,a(oe,{sx:{display:"flex",gap:2,flexWrap:"wrap"},children:[n(m,{elevation:0,sx:{p:2,minWidth:200},children:n(s,{variant:"h6",children:"Elevation 0"})}),n(m,{elevation:2,sx:{p:2,minWidth:200},children:n(s,{variant:"h6",children:"Elevation 2"})}),n(m,{elevation:8,sx:{p:2,minWidth:200},children:n(s,{variant:"h6",children:"Elevation 8"})}),n(m,{elevation:24,sx:{p:2,minWidth:200},children:n(s,{variant:"h6",children:"Elevation 24"})})]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card elevation={0}>No elevation</Card>
+<Card elevation={2}>Low elevation</Card>
+<Card elevation={8}>Medium elevation</Card>
+<Card elevation={24}>High elevation</Card>
+`})}),`
+`,n(e.h2,{children:"Common Props"}),`
+`,n(e.p,{children:"The Card component and its subcomponents accept various props:"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card
+  elevation={1} // number (0-24) - shadow depth
+  raised={false} // boolean - if true, elevation increases on hover
+  sx={{}} // object - custom styles
+>
+  <CardHeader
+    avatar={<Avatar />} // ReactNode
+    title="Title" // string | ReactNode
+    subheader="Subtitle" // string | ReactNode
+    action={<IconButton />} // ReactNode
+    titleTypographyProps={{}} // object
+    subheaderTypographyProps={{}} // object
+  />
+  <CardMedia
+    component="img" // 'img' | 'video' | 'iframe' | etc.
+    image="/path/to/image.jpg" // string
+    height={140} // number | string
+    alt="Description" // string
+  />
+  <CardContent>
+    {/* Card content */}
+  </CardContent>
+  <CardActions
+    disableSpacing={false} // boolean - removes padding between actions
+  >
+    {/* Action buttons */}
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Accessibility"}),`
+`,n(e.p,{children:"Material UI Cards are built with accessibility in mind:"}),`
+`,a(e.ul,{children:[`
+`,a(e.li,{children:[n(e.strong,{children:"Semantic HTML"}),": Cards use appropriate semantic elements"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Keyboard navigation"}),": All interactive elements are keyboard accessible"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Screen readers"}),": Proper ARIA labels and roles"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Focus indicators"}),": Clear visual focus indicators for keyboard users"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Alt text"}),": Images in CardMedia should have descriptive alt text"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Color contrast"}),": Meets WCAG guidelines for text contrast"]}),`
+`]}),`
+`,n(e.h2,{children:"Best Practices"}),`
+`,a(e.ol,{children:[`
+`,a(e.li,{children:[n(e.strong,{children:"Use cards for grouped content"})," - Cards work best for related information"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Keep content concise"})," - Cards should contain focused, digestible content"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Provide clear actions"})," - Make action buttons clear and accessible"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Use appropriate elevation"})," - Higher elevation draws more attention"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Include meaningful images"})," - Use relevant, high-quality images in CardMedia"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Maintain consistent sizing"})," - Keep card dimensions consistent within a grid"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Consider responsive design"})," - Ensure cards work well on mobile devices"]}),`
+`,a(e.li,{children:[n(e.strong,{children:"Use headers effectively"})," - CardHeader is great for metadata and avatars"]}),`
+`]}),`
+`,n(e.h2,{children:"Examples"}),`
+`,n(e.h3,{children:"Product Card"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardMedia
+    component="img"
+    height="200"
+    image="/product-image.jpg"
+    alt="Product name"
+  />
+  <CardContent>
+    <Typography gutterBottom variant="h5">
+      Product Name
+    </Typography>
+    <Typography variant="h6" color="primary">
+      $99.99
+    </Typography>
+    <Typography variant="body2" color="text.secondary">
+      Product description here.
+    </Typography>
+  </CardContent>
+  <CardActions>
+    <Button size="small" variant="contained" fullWidth>
+      Add to Cart
+    </Button>
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h3,{children:"Article Card"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card>
+  <CardHeader
+    avatar={<Avatar>JD</Avatar>}
+    title="Article Title"
+    subheader="January 1, 2024"
+  />
+  <CardMedia
+    component="img"
+    height="194"
+    image="/article-image.jpg"
+    alt="Article"
+  />
+  <CardContent>
+    <Typography variant="body2" color="text.secondary">
+      Article excerpt or summary text goes here.
+    </Typography>
+  </CardContent>
+  <CardActions>
+    <Button size="small">Read More</Button>
+    <Button size="small">Share</Button>
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h3,{children:"User Profile Card"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-jsx",children:`<Card sx={{ maxWidth: 345 }}>
+  <CardContent sx={{ textAlign: "center" }}>
+    <Avatar
+      sx={{ width: 80, height: 80, mx: "auto", mb: 2 }}
+      src="/avatar.jpg"
+    >
+      JD
+    </Avatar>
+    <Typography variant="h5" gutterBottom>
+      John Doe
+    </Typography>
+    <Typography variant="body2" color="text.secondary" gutterBottom>
+      Product Designer
+    </Typography>
+    <Typography variant="body2" color="text.secondary">
+      San Francisco, CA
+    </Typography>
+  </CardContent>
+  <CardActions sx={{ justifyContent: "center" }}>
+    <Button variant="contained">Follow</Button>
+    <Button variant="outlined">Message</Button>
+  </CardActions>
+</Card>
+`})}),`
+`,n(e.h2,{children:"Documentation"}),`
+`,a(e.ul,{children:[`
+`,n(e.li,{children:n(e.a,{href:"https://mui.com/material-ui/react-card/",children:"Material UI - Card"})}),`
+`]})]})}function ze(t={}){const{wrapper:e}={...J(),...t.components};return e?n(e,{...t,children:n(L,{...t})}):L(t)}export{ze as default};

package/dist/assets/chip-CHAwrwxa.js

@@ -0,0 +1,204 @@
+import{j as k,r as h,n as V,o as l,p as o,F as se}from"./react-vendor-BVjvCnQb.js";import{c as $}from"./prism-DjoQ0BfU.js";import{c as K,g as de,a as pe,u as he,k as ue,i as L,b as U,d as t,e as be,s as J,m as Ce,f as D,B as b}from"./index-C5FzG5L5.js";import{A as j}from"./Avatar-BJ0S7JKg.js";import"./router-d4Dt6g8h.js";const ge=K(k.jsx("path",{d:"M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z"}));function fe(a){return de("MuiChip",a)}const n=pe("MuiChip",["root","sizeSmall","sizeMedium","colorDefault","colorError","colorInfo","colorPrimary","colorSecondary","colorSuccess","colorWarning","disabled","clickable","clickableColorPrimary","clickableColorSecondary","deletable","deletableColorPrimary","deletableColorSecondary","outlined","filled","outlinedPrimary","outlinedSecondary","filledPrimary","filledSecondary","avatar","avatarSmall","avatarMedium","avatarColorPrimary","avatarColorSecondary","icon","iconSmall","iconMedium","iconColorPrimary","iconColorSecondary","label","labelSmall","labelMedium","deleteIcon","deleteIconSmall","deleteIconMedium","deleteIconColorPrimary","deleteIconColorSecondary","deleteIconOutlinedColorPrimary","deleteIconOutlinedColorSecondary","deleteIconFilledColorPrimary","deleteIconFilledColorSecondary","focusVisible"]),ve=a=>{const{classes:e,disabled:r,size:c,color:d,iconColor:C,onDelete:g,clickable:p,variant:u}=a,m={root:["root",u,r&&"disabled",`size${t(c)}`,`color${t(d)}`,p&&"clickable",p&&`clickableColor${t(d)}`,g&&"deletable",g&&`deletableColor${t(d)}`,`${u}${t(d)}`],label:["label",`label${t(c)}`],avatar:["avatar",`avatar${t(c)}`,`avatarColor${t(d)}`],icon:["icon",`icon${t(c)}`,`iconColor${t(C)}`],deleteIcon:["deleteIcon",`deleteIcon${t(c)}`,`deleteIconColor${t(d)}`,`deleteIcon${t(u)}Color${t(d)}`]};return be(m,fe,e)},ye=J("div",{name:"MuiChip",slot:"Root",overridesResolver:(a,e)=>{const{ownerState:r}=a,{color:c,iconColor:d,clickable:C,onDelete:g,size:p,variant:u}=r;return[{[`& .${n.avatar}`]:e.avatar},{[`& .${n.avatar}`]:e[`avatar${t(p)}`]},{[`& .${n.avatar}`]:e[`avatarColor${t(c)}`]},{[`& .${n.icon}`]:e.icon},{[`& .${n.icon}`]:e[`icon${t(p)}`]},{[`& .${n.icon}`]:e[`iconColor${t(d)}`]},{[`& .${n.deleteIcon}`]:e.deleteIcon},{[`& .${n.deleteIcon}`]:e[`deleteIcon${t(p)}`]},{[`& .${n.deleteIcon}`]:e[`deleteIconColor${t(c)}`]},{[`& .${n.deleteIcon}`]:e[`deleteIcon${t(u)}Color${t(c)}`]},e.root,e[`size${t(p)}`],e[`color${t(c)}`],C&&e.clickable,C&&c!=="default"&&e[`clickableColor${t(c)}`],g&&e.deletable,g&&c!=="default"&&e[`deletableColor${t(c)}`],e[u],e[`${u}${t(c)}`]]}})(Ce(({theme:a})=>{const e=a.palette.mode==="light"?a.palette.grey[700]:a.palette.grey[300];return{maxWidth:"100%",fontFamily:a.typography.fontFamily,fontSize:a.typography.pxToRem(13),display:"inline-flex",alignItems:"center",justifyContent:"center",height:32,lineHeight:1.5,color:(a.vars||a).palette.text.primary,backgroundColor:(a.vars||a).palette.action.selected,borderRadius:32/2,whiteSpace:"nowrap",transition:a.transitions.create(["background-color","box-shadow"]),cursor:"unset",outline:0,textDecoration:"none",border:0,padding:0,verticalAlign:"middle",boxSizing:"border-box",[`&.${n.disabled}`]:{opacity:(a.vars||a).palette.action.disabledOpacity,pointerEvents:"none"},[`& .${n.avatar}`]:{marginLeft:5,marginRight:-6,width:24,height:24,color:a.vars?a.vars.palette.Chip.defaultAvatarColor:e,fontSize:a.typography.pxToRem(12)},[`& .${n.avatarColorPrimary}`]:{color:(a.vars||a).palette.primary.contrastText,backgroundColor:(a.vars||a).palette.primary.dark},[`& .${n.avatarColorSecondary}`]:{color:(a.vars||a).palette.secondary.contrastText,backgroundColor:(a.vars||a).palette.secondary.dark},[`& .${n.avatarSmall}`]:{marginLeft:4,marginRight:-4,width:18,height:18,fontSize:a.typography.pxToRem(10)},[`& .${n.icon}`]:{marginLeft:5,marginRight:-6},[`& .${n.deleteIcon}`]:{WebkitTapHighlightColor:"transparent",color:a.alpha((a.vars||a).palette.text.primary,.26),fontSize:22,cursor:"pointer",margin:"0 5px 0 -6px","&:hover":{color:a.alpha((a.vars||a).palette.text.primary,.4)}},variants:[{props:{size:"small"},style:{height:24,[`& .${n.icon}`]:{fontSize:18,marginLeft:4,marginRight:-4},[`& .${n.deleteIcon}`]:{fontSize:16,marginRight:4,marginLeft:-4}}},...Object.entries(a.palette).filter(D(["contrastText"])).map(([r])=>({props:{color:r},style:{backgroundColor:(a.vars||a).palette[r].main,color:(a.vars||a).palette[r].contrastText,[`& .${n.deleteIcon}`]:{color:a.alpha((a.vars||a).palette[r].contrastText,.7),"&:hover, &:active":{color:(a.vars||a).palette[r].contrastText}}}})),{props:r=>r.iconColor===r.color,style:{[`& .${n.icon}`]:{color:a.vars?a.vars.palette.Chip.defaultIconColor:e}}},{props:r=>r.iconColor===r.color&&r.color!=="default",style:{[`& .${n.icon}`]:{color:"inherit"}}},{props:{onDelete:!0},style:{[`&.${n.focusVisible}`]:{backgroundColor:a.alpha((a.vars||a).palette.action.selected,`${(a.vars||a).palette.action.selectedOpacity} + ${(a.vars||a).palette.action.focusOpacity}`)}}},...Object.entries(a.palette).filter(D(["dark"])).map(([r])=>({props:{color:r,onDelete:!0},style:{[`&.${n.focusVisible}`]:{background:(a.vars||a).palette[r].dark}}})),{props:{clickable:!0},style:{userSelect:"none",WebkitTapHighlightColor:"transparent",cursor:"pointer","&:hover":{backgroundColor:a.alpha((a.vars||a).palette.action.selected,`${(a.vars||a).palette.action.selectedOpacity} + ${(a.vars||a).palette.action.hoverOpacity}`)},[`&.${n.focusVisible}`]:{backgroundColor:a.alpha((a.vars||a).palette.action.selected,`${(a.vars||a).palette.action.selectedOpacity} + ${(a.vars||a).palette.action.focusOpacity}`)},"&:active":{boxShadow:(a.vars||a).shadows[1]}}},...Object.entries(a.palette).filter(D(["dark"])).map(([r])=>({props:{color:r,clickable:!0},style:{[`&:hover, &.${n.focusVisible}`]:{backgroundColor:(a.vars||a).palette[r].dark}}})),{props:{variant:"outlined"},style:{backgroundColor:"transparent",border:a.vars?`1px solid ${a.vars.palette.Chip.defaultBorder}`:`1px solid ${a.palette.mode==="light"?a.palette.grey[400]:a.palette.grey[700]}`,[`&.${n.clickable}:hover`]:{backgroundColor:(a.vars||a).palette.action.hover},[`&.${n.focusVisible}`]:{backgroundColor:(a.vars||a).palette.action.focus},[`& .${n.avatar}`]:{marginLeft:4},[`& .${n.avatarSmall}`]:{marginLeft:2},[`& .${n.icon}`]:{marginLeft:4},[`& .${n.iconSmall}`]:{marginLeft:2},[`& .${n.deleteIcon}`]:{marginRight:5},[`& .${n.deleteIconSmall}`]:{marginRight:3}}},...Object.entries(a.palette).filter(D()).map(([r])=>({props:{variant:"outlined",color:r},style:{color:(a.vars||a).palette[r].main,border:`1px solid ${a.alpha((a.vars||a).palette[r].main,.7)}`,[`&.${n.clickable}:hover`]:{backgroundColor:a.alpha((a.vars||a).palette[r].main,(a.vars||a).palette.action.hoverOpacity)},[`&.${n.focusVisible}`]:{backgroundColor:a.alpha((a.vars||a).palette[r].main,(a.vars||a).palette.action.focusOpacity)},[`& .${n.deleteIcon}`]:{color:a.alpha((a.vars||a).palette[r].main,.7),"&:hover, &:active":{color:(a.vars||a).palette[r].main}}}}))]}})),me=J("span",{name:"MuiChip",slot:"Label",overridesResolver:(a,e)=>{const{ownerState:r}=a,{size:c}=r;return[e.label,e[`label${t(c)}`]]}})({overflow:"hidden",textOverflow:"ellipsis",paddingLeft:12,paddingRight:12,whiteSpace:"nowrap",variants:[{props:{variant:"outlined"},style:{paddingLeft:11,paddingRight:11}},{props:{size:"small"},style:{paddingLeft:8,paddingRight:8}},{props:{size:"small",variant:"outlined"},style:{paddingLeft:7,paddingRight:7}}]});function B(a){return a.key==="Backspace"||a.key==="Delete"}const i=h.forwardRef(function(e,r){const c=he({props:e,name:"MuiChip"}),{avatar:d,className:C,clickable:g,color:p="default",component:u,deleteIcon:m,disabled:S=!1,icon:x,label:H,onClick:N,onDelete:v,onKeyDown:R,onKeyUp:M,size:X="medium",variant:G="filled",tabIndex:_,skipFocusWhenDisabled:Y=!1,slots:q={},slotProps:Q={},...Z}=c,ee=h.useRef(null),le=ue(ee,r),T=s=>{s.stopPropagation(),v(s)},ae=s=>{s.currentTarget===s.target&&B(s)&&s.preventDefault(),R&&R(s)},ne=s=>{s.currentTarget===s.target&&v&&B(s)&&v(s),M&&M(s)},I=g!==!1&&N?!0:g,w=I||v?L:u||"div",P={...c,component:w,disabled:S,size:X,color:p,iconColor:h.isValidElement(x)&&x.props.color||p,onDelete:!!v,clickable:I,variant:G},y=ve(P),re=w===L?{component:u||"div",focusVisibleClassName:y.focusVisible,...v&&{disableRipple:!0}}:{};let A=null;v&&(A=m&&h.isValidElement(m)?h.cloneElement(m,{className:$(m.props.className,y.deleteIcon),onClick:T}):k.jsx(ge,{className:y.deleteIcon,onClick:T}));let W=null;d&&h.isValidElement(d)&&(W=h.cloneElement(d,{className:$(y.avatar,d.props.className)}));let F=null;x&&h.isValidElement(x)&&(F=h.cloneElement(x,{className:$(y.icon,x.props.className)}));const O={slots:q,slotProps:Q},[ie,oe]=U("root",{elementType:ye,externalForwardedProps:{...O,...Z},ownerState:P,shouldForwardComponentProp:!0,ref:le,className:$(y.root,C),additionalProps:{disabled:I&&S?!0:void 0,tabIndex:Y&&S?-1:_,...re},getSlotProps:s=>({...s,onClick:f=>{s.onClick?.(f),N?.(f)},onKeyDown:f=>{s.onKeyDown?.(f),ae(f)},onKeyUp:f=>{s.onKeyUp?.(f),ne(f)}})}),[te,ce]=U("label",{elementType:me,externalForwardedProps:O,ownerState:P,className:y.label});return k.jsxs(ie,{as:w,...oe,children:[W||F,k.jsx(te,{...ce,children:H}),A]})}),z=K(k.jsx("path",{d:"M9 11.75c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25m6 0c-.69 0-1.25.56-1.25 1.25s.56 1.25 1.25 1.25 1.25-.56 1.25-1.25-.56-1.25-1.25-1.25M12 2C6.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-8 0-.29.02-.58.05-.86 2.36-1.05 4.23-2.98 5.21-5.37C11.07 8.33 14.05 10 17.42 10c.78 0 1.53-.09 2.25-.26.21.71.33 1.47.33 2.26 0 4.41-3.59 8-8 8"})),xe=()=>{const[a,e]=h.useState(["Chip 1","Chip 2","Chip 3"]),r=c=>{e(d=>d.filter(C=>C!==c))};return l(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:a.map(c=>l(i,{label:c,onDelete:()=>r(c)},c))})},ke=()=>{const[a,e]=h.useState(!1);return l(i,{label:a?"Selected":"Click me",onClick:()=>e(!a),color:a?"primary":"default"})};function E(a){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",ol:"ol",p:"p",pre:"pre",strong:"strong",ul:"ul",...V(),...a.components};return o(se,{children:[l(e.h1,{children:"Chip"}),`
+`,o(e.p,{children:["The ",l(e.code,{children:"Chip"})," component displays a compact element that can represent an input, attribute, or action. Material UI's Chip component provides a consistent, accessible, and customizable way to display tags, labels, or interactive elements."]}),`
+`,l(e.p,{children:"Chips are used to display small pieces of information, such as tags, filters, selections, or actions that can be clicked or deleted."}),`
+`,l(e.h2,{children:"Variants"}),`
+`,l(e.p,{children:"Material UI Chips come in two variants:"}),`
+`,l(e.h3,{children:"Filled (Default)"}),`
+`,l(e.p,{children:"The default variant with a solid background:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Filled"}),l(i,{label:"Chip",color:"primary"}),l(i,{label:"Chip",color:"secondary"})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Filled" />
+<Chip label="Chip" color="primary" />
+<Chip label="Chip" color="secondary" />
+`})}),`
+`,l(e.h3,{children:"Outlined"}),`
+`,l(e.p,{children:"A variant with an outlined border:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Outlined",variant:"outlined"}),l(i,{label:"Chip",variant:"outlined",color:"primary"}),l(i,{label:"Chip",variant:"outlined",color:"secondary"})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Outlined" variant="outlined" />
+<Chip label="Chip" variant="outlined" color="primary" />
+<Chip label="Chip" variant="outlined" color="secondary" />
+`})}),`
+`,l(e.h2,{children:"Sizes"}),`
+`,l(e.p,{children:"Chips come in two sizes:"}),`
+`,o(b,{sx:{display:"flex",gap:1,alignItems:"center",flexWrap:"wrap"},children:[l(i,{label:"Small",size:"small"}),l(i,{label:"Medium",size:"medium"}),l(i,{label:"Small",size:"small",variant:"outlined"}),l(i,{label:"Medium",size:"medium",variant:"outlined"})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Small" size="small" />
+<Chip label="Medium" size="medium" />
+`})}),`
+`,l(e.h2,{children:"Colors"}),`
+`,l(e.p,{children:"Chips support different color schemes:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Default"}),l(i,{label:"Primary",color:"primary"}),l(i,{label:"Secondary",color:"secondary"}),l(i,{label:"Success",color:"success"}),l(i,{label:"Error",color:"error"}),l(i,{label:"Warning",color:"warning"}),l(i,{label:"Info",color:"info"})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Primary" color="primary" />
+<Chip label="Secondary" color="secondary" />
+<Chip label="Success" color="success" />
+<Chip label="Error" color="error" />
+<Chip label="Warning" color="warning" />
+<Chip label="Info" color="info" />
+`})}),`
+`,l(e.h2,{children:"Deletable Chips"}),`
+`,l(e.p,{children:"Chips can include a delete icon:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Deletable",onDelete:()=>{}}),l(i,{label:"Deletable",variant:"outlined",onDelete:()=>{}}),l(i,{label:"Deletable",color:"primary",onDelete:()=>{}})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Deletable" onDelete={() => {}} />
+`})}),`
+`,l(e.h3,{children:"Interactive Deletable Chips"}),`
+`,l(xe,{}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`const [chips, setChips] = useState(["Chip 1", "Chip 2", "Chip 3"]);
+
+const handleDelete = (chipToDelete) => {
+  setChips((chips) => chips.filter((chip) => chip !== chipToDelete));
+};
+
+{chips.map((chip) => (
+  <Chip
+    key={chip}
+    label={chip}
+    onDelete={() => handleDelete(chip)}
+  />
+))}
+`})}),`
+`,l(e.h2,{children:"Clickable Chips"}),`
+`,l(e.p,{children:"Chips can be made clickable:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Clickable",onClick:()=>{}}),l(i,{label:"Clickable",variant:"outlined",onClick:()=>{}}),l(ke,{})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Clickable" onClick={() => {}} />
+`})}),`
+`,l(e.h2,{children:"Icon Chips"}),`
+`,l(e.p,{children:"Chips can include icons:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{icon:l(z,{}),label:"With Icon"}),l(i,{icon:l(z,{}),label:"With Icon",color:"primary"}),l(i,{icon:l(z,{}),label:"Deletable",onDelete:()=>{}})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip icon={<Face />} label="With Icon" />
+<Chip
+  icon={<Face />}
+  label="Deletable"
+  onDelete={() => {}}
+/>
+`})}),`
+`,l(e.h2,{children:"Avatar Chips"}),`
+`,l(e.p,{children:"Chips can display avatars:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{avatar:l(j,{children:"M"}),label:"Avatar"}),l(i,{avatar:l(j,{alt:"Natacha",src:"/static/images/avatar/1.jpg"}),label:"Avatar",variant:"outlined"}),l(i,{avatar:l(j,{children:"JD"}),label:"Deletable",onDelete:()=>{}})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip avatar={<Avatar>M</Avatar>} label="Avatar" />
+<Chip
+  avatar={<Avatar alt="Natacha" src="/avatar.jpg" />}
+  label="Avatar"
+  variant="outlined"
+/>
+`})}),`
+`,l(e.h2,{children:"Custom Delete Icon"}),`
+`,l(e.p,{children:"You can customize the delete icon:"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip
+  label="Custom Delete"
+  onDelete={() => {}}
+  deleteIcon={<Check />}
+/>
+`})}),`
+`,l(e.h2,{children:"Disabled Chips"}),`
+`,l(e.p,{children:"Chips can be disabled:"}),`
+`,o(b,{sx:{display:"flex",gap:1,flexWrap:"wrap"},children:[l(i,{label:"Disabled",disabled:!0}),l(i,{label:"Disabled",disabled:!0,variant:"outlined"}),l(i,{label:"Disabled",disabled:!0,onDelete:()=>{}})]}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip label="Disabled" disabled />
+<Chip label="Disabled" disabled onDelete={() => {}} />
+`})}),`
+`,l(e.h2,{children:"Common Props"}),`
+`,l(e.p,{children:"The Chip component accepts various props to customize its appearance and behavior:"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Chip
+  label="Label" // string | ReactNode
+  variant="filled" // 'filled' | 'outlined'
+  color="default" // 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning'
+  size="medium" // 'small' | 'medium'
+  icon={<Icon />} // ReactNode
+  avatar={<Avatar />} // ReactNode
+  onDelete={handleDelete} // function - makes chip deletable
+  onClick={handleClick} // function - makes chip clickable
+  disabled={false} // boolean
+  deleteIcon={<DeleteIcon />} // ReactNode - custom delete icon
+  sx={{}} // object - custom styles
+/>
+`})}),`
+`,l(e.h2,{children:"Accessibility"}),`
+`,l(e.p,{children:"Material UI Chips are built with accessibility in mind:"}),`
+`,o(e.ul,{children:[`
+`,o(e.li,{children:[l(e.strong,{children:"Keyboard navigation"}),": Clickable and deletable chips are keyboard accessible"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"ARIA attributes"}),": Proper ARIA labels and roles for screen readers"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Focus indicators"}),": Clear visual focus indicators"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Delete action"}),": Delete action is properly announced to screen readers"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Color contrast"}),": Meets WCAG guidelines for color contrast ratios"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Interactive elements"}),": All interactive chips have proper event handlers"]}),`
+`]}),`
+`,l(e.h2,{children:"Best Practices"}),`
+`,o(e.ol,{children:[`
+`,o(e.li,{children:[l(e.strong,{children:"Use chips for tags and labels"})," - Chips work well for displaying tags, categories, or labels"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Keep labels concise"})," - Short, clear labels work best in chips"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Provide delete functionality"})," - Use deletable chips when users should be able to remove items"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Use appropriate colors"})," - Choose colors that match your design system and convey meaning"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Consider clickable chips"})," - Make chips clickable when they represent selectable options"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Use icons meaningfully"})," - Icons can enhance understanding but shouldn't replace clear labels"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Group related chips"})," - Display related chips together in a flex container"]}),`
+`,o(e.li,{children:[l(e.strong,{children:"Handle deletion gracefully"})," - Provide clear feedback when chips are deleted"]}),`
+`]}),`
+`,l(e.h2,{children:"Examples"}),`
+`,l(e.h3,{children:"Filter Chips"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`const [filters, setFilters] = useState(["Active", "Featured"]);
+
+const handleDelete = (filterToDelete) => {
+  setFilters((filters) => filters.filter((filter) => filter !== filterToDelete));
+};
+
+<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+  {filters.map((filter) => (
+    <Chip
+      key={filter}
+      label={filter}
+      onDelete={() => handleDelete(filter)}
+      color="primary"
+    />
+  ))}
+</Box>
+`})}),`
+`,l(e.h3,{children:"Selectable Chips"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`const [selected, setSelected] = useState([]);
+
+const handleToggle = (value) => {
+  setSelected((prev) =>
+    prev.includes(value)
+      ? prev.filter((item) => item !== value)
+      : [...prev, value]
+  );
+};
+
+const options = ["Option 1", "Option 2", "Option 3"];
+
+<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+  {options.map((option) => (
+    <Chip
+      key={option}
+      label={option}
+      onClick={() => handleToggle(option)}
+      color={selected.includes(option) ? "primary" : "default"}
+    />
+  ))}
+</Box>
+`})}),`
+`,l(e.h3,{children:"User Tags"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`const users = [
+  { name: "John Doe", avatar: "JD" },
+  { name: "Jane Smith", avatar: "JS" },
+];
+
+<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+  {users.map((user) => (
+    <Chip
+      key={user.name}
+      avatar={<Avatar>{user.avatar}</Avatar>}
+      label={user.name}
+      onDelete={() => {}}
+    />
+  ))}
+</Box>
+`})}),`
+`,l(e.h3,{children:"Status Chips"}),`
+`,l(e.pre,{children:l(e.code,{className:"language-jsx",children:`<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
+  <Chip label="Active" color="success" />
+  <Chip label="Pending" color="warning" />
+  <Chip label="Inactive" color="default" />
+  <Chip label="Error" color="error" />
+</Box>
+`})}),`
+`,l(e.h2,{children:"Documentation"}),`
+`,o(e.ul,{children:[`
+`,l(e.li,{children:l(e.a,{href:"https://mui.com/material-ui/react-chip/",children:"Material UI - Chip"})}),`
+`]})]})}function Pe(a={}){const{wrapper:e}={...V(),...a.components};return e?l(e,{...a,children:l(E,{...a})}):E(a)}export{ke as ClickableChips,xe as DeletableChips,Pe as default};

package/dist/assets/colors-BwOy54bA.js

@@ -0,0 +1,8 @@
+import{n as p,o as e,r as b,p as l,F as y}from"./react-vendor-BVjvCnQb.js";import{B as i,T as o,I as x,l as g,n as u,o as v,P as f,p as k}from"./index-C5FzG5L5.js";import"./prism-DjoQ0BfU.js";import"./router-d4Dt6g8h.js";const t=({color:a,variable:r,displayVariable:d})=>{const[n,s]=b.useState(!1),h=async()=>{try{await navigator.clipboard.writeText(r),s(!0),setTimeout(()=>s(!1),2e3)}catch(m){console.error("Failed to copy variable:",m)}};return l(f,{elevation:1,sx:{p:2,display:"flex",alignItems:"center",gap:2,width:"100%",minWidth:0,overflow:"hidden"},children:[e(i,{sx:{width:50,height:50,backgroundColor:a,borderRadius:1,border:"1px solid rgba(0,0,0,0.12)",flexShrink:0}}),l(i,{sx:{flexGrow:1,minWidth:0},children:[e(o,{variant:"body2",color:"text.secondary",sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap","& strong":{display:"inline"}},children:e("strong",{children:d||r})}),e(o,{variant:"body2",color:"text.secondary",sx:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:a})]}),e(v,{title:n?"Copied!":"Copy variable name",children:e(x,{onClick:h,size:"small",sx:{color:n?"success.main":"text.secondary",flexShrink:0,"&:hover":{color:n?"success.main":"text.primary"}},children:n?e(g,{}):e(u,{})})})]})},T=()=>{const a=k(),r={display:"grid",gridTemplateColumns:{xs:"1fr",md:"repeat(2, 1fr)",lg:"repeat(3, 1fr)"},gap:2,mb:3};return l(i,{children:[e(o,{variant:"h6",sx:{mb:2},children:"Primary"}),l(i,{sx:r,children:[e(t,{color:a.palette.primary.light,variable:"theme.palette.primary.light",displayVariable:"palette.primary.light"}),e(t,{color:a.palette.primary.main,variable:"theme.palette.primary.main",displayVariable:"palette.primary.main"}),e(t,{color:a.palette.primary.dark,variable:"theme.palette.primary.dark",displayVariable:"palette.primary.dark"}),e(t,{color:a.palette.primary.contrastText,variable:"theme.palette.primary.contrastText",displayVariable:"palette.primary.contrastText"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Secondary"}),l(i,{sx:r,children:[e(t,{color:a.palette.secondary.light,variable:"theme.palette.secondary.light",displayVariable:"palette.secondary.light"}),e(t,{color:a.palette.secondary.main,variable:"theme.palette.secondary.main",displayVariable:"palette.secondary.main"}),e(t,{color:a.palette.secondary.dark,variable:"theme.palette.secondary.dark",displayVariable:"palette.secondary.dark"}),e(t,{color:a.palette.secondary.contrastText,variable:"theme.palette.secondary.contrastText",displayVariable:"palette.secondary.contrastText"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Background"}),l(i,{sx:r,children:[e(t,{color:a.palette.background.default,variable:"theme.palette.background.default",displayVariable:"palette.background.default"}),e(t,{color:a.palette.background.paper,variable:"theme.palette.background.paper",displayVariable:"palette.background.paper"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Text"}),l(i,{sx:r,children:[e(t,{color:a.palette.text.primary,variable:"theme.palette.text.primary",displayVariable:"palette.text.primary"}),e(t,{color:a.palette.text.secondary,variable:"theme.palette.text.secondary",displayVariable:"palette.text.secondary"}),e(t,{color:a.palette.text.disabled,variable:"theme.palette.text.disabled",displayVariable:"palette.text.disabled"}),e(t,{color:a.palette.text.icon,variable:"theme.palette.text.icon",displayVariable:"palette.text.icon"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Error"}),l(i,{sx:r,children:[e(t,{color:a.palette.error.light,variable:"theme.palette.error.light",displayVariable:"palette.error.light"}),e(t,{color:a.palette.error.main,variable:"theme.palette.error.main",displayVariable:"palette.error.main"}),e(t,{color:a.palette.error.dark,variable:"theme.palette.error.dark",displayVariable:"palette.error.dark"}),e(t,{color:a.palette.error.contrastText,variable:"theme.palette.error.contrastText",displayVariable:"palette.error.contrastText"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Warning"}),l(i,{sx:r,children:[e(t,{color:a.palette.warning.light,variable:"theme.palette.warning.light",displayVariable:"palette.warning.light"}),e(t,{color:a.palette.warning.main,variable:"theme.palette.warning.main",displayVariable:"palette.warning.main"}),e(t,{color:a.palette.warning.dark,variable:"theme.palette.warning.dark",displayVariable:"palette.warning.dark"}),e(t,{color:a.palette.warning.contrastText,variable:"theme.palette.warning.contrastText",displayVariable:"palette.warning.contrastText"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Info"}),l(i,{sx:r,children:[e(t,{color:a.palette.info.light,variable:"theme.palette.info.light",displayVariable:"palette.info.light"}),e(t,{color:a.palette.info.main,variable:"theme.palette.info.main",displayVariable:"palette.info.main"}),e(t,{color:a.palette.info.dark,variable:"theme.palette.info.dark",displayVariable:"palette.info.dark"}),e(t,{color:a.palette.info.contrastText,variable:"theme.palette.info.contrastText",displayVariable:"palette.info.contrastText"})]}),e(o,{variant:"h6",sx:{mb:2},children:"Success"}),l(i,{sx:r,children:[e(t,{color:a.palette.success.light,variable:"theme.palette.success.light",displayVariable:"palette.success.light"}),e(t,{color:a.palette.success.main,variable:"theme.palette.success.main",displayVariable:"palette.success.main"}),e(t,{color:a.palette.success.dark,variable:"theme.palette.success.dark",displayVariable:"palette.success.dark"}),e(t,{color:a.palette.success.contrastText,variable:"theme.palette.success.contrastText",displayVariable:"palette.success.contrastText"})]})]})};function c(a){const r={a:"a",h1:"h1",h2:"h2",li:"li",ul:"ul",...p(),...a.components};return l(y,{children:[e(r.h1,{children:"Colors"}),`
+`,e(r.h2,{children:"Theme Colors"}),`
+`,e(T,{}),`
+`,e(r.h2,{children:"Documentation"}),`
+`,l(r.ul,{children:[`
+`,e(r.li,{children:e(r.a,{href:"https://mui.com/material-ui/customization/theme-components/",children:"Material UI - Theme Customization"})}),`
+`,e(r.li,{children:e(r.a,{href:"https://m2.material.io/inline-tools/color/",children:"Material Design Color Palette Tool"})}),`
+`]})]})}function I(a={}){const{wrapper:r}={...p(),...a.components};return r?e(r,{...a,children:e(c,{...a})}):c(a)}export{t as ColorSwatch,T as ThemeColors,I as default};

package/dist/assets/customization-DuuWhJ6e.js

@@ -0,0 +1,111 @@
+import{n as i,o as n,p as r,F as c}from"./react-vendor-BVjvCnQb.js";function d(t){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...i(),...t.components};return r(c,{children:[n(e.h1,{children:"Customization"}),`
+`,r(e.p,{children:["MDX Docs uses ",n(e.a,{href:"https://mui.com/",children:"Material-UI"})," under the hood, giving you a flexible theming system with support for light/dark modes, preset themes, and deep component-level overrides."]}),`
+`,r(e.p,{children:["The ",n(e.code,{children:"theme"})," option can optionally be passed to ",n(e.code,{children:"createApp()"}),":"]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`import { createApp } from 'mdx-docs'
+
+createApp({ pages, site, theme: { /* ... */ } })
+`})}),`
+`,n(e.h2,{children:"Shorthand properties"}),`
+`,n(e.p,{children:"The simplest way to customize your docs is with the top-level shorthand properties:"}),`
+`,r(e.table,{children:[n(e.thead,{children:r(e.tr,{children:[n(e.th,{children:"Property"}),n(e.th,{children:"Type"}),n(e.th,{children:"Description"})]})}),r(e.tbody,{children:[r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"primaryColor"})}),n(e.td,{children:n(e.code,{children:"string"})}),n(e.td,{children:"Primary brand color (hex, rgb, etc.)"})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"fontFamily"})}),n(e.td,{children:n(e.code,{children:"string"})}),n(e.td,{children:"CSS font-family string"})]})]})]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`createApp({
+  pages,
+  site,
+  theme: {
+    primaryColor: '#6200ea',
+    fontFamily: '"Inter", sans-serif',
+  },
+})
+`})}),`
+`,n(e.p,{children:"These apply to both light and dark mode automatically."}),`
+`,n(e.h2,{children:"Built-in presets"}),`
+`,n(e.p,{children:"mdx-docs ships with four presets you can use as a starting point:"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`import { createApp, themes } from 'mdx-docs'
+
+createApp({ pages, site, theme: themes.ocean })
+`})}),`
+`,r(e.table,{children:[n(e.thead,{children:r(e.tr,{children:[n(e.th,{children:"Preset"}),n(e.th,{children:"Description"})]})}),r(e.tbody,{children:[r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"themes.default"})}),n(e.td,{children:"The default blue/pink palette"})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"themes.ocean"})}),n(e.td,{children:"Ocean blues — calm and professional"})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"themes.forest"})}),n(e.td,{children:"Forest greens — natural and subdued"})]}),r(e.tr,{children:[n(e.td,{children:n(e.code,{children:"themes.rose"})}),n(e.td,{children:"Rose reds — warm and bold"})]})]})]}),`
+`,n(e.p,{children:"Presets are plain objects, so you can extend them with spread syntax:"}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`createApp({
+  pages,
+  site,
+  theme: {
+    ...themes.forest,
+    fontFamily: '"Merriweather", serif',
+  },
+})
+`})}),`
+`,n(e.h2,{children:"Mode-specific overrides"}),`
+`,r(e.p,{children:["For full control, use the ",n(e.code,{children:"light"})," and ",n(e.code,{children:"dark"})," keys to provide MUI theme overrides that only apply in the respective mode. These are deep-merged on top of the base theme."]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`createApp({
+  pages,
+  site,
+  theme: {
+    primaryColor: '#6200ea',
+    light: {
+      palette: {
+        background: {
+          default: '#f0f4f8',
+          paper: '#ffffff',
+        },
+      },
+    },
+    dark: {
+      palette: {
+        primary: {
+          main: '#bb86fc',
+        },
+        background: {
+          default: '#0d0d0d',
+        },
+      },
+    },
+  },
+})
+`})}),`
+`,r(e.p,{children:["Any valid ",n(e.a,{href:"https://mui.com/material-ui/customization/theming/",children:"MUI theme object"})," is accepted under ",n(e.code,{children:"light"})," and ",n(e.code,{children:"dark"}),", including ",n(e.code,{children:"palette"}),", ",n(e.code,{children:"typography"}),", ",n(e.code,{children:"spacing"}),", and ",n(e.code,{children:"components"}),"."]}),`
+`,n(e.h2,{children:"Component overrides"}),`
+`,r(e.p,{children:["To restyle individual MUI components, use the ",n(e.code,{children:"components"})," key inside ",n(e.code,{children:"light"})," or ",n(e.code,{children:"dark"}),":"]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`createApp({
+  pages,
+  site,
+  theme: {
+    light: {
+      components: {
+        MuiButton: {
+          styleOverrides: {
+            root: {
+              borderRadius: 8,
+              textTransform: 'none',
+            },
+          },
+        },
+        MuiLink: {
+          styleOverrides: {
+            root: {
+              textDecoration: 'none',
+            },
+          },
+        },
+      },
+    },
+  },
+})
+`})}),`
+`,n(e.h2,{children:"Typography"}),`
+`,r(e.p,{children:["Override the font for headings and body text independently using the MUI ",n(e.code,{children:"typography"})," key:"]}),`
+`,n(e.pre,{children:n(e.code,{className:"language-js",children:`createApp({
+  pages,
+  site,
+  theme: {
+    fontFamily: '"Inter", sans-serif',
+    light: {
+      typography: {
+        h1: { fontWeight: 800 },
+        h2: { fontWeight: 700 },
+        body1: { lineHeight: 1.75 },
+      },
+    },
+  },
+})
+`})})]})}function o(t={}){const{wrapper:e}={...i(),...t.components};return e?n(e,{...t,children:n(d,{...t})}):d(t)}export{o as default};

package/dist/assets/examples-DBDWp4fA.js

@@ -0,0 +1,11 @@
+import{n as t,o as r,p as i,F as c}from"./react-vendor-BVjvCnQb.js";import{B as n}from"./Button-BXcSdEL6.js";import"./prism-DjoQ0BfU.js";import"./index-C5FzG5L5.js";import"./router-d4Dt6g8h.js";function a(e){const o={h1:"h1",p:"p",...t(),...e.components};return i(c,{children:[r(o.h1,{children:"Examples"}),`
+`,r(o.p,{children:"The following are some example pages that demonstrate showing React components from Material UI in MDX extended markdown pages."}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/alert",children:"Alert"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/button",children:"Button"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/card",children:"Card"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mb:1},href:"/chip",children:"Chip"}),`
+`,r("br",{}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/colors",children:"Colors"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/tabs",children:"Tabs"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mr:.5,mb:1},href:"/textfield",children:"TextField"}),`
+`,r(n,{variant:"contained",color:"primary",sx:{mb:1},href:"/typography",children:"Typography"})]})}function p(e={}){const{wrapper:o}={...t(),...e.components};return o?r(o,{...e,children:r(a,{...e})}):a(e)}export{p as default};