react-wheel-select 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vasil Rashkov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,575 @@
+# react-wheel-select
+
+<div align="center">
+
+![npm version](https://img.shields.io/npm/v/react-wheel-select)
+![bundle size](https://img.shields.io/bundlephobia/minzip/react-wheel-select)
+![license](https://img.shields.io/npm/l/react-wheel-select)
+![typescript](https://img.shields.io/badge/TypeScript-Ready-blue)
+
+**A beautiful, accessible iOS-style wheel picker component for React**
+
+[Live Demo](https://react-wheel-select.devapollo.com) · [Documentation](#-documentation) · [Examples](#-examples) · [Contributing](#-contributing)
+
+</div>
+
+---
+
+## ✨ Features
+
+- 🎡 **Smooth Wheel Scrolling** — CSS scroll-snap powered picker with momentum scrolling
+- ♿ **Fully Accessible** — ARIA compliant with full keyboard navigation
+- 🎨 **Highly Customizable** — 30+ CSS variables for complete visual control
+- 📱 **Touch Optimized** — Works beautifully on mobile devices
+- 🔧 **TypeScript First** — Complete type definitions with generics support
+- 🪶 **Lightweight** — ~4KB minified + gzipped, zero dependencies
+- 🌙 **Theme Support** — Built-in dark/light modes with auto-detection
+- 🎯 **Render Props** — Custom trigger and option rendering
+- 📋 **Form Compatible** — Hidden native select for form submission
+- 🔄 **Controlled & Uncontrolled** — Works both ways with ref API
+
+---
+
+## 📦 Installation
+
+```bash
+# npm
+npm install react-wheel-select
+
+# yarn
+yarn add react-wheel-select
+
+# pnpm
+pnpm add react-wheel-select
+
+# bun
+bun add react-wheel-select
+```
+
+---
+
+## 🚀 Quick Start
+
+```tsx
+import { useState } from 'react'
+import { WheelSelect } from 'react-wheel-select'
+import 'react-wheel-select/styles.css'
+
+const fruits = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'date', label: 'Date' },
+  { value: 'elderberry', label: 'Elderberry' },
+]
+
+function App() {
+  const [fruit, setFruit] = useState('apple')
+
+  return (
+    <p>
+      I love to eat{' '}
+      <WheelSelect
+        options={fruits}
+        value={fruit}
+        onChange={setFruit}
+      />
+    </p>
+  )
+}
+```
+
+---
+
+## 📖 Documentation
+
+### Table of Contents
+
+- [Props Reference](#props-reference)
+- [Theme Configuration](#theme-configuration)
+- [Sizing Configuration](#sizing-configuration)
+- [Behavior Configuration](#behavior-configuration)
+- [Custom Icons](#custom-icons)
+- [Accessibility](#accessibility)
+- [Event Callbacks](#event-callbacks)
+- [Imperative API](#imperative-api)
+- [CSS Customization](#css-customization)
+- [TypeScript](#typescript)
+
+---
+
+### Props Reference
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `options` | `WheelSelectOption[]` | **required** | Array of options to display |
+| `value` | `string` | **required** | Currently selected value |
+| `onChange` | `(value: string) => void` | **required** | Called when selection changes |
+| `placeholder` | `string` | `'Select...'` | Placeholder when no value |
+| `disabled` | `boolean` | `false` | Disable the component |
+| `required` | `boolean` | `false` | Mark as required for forms |
+| `name` | `string` | — | Form field name |
+| `id` | `string` | — | Element ID |
+| `className` | `string` | — | Additional CSS class |
+| `style` | `CSSProperties` | — | Inline styles |
+| `theme` | `WheelSelectTheme` | — | Theme configuration |
+| `sizing` | `WheelSelectSizing` | — | Sizing configuration |
+| `behavior` | `WheelSelectBehavior` | — | Behavior configuration |
+| `icons` | `WheelSelectIcons` | — | Custom icons |
+| `a11y` | `WheelSelectA11y` | — | Accessibility options |
+| `callbacks` | `WheelSelectCallbacks` | — | Event callbacks |
+| `renderTrigger` | `Function` | — | Custom trigger renderer |
+| `renderOption` | `Function` | — | Custom option renderer |
+| `zIndex` | `number` | `10001` | Overlay z-index |
+
+#### Option Shape
+
+```typescript
+interface WheelSelectOption<T extends string = string> {
+  value: T        // Unique identifier
+  label: string   // Display text
+  disabled?: boolean  // Disable this option
+  data?: Record<string, unknown>  // Custom data
+}
+```
+
+---
+
+### Theme Configuration
+
+Customize colors, typography, animations, and spacing:
+
+```tsx
+<WheelSelect
+  theme={{
+    // Color scheme
+    colorScheme: 'dark', // 'dark' | 'light' | 'auto'
+
+    // Custom colors
+    colors: {
+      text: '#ffffff',
+      textMuted: '#888888',
+      activeBg: 'rgba(255, 255, 255, 0.15)',
+      hoverBg: 'rgba(255, 255, 255, 0.1)',
+      backdropBg: 'rgba(0, 0, 0, 0.6)',
+      focusRing: 'rgba(59, 130, 246, 0.5)',
+    },
+
+    // Border radius
+    borderRadius: 16,
+
+    // Typography
+    font: {
+      family: 'Inter, sans-serif',
+      size: 24,
+      weight: 600,
+      triggerSize: 18,
+    },
+
+    // Animations
+    animation: {
+      duration: 250,
+      easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+      disabled: false, // Set true to disable all animations
+    },
+
+    // Spacing
+    spacing: {
+      triggerGap: 12,
+      triggerPadding: '10px 20px',
+      optionGap: 12,
+      optionPadding: '0 24px',
+    },
+  }}
+/>
+```
+
+---
+
+### Sizing Configuration
+
+Control dimensions of the wheel and options:
+
+```tsx
+<WheelSelect
+  sizing={{
+    wheelHeight: 400,      // Height of the scroll container
+    wheelMinWidth: 280,    // Minimum width
+    optionHeight: 64,      // Height of each option
+    iconSize: 24,          // Size of icons
+  }}
+/>
+```
+
+---
+
+### Behavior Configuration
+
+Fine-tune interaction behavior:
+
+```tsx
+<WheelSelect
+  behavior={{
+    closeOnOutsideClick: true,   // Close when clicking backdrop
+    closeOnEscape: true,         // Close on Escape key
+    closeOnSelect: true,         // Close after selection
+    scrollDebounceMs: 50,        // Scroll detection delay
+    keyboardNavigation: true,    // Enable keyboard nav
+    focusTriggerOnClose: true,   // Return focus after close
+    portalTarget: document.body, // Portal mount point
+  }}
+/>
+```
+
+---
+
+### Custom Icons
+
+Replace default icons with your own:
+
+```tsx
+import { ChevronDown, ArrowLeft } from 'lucide-react'
+
+<WheelSelect
+  icons={{
+    chevron: <ChevronDown size={20} />,
+    arrow: <ArrowLeft size={20} />,
+    hideChevron: false,  // Hide chevron icon
+    hideArrow: false,    // Hide arrow on active item
+  }}
+/>
+```
+
+---
+
+### Accessibility
+
+Full ARIA support with customizable labels:
+
+```tsx
+<WheelSelect
+  a11y={{
+    triggerLabel: 'Select a fruit',
+    pickerLabel: 'Fruit options',
+    describedBy: 'fruit-helper-text',
+  }}
+/>
+```
+
+**Keyboard Support:**
+
+| Key | Action |
+|-----|--------|
+| `Enter` / `Space` | Open picker / Select option |
+| `Escape` | Close picker |
+| `↑` / `↓` | Navigate options |
+| `Home` | Jump to first option |
+| `End` | Jump to last option |
+
+---
+
+### Event Callbacks
+
+Subscribe to component events:
+
+```tsx
+<WheelSelect
+  callbacks={{
+    onOpen: () => console.log('Picker opened'),
+    onClose: () => console.log('Picker closed'),
+    onChange: (value, option) => {
+      console.log('Selected:', value, option)
+    },
+    onActiveChange: (index, option) => {
+      console.log('Highlighted:', index, option)
+    },
+    onKeyDown: (event) => {
+      console.log('Key pressed:', event.key)
+    },
+  }}
+/>
+```
+
+---
+
+### Imperative API
+
+Control the component programmatically using refs:
+
+```tsx
+import { useRef } from 'react'
+import { WheelSelect, WheelSelectRef } from 'react-wheel-select'
+
+function App() {
+  const selectRef = useRef<WheelSelectRef>(null)
+
+  return (
+    <>
+      <WheelSelect ref={selectRef} {...props} />
+
+      <button onClick={() => selectRef.current?.open()}>
+        Open Picker
+      </button>
+
+      <button onClick={() => selectRef.current?.close()}>
+        Close Picker
+      </button>
+
+      <button onClick={() => selectRef.current?.scrollToIndex(5)}>
+        Scroll to Item 5
+      </button>
+    </>
+  )
+}
+```
+
+**Ref Methods:**
+
+| Method | Description |
+|--------|-------------|
+| `open()` | Open the picker |
+| `close()` | Close the picker |
+| `toggle()` | Toggle open state |
+| `focus()` | Focus the trigger |
+| `isOpen()` | Get current open state |
+| `scrollToIndex(n)` | Scroll to specific index |
+| `getNativeSelect()` | Get native select element |
+
+---
+
+### CSS Customization
+
+#### Using CSS Variables
+
+Override any variable at the root or component level:
+
+```css
+/* Global overrides */
+:root {
+  --ws-color-active-bg: rgba(59, 130, 246, 0.2);
+  --ws-border-radius: 8px;
+  --ws-font-size: 20px;
+}
+
+/* Scoped overrides */
+.my-custom-select {
+  --ws-color-text: #1a1a1a;
+  --ws-animation-duration: 300ms;
+}
+```
+
+#### Available CSS Variables
+
+```css
+/* Colors */
+--ws-color-text              /* Text color */
+--ws-color-text-muted        /* Muted text color */
+--ws-color-active-bg         /* Active item background */
+--ws-color-hover-bg          /* Hover state background */
+--ws-color-backdrop-bg       /* Backdrop overlay color */
+--ws-color-focus-ring        /* Focus ring color */
+
+/* Typography */
+--ws-font-family             /* Font family */
+--ws-font-size               /* Option font size */
+--ws-font-weight             /* Option font weight */
+--ws-font-size-trigger       /* Trigger font size */
+
+/* Spacing */
+--ws-border-radius           /* Border radius */
+--ws-trigger-gap             /* Gap in trigger */
+--ws-trigger-padding         /* Trigger padding */
+--ws-option-gap              /* Gap in options */
+--ws-option-padding          /* Option padding */
+
+/* Sizing */
+--ws-wheel-height            /* Wheel viewport height */
+--ws-wheel-min-width         /* Minimum wheel width */
+--ws-option-height           /* Option item height */
+--ws-icon-size               /* Icon dimensions */
+--ws-spacer-height           /* Top/bottom spacer */
+
+/* Animation */
+--ws-animation-duration      /* Transition duration */
+--ws-animation-easing        /* Easing function */
+
+/* Internal */
+--ws-inactive-opacity        /* Inactive items opacity */
+--ws-hover-opacity           /* Hover state opacity */
+--ws-backdrop-blur           /* Backdrop blur amount */
+--ws-z-index                 /* Overlay z-index */
+```
+
+#### Custom Class Names
+
+Target specific elements:
+
+```css
+.ws-root { }           /* Root container */
+.ws-trigger { }        /* Trigger button */
+.ws-trigger.ws-open { } /* Trigger when open */
+.ws-trigger-text { }   /* Trigger text */
+.ws-chevron { }        /* Chevron icon */
+.ws-backdrop { }       /* Fullscreen backdrop */
+.ws-picker { }         /* Picker container */
+.ws-wheel { }          /* Scrollable wheel */
+.ws-spacer { }         /* Top/bottom spacers */
+.ws-option { }         /* Option item */
+.ws-option.ws-active { } /* Active/centered option */
+.ws-option.ws-disabled { } /* Disabled option */
+.ws-option-text { }    /* Option label text */
+.ws-arrow { }          /* Active item arrow */
+```
+
+---
+
+### TypeScript
+
+Full generic support for type-safe values:
+
+```tsx
+// Define your value type
+type Fruit = 'apple' | 'banana' | 'cherry'
+
+// Options with typed values
+const options: WheelSelectOption<Fruit>[] = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+]
+
+// Component with type inference
+function App() {
+  const [fruit, setFruit] = useState<Fruit>('apple')
+
+  return (
+    <WheelSelect<Fruit>
+      options={options}
+      value={fruit}
+      onChange={setFruit} // Type-safe!
+    />
+  )
+}
+```
+
+---
+
+## 🎨 Examples
+
+### Inline Text Integration
+
+```tsx
+<p className="sentence">
+  I want to{' '}
+  <WheelSelect
+    options={actions}
+    value={action}
+    onChange={setAction}
+    theme={{ font: { triggerSize: 'inherit' } }}
+  />
+  {' '}with my team.
+</p>
+```
+
+### Custom Styled Trigger
+
+```tsx
+<WheelSelect
+  renderTrigger={({ label, isOpen, onClick }) => (
+    <button
+      onClick={onClick}
+      className={`custom-trigger ${isOpen ? 'active' : ''}`}
+    >
+      {label}
+      <ChevronIcon />
+    </button>
+  )}
+/>
+```
+
+### Custom Option Rendering
+
+```tsx
+<WheelSelect
+  renderOption={({ option, isActive, isSelected }) => (
+    <div className="custom-option">
+      <img src={option.data?.icon} alt="" />
+      <span>{option.label}</span>
+      {isSelected && <CheckIcon />}
+    </div>
+  )}
+/>
+```
+
+### With Form Integration
+
+```tsx
+<form onSubmit={handleSubmit}>
+  <WheelSelect
+    name="country"
+    required
+    options={countries}
+    value={country}
+    onChange={setCountry}
+  />
+  <button type="submit">Submit</button>
+</form>
+```
+
+### Disabled Options
+
+```tsx
+const options = [
+  { value: 'free', label: 'Free Plan' },
+  { value: 'pro', label: 'Pro Plan' },
+  { value: 'enterprise', label: 'Enterprise', disabled: true },
+]
+```
+
+---
+
+## 🌐 Browser Support
+
+- Chrome 88+
+- Firefox 84+
+- Safari 14+
+- Edge 88+
+
+Requires CSS `scroll-snap-type` and `backdrop-filter` support.
+
+---
+
+## 📄 License
+
+MIT © [Vasil Rashkov](https://github.com/vasilrashkov)
+
+---
+
+## 🤝 Contributing
+
+Contributions are welcome! Please read our [Contributing Guide](CONTRIBUTING.md) for details.
+
+1. Fork the repository
+2. Create your feature branch (`git checkout -b feature/amazing`)
+3. Commit your changes (`git commit -m 'Add amazing feature'`)
+4. Push to the branch (`git push origin feature/amazing`)
+5. Open a Pull Request
+
+---
+
+## 💖 Support
+
+If you find this project useful, please consider:
+
+- ⭐ Starring the repository
+- 🐛 Reporting bugs
+- 💡 Suggesting features
+- 📖 Improving documentation
+
+---
+
+<div align="center">
+
+Made with ❤️ for the React community
+
+</div>

package/dist/index.cjs

@@ -0,0 +1,2 @@
+'use strict';Object.defineProperty(exports,'__esModule',{value:true});var react=require('react'),reactDom=require('react-dom'),jsxRuntime=require('react/jsx-runtime');var Ee={colorScheme:"dark",colors:{text:"inherit",textMuted:"inherit",activeBg:"rgba(255, 255, 255, 0.12)",hoverBg:"rgba(255, 255, 255, 0.12)",backdropBg:"rgba(0, 0, 0, 0.5)",focusRing:"rgba(255, 255, 255, 0.5)"},borderRadius:12,font:{family:"inherit",size:28,weight:500,triggerSize:"inherit"},animation:{duration:200,easing:"ease",disabled:false},spacing:{triggerGap:16,triggerPadding:"8px 16px",optionGap:16,optionPadding:"0 20px"}},Oe={wheelHeight:320,wheelMinWidth:220,optionHeight:56,iconSize:20},We={closeOnOutsideClick:true,closeOnEscape:true,closeOnSelect:true,scrollDebounceMs:50,keyboardNavigation:true,portalTarget:null,focusTriggerOnClose:true},Pe=({size:i=20,className:a})=>jsxRuntime.jsxs("svg",{width:i,height:i,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a,"aria-hidden":"true",children:[jsxRuntime.jsx("polyline",{points:"8 9 12 5 16 9"}),jsxRuntime.jsx("polyline",{points:"8 15 12 19 16 15"})]}),He=({size:i=20,className:a})=>jsxRuntime.jsxs("svg",{width:i,height:i,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:a,"aria-hidden":"true",children:[jsxRuntime.jsx("line",{x1:"19",y1:"12",x2:"5",y2:"12"}),jsxRuntime.jsx("polyline",{points:"12 19 5 12 12 5"})]}),D=(i,a="0")=>i===void 0?a:typeof i=="number"?`${i}px`:i,le=(i,a)=>{let r={...i};for(let c in a)a[c]!==void 0&&(typeof a[c]=="object"&&a[c]!==null&&!Array.isArray(a[c])?r[c]=le(i[c],a[c]):r[c]=a[c]);return r};function Me(i,a){let{options:r,value:c,onChange:q,placeholder:oe="Select...",disabled:V=false,required:R=false,name:te,id:v,className:A="",style:L,theme:j,sizing:H,behavior:M,icons:E,a11y:U,callbacks:k,renderTrigger:ie,renderOption:z,zIndex:re=10001}=i,s=react.useMemo(()=>le(Ee,j||{}),[j]),u=react.useMemo(()=>le(Oe,H||{}),[H]),g=react.useMemo(()=>le(We,M||{}),[M]),[b,x]=react.useState(false),[Y,O]=react.useState(()=>Math.max(0,r.findIndex(t=>t.value===c))),[W,ce]=react.useState(null),B=react.useRef(null),J=react.useRef(null),$=react.useRef(null),y=react.useRef([]),e=react.useRef(null),n=react.useRef(null),d=react.useRef(false),S=react.useMemo(()=>r.find(t=>t.value===c),[r,c]),T=S?.label??oe;react.useEffect(()=>{let t=r.findIndex(o=>o.value===c);t!==-1&&O(t);},[c,r]),react.useEffect(()=>()=>{n.current&&clearTimeout(n.current);},[]);let Q=react.useMemo(()=>{let t=typeof u.wheelHeight=="number"?u.wheelHeight:320,o=typeof u.optionHeight=="number"?u.optionHeight:56;return t/2-o/2},[u.wheelHeight,u.optionHeight]),P=react.useCallback(()=>{if(V)return;B.current&&ce(B.current.getBoundingClientRect());let t=r.findIndex(l=>l.value===c),o=t!==-1?t:0;e.current=o,O(o),x(true),k?.onOpen?.();},[V,r,c,k]),I=react.useCallback(()=>{x(false),g.focusTriggerOnClose&&B.current?.focus(),k?.onClose?.();},[g.focusTriggerOnClose,k]),X=react.useCallback(t=>{let o=r.find(l=>l.value===t);!o||o.disabled||(q(t),k?.onChange?.(t,o),J.current&&(J.current.value=t),g.closeOnSelect&&(x(false),g.focusTriggerOnClose&&B.current?.focus(),k?.onClose?.()));},[q,r,g.closeOnSelect,g.focusTriggerOnClose,k]);react.useEffect(()=>{if(b&&e.current!==null){let t=e.current;e.current=null,requestAnimationFrame(()=>{let o=$.current,l=y.current[t];if(o&&l){let f=o.clientHeight,h=l.clientHeight,Z=l.offsetTop-f/2+h/2;o.scrollTop=Z;}});}},[b]),react.useEffect(()=>{b&&$.current&&$.current.focus();},[b]);let ne=react.useCallback(()=>{let t=$.current;if(!t)return;let o=t.getBoundingClientRect(),l=o.top+o.height/2,f=0,h=1/0;y.current.forEach((Z,Te)=>{if(!Z)return;let be=Z.getBoundingClientRect(),Ce=be.top+be.height/2,fe=Math.abs(Ce-l);fe<h&&(h=fe,f=Te);}),O(f);let p=r[f];p&&k?.onActiveChange?.(f,p);},[r,k]),ve=react.useCallback(()=>{d.current=true,n.current&&clearTimeout(n.current),n.current=setTimeout(()=>{d.current=false,ne();},g.scrollDebounceMs);},[ne,g.scrollDebounceMs]),we=react.useCallback(t=>{if(g.keyboardNavigation)switch(k?.onKeyDown?.(t),t.key){case "Escape":g.closeOnEscape&&(t.preventDefault(),I());break;case "ArrowUp":t.preventDefault(),O(h=>{let p=h-1;for(;p>=0&&r[p]?.disabled;)p--;return p<0?h:(y.current[p]?.scrollIntoView({block:"center",behavior:"smooth"}),p)});break;case "ArrowDown":t.preventDefault(),O(h=>{let p=h+1;for(;p<r.length&&r[p]?.disabled;)p++;return p>=r.length?h:(y.current[p]?.scrollIntoView({block:"center",behavior:"smooth"}),p)});break;case "Enter":case " ":t.preventDefault();let o=r[Y];o&&!o.disabled&&X(o.value);break;case "Home":t.preventDefault();let l=r.findIndex(h=>!h.disabled);l!==-1&&(O(l),y.current[l]?.scrollIntoView({block:"center",behavior:"smooth"}));break;case "End":t.preventDefault();let f=r.findLastIndex(h=>!h.disabled);f!==-1&&(O(f),y.current[f]?.scrollIntoView({block:"center",behavior:"smooth"}));break}},[g.keyboardNavigation,g.closeOnEscape,r,Y,I,X,k]),ue=react.useCallback(t=>o=>{o.preventDefault(),o.stopPropagation(),n.current&&(clearTimeout(n.current),n.current=null);let l=r[t];l&&!l.disabled&&X(l.value);},[r,X]),ke=react.useCallback(t=>{g.closeOnOutsideClick&&t.target===t.currentTarget&&I();},[g.closeOnOutsideClick,I]),xe=react.useCallback(t=>{q(t.target.value);},[q]),ge=react.useCallback(t=>{y.current[t]?.scrollIntoView({block:"center",behavior:"smooth"});},[]);react.useImperativeHandle(a,()=>({open:P,close:I,toggle:()=>b?I():P(),focus:()=>B.current?.focus(),isOpen:()=>b,scrollToIndex:ge,getNativeSelect:()=>J.current}),[b,P,I,ge]);let he=react.useMemo(()=>({"--ws-color-text":s.colors.text,"--ws-color-text-muted":s.colors.textMuted,"--ws-color-active-bg":s.colors.activeBg,"--ws-color-hover-bg":s.colors.hoverBg,"--ws-color-backdrop-bg":s.colors.backdropBg,"--ws-color-focus-ring":s.colors.focusRing,"--ws-border-radius":D(s.borderRadius),"--ws-font-family":s.font.family,"--ws-font-size":D(s.font.size),"--ws-font-weight":String(s.font.weight),"--ws-font-size-trigger":D(s.font.triggerSize),"--ws-animation-duration":s.animation.disabled?"0ms":`${s.animation.duration}ms`,"--ws-animation-easing":s.animation.easing,"--ws-trigger-gap":D(s.spacing.triggerGap),"--ws-trigger-padding":s.spacing.triggerPadding,"--ws-option-gap":D(s.spacing.optionGap),"--ws-option-padding":s.spacing.optionPadding,"--ws-wheel-height":D(u.wheelHeight),"--ws-wheel-min-width":D(u.wheelMinWidth),"--ws-option-height":D(u.optionHeight),"--ws-icon-size":`${u.iconSize}px`,"--ws-spacer-height":`${Q}px`,"--ws-z-index":String(re)}),[s,u,Q,re]),ye=s.colorScheme==="auto"?"":s.colorScheme==="light"?"ws-light":"ws-dark",Se=()=>{if(!b||!W)return null;let t=g.portalTarget??document.body;return reactDom.createPortal(jsxRuntime.jsx("div",{className:"ws-backdrop",onClick:ke,role:"presentation",style:he,children:jsxRuntime.jsx("div",{className:"ws-picker",style:{left:W.left,top:W.top+W.height/2},role:"dialog","aria-modal":"true","aria-label":U?.pickerLabel??"Select an option",children:jsxRuntime.jsxs("div",{ref:$,className:"ws-wheel",role:"listbox",tabIndex:0,onKeyDown:we,onScroll:ve,"aria-activedescendant":`ws-option-${v??"default"}-${Y}`,"aria-describedby":U?.describedBy,children:[jsxRuntime.jsx("div",{className:"ws-spacer","aria-hidden":"true"}),r.map((o,l)=>{let f=l===Y,h=o.value===c;return z?jsxRuntime.jsx("div",{ref:p=>{y.current[l]=p;},id:`ws-option-${v??"default"}-${l}`,role:"option","aria-selected":h,"aria-disabled":o.disabled,className:`ws-option ${f?"ws-active":""} ${o.disabled?"ws-disabled":""}`,onClick:ue(l),children:z({option:o,index:l,isActive:f,isSelected:h})},o.value):jsxRuntime.jsxs("div",{ref:p=>{y.current[l]=p;},id:`ws-option-${v??"default"}-${l}`,role:"option","aria-selected":h,"aria-disabled":o.disabled,className:`ws-option ${f?"ws-active":""} ${o.disabled?"ws-disabled":""}`,onClick:ue(l),children:[jsxRuntime.jsx("span",{className:"ws-option-text",children:o.label}),f&&!E?.hideArrow&&(E?.arrow??jsxRuntime.jsx(He,{size:u.iconSize,className:"ws-arrow"}))]},o.value)}),jsxRuntime.jsx("div",{className:"ws-spacer","aria-hidden":"true"})]})})}),t)};return jsxRuntime.jsxs("span",{className:`ws-root ${ye} ${A}`,style:{...he,...L},children:[jsxRuntime.jsxs("select",{ref:J,name:te,id:v?`${v}-native`:void 0,value:c,onChange:xe,className:"ws-native-select",tabIndex:-1,"aria-hidden":"true",required:R,disabled:V,children:[!S&&jsxRuntime.jsx("option",{value:"",children:oe}),r.map(t=>jsxRuntime.jsx("option",{value:t.value,disabled:t.disabled,children:t.label},t.value))]}),ie?ie({value:c,label:T,isOpen:b,disabled:V,onClick:P}):jsxRuntime.jsxs("button",{ref:B,type:"button",id:v,className:`ws-trigger ${b?"ws-open":""}`,onClick:P,disabled:V,"aria-haspopup":"listbox","aria-expanded":b,"aria-label":U?.triggerLabel,"aria-describedby":U?.describedBy,style:{visibility:b?"hidden":"visible"},children:[jsxRuntime.jsx("span",{className:"ws-trigger-text",children:T}),!E?.hideChevron&&(E?.chevron??jsxRuntime.jsx(Pe,{size:u.iconSize,className:"ws-chevron"}))]}),Se()]})}var me=react.forwardRef(Me),Be=me;var Ae=()=>jsxRuntime.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"base-select-chevron",children:[jsxRuntime.jsx("polyline",{points:"8 9 12 5 16 9"}),jsxRuntime.jsx("polyline",{points:"8 15 12 19 16 15"})]}),Le=()=>jsxRuntime.jsxs("svg",{width:"20",height:"20",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"base-select-arrow",children:[jsxRuntime.jsx("line",{x1:"19",y1:"12",x2:"5",y2:"12"}),jsxRuntime.jsx("polyline",{points:"12 19 5 12 12 5"})]});function ze({options:i,value:a,onChange:r,name:c,id:q,className:oe=""}){let[R,te]=react.useState(false),[v,A]=react.useState(()=>Math.max(0,i.findIndex(e=>e.value===a))),L=react.useRef(null),j=react.useRef(null),H=react.useRef(null),M=react.useRef([]),[E,U]=react.useState(null);react.useEffect(()=>{let e=i.findIndex(n=>n.value===a);e!==-1&&A(e);},[a,i]);let ie=i.find(e=>e.value===a)?.label??i[0]?.label??"",z=react.useRef(null),re=react.useCallback(()=>{L.current&&U(L.current.getBoundingClientRect());let e=i.findIndex(d=>d.value===a),n=e!==-1?e:0;z.current=n,A(n),te(true);},[i,a]),s=react.useCallback(()=>{te(false),L.current?.focus();},[]),u=react.useCallback(e=>{r(e),j.current&&(j.current.value=e),te(false),L.current?.focus();},[r]);react.useEffect(()=>{if(R&&z.current!==null){let e=z.current;z.current=null,requestAnimationFrame(()=>{let n=H.current,d=M.current[e];if(n&&d){let S=n.clientHeight,T=d.clientHeight,P=d.offsetTop-S/2+T/2;n.scrollTop=P;}});}},[R]);let g=react.useCallback(()=>{let e=H.current;if(!e)return;let n=e.getBoundingClientRect(),d=n.top+n.height/2,S=0,T=1/0;M.current.forEach((Q,P)=>{if(!Q)return;let I=Q.getBoundingClientRect(),X=I.top+I.height/2,ne=Math.abs(X-d);ne<T&&(T=ne,S=P);}),A(S);},[]),b=react.useRef(false),x=react.useRef(null),Y=react.useCallback(()=>{b.current=true,x.current&&clearTimeout(x.current),x.current=setTimeout(()=>{b.current=false,g();},50);},[g]),O=react.useCallback(e=>{switch(e.key){case "Escape":e.preventDefault(),s();break;case "ArrowUp":e.preventDefault(),A(n=>{let d=Math.max(0,n-1);return M.current[d]?.scrollIntoView({block:"center",behavior:"smooth"}),d});break;case "ArrowDown":e.preventDefault(),A(n=>{let d=Math.min(i.length-1,n+1);return M.current[d]?.scrollIntoView({block:"center",behavior:"smooth"}),d});break;case "Enter":e.preventDefault(),i[v]&&u(i[v].value);break}},[v,i,s,u]),W=react.useCallback(e=>{i[e]&&u(i[e].value);},[i,u]),ce=react.useCallback(e=>n=>{n.preventDefault(),n.stopPropagation(),x.current&&(clearTimeout(x.current),x.current=null),W(e);},[W]),B=react.useCallback(e=>{let d=e.target.closest(".base-select-option");if(d){let S=d.id,T=parseInt(S.replace("option-",""),10);!isNaN(T)&&i[T]&&W(T);}},[i,W]),J=react.useCallback(e=>{e.target===e.currentTarget&&s();},[s]);react.useEffect(()=>{R&&H.current&&H.current.focus();},[R]),react.useEffect(()=>()=>{x.current&&clearTimeout(x.current);},[]);let $=react.useCallback(e=>{r(e.target.value);},[r]),y=()=>!R||!E?null:reactDom.createPortal(jsxRuntime.jsx("div",{className:"base-select-backdrop",onClick:J,role:"presentation",children:jsxRuntime.jsx("div",{className:"base-select-picker",style:{left:E.left,top:E.top+E.height/2},role:"dialog","aria-modal":"true","aria-label":"Select an option",children:jsxRuntime.jsxs("div",{ref:H,className:"base-select-wheel",role:"listbox",tabIndex:0,onKeyDown:O,onScroll:Y,onClick:B,"aria-activedescendant":`option-${v}`,children:[jsxRuntime.jsx("div",{className:"base-select-spacer","aria-hidden":"true"}),i.map((e,n)=>jsxRuntime.jsxs("div",{ref:d=>{M.current[n]=d;},id:`option-${n}`,role:"option","aria-selected":n===v,className:`base-select-option ${n===v?"active":""}`,onClick:ce(n),children:[jsxRuntime.jsx("span",{className:"base-select-option-text",children:e.label}),n===v&&jsxRuntime.jsx(Le,{})]},e.value)),jsxRuntime.jsx("div",{className:"base-select-spacer","aria-hidden":"true"})]})})}),document.body);return jsxRuntime.jsxs("span",{className:`base-select-compat fallback ${oe}`,children:[jsxRuntime.jsx("select",{ref:j,name:c,id:q,value:a,onChange:$,className:"base-select-hidden",tabIndex:-1,"aria-hidden":"true",children:i.map(e=>jsxRuntime.jsx("option",{value:e.value,children:e.label},e.value))}),jsxRuntime.jsxs("button",{ref:L,type:"button",className:`base-select-trigger ${R?"open":""}`,onClick:re,"aria-haspopup":"listbox","aria-expanded":R,style:{visibility:R?"hidden":"visible"},children:[jsxRuntime.jsx("span",{className:"base-select-trigger-text",children:ie}),jsxRuntime.jsx(Ae,{})]}),y()]})}exports.BaseSelectCompat=ze;exports.WheelSelect=me;exports.default=Be;//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map