"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[9299],{"./src/components/ui/layout/Flex.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{CardLayout:()=>CardLayout,CenterExample:()=>CenterExample,CenteredContent:()=>CenteredContent,Column:()=>Column,HStackExample:()=>HStackExample,HeaderLayout:()=>HeaderLayout,Row:()=>Row,SpaceBetween:()=>SpaceBetween,VStackExample:()=>VStackExample,WithGap:()=>WithGap,WithSpacer:()=>WithSpacer,Wrapped:()=>Wrapped,__namedExportsOrder:()=>__namedExportsOrder,default:()=>__WEBPACK_DEFAULT_EXPORT__});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),_Flex__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/ui/layout/Flex.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Layout/Flex",component:_Flex__WEBPACK_IMPORTED_MODULE_1__.so,parameters:{layout:"padded"},tags:["autodocs"],decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{border:"1px dashed #ccc",padding:"16px",minHeight:"200px"},children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],argTypes:{direction:{control:"select",options:["row","column","row-reverse","column-reverse"]},align:{control:"select",options:["start","center","end","stretch","baseline"]},justify:{control:"select",options:["start","center","end","between","around","evenly"]},gap:{control:"number"},wrap:{control:"boolean"}}},Box=({children,...props})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{style:{padding:"16px",backgroundColor:"#3b82f6",color:"white",borderRadius:"4px",minWidth:"80px",textAlign:"center"},...props,children}),Row={args:{direction:"row",gap:4},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 2"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 3"})]})},Column={args:{direction:"column",gap:4},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 2"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 3"})]})},CenteredContent={args:{align:"center",justify:"center"},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Centered"})})},SpaceBetween={args:{align:"center",justify:"between"},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Left"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Right"})]})},WithGap={args:{gap:8},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Gap 8"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Between"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Items"})]})},Wrapped={args:{wrap:!0,gap:4},render:args=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.so,{...args,style:{maxWidth:"300px"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 2"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 3"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 5"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Item 6"})]})},HStackExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.zt,{gap:4,align:"center",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Logo"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Navigation"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Actions"})]})},VStackExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.Tk,{gap:4,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Header"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Content"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Footer"})]})},CenterExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Flex__WEBPACK_IMPORTED_MODULE_1__.ov,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Centered Box"})})},WithSpacer={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.zt,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Left"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Flex__WEBPACK_IMPORTED_MODULE_1__.hK,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{children:"Right"})]}),parameters:{docs:{description:{story:"Spacer pushes items apart, filling available space"}}}},HeaderLayout={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.zt,{align:"center",justify:"between",style:{padding:"16px",backgroundColor:"#f3f4f6"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#1f2937"},children:"Logo"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.zt,{gap:4,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#6366f1"},children:"Home"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#6366f1"},children:"About"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#6366f1"},children:"Contact"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#10b981"},children:"Sign In"})]}),parameters:{docs:{description:{story:"Common header layout pattern with logo, navigation, and actions"}}}},CardLayout={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.Tk,{gap:4,style:{padding:"24px",backgroundColor:"white",borderRadius:"8px",boxShadow:"0 1px 3px rgba(0,0,0,0.1)"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{width:"100%"},children:"Image"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.Tk,{gap:2,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{width:"100%",backgroundColor:"#1f2937"},children:"Title"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{width:"100%",backgroundColor:"#6b7280"},children:"Description"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(_Flex__WEBPACK_IMPORTED_MODULE_1__.zt,{gap:2,style:{width:"100%"},children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{flex:1,backgroundColor:"#3b82f6"},children:"Add to Cart"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Box,{style:{backgroundColor:"#ef4444"},children:"Wishlist"})]})]}),parameters:{docs:{description:{story:"Product card layout using nested VStack and HStack"}}}},__namedExportsOrder=["Row","Column","CenteredContent","SpaceBetween","WithGap","Wrapped","HStackExample","VStackExample","CenterExample","WithSpacer","HeaderLayout","CardLayout"]},"./src/components/ui/layout/Flex.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Tk:()=>VStack,hK:()=>Spacer,ov:()=>Center,so:()=>Flex,zt:()=>HStack});var react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),_lib_core__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/lib/core/index.ts");const directionMap={row:"flex-row",column:"flex-col","row-reverse":"flex-row-reverse","column-reverse":"flex-col-reverse"},alignMap={start:"items-start",center:"items-center",end:"items-end",stretch:"items-stretch",baseline:"items-baseline"},justifyMap={start:"justify-start",center:"justify-center",end:"justify-end",between:"justify-between",around:"justify-around",evenly:"justify-evenly"},gapMap={0:"gap-0",1:"gap-1",2:"gap-2",2.5:"gap-2.5",3:"gap-3",4:"gap-4",5:"gap-5",6:"gap-6",7:"gap-7",8:"gap-8",10:"gap-10",12:"gap-12",16:"gap-16",20:"gap-20",24:"gap-24"},wrapMap={true:"flex-wrap",false:"flex-nowrap",reverse:"flex-wrap-reverse"},Flex=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({direction="row",align,justify,gap,wrap=!1,as:Component="div",className,children,...props},ref)=>{const classes=(0,_lib_core__WEBPACK_IMPORTED_MODULE_2__.cn)("flex",directionMap[direction],align&&alignMap[align],justify&&justifyMap[justify],void 0!==gap&&gapMap[gap],wrapMap[wrap.toString()],className);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Component,{ref,className:classes,...props,children})});Flex.displayName="Flex";const HStack=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props,ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Flex,{ref,direction:"row",...props}));HStack.displayName="HStack";const VStack=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props,ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Flex,{ref,direction:"column",...props}));VStack.displayName="VStack";const Center=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((props,ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Flex,{ref,align:"center",justify:"center",...props}));Center.displayName="Center";const Spacer=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{ref,className:(0,_lib_core__WEBPACK_IMPORTED_MODULE_2__.cn)("flex-1",className),...props}));Spacer.displayName="Spacer"}}]);