"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[4018],{"./src/components/ui/FormInput/FormInput.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{DarkMode:()=>DarkMode,DarkModeWithError:()=>DarkModeWithError,Default:()=>Default,Disabled:()=>Disabled,Interactive:()=>Interactive,IsDisabled:()=>IsDisabled,IsLoading:()=>IsLoading,Required:()=>Required,Sizes:()=>Sizes,WithError:()=>WithError,WithErrorNotTouched:()=>WithErrorNotTouched,WithHelperText:()=>WithHelperText,WithLeftIcon:()=>WithLeftIcon,WithRightIcon:()=>WithRightIcon,WithStandardErrorProps:()=>WithStandardErrorProps,__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"),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),_index__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/ui/FormInput/index.tsx"),_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/components/ui/icons/index.ts");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Forms/FormInput",component:_index__WEBPACK_IMPORTED_MODULE_2__.Z,parameters:{layout:"centered",docs:{description:{component:"A text input component designed to work with the form validation framework. Only shows errors when the field has been touched."}}},tags:["autodocs"],decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"w-[400px]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],argTypes:{size:{control:"select",options:["sm","md","lg"]},type:{control:"select",options:["text","email","password","number","tel","url"]}}},Default={args:{label:"Email",type:"email",placeholder:"Enter your email"}},WithError={args:{label:"Email",type:"email",placeholder:"Enter your email",value:"invalid-email",error:"Please enter a valid email address",touched:!0}},WithErrorNotTouched={args:{label:"Email",type:"email",placeholder:"Enter your email",error:"Please enter a valid email address",touched:!1}},WithHelperText={args:{label:"Password",type:"password",placeholder:"Enter your password",helperText:"Must be at least 8 characters"}},Required={args:{label:"Full Name",placeholder:"Enter your full name",required:!0}},Disabled={args:{label:"Email",type:"email",value:"user@example.com",disabled:!0}},IsDisabled={args:{label:"Email",type:"email",value:"user@example.com",isDisabled:!0}},IsLoading={args:{label:"Email",type:"email",placeholder:"Loading...",isLoading:!0}},WithStandardErrorProps={args:{label:"Email",type:"email",value:"invalid-email",isError:!0,errorMessage:"Please enter a valid email address"}},WithLeftIcon={args:{label:"Search",placeholder:"Search...",leftIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__.In,{name:"search",size:16})}},WithRightIcon={args:{label:"Email",type:"email",placeholder:"Enter your email",rightIcon:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_components_ui_icons__WEBPACK_IMPORTED_MODULE_3__.In,{name:"email",size:16})}},Sizes={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_2__.Z,{label:"Small",size:"sm",placeholder:"Small input"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.Z,{label:"Medium",size:"md",placeholder:"Medium input"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.Z,{label:"Large",size:"lg",placeholder:"Large input"})]})},Interactive={render:function InteractiveExample(){const[value,setValue]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(""),[touched,setTouched]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1),error=value&&!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)?"Please enter a valid email address":null;return(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_2__.Z,{label:"Email",type:"email",placeholder:"Enter your email",value,onChange:e=>setValue(e.target.value),onBlur:()=>setTouched(!0),error,touched,required:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"text-sm text-gray-500",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{children:["Value: ",value||"(empty)"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{children:["Touched: ",touched?"Yes":"No"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{children:["Error: ",error||"(none)"]})]})]})}},DarkMode={args:{label:"Email",type:"email",placeholder:"Enter your email"},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark bg-gray-900 p-6 rounded-lg w-[400px]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},DarkModeWithError={args:{label:"Email",type:"email",value:"invalid",error:"Please enter a valid email address",touched:!0},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark bg-gray-900 p-6 rounded-lg w-[400px]",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})]},__namedExportsOrder=["Default","WithError","WithErrorNotTouched","WithHelperText","Required","Disabled","IsDisabled","IsLoading","WithStandardErrorProps","WithLeftIcon","WithRightIcon","Sizes","Interactive","DarkMode","DarkModeWithError"]},"./src/components/ui/FormInput/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{Z:()=>FormInput});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"),_Input__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("./src/components/ui/Input/index.tsx"),_lib_core__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/lib/core/index.ts");const FormInput=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({label,errorMessage,isLoading,isDisabled,isError,error,touched,helperText,size="md",leftIcon,rightIcon,wrapperClassName,className,id,required,disabled,...props},ref)=>{const resolvedErrorMessage=errorMessage??error??void 0,displayedError=isError??(!!touched&&!!resolvedErrorMessage)?resolvedErrorMessage:void 0,resolvedDisabled=isDisabled??disabled;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:(0,_lib_core__WEBPACK_IMPORTED_MODULE_3__.cn)("form-input-wrapper",wrapperClassName),children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_Input__WEBPACK_IMPORTED_MODULE_2__.p,{ref,id,label,error:displayedError,helperText,size,leftIcon,rightIcon,required,disabled:resolvedDisabled||isLoading,fullWidth:!0,className,...props})})});FormInput.displayName="FormInput"},"./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"}}]);