@ncdai/react-wheel-picker 1.0.4 → 1.0.6

package/README.md

@@ -21,7 +21,7 @@ bun add @ncdai/react-wheel-picker
 Add the core CSS to your app's entry point (e.g., `src/app/layout.tsx`, `src/main.tsx`, or `src/index.tsx`):
 
 ```tsx
-import "@ncdai/react-wheel-picker/dist/style.css";
+import "@ncdai/react-wheel-picker/style.css";
 ```
 
 > This CSS includes only basic layout. Use classNames to customize visuals (see below).
@@ -72,3 +72,7 @@ export function WheelPickerDemo() {
 ## Documentation
 
 Find the full API reference in the [documentation](https://react-wheel-picker.chanhdai.com/docs/getting-started).
+
+## License
+
+Licensed under the [MIT license](./LICENSE).

package/dist/index.css

@@ -0,0 +1 @@
+[data-rwp-wrapper]{display:flex;position:relative;width:100%;align-items:stretch;justify-content:space-between;overflow:hidden;perspective:2000px;-webkit-user-select:none;-moz-user-select:none;user-select:none}[data-rwp]{position:relative;flex:1;overflow:hidden;cursor:ns-resize;text-align:center;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,black 20%,black 80%,transparent 100%)}[data-rwp-highlight-wrapper]{position:absolute;top:50%;width:100%;font-size:1rem;font-weight:500;overflow:hidden;transform:translateY(-50%)}[data-rwp-highlight-list]{position:absolute;width:100%;list-style:none}[data-rwp-options]{display:block;position:absolute;top:50%;left:0;width:100%;height:0;margin-left:auto;margin-right:auto;-webkit-font-smoothing:subpixel-antialiased;will-change:transform;backface-visibility:hidden;transform-style:preserve-3d;list-style:none}[data-rwp-option]{position:absolute;top:0;left:0;width:100%;-webkit-font-smoothing:subpixel-antialiased;will-change:visibility;font-size:.875rem}

package/dist/index.js

@@ -1 +1 @@
-"use client";var vt=Object.create;var x=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Tt=Object.getOwnPropertyNames;var Dt=Object.getPrototypeOf,Mt=Object.prototype.hasOwnProperty;var St=(c,l)=>{for(var d in l)x(c,d,{get:l[d],enumerable:!0})},et=(c,l,d,h)=>{if(l&&typeof l=="object"||typeof l=="function")for(let i of Tt(l))!Mt.call(c,i)&&i!==d&&x(c,i,{get:()=>l[i],enumerable:!(h=Et(l,i))||h.enumerable});return c};var nt=(c,l,d)=>(d=c!=null?vt(Dt(c)):{},et(l||!c||!c.__esModule?x(d,"default",{value:c,enumerable:!0}):d,c)),yt=c=>et(x({},"__esModule",{value:!0}),c);var xt={};St(xt,{WheelPicker:()=>kt,WheelPickerWrapper:()=>wt});module.exports=yt(xt);var M=nt(require("react")),u=require("react");var D=nt(require("react"));function rt(c){let l=D.default.useRef(c);return D.default.useEffect(()=>{l.current=c}),D.default.useMemo(()=>(...d)=>{var h;return(h=l.current)==null?void 0:h.call(l,...d)},[])}function Lt({defaultProp:c,onChange:l}){let d=D.default.useState(c),[h]=d,i=D.default.useRef(h),E=rt(l);return D.default.useEffect(()=>{i.current!==h&&(E(h),i.current=h)},[h,i,E]),d}function ot({prop:c,defaultProp:l,onChange:d=()=>{}}){let[h,i]=Lt({defaultProp:l,onChange:d}),E=c!==void 0,A=E?c:h,f=rt(d),W=D.default.useCallback(S=>{if(E){let m=typeof S=="function"?S(c):S;m!==c&&f(m)}else i(S)},[E,c,i,f]);return[A,W]}var It=150,ct=.3,Wt=30,Ct=c=>Math.pow(c-1,3)+1,wt=({className:c,children:l})=>M.default.createElement("div",{className:c,"data-rwp-wrapper":!0},l),kt=({defaultValue:c,value:l,onValueChange:d,options:h,infinite:i=!1,visibleCount:E=20,dragSensitivity:A=3,classNames:f})=>{var Q,V;let[W=(V=(Q=h[0])==null?void 0:Q.value)!=null?V:"",S]=ot({defaultProp:c,prop:l,onChange:d}),s=(0,u.useMemo)(()=>{if(!i)return h;let t=[],e=Math.ceil(E/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[E,h,i]),m=28,z=m*.5,y=360/E,C=m/Math.tan(y*Math.PI/180),st=Math.round(C*2+m*.25),Y=E>>2,B=A*10,at=10,b=(0,u.useRef)(null),w=(0,u.useRef)(null),R=(0,u.useRef)(null),v=(0,u.useRef)(0),X=(0,u.useRef)(0),L=(0,u.useRef)(!1),G=(0,u.useRef)(0),H=(0,u.useRef)({startY:0,yList:[]}),O=(0,u.useRef)(null),lt=(0,u.useMemo)(()=>{let t=(n,r,o)=>M.default.createElement("li",{key:r,className:f==null?void 0:f.optionItem,"data-rwp-option":!0,"data-index":r,style:{top:-z,height:m,lineHeight:`${m}px`,transform:`rotateX(${o}deg) translateZ(${C}px)`,visibility:"hidden"}},n.label),e=s.map((n,r)=>t(n,r,-y*r));if(i)for(let n=0;n<Y;++n){let r=-n-1,o=n+s.length;e.unshift(t(s[s.length-n-1],r,y*(n+1))),e.push(t(s[n],o,-y*o))}return e},[z,i,y,s,Y,C,f==null?void 0:f.optionItem]),it=(0,u.useMemo)(()=>{let t=(n,r)=>M.default.createElement("li",{key:r,"data-slot":"highlight-item",className:f==null?void 0:f.highlightItem,style:{height:m}},n.label),e=s.map((n,r)=>t(n,r));if(i){let n=s[0],r=s[s.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[f==null?void 0:f.highlightItem,i,s]),F=t=>(t%s.length+s.length)%s.length,I=t=>{let e=i?F(t):t;if(w.current){let n=`translateZ(${-C}px) rotateX(${y*e}deg)`;w.current.style.transform=n,w.current.childNodes.forEach(r=>{let o=r,p=Math.abs(Number(o.dataset.index)-e);o.style.visibility=p>Y?"hidden":"visible"})}return R.current&&(R.current.style.transform=`translateY(${-e*m}px)`),e},P=()=>{cancelAnimationFrame(X.current)},ut=(t,e,n,r)=>{if(t===e||n===0){I(t);return}let o=performance.now(),p=e-t,a=g=>{let T=(g-o)/1e3;if(T<n){let q=Ct(T/n);v.current=I(t+q*p),X.current=requestAnimationFrame(a)}else P(),v.current=I(e),r==null||r()};requestAnimationFrame(a)},k=t=>{let e=F(t)|0,n=i?e:Math.min(Math.max(e,0),s.length-1);if(!i&&n!==t)return;v.current=I(n);let r=s[v.current];S(r.value)},ht=t=>{let e=s.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}P(),k(e)},dt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=H.current;o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let p=(o.startY-r)/m,a=v.current+p;if(i)a=F(a);else{let g=s.length;a<0?a*=ct:a>g&&(a=g+(a-g)*ct)}o.touchScroll=I(a)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},Z=t=>{!L.current&&!b.current.contains(t.target)&&t.target!==b.current||(t.cancelable&&t.preventDefault(),s.length&&dt(t))},_=t=>{var e,n,r;try{L.current=!0;let o=new AbortController,{signal:p}=o;O.current=o;let a={signal:p,passive:!1};(e=b.current)==null||e.addEventListener("touchmove",Z,a),document.addEventListener("mousemove",Z,a);let g=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,T=H.current;T.startY=g,T.yList=[[g,Date.now()]],T.touchScroll=v.current,P()}catch(o){console.error("Error in initiateDragGesture:",o)}},U=(0,u.useCallback)(t=>{let e=L.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),s.length&&_(t))},[_]),ft=t=>{let e=v.current,n=e,r=t>0?-B:B,o=0,p=(a,g,T)=>Math.max(g,Math.min(a,T));if(i){o=Math.abs(t/r);let a=t*o+.5*r*o*o;n=Math.round(e+a)}else if(e<0||e>s.length-1){let a=p(e,0,s.length-1),g=e-a;r=at,o=Math.sqrt(Math.abs(g/r)),t=r*o,t=e>0?-t:t,n=a}else{o=Math.abs(t/r);let a=t*o+.5*r*o*o;n=Math.round(e+a),n=p(n,0,s.length-1);let g=n-e;o=Math.sqrt(Math.abs(g/r))}ut(e,n,o,()=>{k(v.current)}),k(v.current)},j=()=>{var t,e,n,r;try{(t=O.current)==null||t.abort(),O.current=null;let o=H.current,p=o.yList,a=0;if(p.length>1){let g=p.length,[T,q]=(e=p[g-2])!=null?e:[0,0],[gt,mt]=(n=p[g-1])!=null?n:[0,0],N=mt-q;if(N>0){let tt=(T-gt)/m*1e3/N,pt=Wt,bt=tt>0?1:-1;a=Math.min(Math.abs(tt),pt)*bt}}v.current=(r=o.touchScroll)!=null?r:v.current,ft(a)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{L.current=!1}},$=(0,u.useCallback)(t=>{if(!s.length)return;let e=L.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),j())},[j]),K=t=>{t.preventDefault();let e=Date.now();if(e-G.current<It)return;let n=Math.sign(t.deltaY);n!==0&&(k(v.current+n),G.current=e)},J=(0,u.useCallback)(t=>{if(!s.length||!b.current)return;let e=L.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),K(t))},[K]);return(0,u.useEffect)(()=>{let t=b.current;if(!t)return;let e=new AbortController,{signal:n}=e,r={signal:n,passive:!1};return t.addEventListener("touchstart",U,r),t.addEventListener("touchend",$,r),t.addEventListener("wheel",J,r),document.addEventListener("mousedown",U,r),document.addEventListener("mouseup",$,r),()=>e.abort()},[$,U,J]),(0,u.useEffect)(()=>{ht(W)},[W,l]),M.default.createElement("div",{ref:b,"data-rwp":!0,style:{height:st}},M.default.createElement("ul",{ref:w,"data-rwp-options":!0},lt),M.default.createElement("div",{className:f==null?void 0:f.highlightWrapper,"data-rwp-highlight-wrapper":!0,style:{height:m,lineHeight:m+"px"}},M.default.createElement("ul",{ref:R,"data-rwp-highlight-list":!0,style:{top:i?-m:void 0}},it)))};0&&(module.exports={WheelPicker,WheelPickerWrapper});
+"use strict";"use client";var vt=Object.create;var C=Object.defineProperty;var wt=Object.getOwnPropertyDescriptor;var yt=Object.getOwnPropertyNames;var Et=Object.getPrototypeOf,Tt=Object.prototype.hasOwnProperty;var Dt=(s,i)=>{for(var d in i)C(s,d,{get:i[d],enumerable:!0})},et=(s,i,d,h)=>{if(i&&typeof i=="object"||typeof i=="function")for(let l of yt(i))!Tt.call(s,l)&&l!==d&&C(s,l,{get:()=>i[l],enumerable:!(h=wt(i,l))||h.enumerable});return s};var nt=(s,i,d)=>(d=s!=null?vt(Et(s)):{},et(i||!s||!s.__esModule?C(d,"default",{value:s,enumerable:!0}):d,s)),Mt=s=>et(C({},"__esModule",{value:!0}),s);var Ct={};Dt(Ct,{WheelPicker:()=>xt,WheelPickerWrapper:()=>Wt});module.exports=Mt(Ct);var T=nt(require("react")),u=require("react");var E=nt(require("react"));function rt(s){let i=E.default.useRef(s);return E.default.useEffect(()=>{i.current=s}),E.default.useMemo(()=>(...d)=>{var h;return(h=i.current)==null?void 0:h.call(i,...d)},[])}function St({defaultProp:s,onChange:i}){let d=E.default.useState(s),[h]=d,l=E.default.useRef(h),w=rt(i);return E.default.useEffect(()=>{l.current!==h&&(w(h),l.current=h)},[h,l,w]),d}function ot({prop:s,defaultProp:i,onChange:d=()=>{}}){let[h,l]=St({defaultProp:i,onChange:d}),w=s!==void 0,Y=w?s:h,f=rt(d),L=E.default.useCallback(D=>{if(w){let p=typeof D=="function"?D(s):D;p!==s&&f(p)}else l(D)},[w,s,l,f]);return[Y,L]}var kt=150,st=.3,Lt=30,It=s=>Math.pow(s-1,3)+1,Wt=({className:s,children:i})=>T.default.createElement("div",{className:s,"data-rwp-wrapper":!0},i),xt=({defaultValue:s,value:i,onValueChange:d,options:h,infinite:l=!1,visibleCount:w=20,dragSensitivity:Y=3,classNames:f})=>{var Q,V;let[L=(V=(Q=h[0])==null?void 0:Q.value)!=null?V:"",D]=ot({defaultProp:s,prop:i,onChange:d}),a=(0,u.useMemo)(()=>{if(!l)return h;let t=[],e=Math.ceil(w/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[w,h,l]),p=28,q=p*.5,M=360/w,I=p/Math.tan(M*Math.PI/180),at=Math.round(I*2+p*.25),A=w>>2,B=Y*10,ct=10,b=(0,u.useRef)(null),W=(0,u.useRef)(null),R=(0,u.useRef)(null),v=(0,u.useRef)(0),X=(0,u.useRef)(0),S=(0,u.useRef)(!1),j=(0,u.useRef)(0),H=(0,u.useRef)({startY:0,yList:[]}),O=(0,u.useRef)(null),it=(0,u.useMemo)(()=>{let t=(n,r,o)=>T.default.createElement("li",{key:r,className:f==null?void 0:f.optionItem,"data-rwp-option":!0,"data-index":r,style:{top:-q,height:p,lineHeight:`${p}px`,transform:`rotateX(${o}deg) translateZ(${I}px)`,visibility:"hidden"}},n.label),e=a.map((n,r)=>t(n,r,-M*r));if(l)for(let n=0;n<A;++n){let r=-n-1,o=n+a.length;e.unshift(t(a[a.length-n-1],r,M*(n+1))),e.push(t(a[n],o,-M*o))}return e},[q,l,M,a,A,I,f==null?void 0:f.optionItem]),lt=(0,u.useMemo)(()=>{let t=(n,r)=>T.default.createElement("li",{key:r,"data-slot":"highlight-item",className:f==null?void 0:f.highlightItem,style:{height:p}},n.label),e=a.map((n,r)=>t(n,r));if(l){let n=a[0],r=a[a.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[f==null?void 0:f.highlightItem,l,a]),z=t=>(t%a.length+a.length)%a.length,k=t=>{let e=l?z(t):t;if(W.current){let n=`translateZ(${-I}px) rotateX(${M*e}deg)`;W.current.style.transform=n,W.current.childNodes.forEach(r=>{let o=r,m=Math.abs(Number(o.dataset.index)-e);o.style.visibility=m>A?"hidden":"visible"})}return R.current&&(R.current.style.transform=`translateY(${-e*p}px)`),e},F=()=>{cancelAnimationFrame(X.current)},ut=(t,e,n,r)=>{if(t===e||n===0){k(t);return}let o=performance.now(),m=e-t,c=g=>{let y=(g-o)/1e3;if(y<n){let $=It(y/n);v.current=k(t+$*m),X.current=requestAnimationFrame(c)}else F(),v.current=k(e),r==null||r()};requestAnimationFrame(c)},x=t=>{let e=z(t)|0,n=l?e:Math.min(Math.max(e,0),a.length-1);if(!l&&n!==t)return;v.current=k(n);let r=a[v.current];D(r.value)},ht=t=>{let e=a.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}F(),x(e)},dt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=H.current;o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let m=(o.startY-r)/p,c=v.current+m;if(l)c=z(c);else{let g=a.length;c<0?c*=st:c>g&&(c=g+(c-g)*st)}o.touchScroll=k(c)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},G=t=>{!S.current&&!b.current.contains(t.target)&&t.target!==b.current||(t.cancelable&&t.preventDefault(),a.length&&dt(t))},Z=t=>{var e,n,r;try{S.current=!0;let o=new AbortController,{signal:m}=o;O.current=o;let c={signal:m,passive:!1};(e=b.current)==null||e.addEventListener("touchmove",G,c),document.addEventListener("mousemove",G,c);let g=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,y=H.current;y.startY=g,y.yList=[[g,Date.now()]],y.touchScroll=v.current,F()}catch(o){console.error("Error in initiateDragGesture:",o)}},P=(0,u.useCallback)(t=>{let e=S.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),a.length&&Z(t))},[Z]),ft=t=>{let e=v.current,n=e,r=t>0?-B:B,o=0,m=(c,g,y)=>Math.max(g,Math.min(c,y));if(l){o=Math.abs(t/r);let c=t*o+.5*r*o*o;n=Math.round(e+c)}else if(e<0||e>a.length-1){let c=m(e,0,a.length-1),g=e-c;r=ct,o=Math.sqrt(Math.abs(g/r)),t=r*o,t=e>0?-t:t,n=c}else{o=Math.abs(t/r);let c=t*o+.5*r*o*o;n=Math.round(e+c),n=m(n,0,a.length-1);let g=n-e;o=Math.sqrt(Math.abs(g/r))}ut(e,n,o,()=>{x(v.current)}),x(v.current)},_=()=>{var t,e,n,r;try{(t=O.current)==null||t.abort(),O.current=null;let o=H.current,m=o.yList,c=0;if(m.length>1){let g=m.length,[y,$]=(e=m[g-2])!=null?e:[0,0],[gt,pt]=(n=m[g-1])!=null?n:[0,0],N=pt-$;if(N>0){let tt=(y-gt)/p*1e3/N,mt=Lt,bt=tt>0?1:-1;c=Math.min(Math.abs(tt),mt)*bt}}v.current=(r=o.touchScroll)!=null?r:v.current,ft(c)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},U=(0,u.useCallback)(t=>{if(!a.length)return;let e=S.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),_())},[_]),K=t=>{t.preventDefault();let e=Date.now();if(e-j.current<kt)return;let n=Math.sign(t.deltaY);n!==0&&(x(v.current+n),j.current=e)},J=(0,u.useCallback)(t=>{if(!a.length||!b.current)return;let e=S.current,n=b.current.contains(t.target)||t.target===b.current;(e||n)&&t.cancelable&&(t.preventDefault(),K(t))},[K]);return(0,u.useEffect)(()=>{let t=b.current;if(!t)return;let e=new AbortController,{signal:n}=e,r={signal:n,passive:!1};return t.addEventListener("touchstart",P,r),t.addEventListener("touchend",U,r),t.addEventListener("wheel",J,r),document.addEventListener("mousedown",P,r),document.addEventListener("mouseup",U,r),()=>e.abort()},[U,P,J]),(0,u.useEffect)(()=>{ht(L)},[L,i]),T.default.createElement("div",{ref:b,"data-rwp":!0,style:{height:at}},T.default.createElement("ul",{ref:W,"data-rwp-options":!0},it),T.default.createElement("div",{className:f==null?void 0:f.highlightWrapper,"data-rwp-highlight-wrapper":!0,style:{height:p,lineHeight:p+"px"}},T.default.createElement("ul",{ref:R,"data-rwp-highlight-list":!0,style:{top:l?-p:void 0}},lt)))};0&&(module.exports={WheelPicker,WheelPickerWrapper});

