"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[7092],{"./src/components/layout/Grid/Grid.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DifferentGapSizes:()=>DifferentGapSizes,FourColumns:()=>FourColumns,ProductGrid:()=>ProductGrid,ResponsiveGrid:()=>ResponsiveGrid,ResponsiveGridItem:()=>ResponsiveGridItem,ThreeColumns:()=>ThreeColumns,TwelveColumnLayout:()=>TwelveColumnLayout,TwoColumns:()=>TwoColumns,WithAlignment:()=>WithAlignment,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Grid_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 Grid=react.forwardRef(({cols=1,responsive,gap="md",alignItems,justifyItems,className,children,...props},ref)=>{const responsiveClasses=responsive?[responsive.sm&&`sm:grid-cols-${responsive.sm}`,responsive.md&&`md:grid-cols-${responsive.md}`,responsive.lg&&`lg:grid-cols-${responsive.lg}`,responsive.xl&&`xl:grid-cols-${responsive.xl}`].filter(Boolean).join(" "):"",alignItemsStyles=alignItems?{start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch"}[alignItems]:"",justifyItemsStyles=justifyItems?{start:"justify-items-start",center:"justify-items-center",end:"justify-items-end",stretch:"justify-items-stretch"}[justifyItems]:"";return(0,jsx_runtime.jsx)("div",{ref,className:(0,core.cn)("grid",{1:"grid-cols-1",2:"grid-cols-2",3:"grid-cols-3",4:"grid-cols-4",6:"grid-cols-6",12:"grid-cols-12"}[cols],responsiveClasses,{none:"gap-0",sm:"gap-2",md:"gap-4",lg:"gap-6",xl:"gap-8"}[gap],alignItemsStyles,justifyItemsStyles,className),...props,children})});Grid.displayName="Grid";const GridItem=react.forwardRef(({colSpan,rowSpan,responsive,className,children,...props},ref)=>{const colSpanStyles=colSpan?`col-span-${colSpan}`:"",rowSpanStyles=rowSpan?`row-span-${rowSpan}`:"",responsiveClasses=responsive?[responsive.sm&&`sm:col-span-${responsive.sm}`,responsive.md&&`md:col-span-${responsive.md}`,responsive.lg&&`lg:col-span-${responsive.lg}`,responsive.xl&&`xl:col-span-${responsive.xl}`].filter(Boolean).join(" "):"";return(0,jsx_runtime.jsx)("div",{ref,className:(0,core.cn)(colSpanStyles,rowSpanStyles,responsiveClasses,className),...props,children})});GridItem.displayName="GridItem";const Grid_stories={title:"Layout/Grid",component:Grid,parameters:{layout:"padded"},tags:["autodocs"],decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"w-full",children:(0,jsx_runtime.jsx)(Story,{})})]},DemoBox=({children})=>(0,jsx_runtime.jsx)("div",{className:"bg-blue/10 border-2 border-blue rounded p-4 text-center",children}),TwoColumns={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:2,gap:"md",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Column 1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Column 2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Column 3"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Column 4"})]})},ThreeColumns={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"md",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Item 1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Item 2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Item 3"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Item 4"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Item 5"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Item 6"})]})},FourColumns={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:4,gap:"md",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"}),(0,jsx_runtime.jsx)(DemoBox,{children:"4"}),(0,jsx_runtime.jsx)(DemoBox,{children:"5"}),(0,jsx_runtime.jsx)(DemoBox,{children:"6"}),(0,jsx_runtime.jsx)(DemoBox,{children:"7"}),(0,jsx_runtime.jsx)(DemoBox,{children:"8"})]})},ResponsiveGrid={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:1,responsive:{sm:2,md:3,lg:4},gap:"md",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Product 1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 3"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 4"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 5"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 6"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 7"}),(0,jsx_runtime.jsx)(DemoBox,{children:"Product 8"})]}),parameters:{docs:{description:{story:"Responsive grid that shows 1 column on mobile, 2 on small screens, 3 on medium, and 4 on large screens."}}}},DifferentGapSizes={render:()=>(0,jsx_runtime.jsxs)("div",{className:"space-y-8",children:[(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"No Gap"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"none",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Small Gap"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"sm",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Medium Gap"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"md",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Large Gap"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"lg",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Extra Large Gap"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"xl",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"1"}),(0,jsx_runtime.jsx)(DemoBox,{children:"2"}),(0,jsx_runtime.jsx)(DemoBox,{children:"3"})]})]})]})},WithAlignment={render:()=>(0,jsx_runtime.jsxs)("div",{className:"space-y-8",children:[(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Center Aligned"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"md",alignItems:"center",className:"min-h-[200px]",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Short"}),(0,jsx_runtime.jsxs)(DemoBox,{children:["Taller",(0,jsx_runtime.jsx)("br",{}),"Content"]}),(0,jsx_runtime.jsx)(DemoBox,{children:"Short"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"Start Aligned"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"md",alignItems:"start",className:"min-h-[200px]",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Short"}),(0,jsx_runtime.jsxs)(DemoBox,{children:["Taller",(0,jsx_runtime.jsx)("br",{}),"Content"]}),(0,jsx_runtime.jsx)(DemoBox,{children:"Short"})]})]}),(0,jsx_runtime.jsxs)("div",{children:[(0,jsx_runtime.jsx)("h3",{className:"mb-2 font-medium",children:"End Aligned"}),(0,jsx_runtime.jsxs)(Grid,{cols:3,gap:"md",alignItems:"end",className:"min-h-[200px]",children:[(0,jsx_runtime.jsx)(DemoBox,{children:"Short"}),(0,jsx_runtime.jsxs)(DemoBox,{children:["Taller",(0,jsx_runtime.jsx)("br",{}),"Content"]}),(0,jsx_runtime.jsx)(DemoBox,{children:"Short"})]})]})]})},TwelveColumnLayout={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:12,gap:"md",children:[(0,jsx_runtime.jsx)(GridItem,{colSpan:12,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Full Width Header (12 cols)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:8,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Main Content (8 cols)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:4,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Sidebar (4 cols)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:6,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Half Width (6 cols)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:6,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Half Width (6 cols)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:12,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Full Width Footer (12 cols)"})})]}),parameters:{docs:{description:{story:"Classic 12-column grid layout with GridItem components spanning different column counts."}}}},ResponsiveGridItem={render:()=>(0,jsx_runtime.jsxs)(Grid,{cols:12,gap:"md",children:[(0,jsx_runtime.jsx)(GridItem,{colSpan:12,children:(0,jsx_runtime.jsx)(DemoBox,{children:"Header (always full width)"})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:12,responsive:{md:8,lg:9},children:(0,jsx_runtime.jsxs)(DemoBox,{children:["Main Content",(0,jsx_runtime.jsx)("br",{}),"(Full on mobile, 8 cols on tablet, 9 cols on desktop)"]})}),(0,jsx_runtime.jsx)(GridItem,{colSpan:12,responsive:{md:4,lg:3},children:(0,jsx_runtime.jsxs)(DemoBox,{children:["Sidebar",(0,jsx_runtime.jsx)("br",{}),"(Full on mobile, 4 cols on tablet, 3 cols on desktop)"]})})]}),parameters:{docs:{description:{story:"GridItem with responsive column spans that change based on screen size."}}}},ProductGrid={render:()=>(0,jsx_runtime.jsx)(Grid,{cols:1,responsive:{sm:2,md:3,lg:4},gap:"lg",children:Array.from({length:8}).map((_,i)=>(0,jsx_runtime.jsxs)("div",{className:"bg-white border rounded-lg p-4 shadow-sm",children:[(0,jsx_runtime.jsx)("div",{className:"bg-gray-200 h-48 rounded mb-4"}),(0,jsx_runtime.jsxs)("h3",{className:"font-medium mb-2",children:["Product ",i+1]}),(0,jsx_runtime.jsx)("p",{className:"text-gray-600 text-sm mb-3",children:"Product description goes here"}),(0,jsx_runtime.jsx)("p",{className:"font-bold text-blue",children:(0,core.vv)(99.99+10*i)})]},i))}),parameters:{docs:{description:{story:"Example product grid showing how the Grid component can be used in a real-world scenario."}}}},__namedExportsOrder=["TwoColumns","ThreeColumns","FourColumns","ResponsiveGrid","DifferentGapSizes","WithAlignment","TwelveColumnLayout","ResponsiveGridItem","ProductGrid"]}}]);