"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[2752],{"./src/components/ui/Tabs/Tabs.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Controlled:()=>Controlled,DarkMode:()=>DarkMode,Default:()=>Default,KeepMounted:()=>KeepMounted,ProductDetailsTabs:()=>ProductDetailsTabs,WithDisabledTab:()=>WithDisabledTab,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Tabs_stories});var jsx_runtime=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),core=__webpack_require__("./src/lib/core/index.ts");const TabsContext=(0,react.createContext)(null);function useTabs(){const context=(0,react.useContext)(TabsContext);if(!context)throw new Error("Tabs compound components must be used within a Tabs root");return context}const TabList=(0,react.memo)(function TabList({children,className,variant="underline"}){const tabListRef=(0,react.useRef)(null);return(0,jsx_runtime.jsx)("div",{ref:tabListRef,role:"tablist","aria-orientation":"horizontal",onKeyDown:event=>{const tabs=tabListRef.current?.querySelectorAll('[role="tab"]:not([disabled])');if(!tabs?.length)return;const tabsArray=Array.from(tabs),currentIndex=tabsArray.findIndex(tab=>tab===document.activeElement);let nextIndex;switch(event.key){case"ArrowLeft":nextIndex=currentIndex>0?currentIndex-1:tabsArray.length-1,tabsArray[nextIndex]?.focus(),event.preventDefault();break;case"ArrowRight":nextIndex=currentIndex<tabsArray.length-1?currentIndex+1:0,tabsArray[nextIndex]?.focus(),event.preventDefault();break;case"Home":tabsArray[0]?.focus(),event.preventDefault();break;case"End":tabsArray[tabsArray.length-1]?.focus(),event.preventDefault()}},className:(0,core.cn)("flex",{underline:"border-b border-gray-200 dark:border-gray-700",pills:"bg-gray-100 dark:bg-gray-800 p-1 rounded-lg gap-1",bordered:"border border-gray-200 dark:border-gray-700 rounded-lg p-1 gap-1"}[variant],className),children})}),Tab=(0,react.memo)(function Tab({value,children,className,disabled=!1,icon}){const{activeTab,setActiveTab,baseId}=useTabs(),isActive=activeTab===value;return(0,jsx_runtime.jsxs)("button",{role:"tab",type:"button","aria-selected":isActive,"aria-controls":`${baseId}-panel-${value}`,id:`${baseId}-tab-${value}`,tabIndex:isActive?0:-1,disabled,onClick:()=>{disabled||setActiveTab(value)},className:(0,core.cn)("px-4 py-2 font-medium text-sm transition-colors whitespace-nowrap","focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2","dark:focus-visible:ring-offset-gray-900",isActive?"border-b-2 border-blue-500 text-blue-600 dark:text-blue-400 -mb-px":"text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200",disabled&&"opacity-50 cursor-not-allowed",className),children:[icon&&(0,jsx_runtime.jsx)("span",{className:"mr-2",children:icon}),children]})}),TabPanel=(0,react.memo)(function TabPanel({value,children,className,keepMounted=!1}){const{activeTab,baseId}=useTabs(),isActive=activeTab===value;return keepMounted||isActive?(0,jsx_runtime.jsx)("div",{role:"tabpanel",id:`${baseId}-panel-${value}`,"aria-labelledby":`${baseId}-tab-${value}`,hidden:!isActive,tabIndex:0,className:(0,core.cn)("py-4 focus:outline-none",!isActive&&"hidden",className),children}):null}),Tabs=Object.assign(function TabsRoot({defaultTab,children,className,onChange,value}){const[internalTab,setInternalTab]=(0,react.useState)(defaultTab),baseId=(0,react.useId)(),activeTab=value??internalTab,setActiveTab=(0,react.useCallback)(tab=>{void 0===value&&setInternalTab(tab),onChange?.(tab)},[onChange,value]),contextValue=(0,react.useMemo)(()=>({activeTab,setActiveTab,baseId}),[activeTab,setActiveTab,baseId]);return(0,jsx_runtime.jsx)(TabsContext.Provider,{value:contextValue,children:(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("tabs",className),children})})},{List:TabList,Tab,Panel:TabPanel}),Tabs_stories={title:"UI/Tabs",component:Tabs,parameters:{layout:"padded"},tags:["autodocs"],argTypes:{defaultTab:{control:"text",description:"The default active tab value"},onChange:{action:"changed",description:"Callback when active tab changes"}}},Default={render:()=>(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"tab1",children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"tab1",children:"First Tab"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"tab2",children:"Second Tab"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"tab3",children:"Third Tab"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"tab1",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"Content for the first tab. This demonstrates the basic usage of the Tabs compound component."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"tab2",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"Content for the second tab. Each panel is only rendered when its corresponding tab is active."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"tab3",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"Content for the third tab. The tabs support keyboard navigation with arrow keys."})})]})},WithDisabledTab={render:()=>(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"active",children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"active",children:"Active"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"disabled",disabled:!0,children:"Disabled"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"another",children:"Another"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"active",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"The second tab is disabled and cannot be selected."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"disabled",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"This content will never be shown because the tab is disabled."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"another",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"Content for the third tab."})})]})},ProductDetailsTabs={name:"Product Details Example",render:()=>(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"details",children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"details",children:"Details"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"specifications",children:"Specifications"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"reviews",children:"Reviews (24)"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"shipping",children:"Shipping"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"details",children:(0,jsx_runtime.jsxs)("div",{className:"space-y-4",children:[(0,jsx_runtime.jsx)("h3",{className:"text-lg font-semibold text-gray-900 dark:text-white",children:"Product Description"}),(0,jsx_runtime.jsx)("p",{className:"text-gray-600 dark:text-gray-400",children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."}),(0,jsx_runtime.jsxs)("ul",{className:"list-disc list-inside text-gray-600 dark:text-gray-400",children:[(0,jsx_runtime.jsx)("li",{children:"Premium quality materials"}),(0,jsx_runtime.jsx)("li",{children:"Eco-friendly packaging"}),(0,jsx_runtime.jsx)("li",{children:"1-year warranty included"})]})]})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"specifications",children:(0,jsx_runtime.jsx)("table",{className:"w-full text-sm",children:(0,jsx_runtime.jsxs)("tbody",{children:[(0,jsx_runtime.jsxs)("tr",{className:"border-b dark:border-gray-700",children:[(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-500 dark:text-gray-400",children:"Dimensions"}),(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-900 dark:text-white",children:"10 x 5 x 3 inches"})]}),(0,jsx_runtime.jsxs)("tr",{className:"border-b dark:border-gray-700",children:[(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-500 dark:text-gray-400",children:"Weight"}),(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-900 dark:text-white",children:"1.5 lbs"})]}),(0,jsx_runtime.jsxs)("tr",{className:"border-b dark:border-gray-700",children:[(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-500 dark:text-gray-400",children:"Material"}),(0,jsx_runtime.jsx)("td",{className:"py-2 text-gray-900 dark:text-white",children:"Aluminum"})]})]})})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"reviews",children:(0,jsx_runtime.jsxs)("div",{className:"space-y-4",children:[(0,jsx_runtime.jsxs)("div",{className:"flex items-center gap-2",children:[(0,jsx_runtime.jsx)("span",{className:"text-2xl font-bold text-gray-900 dark:text-white",children:"4.5"}),(0,jsx_runtime.jsx)("span",{className:"text-yellow-400",children:"*".repeat(5)}),(0,jsx_runtime.jsx)("span",{className:"text-gray-500 dark:text-gray-400",children:"(24 reviews)"})]}),(0,jsx_runtime.jsx)("p",{className:"text-gray-600 dark:text-gray-400",children:"Customers love this product! Read the reviews below."})]})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"shipping",children:(0,jsx_runtime.jsxs)("div",{className:"space-y-2 text-gray-600 dark:text-gray-400",children:[(0,jsx_runtime.jsx)("p",{children:"Free shipping on orders over $50"}),(0,jsx_runtime.jsx)("p",{children:"Standard delivery: 5-7 business days"}),(0,jsx_runtime.jsx)("p",{children:"Express delivery: 2-3 business days (+$9.99)"})]})})]})},Controlled={name:"Controlled Mode",render:function ControlledTabs(){const[activeTab,setActiveTab]=(0,react.useState)("first");return(0,jsx_runtime.jsxs)("div",{className:"space-y-4",children:[(0,jsx_runtime.jsxs)("div",{className:"flex gap-2",children:[(0,jsx_runtime.jsx)("button",{onClick:()=>setActiveTab("first"),className:"px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",children:"Go to First"}),(0,jsx_runtime.jsx)("button",{onClick:()=>setActiveTab("second"),className:"px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",children:"Go to Second"}),(0,jsx_runtime.jsx)("button",{onClick:()=>setActiveTab("third"),className:"px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",children:"Go to Third"})]}),(0,jsx_runtime.jsxs)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:["Current tab: ",activeTab]}),(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"first",value:activeTab,onChange:setActiveTab,children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"first",children:"First"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"second",children:"Second"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"third",children:"Third"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"first",children:"First tab content"}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"second",children:"Second tab content"}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"third",children:"Third tab content"})]})]})}},KeepMounted={name:"Keep Panels Mounted",render:function KeepMountedTabs(){const[counter,setCounter]=(0,react.useState)(0);return(0,jsx_runtime.jsxs)("div",{className:"space-y-4",children:[(0,jsx_runtime.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"When keepMounted is true, panel state is preserved when switching tabs."}),(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"stateful",children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"stateful",children:"Stateful Panel"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"other",children:"Other Panel"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"stateful",keepMounted:!0,children:(0,jsx_runtime.jsxs)("div",{className:"space-y-2",children:[(0,jsx_runtime.jsxs)("p",{className:"text-gray-700 dark:text-gray-300",children:["Counter: ",counter]}),(0,jsx_runtime.jsx)("button",{onClick:()=>setCounter(c=>c+1),className:"px-3 py-1 text-sm bg-blue-500 text-white rounded hover:bg-blue-600",children:"Increment"}),(0,jsx_runtime.jsx)("p",{className:"text-sm text-gray-500 dark:text-gray-400",children:"Switch to another tab and back - the counter value is preserved!"})]})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"other",keepMounted:!0,children:(0,jsx_runtime.jsx)("p",{className:"text-gray-700 dark:text-gray-300",children:"This is another panel. Go back to see the counter value preserved."})})]})]})}},DarkMode={render:()=>(0,jsx_runtime.jsx)("div",{className:"dark bg-gray-900 p-6 rounded-lg",children:(0,jsx_runtime.jsxs)(Tabs,{defaultTab:"dark1",children:[(0,jsx_runtime.jsxs)(Tabs.List,{children:[(0,jsx_runtime.jsx)(Tabs.Tab,{value:"dark1",children:"Dark Tab 1"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"dark2",children:"Dark Tab 2"}),(0,jsx_runtime.jsx)(Tabs.Tab,{value:"dark3",children:"Dark Tab 3"})]}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"dark1",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-300",children:"This shows the tabs in dark mode styling."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"dark2",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-300",children:"Second dark mode panel content."})}),(0,jsx_runtime.jsx)(Tabs.Panel,{value:"dark3",children:(0,jsx_runtime.jsx)("p",{className:"text-gray-300",children:"Third dark mode panel content."})})]})})},__namedExportsOrder=["Default","WithDisabledTab","ProductDetailsTabs","Controlled","KeepMounted","DarkMode"]}}]);