package/dist/index.mjs

@@ -1 +1 @@
-"use client";import M from"react";import{useCallback as q,useEffect as ot,useMemo as z,useRef as T}from"react";import D from"react";function nt(u){let g=D.useRef(u);return D.useEffect(()=>{g.current=u}),D.useMemo(()=>(...E)=>{var h;return(h=g.current)==null?void 0:h.call(g,...E)},[])}function vt({defaultProp:u,onChange:g}){let E=D.useState(u),[h]=E,a=D.useRef(h),b=nt(g);return D.useEffect(()=>{a.current!==h&&(b(h),a.current=h)},[h,a,b]),E}function rt({prop:u,defaultProp:g,onChange:E=()=>{}}){let[h,a]=vt({defaultProp:g,onChange:E}),b=u!==void 0,x=b?u:h,l=nt(E),W=D.useCallback(S=>{if(b){let d=typeof S=="function"?S(u):S;d!==u&&l(d)}else a(S)},[b,u,a,l]);return[x,W]}var Et=150,ct=.3,Tt=30,Dt=u=>Math.pow(u-1,3)+1,wt=({className:u,children:g})=>M.createElement("div",{className:u,"data-rwp-wrapper":!0},g),kt=({defaultValue:u,value:g,onValueChange:E,options:h,infinite:a=!1,visibleCount:b=20,dragSensitivity:x=3,classNames:l})=>{var V,N;let[W=(N=(V=h[0])==null?void 0:V.value)!=null?N:"",S]=rt({defaultProp:u,prop:g,onChange:E}),c=z(()=>{if(!a)return h;let t=[],e=Math.ceil(b/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[b,h,a]),d=28,B=d*.5,y=360/b,C=d/Math.tan(y*Math.PI/180),st=Math.round(C*2+d*.25),A=b>>2,X=x*10,at=10,m=T(null),w=T(null),Y=T(null),p=T(0),G=T(0),L=T(!1),Z=T(0),R=T({startY:0,yList:[]}),H=T(null),lt=z(()=>{let t=(n,r,o)=>M.createElement("li",{key:r,className:l==null?void 0:l.optionItem,"data-rwp-option":!0,"data-index":r,style:{top:-B,height:d,lineHeight:`${d}px`,transform:`rotateX(${o}deg) translateZ(${C}px)`,visibility:"hidden"}},n.label),e=c.map((n,r)=>t(n,r,-y*r));if(a)for(let n=0;n<A;++n){let r=-n-1,o=n+c.length;e.unshift(t(c[c.length-n-1],r,y*(n+1))),e.push(t(c[n],o,-y*o))}return e},[B,a,y,c,A,C,l==null?void 0:l.optionItem]),it=z(()=>{let t=(n,r)=>M.createElement("li",{key:r,"data-slot":"highlight-item",className:l==null?void 0:l.highlightItem,style:{height:d}},n.label),e=c.map((n,r)=>t(n,r));if(a){let n=c[0],r=c[c.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[l==null?void 0:l.highlightItem,a,c]),O=t=>(t%c.length+c.length)%c.length,I=t=>{let e=a?O(t):t;if(w.current){let n=`translateZ(${-C}px) rotateX(${y*e}deg)`;w.current.style.transform=n,w.current.childNodes.forEach(r=>{let o=r,f=Math.abs(Number(o.dataset.index)-e);o.style.visibility=f>A?"hidden":"visible"})}return Y.current&&(Y.current.style.transform=`translateY(${-e*d}px)`),e},F=()=>{cancelAnimationFrame(G.current)},ut=(t,e,n,r)=>{if(t===e||n===0){I(t);return}let o=performance.now(),f=e-t,s=i=>{let v=(i-o)/1e3;if(v<n){let $=Dt(v/n);p.current=I(t+$*f),G.current=requestAnimationFrame(s)}else F(),p.current=I(e),r==null||r()};requestAnimationFrame(s)},k=t=>{let e=O(t)|0,n=a?e:Math.min(Math.max(e,0),c.length-1);if(!a&&n!==t)return;p.current=I(n);let r=c[p.current];S(r.value)},ht=t=>{let e=c.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}F(),k(e)},dt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=R.current;o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let f=(o.startY-r)/d,s=p.current+f;if(a)s=O(s);else{let i=c.length;s<0?s*=ct:s>i&&(s=i+(s-i)*ct)}o.touchScroll=I(s)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},_=t=>{!L.current&&!m.current.contains(t.target)&&t.target!==m.current||(t.cancelable&&t.preventDefault(),c.length&&dt(t))},j=t=>{var e,n,r;try{L.current=!0;let o=new AbortController,{signal:f}=o;H.current=o;let s={signal:f,passive:!1};(e=m.current)==null||e.addEventListener("touchmove",_,s),document.addEventListener("mousemove",_,s);let i=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,v=R.current;v.startY=i,v.yList=[[i,Date.now()]],v.touchScroll=p.current,F()}catch(o){console.error("Error in initiateDragGesture:",o)}},P=q(t=>{let e=L.current,n=m.current.contains(t.target)||t.target===m.current;(e||n)&&t.cancelable&&(t.preventDefault(),c.length&&j(t))},[j]),ft=t=>{let e=p.current,n=e,r=t>0?-X:X,o=0,f=(s,i,v)=>Math.max(i,Math.min(s,v));if(a){o=Math.abs(t/r);let s=t*o+.5*r*o*o;n=Math.round(e+s)}else if(e<0||e>c.length-1){let s=f(e,0,c.length-1),i=e-s;r=at,o=Math.sqrt(Math.abs(i/r)),t=r*o,t=e>0?-t:t,n=s}else{o=Math.abs(t/r);let s=t*o+.5*r*o*o;n=Math.round(e+s),n=f(n,0,c.length-1);let i=n-e;o=Math.sqrt(Math.abs(i/r))}ut(e,n,o,()=>{k(p.current)}),k(p.current)},K=()=>{var t,e,n,r;try{(t=H.current)==null||t.abort(),H.current=null;let o=R.current,f=o.yList,s=0;if(f.length>1){let i=f.length,[v,$]=(e=f[i-2])!=null?e:[0,0],[gt,mt]=(n=f[i-1])!=null?n:[0,0],tt=mt-$;if(tt>0){let et=(v-gt)/d*1e3/tt,pt=Tt,bt=et>0?1:-1;s=Math.min(Math.abs(et),pt)*bt}}p.current=(r=o.touchScroll)!=null?r:p.current,ft(s)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{L.current=!1}},U=q(t=>{if(!c.length)return;let e=L.current,n=m.current.contains(t.target)||t.target===m.current;(e||n)&&t.cancelable&&(t.preventDefault(),K())},[K]),J=t=>{t.preventDefault();let e=Date.now();if(e-Z.current<Et)return;let n=Math.sign(t.deltaY);n!==0&&(k(p.current+n),Z.current=e)},Q=q(t=>{if(!c.length||!m.current)return;let e=L.current,n=m.current.contains(t.target)||t.target===m.current;(e||n)&&t.cancelable&&(t.preventDefault(),J(t))},[J]);return ot(()=>{let t=m.current;if(!t)return;let e=new AbortController,{signal:n}=e,r={signal:n,passive:!1};return t.addEventListener("touchstart",P,r),t.addEventListener("touchend",U,r),t.addEventListener("wheel",Q,r),document.addEventListener("mousedown",P,r),document.addEventListener("mouseup",U,r),()=>e.abort()},[U,P,Q]),ot(()=>{ht(W)},[W,g]),M.createElement("div",{ref:m,"data-rwp":!0,style:{height:st}},M.createElement("ul",{ref:w,"data-rwp-options":!0},lt),M.createElement("div",{className:l==null?void 0:l.highlightWrapper,"data-rwp-highlight-wrapper":!0,style:{height:d,lineHeight:d+"px"}},M.createElement("ul",{ref:Y,"data-rwp-highlight-list":!0,style:{top:a?-d:void 0}},it)))};export{kt as WheelPicker,wt as WheelPickerWrapper};
+"use client";import T from"react";import{useCallback as $,useEffect as ot,useMemo as q,useRef as y}from"react";import E from"react";function nt(u){let g=E.useRef(u);return E.useEffect(()=>{g.current=u}),E.useMemo(()=>(...w)=>{var h;return(h=g.current)==null?void 0:h.call(g,...w)},[])}function vt({defaultProp:u,onChange:g}){let w=E.useState(u),[h]=w,c=E.useRef(h),b=nt(g);return E.useEffect(()=>{c.current!==h&&(b(h),c.current=h)},[h,c,b]),w}function rt({prop:u,defaultProp:g,onChange:w=()=>{}}){let[h,c]=vt({defaultProp:g,onChange:w}),b=u!==void 0,C=b?u:h,i=nt(w),L=E.useCallback(D=>{if(b){let d=typeof D=="function"?D(u):D;d!==u&&i(d)}else c(D)},[b,u,c,i]);return[C,L]}var wt=150,st=.3,yt=30,Et=u=>Math.pow(u-1,3)+1,Yt=({className:u,children:g})=>T.createElement("div",{className:u,"data-rwp-wrapper":!0},g),At=({defaultValue:u,value:g,onValueChange:w,options:h,infinite:c=!1,visibleCount:b=20,dragSensitivity:C=3,classNames:i})=>{var V,N;let[L=(N=(V=h[0])==null?void 0:V.value)!=null?N:"",D]=rt({defaultProp:u,prop:g,onChange:w}),s=q(()=>{if(!c)return h;let t=[],e=Math.ceil(b/2);if(h.length===0)return t;for(;t.length<e;)t.push(...h);return t},[b,h,c]),d=28,B=d*.5,M=360/b,I=d/Math.tan(M*Math.PI/180),at=Math.round(I*2+d*.25),Y=b>>2,X=C*10,ct=10,p=y(null),W=y(null),A=y(null),m=y(0),j=y(0),S=y(!1),G=y(0),R=y({startY:0,yList:[]}),H=y(null),it=q(()=>{let t=(n,r,o)=>T.createElement("li",{key:r,className:i==null?void 0:i.optionItem,"data-rwp-option":!0,"data-index":r,style:{top:-B,height:d,lineHeight:`${d}px`,transform:`rotateX(${o}deg) translateZ(${I}px)`,visibility:"hidden"}},n.label),e=s.map((n,r)=>t(n,r,-M*r));if(c)for(let n=0;n<Y;++n){let r=-n-1,o=n+s.length;e.unshift(t(s[s.length-n-1],r,M*(n+1))),e.push(t(s[n],o,-M*o))}return e},[B,c,M,s,Y,I,i==null?void 0:i.optionItem]),lt=q(()=>{let t=(n,r)=>T.createElement("li",{key:r,"data-slot":"highlight-item",className:i==null?void 0:i.highlightItem,style:{height:d}},n.label),e=s.map((n,r)=>t(n,r));if(c){let n=s[0],r=s[s.length-1];e.unshift(t(r,"infinite-start")),e.push(t(n,"infinite-end"))}return e},[i==null?void 0:i.highlightItem,c,s]),O=t=>(t%s.length+s.length)%s.length,k=t=>{let e=c?O(t):t;if(W.current){let n=`translateZ(${-I}px) rotateX(${M*e}deg)`;W.current.style.transform=n,W.current.childNodes.forEach(r=>{let o=r,f=Math.abs(Number(o.dataset.index)-e);o.style.visibility=f>Y?"hidden":"visible"})}return A.current&&(A.current.style.transform=`translateY(${-e*d}px)`),e},z=()=>{cancelAnimationFrame(j.current)},ut=(t,e,n,r)=>{if(t===e||n===0){k(t);return}let o=performance.now(),f=e-t,a=l=>{let v=(l-o)/1e3;if(v<n){let U=Et(v/n);m.current=k(t+U*f),j.current=requestAnimationFrame(a)}else z(),m.current=k(e),r==null||r()};requestAnimationFrame(a)},x=t=>{let e=O(t)|0,n=c?e:Math.min(Math.max(e,0),s.length-1);if(!c&&n!==t)return;m.current=k(n);let r=s[m.current];D(r.value)},ht=t=>{let e=s.findIndex(n=>n.value===t);if(e===-1){console.error("Invalid value selected:",t);return}z(),x(e)},dt=t=>{var e,n;try{let r=(t instanceof MouseEvent?t.clientY:(n=(e=t.touches)==null?void 0:e[0])==null?void 0:n.clientY)||0,o=R.current;o.yList.push([r,Date.now()]),o.yList.length>5&&o.yList.shift();let f=(o.startY-r)/d,a=m.current+f;if(c)a=O(a);else{let l=s.length;a<0?a*=st:a>l&&(a=l+(a-l)*st)}o.touchScroll=k(a)}catch(r){console.error("Error in updateScrollDuringDrag:",r)}},Z=t=>{!S.current&&!p.current.contains(t.target)&&t.target!==p.current||(t.cancelable&&t.preventDefault(),s.length&&dt(t))},_=t=>{var e,n,r;try{S.current=!0;let o=new AbortController,{signal:f}=o;H.current=o;let a={signal:f,passive:!1};(e=p.current)==null||e.addEventListener("touchmove",Z,a),document.addEventListener("mousemove",Z,a);let l=(t instanceof MouseEvent?t.clientY:(r=(n=t.touches)==null?void 0:n[0])==null?void 0:r.clientY)||0,v=R.current;v.startY=l,v.yList=[[l,Date.now()]],v.touchScroll=m.current,z()}catch(o){console.error("Error in initiateDragGesture:",o)}},F=$(t=>{let e=S.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),s.length&&_(t))},[_]),ft=t=>{let e=m.current,n=e,r=t>0?-X:X,o=0,f=(a,l,v)=>Math.max(l,Math.min(a,v));if(c){o=Math.abs(t/r);let a=t*o+.5*r*o*o;n=Math.round(e+a)}else if(e<0||e>s.length-1){let a=f(e,0,s.length-1),l=e-a;r=ct,o=Math.sqrt(Math.abs(l/r)),t=r*o,t=e>0?-t:t,n=a}else{o=Math.abs(t/r);let a=t*o+.5*r*o*o;n=Math.round(e+a),n=f(n,0,s.length-1);let l=n-e;o=Math.sqrt(Math.abs(l/r))}ut(e,n,o,()=>{x(m.current)}),x(m.current)},K=()=>{var t,e,n,r;try{(t=H.current)==null||t.abort(),H.current=null;let o=R.current,f=o.yList,a=0;if(f.length>1){let l=f.length,[v,U]=(e=f[l-2])!=null?e:[0,0],[gt,pt]=(n=f[l-1])!=null?n:[0,0],tt=pt-U;if(tt>0){let et=(v-gt)/d*1e3/tt,mt=yt,bt=et>0?1:-1;a=Math.min(Math.abs(et),mt)*bt}}m.current=(r=o.touchScroll)!=null?r:m.current,ft(a)}catch(o){console.error("Error in finalizeDragAndStartInertiaScroll:",o)}finally{S.current=!1}},P=$(t=>{if(!s.length)return;let e=S.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),K())},[K]),J=t=>{t.preventDefault();let e=Date.now();if(e-G.current<wt)return;let n=Math.sign(t.deltaY);n!==0&&(x(m.current+n),G.current=e)},Q=$(t=>{if(!s.length||!p.current)return;let e=S.current,n=p.current.contains(t.target)||t.target===p.current;(e||n)&&t.cancelable&&(t.preventDefault(),J(t))},[J]);return ot(()=>{let t=p.current;if(!t)return;let e=new AbortController,{signal:n}=e,r={signal:n,passive:!1};return t.addEventListener("touchstart",F,r),t.addEventListener("touchend",P,r),t.addEventListener("wheel",Q,r),document.addEventListener("mousedown",F,r),document.addEventListener("mouseup",P,r),()=>e.abort()},[P,F,Q]),ot(()=>{ht(L)},[L,g]),T.createElement("div",{ref:p,"data-rwp":!0,style:{height:at}},T.createElement("ul",{ref:W,"data-rwp-options":!0},it),T.createElement("div",{className:i==null?void 0:i.highlightWrapper,"data-rwp-highlight-wrapper":!0,style:{height:d,lineHeight:d+"px"}},T.createElement("ul",{ref:A,"data-rwp-highlight-list":!0,style:{top:c?-d:void 0}},lt)))};export{At as WheelPicker,Yt as WheelPickerWrapper};

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@ncdai/react-wheel-picker",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "commonjs",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "files": [
@@ -19,7 +23,8 @@
       },
       "default": "./dist/index.js"
     },
