@dotss/ui 1.5.0 → 1.6.0

package/ChainPicker/ChainPicker.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("@emotion/react/jsx-runtime"),c=require("react"),oe=require("@emotion/styled"),se=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),ae=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),ce=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),le=l=>l&&l.__esModule?l:{default:l},C=le(oe),ue=C.default.div`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const y=require("@emotion/react/jsx-runtime"),c=require("react"),le=require("@emotion/styled"),ue=require("../hooks/useCheckHasFocus/useCheckHasFocus.cjs"),he=require("../hooks/useCheckHoverPossible/useCheckHoverPossible.cjs"),de=require("../hooks/useCheckKeyboardMode/useCheckKeyboardMode.cjs"),fe=l=>l&&l.__esModule?l:{default:l},D=fe(le),ge=D.default.div`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -8,7 +8,7 @@
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`,de=C.default.div`
+`,me=D.default.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -40,7 +40,7 @@
   @supports not selector(:has(:focus-visible)) {
     ${({focusWithin:l,theme:i})=>l?{outline:`${i.palette.grey[100]} solid 2px`}:{}}
   }
-`,w=C.default.div`
+`,k=D.default.div`
   height: 54px;
   display: flex;
   align-items: center;
@@ -48,7 +48,7 @@
   scroll-snap-align: start;
   position: relative;
 
-  ${({theme:{palette:{grey:l},typography:{h2M:i},spacing:{content:u}}})=>({fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:l[100],padding:u(3)})};
+  ${({theme:{palette:{grey:l},typography:{h2M:i},spacing:{content:h}}})=>({fontSize:i.size,fontWeight:i.weight,lineHeight:i.lineHeight,letterSpacing:i.letterSpacing,color:l[100],padding:h(3)})};
 
-  ${({selected:l,theme:{palette:{grey:i},typography:{h4M:u}}})=>l?{"&, & *":{color:`${i[100]} !important`}}:{color:`${i[30]} !important`,fontSize:`${u.size} !important`,fontWeight:`${u.weight} !important`,lineHeight:`${u.lineHeight} !important`,letterSpacing:`${u.letterSpacing} !important`,"& *":{color:`${i[30]} !important`}}}
-`,f=Object.freeze({FRICTION:.95,SNAP_FORCE:.2,SNAP_VELOCITY_THRESHOLD:.04,MIN_VELOCITY:.01,MAX_VELOCITY:1.62,NEAR_ZERO_VELOCITY:.2,BOUNDARY_PX:4}),he=c.forwardRef(function({column:i,value:u=i[0].value,onChange:b,renderLabel:O,inlineCSS:R,wrapperProps:m,thumbProps:L,...Y},F){const A=i.findIndex(e=>e.value===u),S=c.useRef(A),s=c.useRef(null),[E,g]=c.useState(A*54),[y,D]=c.useState(!1),[I,$]=c.useState(0),[M,V]=c.useState(0),[T,H]=c.useState(!1),[q,P]=c.useState([]),j=c.useId(),d=c.useRef(null),{isHoverPossible:U}=ae.default(),{isKeyboardMode:W}=ce.default(),{hasFocus:z}=se.default({ref:s}),X=e=>{if(e.length<2)return 0;const t=e[0],n=e[e.length-1],r=n.time-t.time,a=n.y-t.y;if(r===0)return 0;const o=a/r;return Math.max(-f.MAX_VELOCITY,Math.min(f.MAX_VELOCITY,o))},K=e=>{d.current&&cancelAnimationFrame(d.current),H(!0);let t=e*-1,n=E,r=performance.now();const a=54*(i.length-1),o=h=>{const x=h-r;r=h,n+=t*x,n<0?(n=0,t=0):n>a&&(n=a,t=0),t*=f.FRICTION,g(n),s.current&&(s.current.children[0].scrollTop=n);const _=Math.round(n/54)*54,te=Math.abs(n-_),ne=Math.abs(t)<=f.NEAR_ZERO_VELOCITY,ie=Math.abs(t)<=f.SNAP_VELOCITY_THRESHOLD,re=te<=f.BOUNDARY_PX;ne&&re||ie?(H(!1),B(n)):d.current=requestAnimationFrame(o)};d.current=requestAnimationFrame(o)},B=e=>{d.current&&cancelAnimationFrame(d.current);const t=Math.max(0,Math.min(Math.round(e/54),i.length-1)),n=t*54;S.current=t;const r=a=>{if(Math.abs(a-n)<1)g(n),s.current&&(s.current.children[0].scrollTop=n),i[t]&&b(i[t].value);else{const o=a+(n-a)*f.SNAP_FORCE;g(o),s.current&&(s.current.children[0].scrollTop=o),d.current=requestAnimationFrame(()=>r(o))}};d.current=requestAnimationFrame(()=>r(e))},N=e=>{D(!0),V(e),$(E),H(!1),P([{time:performance.now(),y:e}])},Z=e=>{if(!y||T)return;const t=M-e;let n=I+t;const r=54*(i.length-1);n<0?n=0:n>r&&(n=r),g(n),s.current&&(s.current.children[0].scrollTop=n);const a=performance.now();P(o=>[...o,{time:a,y:e}].filter(h=>a-h.time<=100))},G=e=>{var n,r;e.stopPropagation();let t=S.current;e.key==="ArrowUp"?(t+=1,t>i.length-1&&(t=0)):e.key==="ArrowDown"?(t-=1,t<0&&(t=i.length-1)):e.key==="PageUp"?(t+=5,t>i.length-1&&(t=0)):e.key==="PageDown"?(t-=5,t<0&&(t=i.length-1)):e.key==="Home"?t=0:e.key==="End"&&(t=i.length-1),b(i[t].value),S.current=t,(r=(n=s.current)==null?void 0:n.querySelector(`.chain-picker-item[data-index="${S.current}"]`))==null||r.focus()},J=e=>{e.preventDefault(),e.stopPropagation(),N(e.clientY)},Q=e=>N(e.touches[0].clientY),ee=e=>{e.preventDefault(),e.stopPropagation(),Z(e.clientY)},v=e=>{if(!y||(D(!1),!U&&e.type==="mouseup"))return;const t=X(q);if(Math.abs(t)<f.MIN_VELOCITY){const r=e.target.closest("[data-index]");if(r){const a=Number(r.dataset.index);if(i[a]&&s.current){const o=s.current.children[0];o.scrollTo({top:a*54,behavior:"smooth"});const h=()=>{Math.abs(o.scrollTop-a*54)<1&&(b(i[a].value),o.removeEventListener("scroll",h))};o.addEventListener("scroll",h)}}return}K(t)};return c.useLayoutEffect(()=>{const t=i.findIndex(n=>n.value===u)*54;g(t),s.current&&(s.current.children[0].scrollTop=t)},[u,i,54]),c.useLayoutEffect(()=>()=>{d.current&&cancelAnimationFrame(d.current)},[]),c.useEffect(()=>{const e=s.current;if(!e)return;const t=n=>{const r=n;if(r.preventDefault(),r.stopPropagation(),!y||T)return;const a=M-r.touches[0].clientY;let o=I+a;const h=54*(i.length-1);o<0?o=0:o>h&&(o=h),g(o),s.current&&(s.current.children[0].scrollTop=o);const x=performance.now();P(k=>[...k,{time:x,y:r.touches[0].clientY}].filter(_=>x-_.time<=100))};return e.addEventListener("touchmove",t,{passive:!1}),()=>{e.removeEventListener("touchmove",t)}},[y,T,M,I,54,i.length]),p.jsx(de,{ref:s,...m,css:m==null?void 0:m.inlineCSS,focusWithin:W&&z,children:p.jsx(ue,{role:"group",ref:F,css:R,...Y,onMouseDown:J,onMouseMove:ee,onMouseUp:v,onMouseLeave:v,onTouchStart:Q,onTouchEnd:v,onTouchCancel:v,children:i.map((e,t)=>{const n=Math.round(E/54),r=t===n;return p.jsxs(c.Fragment,{children:[t===0&&p.jsx(w,{className:"chain-picker-item","data-index":t-1,selected:!1,distance:-1}),p.jsx(w,{className:"chain-picker-item","data-index":t,"data-selected":r,selected:r,distance:t-n,role:"spinbutton",tabIndex:r?0:-1,"aria-hidden":r?"false":"true","aria-valuenow":e.value,"aria-valuetext":e.ariaValueText??e.label,"aria-valuemin":i[0].value,"aria-valuemax":i[i.length-1].value,...L,onKeyDown:G,children:O?O(e,r):e.label}),t===i.length-1&&p.jsx(w,{className:"chain-picker-item","data-index":t+1,selected:!1,distance:i.length-n})]},`${j}_${e.label}`)})})})});exports.default=he;
+  ${({selected:l,theme:{palette:{grey:i},typography:{h4M:h}}})=>l?{"&, & *":{color:`${i[100]} !important`}}:{color:`${i[30]} !important`,fontSize:`${h.size} !important`,fontWeight:`${h.weight} !important`,lineHeight:`${h.lineHeight} !important`,letterSpacing:`${h.letterSpacing} !important`,"& *":{color:`${i[30]} !important`}}}
+`,f=Object.freeze({FRICTION:.95,SNAP_FORCE:.2,SNAP_VELOCITY_THRESHOLD:.04,MIN_VELOCITY:.01,MAX_VELOCITY:1.62,NEAR_ZERO_VELOCITY:.2,BOUNDARY_PX:4}),pe=c.forwardRef(function({column:i,value:h=i[0].value,onChange:E,onSpin:S,onSnap:p,renderLabel:N,inlineCSS:$,wrapperProps:x,thumbProps:V,...q},j){const T=i.findIndex(t=>t.value===h),M=c.useRef(T),o=c.useRef(null),[H,v]=c.useState(T*54),[b,L]=c.useState(!1),[P,U]=c.useState(0),[_,W]=c.useState(0),[w,C]=c.useState(!1),[z,O]=c.useState([]),X=c.useId(),d=c.useRef(null),A=c.useRef(T),{isHoverPossible:K}=he.default(),{isKeyboardMode:B}=de.default(),{hasFocus:Z}=ue.default({ref:o}),g=c.useCallback(t=>{const e=Math.max(0,Math.min(Math.round(t/54),i.length-1));e===A.current||!i[e]||(A.current=e,S==null||S(i[e].value))},[i,54,S]),G=t=>{if(t.length<2)return 0;const e=t[0],n=t[t.length-1],r=n.time-e.time,a=n.y-e.y;if(r===0)return 0;const s=a/r;return Math.max(-f.MAX_VELOCITY,Math.min(f.MAX_VELOCITY,s))},J=t=>{d.current&&cancelAnimationFrame(d.current),C(!0);let e=t*-1,n=H,r=performance.now();const a=54*(i.length-1),s=u=>{const m=u-r;r=u,n+=e*m,n<0?(n=0,e=0):n>a&&(n=a,e=0),e*=f.FRICTION,v(n),g(n),o.current&&(o.current.children[0].scrollTop=n);const R=Math.round(n/54)*54,se=Math.abs(n-R),oe=Math.abs(e)<=f.NEAR_ZERO_VELOCITY,ae=Math.abs(e)<=f.SNAP_VELOCITY_THRESHOLD,ce=se<=f.BOUNDARY_PX;oe&&ce||ae?(C(!1),Q(n)):d.current=requestAnimationFrame(s)};d.current=requestAnimationFrame(s)},Q=t=>{d.current&&cancelAnimationFrame(d.current);const e=Math.max(0,Math.min(Math.round(t/54),i.length-1)),n=e*54;M.current=e;const r=a=>{if(Math.abs(a-n)<1)v(n),g(n),o.current&&(o.current.children[0].scrollTop=n),i[e]&&(E(i[e].value),p==null||p(i[e].value));else{const s=a+(n-a)*f.SNAP_FORCE;v(s),g(s),o.current&&(o.current.children[0].scrollTop=s),d.current=requestAnimationFrame(()=>r(s))}};d.current=requestAnimationFrame(()=>r(t))},Y=t=>{L(!0),W(t),U(H),C(!1),O([{time:performance.now(),y:t}])},ee=t=>{if(!b||w)return;const e=_-t;let n=P+e;const r=54*(i.length-1);n<0?n=0:n>r&&(n=r),v(n),g(n),o.current&&(o.current.children[0].scrollTop=n);const a=performance.now();O(s=>[...s,{time:a,y:t}].filter(u=>a-u.time<=100))},te=t=>{var n,r;t.stopPropagation();let e=M.current;t.key==="ArrowUp"?(e+=1,e>i.length-1&&(e=0)):t.key==="ArrowDown"?(e-=1,e<0&&(e=i.length-1)):t.key==="PageUp"?(e+=5,e>i.length-1&&(e=0)):t.key==="PageDown"?(e-=5,e<0&&(e=i.length-1)):t.key==="Home"?e=0:t.key==="End"&&(e=i.length-1),E(i[e].value),M.current=e,(r=(n=o.current)==null?void 0:n.querySelector(`.chain-picker-item[data-index="${M.current}"]`))==null||r.focus()},ie=t=>{t.preventDefault(),t.stopPropagation(),Y(t.clientY)},ne=t=>Y(t.touches[0].clientY),re=t=>{t.preventDefault(),t.stopPropagation(),ee(t.clientY)},I=t=>{if(!b||(L(!1),!K&&t.type==="mouseup"))return;const e=G(z);if(Math.abs(e)<f.MIN_VELOCITY){const r=t.target.closest("[data-index]");if(r){const a=Number(r.dataset.index);if(i[a]&&o.current){const s=o.current.children[0],u=a*54;g(u),s.scrollTo({top:u,behavior:"smooth"});const m=()=>{Math.abs(s.scrollTop-u)<1&&(E(i[a].value),p==null||p(i[a].value),s.removeEventListener("scroll",m))};s.addEventListener("scroll",m)}}return}J(e)};return c.useLayoutEffect(()=>{const t=i.findIndex(n=>n.value===h),e=t*54;v(e),A.current=t,o.current&&(o.current.children[0].scrollTop=e)},[h,i,54]),c.useLayoutEffect(()=>()=>{d.current&&cancelAnimationFrame(d.current)},[]),c.useEffect(()=>{const t=o.current;if(!t)return;const e=n=>{const r=n;if(r.preventDefault(),r.stopPropagation(),!b||w)return;const a=_-r.touches[0].clientY;let s=P+a;const u=54*(i.length-1);s<0?s=0:s>u&&(s=u),v(s),g(s),o.current&&(o.current.children[0].scrollTop=s);const m=performance.now();O(F=>[...F,{time:m,y:r.touches[0].clientY}].filter(R=>m-R.time<=100))};return t.addEventListener("touchmove",e,{passive:!1}),()=>{t.removeEventListener("touchmove",e)}},[b,w,_,P,54,i.length,g]),y.jsx(me,{ref:o,...x,css:x==null?void 0:x.inlineCSS,focusWithin:B&&Z,children:y.jsx(ge,{role:"group",ref:j,css:$,...q,onMouseDown:ie,onMouseMove:re,onMouseUp:I,onMouseLeave:I,onTouchStart:ne,onTouchEnd:I,onTouchCancel:I,children:i.map((t,e)=>{const n=Math.round(H/54),r=e===n;return y.jsxs(c.Fragment,{children:[e===0&&y.jsx(k,{className:"chain-picker-item","data-index":e-1,selected:!1,distance:-1}),y.jsx(k,{className:"chain-picker-item","data-index":e,"data-selected":r,selected:r,distance:e-n,role:"spinbutton",tabIndex:r?0:-1,"aria-hidden":r?"false":"true","aria-valuenow":t.value,"aria-valuetext":t.ariaValueText??t.label,"aria-valuemin":i[0].value,"aria-valuemax":i[i.length-1].value,...V,onKeyDown:te,children:N?N(t,r):t.label}),e===i.length-1&&y.jsx(k,{className:"chain-picker-item","data-index":e+1,selected:!1,distance:i.length-n})]},`${X}_${t.label}`)})})})});exports.default=pe;

package/ChainPicker/ChainPicker.d.ts

@@ -14,6 +14,8 @@ export interface ChainPickerProps extends GeneralComponentProps<Omit<HTMLAttribu
     column: ChainPickerItem[];
     value?: number;
     onChange: (selectedValue: number) => void;
+    onSpin?: (selectedValue: number) => void;
+    onSnap?: (selectedValue: number) => void;
     renderLabel?: (item: ChainPickerItem, isSelected: boolean) => ReactNode;
     wrapperProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;
     thumbProps?: GeneralComponentProps<HTMLAttributes<HTMLDivElement>>;

package/ChainPicker/ChainPicker.es.js

@@ -1,10 +1,10 @@
-import { jsx as m, jsxs as ae } from "@emotion/react/jsx-runtime";
-import { forwardRef as ce, useRef as C, useState as g, useId as le, useLayoutEffect as L, useEffect as he, Fragment as ue } from "react";
-import O from "@emotion/styled";
-import de from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
-import fe from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
-import ge from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
-const me = O.div`
+import { jsx as y, jsxs as ue } from "@emotion/react/jsx-runtime";
+import { forwardRef as de, useRef as S, useState as v, useId as fe, useCallback as ge, useLayoutEffect as V, useEffect as me, Fragment as pe } from "react";
+import Y from "@emotion/styled";
+import ve from "../hooks/useCheckHasFocus/useCheckHasFocus.es.js";
+import ye from "../hooks/useCheckHoverPossible/useCheckHoverPossible.es.js";
+import Ie from "../hooks/useCheckKeyboardMode/useCheckKeyboardMode.es.js";
+const be = Y.div`
   list-style-type: none;
   margin: 0;
   padding: 0;
@@ -14,7 +14,7 @@ const me = O.div`
   position: relative;
   cursor: grab;
   transition: transform 0.3s ease-out;
