diff --git a/assets/AlertBanner.stories-c426409c.js b/assets/AlertBanner.stories-d01b2f2c.js similarity index 94% rename from assets/AlertBanner.stories-c426409c.js rename to assets/AlertBanner.stories-d01b2f2c.js index 5552725e..940b8b54 100644 --- a/assets/AlertBanner.stories-c426409c.js +++ b/assets/AlertBanner.stories-d01b2f2c.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as i}from"./chunk-WFFRPTHA-80d37c1b.js";import{A as m}from"./AlertBanner-d1cf2c2e.js";import{l as k}from"./mergeConfigWithCustom-aec35d44.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as c}from"./TetrislyProvider-679426f7.js";import{T as $}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./preview-errors-60885292.js";import"./index-356e4a49.js";import"./v4-4a60fe23.js";import"./tetrisly-icons.es-12549e88.js";import"./Button-62f4c63b.js";import"./index-52c2b68d.js";import"./IconButton-9e77b08a.js";import"./useAction-275346b1.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";const C=["none","success","warning","negative"],S=()=>e.jsx(e.Fragment,{children:C.map(r=>e.jsxs(c.section,{children:[e.jsxs(a,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",k.capitalize(r)]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(m,{text:"Alert text",intent:r})]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(m,{text:"Alert text",intent:r,my:"$dimension-500",action:[{label:"Click me",onClick:i("onClick")},{label:"Or click me",onClick:i("onClick")}]})]})]},r))}),M={title:"AlertBanner",component:m,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:i("onClick")},{label:"Action",onClick:i("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx($,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(S,{})})}}},t={},n={args:{intent:"success"}},s={args:{intent:"warning"}},o={args:{intent:"negative"}};var p,l,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var g,u,x;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{a as i}from"./chunk-WFFRPTHA-80d37c1b.js";import{A as m}from"./AlertBanner-d1cf2c2e.js";import{l as k}from"./mergeConfigWithCustom-aec35d44.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as c}from"./TetrislyProvider-679426f7.js";import{T as $}from"./TetDocs-8998b928.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./preview-errors-60885292.js";import"./index-356e4a49.js";import"./v4-4a60fe23.js";import"./tetrisly-icons.es-12549e88.js";import"./Button-62f4c63b.js";import"./index-52c2b68d.js";import"./IconButton-9e77b08a.js";import"./useAction-275346b1.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";const C=["none","success","warning","negative"],S=()=>e.jsx(e.Fragment,{children:C.map(r=>e.jsxs(c.section,{children:[e.jsxs(a,{px:{md:"$dimension-1000",_:"$dimension-500"},py:"$dimension-500",variant:"H1",children:["Intent: ",k.capitalize(r)]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: No"}),e.jsx(m,{text:"Alert text",intent:r})]}),e.jsxs(c.div,{px:{md:"$dimension-1000",_:"$dimension-500"},children:[e.jsx(a,{py:"$dimension-500",variant:"H2",children:"Action: Yes"}),e.jsx(m,{text:"Alert text",intent:r,my:"$dimension-500",action:[{label:"Click me",onClick:i("onClick")},{label:"Or click me",onClick:i("onClick")}]})]})]},r))}),M={title:"AlertBanner",component:m,tags:["autodocs"],args:{text:"Alert text",action:[{label:"Action",onClick:i("onClick")},{label:"Action",onClick:i("onClick")}]},argTypes:{intent:{options:["none","success","warning","negative"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"Prominent element used to display important messages or notifications to users. Alert Banners can convey various levels of urgency, such as success, warning, or error. They are designed to capture the user's attention and provide a clear and concise message."},page:()=>e.jsx($,{docs:"https://docs.tetrisly.com/components/list/alertbanner",children:e.jsx(S,{})})}}},t={},n={args:{intent:"success"}},s={args:{intent:"warning"}},o={args:{intent:"negative"}};var p,l,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(d=(l=t.parameters)==null?void 0:l.docs)==null?void 0:d.source}}};var g,u,x;n.parameters={...n.parameters,docs:{...(g=n.parameters)==null?void 0:g.docs,source:{originalSource:`{ args: { intent: 'success' } diff --git a/assets/Avatar.stories-71c65545.js b/assets/Avatar.stories-2be05560.js similarity index 96% rename from assets/Avatar.stories-71c65545.js rename to assets/Avatar.stories-2be05560.js index 789b055a..13633395 100644 --- a/assets/Avatar.stories-71c65545.js +++ b/assets/Avatar.stories-2be05560.js @@ -1,4 +1,4 @@ -import{j as a}from"./jsx-runtime-ffb262ed.js";import{A as u}from"./Avatar-aeb94954.js";import{l as h}from"./mergeConfigWithCustom-aec35d44.js";import{C as y}from"./Cols-5e984f12.js";import{S as t}from"./SectionHeader-e7c49046.js";import{t as n}from"./TetrislyProvider-679426f7.js";import{T as j}from"./TetDocs-85781681.js";import{a as f}from"./Appearance-35507110.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const v=["blue","green","grey","red","orange","raspberry","magenta","purple","grape","violet","cyan","teal","aquamarine","emerald"],$=["large","medium","small","xSmall","2xSmall"],S=["rounded","square"],A=["low","high"],p=({size:r,...e})=>a.jsx(n.div,{display:"flex",gap:"40px",alignItems:"center",children:$.map(s=>a.jsx(u,{...e,size:s},s))}),q=()=>a.jsx(a.Fragment,{children:A.map(r=>a.jsxs(n.section,{pb:"$space-component-padding-4xLarge",py:"$dimension-500",children:[a.jsxs(t,{px:{md:"$dimension-1000",_:"$dimension-500"},variant:"H1",as:"h2",children:[h.capitalize(r)," Emphasis"]}),a.jsx(y,{gap:"80px",px:{md:"$dimension-1000",_:"$dimension-500"},children:S.map(e=>a.jsxs(n.div,{display:"flex",flexDirection:"column",children:[a.jsx(t,{variant:"H2",as:"h3",py:"$dimension-500",children:e==="rounded"?"Shape: Rounded (Default)":"Shape: Square"}),a.jsx(n.hr,{}),a.jsxs(n.div,{display:"flex",flexDirection:"column",gap:"$space-component-gap-xLarge",py:"$space-component-padding-2xLarge",children:[r==="low"&&a.jsx(p,{appearance:"image",shape:e,img:{src:"https://thispersondoesnotexist.com/"}}),v.map(s=>a.jsx(p,{appearance:s,shape:e,emphasis:r,initials:"M"},`${s}${e}${r}`))]})]},e))})]},r))}),G={title:"Avatar",component:u,tags:["autodocs"],args:{img:{src:"https://thispersondoesnotexist.com/"}},argTypes:{img:{if:{arg:"appearance",eq:"image"}},initials:{if:{arg:"appearance",neq:"image"}},emphasis:{if:{arg:"appearance",neq:"image"}},appearance:{options:f,control:{type:"select"}}},parameters:{docs:{description:{component:"A visual representation of a user's identity, often displayed as a small image or icon. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces."},page:()=>a.jsx(j,{docs:"https://docs.tetrisly.com/components/list/avatar",children:a.jsx(q,{})})}}},o={argTypes:{appearance:f},args:{initials:"M",appearance:"cyan"}},i={args:{appearance:"image"}};var m,c,d;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as a}from"./jsx-runtime-ffb262ed.js";import{A as u}from"./Avatar-aeb94954.js";import{l as h}from"./mergeConfigWithCustom-aec35d44.js";import{C as y}from"./Cols-5e984f12.js";import{S as t}from"./SectionHeader-e7c49046.js";import{t as n}from"./TetrislyProvider-679426f7.js";import{T as j}from"./TetDocs-8998b928.js";import{a as f}from"./Appearance-35507110.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const v=["blue","green","grey","red","orange","raspberry","magenta","purple","grape","violet","cyan","teal","aquamarine","emerald"],$=["large","medium","small","xSmall","2xSmall"],S=["rounded","square"],A=["low","high"],p=({size:r,...e})=>a.jsx(n.div,{display:"flex",gap:"40px",alignItems:"center",children:$.map(s=>a.jsx(u,{...e,size:s},s))}),q=()=>a.jsx(a.Fragment,{children:A.map(r=>a.jsxs(n.section,{pb:"$space-component-padding-4xLarge",py:"$dimension-500",children:[a.jsxs(t,{px:{md:"$dimension-1000",_:"$dimension-500"},variant:"H1",as:"h2",children:[h.capitalize(r)," Emphasis"]}),a.jsx(y,{gap:"80px",px:{md:"$dimension-1000",_:"$dimension-500"},children:S.map(e=>a.jsxs(n.div,{display:"flex",flexDirection:"column",children:[a.jsx(t,{variant:"H2",as:"h3",py:"$dimension-500",children:e==="rounded"?"Shape: Rounded (Default)":"Shape: Square"}),a.jsx(n.hr,{}),a.jsxs(n.div,{display:"flex",flexDirection:"column",gap:"$space-component-gap-xLarge",py:"$space-component-padding-2xLarge",children:[r==="low"&&a.jsx(p,{appearance:"image",shape:e,img:{src:"https://thispersondoesnotexist.com/"}}),v.map(s=>a.jsx(p,{appearance:s,shape:e,emphasis:r,initials:"M"},`${s}${e}${r}`))]})]},e))})]},r))}),G={title:"Avatar",component:u,tags:["autodocs"],args:{img:{src:"https://thispersondoesnotexist.com/"}},argTypes:{img:{if:{arg:"appearance",eq:"image"}},initials:{if:{arg:"appearance",neq:"image"}},emphasis:{if:{arg:"appearance",neq:"image"}},appearance:{options:f,control:{type:"select"}}},parameters:{docs:{description:{component:"A visual representation of a user's identity, often displayed as a small image or icon. Avatars can be personalized with user-uploaded photos or auto-generated images and are commonly used in profile sections, comments, and messaging interfaces."},page:()=>a.jsx(j,{docs:"https://docs.tetrisly.com/components/list/avatar",children:a.jsx(q,{})})}}},o={argTypes:{appearance:f},args:{initials:"M",appearance:"cyan"}},i={args:{appearance:"image"}};var m,c,d;o.parameters={...o.parameters,docs:{...(m=o.parameters)==null?void 0:m.docs,source:{originalSource:`{ argTypes: { appearance: appearances }, diff --git a/assets/Badge.stories-b029c069.js b/assets/Badge.stories-db4fa75a.js similarity index 94% rename from assets/Badge.stories-b029c069.js rename to assets/Badge.stories-db4fa75a.js index 7c508736..5296b459 100644 --- a/assets/Badge.stories-b029c069.js +++ b/assets/Badge.stories-db4fa75a.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as r}from"./Badge-ea0f212c.js";import{l as j}from"./mergeConfigWithCustom-aec35d44.js";import{S as l}from"./SectionHeader-e7c49046.js";import{S as v,a as y}from"./States-c70e8d91.js";import{t as o}from"./TetrislyProvider-679426f7.js";import{a as $}from"./Appearance-35507110.js";import{T as B}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const p=["neutral","informative","positive","warning","negative"],I=["high","medium","low"],S=()=>e.jsx(e.Fragment,{children:I.map(a=>e.jsxs(o.section,{display:"flex",padding:"40px 0px",flexDirection:"column",children:[e.jsxs(l,{px:"$dimension-1000",variant:"H1",my:"auto",as:"h2",children:[j.capitalize(a)," Emphasis"]}),e.jsxs(o.div,{px:"$dimension-1000",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Intent"}),e.jsx(v,{states:p,gap:"$dimension-500",flexBasis:"$dimension-100"}),e.jsx(o.div,{py:"$dimension-500",display:"flex",flexWrap:"wrap",gap:"$dimension-500",children:p.map(s=>e.jsxs(o.div,{display:"flex",flexDirection:"column",gap:"$dimension-400",flexBasis:"100",flexShrink:"0",flexGrow:"1",children:[e.jsx(r,{intent:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{intent:s,emphasis:a,icon:"16-bolt"})]},s))})]}),e.jsxs(o.div,{px:"$dimension-1000",w:"100%",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Appearance"}),e.jsx(o.div,{children:e.jsx(o.div,{py:"$dimension-500",display:"flex",gap:"48px",flexWrap:"wrap",children:$.map(s=>e.jsxs(o.div,{display:"flex",gap:"72px",my:"20",flexDirection:"column",children:[e.jsx(y,{state:s}),e.jsxs(o.div,{display:"flex",flexWrap:"wrap",flexDirection:"column",gap:"$dimension-400",flexShrink:"0",children:[e.jsx(r,{appearance:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{appearance:s,emphasis:a,icon:"16-bolt"})]},s)]}))})})]})]},a))}),K={title:"Badge",component:r,tags:["autodocs"],argTypes:{emphasis:{control:{type:"select",options:["high","medium","low"]}}},parameters:{docs:{description:{component:"A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates."},page:()=>e.jsx(B,{docs:"https://docs.tetrisly.com/components/list/badge",children:e.jsx(S,{})})}}},i={args:{intent:"informative",emphasis:"high",label:"Label"}},n={args:{appearance:"blue",icon:"16-bolt"}},t={args:{intent:"informative",label:"Label",beforeIcon:"16-bolt",afterIcon:"16-bolt"}};var m,c,d;i.parameters={...i.parameters,docs:{...(m=i.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as r}from"./Badge-ea0f212c.js";import{l as j}from"./mergeConfigWithCustom-aec35d44.js";import{S as l}from"./SectionHeader-e7c49046.js";import{S as v,a as y}from"./States-c70e8d91.js";import{t as o}from"./TetrislyProvider-679426f7.js";import{a as $}from"./Appearance-35507110.js";import{T as B}from"./TetDocs-8998b928.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const p=["neutral","informative","positive","warning","negative"],I=["high","medium","low"],S=()=>e.jsx(e.Fragment,{children:I.map(a=>e.jsxs(o.section,{display:"flex",padding:"40px 0px",flexDirection:"column",children:[e.jsxs(l,{px:"$dimension-1000",variant:"H1",my:"auto",as:"h2",children:[j.capitalize(a)," Emphasis"]}),e.jsxs(o.div,{px:"$dimension-1000",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Intent"}),e.jsx(v,{states:p,gap:"$dimension-500",flexBasis:"$dimension-100"}),e.jsx(o.div,{py:"$dimension-500",display:"flex",flexWrap:"wrap",gap:"$dimension-500",children:p.map(s=>e.jsxs(o.div,{display:"flex",flexDirection:"column",gap:"$dimension-400",flexBasis:"100",flexShrink:"0",flexGrow:"1",children:[e.jsx(r,{intent:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{intent:s,emphasis:a,icon:"16-bolt"})]},s))})]}),e.jsxs(o.div,{px:"$dimension-1000",w:"100%",children:[e.jsx(l,{variant:"H2",as:"h3",py:"$dimension-500",children:"Appearance"}),e.jsx(o.div,{children:e.jsx(o.div,{py:"$dimension-500",display:"flex",gap:"48px",flexWrap:"wrap",children:$.map(s=>e.jsxs(o.div,{display:"flex",gap:"72px",my:"20",flexDirection:"column",children:[e.jsx(y,{state:s}),e.jsxs(o.div,{display:"flex",flexWrap:"wrap",flexDirection:"column",gap:"$dimension-400",flexShrink:"0",children:[e.jsx(r,{appearance:s,emphasis:a,label:"Badge Text"}),e.jsx(r,{appearance:s,emphasis:a,icon:"16-bolt"})]},s)]}))})})]})]},a))}),K={title:"Badge",component:r,tags:["autodocs"],argTypes:{emphasis:{control:{type:"select",options:["high","medium","low"]}}},parameters:{docs:{description:{component:"A small, visually distinct element used to display numbers, small pieces of information, or statuses. Badges are often paired with icons or other components to convey relevant information or updates."},page:()=>e.jsx(B,{docs:"https://docs.tetrisly.com/components/list/badge",children:e.jsx(S,{})})}}},i={args:{intent:"informative",emphasis:"high",label:"Label"}},n={args:{appearance:"blue",icon:"16-bolt"}},t={args:{intent:"informative",label:"Label",beforeIcon:"16-bolt",afterIcon:"16-bolt"}};var m,c,d;i.parameters={...i.parameters,docs:{...(m=i.parameters)==null?void 0:m.docs,source:{originalSource:`{ args: { intent: 'informative', emphasis: 'high', diff --git a/assets/BooleanPill.stories-702ad857.js b/assets/BooleanPill.stories-d228cfef.js similarity index 95% rename from assets/BooleanPill.stories-702ad857.js rename to assets/BooleanPill.stories-d228cfef.js index b05b7e74..42f5a3a9 100644 --- a/assets/BooleanPill.stories-702ad857.js +++ b/assets/BooleanPill.stories-d228cfef.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as I}from"./BooleanPill-a9ee29cc.js";import{l as E}from"./mergeConfigWithCustom-aec35d44.js";import{S as p}from"./SectionHeader-e7c49046.js";import{t as a}from"./TetrislyProvider-679426f7.js";import{T as M}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./Avatar-aeb94954.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const u=["default","disabled"],T=[!1,!0],k=[!1,!0],N=[{id:"0",text:"Value",onChange:()=>{}},{id:"1",text:"Value",avatar:{initials:"M"}},{id:"2",text:"Value",avatar:{image:"https://thispersondoesnotexist.com/"}}],m=()=>e.jsx(e.Fragment,{children:u.map(t=>e.jsxs(a.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(p,{variant:"Hero",as:"h2",px:"$dimension-1000",children:E.startCase(t)}),T.map(s=>e.jsxs(a.div,{display:"flex",flexDirection:"column",bg:s?"$color-background-neutral-subtle":void 0,children:[e.jsx(p,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:s?"Inverted":"Primary"}),k.map(l=>e.jsxs(a.div,{px:"$dimension-1000",pb:"$dimension-500",children:[e.jsxs(p,{variant:"H3",as:"h4",pt:"$dimension-500",children:["Selected: ",String(l)]}),e.jsx(a.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",flexWrap:"wrap",justifyContent:"flex-start",flexDirection:"row",gap:"$dimension-300",py:"$dimension-500",children:N.map(({id:V,...C})=>e.jsx(I,{state:t,isInverted:s,isSelected:l,...C},V))})]},`${u}-${s}-${l}`))]},`${t}-${s}`))]},t))});try{m.displayName="BooleanPillDocs",m.__docgenInfo={description:"",displayName:"BooleanPillDocs",props:{}}}catch{}const ae={title:"BooleanPill",component:I,tags:["autodocs"],argTypes:{},args:{state:"default",text:"Value"},parameters:{docs:{description:{component:"A compact, rounded indicator used to represent tags, categories, or statuses. Pills often include text and/or icons and can be interactive, such as allowing users to remove a filter or tag."},page:()=>e.jsx(M,{docs:"https://docs.tetrisly.com/components/in-progress/pill",children:e.jsx(m,{})})}}},r={args:{state:"default"}},o={args:{state:"default",avatar:{image:"https://thispersondoesnotexist.com/"}}},i={args:{state:"disabled"}},n={args:{isSelected:!0}},d={args:{isSelected:!0,state:"disabled"}},c={args:{isSelected:!0,avatar:{appearance:"magenta",initials:"M"}}};var g,x,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as I}from"./BooleanPill-a9ee29cc.js";import{l as E}from"./mergeConfigWithCustom-aec35d44.js";import{S as p}from"./SectionHeader-e7c49046.js";import{t as a}from"./TetrislyProvider-679426f7.js";import{T as M}from"./TetDocs-8998b928.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./Avatar-aeb94954.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const u=["default","disabled"],T=[!1,!0],k=[!1,!0],N=[{id:"0",text:"Value",onChange:()=>{}},{id:"1",text:"Value",avatar:{initials:"M"}},{id:"2",text:"Value",avatar:{image:"https://thispersondoesnotexist.com/"}}],m=()=>e.jsx(e.Fragment,{children:u.map(t=>e.jsxs(a.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(p,{variant:"Hero",as:"h2",px:"$dimension-1000",children:E.startCase(t)}),T.map(s=>e.jsxs(a.div,{display:"flex",flexDirection:"column",bg:s?"$color-background-neutral-subtle":void 0,children:[e.jsx(p,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:s?"Inverted":"Primary"}),k.map(l=>e.jsxs(a.div,{px:"$dimension-1000",pb:"$dimension-500",children:[e.jsxs(p,{variant:"H3",as:"h4",pt:"$dimension-500",children:["Selected: ",String(l)]}),e.jsx(a.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",flexWrap:"wrap",justifyContent:"flex-start",flexDirection:"row",gap:"$dimension-300",py:"$dimension-500",children:N.map(({id:V,...C})=>e.jsx(I,{state:t,isInverted:s,isSelected:l,...C},V))})]},`${u}-${s}-${l}`))]},`${t}-${s}`))]},t))});try{m.displayName="BooleanPillDocs",m.__docgenInfo={description:"",displayName:"BooleanPillDocs",props:{}}}catch{}const ae={title:"BooleanPill",component:I,tags:["autodocs"],argTypes:{},args:{state:"default",text:"Value"},parameters:{docs:{description:{component:"A compact, rounded indicator used to represent tags, categories, or statuses. Pills often include text and/or icons and can be interactive, such as allowing users to remove a filter or tag."},page:()=>e.jsx(M,{docs:"https://docs.tetrisly.com/components/in-progress/pill",children:e.jsx(m,{})})}}},r={args:{state:"default"}},o={args:{state:"default",avatar:{image:"https://thispersondoesnotexist.com/"}}},i={args:{state:"disabled"}},n={args:{isSelected:!0}},d={args:{isSelected:!0,state:"disabled"}},c={args:{isSelected:!0,avatar:{appearance:"magenta",initials:"M"}}};var g,x,f;r.parameters={...r.parameters,docs:{...(g=r.parameters)==null?void 0:g.docs,source:{originalSource:`{ args: { state: 'default' } diff --git a/assets/Button.stories-81def227.js b/assets/Button.stories-41e01317.js similarity index 99% rename from assets/Button.stories-81def227.js rename to assets/Button.stories-41e01317.js index 6e8172d7..e5cb76c2 100644 --- a/assets/Button.stories-81def227.js +++ b/assets/Button.stories-41e01317.js @@ -1,4 +1,4 @@ -import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as D}from"./Button-62f4c63b.js";import{l as w}from"./mergeConfigWithCustom-aec35d44.js";import{t as i}from"./TetrislyProvider-679426f7.js";import{S as k}from"./SectionHeader-e7c49046.js";import{T as se}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const ce=a=>a==="bare"?["medium","large"]:["small","medium","large"],t=({variant:a,...l})=>e.jsx(i.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",justifyContent:"center",flexDirection:"column",gap:"$dimension-400",py:"$dimension-500",children:ce(a).map(u=>e.jsx(D,{...l,size:u,variant:a},u))});try{t.displayName="ButtonSizes",t.__docgenInfo={description:"",displayName:"ButtonSizes",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"loading"'},{value:'"selected"'}]}},custom:{defaultValue:null,description:"",name:"custom",required:!1,type:{name:"ButtonConfig"}},beforeIcon:{defaultValue:null,description:"",name:"beforeIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},afterIcon:{defaultValue:null,description:"",name:"afterIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},hasDropdownIndicator:{defaultValue:null,description:"",name:"hasDropdownIndicator",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}}}}}catch{}const x=({variant:a,appearance:l,intent:u})=>{const o={variant:a,appearance:l,intent:u};return e.jsxs(i.div,{display:"flex",gap:"$dimension-300",pl:"5px",overflowX:"scroll",children:[e.jsx(t,{...o,label:"Button label"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",hasDropdownIndicator:!0}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",hasDropdownIndicator:!0})]})};try{x.displayName="ButtonRow",x.__docgenInfo={description:"",displayName:"ButtonRow",props:{intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}}}}}catch{}const de=["default","ghost","bare"],me=a=>a==="default"?["primary","secondary","inverted"]:["primary","secondary","inverted","reverseInverted"],pe=(a,l)=>a==="default"&&l==="secondary"||l==="primary"?["none","success","destructive"]:["none"],B=()=>e.jsx(e.Fragment,{children:de.map(a=>e.jsxs(i.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(k,{variant:"Hero",as:"h2",px:"$dimension-1000",children:w.startCase(a)}),me(a).map(l=>e.jsxs(i.div,{display:"flex",flexDirection:"column",bg:l==="inverted"?"$color-background-inverted":void 0,children:[e.jsx(k,{variant:"H2",inverted:l==="inverted",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:w.startCase(l)}),pe(a,l).map(u=>e.jsxs(i.div,{display:"flex",flexDirection:"column",px:"$dimension-1000",pb:"$dimension-500",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsxs(k,{variant:"H3",as:"h4",pt:"$dimension-500",inverted:l==="inverted",children:["Intent: ",w.startCase(u)]}),e.jsx(x,{variant:a,appearance:l,intent:u})]},u))]},l))]},a))});try{B.displayName="ButtonDocs",B.__docgenInfo={description:"",displayName:"ButtonDocs",props:{}}}catch{}const $e={title:"Button",component:D,tags:["autodocs"],args:{label:"Button label"},argTypes:{state:{options:[void 0,"disabled","loading","selected"],defaultValue:void 0,control:{type:"radio"}},size:{options:["small","medium","large"],defaultValue:"medium",control:{type:"radio"}},variant:{options:["default","ghost","bare"],defaultValue:"default",control:{type:"radio"}},intent:{options:["none","success","destructive"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users."},page:()=>e.jsx(se,{docs:"https://docs.tetrisly.com/components/list/button",children:e.jsx(B,{})})}}},r={argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},s={...r,args:{state:"loading"}},c={...r,args:{state:"disabled"}},d={...r,args:{beforeIcon:"20-placeholder"}},m={...r,args:{afterIcon:"20-placeholder"}},p={...r,args:{hasDropdownIndicator:!0}},v={args:{variant:"ghost"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},f={...v,args:{state:"loading"}},h={...v,args:{state:"disabled"}},n={args:{variant:"bare"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}},size:{options:["medium","large"],defaultValue:"medium",control:{type:"radio"}}}},g={...n,args:{state:"loading",variant:"bare"}},b={...n,args:{state:"disabled",variant:"bare"}},y={render:()=>e.jsx("div",{style:{display:"flex",width:"400px",flexDirection:"column"},children:e.jsx(D,{label:"Button 1"})})};var I,j,z;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`{ +import{j as e}from"./jsx-runtime-ffb262ed.js";import{B as D}from"./Button-62f4c63b.js";import{l as w}from"./mergeConfigWithCustom-aec35d44.js";import{t as i}from"./TetrislyProvider-679426f7.js";import{S as k}from"./SectionHeader-e7c49046.js";import{T as se}from"./TetDocs-8998b928.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const ce=a=>a==="bare"?["medium","large"]:["small","medium","large"],t=({variant:a,...l})=>e.jsx(i.div,{display:"flex",flexBasis:"180px",flexGrow:"1",flexShrink:"0",alignItems:"flex-start",justifyContent:"center",flexDirection:"column",gap:"$dimension-400",py:"$dimension-500",children:ce(a).map(u=>e.jsx(D,{...l,size:u,variant:a},u))});try{t.displayName="ButtonSizes",t.__docgenInfo={description:"",displayName:"ButtonSizes",props:{label:{defaultValue:null,description:"",name:"label",required:!1,type:{name:"string"}},state:{defaultValue:null,description:"",name:"state",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"loading"'},{value:'"selected"'}]}},custom:{defaultValue:null,description:"",name:"custom",required:!1,type:{name:"ButtonConfig"}},beforeIcon:{defaultValue:null,description:"",name:"beforeIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},afterIcon:{defaultValue:null,description:"",name:"afterIcon",required:!1,type:{name:"enum",value:[{value:'"20-accesibility"'},{value:'"20-activity"'},{value:'"20-alarm-clock"'},{value:'"20-alert-fill"'},{value:'"20-alert"'},{value:'"20-anchor"'},{value:'"20-apps"'},{value:'"20-archive"'},{value:'"20-arrow-down-left"'},{value:'"20-arrow-down-right"'},{value:'"20-arrow-down"'},{value:'"20-arrow-left"'},{value:'"20-arrow-right"'},{value:'"20-arrow-up-left"'},{value:'"20-arrow-up-right"'},{value:'"20-arrow-up"'},{value:'"20-arrowhead-down"'},{value:'"20-arrowhead-left"'},{value:'"20-arrowhead-right"'},{value:'"20-arrowhead-up"'},{value:'"20-attachment"'},{value:'"20-background"'},{value:'"20-backspace"'},{value:'"20-backward"'},{value:'"20-bank"'},{value:'"20-battery-charging"'},{value:'"20-battery-empty"'},{value:'"20-battery-full"'},{value:'"20-battery-low"'},{value:'"20-battery-medium"'},{value:'"20-bell"'},{value:'"20-block"'},{value:'"20-bluetooth-off"'},{value:'"20-bluetooth"'},{value:'"20-bolt"'},{value:'"20-book"'},{value:'"20-bookmark"'},{value:'"20-border-all"'},{value:'"20-border-bottom"'},{value:'"20-border-horizontal"'},{value:'"20-border-inner"'},{value:'"20-border-left"'},{value:'"20-border-right"'},{value:'"20-border-style"'},{value:'"20-border-top"'},{value:'"20-border-vertical"'},{value:'"20-brackets-curly"'},{value:'"20-brain"'},{value:'"20-broadcast"'},{value:'"20-brush"'},{value:'"20-bug"'},{value:'"20-bulb"'},{value:'"20-calculator"'},{value:'"20-calendar-check"'},{value:'"20-calendar-close"'},{value:'"20-calendar-edit"'},{value:'"20-calendar-minus"'},{value:'"20-calendar-plus"'},{value:'"20-calendar"'},{value:'"20-camera"'},{value:'"20-card"'},{value:'"20-chart-bar-box"'},{value:'"20-chart-bar"'},{value:'"20-chart-line"'},{value:'"20-chart-pie"'},{value:'"20-chat"'},{value:'"20-check-badge-fill"'},{value:'"20-check-badge"'},{value:'"20-check-circle-fill"'},{value:'"20-check-circle"'},{value:'"20-check-large"'},{value:'"20-check-small"'},{value:'"20-chevron-down-small-circle"'},{value:'"20-chevron-down-small-fill"'},{value:'"20-chevron-down-small"'},{value:'"20-chevron-down"'},{value:'"20-chevron-left-small-circle"'},{value:'"20-chevron-left-small-fill"'},{value:'"20-chevron-left-small"'},{value:'"20-chevron-left"'},{value:'"20-chevron-right-small-circle"'},{value:'"20-chevron-right-small-fill"'},{value:'"20-chevron-right-small"'},{value:'"20-chevron-right"'},{value:'"20-chevron-up-small-circle"'},{value:'"20-chevron-up-small-fill"'},{value:'"20-chevron-up-small"'},{value:'"20-chevron-up"'},{value:'"20-clipboard"'},{value:'"20-close"'},{value:'"20-cloud"'},{value:'"20-code-2"'},{value:'"20-code"'},{value:'"20-command"'},{value:'"20-comment"'},{value:'"20-company"'},{value:'"20-compass"'},{value:'"20-copy"'},{value:'"20-cpu"'},{value:'"20-crown"'},{value:'"20-cursor-arrow-fill"'},{value:'"20-cursor-arrow"'},{value:'"20-cursor-text"'},{value:'"20-database"'},{value:'"20-delete"'},{value:'"20-desktop"'},{value:'"20-devices"'},{value:'"20-diamond"'},{value:'"20-dns"'},{value:'"20-download"'},{value:'"20-drag-drop-horizontal"'},{value:'"20-drag-drop-vertical"'},{value:'"20-edit"'},{value:'"20-email"'},{value:'"20-emoji-big-smile"'},{value:'"20-emoji-sad"'},{value:'"20-emoji-smile"'},{value:'"20-error-fill"'},{value:'"20-error"'},{value:'"20-extension"'},{value:'"20-eye-off"'},{value:'"20-eye"'},{value:'"20-file-check"'},{value:'"20-file-close"'},{value:'"20-file-edit"'},{value:'"20-file-minus"'},{value:'"20-file-plus"'},{value:'"20-file"'},{value:'"20-filter"'},{value:'"20-fingerprint"'},{value:'"20-fire"'},{value:'"20-flag"'},{value:'"20-folder-check"'},{value:'"20-folder-close"'},{value:'"20-folder-edit"'},{value:'"20-folder-minus"'},{value:'"20-folder-plus"'},{value:'"20-folder"'},{value:'"20-format-align-center"'},{value:'"20-format-align-justify"'},{value:'"20-format-align-left"'},{value:'"20-format-align-right"'},{value:'"20-format-all-small-caps"'},{value:'"20-format-bold"'},{value:'"20-format-font-size"'},{value:'"20-format-indent-decrease"'},{value:'"20-format-indent-increase"'},{value:'"20-format-italic"'},{value:'"20-format-letter-spacing"'},{value:'"20-format-line-height"'},{value:'"20-format-lowercase"'},{value:'"20-format-paragraph-spacing"'},{value:'"20-format-scale-horizontal"'},{value:'"20-format-scale-vertical"'},{value:'"20-format-small-caps"'},{value:'"20-format-strikethrough"'},{value:'"20-format-subscript"'},{value:'"20-format-superscript"'},{value:'"20-format-titlecase"'},{value:'"20-format-underline"'},{value:'"20-format-uppercase"'},{value:'"20-forward"'},{value:'"20-fullscreen-exit"'},{value:'"20-fullscreen"'},{value:'"20-function"'},{value:'"20-git-branch"'},{value:'"20-git-commit"'},{value:'"20-git-diff"'},{value:'"20-git-fork"'},{value:'"20-git-merge"'},{value:'"20-git-pull-request"'},{value:'"20-globe"'},{value:'"20-hashtag"'},{value:'"20-heading"'},{value:'"20-headphones"'},{value:'"20-health"'},{value:'"20-heart"'},{value:'"20-help-fill"'},{value:'"20-help"'},{value:'"20-home"'},{value:'"20-horizontal-align-center"'},{value:'"20-horizontal-align-left"'},{value:'"20-horizontal-align-right"'},{value:'"20-hourglass"'},{value:'"20-image-check"'},{value:'"20-image-close"'},{value:'"20-image-edit"'},{value:'"20-image-minus"'},{value:'"20-image-plus"'},{value:'"20-image"'},{value:'"20-images"'},{value:'"20-inbox"'},{value:'"20-info-circle"'},{value:'"20-info-fill"'},{value:'"20-key"'},{value:'"20-keyboard"'},{value:'"20-label"'},{value:'"20-laptop"'},{value:'"20-layer-align-bottom-center"'},{value:'"20-layer-align-horizontal"'},{value:'"20-layer-align-left-center"'},{value:'"20-layer-align-right-center"'},{value:'"20-layer-align-top-center"'},{value:'"20-layer-align-vertical"'},{value:'"20-layer-three"'},{value:'"20-layer-two"'},{value:'"20-layout-swap-horizontal"'},{value:'"20-layout-swap-vertical"'},{value:'"20-link-broken"'},{value:'"20-link"'},{value:'"20-list-bullet"'},{value:'"20-list-check"'},{value:'"20-list-ordered"'},{value:'"20-list-unordered"'},{value:'"20-lock"'},{value:'"20-log-in"'},{value:'"20-log-out"'},{value:'"20-mail"'},{value:'"20-map"'},{value:'"20-marker-pin"'},{value:'"20-math-alpha"'},{value:'"20-math-angle"'},{value:'"20-math-beta"'},{value:'"20-math-gamma"'},{value:'"20-math-infinite"'},{value:'"20-math-omega"'},{value:'"20-math-pi"'},{value:'"20-math-sigma"'},{value:'"20-math-sine-wawe"'},{value:'"20-math-square-root "'},{value:'"20-math-theta"'},{value:'"20-megaphone"'},{value:'"20-menu"'},{value:'"20-message"'},{value:'"20-mic"'},{value:'"20-minus"'},{value:'"20-mobile"'},{value:'"20-more-horizontal"'},{value:'"20-more-vertical"'},{value:'"20-mouse"'},{value:'"20-navigation"'},{value:'"20-notification"'},{value:'"20-open-in-new"'},{value:'"20-option"'},{value:'"20-package"'},{value:'"20-paintroller"'},{value:'"20-paperplane"'},{value:'"20-paragraph"'},{value:'"20-pause-circle"'},{value:'"20-pause"'},{value:'"20-phone-call"'},{value:'"20-phone-callback"'},{value:'"20-phone-forwarded"'},{value:'"20-phone-incoming"'},{value:'"20-phone-missed"'},{value:'"20-phone-outgoing"'},{value:'"20-phone"'},{value:'"20-pin"'},{value:'"20-placeholder-2"'},{value:'"20-placeholder"'},{value:'"20-play-circle"'},{value:'"20-play"'},{value:'"20-plugin"'},{value:'"20-plus"'},{value:'"20-print"'},{value:'"20-questionmark"'},{value:'"20-quote"'},{value:'"20-rainbow"'},{value:'"20-receipt"'},{value:'"20-redo"'},{value:'"20-refresh"'},{value:'"20-repeat"'},{value:'"20-reply"'},{value:'"20-robot"'},{value:'"20-scissors"'},{value:'"20-search"'},{value:'"20-settings"'},{value:'"20-share"'},{value:'"20-shield"'},{value:'"20-shirt"'},{value:'"20-shopping-basket"'},{value:'"20-shopping-cart"'},{value:'"20-sidebar-hide"'},{value:'"20-sidebar-show"'},{value:'"20-slider"'},{value:'"20-speedmeter"'},{value:'"20-star-filled"'},{value:'"20-star-half-filled"'},{value:'"20-star"'},{value:'"20-stopwatch"'},{value:'"20-suitcase"'},{value:'"20-sun"'},{value:'"20-tablet"'},{value:'"20-tag"'},{value:'"20-target-off"'},{value:'"20-target"'},{value:'"20-terminal-2"'},{value:'"20-terminal"'},{value:'"20-tetrisly"'},{value:'"20-text"'},{value:'"20-thumb-down"'},{value:'"20-thumb-up"'},{value:'"20-ticket"'},{value:'"20-time-clock"'},{value:'"20-toggle-off"'},{value:'"20-toggle-on"'},{value:'"20-transaction-horizontal"'},{value:'"20-transaction-vertical"'},{value:'"20-tree"'},{value:'"20-trend-down"'},{value:'"20-trend-up"'},{value:'"20-turn-off"'},{value:'"20-tv"'},{value:'"20-undo"'},{value:'"20-unfold-less"'},{value:'"20-unfold-more"'},{value:'"20-unlock"'},{value:'"20-upload"'},{value:'"20-user-check"'},{value:'"20-user-close"'},{value:'"20-user-edit"'},{value:'"20-user-minus"'},{value:'"20-user-plus"'},{value:'"20-user"'},{value:'"20-users"'},{value:'"20-vertical-align-bottom"'},{value:'"20-vertical-align-center"'},{value:'"20-vertical-align-top"'},{value:'"20-video-camera"'},{value:'"20-video"'},{value:'"20-view-boxes"'},{value:'"20-view-columns"'},{value:'"20-view-dashboard"'},{value:'"20-view-day"'},{value:'"20-view-layout-bottom"'},{value:'"20-view-layout-grid"'},{value:'"20-view-layout-left"'},{value:'"20-view-layout-right"'},{value:'"20-view-layout-top"'},{value:'"20-view-lp"'},{value:'"20-view-rows"'},{value:'"20-view-schedule"'},{value:'"20-view-slider"'},{value:'"20-view-table"'},{value:'"20-voice"'},{value:'"20-voicemail"'},{value:'"20-volume-max"'},{value:'"20-volume-medium"'},{value:'"20-volume-min"'},{value:'"20-volume-mute"'},{value:'"20-wallet"'},{value:'"20-warning-fill"'},{value:'"20-warning"'},{value:'"20-watch"'},{value:'"20-water-drop"'},{value:'"20-wifi-off"'},{value:'"20-wifi"'}]}},hasDropdownIndicator:{defaultValue:null,description:"",name:"hasDropdownIndicator",required:!1,type:{name:"boolean"}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}}}}}catch{}const x=({variant:a,appearance:l,intent:u})=>{const o={variant:a,appearance:l,intent:u};return e.jsxs(i.div,{display:"flex",gap:"$dimension-300",pl:"5px",overflowX:"scroll",children:[e.jsx(t,{...o,label:"Button label"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",afterIcon:"20-placeholder"}),e.jsx(t,{...o,label:"Button label",hasDropdownIndicator:!0}),e.jsx(t,{...o,label:"Button label",beforeIcon:"20-placeholder",hasDropdownIndicator:!0})]})};try{x.displayName="ButtonRow",x.__docgenInfo={description:"",displayName:"ButtonRow",props:{intent:{defaultValue:null,description:"",name:"intent",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"success"'},{value:'"destructive"'}]}},appearance:{defaultValue:null,description:"",name:"appearance",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"inverted"'},{value:'"reverseInverted"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"default"'},{value:'"bare"'},{value:'"ghost"'}]}}}}}catch{}const de=["default","ghost","bare"],me=a=>a==="default"?["primary","secondary","inverted"]:["primary","secondary","inverted","reverseInverted"],pe=(a,l)=>a==="default"&&l==="secondary"||l==="primary"?["none","success","destructive"]:["none"],B=()=>e.jsx(e.Fragment,{children:de.map(a=>e.jsxs(i.section,{display:"flex",pt:"$dimension-500",flexDirection:"column",children:[e.jsx(k,{variant:"Hero",as:"h2",px:"$dimension-1000",children:w.startCase(a)}),me(a).map(l=>e.jsxs(i.div,{display:"flex",flexDirection:"column",bg:l==="inverted"?"$color-background-inverted":void 0,children:[e.jsx(k,{variant:"H2",inverted:l==="inverted",as:"h3",px:"$dimension-1000",py:"$dimension-500",borderBottom:"$color-neutral-strong",children:w.startCase(l)}),pe(a,l).map(u=>e.jsxs(i.div,{display:"flex",flexDirection:"column",px:"$dimension-1000",pb:"$dimension-500",borderBottomWidth:"1px",borderBottomColor:"$color-border-neutral-subtle",children:[e.jsxs(k,{variant:"H3",as:"h4",pt:"$dimension-500",inverted:l==="inverted",children:["Intent: ",w.startCase(u)]}),e.jsx(x,{variant:a,appearance:l,intent:u})]},u))]},l))]},a))});try{B.displayName="ButtonDocs",B.__docgenInfo={description:"",displayName:"ButtonDocs",props:{}}}catch{}const $e={title:"Button",component:D,tags:["autodocs"],args:{label:"Button label"},argTypes:{state:{options:[void 0,"disabled","loading","selected"],defaultValue:void 0,control:{type:"radio"}},size:{options:["small","medium","large"],defaultValue:"medium",control:{type:"radio"}},variant:{options:["default","ghost","bare"],defaultValue:"default",control:{type:"radio"}},intent:{options:["none","success","destructive"],defaultValue:"none",control:{type:"radio"}}},parameters:{docs:{description:{component:"A versatile and interactive element. Buttons allow users to perform actions and navigate through an application. They come in various styles and sizes, providing clear visual cues and feedback to users."},page:()=>e.jsx(se,{docs:"https://docs.tetrisly.com/components/list/button",children:e.jsx(B,{})})}}},r={argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},s={...r,args:{state:"loading"}},c={...r,args:{state:"disabled"}},d={...r,args:{beforeIcon:"20-placeholder"}},m={...r,args:{afterIcon:"20-placeholder"}},p={...r,args:{hasDropdownIndicator:!0}},v={args:{variant:"ghost"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}}}},f={...v,args:{state:"loading"}},h={...v,args:{state:"disabled"}},n={args:{variant:"bare"},argTypes:{appearance:{options:["primary","secondary","inverted","reverseInverted"],defaultValue:"primary",control:{type:"radio"}},size:{options:["medium","large"],defaultValue:"medium",control:{type:"radio"}}}},g={...n,args:{state:"loading",variant:"bare"}},b={...n,args:{state:"disabled",variant:"bare"}},y={render:()=>e.jsx("div",{style:{display:"flex",width:"400px",flexDirection:"column"},children:e.jsx(D,{label:"Button 1"})})};var I,j,z;r.parameters={...r.parameters,docs:{...(I=r.parameters)==null?void 0:I.docs,source:{originalSource:`{ argTypes: { appearance: { options: ['primary', 'secondary', 'inverted', 'reverseInverted'], diff --git a/assets/ButtonGroup.stories-d78c2410.js b/assets/ButtonGroup.stories-f3a487aa.js similarity index 92% rename from assets/ButtonGroup.stories-d78c2410.js rename to assets/ButtonGroup.stories-f3a487aa.js index 9a928dc6..5eb00b50 100644 --- a/assets/ButtonGroup.stories-d78c2410.js +++ b/assets/ButtonGroup.stories-f3a487aa.js @@ -1,4 +1,4 @@ -import{j as t}from"./jsx-runtime-ffb262ed.js";import{B as c}from"./ButtonGroup-2df34866.js";import{B as o}from"./Button-62f4c63b.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as s}from"./TetrislyProvider-679426f7.js";import{v as d}from"./v4-4a60fe23.js";import{T as b}from"./TetDocs-85781681.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./mergeConfigWithCustom-aec35d44.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-74beb656.js";import"./iframe-e2d638c9.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const x=[4,3,2],f=["medium","small"],i=()=>t.jsx(t.Fragment,{children:x.map(e=>t.jsxs(s.section,{display:"flex",pt:"$dimension-500",pb:"$dimension-500",flexDirection:"column",children:[t.jsxs(a,{variant:"H1",as:"h1",px:"$dimension-1000",children:[e," items"]}),f.map(n=>t.jsxs(s.div,{display:"flex",flexDirection:"column",children:[t.jsxs(a,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-300",borderBottom:"$color-neutral-strong",children:["Size: ",n==="medium"?"Medium (Default)":"Small"]}),t.jsx(s.div,{px:"$dimension-1000",pb:"$dimension-500",mt:"$dimension-400",mb:"$dimension-400",children:t.jsx(c,{children:[...Array(e)].map(()=>{const u=d();return t.jsx(o,{label:"Button label"},`button-item-${u}`)})})},n)]},n))]},e))});try{i.displayName="ButtonGroupDocs",i.__docgenInfo={description:"",displayName:"ButtonGroupDocs",props:{}}}catch{}const I={title:"ButtonGroup",component:c,tags:["autodocs"],argTypes:{size:{options:["small","medium"],defaultValue:"medium",control:{type:"radio"}}},parameters:{docs:{description:{component:"A set of related buttons that are visually and functionally grouped. Button Group acts as a cohesive unit, providing users with clear options for actions or navigation."},page:()=>t.jsx(b,{docs:"https://docs.tetrisly.com/components/list/buttongroup",children:t.jsx(i,{})})}}},r={args:{children:[t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"})]}};var m,l,p;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ +import{j as t}from"./jsx-runtime-ffb262ed.js";import{B as c}from"./ButtonGroup-2df34866.js";import{B as o}from"./Button-62f4c63b.js";import{S as a}from"./SectionHeader-e7c49046.js";import{t as s}from"./TetrislyProvider-679426f7.js";import{v as d}from"./v4-4a60fe23.js";import{T as b}from"./TetDocs-8998b928.js";import"./index-76fb7be0.js";import"./_commonjsHelpers-de833af9.js";import"./mergeConfigWithCustom-aec35d44.js";import"./tetrisly-icons.es-12549e88.js";import"./index-52c2b68d.js";import"./index-a1db3e60.js";import"./iframe-399ee91f.js";import"../sb-preview/runtime.js";import"./index-d3ea75b5.js";import"./index-11d98b33.js";import"./index-8fd8397b.js";import"./index-356e4a49.js";const x=[4,3,2],f=["medium","small"],i=()=>t.jsx(t.Fragment,{children:x.map(e=>t.jsxs(s.section,{display:"flex",pt:"$dimension-500",pb:"$dimension-500",flexDirection:"column",children:[t.jsxs(a,{variant:"H1",as:"h1",px:"$dimension-1000",children:[e," items"]}),f.map(n=>t.jsxs(s.div,{display:"flex",flexDirection:"column",children:[t.jsxs(a,{variant:"H2",as:"h3",px:"$dimension-1000",py:"$dimension-300",borderBottom:"$color-neutral-strong",children:["Size: ",n==="medium"?"Medium (Default)":"Small"]}),t.jsx(s.div,{px:"$dimension-1000",pb:"$dimension-500",mt:"$dimension-400",mb:"$dimension-400",children:t.jsx(c,{children:[...Array(e)].map(()=>{const u=d();return t.jsx(o,{label:"Button label"},`button-item-${u}`)})})},n)]},n))]},e))});try{i.displayName="ButtonGroupDocs",i.__docgenInfo={description:"",displayName:"ButtonGroupDocs",props:{}}}catch{}const I={title:"ButtonGroup",component:c,tags:["autodocs"],argTypes:{size:{options:["small","medium"],defaultValue:"medium",control:{type:"radio"}}},parameters:{docs:{description:{component:"A set of related buttons that are visually and functionally grouped. Button Group acts as a cohesive unit, providing users with clear options for actions or navigation."},page:()=>t.jsx(b,{docs:"https://docs.tetrisly.com/components/list/buttongroup",children:t.jsx(i,{})})}}},r={args:{children:[t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"}),t.jsx(o,{label:"button"})]}};var m,l,p;r.parameters={...r.parameters,docs:{...(m=r.parameters)==null?void 0:m.docs,source:{originalSource:`{ args: { children: [