-    "./dist/style.css": "./dist/style.css"
+    "./dist/style.css": "./dist/index.css",
+    "./style.css": "./dist/index.css"
   },
   "tsup": {
     "entry": [
@@ -29,20 +34,11 @@
       "esm",
       "cjs"
     ],
-    "dts": true,
+    "bundle": true,
     "clean": true,
-    "publicDir": "./src/assets"
-  },
-  "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup --minify",
-    "type-check": "tsc --noEmit",
-    "dev:website": "turbo run dev --filter=website...",
-    "prettier:check": "prettier --check .",
-    "format": "prettier --write .",
-    "registry:internal:build": "pnpm --filter=website registry:internal:build",
-    "registry:build": "pnpm --filter=website registry:build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dts": true,
+    "injectStyle": false,
+    "outDir": "./dist"
   },
   "keywords": [
     "react",
@@ -55,22 +51,41 @@
   "homepage": "https://react-wheel-picker.chanhdai.com",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/ncdai/react-wheel-picker.git"
+    "url": "git+https://github.com/ncdai/react-wheel-picker.git",
+    "directory": "packages/react-wheel-picker"
   },
   "bugs": {
     "url": "https://github.com/ncdai/react-wheel-picker/issues"
   },
-  "packageManager": "pnpm@10.7.0",
   "devDependencies": {
+    "@eslint/js": "9.27.0",
     "@types/node": "^20",
     "@types/react": "^19",
-    "prettier": "3.5.3",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9",
+    "eslint-config-prettier": "10.1.5",
+    "eslint-plugin-react": "7.37.5",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-simple-import-sort": "12.1.1",
+    "eslint-plugin-turbo": "^2.5.3",
+    "globals": "16.1.0",
+    "postcss": "^8.5.3",
     "react": "^19.0.0",
     "tsup": "8.5.0",
-    "turbo": "^2.5.3",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "8.32.1"
   },
   "peerDependencies": {
     "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup --minify",
+    "check-types": "tsc --noEmit",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
+    "format:check": "prettier --check \"**/*.{ts,tsx}\" --cache",
+    "format:write": "prettier --write \"**/*.{ts,tsx}\" --cache",
+    "publish:release": "pnpm build && pnpm publish --access public"
   }
