@page "/pickers3"
@{
    ViewData["Title"] = "Pickers 3";
}
@{
    ViewData["SidebarVariant"] = "3";
    ViewData["Css:pickers-page.css"] = "css/pickers-page.css";
}

<div class="p-4 md:p-6 space-y-6">
            <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                <div><h1 class="text-2xl md:text-3xl font-bold text-gray-900">Pickers & Select</h1><p class="text-gray-500 mt-1 text-sm">Comprehensive showcase of select, combobox, date, time & advanced picker components</p></div>
                <div class="flex items-center gap-2">
                    <select class="text-sm border border-gray-100 rounded-lg px-3 py-2 bg-white text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-400"><option>All Variants</option><option selected>Show All</option><option>Standard Only</option></select>
                    <button class="px-4 py-2 text-sm font-semibold rounded-lg text-white transition flex items-center gap-1.5" style="background: #3b82f6;"><svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v2a2 2 0 002 2h12a2 2 0 002-2v-2M7 10l5 5 5-5M12 15V3"/></svg> Export</button>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Standard Select & Dropdown</h3><p class="text-xs text-gray-400 mt-0.5">Static selection components</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Select</label>
                        <div class="relative">
                            <select class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400 pr-10">
                                <option value="" disabled selected>Choose an option</option>
                                <option value="option1">Option One</option>
                                <option value="option2">Option Two</option>
                                <option value="option3">Option Three</option>
                                <option value="option4">Option Four</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Basic native select styled with Tailwind</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select with Icon</label>
                        <div class="relative">
                            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                <svg class="w-4 h-4 text-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                            </div>
                            <select class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                                <option value="" disabled selected>Search category</option>
                                <option value="users">Users</option>
                                <option value="orders">Orders</option>
                                <option value="products">Products</option>
                                <option value="invoices">Invoices</option>
                            </select>
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Icon on the left enhances visual context</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-1 relative z-20 overflow-visible" id="section-combobox">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Searchable Combobox / Autocomplete</h3><p class="text-xs text-gray-400 mt-0.5">Filterable dropdown with keyboard input</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable Only</label>
                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Alice Johnson','Bob Smith','Carol Williams','David Brown','Emma Davis','Frank Miller','Grace Wilson','Henry Moore','Ivy Taylor','Jack Anderson'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; } }">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                </div>
                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-3 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                            </div>
                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
                                <template x-for="(item, idx) in filtered()" :key="idx">
                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
                                </template>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Type to filter list dynamically</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Searchable + Clearable</label>
                        <div class="relative" x-data="{ open: false, query: '', selected: null, items: ['Marketing','Sales','Support','Engineering','Design','Finance','HR','Operations'], filtered() { return this.query === '' ? this.items : this.items.filter(i => i.toLowerCase().includes(this.query.toLowerCase())) }, select(item) { this.selected = item; this.query = item; this.open = false; }, clear() { this.selected = null; this.query = ''; this.open = false; } }">
                            <div class="relative">
                                <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
                                </div>
                                <input type="text" x-model="query" x-on:focus="open = true" x-on:input="open = true" placeholder="Type to search..." class="w-full border border-gray-200 rounded-lg pl-10 pr-10 py-2.5 text-sm text-gray-700 bg-white focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                                <button x-show="selected || query !== ''" x-on:click="clear()" class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-400 hover:text-gray-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                            <div x-show="open && filtered().length > 0" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
                                <template x-for="(item, idx) in filtered()" :key="idx">
                                    <div x-on:click="select(item)" class="px-3 py-2 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-text="item"></div>
                                </template>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Clearable with X button to reset selection</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2 relative z-10 overflow-visible" id="section-multiselect">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Multi-Select Picker</h3><p class="text-xs text-gray-400 mt-0.5">Select multiple items with tag badges</p></div>
                </div>
                <div class="max-w-lg">
                    <label class="block text-sm font-semibold text-gray-700 mb-1.5">Select Skills / Tags</label>
                    <div x-data="{ open: false, selected: ['React', 'Tailwind'], items: ['React','Vue','Angular','Svelte','Tailwind','Bootstrap','Node.js','Python','Go','Rust','TypeScript','JavaScript'], toggle(item) { let idx = this.selected.indexOf(item); if(idx > -1) { this.selected.splice(idx, 1) } else { this.selected.push(item) } }, remove(item) { let idx = this.selected.indexOf(item); if(idx > -1) this.selected.splice(idx, 1) }, isSelected(item) { return this.selected.indexOf(item) > -1 } }">
                        <div class="relative">
                            <div x-on:click="open = !open" class="w-full min-h-[42px] border border-gray-200 rounded-lg px-3 py-1.5 text-sm bg-white cursor-pointer focus-within:ring-2 focus-within:ring-blue-400 flex flex-wrap items-center gap-1.5">
                                <template x-for="item in selected" :key="item">
                                    <span class="inline-flex items-center gap-1 px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-700">
                                        <span x-text="item"></span>
                                        <button x-on:click.stop="remove(item)" class="text-blue-500 hover:text-blue-700">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                        </button>
                                    </span>
                                </template>
                                <template x-if="selected.length === 0">
                                    <span class="text-gray-400 py-1">Pick skills...</span>
                                </template>
                                <span class="ml-auto flex items-center">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </span>
                            </div>
                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-30 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-56 overflow-y-auto" x-cloak>
                                <template x-for="item in items" :key="item">
                                    <div x-on:click="toggle(item)" class="flex items-center gap-2 px-3 py-2 text-sm cursor-pointer hover:bg-blue-50 transition">
                                        <div x-bind:class="isSelected(item) ? 'bg-blue-500 border-blue-500' : 'border-gray-300'" class="w-4 h-4 rounded border flex items-center justify-center">
                                            <svg x-show="isSelected(item)" class="w-3 h-3 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"/></svg>
                                        </div>
                                        <span x-text="item" x-bind:class="isSelected(item) ? 'font-medium text-blue-700' : 'text-gray-700'"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                    <p class="text-xs text-gray-400 mt-1.5">Click items to select/deselect. Badges appear with remove button.</p>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-2" id="section-date">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Date Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard, range, and clearable date inputs</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Date Picker</label>
                        <div class="relative">
                            <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Native date input with calendar icon</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date Range Picker</label>
                        <div class="flex items-center gap-2">
                            <div class="relative flex-1">
                                <input type="date" value="2026-07-01" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                            </div>
                            <span class="text-gray-400 text-sm">—</span>
                            <div class="relative flex-1">
                                <input type="date" value="2026-07-31" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">From / To range with two date inputs</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Clearable Date Picker</label>
                        <div x-data="{ val: '2026-07-06' }" class="relative">
                            <div class="relative">
                                <input type="date" x-model="val" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                                <button x-show="val" x-on:click="val = ''" class="absolute inset-y-0 right-8 flex items-center pr-0 text-gray-400 hover:text-gray-600">
                                    <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                </button>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Reset button to clear date value</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3 relative z-10 overflow-visible" id="section-time">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Time Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Standard and interval-based time selection</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Standard Time Picker</label>
                        <div class="relative">
                            <input type="time" value="09:30" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-blue-400">
                            <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Native time input with clock icon</p>
                    </div>
                    <div x-data="{ open: false, selected: '09:00', times: ['00:00','00:30','01:00','01:30','02:00','02:30','03:00','03:30','04:00','04:30','05:00','05:30','06:00','06:30','07:00','07:30','08:00','08:30','09:00','09:30','10:00','10:30','11:00','11:30','12:00','12:30','13:00','13:30','14:00','14:30','15:00','15:30','16:00','16:30','17:00','17:30','18:00','18:30','19:00','19:30','20:00','20:30','21:00','21:30','22:00','22:30','23:00','23:30'] }">
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Time Picker with Dropdown Interval</label>
                        <div class="relative">
                            <button x-on:click="open = !open" type="button" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-blue-400">
                                    <div class="flex items-center gap-2">
                                        <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                        <span x-text="selected"></span>
                                    </div>
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </button>
                            </div>
                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto" x-cloak>
                                <template x-for="t in times" :key="t">
                                    <div x-on:click="selected = t; open = false" x-text="t" class="px-3 py-1.5 text-sm text-gray-700 cursor-pointer hover:bg-blue-50 hover:text-blue-700 transition" x-bind:class="selected === t ? 'bg-blue-50 text-blue-700 font-medium' : ''"></div>
                                </template>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">30-minute interval dropdown list</p>
                    </div>
                </div>
            </div>

            <div class="bg-white rounded-xl border border-gray-100 p-5 anim-fade anim-delay-3" id="section-advanced">
                <div class="flex items-center justify-between mb-4">
                    <div><h3 class="font-bold text-gray-900">Advanced Contextual Pickers</h3><p class="text-xs text-gray-400 mt-0.5">Date-time combo, color picker & status badge picker</p></div>
                </div>
                <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Date-Time Combo Picker</label>
                        <div class="flex items-center gap-2">
                            <div class="relative flex-1">
                                <input type="date" value="2026-07-06" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-400">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                                </div>
                            </div>
                            <div class="relative flex-1">
                                <input type="time" value="14:00" class="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm text-gray-700 bg-white appearance-none focus:outline-none focus:ring-2 focus:ring-blue-400">
                                <div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
                                    <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Side-by-side date and time inputs</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Color Picker</label>
                        <div x-data="{ open: false, selected: '#3b82f6', colors: ['#ef4444','#f97316','#f59e0b','#eab308','#22c55e','#10b981','#06b6d4','#3b82f6','#6366f1','#8b5cf6','#a855f7','#d946ef','#ec4899','#f43f5e','#78716c','#1e293b'] }" class="relative">
                            <div class="flex items-center gap-2">
                                <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
                                    <span class="w-5 h-5 rounded-full border border-gray-200 shrink-0" x-bind:style="'background:'+selected"></span>
                                    <span x-text="selected" class="text-gray-700"></span>
                                    <svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                                </button>
                            </div>
                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-64 bg-white border border-gray-200 rounded-lg shadow-lg p-3" x-cloak>
                                <div class="grid grid-cols-4 gap-2">
                                    <template x-for="c in colors" :key="c">
                                        <button x-on:click="selected = c; open = false" class="w-10 h-10 rounded-lg border border-gray-200 hover:scale-110 transition-transform" x-bind:style="'background:'+c" x-bind:class="selected === c ? 'ring-2 ring-offset-2 ring-blue-500' : ''"></button>
                                    </template>
                                </div>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Grid-based color swatch picker</p>
                    </div>
                    <div>
                        <label class="block text-sm font-semibold text-gray-700 mb-1.5">Status Badge Picker</label>
                        <div x-data="{ open: false, selected: 'Active', options: [{label:'Active',color:'#10b981'},{label:'Pending',color:'#f59e0b'},{label:'Inactive',color:'#94a3b8'},{label:'Blocked',color:'#ef4444'},{label:'Draft',color:'#6366f1'},{label:'Approved',color:'#22c55e'},{label:'Rejected',color:'#f43f5e'},{label:'Review',color:'#06b6d4'}] }" class="relative">
                            <button x-on:click="open = !open" class="flex items-center gap-2 w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-400">
                                <span class="inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium text-white" x-bind:style="'background:' + (options.find(o=>o.label===selected)?.color||'#10b981')">
                                    <span x-text="selected"></span>
                                </span>
                                <svg class="w-4 h-4 text-gray-400 ml-auto" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/></svg>
                            </button>
                            <div x-show="open" x-on:click.outside="open = false" class="absolute z-20 mt-1 w-full bg-white border border-gray-200 rounded-lg shadow-lg" x-cloak>
                                <template x-for="opt in options" :key="opt.label">
                                    <div x-on:click="selected = opt.label; open = false" class="flex items-center gap-3 px-3 py-2 cursor-pointer hover:bg-gray-50 transition" x-bind:class="selected === opt.label ? 'bg-blue-50' : ''">
                                        <span class="w-3 h-3 rounded-full" x-bind:style="'background:'+opt.color"></span>
                                        <span class="text-sm text-gray-700" x-text="opt.label"></span>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <p class="text-xs text-gray-400 mt-1.5">Select status with colored badge preview</p>
                    </div>
                </div>
            </div>

        </div>