"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[2796],{"./src/components/ui/Select/Select.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Controlled:()=>Controlled,DarkMode:()=>DarkMode,DarkModeWithError:()=>DarkModeWithError,Default:()=>Default,Disabled:()=>Disabled,FormIntegration:()=>FormIntegration,HeaderVariant:()=>HeaderVariant,HiddenLabel:()=>HiddenLabel,KeyboardNavigation:()=>KeyboardNavigation,LongList:()=>LongList,MinimalVariant:()=>MinimalVariant,SortingUseCase:()=>SortingUseCase,WithDefaultValue:()=>WithDefaultValue,WithDisabledOptions:()=>WithDisabledOptions,WithError:()=>WithError,WithHelperText:()=>WithHelperText,__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/Select/index.tsx");const __WEBPACK_DEFAULT_EXPORT__={title:"Components/UI/Select",component:_index__WEBPACK_IMPORTED_MODULE_2__.l,parameters:{layout:"centered",docs:{description:{component:"\nAccessible Select component with full ARIA compliance and keyboard navigation.\n\n## Features\n- **WCAG 2.1 AA Compliant**: Full screen reader support with proper ARIA attributes\n- **Keyboard Navigation**: Arrow keys, Enter, Escape, Home, End, Tab\n- **Type-ahead Search**: Start typing to filter options\n- **Dark Mode Support**: Fully styled for light and dark themes\n- **Variants**: Default, minimal, and header styles\n- **Controlled & Uncontrolled**: Works both ways\n\n## Keyboard Shortcuts\n| Key | Action |\n|-----|--------|\n| Enter / Space | Open dropdown or select focused option |\n| Arrow Down | Open dropdown or move to next option |\n| Arrow Up | Open dropdown or move to previous option |\n| Home | Move to first option |\n| End | Move to last option |\n| Escape | Close dropdown |\n| Tab | Close dropdown and move focus |\n| A-Z, 0-9 | Type-ahead search |\n        "}}},tags:["autodocs"],argTypes:{variant:{control:"select",options:["default","minimal","header"]},disabled:{control:"boolean"},hideLabel:{control:"boolean"}}},defaultOptions=[{label:"Apple",value:"apple"},{label:"Banana",value:"banana"},{label:"Cherry",value:"cherry"},{label:"Date",value:"date"},{label:"Elderberry",value:"elderberry"}],sortOptions=[{label:"Newest First",value:"newest"},{label:"Oldest First",value:"oldest"},{label:"Price: Low to High",value:"price_asc"},{label:"Price: High to Low",value:"price_desc"},{label:"Most Popular",value:"popular"}],Default={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit..."},parameters:{docs:{description:{story:"Default select with standard styling."}}}},WithDefaultValue={args:{label:"Select a fruit",options:defaultOptions,defaultValue:"cherry"},parameters:{docs:{description:{story:"Select with a pre-selected default value."}}}},Controlled={render:args=>{const[value,setValue]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("banana");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__.l,{...args,value,onChange:val=>setValue(val)}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{className:"text-sm text-gray-600 dark:text-gray-400",children:["Selected value: ",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("strong",{children:value})]})]})},args:{label:"Select a fruit",options:defaultOptions},parameters:{docs:{description:{story:"Controlled select where parent manages the state."}}}},WithDisabledOptions={args:{label:"Select a fruit",options:[{label:"Apple",value:"apple"},{label:"Banana (Out of stock)",value:"banana",disabled:!0},{label:"Cherry",value:"cherry"},{label:"Date (Out of stock)",value:"date",disabled:!0},{label:"Elderberry",value:"elderberry"}],placeholder:"Choose a fruit..."},parameters:{docs:{description:{story:"Select with some disabled options that cannot be selected."}}}},Disabled={args:{label:"Select a fruit",options:defaultOptions,defaultValue:"apple",disabled:!0},parameters:{docs:{description:{story:"Disabled select that cannot be interacted with."}}}},WithError={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit...",error:"Please select a fruit"},parameters:{docs:{description:{story:"Select with error state and message."}}}},WithHelperText={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit...",helperText:"Choose your favorite fruit from the list"},parameters:{docs:{description:{story:"Select with helper text below."}}}},HiddenLabel={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit...",hideLabel:!0},parameters:{docs:{description:{story:"Select with visually hidden label (still accessible to screen readers)."}}}},MinimalVariant={args:{label:"Sort by",options:sortOptions,defaultValue:"newest",variant:"minimal",hideLabel:!0},parameters:{docs:{description:{story:"Minimal variant with transparent background, suitable for toolbars."}}}},HeaderVariant={args:{label:"Language",options:[{label:"English",value:"en"},{label:"Spanish",value:"es"},{label:"French",value:"fr"},{label:"German",value:"de"},{label:"Italian",value:"it"}],defaultValue:"en",variant:"header",hideLabel:!0},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"bg-gray-100 dark:bg-gray-800 p-4 rounded-lg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],parameters:{docs:{description:{story:"Header variant styled for navigation headers."}}}},SortingUseCase={render:args=>{const[sortBy,setSortBy]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)("newest");return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"w-64 space-y-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.l,{...args,value:sortBy,onChange:val=>setSortBy(val)}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:"text-sm text-gray-600 dark:text-gray-400",children:["Sorting by: ",sortOptions.find(o=>o.value===sortBy)?.label]})]})},args:{label:"Sort products",options:sortOptions,variant:"minimal",hideLabel:!0},parameters:{docs:{description:{story:"Real-world example: Product sorting dropdown."}}}},FormIntegration={render:args=>{const[submitted,setSubmitted]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(null);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("form",{onSubmit:e=>{e.preventDefault();const formData=new FormData(e.currentTarget);setSubmitted(formData.get("fruit"))},className:"space-y-4 w-64",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(_index__WEBPACK_IMPORTED_MODULE_2__.l,{...args,name:"fruit"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("button",{type:"submit",className:"w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700",children:"Submit"}),submitted&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("p",{className:"text-sm text-green-600",children:["Submitted: ",submitted]})]})},args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose..."},parameters:{docs:{description:{story:"Select integrated with a form, using hidden input for submission."}}}},LongList={args:{label:"Select a country",options:[{label:"Afghanistan",value:"af"},{label:"Albania",value:"al"},{label:"Algeria",value:"dz"},{label:"Andorra",value:"ad"},{label:"Angola",value:"ao"},{label:"Argentina",value:"ar"},{label:"Armenia",value:"am"},{label:"Australia",value:"au"},{label:"Austria",value:"at"},{label:"Azerbaijan",value:"az"},{label:"Bahamas",value:"bs"},{label:"Bahrain",value:"bh"},{label:"Bangladesh",value:"bd"},{label:"Barbados",value:"bb"},{label:"Belarus",value:"by"},{label:"Belgium",value:"be"},{label:"Belize",value:"bz"},{label:"Benin",value:"bj"},{label:"Bhutan",value:"bt"},{label:"Bolivia",value:"bo"}],placeholder:"Choose a country..."},parameters:{docs:{description:{story:"Select with many options showing scrollable dropdown."}}}},DarkMode={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit..."},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark bg-gray-900 p-8 rounded-lg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],parameters:{backgrounds:{default:"dark"},docs:{description:{story:"Select in dark mode."}}}},DarkModeWithError={args:{label:"Select a fruit",options:defaultOptions,placeholder:"Choose a fruit...",error:"This field is required"},decorators:[Story=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{className:"dark bg-gray-900 p-8 rounded-lg",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)(Story,{})})],parameters:{backgrounds:{default:"dark"},docs:{description:{story:"Select with error state in dark mode."}}}},KeyboardNavigation={args:{label:"Try keyboard navigation",options:defaultOptions,placeholder:"Focus and use arrow keys...",helperText:"Press Tab to focus, Arrow keys to navigate, Enter to select, Escape to close"},parameters:{docs:{description:{story:"\nFocus the select and try these keyboard shortcuts:\n- **Tab**: Focus the select\n- **Enter/Space/Arrow Down/Arrow Up**: Open dropdown\n- **Arrow Down/Up**: Navigate options\n- **Home**: Jump to first option\n- **End**: Jump to last option\n- **Enter**: Select focused option\n- **Escape**: Close without selecting\n- **Type characters**: Search/filter options\n        "}}}},__namedExportsOrder=["Default","WithDefaultValue","Controlled","WithDisabledOptions","Disabled","WithError","WithHelperText","HiddenLabel","MinimalVariant","HeaderVariant","SortingUseCase","FormIntegration","LongList","DarkMode","DarkModeWithError","KeyboardNavigation"]},"./src/components/ui/Select/index.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{l:()=>Select});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 Select=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)(({options,value,defaultValue,onChange,placeholder="Select an option",label,hideLabel=!1,disabled=!1,error,helperText,className="",id,name,variant="default"},ref)=>{const generatedId=(0,react__WEBPACK_IMPORTED_MODULE_1__.useId)(),selectId=id||`select-${generatedId}`,listboxId=`${selectId}-listbox`,labelId=`${selectId}-label`,errorId=`${selectId}-error`,helperId=`${selectId}-helper`,[isOpen,setIsOpen]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(!1),[activeIndex,setActiveIndex]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(-1),[searchString,setSearchString]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(""),[announcement,setAnnouncement]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(""),[internalValue,setInternalValue]=(0,react__WEBPACK_IMPORTED_MODULE_1__.useState)(defaultValue||""),selectedValue=void 0!==value?value:internalValue,buttonRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),listboxRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),searchTimeoutRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useRef)(null),mergedRef=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(node=>{buttonRef.current=node,"function"==typeof ref?ref(node):ref&&(ref.current=node)},[ref]),selectedOption=options.find(opt=>opt.value===selectedValue);options.filter(opt=>!opt.disabled);(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{const handleClickOutside=event=>{const target=event.target;buttonRef.current&&!buttonRef.current.contains(target)&&listboxRef.current&&!listboxRef.current.contains(target)&&(setIsOpen(!1),setActiveIndex(-1))};return isOpen&&document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[isOpen]),(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>(searchString&&(searchTimeoutRef.current&&clearTimeout(searchTimeoutRef.current),searchTimeoutRef.current=setTimeout(()=>{setSearchString("")},500)),()=>{searchTimeoutRef.current&&clearTimeout(searchTimeoutRef.current)}),[searchString]),(0,react__WEBPACK_IMPORTED_MODULE_1__.useEffect)(()=>{if(isOpen&&activeIndex>=0&&listboxRef.current){const activeOption=listboxRef.current.children[activeIndex];activeOption?.scrollIntoView&&activeOption.scrollIntoView({block:"nearest"})}},[isOpen,activeIndex]);const handleSelect=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(option=>{option.disabled||(void 0===value&&setInternalValue(option.value),onChange?.(option.value,option),setAnnouncement(`${option.label} selected`),setIsOpen(!1),setActiveIndex(-1),buttonRef.current?.focus())},[onChange,value]),handleKeyDown=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)(event=>{if(disabled)return;const{key}=event;if(1===key.length&&key.match(/[a-zA-Z0-9]/)){event.preventDefault();const newSearchString=searchString+key.toLowerCase();setSearchString(newSearchString);const matchingIndex=options.findIndex(opt=>!opt.disabled&&opt.label.toLowerCase().startsWith(newSearchString));return void(matchingIndex>=0&&(isOpen?setActiveIndex(matchingIndex):handleSelect(options[matchingIndex])))}switch(key){case"Enter":case" ":if(event.preventDefault(),isOpen&&activeIndex>=0)handleSelect(options[activeIndex]);else{setIsOpen(!0);const currentIndex=options.findIndex(opt=>opt.value===selectedValue);setActiveIndex(currentIndex>=0?currentIndex:0)}break;case"Escape":isOpen&&(event.preventDefault(),setIsOpen(!1),setActiveIndex(-1),buttonRef.current?.focus());break;case"ArrowDown":if(event.preventDefault(),isOpen){let nextIndex=activeIndex+1;for(;nextIndex<options.length&&options[nextIndex]?.disabled;)nextIndex++;nextIndex<options.length&&setActiveIndex(nextIndex)}else{setIsOpen(!0);const currentIndex=options.findIndex(opt=>opt.value===selectedValue);setActiveIndex(currentIndex>=0?currentIndex:0)}break;case"ArrowUp":if(event.preventDefault(),isOpen){let prevIndex=activeIndex-1;for(;prevIndex>=0&&options[prevIndex]?.disabled;)prevIndex--;prevIndex>=0&&setActiveIndex(prevIndex)}else{setIsOpen(!0);const currentIndex=options.findIndex(opt=>opt.value===selectedValue);setActiveIndex(currentIndex>=0?currentIndex:0)}break;case"Home":if(event.preventDefault(),isOpen){const firstEnabled=options.findIndex(opt=>!opt.disabled);firstEnabled>=0&&setActiveIndex(firstEnabled)}break;case"End":if(event.preventDefault(),isOpen)for(let i=options.length-1;i>=0;i--)if(!options[i].disabled){setActiveIndex(i);break}break;case"Tab":isOpen&&(setIsOpen(!1),setActiveIndex(-1))}},[disabled,isOpen,activeIndex,options,selectedValue,searchString,handleSelect]),styles={default:{button:`\n          w-full px-4 py-2.5 text-left\n          bg-white dark:bg-gray-800\n          border border-gray-300 dark:border-gray-600\n          rounded-lg\n          text-gray-900 dark:text-gray-100\n          hover:border-gray-400 dark:hover:border-gray-500\n          focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500\n          disabled:bg-gray-100 disabled:dark:bg-gray-700 disabled:cursor-not-allowed\n          ${error?"border-red-500 focus:ring-red-500 focus:border-red-500":""}\n        `,listbox:"\n          absolute z-50 w-full mt-1\n          bg-white dark:bg-gray-800\n          border border-gray-200 dark:border-gray-600\n          rounded-lg shadow-lg\n          max-h-60 overflow-auto\n        ",option:"\n          px-4 py-2.5 cursor-pointer\n          text-gray-900 dark:text-gray-100\n        "},minimal:{button:"\n          px-3 py-1.5 text-left\n          bg-transparent\n          text-gray-700 dark:text-gray-300\n          hover:bg-gray-100 dark:hover:bg-gray-700\n          rounded\n          focus:outline-none focus:ring-2 focus:ring-blue-500\n          disabled:opacity-50 disabled:cursor-not-allowed\n        ",listbox:"\n          absolute z-50 min-w-[150px]\n          bg-white dark:bg-gray-800\n          border border-gray-200 dark:border-gray-600\n          rounded shadow-md\n          max-h-60 overflow-auto\n        ",option:"\n          px-3 py-1.5 cursor-pointer\n          text-gray-700 dark:text-gray-300\n        "},header:{button:"\n          px-4 py-2 text-left whitespace-nowrap\n          bg-transparent\n          text-gray-800 dark:text-gray-200\n          hover:text-blue-600 dark:hover:text-blue-400\n          focus:outline-none focus:ring-2 focus:ring-blue-500 rounded\n          disabled:opacity-50 disabled:cursor-not-allowed\n          flex items-center gap-2\n        ",listbox:"\n          absolute z-50 min-w-[200px] right-0\n          bg-white dark:bg-gray-800\n          border border-gray-200 dark:border-gray-600\n          rounded-lg shadow-lg\n          max-h-60 overflow-auto\n        ",option:"\n          px-4 py-2 cursor-pointer\n          text-gray-700 dark:text-gray-300\n        "}}[variant];return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("div",{className:`relative ${className}`,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("label",{id:labelId,htmlFor:selectId,className:hideLabel?"sr-only":"block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1",children:label}),name&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("input",{type:"hidden",name,value:selectedValue}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("button",{ref:mergedRef,id:selectId,type:"button",role:"combobox","aria-haspopup":"listbox","aria-expanded":isOpen,"aria-labelledby":labelId,"aria-controls":isOpen?listboxId:void 0,"aria-activedescendant":isOpen&&activeIndex>=0?`${listboxId}-option-${activeIndex}`:void 0,"aria-describedby":error?errorId:helperText?helperId:void 0,"aria-invalid":!!error,disabled,onClick:()=>{if(!disabled&&(setIsOpen(!isOpen),!isOpen)){const currentIndex=options.findIndex(opt=>opt.value===selectedValue);setActiveIndex(currentIndex>=0?currentIndex:0)}},onKeyDown:handleKeyDown,className:styles.button,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("span",{className:selectedOption?"":"text-gray-500",children:selectedOption?.label||placeholder}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg",{className:"w-4 h-4 ml-auto transition-transform "+(isOpen?"rotate-180":""),fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})]}),isOpen&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("ul",{ref:listboxRef,id:listboxId,role:"listbox","aria-labelledby":labelId,tabIndex:-1,className:styles.listbox,children:options.map((option,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxs)("li",{id:`${listboxId}-option-${index}`,role:"option","aria-selected":option.value===selectedValue,"aria-disabled":option.disabled,onClick:()=>(option=>{option.disabled||handleSelect(option)})(option),onMouseEnter:()=>(index=>{options[index].disabled||setActiveIndex(index)})(index),className:`\n                  ${styles.option}\n                  ${index===activeIndex?"bg-blue-50 dark:bg-blue-900/30":"hover:bg-gray-50 dark:hover:bg-gray-700"}\n                  ${option.value===selectedValue?"font-medium text-blue-600 dark:text-blue-400":""}\n                  ${option.disabled?"opacity-50 cursor-not-allowed":""}\n                `,children:[option.label,option.value===selectedValue&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("svg",{className:"w-4 h-4 ml-auto inline-block text-blue-600 dark:text-blue-400",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24","aria-hidden":"true",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M5 13l4 4L19 7"})})]},option.value))}),helperText&&!error&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:helperId,className:"mt-1 text-sm text-gray-500 dark:text-gray-400",children:helperText}),error&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("p",{id:errorId,role:"alert",className:"mt-1 text-sm text-red-600 dark:text-red-400",children:error}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_0__.jsx)("div",{role:"status","aria-live":"polite","aria-atomic":"true",className:"sr-only",children:announcement})]})});Select.displayName="Select"}}]);