-}
+}

package/dist/style.css

@@ -1,75 +0,0 @@
-[data-rwp-wrapper] {
-  display: flex;
-  position: relative;
-  width: 100%;
-  align-items: stretch;
-  justify-content: space-between;
-  overflow: hidden;
-  perspective: 2000px;
-  -webkit-user-select: none;
-  user-select: none;
-}
-
-[data-rwp] {
-  position: relative;
-  flex: 1;
-  overflow: hidden;
-  cursor: ns-resize;
-  text-align: center;
-  -webkit-mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    black 20%,
-    black 80%,
-    transparent 100%
-  );
-  mask-image: linear-gradient(
-    to bottom,
-    transparent 0%,
-    black 20%,
-    black 80%,
-    transparent 100%
-  );
-}
-
-[data-rwp-highlight-wrapper] {
-  position: absolute;
-  top: 50%;
-  width: 100%;
-  font-size: 1rem;
-  font-weight: 500;
-  overflow: hidden;
-  transform: translateY(-50%);
-}
-
-[data-rwp-highlight-list] {
-  position: absolute;
-  width: 100%;
-  list-style: none;
-}
-
-[data-rwp-options] {
-  display: block;
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 0;
-  margin-left: auto;
-  margin-right: auto;
-  -webkit-font-smoothing: subpixel-antialiased;
-  will-change: transform;
-  backface-visibility: hidden;
-  transform-style: preserve-3d;
-  list-style: none;
-}
-
-[data-rwp-option] {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  -webkit-font-smoothing: subpixel-antialiased;
-  will-change: visibility;
-  font-size: 0.875rem;
-}