"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[7633],{"./src/components/ui/Input/Input.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AllSizes:()=>AllSizes,AllStates:()=>AllStates,Default:()=>Default,Disabled:()=>Disabled,EmailInput:()=>EmailInput,FormExample:()=>FormExample,FullWidth:()=>FullWidth,Large:()=>Large,Medium:()=>Medium,NumberInput:()=>NumberInput,PasswordInput:()=>PasswordInput,Required:()=>Required,SearchInput:()=>SearchInput,Small:()=>Small,Success:()=>Success,ValidationExample:()=>ValidationExample,Warning:()=>Warning,WithError:()=>WithError,WithHelperText:()=>WithHelperText,WithIcons:()=>WithIcons,WithLabel:()=>WithLabel,WithLeftIcon:()=>WithLeftIcon,WithRightIcon:()=>WithRightIcon,__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"),_index__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./src/components/ui/Input/index.tsx"),_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/ui/icons/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Input",component:_index__WEBPACK_IMPORTED_MODULE_1__.p,parameters:{layout:"padded"},tags:["autodocs"],argTypes:{size:{control:"select",options:["sm","md","lg"]},state:{control:"select",options:["default","success","error","warning"]},type:{control:"select",options:["text","email","password","number","tel","url","search"]},fullWidth:{control:"boolean"},disabled:{control:"boolean"},required:{control:"boolean"}}},Default={args:{placeholder:"Enter text..."}},WithLabel={args:{label:"Username",placeholder:"Enter your username"}},Required={args:{label:"Email Address",placeholder:"you@example.com",type:"email",required:!0}},WithHelperText={args:{label:"Email",placeholder:"you@example.com",helperText:"We'll never share your email with anyone else"}},WithError={args:{label:"Password",type:"password",value:"123",error:"Password must be at least 8 characters"}},Success={args:{label:"Username",value:"johndoe",state:"success",helperText:"Username is available!"}},Warning={args:{label:"Email",value:"user@example.com",state:"warning",helperText:"This email is already registered"}},Small={args:{size:"sm",label:"Small Input",placeholder:"Small size"}},Medium={args:{size:"md",label:"Medium Input",placeholder:"Medium size"}},Large={args:{size:"lg",label:"Large Input",placeholder:"Large size"}},Disabled={args:{label:"Disabled Input",value:"Cannot edit this",disabled:!0}},FullWidth={args:{label:"Full Width",placeholder:"This input takes full width",fullWidth:!0}},WithLeftIcon={args:{label:"Search",placeholder:"Search products...",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"search",size:20})}},WithRightIcon={args:{label:"Email",type:"email",placeholder:"you@example.com",rightIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"email",size:20})}},PasswordInput={args:{label:"Password",type:"password",placeholder:"Enter your password",required:!0}},EmailInput={args:{label:"Email Address",type:"email",placeholder:"you@example.com",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"email",size:20})}},SearchInput={args:{type:"search",placeholder:"Search...",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"search",size:20})}},NumberInput={args:{label:"Quantity",type:"number",min:1,max:100,value:1}},AllSizes={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{size:"sm",label:"Small",placeholder:"Small input"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{size:"md",label:"Medium",placeholder:"Medium input"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{size:"lg",label:"Large",placeholder:"Large input"})]}),parameters:{docs:{description:{story:"All input sizes displayed together"}}}},AllStates={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Default State",placeholder:"Normal input",state:"default"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Success State",value:"Valid input",state:"success",helperText:"Looks good!"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Warning State",value:"Potential issue",state:"warning",helperText:"Please double check this"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Error State",value:"Invalid input",error:"This field is required"})]}),parameters:{docs:{description:{story:"All validation states displayed together"}}}},WithIcons={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Search",placeholder:"Search products...",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"search",size:20})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Email",type:"email",placeholder:"you@example.com",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"email",size:20})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Phone",type:"tel",placeholder:"+1 (555) 000-0000",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"phone",size:20})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Location",placeholder:"Enter your location",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"map-pin",size:20})})]}),parameters:{docs:{description:{story:"Inputs with icons for different purposes"}}}},FormExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"max-w-md space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2",{className:"text-2xl font-bold mb-4",children:"Contact Form"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Full Name",placeholder:"John Doe",required:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Email Address",type:"email",placeholder:"you@example.com",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"email",size:20}),required:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Phone Number",type:"tel",placeholder:"+1 (555) 000-0000",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_2__.In,{name:"phone",size:20}),helperText:"Optional - for faster response"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Subject",placeholder:"How can we help?",required:!0})]}),parameters:{docs:{description:{story:"Complete form using various Input configurations"}}}},ValidationExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"max-w-md space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2",{className:"text-2xl font-bold mb-4",children:"Form Validation"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Username",value:"jo",error:"Username must be at least 3 characters"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Email",value:"invalid-email",error:"Please enter a valid email address"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Password",type:"password",value:"123",error:"Password must be at least 8 characters"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_1__.p,{label:"Confirm Password",type:"password",value:"456",error:"Passwords do not match"})]}),parameters:{docs:{description:{story:"Form inputs with validation errors"}}}},__namedExportsOrder=["Default","WithLabel","Required","WithHelperText","WithError","Success","Warning","Small","Medium","Large","Disabled","FullWidth","WithLeftIcon","WithRightIcon","PasswordInput","EmailInput","SearchInput","NumberInput","AllSizes","AllStates","WithIcons","FormExample","ValidationExample"]},"./src/components/ui/Input/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{p:()=>Input});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"),_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/ui/icons/index.ts");const Input=react__WEBPACK_IMPORTED_MODULE_1__.forwardRef((props,ref)=>{const{as="input",size="md",state="default",label,helperText,error,leftIcon,rightIcon,fullWidth,className,id,required,children,...restProps}=props,generatedId=react__WEBPACK_IMPORTED_MODULE_1__.useId(),inputId=id||generatedId,helperTextId=`${inputId}-helper`,errorId=`${inputId}-error`,actualState=error?"error":state,stateStyles={default:"\n        border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100\n        hover:border-gray-400 dark:hover:border-gray-500\n        focus:border-blue focus:ring-blue/20\n      ",success:"\n        border-green-500 text-gray-900 dark:text-gray-100\n        focus:border-green-500 focus:ring-green-500/20\n      ",error:"\n        border-red-500 text-gray-900 dark:text-gray-100\n        focus:border-red-500 focus:ring-red-500/20\n      ",warning:"\n        border-yellow-500 text-gray-900 dark:text-gray-100\n        focus:border-yellow-500 focus:ring-yellow-500/20\n      "},iconPadding={left:leftIcon?"pl-10":"",right:rightIcon?"pr-10":""},elementClassName=(0,_lib_core__WEBPACK_IMPORTED_MODULE_2__.cn)("\n      w-full rounded-lg border bg-white dark:bg-gray-800\n      transition-all duration-200\n      focus:outline-none focus:ring-2 focus:ring-offset-1 dark:focus:ring-offset-gray-900\n      disabled:opacity-50 disabled:cursor-not-allowed disabled:bg-gray-100 dark:disabled:bg-gray-700\n      placeholder:text-gray-400 dark:placeholder:text-gray-500\n    ",{sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg"}[size],stateStyles[actualState],"select"!==as&&iconPadding.left,"select"!==as&&iconPadding.right,"select"===as&&"appearance-none pr-10",className);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:(0,_lib_core__WEBPACK_IMPORTED_MODULE_2__.cn)("relative",fullWidth&&"w-full"),children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label",{htmlFor:inputId,className:"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",children:[label,required&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{"aria-hidden":"true",className:"text-red-500 ml-1",children:"*"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:"sr-only",children:"(required)"})]})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"relative",children:"select"===as?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("select",{ref,id:inputId,className:elementClassName,"aria-describedby":error?errorId:helperText?helperTextId:void 0,"aria-invalid":"error"===actualState,"aria-required":required||void 0,required,...restProps,children}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__.In,{name:"chevron-down",size:16})})]}):"textarea"===as?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("textarea",{ref,id:inputId,className:elementClassName,"aria-describedby":error?errorId:helperText?helperTextId:void 0,"aria-invalid":"error"===actualState,"aria-required":required||void 0,required,...restProps}):(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.Fragment,{children:[leftIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none",children:leftIcon}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input",{ref,id:inputId,className:elementClassName,"aria-describedby":error?errorId:helperText?helperTextId:void 0,"aria-invalid":"error"===actualState,"aria-required":required||void 0,required,...restProps}),rightIcon&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 pointer-events-none",children:rightIcon})]})}),error&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:errorId,className:"mt-1 text-sm text-red-600",role:"alert",children:error}),!error&&helperText&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:helperTextId,className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:helperText})]})});Input.displayName="Input"}}]);