"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[2598],{"./src/components/ui/Checkbox/Checkbox.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{AllSizes:()=>AllSizes,AllStates:()=>AllStates,Checked:()=>Checked,Default:()=>Default,Disabled:()=>Disabled,DisabledChecked:()=>DisabledChecked,FormExample:()=>FormExample,Interactive:()=>Interactive,Large:()=>Large,Medium:()=>Medium,SettingsExample:()=>SettingsExample,Small:()=>Small,Success:()=>Success,ValidationExample:()=>ValidationExample,Warning:()=>Warning,WithError:()=>WithError,WithHelperText:()=>WithHelperText,WithoutLabel:()=>WithoutLabel,__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/Checkbox/index.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"UI/Checkbox",component:_index__WEBPACK_IMPORTED_MODULE_2__.S,parameters:{layout:"padded"},tags:["autodocs"],argTypes:{size:{control:"select",options:["sm","md","lg"]},state:{control:"select",options:["default","success","error","warning"]},checked:{control:"boolean"},disabled:{control:"boolean"}}},Default={args:{label:"Accept terms and conditions"}},Checked={args:{label:"I agree to the terms",checked:!0}},WithoutLabel={args:{checked:!1}},WithHelperText={args:{label:"Subscribe to newsletter",helperText:"Get updates about new products and exclusive offers"}},WithError={args:{label:"I agree to the terms and conditions",checked:!1,error:"You must accept the terms to continue"}},Success={args:{label:"Email verified",checked:!0,state:"success",helperText:"Your email has been verified successfully"}},Warning={args:{label:"Enable notifications",state:"warning",helperText:"Browser notifications may not work on this device"}},Disabled={args:{label:"This option is disabled",disabled:!0,checked:!1}},DisabledChecked={args:{label:"This option is checked and disabled",disabled:!0,checked:!0}},Small={args:{size:"sm",label:"Small checkbox",helperText:"Small size variant"}},Medium={args:{size:"md",label:"Medium checkbox",helperText:"Default medium size"}},Large={args:{size:"lg",label:"Large checkbox",helperText:"Large size variant"}},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_2__.S,{size:"sm",label:"Small size",checked:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{size:"md",label:"Medium size (default)",checked:!0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{size:"lg",label:"Large size",checked:!0})]}),parameters:{docs:{description:{story:"All checkbox 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_2__.S,{label:"Default State",state:"default",helperText:"Normal checkbox"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Success State",checked:!0,state:"success",helperText:"Successfully verified"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Warning State",state:"warning",helperText:"Proceed with caution"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Error State",error:"This field is required"})]}),parameters:{docs:{description:{story:"All validation states displayed together"}}}},InteractiveComponent=()=>{const[checked,setChecked]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);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__.S,{label:"Toggle me",checked,onChange:setChecked,helperText:checked?"Checkbox is checked":"Checkbox is unchecked"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{className:"text-sm text-gray-600",children:["Current state: ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("strong",{children:checked?"Checked":"Unchecked"})]})]})},Interactive={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(InteractiveComponent,{}),parameters:{docs:{description:{story:"Interactive checkbox with state management"}}}},FormExampleComponent=()=>{const[formData,setFormData]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({newsletter:!1,terms:!1,updates:!0,marketing:!1});return(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:"Preferences"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Subscribe to newsletter",checked:formData.newsletter,onChange:checked=>setFormData({...formData,newsletter:checked}),helperText:"Receive weekly updates about new products"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"I agree to the terms and conditions",checked:formData.terms,onChange:checked=>setFormData({...formData,terms:checked}),error:formData.terms?void 0:"You must accept the terms to continue"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Product updates",checked:formData.updates,onChange:checked=>setFormData({...formData,updates:checked}),helperText:"Get notified when new features are released"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Marketing communications",checked:formData.marketing,onChange:checked=>setFormData({...formData,marketing:checked}),helperText:"Receive promotional offers and discounts"})]})},FormExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(FormExampleComponent,{}),parameters:{docs:{description:{story:"Complete form with multiple checkboxes"}}}},SettingsExampleComponent=()=>{const[settings,setSettings]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)({notifications:!0,autoSave:!0,darkMode:!1,analytics:!1});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"max-w-md space-y-6",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h2",{className:"text-2xl font-bold mb-4",children:"Settings"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3",{className:"font-semibold mb-2",children:"Notifications"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Enable push notifications",checked:settings.notifications,onChange:checked=>setSettings({...settings,notifications:checked}),helperText:"Receive real-time alerts for important events"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3",{className:"font-semibold mb-2",children:"Editor"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Auto-save",checked:settings.autoSave,onChange:checked=>setSettings({...settings,autoSave:checked}),helperText:"Automatically save changes every 30 seconds"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3",{className:"font-semibold mb-2",children:"Appearance"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Dark mode",checked:settings.darkMode,onChange:checked=>setSettings({...settings,darkMode:checked}),helperText:"Use dark theme across the application"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("h3",{className:"font-semibold mb-2",children:"Privacy"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"Share usage analytics",checked:settings.analytics,onChange:checked=>setSettings({...settings,analytics:checked}),helperText:"Help us improve by sharing anonymous usage data"})]})]})},SettingsExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(SettingsExampleComponent,{}),parameters:{docs:{description:{story:"Settings page with grouped checkboxes"}}}},ValidationExampleComponent=()=>{const[accepted,setAccepted]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1),[submitted,setSubmitted]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1);return(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:"Sign Up"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.S,{label:"I agree to the Terms of Service and Privacy Policy",checked:accepted,onChange:checked=>{setAccepted(checked),setSubmitted(!1)},error:submitted&&!accepted?"You must accept the terms to continue":void 0}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button",{onClick:()=>{setSubmitted(!0)},className:"px-4 py-2 bg-blue text-white rounded-md hover:bg-blue-600 transition-colors",children:"Submit"}),submitted&&accepted&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{className:"text-green text-sm",children:"Form submitted successfully!"})]})},ValidationExample={render:()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(ValidationExampleComponent,{}),parameters:{docs:{description:{story:"Checkbox with validation on form submission"}}}},__namedExportsOrder=["Default","Checked","WithoutLabel","WithHelperText","WithError","Success","Warning","Disabled","DisabledChecked","Small","Medium","Large","AllSizes","AllStates","Interactive","FormExample","SettingsExample","ValidationExample"]},"./src/components/ui/Checkbox/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{S:()=>Checkbox});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");const Checkbox=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({label,checked,onChange,disabled=!1,error,helperText,state="default",size="md",className="",labelClassName="",id,...props},ref)=>{const generatedId=(0,react__WEBPACK_IMPORTED_MODULE_1__.useId)(),effectiveState=error?"error":state,helperTextSizeClasses={sm:"text-xs",md:"text-sm",lg:"text-base"},checkboxId=id||`checkbox-${generatedId}`;return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"flex flex-col",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("label",{htmlFor:checkboxId,className:`flex items-center gap-2 ${disabled?"cursor-not-allowed opacity-50":"cursor-pointer"} ${labelClassName}`,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input",{ref,type:"checkbox",id:checkboxId,checked,onChange:e=>{!disabled&&onChange&&onChange(e.target.checked)},disabled,"aria-invalid":"error"===effectiveState,"aria-describedby":error?`${checkboxId}-error`:helperText?`${checkboxId}-helper`:void 0,className:`\n              ${{sm:"w-3.5 h-3.5",md:"w-4 h-4",lg:"w-5 h-5"}[size]}\n              rounded\n              ${{default:"border-gray-3",success:"border-green",error:"border-red",warning:"border-yellow"}[effectiveState]}\n              text-blue\n              focus:ring-2\n              focus:ring-blue\n              focus:ring-offset-1\n              dark:focus:ring-offset-gray-900\n              ${disabled?"cursor-not-allowed bg-gray-2 dark:bg-gray-700":"bg-white dark:bg-gray-800 cursor-pointer"}\n              ${className}\n            `,...props}),label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:`text-dark dark:text-gray-100 ${{sm:"text-sm",md:"text-base",lg:"text-lg"}[size]} ${disabled?"opacity-50":""}`,children:label})]}),(helperText||error)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"mt-1 ml-6",children:[error&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:`${checkboxId}-error`,className:`text-red ${helperTextSizeClasses[size]}`,role:"alert",children:error}),helperText&&!error&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:`${checkboxId}-helper`,className:`text-dark-5 dark:text-gray-400 ${helperTextSizeClasses[size]}`,children:helperText})]})]})});Checkbox.displayName="Checkbox"}}]);