var Component=(()=>{var p=Object.create;var i=Object.defineProperty;var D=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,C=Object.prototype.hasOwnProperty;var u=(c,l)=>()=>(l||c((l={exports:{}}).exports,l),l.exports),F=(c,l)=>{for(var n in l)i(c,n,{get:l[n],enumerable:!0})},a=(c,l,n,r)=>{if(l&&typeof l=="object"||typeof l=="function")for(let o of y(l))!C.call(c,o)&&o!==n&&i(c,o,{get:()=>l[o],enumerable:!(r=D(l,o))||r.enumerable});return c};var g=(c,l,n)=>(n=c!=null?p(m(c)):{},a(l||!c||!c.__esModule?i(n,"default",{value:c,enumerable:!0}):n,c)),f=c=>a(i({},"__esModule",{value:!0}),c);var d=u((T,t)=>{t.exports=_jsx_runtime});var A={};F(A,{default:()=>b,frontmatter:()=>E});var e=g(d()),E={title:"Accordion",description:"Stack of interactive headings revealing content sections for seamless navigation and information access",libraryImport:'import { Accordion } from "@xbeshui/core"',sourceGitLink:"View source code",sourceEditGitLink:"Edit this page",npmPackage:"@xbeshui/core",npmLink:"https://www.npmjs.com/package/xbeshui",gitLink:"https://github.com/madhavdutta/xbeshUI",docGitLink:"https://github.com/madhavdutta/xbesh-ui-kit-docs"};function h(c){let l=Object.assign({h3:"h3",a:"a",span:"span",div:"div",pre:"pre",code:"code",p:"p",h4:"h4",table:"table",thead:"thead",tr:"tr",th:"th",tbody:"tbody",td:"td"},c.components),{Tabs:n,Accordion:r}=l;return r||s("Accordion",!0),r.Content||s("Accordion.Content",!0),r.Item||s("Accordion.Item",!0),r.Trigger||s("Accordion.Trigger",!0),n||s("Tabs",!0),n.TabsContent||s("Tabs.TabsContent",!0),n.TabsList||s("Tabs.TabsList",!0),n.TabsTrigger||s("Tabs.TabsTrigger",!0),(0,e.jsxs)(n,{defaultValue:"compTab",className:"w-full mt-6",children:[(0,e.jsxs)(n.TabsList,{variant:"underline",className:"border-b w-full justify-start",children:[(0,e.jsx)(n.TabsTrigger,{variant:"underline",value:"compTab",children:"Component"}),(0,e.jsx)(n.TabsTrigger,{variant:"underline",value:"props",children:"Props"})]}),(0,e.jsxs)(n.TabsContent,{value:"compTab",children:[(0,e.jsxs)(l.h3,{id:"default",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#default",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Default"]}),(0,e.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,e.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,e.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,e.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,e.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Accordion } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"AccordionDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"multiple"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"radius"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"chevronPosition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),(0,e.jsx)(n.TabsContent,{value:"preview1",children:(0,e.jsx)("div",{className:"flex justify-center p-10",children:(0,e.jsxs)(r,{type:"multiple",variant:"default",radius:"lg",chevronPosition:"right",children:[(0,e.jsxs)(r.Item,{value:"item1",children:[(0,e.jsx)(r.Trigger,{children:"Item 1"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})})]}),(0,e.jsxs)(r.Item,{value:"item2",children:[(0,e.jsx)(r.Trigger,{children:"Item 2"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]})]})})})]}),(0,e.jsxs)(l.h3,{id:"examples",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#examples",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Examples"]}),(0,e.jsxs)(l.h4,{id:"separated",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#separated",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Separated"]}),(0,e.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,e.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,e.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,e.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,e.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Accordion } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"AccordionDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"multiple"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"separated"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"radius"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"chevronPosition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),(0,e.jsx)(n.TabsContent,{value:"preview1",children:(0,e.jsx)("div",{className:"flex justify-center p-10",children:(0,e.jsxs)(r,{type:"multiple",variant:"separated",radius:"lg",chevronPosition:"right",children:[(0,e.jsxs)(r.Item,{value:"item1",children:[(0,e.jsx)(r.Trigger,{children:"Item 1"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})})]}),(0,e.jsxs)(r.Item,{value:"item2",children:[(0,e.jsx)(r.Trigger,{children:"Item 2"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]})]})})})]}),(0,e.jsxs)(l.h4,{id:"filled",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#filled",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Filled"]}),(0,e.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,e.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,e.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,e.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,e.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Accordion } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"AccordionDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"multiple"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"filled"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"radius"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"chevronPosition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),(0,e.jsx)(n.TabsContent,{value:"preview1",children:(0,e.jsx)("div",{className:"flex justify-center p-10",children:(0,e.jsxs)(r,{type:"multiple",variant:"filled",radius:"lg",chevronPosition:"right",children:[(0,e.jsxs)(r.Item,{value:"item1",children:[(0,e.jsx)(r.Trigger,{children:"Item 1"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})})]}),(0,e.jsxs)(r.Item,{value:"item2",children:[(0,e.jsx)(r.Trigger,{children:"Item 2"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]})]})})})]}),(0,e.jsxs)(l.h4,{id:"contained",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#contained",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Contained"]}),(0,e.jsxs)(n,{defaultValue:"preview1",className:"w-full mt-6 border",children:[(0,e.jsxs)(n.TabsList,{className:"border-b w-full bg-muted dark:bg-black justify-start",children:[(0,e.jsx)(n.TabsTrigger,{value:"preview1",children:"Preview"}),(0,e.jsx)(n.TabsTrigger,{value:"code1",children:"Code"})]}),(0,e.jsx)(n.TabsContent,{value:"code1",className:"p-5",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"jsx","data-theme":"default",children:(0,e.jsxs)(l.code,{"data-language":"jsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" { Accordion } "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"@xbeshui/core"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D2A8FF"},children:"AccordionDemo"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"multiple"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"variant"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"contained"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"radius"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"chevronPosition"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"right"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item1"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 1"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Item"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#79C0FF"},children:"value"}),(0,e.jsx)(l.span,{style:{color:"#FF7B72"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#A5D6FF"},children:'"item2"'}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Trigger"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">Item 2"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#7EE787"},children:"Accordion.Content"}),(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:" )"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#C9D1D9"},children:"}"})})]})})})}),(0,e.jsx)(n.TabsContent,{value:"preview1",children:(0,e.jsx)("div",{className:"flex justify-center p-10",children:(0,e.jsxs)(r,{type:"multiple",variant:"contained",radius:"lg",chevronPosition:"right",children:[(0,e.jsxs)(r.Item,{value:"item1",children:[(0,e.jsx)(r.Trigger,{children:"Item 1"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 1. Lorem ipsum dolor sit amet, consectetur adipiscing elit."})})]}),(0,e.jsxs)(r.Item,{value:"item2",children:[(0,e.jsx)(r.Trigger,{children:"Item 2"}),(0,e.jsx)(r.Content,{children:(0,e.jsx)(l.p,{children:"Content for Item 2. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."})})]})]})})})]})]}),(0,e.jsxs)(n.TabsContent,{value:"props",children:[(0,e.jsxs)(l.h3,{id:"accordion-component-props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#accordion-component-props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Accordion Component Props"]}),(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Name"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsxs)(l.tbody,{children:[(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"variant"}),(0,e.jsx)(l.td,{children:"default, filled, contained, separated"}),(0,e.jsx)(l.td,{children:"Can be one of \u2018default\u2019, \u2018filled\u2019, \u2018contained\u2019, \u2018separated\u2019."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"radius"}),(0,e.jsx)(l.td,{children:"default, xs, sm, md, lg, xl"}),(0,e.jsx)(l.td,{children:"The radius prop specifies the border radius of the component, determining the roundness of its corners. Accepts values such as 'default', 'sm', 'md', 'lg', 'xl', 'xxl', 'full'."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"chevronPosition"}),(0,e.jsx)(l.td,{children:"default, left, right"}),(0,e.jsx)(l.td,{children:"ChevronPosition is a prop that determines the position of the chevron icon in relation to the content in the component. Can be 'default', 'left', or 'right'."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"chevronSize"}),(0,e.jsx)(l.td,{children:"default, xs, sm, md, lg, xl, xxl"}),(0,e.jsx)(l.td,{children:"ChevronSize is a prop that specifies the size of the chevron icon within the component. Accepts values such as 'default', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'."})]}),(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:"defaultVariants"}),(0,e.jsx)(l.td,{children:"variant, radius, chevronPosition, chevronSize"}),(0,e.jsx)(l.td,{children:"The DefaultVariants component allows for the definition of default styles and variants for UI elements, ensuring consistent design patterns and ease of customization."})]})]})]})]})]})}function N(c={}){let{wrapper:l}=c.components||{};return l?(0,e.jsx)(l,Object.assign({},c,{children:(0,e.jsx)(h,c)})):h(c)}var b=N;function s(c,l){throw new Error("Expected "+(l?"component":"object")+" `"+c+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(A);})(); ;return Component;