tsm-ui/storybook-static/assets/TabsHorizontal.stories.595a5d5c.js

### Welcome to TSM-UI: Your Design System for Modern Web Development

import{r as I}from"./index.d591fb27.js";import{s as u}from"./index.f31275f4.js";import{j as e,a as g}from"./jsx-runtime.e41c3930.js";import"./_commonjsHelpers.712cc82f.js";import"./index.8dde8ec8.js";const q=u("div",{display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:"$colorMain010",border:"4px solid $colorSecondaryAccent",borderRadius:"$sm",padding:"$10",width:"$80",height:"400",position:"absolute",fontFamily:"$default",flexDirection:"column"}),N=u("button",{alignItems:"center",justifyContent:"center",color:"$colorPrimary070",cursor:"pointer",borderRadius:"$lg",width:"$20",height:"$20",fontSize:"$xs",padding:"$2",margin:"$2",backgroundColor:"$colorMain010",transition:"all 0.2s ease-in-out","&:hover":{color:"$colorMainBlack",backgroundColor:"$colorMain020"}}),W=u("p",{color:"$colorMain090",padding:"$2",fontSize:"$sm",textAlign:"center",overflow:"auto",maxHeight:"200px","&::-webkit-scrollbar":{width:"10px"},"&::-webkit-scrollbar-track":{backgroundColor:"#ebebeb",borderRadius:"10px"},"&::-webkit-scrollbar-thumb":{borderRadius:"10px",background:"$colorMain090"}});function l({tabsHorizontal:r,...o}){const[b,$]=I.exports.useState(0),k=s=>{$(s)};return g(q,{...o,children:[e("div",{children:r.map((s,p)=>g(N,{onClick:()=>k(p),className:p===b?"active":"",children:[s.icon&&s.icon,s.label]},p))}),e("div",{children:e(W,{children:r[b].content})})]})}function c({tabsHorizontal:r,...o}){return e("div",{style:{height:"450px"},children:e(l,{tabsHorizontal:r,style:{flexDirection:"column",...o.style}})})}function f({tabsHorizontal:r,...o}){return e(l,{tabsHorizontal:r,style:{...o.style}})}function h({tabsHorizontal:r,...o}){return e(l,{tabsHorizontal:r,style:{overflowX:"auto",...o.style}})}try{l.displayName="TabsVertical",l.__docgenInfo={description:"",displayName:"TabsVertical",props:{tabsHorizontal:{defaultValue:null,description:"",name:"tabsHorizontal",required:!0,type:{name:"TabComponentHorizontal[]"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}try{c.displayName="HorizontalTabs",c.__docgenInfo={description:"",displayName:"HorizontalTabs",props:{style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},tabsHorizontal:{defaultValue:null,description:"",name:"tabsHorizontal",required:!0,type:{name:"TabComponentHorizontal[]"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}try{f.displayName="HorizontalTabsWithIcons",f.__docgenInfo={description:"",displayName:"HorizontalTabsWithIcons",props:{style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},tabsHorizontal:{defaultValue:null,description:"",name:"tabsHorizontal",required:!0,type:{name:"TabComponentHorizontal[]"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}try{h.displayName="ScrollableTabsHorizontal",h.__docgenInfo={description:"",displayName:"ScrollableTabsHorizontal",props:{style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"CSSProperties"}},tabsHorizontal:{defaultValue:null,description:"",name:"tabsHorizontal",required:!0,type:{name:"TabComponentHorizontal[]"}},ref:{defaultValue:null,description:"",name:"ref",required:!1,type:{name:"Ref<HTMLDivElement>"}},css:{defaultValue:null,description:"",name:"css",required:!1,type:{name:"CSS<{}, { colors: { colorMainBlack: string; colorMain090: string; colorMain070: string; colorMain050: string; colorMain030: string; colorMain020: string; colorMain010: string; colorMainWhite: string; ... 48 more ...; colorPurple010: string; }; ... 5 more ...; space: { ...; }; }, { ...; }, {}>"}}}}}catch{}const E={title:"Components/Tabs/Horizontal Tabs",component:c,argTypes:{},parameters:{docs:{description:{story:"A set of reusable UI elements designed to provide a consistent and user-friendly tabbed interface. With these components, you can easily implement tabbed layouts in your applications, allowing users to switch between different sections or views seamlessly."}},canvas:{height:"230px"}}},d=r=>e("div",{style:{height:"450px"},children:e(c,{...r})}),m=[{label:"Tab 1",content:e("p",{children:"All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet."})},{label:"Tab 2",content:e("p",{children:"It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable."})},{label:"Tab 3",content:e("p",{children:"The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc."})}],a=d.bind({});a.args={tabsHorizontal:m};a.storyName="Default Horizontal Tabs";const t=d.bind({});t.args={tabsHorizontal:m};t.storyName="Vertical Tabs";const n=d.bind({});n.args={tabsHorizontal:[{label:"Tab 1",icon:e("span",{children:"\u{1F60E}"}),content:e("p",{children:"Content for Tab 1 with icon \u{1F60E}"})},{label:"Tab 2",icon:e("span",{children:"\u{1F913}"}),content:e("p",{children:"Content for Tab 2 with icon \u{1F913}"})},{label:"Tab 3",icon:e("span",{children:"\u{1F60A}"}),content:e("p",{children:"Content for Tab 3 with icon \u{1F60A}"})}]};n.storyName="Horizontal Tabs with Icons";const i=d.bind({});i.args={tabsHorizontal:m};i.storyName="Scrollable Horizontal Tabs";var y,T,M;a.parameters={...a.parameters,docs:{...(y=a.parameters)==null?void 0:y.docs,source:{originalSource:`args => <div style={{
  height: '450px'
}}>
        <HorizontalTabs {...args} />
    </div>`,...(M=(T=a.parameters)==null?void 0:T.docs)==null?void 0:M.source}}};var H,z,_;t.parameters={...t.parameters,docs:{...(H=t.parameters)==null?void 0:H.docs,source:{originalSource:`args => <div style={{
  height: '450px'
}}>
        <HorizontalTabs {...args} />
    </div>`,...(_=(z=t.parameters)==null?void 0:z.docs)==null?void 0:_.source}}};var S,v,C;n.parameters={...n.parameters,docs:{...(S=n.parameters)==null?void 0:S.docs,source:{originalSource:`args => <div style={{
  height: '450px'
}}>
        <HorizontalTabs {...args} />
    </div>`,...(C=(v=n.parameters)==null?void 0:v.docs)==null?void 0:C.source}}};var x,w,V;i.parameters={...i.parameters,docs:{...(x=i.parameters)==null?void 0:x.docs,source:{originalSource:`args => <div style={{
  height: '450px'
}}>
        <HorizontalTabs {...args} />
    </div>`,...(V=(w=i.parameters)==null?void 0:w.docs)==null?void 0:V.source}}};const F=["Default","VerticalTabs","TabsWithIcons","ScrollableTabs"];export{a as Default,i as ScrollableTabs,n as TabsWithIcons,t as VerticalTabs,F as __namedExportsOrder,E as default};