const{Fragment:l,jsx:n,jsxs:e}=arguments[0];function _createMdxContent(F){const s={code:"code",figure:"figure",h2:"h2",h3:"h3",pre:"pre",span:"span",...F.components},{ComponentDemo:r}=s;return r||function(l,n){throw new Error("Expected "+(n?"component":"object")+" `"+l+"` to be defined: you likely forgot to import, pass, or provide it.")}("ComponentDemo",!0),e(l,{children:[n(s.h2,{id:"demos",children:"Demos"}),"\n",n(s.h3,{id:"1-tabs-curved",children:"1. Tabs Curved"}),"\n",e(r,{name:"demos/motion/demo-tabs-curved",children:[n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-curved.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" motion "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "framer-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Heart "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/heart"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Home "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/home"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" SearchIcon "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/search"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Send "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/send"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" SettingsIcon "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/settings"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Home"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Home"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" SettingsIcon"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Settings"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" SearchIcon"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Search"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Send"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Messages"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Heart"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Favorites"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" linePath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:' "M0,40 Q172,10 344,40"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" motionPath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:' `path("M0,40 Q172,10 344,40")`'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" 12;"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsCurved"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"(1);"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" offsetDistance "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" +"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:" / ("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:".length - 1)) * (100 - "}),n(s.span,{style:{color:"#FFF"},children:"motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" * 2)"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" }%`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex h-[300px] w-full flex-col items-center justify-center overflow-hidden bg-zinc-800"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative -mt-[150%] w-full overflow-hidden bg-mauve-dark-2 sm:-mt-[100%]"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "704px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" borderRadius"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "54px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "344px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" boxShadow"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0 0 0 12px #000"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute bottom-0 flex h-[100px] w-full flex-col justify-between overflow-hidden"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"svg"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" xmlns"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"http://www.w3.org/2000/svg"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"344"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"50"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" preserveAspectRatio"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" viewBox"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"0 0 344 50"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"path"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" d"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"linePath"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" fill"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"stroke-mauve-dark-4"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" strokeWidth"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "40px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "4px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" borderRadius"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "4px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" position"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "absolute"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" left"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" bottom"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "calc(50% - 4px)"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" background"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "white"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" boxShadow"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "rgba(255, 255, 255, 0.4) 0px 0px 20px 10px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" zIndex"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 10,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetPath"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" motionPath"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0%"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.6,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ease"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" [0.32,"}),n(s.span,{style:{color:"#FFF8"},children:" 0.72,"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF8"},children:" 1],"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" tabDistance "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" +"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:" / ("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:".length - 1)) * (100 - "}),n(s.span,{style:{color:"#FFF"},children:"motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" * 2)"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" }%`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute p-5"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetPath"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" motionPath"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" tabDistance"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" top"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "28%"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"tab.icon className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-5 w-5 text-mauve-dark-12"'}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" })}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"pointer-events-none relative z-10 overflow-hidden"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" filter"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "drop-shadow(rgba(0,0,0, 0.5) 0px 3px 10px)"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"svg"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" xmlns"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"http://www.w3.org/2000/svg"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"344"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"50"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" preserveAspectRatio"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" viewBox"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"0 0 344 50"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"path"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" d"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"M 0 40 Q 172 10 344 40 V 68 L 0 68 L 0 40"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"fill-mauve-dark-2"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})})]})})}),n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-curved.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" motion "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "framer-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Heart "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/heart"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Home "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/home"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" SearchIcon "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/search"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Send "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/send"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" SettingsIcon "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/settings"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Home"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Home"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" SettingsIcon"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Settings"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" SearchIcon"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Search"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Send"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Messages"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" Heart"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Favorites"'}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" linePath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:' "M0,40 Q172,10 344,40"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" motionPath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:' `path("M0,40 Q172,10 344,40")`'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" 12;"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsCurved"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"(1);"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" offsetDistance "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" +"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:" / ("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:".length - 1)) * (100 - "}),n(s.span,{style:{color:"#FFF"},children:"motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" * 2)"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" }%`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex h-[300px] w-full flex-col items-center justify-center overflow-hidden bg-zinc-800"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative -mt-[150%] w-full overflow-hidden bg-mauve-dark-2 sm:-mt-[100%]"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "704px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" borderRadius"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "54px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "344px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" boxShadow"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0 0 0 12px #000"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute bottom-0 flex h-[100px] w-full flex-col justify-between overflow-hidden"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"svg"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" xmlns"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"http://www.w3.org/2000/svg"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"344"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"50"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" preserveAspectRatio"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" viewBox"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"0 0 344 50"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"path"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" d"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"linePath"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" fill"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"stroke-mauve-dark-4"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" strokeWidth"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "40px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "4px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" borderRadius"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "4px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" position"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "absolute"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" left"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" bottom"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "calc(50% - 4px)"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" background"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "white"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" boxShadow"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "rgba(255, 255, 255, 0.4) 0px 0px 20px 10px"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" zIndex"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 10,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetPath"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" motionPath"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0%"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.6,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ease"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" [0.32,"}),n(s.span,{style:{color:"#FFF8"},children:" 0.72,"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF8"},children:" 1],"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" tabDistance "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" +"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:" / ("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:".length - 1)) * (100 - "}),n(s.span,{style:{color:"#FFF"},children:"motionHorizontalPadding"}),n(s.span,{style:{color:"#FFF8"},children:" * 2)"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" }%`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute p-5"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetPath"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" motionPath"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" offsetDistance"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" tabDistance"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" top"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "28%"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"tab.icon className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-5 w-5 text-mauve-dark-12"'}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" })}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"pointer-events-none relative z-10 overflow-hidden"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" filter"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "drop-shadow(rgba(0,0,0, 0.5) 0px 3px 10px)"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"svg"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" xmlns"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"http://www.w3.org/2000/svg"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"344"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"50"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" preserveAspectRatio"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"none"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" viewBox"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"0 0 344 50"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"path"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" d"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"M 0 40 Q 172 10 344 40 V 68 L 0 68 L 0 40"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"fill-mauve-dark-2"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),"\n",n(s.h3,{id:"2-motion-tabs",children:"2. Motion Tabs"}),"\n",e(r,{name:"demos/motion/demo-tabs-motion",children:[n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-motion.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Image "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "next/image"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" MotionTabs "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoMotionTabs"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Product"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "product"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Product Tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Services"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "services"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Services tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Playground"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "playground"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Playground tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Content"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "content"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Content tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Random"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "random"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Random tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative mx-auto my-40 flex h-[20rem] w-full max-w-5xl flex-col items-start justify-start [perspective:1000px] md:h-[40rem]"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"MotionTabs tabs"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DummyContent"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Image"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" src"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"/placeholder.png"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" alt"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"dummy image"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1000"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1000"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute inset-x-0 -bottom-10 mx-auto h-[60%] w-[90%] rounded-xl object-cover object-left-top md:h-[90%]"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})})]})})}),n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-motion.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" Image "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "next/image"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" MotionTabs "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoMotionTabs"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Product"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "product"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Product Tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Services"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "services"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Services tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Playground"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "playground"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Playground tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Content"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "content"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Content tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Random"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" value"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "random"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative h-full w-full overflow-hidden rounded-2xl bg-neutral-500 p-10 text-xl font-bold text-white md:text-4xl"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"p"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Random tab"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"DummyContent "}),n(s.span,{style:{color:"#FFF8"},children:"/>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative mx-auto my-40 flex h-[20rem] w-full max-w-5xl flex-col items-start justify-start [perspective:1000px] md:h-[40rem]"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"MotionTabs tabs"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DummyContent"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Image"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" src"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"/placeholder.png"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" alt"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"dummy image"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1000"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" height"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"1000"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute inset-x-0 -bottom-10 mx-auto h-[60%] w-[90%] rounded-xl object-cover object-left-top md:h-[90%]"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})})]})})})]}),"\n",n(s.h3,{id:"3-direction-aware",children:"3. Direction Aware"}),"\n",e(r,{name:"demos/motion/demo-tabs-direction-aware",children:[n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-direction-aware.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Button "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" TabsDirectionAware "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-direction-aware"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsDirectionAware"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'""'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"TabsDirectionAware tabs"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" CONSTANTS "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 2,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 3,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})})]})})}),n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-direction-aware.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Button "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" TabsDirectionAware "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-direction-aware"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsDirectionAware"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'""'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"TabsDirectionAware tabs"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" CONSTANTS "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 1,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 2,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" id"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 3,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" label"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "tab"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" content"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"flex flex-col items-center w-full gap-3 p-4 border rounded-lg border-border/50"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF"},children:"Button"}),n(s.span,{style:{color:"#FFF8"},children:""})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})})]})})})]}),"\n",n(s.h3,{id:"4-framer-tabs",children:"4. Framer Tabs"}),"\n",e(r,{name:"demos/motion/demo-tabs-framer",children:[n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-framer.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" AnimatePresence"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" motion "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "framer-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" parseAsString"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useQueryState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "nuqs"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:" type"}),n(s.span,{style:{color:"#FFF"},children:" ReactNode "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/file-question"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" MOTION "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/_shared"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Button "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Flex4"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" FlexWrap "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/containers"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsButton"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsText"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsWrap"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-framer"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"button"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "line"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "icon"'}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" as"}),n(s.span,{style:{color:"#FFF8"},children:" const;"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" (typeof"}),n(s.span,{style:{color:"#FFF"},children:" TABS"}),n(s.span,{style:{color:"#FFF8"},children:")["}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" buttonLabelMap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" button"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Button Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" line"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Line Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Icon Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" HEADINGS DEMO "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FramerTabsDemo"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"key"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setKey"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:">(0);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selectedButton"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelectedButton"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" @ts-expect-error: Overload issue"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" useQueryState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" |"}),n(s.span,{style:{color:"#FFF"},children:" null"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF8"},children:'"button"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" parseAsString"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleComponentChange"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelectedButton"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setKey"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"prevKey"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" prevKey "}),n(s.span,{style:{color:"#FFF8"},children:"+"}),n(s.span,{style:{color:"#FFF8"},children:" 1);"}),n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" Increment key to force remount"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[370px] w-full"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FlexWrap className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" handleComponentChange"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variant"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"outline"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" size"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"tiny"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"buttonLabelMap"}),n(s.span,{style:{color:"#FFF8"},children:"["}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:"]}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Flex4"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"key"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" Use key to force remount"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"}),n(s.span,{style:{color:"#FFF"},children:"MOTION"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"ANIMATE_FADE_UP"}),n(s.span,{style:{color:"#FFF8"},children:"} mt-4 justify-center`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animationDelay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0.25s"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animationFillMode"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "forwards"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"RenderComponent component"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selectedButton "}),n(s.span,{style:{color:"#FFF8"},children:"||"}),n(s.span,{style:{color:"#FFF8"},children:' "button"'}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" RENDER COMPONENT "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" RenderComponent"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" component "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" })"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" switch"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "button"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ButtonTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "line"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"LineTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "icon"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"IconTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" default:"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" null;"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" FUNCTIONS "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 1. Button Tabs"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonTabs"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"Home"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Search"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "About"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "FAQ"'}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" as"}),n(s.span,{style:{color:"#FFF8"},children:" const;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Tab"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" (typeof"}),n(s.span,{style:{color:"#FFF"},children:" TABS"}),n(s.span,{style:{color:"#FFF8"},children:")["}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Tab"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" MOTION_SPAN_STYLES "}),n(s.span,{style:{color:"#FFF8"},children:"="})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:' "absolute inset-0 z-0 rounded-md bg-gradient-to-r from-violet-600 to-indigo-600"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsWrap"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsButton"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" === "}),n(s.span,{style:{color:"#FFF"},children:"tab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"text-white"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'"text-slate-300 hover:bg-slate-700 hover:text-slate-200"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } `"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsText"}),n(s.span,{style:{color:"#FFF8"},children:">{"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.span"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" layoutId"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"pill-tab"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"}),n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.5"}),n(s.span,{style:{color:"#FFF8"},children:" }}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"MOTION_SPAN_STYLES"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 2. Line Tabs"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" LINE_TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"Home"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Docs"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Components"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Hooks"'}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabs"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" customID "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF"},children:"string"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"LINE_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTab"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ({"}),n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" customID "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"text-muted-foreground"'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'" "'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } relative rounded-md px-2 py-1 text-sm font-medium text-gray-500 transition-colors duration-300 focus-within:outline-neutral-500/50`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"span className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative z-10"'}),n(s.span,{style:{color:"#FFF8"},children:">{"}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute left-0 top-0 flex size-full h-full w-full items-end justify-center"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" layoutId"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"}),n(s.span,{style:{color:"#FFF"},children:"customID"}),n(s.span,{style:{color:"#FFF8"},children:"}linetab`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.4,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" bounce"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" delay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.1,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"span className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"z-0 h-[3px] w-[60%] rounded-t-full bg-neutral-500"'}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'""'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } border-black-500/25 mb-8 flex flex-wrap items-center gap-2 border-b`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"LINE_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"LineTab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"customID"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" void"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 3. Icon Tabs"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Object"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" void"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" children"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ReactNode"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" number"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "General"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "About"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Billing"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Privacy"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Profile"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" IconTabs component"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabs"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" center "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" boolean "}),n(s.span,{style:{color:"#FFF8"},children:"})"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Object"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'""'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } border-black-500/25 mb-8 flex flex-wrap items-center gap-2 border-b pb-2`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"SingleIconTab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"title"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"title"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SingleIconTab"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" children "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_BUTTON_VARIANTS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" gap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingLeft"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingRight"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ({"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" gap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingLeft"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' "1rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingRight"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' "1rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_SPAN_VARIANTS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "auto"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 1"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" exit"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TRANSITION "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" delay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.1,"}),n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" bounce"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.35"}),n(s.span,{style:{color:"#FFF8"},children:" };"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variants"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"ICON_BUTTON_VARIANTS"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"initial"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"animate"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" custom"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"["}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"])}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TRANSITION"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"bg-red-500/15 text-red-500 "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'" hover:text-gray-900"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } relative flex items-center rounded-full px-4 py-2 text-sm font-medium text-gray-500 transition-colors duration-300 focus-within:outline-red-500/50`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"children"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"AnimatePresence"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.span"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variants"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"ICON_SPAN_VARIANTS"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"initial"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"animate"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" exit"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"exit"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TRANSITION"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"overflow-hidden"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})})]})})}),n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-framer.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" AnimatePresence"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" motion "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "framer-motion"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" parseAsString"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useQueryState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "nuqs"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:" type"}),n(s.span,{style:{color:"#FFF"},children:" ReactNode "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/file-question"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" MOTION "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/_shared"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Button "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/button"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" Flex4"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" FlexWrap "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/containers"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsButton"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsText"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" FramerTabsWrap"}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/ui/tabs-framer"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"button"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "line"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "icon"'}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" as"}),n(s.span,{style:{color:"#FFF8"},children:" const;"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" (typeof"}),n(s.span,{style:{color:"#FFF"},children:" TABS"}),n(s.span,{style:{color:"#FFF8"},children:")["}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" buttonLabelMap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:">"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" button"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Button Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" line"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Line Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Icon Tabs"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" HEADINGS DEMO "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" FramerTabsDemo"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"key"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setKey"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:">(0);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selectedButton"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelectedButton"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" @ts-expect-error: Overload issue"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" useQueryState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" |"}),n(s.span,{style:{color:"#FFF"},children:" null"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF8"},children:'"button"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" parseAsString"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleComponentChange"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelectedButton"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setKey"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"prevKey"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" prevKey "}),n(s.span,{style:{color:"#FFF8"},children:"+"}),n(s.span,{style:{color:"#FFF8"},children:" 1);"}),n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" Increment key to force remount"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[370px] w-full"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FlexWrap className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" handleComponentChange"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variant"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"outline"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" size"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"tiny"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"buttonLabelMap"}),n(s.span,{style:{color:"#FFF8"},children:"["}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:"]}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"Flex4"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"key"}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" //"}),n(s.span,{style:{color:"#FFF4"},children:" Use key to force remount"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"}),n(s.span,{style:{color:"#FFF"},children:"MOTION"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"ANIMATE_FADE_UP"}),n(s.span,{style:{color:"#FFF8"},children:"} mt-4 justify-center`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" style"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animationDelay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "0.25s"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animationFillMode"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "forwards"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"RenderComponent component"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selectedButton "}),n(s.span,{style:{color:"#FFF8"},children:"||"}),n(s.span,{style:{color:"#FFF8"},children:' "button"'}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" RENDER COMPONENT "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" RenderComponent"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" component "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" component"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TRTabs"}),n(s.span,{style:{color:"#FFF8"},children:" })"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" switch"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"component"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "button"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ButtonTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "line"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"LineTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" case"}),n(s.span,{style:{color:"#FFF8"},children:' "icon"'}),n(s.span,{style:{color:"#FFF8"},children:":"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"IconTabs "}),n(s.span,{style:{color:"#FFF8"},children:"/>;"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" default:"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" null;"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:"´:°•.°+.*•´.*:˚.°*.˚•´.°:°•.°•.*•´.*:˚.°*.˚•´.°:°•.°+.*•´.*:"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:" FUNCTIONS "}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"/*"}),n(s.span,{style:{color:"#FFF4"},children:".•°:°.´+˚.*°.˚:*.´•*.+°.•°:´*.´•*.•°.•°:°.´:•˚°.*°.˚:*.´+°.•"}),n(s.span,{style:{color:"#FFF8"},children:"*/"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 1. Button Tabs"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ButtonTabs"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"Home"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Search"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "About"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "FAQ"'}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" as"}),n(s.span,{style:{color:"#FFF8"},children:" const;"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Tab"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" (typeof"}),n(s.span,{style:{color:"#FFF"},children:" TABS"}),n(s.span,{style:{color:"#FFF8"},children:")["}),n(s.span,{style:{color:"#FFF"},children:"number"}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Tab"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" MOTION_SPAN_STYLES "}),n(s.span,{style:{color:"#FFF8"},children:"="})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:' "absolute inset-0 z-0 rounded-md bg-gradient-to-r from-violet-600 to-indigo-600"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsWrap"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsButton"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" === "}),n(s.span,{style:{color:"#FFF"},children:"tab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"text-white"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'"text-slate-300 hover:bg-slate-700 hover:text-slate-200"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } `"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FramerTabsText"}),n(s.span,{style:{color:"#FFF8"},children:">{"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.span"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" layoutId"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"pill-tab"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"}),n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.5"}),n(s.span,{style:{color:"#FFF8"},children:" }}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"MOTION_SPAN_STYLES"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 2. Line Tabs"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" LINE_TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF8"},children:'"Home"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Docs"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Components"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF8"},children:' "Hooks"'}),n(s.span,{style:{color:"#FFF8"},children:"];"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabs"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" customID "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF"},children:"string"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"LINE_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" LineTab"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" ({"}),n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" customID "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:")}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"text-muted-foreground"'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'" "'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } relative rounded-md px-2 py-1 text-sm font-medium text-gray-500 transition-colors duration-300 focus-within:outline-neutral-500/50`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"span className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative z-10"'}),n(s.span,{style:{color:"#FFF8"},children:">{"}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"absolute left-0 top-0 flex size-full h-full w-full items-end justify-center"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" layoutId"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"}),n(s.span,{style:{color:"#FFF"},children:"customID"}),n(s.span,{style:{color:"#FFF8"},children:"}linetab`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={{"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.4,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" bounce"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" delay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.1,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"span className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"z-0 h-[3px] w-[60%] rounded-t-full bg-neutral-500"'}),n(s.span,{style:{color:"#FFF8"},children:" />"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'""'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } border-black-500/25 mb-8 flex flex-wrap items-center gap-2 border-b`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"LINE_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"LineTab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"customID"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" />"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" void"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" customID"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" 3. Icon Tabs"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"type"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TabProps"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" string"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Object"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" void"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" children"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ReactNode"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" number"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"};"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "General"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "About"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Billing"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Privacy"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" title"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Profile"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"//"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"//"}),n(s.span,{style:{color:"#FFF4"},children:" IconTabs component"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" IconTabs"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" center "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:"?:"}),n(s.span,{style:{color:"#FFF"},children:" boolean "}),n(s.span,{style:{color:"#FFF8"},children:"})"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Object"}),n(s.span,{style:{color:"#FFF8"},children:">("}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"` ${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" center"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"justify-center "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'""'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } border-black-500/25 mb-8 flex flex-wrap items-center gap-2 border-b pb-2`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"SingleIconTab"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"title"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"title"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SingleIconTab"}),n(s.span,{style:{color:"#FFF8"},children:"({"}),n(s.span,{style:{color:"#FFF"},children:" text"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" index"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" children "}),n(s.span,{style:{color:"#FFF8"},children:"}:"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TabProps"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_BUTTON_VARIANTS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" gap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingLeft"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingRight"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" boolean"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ({"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" gap"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingLeft"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' "1rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" paddingRight"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF"},children:" selected "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF8"},children:' "1rem"'}),n(s.span,{style:{color:"#FFF8"},children:" :"}),n(s.span,{style:{color:"#FFF8"},children:' ".5rem"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }),"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" ICON_SPAN_VARIANTS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "auto"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 1"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" exit"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" width"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" opacity"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0"}),n(s.span,{style:{color:"#FFF8"},children:" },"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" };"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" TRANSITION "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" delay"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.1,"}),n(s.span,{style:{color:"#FFF"},children:" type"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "spring"'}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" bounce"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0,"}),n(s.span,{style:{color:"#FFF"},children:" duration"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" 0.35"}),n(s.span,{style:{color:"#FFF8"},children:" };"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variants"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"ICON_BUTTON_VARIANTS"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"initial"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"animate"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" custom"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"selected"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF"},children:" setSelected"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"ICON_TABS"}),n(s.span,{style:{color:"#FFF8"},children:"["}),n(s.span,{style:{color:"#FFF"},children:"index"}),n(s.span,{style:{color:"#FFF8"},children:"])}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TRANSITION"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF8"},children:"`${"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" selected"}),n(s.span,{style:{color:"#FFF8"},children:" ? "}),n(s.span,{style:{color:"#FFF8"},children:'"bg-red-500/15 text-red-500 "'}),n(s.span,{style:{color:"#FFF8"},children:" : "}),n(s.span,{style:{color:"#FFF8"},children:'" hover:text-gray-900"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" } relative flex items-center rounded-full px-4 py-2 text-sm font-medium text-gray-500 transition-colors duration-300 focus-within:outline-red-500/50`"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"children"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"AnimatePresence"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"selected "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"motion.span"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" variants"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"ICON_SPAN_VARIANTS"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" initial"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"initial"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" animate"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"animate"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" exit"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"exit"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" transition"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"TRANSITION"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"overflow-hidden"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"text"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" )}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})})]})})})]}),"\n",n(s.h3,{id:"5-clip-path-tabs",children:"5. Clip Path Tabs"}),"\n",e(r,{name:"demos/motion/demo-tabs-clip-path",children:[n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-clip-path.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useEffect"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/file-question"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsClipPath"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" containerRef "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),n(s.span,{style:{color:"#FFF8"},children:">(null);"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:"(null);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" useEffect"}),n(s.span,{style:{color:"#FFF8"},children:"(()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" container "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" containerRef"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"current"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" if"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTab "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF"},children:" container"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElement "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"current"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" if"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTabElement"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" offsetWidth "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" activeTabElement"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" clipLeft "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" clipRight "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft "}),n(s.span,{style:{color:"#FFF8"},children:"+"}),n(s.span,{style:{color:"#FFF"},children:" offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"style"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"clipPath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `inset(0 ${"}),n(s.span,{style:{color:"#FFF"},children:"Number"}),n(s.span,{style:{color:"#FFF8"},children:"(100 - ("}),n(s.span,{style:{color:"#FFF"},children:"clipRight"}),n(s.span,{style:{color:"#FFF8"},children:" / "}),n(s.span,{style:{color:"#FFF"},children:"container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:") * 100)."}),n(s.span,{style:{color:"#FFF"},children:"toFixed"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:"}% 0 ${"}),n(s.span,{style:{color:"#FFF"},children:"Number"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"clipLeft"}),n(s.span,{style:{color:"#FFF8"},children:" / "}),n(s.span,{style:{color:"#FFF"},children:"container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:") * 100)."}),n(s.span,{style:{color:"#FFF"},children:"toFixed"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:"}% round 17px)`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" },"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:"]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" <>"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex flex-col items-center w-fit mx-auto pt-16"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ul className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex w-full justify-center gap-2"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"li key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ref"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"activeTab "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef "}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" null}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" data-tab"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[34px] rounded-full p-4 text-sm font-medium text-black no-underline flex items-center gap-2"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF"},children:" aria-hidden"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"clip-path-container absolute z-10 w-full overflow-hidden transition-clip-path duration-250 ease-in-out"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ref"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"containerRef"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ul className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex w-full justify-center gap-2 bg-primary"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"li key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" data-tab"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[34px] rounded-full p-4 text-sm font-medium text-secondary no-underline flex items-center gap-2"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" tabIndex"}),n(s.span,{style:{color:"#FFF8"},children:"={-1}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"style jsx"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF8"},children:"`"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" .clip-path-container {"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" transition: clip-path 0.25s ease;"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" clip-path: inset(0px 75% 0px 0% round 17px);"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" `"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" "})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Payments"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Balances"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Customers"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Billing"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})})]})})}),n(s.figure,{__src__:"registry/default/demos/motion/demo-tabs-clip-path.tsx","data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:e(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:[e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:'"use client"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" useEffect"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" useState "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" from"}),n(s.span,{style:{color:"#FFF8"},children:' "react"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"import"}),n(s.span,{style:{color:"#FFF"},children:" FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"from"}),n(s.span,{style:{color:"#FFF8"},children:' "@/components/icons/file-question"'}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"export"}),n(s.span,{style:{color:"#FFF8"},children:" function"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:" DemoTabsClipPath"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"]"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" useState"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"[0]."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" containerRef "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:"<"}),n(s.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLDivElement"}),n(s.span,{style:{color:"#FFF8"},children:">(null);"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" useRef"}),n(s.span,{style:{color:"#FFF8"},children:"(null);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" useEffect"}),n(s.span,{style:{color:"#FFF8"},children:"(()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" container "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" containerRef"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"current"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" if"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTab "}),n(s.span,{style:{color:"#FFF8"},children:"&&"}),n(s.span,{style:{color:"#FFF"},children:" container"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElement "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"current"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" if"}),n(s.span,{style:{color:"#FFF8"},children:" ("}),n(s.span,{style:{color:"#FFF"},children:"activeTabElement"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft"}),n(s.span,{style:{color:"#FFF8"},children:","}),n(s.span,{style:{color:"#FFF"},children:" offsetWidth "}),n(s.span,{style:{color:"#FFF8"},children:"}"}),n(s.span,{style:{color:"#FFF8"},children:" ="}),n(s.span,{style:{color:"#FFF"},children:" activeTabElement"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" clipLeft "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" const"}),n(s.span,{style:{color:"#FFF"},children:" clipRight "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF"},children:" offsetLeft "}),n(s.span,{style:{color:"#FFF8"},children:"+"}),n(s.span,{style:{color:"#FFF"},children:" offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"style"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"clipPath "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" `inset(0 ${"}),n(s.span,{style:{color:"#FFF"},children:"Number"}),n(s.span,{style:{color:"#FFF8"},children:"(100 - ("}),n(s.span,{style:{color:"#FFF"},children:"clipRight"}),n(s.span,{style:{color:"#FFF8"},children:" / "}),n(s.span,{style:{color:"#FFF"},children:"container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:") * 100)."}),n(s.span,{style:{color:"#FFF"},children:"toFixed"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:"}% 0 ${"}),n(s.span,{style:{color:"#FFF"},children:"Number"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"clipLeft"}),n(s.span,{style:{color:"#FFF8"},children:" / "}),n(s.span,{style:{color:"#FFF"},children:"container"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"offsetWidth"}),n(s.span,{style:{color:"#FFF8"},children:") * 100)."}),n(s.span,{style:{color:"#FFF"},children:"toFixed"}),n(s.span,{style:{color:"#FFF8"},children:"()"}),n(s.span,{style:{color:"#FFF8"},children:"}% round 17px)`"}),n(s.span,{style:{color:"#FFF8"},children:";"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" },"}),n(s.span,{style:{color:"#FFF8"},children:" ["}),n(s.span,{style:{color:"#FFF"},children:"activeTab"}),n(s.span,{style:{color:"#FFF8"},children:"]);"})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" return"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" <>"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex flex-col items-center w-fit mx-auto pt-16"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ul className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex w-full justify-center gap-2"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"li key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ref"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"activeTab "}),n(s.span,{style:{color:"#FFF8"},children:"==="}),n(s.span,{style:{color:"#FFF"},children:" tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name "}),n(s.span,{style:{color:"#FFF8"},children:"?"}),n(s.span,{style:{color:"#FFF"},children:" activeTabElementRef "}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" null}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" data-tab"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[34px] rounded-full p-4 text-sm font-medium text-black no-underline flex items-center gap-2"'})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"div"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF"},children:" aria-hidden"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"clip-path-container absolute z-10 w-full overflow-hidden transition-clip-path duration-250 ease-in-out"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" ref"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"containerRef"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"ul className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"relative flex w-full justify-center gap-2 bg-primary"'}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"TABS"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"map"}),n(s.span,{style:{color:"#FFF8"},children:"(("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:")"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" ("})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"li key"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}>"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"button"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" data-tab"}),n(s.span,{style:{color:"#FFF8"},children:"={"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" onClick"}),n(s.span,{style:{color:"#FFF8"},children:"={()"}),n(s.span,{style:{color:"#FFF8"},children:" =>"}),n(s.span,{style:{color:"#FFF8"},children:" {"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" setActiveTab"}),n(s.span,{style:{color:"#FFF8"},children:"("}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:");"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" className"}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:'"h-[34px] rounded-full p-4 text-sm font-medium text-secondary no-underline flex items-center gap-2"'})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" tabIndex"}),n(s.span,{style:{color:"#FFF8"},children:"={-1}"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" >"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"icon"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF"},children:"tab"}),n(s.span,{style:{color:"#FFF8"},children:"."}),n(s.span,{style:{color:"#FFF"},children:"name"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" ))}"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"style jsx"}),n(s.span,{style:{color:"#FFF8"},children:">"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" {"}),n(s.span,{style:{color:"#FFF8"},children:"`"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" .clip-path-container {"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" transition: clip-path 0.25s ease;"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" clip-path: inset(0px 75% 0px 0% round 17px);"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" }"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" `"}),n(s.span,{style:{color:"#FFF8"},children:"}"})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:" "})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" "})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" );"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"}"})}),"\n",n(s.span,{"data-line":"",children:" "}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"const"}),n(s.span,{style:{color:"#FFF"},children:" TABS "}),n(s.span,{style:{color:"#FFF8"},children:"="}),n(s.span,{style:{color:"#FFF8"},children:" ["})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Payments"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Balances"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Customers"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" {"})}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" name"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:' "Billing"'}),n(s.span,{style:{color:"#FFF8"},children:","})]}),"\n",e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF"},children:" icon"}),n(s.span,{style:{color:"#FFF8"},children:":"}),n(s.span,{style:{color:"#FFF8"},children:" <"}),n(s.span,{style:{color:"#FFF"},children:"FileQuestion "}),n(s.span,{style:{color:"#FFF8"},children:"/>,"})]}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:" },"})}),"\n",n(s.span,{"data-line":"",children:n(s.span,{style:{color:"#FFF8"},children:"];"})})]})})})]}),"\n",n(s.h2,{id:"installation",children:"Installation"}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"bash","data-theme":"Lambda Studio — Blackout",children:n(s.code,{"data-language":"bash","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:e(s.span,{"data-line":"",children:[n(s.span,{style:{color:"#FFF8"},children:"#"}),n(s.span,{style:{color:"#FFF4"},children:" Coming soon"})]})})})}),"\n",n(s.h2,{id:"usage",children:"Usage"}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:n(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:n(s.span,{"data-line":"",children:" "})})})}),"\n",n(s.figure,{"data-rehype-pretty-code-figure":"",children:n(s.pre,{className:"Lambda Studio — Blackout",style:{backgroundColor:"#000",color:"#fff"},tabIndex:"0","data-language":"tsx","data-theme":"Lambda Studio — Blackout",children:n(s.code,{"data-language":"tsx","data-theme":"Lambda Studio — Blackout",style:{display:"grid"},children:n(s.span,{"data-line":"",children:" "})})})})]})}return{default:function(l={}){const{wrapper:e}=l.components||{};return e?n(e,{...l,children:n(_createMdxContent,{...l})}):_createMdxContent(l)}};

Drifter

Demos

1. Drifter Tabs

2. Drifter Tabs Hover

3. Drifter Cards

Dialog

Popover

Accordion

Collapsible

Drag to Reorder

Swipe to Delete

Installation