-`, pe = O.div`
+`, xe = Y.div`
   position: relative;
   width: auto;
   height: fit-content;
@@ -48,7 +48,7 @@ const me = O.div`
   outline: `${i.palette.grey[100]} solid 2px`
 } : {}}
   }
-`, A = O.div`
+`, _ = Y.div`
   height: 54px;
   display: flex;
   align-items: center;
@@ -60,7 +60,7 @@ const me = O.div`
   theme: {
     palette: { grey: u },
     typography: { h2M: i },
-    spacing: { content: c }
+    spacing: { content: l }
   }
 }) => ({
   fontSize: i.size,
@@ -68,14 +68,14 @@ const me = O.div`
   lineHeight: i.lineHeight,
   letterSpacing: i.letterSpacing,
   color: u[100],
-  padding: c(3)
+  padding: l(3)
 })};
 
   ${({
   selected: u,
   theme: {
     palette: { grey: i },
-    typography: { h4M: c }
+    typography: { h4M: l }
   }
 }) => u ? {
   "&, & *": {
@@ -83,10 +83,10 @@ const me = O.div`
   }
 } : {
   color: `${i[30]} !important`,
-  fontSize: `${c.size} !important`,
-  fontWeight: `${c.weight} !important`,
-  lineHeight: `${c.lineHeight} !important`,
-  letterSpacing: `${c.letterSpacing} !important`,
+  fontSize: `${l.size} !important`,
+  fontWeight: `${l.weight} !important`,
+  lineHeight: `${l.lineHeight} !important`,
+  letterSpacing: `${l.letterSpacing} !important`,
   "& *": {
     color: `${i[30]} !important`
   }
@@ -105,180 +105,199 @@ const me = O.div`
   // px/ms 이 값 이하이면 '거의 멈춤'으로 판단
   BOUNDARY_PX: 4
   // px 아이템 경계(정렬 위치)와의 거리 허용치
-}), Te = ce(function({
+}), Ce = de(function({
   column: i,
-  value: c = i[0].value,
-  onChange: b,
-  renderLabel: N,
-  inlineCSS: F,
-  wrapperProps: p,
-  thumbProps: R,
-  ...$
-}, V) {
-  const k = i.findIndex((e) => e.value === c), S = C(k), s = C(null), [E, f] = g(k * 54), [y, D] = g(!1), [x, U] = g(0), [T, W] = g(0), [M, H] = g(!1), [q, w] = g([]), z = le(), l = C(null), { isHoverPossible: X } = fe(), { isKeyboardMode: j } = ge(), { hasFocus: K } = de({ ref: s }), B = (e) => {
-    if (e.length < 2) return 0;
-    const t = e[0], n = e[e.length - 1], r = n.time - t.time, a = n.y - t.y;
+  value: l = i[0].value,
+  onChange: T,
+  onSpin: I,
+  onSnap: m,
+  renderLabel: L,
+  inlineCSS: U,
+  wrapperProps: b,
+  thumbProps: W,
+  ...q
+}, z) {
+  const H = i.findIndex((t) => t.value === l), x = S(H), s = S(null), [P, p] = v(H * 54), [M, R] = v(!1), [w, X] = v(0), [C, j] = v(0), [A, O] = v(!1), [K, k] = v([]), B = fe(), h = S(null), N = S(H), { isHoverPossible: Z } = ye(), { isKeyboardMode: G } = Ie(), { hasFocus: J } = ve({ ref: s }), f = ge(
+    (t) => {
+      const e = Math.max(
+        0,
+        Math.min(Math.round(t / 54), i.length - 1)
+      );
+      e === N.current || !i[e] || (N.current = e, I == null || I(i[e].value));
+    },
+    [i, 54, I]
+  ), Q = (t) => {
+    if (t.length < 2) return 0;
+    const e = t[0], n = t[t.length - 1], r = n.time - e.time, a = n.y - e.y;
     if (r === 0) return 0;
     const o = a / r;
     return Math.max(
       -d.MAX_VELOCITY,
       Math.min(d.MAX_VELOCITY, o)
     );
-  }, Z = (e) => {
-    l.current && cancelAnimationFrame(l.current), H(!0);
-    let t = e * -1, n = E, r = performance.now();
-    const a = 54 * (i.length - 1), o = (h) => {
-      const I = h - r;
-      r = h, n += t * I, n < 0 ? (n = 0, t = 0) : n > a && (n = a, t = 0), t *= d.FRICTION, f(n), s.current && (s.current.children[0].scrollTop = n);
-      const P = Math.round(n / 54) * 54, ie = Math.abs(n - P), re = Math.abs(t) <= d.NEAR_ZERO_VELOCITY, oe = Math.abs(t) <= d.SNAP_VELOCITY_THRESHOLD, se = ie <= d.BOUNDARY_PX;
-      re && se || oe ? (H(!1), G(n)) : l.current = requestAnimationFrame(o);
+  }, ee = (t) => {
+    h.current && cancelAnimationFrame(h.current), O(!0);
+    let e = t * -1, n = P, r = performance.now();
+    const a = 54 * (i.length - 1), o = (c) => {
+      const g = c - r;
+      r = c, n += e * g, n < 0 ? (n = 0, e = 0) : n > a && (n = a, e = 0), e *= d.FRICTION, p(n), f(n), s.current && (s.current.children[0].scrollTop = n);
+      const D = Math.round(n / 54) * 54, ae = Math.abs(n - D), ce = Math.abs(e) <= d.NEAR_ZERO_VELOCITY, le = Math.abs(e) <= d.SNAP_VELOCITY_THRESHOLD, he = ae <= d.BOUNDARY_PX;
+      ce && he || le ? (O(!1), te(n)) : h.current = requestAnimationFrame(o);
     };
-    l.current = requestAnimationFrame(o);
-  }, G = (e) => {
-    l.current && cancelAnimationFrame(l.current);
-    const t = Math.max(0, Math.min(Math.round(e / 54), i.length - 1)), n = t * 54;
-    S.current = t;
+    h.current = requestAnimationFrame(o);
+  }, te = (t) => {
+    h.current && cancelAnimationFrame(h.current);
+    const e = Math.max(0, Math.min(Math.round(t / 54), i.length - 1)), n = e * 54;
+    x.current = e;
     const r = (a) => {
       if (Math.abs(a - n) < 1)
-        f(n), s.current && (s.current.children[0].scrollTop = n), i[t] && b(i[t].value);
+        p(n), f(n), s.current && (s.current.children[0].scrollTop = n), i[e] && (T(i[e].value), m == null || m(i[e].value));
       else {
         const o = a + (n - a) * d.SNAP_FORCE;
-        f(o), s.current && (s.current.children[0].scrollTop = o), l.current = requestAnimationFrame(() => r(o));
+        p(o), f(o), s.current && (s.current.children[0].scrollTop = o), h.current = requestAnimationFrame(() => r(o));
       }
     };
-    l.current = requestAnimationFrame(() => r(e));
-  }, _ = (e) => {
-    D(!0), W(e), U(E), H(!1), w([{ time: performance.now(), y: e }]);
-  }, J = (e) => {
-    if (!y || M) return;
-    const t = T - e;
-    let n = x + t;
+    h.current = requestAnimationFrame(() => r(t));
+  }, F = (t) => {
+    R(!0), j(t), X(P), O(!1), k([{ time: performance.now(), y: t }]);
+  }, ie = (t) => {
+    if (!M || A) return;
+    const e = C - t;
+    let n = w + e;
     const r = 54 * (i.length - 1);
-    n < 0 ? n = 0 : n > r && (n = r), f(n), s.current && (s.current.children[0].scrollTop = n);
+    n < 0 ? n = 0 : n > r && (n = r), p(n), f(n), s.current && (s.current.children[0].scrollTop = n);
     const a = performance.now();
-    w(
-      (o) => [...o, { time: a, y: e }].filter((h) => a - h.time <= 100)
+    k(
+      (o) => [...o, { time: a, y: t }].filter((c) => a - c.time <= 100)
     );
-  }, Q = (e) => {
+  }, ne = (t) => {
     var n, r;
-    e.stopPropagation();
-    let t = S.current;
-    e.key === "ArrowUp" ? (t += 1, t > i.length - 1 && (t = 0)) : e.key === "ArrowDown" ? (t -= 1, t < 0 && (t = i.length - 1)) : e.key === "PageUp" ? (t += 5, t > i.length - 1 && (t = 0)) : e.key === "PageDown" ? (t -= 5, t < 0 && (t = i.length - 1)) : e.key === "Home" ? t = 0 : e.key === "End" && (t = i.length - 1), b(i[t].value), S.current = t, (r = (n = s.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${S.current}"]`)) == null || r.focus();
-  }, ee = (e) => {
-    e.preventDefault(), e.stopPropagation(), _(e.clientY);
-  }, te = (e) => _(e.touches[0].clientY), ne = (e) => {
-    e.preventDefault(), e.stopPropagation(), J(e.clientY);
-  }, v = (e) => {
-    if (!y || (D(!1), !X && e.type === "mouseup")) return;
-    const t = B(q);
-    if (Math.abs(t) < d.MIN_VELOCITY) {
-      const r = e.target.closest("[data-index]");
+    t.stopPropagation();
+    let e = x.current;
+    t.key === "ArrowUp" ? (e += 1, e > i.length - 1 && (e = 0)) : t.key === "ArrowDown" ? (e -= 1, e < 0 && (e = i.length - 1)) : t.key === "PageUp" ? (e += 5, e > i.length - 1 && (e = 0)) : t.key === "PageDown" ? (e -= 5, e < 0 && (e = i.length - 1)) : t.key === "Home" ? e = 0 : t.key === "End" && (e = i.length - 1), T(i[e].value), x.current = e, (r = (n = s.current) == null ? void 0 : n.querySelector(`.chain-picker-item[data-index="${x.current}"]`)) == null || r.focus();
+  }, re = (t) => {
+    t.preventDefault(), t.stopPropagation(), F(t.clientY);
+  }, oe = (t) => F(t.touches[0].clientY), se = (t) => {
+    t.preventDefault(), t.stopPropagation(), ie(t.clientY);
+  }, E = (t) => {
+    if (!M || (R(!1), !Z && t.type === "mouseup")) return;
+    const e = Q(K);
+    if (Math.abs(e) < d.MIN_VELOCITY) {
+      const r = t.target.closest("[data-index]");
       if (r) {
         const a = Number(r.dataset.index);
         if (i[a] && s.current) {
-          const o = s.current.children[0];
-          o.scrollTo({
-            top: a * 54,
+          const o = s.current.children[0], c = a * 54;
+          f(c), o.scrollTo({
+            top: c,
             behavior: "smooth"
           });
-          const h = () => {
-            Math.abs(o.scrollTop - a * 54) < 1 && (b(i[a].value), o.removeEventListener("scroll", h));
+          const g = () => {
+            Math.abs(o.scrollTop - c) < 1 && (T(i[a].value), m == null || m(i[a].value), o.removeEventListener("scroll", g));
           };
-          o.addEventListener("scroll", h);
+          o.addEventListener("scroll", g);
         }
       }
       return;
     }
-    Z(t);
+    ee(e);
   };
-  return L(() => {
-    const t = i.findIndex((n) => n.value === c) * 54;
-    f(t), s.current && (s.current.children[0].scrollTop = t);
-  }, [c, i, 54]), L(() => () => {
-    l.current && cancelAnimationFrame(l.current);
-  }, []), he(() => {
-    const e = s.current;
-    if (!e) return;
-    const t = (n) => {
+  return V(() => {
+    const t = i.findIndex((n) => n.value === l), e = t * 54;
+    p(e), N.current = t, s.current && (s.current.children[0].scrollTop = e);
+  }, [l, i, 54]), V(() => () => {
+    h.current && cancelAnimationFrame(h.current);
+  }, []), me(() => {
+    const t = s.current;
+    if (!t) return;
+    const e = (n) => {
       const r = n;
-      if (r.preventDefault(), r.stopPropagation(), !y || M) return;
-      const a = T - r.touches[0].clientY;
-      let o = x + a;
-      const h = 54 * (i.length - 1);
-      o < 0 ? o = 0 : o > h && (o = h), f(o), s.current && (s.current.children[0].scrollTop = o);
-      const I = performance.now();
-      w(
-        (Y) => [...Y, { time: I, y: r.touches[0].clientY }].filter(
-          (P) => I - P.time <= 100
+      if (r.preventDefault(), r.stopPropagation(), !M || A) return;
+      const a = C - r.touches[0].clientY;
+      let o = w + a;
+      const c = 54 * (i.length - 1);
+      o < 0 ? o = 0 : o > c && (o = c), p(o), f(o), s.current && (s.current.children[0].scrollTop = o);
+      const g = performance.now();
+      k(
+        ($) => [...$, { time: g, y: r.touches[0].clientY }].filter(
+          (D) => g - D.time <= 100
         )
       );
     };
-    return e.addEventListener("touchmove", t, { passive: !1 }), () => {
-      e.removeEventListener("touchmove", t);
+    return t.addEventListener("touchmove", e, { passive: !1 }), () => {
+      t.removeEventListener("touchmove", e);
     };
-  }, [y, M, T, x, 54, i.length]), /* @__PURE__ */ m(
-    pe,
+  }, [
+    M,
+    A,
+    C,
+    w,
+    54,
+    i.length,
+    f
+  ]), /* @__PURE__ */ y(
+    xe,
     {
       ref: s,
-      ...p,
-      css: p == null ? void 0 : p.inlineCSS,
-      focusWithin: j && K,
-      children: /* @__PURE__ */ m(
-        me,
+      ...b,
+      css: b == null ? void 0 : b.inlineCSS,
+      focusWithin: G && J,
+      children: /* @__PURE__ */ y(
+        be,
         {
           role: "group",
-          ref: V,
-          css: F,
-          ...$,
-          onMouseDown: ee,
-          onMouseMove: ne,
-          onMouseUp: v,
-          onMouseLeave: v,
-          onTouchStart: te,
-          onTouchEnd: v,
-          onTouchCancel: v,
-          children: i.map((e, t) => {
-            const n = Math.round(E / 54), r = t === n;
-            return /* @__PURE__ */ ae(ue, { children: [
-              t === 0 && /* @__PURE__ */ m(
-                A,
+          ref: z,
+          css: U,
+          ...q,
+          onMouseDown: re,
+          onMouseMove: se,
+          onMouseUp: E,
+          onMouseLeave: E,
+          onTouchStart: oe,
+          onTouchEnd: E,
+          onTouchCancel: E,
+          children: i.map((t, e) => {
+            const n = Math.round(P / 54), r = e === n;
+            return /* @__PURE__ */ ue(pe, { children: [
+              e === 0 && /* @__PURE__ */ y(
+                _,
                 {
                   className: "chain-picker-item",
-                  "data-index": t - 1,
+                  "data-index": e - 1,
                   selected: !1,
                   distance: -1
                 }
               ),
-              /* @__PURE__ */ m(
-                A,
+              /* @__PURE__ */ y(
+                _,
                 {
                   className: "chain-picker-item",
-                  "data-index": t,
+                  "data-index": e,
                   "data-selected": r,
                   selected: r,
-                  distance: t - n,
+                  distance: e - n,
                   role: "spinbutton",
                   tabIndex: r ? 0 : -1,
                   "aria-hidden": r ? "false" : "true",
-                  "aria-valuenow": e.value,
-                  "aria-valuetext": e.ariaValueText ?? e.label,
+                  "aria-valuenow": t.value,
+                  "aria-valuetext": t.ariaValueText ?? t.label,
                   "aria-valuemin": i[0].value,
                   "aria-valuemax": i[i.length - 1].value,
-                  ...R,
-                  onKeyDown: Q,
-                  children: N ? N(e, r) : e.label
+                  ...W,
+                  onKeyDown: ne,
+                  children: L ? L(t, r) : t.label
                 }
               ),
-              t === i.length - 1 && /* @__PURE__ */ m(
-                A,
+              e === i.length - 1 && /* @__PURE__ */ y(
+                _,
                 {
                   className: "chain-picker-item",
-                  "data-index": t + 1,
+                  "data-index": e + 1,
                   selected: !1,
                   distance: i.length - n
                 }
               )
-            ] }, `${z}_${e.label}`);
+            ] }, `${B}_${t.label}`);
           })
         }
       )
@@ -286,5 +305,5 @@ const me = O.div`
   );
 });
 export {
-  Te as default
+  Ce as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dotss/ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "React UI components for Dotss",
   "type": "module",
   "main": "./index.cjs",