"use strict";(self.webpackChunkelite_events_nextjs=self.webpackChunkelite_events_nextjs||[]).push([[6422],{"./src/components/ui/Dropdown/Dropdown.stories.tsx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ActionMenu:()=>ActionMenu,CategorySelector:()=>CategorySelector,Default:()=>Default,Disabled:()=>Disabled,FullWidth:()=>FullWidth,Large:()=>Large,Small:()=>Small,WithDisabledItems:()=>WithDisabledItems,WithIcons:()=>WithIcons,__namedExportsOrder:()=>__namedExportsOrder,default:()=>Dropdown_stories});var jsx_runtime=__webpack_require__("./node_modules/next/dist/compiled/react/jsx-runtime.js"),react=__webpack_require__("./node_modules/next/dist/compiled/react/index.js"),core=__webpack_require__("./src/lib/core/index.ts"),Button=__webpack_require__("./src/components/ui/Button/index.tsx"),icons=__webpack_require__("./src/components/ui/icons/index.ts");const Dropdown=({items,value,onChange,placeholder="Select...",size="md",fullWidth,disabled,trigger})=>{const[isOpen,setIsOpen]=(0,react.useState)(!1),dropdownRef=(0,react.useRef)(null),selectedItem=items.find(item=>item.value===value);(0,react.useEffect)(()=>{const handleClickOutside=event=>{dropdownRef.current&&!dropdownRef.current.contains(event.target)&&setIsOpen(!1)};return isOpen&&document.addEventListener("mousedown",handleClickOutside),()=>{document.removeEventListener("mousedown",handleClickOutside)}},[isOpen]),(0,react.useEffect)(()=>{const handleEscape=event=>{"Escape"===event.key&&setIsOpen(!1)};return isOpen&&document.addEventListener("keydown",handleEscape),()=>{document.removeEventListener("keydown",handleEscape)}},[isOpen]);return(0,jsx_runtime.jsxs)("div",{ref:dropdownRef,className:(0,core.cn)("relative",fullWidth&&"w-full"),children:[trigger?(0,jsx_runtime.jsx)("div",{onClick:()=>!disabled&&setIsOpen(!isOpen),children:trigger}):(0,jsx_runtime.jsxs)(Button.$,{type:"button",onClick:()=>setIsOpen(!isOpen),disabled,variant:"ghost",className:(0,core.cn)("flex items-center justify-between gap-2 w-full","bg-white dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg","hover:border-gray-400 dark:hover:border-gray-500 focus:outline-none focus:ring-2 focus:ring-blue/20","transition-all duration-200","disabled:opacity-50 disabled:cursor-not-allowed",{sm:"px-3 py-1.5 text-sm",md:"px-4 py-2 text-base",lg:"px-5 py-3 text-lg"}[size]),"aria-haspopup":"listbox","aria-expanded":isOpen,children:[(0,jsx_runtime.jsxs)("span",{className:"flex items-center gap-2",children:[selectedItem?.icon,(0,jsx_runtime.jsx)("span",{className:selectedItem?"dark:text-gray-100":"text-gray-400 dark:text-gray-500",children:selectedItem?.label||placeholder})]}),(0,jsx_runtime.jsx)(icons.In,{name:"chevron-down",size:16,className:(0,core.cn)("transition-transform",isOpen&&"rotate-180")})]}),isOpen&&(0,jsx_runtime.jsx)("div",{className:(0,core.cn)("absolute z-10 mt-1 w-full","bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg","max-h-60 overflow-auto","animate-fadeIn"),role:"listbox",children:items.map(item=>(0,jsx_runtime.jsxs)(Button.$,{type:"button",onClick:()=>(item=>{item.disabled||(onChange?.(item.value),setIsOpen(!1))})(item),disabled:item.disabled,variant:"ghost",className:(0,core.cn)("flex items-center gap-2 w-full px-4 py-2 text-left dark:text-gray-100","hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors","disabled:opacity-50 disabled:cursor-not-allowed",value===item.value&&"bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400"),role:"option","aria-selected":value===item.value,children:[item.icon,(0,jsx_runtime.jsx)("span",{children:item.label})]},item.value))})]})},Dropdown_stories={title:"UI/Dropdown",component:Dropdown,parameters:{layout:"padded"},tags:["autodocs"]},basicItems=[{label:"Option 1",value:"1"},{label:"Option 2",value:"2"},{label:"Option 3",value:"3"}],Default={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:basicItems,value,onChange:setValue,placeholder:"Select an option"})}},itemsWithIcons=[{label:"Edit",value:"edit",icon:(0,jsx_runtime.jsx)(icons.In,{name:"edit",size:16})},{label:"Delete",value:"delete",icon:(0,jsx_runtime.jsx)(icons.In,{name:"trash",size:16})},{label:"Download",value:"download",icon:(0,jsx_runtime.jsx)(icons.In,{name:"download",size:16})}],WithIcons={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:itemsWithIcons,value,onChange:setValue,placeholder:"Select action"})}},itemsWithDisabled=[{label:"Available Option",value:"1"},{label:"Disabled Option",value:"2",disabled:!0},{label:"Another Available",value:"3"}],WithDisabledItems={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:itemsWithDisabled,value,onChange:setValue,placeholder:"Select an option"})}},Small={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:basicItems,value,onChange:setValue,size:"sm",placeholder:"Small dropdown"})}},Large={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:basicItems,value,onChange:setValue,size:"lg",placeholder:"Large dropdown"})}},FullWidth={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)("div",{className:"max-w-md",children:(0,jsx_runtime.jsx)(Dropdown,{items:basicItems,value,onChange:setValue,fullWidth:!0,placeholder:"Full width dropdown"})})}},Disabled={render:()=>{const[value,setValue]=(0,react.useState)("1");return(0,jsx_runtime.jsx)(Dropdown,{items:basicItems,value,onChange:setValue,disabled:!0})}},categoryItems=[{label:"Electronics",value:"electronics"},{label:"Clothing",value:"clothing"},{label:"Books",value:"books"},{label:"Home & Garden",value:"home"},{label:"Sports & Outdoors",value:"sports"}],CategorySelector={render:()=>{const[value,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsxs)("div",{className:"space-y-2",children:[(0,jsx_runtime.jsx)("label",{className:"block text-sm font-medium text-gray-700",children:"Product Category"}),(0,jsx_runtime.jsx)(Dropdown,{items:categoryItems,value,onChange:setValue,placeholder:"Select category",fullWidth:!0})]})}},actionItems=[{label:"View Details",value:"view",icon:(0,jsx_runtime.jsx)(icons.In,{name:"eye",size:16})},{label:"Edit",value:"edit",icon:(0,jsx_runtime.jsx)(icons.In,{name:"edit",size:16})},{label:"Download",value:"download",icon:(0,jsx_runtime.jsx)(icons.In,{name:"download",size:16})},{label:"Delete",value:"delete",icon:(0,jsx_runtime.jsx)(icons.In,{name:"trash",size:16})}],ActionMenu={render:()=>{const[,setValue]=(0,react.useState)("");return(0,jsx_runtime.jsx)(Dropdown,{items:actionItems,onChange:value=>{setValue(value),alert(`Action selected: ${value}`)},placeholder:"Actions"})}},__namedExportsOrder=["Default","WithIcons","WithDisabledItems","Small","Large","FullWidth","Disabled","CategorySelector","ActionMenu"]}}]);