@kubit-ui-web/react-components 2.0.0-beta.54 → 2.0.0-beta.56

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @kubit-ui-web/react-components
 
+## 2.0.0-beta.56
+
+### Major Changes
+
+- Update to react 19 (#68)
+
+## 2.0.0-beta.55
+
+### Major Changes
+
+- Move files and improve cssTypes declaration
+
 ## 2.0.0-beta.54
 
 ### Major Changes

package/dist/cjs/components/carousel/hooks/useCarouselSwipe.js

@@ -1 +1 @@
-const e=require(`../../../lib/hooks/useScrollBlock/useScrollBlock.js`),t=require(`./utils/calc.utils.js`),n=require(`./utils/constants.js`);let r=require(`react`);exports.useCarouselSwipe=({allowShiftRef:i,centerExtremesWhenExtraPadding:a,changePage:o,circular:s,contentContainerRef:c,currentPageRef:l,disabled:u=!1,elements:d,extraPadding:f,numElementsPerPageRef:p,numPagesRef:m,viewerContainerRef:h})=>{let g=(0,r.useRef)(!1),_=(0,r.useRef)(!1),v=(0,r.useRef)(!1),y=(0,r.useRef)(),b=(0,r.useRef)(0),x=(0,r.useRef)(0),S=(0,r.useRef)(0),C=(0,r.useRef)(0),w=(0,r.useCallback)(()=>{i.current&&(s||l.current!==m.current-1)&&o({newPage:l.current+1})},[s,o]),T=(0,r.useCallback)(()=>{i.current&&(s||l.current!==0)&&o({newPage:l.current-1})},[s,o]),{allowScroll:E,blockScroll:D}=e.useScrollBlock(),O=(0,r.useCallback)(e=>{let t=c.current;!t||m.current<=1||(y.current=parseFloat(t.style.left||`0`),e.type===`touchstart`?(b.current=e.touches[0].clientX,S.current=e.touches[0].clientX,C.current=e.touches[0].clientY):(b.current=e.clientX,S.current=e.clientX,C.current=e.clientY),g.current=!0)},[]),k=(0,r.useCallback)(e=>{let r=c.current;if(!r||!g.current||!p?.current||m.current<=1)return;let i,o;e.type===`touchmove`?(x.current=b.current-e.touches[0].clientX,b.current=e.touches[0].clientX,i=e.touches[0].clientX-S.current,o=e.touches[0].clientY-C.current):(x.current=b.current-e.clientX,b.current=e.clientX,i=e.clientX-S.current,o=e.clientY-C.current);let u=parseFloat(r.style.left||`0`)-x.current;if(!_.current&&!v.current&&(Math.abs(i)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING?(_.current=!0,D()):Math.abs(o)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING&&(v.current=!0)),_.current)if(s&&d.length>p.current)r.style.left=`${u}px`;else{let e=t.default.calcXDistanceBetween2Elements(r.firstChild,r.children[r.children.length-p.current]);if(a)u-f<0&&-u<e-f&&(r.style.left=`${u}px`);else{let t=s?f:0;!s&&f&&l.current===m.current-1&&(t=f*2),u-t<0&&-u<e-t&&(r.style.left=`${u}px`)}}},[D,a,s,d,f]),A=(0,r.useCallback)(()=>{let e=c.current;if(v.current=!1,_.current&&E(),_.current=!1,!e||!g.current||y.current===void 0||m.current<=1)return;g.current=!1;let t=parseFloat(e.style.left||`0`);t-y.current<-n.default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?w():t-y.current>n.default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?T():e.style.left=`${y.current}px`},[E,w,T]);(0,r.useEffect)(()=>{if(u)return;let e=h.current,t={passive:!0};return e?.addEventListener(`touchstart`,O,t),e?.addEventListener(`touchend`,A,t),e?.addEventListener(`touchmove`,k,t),e?.addEventListener(`mousedown`,O,t),e?.addEventListener(`mouseup`,A,t),e?.addEventListener(`mousemove`,k,t),e?.addEventListener(`mouseleave`,A,t),()=>{e?.removeEventListener(`touchstart`,O,t),e?.removeEventListener(`touchend`,A,t),e?.removeEventListener(`touchmove`,k,t),e?.removeEventListener(`mousedown`,O,t),e?.removeEventListener(`mouseup`,A,t),e?.removeEventListener(`mousemove`,k,t),e?.removeEventListener(`mouseleave`,A,t)}},[O,A,k,u])};
+const e=require(`../../../lib/hooks/useScrollBlock/useScrollBlock.js`),t=require(`./utils/calc.utils.js`),n=require(`./utils/constants.js`);let r=require(`react`);exports.useCarouselSwipe=({allowShiftRef:i,centerExtremesWhenExtraPadding:a,changePage:o,circular:s,contentContainerRef:c,currentPageRef:l,disabled:u=!1,elements:d,extraPadding:f,numElementsPerPageRef:p,numPagesRef:m,viewerContainerRef:h})=>{let g=(0,r.useRef)(!1),_=(0,r.useRef)(!1),v=(0,r.useRef)(!1),y=(0,r.useRef)(void 0),b=(0,r.useRef)(0),x=(0,r.useRef)(0),S=(0,r.useRef)(0),C=(0,r.useRef)(0),w=(0,r.useCallback)(()=>{i.current&&(s||l.current!==m.current-1)&&o({newPage:l.current+1})},[s,o]),T=(0,r.useCallback)(()=>{i.current&&(s||l.current!==0)&&o({newPage:l.current-1})},[s,o]),{allowScroll:E,blockScroll:D}=e.useScrollBlock(),O=(0,r.useCallback)(e=>{let t=c.current;!t||m.current<=1||(y.current=parseFloat(t.style.left||`0`),e.type===`touchstart`?(b.current=e.touches[0].clientX,S.current=e.touches[0].clientX,C.current=e.touches[0].clientY):(b.current=e.clientX,S.current=e.clientX,C.current=e.clientY),g.current=!0)},[]),k=(0,r.useCallback)(e=>{let r=c.current;if(!r||!g.current||!p?.current||m.current<=1)return;let i,o;e.type===`touchmove`?(x.current=b.current-e.touches[0].clientX,b.current=e.touches[0].clientX,i=e.touches[0].clientX-S.current,o=e.touches[0].clientY-C.current):(x.current=b.current-e.clientX,b.current=e.clientX,i=e.clientX-S.current,o=e.clientY-C.current);let u=parseFloat(r.style.left||`0`)-x.current;if(!_.current&&!v.current&&(Math.abs(i)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING?(_.current=!0,D()):Math.abs(o)>n.default.THRESHOLD_TO_DECIDE_IF_ALLOW_DRAGGING&&(v.current=!0)),_.current)if(s&&d.length>p.current)r.style.left=`${u}px`;else{let e=t.default.calcXDistanceBetween2Elements(r.firstChild,r.children[r.children.length-p.current]);if(a)u-f<0&&-u<e-f&&(r.style.left=`${u}px`);else{let t=s?f:0;!s&&f&&l.current===m.current-1&&(t=f*2),u-t<0&&-u<e-t&&(r.style.left=`${u}px`)}}},[D,a,s,d,f]),A=(0,r.useCallback)(()=>{let e=c.current;if(v.current=!1,_.current&&E(),_.current=!1,!e||!g.current||y.current===void 0||m.current<=1)return;g.current=!1;let t=parseFloat(e.style.left||`0`);t-y.current<-n.default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?w():t-y.current>n.default.THRESHOLD_TO_DECIDE_IF_SWIPE_ON_DRAG_ENDS?T():e.style.left=`${y.current}px`},[E,w,T]);(0,r.useEffect)(()=>{if(u)return;let e=h.current,t={passive:!0};return e?.addEventListener(`touchstart`,O,t),e?.addEventListener(`touchend`,A,t),e?.addEventListener(`touchmove`,k,t),e?.addEventListener(`mousedown`,O,t),e?.addEventListener(`mouseup`,A,t),e?.addEventListener(`mousemove`,k,t),e?.addEventListener(`mouseleave`,A,t),()=>{e?.removeEventListener(`touchstart`,O,t),e?.removeEventListener(`touchend`,A,t),e?.removeEventListener(`touchmove`,k,t),e?.removeEventListener(`mousedown`,O,t),e?.removeEventListener(`mouseup`,A,t),e?.removeEventListener(`mousemove`,k,t),e?.removeEventListener(`mouseleave`,A,t)}},[O,A,k,u])};

package/dist/cjs/components/inputSignature/hook/useDraw.js

@@ -1 +1 @@
-let e=require(`react`);function t(e,t){if(e.width!==t.width||e.height!==t.height)return!1;for(let n=0;n<e.data.length;n++)if(e.data[n]!==t.data[n])return!1;return!0}exports.useDraw=n=>{let r=(0,e.useRef)(null),i=(0,e.useRef)(),a=(0,e.useRef)(!1),o=(0,e.useRef)(!1),s=(0,e.useRef)({color:`black`,lineWidth:2}),c=(0,e.useRef)(null),l=()=>{r.current&&(o.current=!1,i.current.clearRect(0,0,r.current.width,r.current.height))},u=e=>{e&&(s.current.color=e.color,s.current.lineWidth=e.lineWidth)},d=e=>{let t,n;if(e.type===`touchstart`&&r.current){let{touches:i}=e,{clientX:a,clientY:o}=i[0],{left:s,top:c}=r.current.getBoundingClientRect();t=a-s,n=o-c}else t=e.offsetX,n=e.offsetY;c.current=i.current.getImageData(0,0,r.current?.width,r.current?.height),i.current.beginPath(),i.current.moveTo(t,n),a.current=!0},f=e=>{if(!a.current)return;let t,n;if(e.preventDefault(),e.type===`touchmove`&&r.current){let{touches:i}=e,{clientX:a,clientY:o}=i[0],{left:s,top:c}=r.current.getBoundingClientRect();t=a-s,n=o-c}else t=e.offsetX,n=e.offsetY;i.current.lineTo(t,n),i.current.stroke()},p=()=>{let e=i.current.getImageData(0,0,r.current?.width,r.current?.height);if(i.current.closePath(),a.current=!1,c.current&&!t(e,c.current)){let e=r.current?.toDataURL();n?.(e),o.current=!0}};return(0,e.useEffect)(()=>{if(r.current===null)return;let e=r.current;if(i.current=e?.getContext(`2d`,{willReadFrequently:!0}),i.current)return i.current.strokeStyle=s.current.color,i.current.lineWidth=s.current.lineWidth,i.current.lineCap=`round`,i.current.lineJoin=`round`,e?.addEventListener(`mousedown`,d),e?.addEventListener(`mousemove`,f),e?.addEventListener(`mouseup`,p),e?.addEventListener(`mouseleave`,p),e?.addEventListener(`touchstart`,d),e?.addEventListener(`touchmove`,f,{passive:!1}),e?.addEventListener(`touchend`,p),()=>{e?.removeEventListener(`mousedown`,d),e?.removeEventListener(`mousemove`,f),e?.removeEventListener(`mouseup`,p),e?.removeEventListener(`mouseleave`,p),e?.removeEventListener(`touchstart`,d),e?.removeEventListener(`touchmove`,f),e?.removeEventListener(`touchend`,p)}},[]),{canvasRef:r,filled:o.current,resetCanvas:l,setSignatureStyles:u}};
+let e=require(`react`);function t(e,t){if(e.width!==t.width||e.height!==t.height)return!1;for(let n=0;n<e.data.length;n++)if(e.data[n]!==t.data[n])return!1;return!0}exports.useDraw=n=>{let r=(0,e.useRef)(null),i=(0,e.useRef)(null),a=(0,e.useRef)(!1),o=(0,e.useRef)(!1),s=(0,e.useRef)({color:`black`,lineWidth:2}),c=(0,e.useRef)(null),l=()=>{r.current&&(o.current=!1,i.current.clearRect(0,0,r.current.width,r.current.height))},u=e=>{e&&(s.current.color=e.color,s.current.lineWidth=e.lineWidth)},d=e=>{let t,n;if(e.type===`touchstart`&&r.current){let{touches:i}=e,{clientX:a,clientY:o}=i[0],{left:s,top:c}=r.current.getBoundingClientRect();t=a-s,n=o-c}else t=e.offsetX,n=e.offsetY;c.current=i.current.getImageData(0,0,r.current?.width,r.current?.height),i.current.beginPath(),i.current.moveTo(t,n),a.current=!0},f=e=>{if(!a.current)return;let t,n;if(e.preventDefault(),e.type===`touchmove`&&r.current){let{touches:i}=e,{clientX:a,clientY:o}=i[0],{left:s,top:c}=r.current.getBoundingClientRect();t=a-s,n=o-c}else t=e.offsetX,n=e.offsetY;i.current.lineTo(t,n),i.current.stroke()},p=()=>{let e=i.current.getImageData(0,0,r.current?.width,r.current?.height);if(i.current.closePath(),a.current=!1,c.current&&!t(e,c.current)){let e=r.current?.toDataURL();n?.(e),o.current=!0}};return(0,e.useEffect)(()=>{if(r.current===null)return;let e=r.current;if(i.current=e?.getContext(`2d`,{willReadFrequently:!0}),i.current)return i.current.strokeStyle=s.current.color,i.current.lineWidth=s.current.lineWidth,i.current.lineCap=`round`,i.current.lineJoin=`round`,e?.addEventListener(`mousedown`,d),e?.addEventListener(`mousemove`,f),e?.addEventListener(`mouseup`,p),e?.addEventListener(`mouseleave`,p),e?.addEventListener(`touchstart`,d),e?.addEventListener(`touchmove`,f,{passive:!1}),e?.addEventListener(`touchend`,p),()=>{e?.removeEventListener(`mousedown`,d),e?.removeEventListener(`mousemove`,f),e?.removeEventListener(`mouseup`,p),e?.removeEventListener(`mouseleave`,p),e?.removeEventListener(`touchstart`,d),e?.removeEventListener(`touchmove`,f),e?.removeEventListener(`touchend`,p)}},[]),{canvasRef:r,filled:o.current,resetCanvas:l,setSignatureStyles:u}};

package/dist/cjs/components/option/option.js

@@ -1 +1 @@
-const e=require(`../../lib/provider/genericComponentsProvider/genericComponentsProvider.js`),t=require(`../../lib/hooks/useClassName/useClassName.js`),n=require(`./optionStandAlone.js`);let r=require(`react`),i=require(`react/jsx-runtime`);const a=(0,r.forwardRef)(({additionalClasses:a,focus:o,onBlur:s,onFocus:c,variant:l,...u},d)=>{let f=t.useClassName({additionalClassNames:a,component:`OPTION`,variant:l}),{LINK:p}=e.useGenericComponents(),m=(0,r.useRef)(),[h,g]=(0,r.useState)(!1),[_,v]=(0,r.useState)(!1);(0,r.useImperativeHandle)(d,()=>m.current,[]),(0,r.useEffect)(()=>{o&&m.current?.focus()},[o]);let y=e=>{c?.(e),v(!0)},b=e=>{s?.(e),v(!1)};return(0,i.jsx)(n.OptionStandAlone,{...u,ref:m,componentLink:p,cssClasses:f,focus:_,hover:h,onBlur:b,onFocus:y,onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1)})});exports.Option=a;
+const e=require(`../../lib/provider/genericComponentsProvider/genericComponentsProvider.js`),t=require(`../../lib/hooks/useClassName/useClassName.js`),n=require(`./optionStandAlone.js`);let r=require(`react`),i=require(`react/jsx-runtime`);const a=(0,r.forwardRef)(({additionalClasses:a,focus:o,onBlur:s,onFocus:c,variant:l,...u},d)=>{let f=t.useClassName({additionalClassNames:a,component:`OPTION`,variant:l}),{LINK:p}=e.useGenericComponents(),m=(0,r.useRef)(null),[h,g]=(0,r.useState)(!1),[_,v]=(0,r.useState)(!1);(0,r.useImperativeHandle)(d,()=>m.current,[]),(0,r.useEffect)(()=>{o&&m.current?.focus()},[o]);let y=e=>{c?.(e),v(!0)},b=e=>{s?.(e),v(!1)};return(0,i.jsx)(n.OptionStandAlone,{...u,ref:m,componentLink:p,cssClasses:f,focus:_,hover:h,onBlur:b,onFocus:y,onMouseEnter:()=>g(!0),onMouseLeave:()=>g(!1)})});exports.Option=a;

package/dist/cjs/components/slider/slider.js

@@ -1 +1 @@
-const e=require(`../../lib/hooks/useClassName/useClassName.js`),t=require(`./utils/accessibility.utils.js`),n=require(`./sliderStandAlone.js`),r=require(`./utils/slider.utils.js`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=50;const s=(0,i.forwardRef)(({additionalClasses:s,ariaLabel:c,ariaLabelBy:l,decrementButton:u,defaultValue:d,disabled:f=!1,incrementButton:p,initialStepOffset:m,label:h,leftHelperText:g,max:_=100,min:v=0,onChange:y,onDragEnd:b,onDragStart:x,range:S=!1,rightAriaLabel:C,rightAriaLabelBy:w,rightHelperText:T,rightThumbIcon:ee,rightTooltip:E,step:D=1,thumbExceedsTrack:O=!0,thumbIcon:k,tooltip:A,type:te=`discrete`,value:j,variant:M},N)=>{let P=e=>r.calcDefaultValue({initialStepOffset:m,max:_,min:v,range:S,step:D,value:e}),F=(0,i.useRef)(null),[I,L]=(0,i.useState)(P(j??d)),[R,z]=(0,i.useState)(!1),[B,V]=(0,i.useState)(!1),H=(0,i.useRef)(`left`),[U,W]=(0,i.useState)({max:100,min:0}),G=(0,i.useRef)();r.focusThumb({container:F.current,currentActivePointer:H.current,range:S});let K=(0,i.useCallback)(e=>{y&&(clearTimeout(G.current),G.current=setTimeout(()=>{y(e)},o))},[y]),q=e=>{if(!F.current||f)return;let t=r.calcScaleValue({initialStepOffset:m,max:_,min:v,step:D,value:r.calcValueByOffset({max:_,min:v,offset:r.calculateChange({container:F.current,event:e,offsetBoundaries:U}),offsetBoundaries:U,step:D})});L(e=>{let n=t;return S&&(n=r.calcNewRangeValue({activePointer:H,newValue:t,prevValue:e})),K(n),n})},J=e=>{if(f)return;let n=t.calcNewValueAfterKeyPress({activePointer:H.current,event:e,max:_,min:v,range:S,step:D,value:I});n!==void 0&&(L(n),K(n))},Y=e=>{let n=t.incrementValue({activePointer:H.current,max:_,range:S,step:D,value:I});n!==void 0&&(L(n),K(n)),p?.onClick?.(e)},X=e=>{let n=t.decrementValue({activePointer:H.current,min:v,range:S,step:D,value:I});n!==void 0&&(L(n),K(n)),u?.onClick?.(e)},Z=()=>{b?.(),V(!1),Q()},{scaleOffsets:ne,showScale:re}=r.getScale({initialStepOffset:m,max:_,min:v,step:D,type:te}),{offset:ie,offsetLeft:ae,offsetRight:oe}=r.getOffset({max:_,min:v,offsetBoundaries:U,range:S,value:I}),Q=()=>{window.removeEventListener(`mousemove`,q),window.removeEventListener(`mouseup`,Z),window.removeEventListener(`touchend`,Z)},se=e.useClassName({additionalClassNames:s,component:`SLIDER`,variant:M}),$=(0,i.useCallback)(()=>{if(O){W({max:100,min:0});return}if(!F.current)return;let e=F.current.querySelector(`[role="slider"]`);if(!e)return;let t=F.current.getBoundingClientRect().width,n=e.getBoundingClientRect().width/t*100/2;W({max:100-n,min:n})},[O]);(0,i.useEffect)(()=>($(),O||window.addEventListener(`resize`,$),()=>{O||window.removeEventListener(`resize`,$)}),[O]),(0,i.useEffect)(()=>{j!==void 0&&(S&&!r.equalsRangeValues({values1:j,values2:I})||!S&&j!==I)&&L(P(j))},[j]),(0,i.useEffect)(()=>Q,[]);let ce=e=>{x?.(),V(!0),q(e),window.addEventListener(`mousemove`,q),window.addEventListener(`mouseup`,Z)},le=e=>{x?.(),V(!0),q(e),window.addEventListener(`touchend`,Z)};return(0,a.jsx)(n.SliderStandAlone,{ref:N,activePointer:H,ariaLabel:c,ariaLabelBy:l,containerRef:F,cssClasses:se,decrementButton:{...u,disabled:f||u?.disabled,onClick:X},disabled:f,hover:R,incrementButton:{...p,disabled:f||p?.disabled,onClick:Y},label:h,leftHelperText:g,max:_,min:v,offset:ie,offsetLeft:ae,offsetRight:oe,pressed:B,range:S,rightAriaLabel:C,rightAriaLabelBy:w,rightHelperText:T,rightThumbIcon:ee,rightTooltip:E,scaleOffsets:ne,setHover:z,showScale:re,step:D,thumbIcon:k,tooltip:A,value:I,onChange:q,onKeyPress:J,onMouseDown:ce,onTouchStart:le})});exports.Slider=s;
+const e=require(`../../lib/hooks/useClassName/useClassName.js`),t=require(`./utils/accessibility.utils.js`),n=require(`./sliderStandAlone.js`),r=require(`./utils/slider.utils.js`);let i=require(`react`),a=require(`react/jsx-runtime`);var o=50;const s=(0,i.forwardRef)(({additionalClasses:s,ariaLabel:c,ariaLabelBy:l,decrementButton:u,defaultValue:d,disabled:f=!1,incrementButton:p,initialStepOffset:m,label:h,leftHelperText:g,max:_=100,min:v=0,onChange:y,onDragEnd:b,onDragStart:x,range:S=!1,rightAriaLabel:C,rightAriaLabelBy:w,rightHelperText:T,rightThumbIcon:ee,rightTooltip:E,step:D=1,thumbExceedsTrack:O=!0,thumbIcon:k,tooltip:A,type:te=`discrete`,value:j,variant:M},N)=>{let P=e=>r.calcDefaultValue({initialStepOffset:m,max:_,min:v,range:S,step:D,value:e}),F=(0,i.useRef)(null),[I,L]=(0,i.useState)(P(j??d)),[R,z]=(0,i.useState)(!1),[B,V]=(0,i.useState)(!1),H=(0,i.useRef)(`left`),[U,W]=(0,i.useState)({max:100,min:0}),G=(0,i.useRef)(void 0);r.focusThumb({container:F.current,currentActivePointer:H.current,range:S});let K=(0,i.useCallback)(e=>{y&&(clearTimeout(G.current),G.current=setTimeout(()=>{y(e)},o))},[y]),q=e=>{if(!F.current||f)return;let t=r.calcScaleValue({initialStepOffset:m,max:_,min:v,step:D,value:r.calcValueByOffset({max:_,min:v,offset:r.calculateChange({container:F.current,event:e,offsetBoundaries:U}),offsetBoundaries:U,step:D})});L(e=>{let n=t;return S&&(n=r.calcNewRangeValue({activePointer:H,newValue:t,prevValue:e})),K(n),n})},J=e=>{if(f)return;let n=t.calcNewValueAfterKeyPress({activePointer:H.current,event:e,max:_,min:v,range:S,step:D,value:I});n!==void 0&&(L(n),K(n))},Y=e=>{let n=t.incrementValue({activePointer:H.current,max:_,range:S,step:D,value:I});n!==void 0&&(L(n),K(n)),p?.onClick?.(e)},X=e=>{let n=t.decrementValue({activePointer:H.current,min:v,range:S,step:D,value:I});n!==void 0&&(L(n),K(n)),u?.onClick?.(e)},Z=()=>{b?.(),V(!1),Q()},{scaleOffsets:ne,showScale:re}=r.getScale({initialStepOffset:m,max:_,min:v,step:D,type:te}),{offset:ie,offsetLeft:ae,offsetRight:oe}=r.getOffset({max:_,min:v,offsetBoundaries:U,range:S,value:I}),Q=()=>{window.removeEventListener(`mousemove`,q),window.removeEventListener(`mouseup`,Z),window.removeEventListener(`touchend`,Z)},se=e.useClassName({additionalClassNames:s,component:`SLIDER`,variant:M}),$=(0,i.useCallback)(()=>{if(O){W({max:100,min:0});return}if(!F.current)return;let e=F.current.querySelector(`[role="slider"]`);if(!e)return;let t=F.current.getBoundingClientRect().width,n=e.getBoundingClientRect().width/t*100/2;W({max:100-n,min:n})},[O]);(0,i.useEffect)(()=>($(),O||window.addEventListener(`resize`,$),()=>{O||window.removeEventListener(`resize`,$)}),[O]),(0,i.useEffect)(()=>{j!==void 0&&(S&&!r.equalsRangeValues({values1:j,values2:I})||!S&&j!==I)&&L(P(j))},[j]),(0,i.useEffect)(()=>Q,[]);let ce=e=>{x?.(),V(!0),q(e),window.addEventListener(`mousemove`,q),window.addEventListener(`mouseup`,Z)},le=e=>{x?.(),V(!0),q(e),window.addEventListener(`touchend`,Z)};return(0,a.jsx)(n.SliderStandAlone,{ref:N,activePointer:H,ariaLabel:c,ariaLabelBy:l,containerRef:F,cssClasses:se,decrementButton:{...u,disabled:f||u?.disabled,onClick:X},disabled:f,hover:R,incrementButton:{...p,disabled:f||p?.disabled,onClick:Y},label:h,leftHelperText:g,max:_,min:v,offset:ie,offsetLeft:ae,offsetRight:oe,pressed:B,range:S,rightAriaLabel:C,rightAriaLabelBy:w,rightHelperText:T,rightThumbIcon:ee,rightTooltip:E,scaleOffsets:ne,setHover:z,showScale:re,step:D,thumbIcon:k,tooltip:A,value:I,onChange:q,onKeyPress:J,onMouseDown:ce,onTouchStart:le})});exports.Slider=s;

package/dist/cjs/lib/hooks/useContentVisibility/useContentVisibility.js

@@ -1 +1 @@
-const e=require(`./utils/contentVisibility.js`);let t=require(`react`);exports.useContentVisibility=({minVisibleHeight:n=100,onContentInvisible:r,onContentVisible:i})=>{let a=(0,t.useRef)(null),o=(0,t.useRef)(null),s=(0,t.useRef)(),c=(0,t.useRef)(),l=(0,t.useRef)(void 0),u=(0,t.useCallback)(()=>{let e=a.current,t=o.current;!e||!t||(i?i():(e.style.overflowY=``,t.style.overflowY=``))},[i]),d=(0,t.useCallback)(()=>{let e=a.current,t=o.current;!e||!t||(r?r():(e.style.overflowY=`auto`,t.style.overflowY=`visible`))},[r]);return{handleContentVisibility:(0,t.useCallback)(({container:t,content:r})=>{if(a.current=t,o.current=r,t&&r){let i=()=>{let i=e.isContentVisibleEnough({container:t,content:r,minVisibleHeight:n});i!==l.current&&(i?u():d()),l.current=i};i(),s.current=new ResizeObserver(()=>{i()}),c.current=new ResizeObserver(()=>{i()}),s.current.observe(r),s.current.observe(t)}else s.current?.disconnect(),c.current?.disconnect()},[n,u,d])}};
+const e=require(`./utils/contentVisibility.js`);let t=require(`react`);exports.useContentVisibility=({minVisibleHeight:n=100,onContentInvisible:r,onContentVisible:i})=>{let a=(0,t.useRef)(null),o=(0,t.useRef)(null),s=(0,t.useRef)(void 0),c=(0,t.useRef)(void 0),l=(0,t.useRef)(void 0),u=(0,t.useCallback)(()=>{let e=a.current,t=o.current;!e||!t||(i?i():(e.style.overflowY=``,t.style.overflowY=``))},[i]),d=(0,t.useCallback)(()=>{let e=a.current,t=o.current;!e||!t||(r?r():(e.style.overflowY=`auto`,t.style.overflowY=`visible`))},[r]);return{handleContentVisibility:(0,t.useCallback)(({container:t,content:r})=>{if(a.current=t,o.current=r,t&&r){let i=()=>{let i=e.isContentVisibleEnough({container:t,content:r,minVisibleHeight:n});i!==l.current&&(i?u():d()),l.current=i};i(),s.current=new ResizeObserver(()=>{i()}),c.current=new ResizeObserver(()=>{i()}),s.current.observe(r),s.current.observe(t)}else s.current?.disconnect(),c.current?.disconnect()},[n,u,d])}};

package/dist/cjs/lib/hooks/useScrollDetection/useScrollDetection.js

@@ -1 +1 @@
-const e=require(`../../utils/scroll/hasScroll.js`);let t=require(`react`);exports.useScrollDetection=({autoFocus:n=!1}={})=>{let[r,i]=(0,t.useState)(!1),a=(0,t.useRef)(),o=(0,t.useRef)(!1);return{handleScrollDetection:(0,t.useCallback)(t=>{if(t){let r=t=>{let r=e.hasScroll(t);i(r),n&&r&&!o.current&&(t.focus(),o.current=!0)};r(t),a.current=new ResizeObserver(()=>{r(t)}),a.current.observe(t)}else a.current?.disconnect()},[n]),hasScroll:r}};
+const e=require(`../../utils/scroll/hasScroll.js`);let t=require(`react`);exports.useScrollDetection=({autoFocus:n=!1}={})=>{let[r,i]=(0,t.useState)(!1),a=(0,t.useRef)(void 0),o=(0,t.useRef)(!1);return{handleScrollDetection:(0,t.useCallback)(t=>{if(t){let r=t=>{let r=e.hasScroll(t);i(r),n&&r&&!o.current&&(t.focus(),o.current=!0)};r(t),a.current=new ResizeObserver(()=>{r(t)}),a.current.observe(t)}else a.current?.disconnect()},[n]),hasScroll:r}};

package/dist/esm/components/carousel/hooks/useCarouselSwipe.js

@@ -3,7 +3,7 @@ import calc_utils_default from "./utils/calc.utils.js";
 import constants_default from "./utils/constants.js";
 import { useCallback, useEffect, useRef } from "react";
 const useCarouselSwipe = ({ allowShiftRef: a, centerExtremesWhenExtraPadding: o, changePage: s, circular: c, contentContainerRef: l, currentPageRef: u, disabled: d = !1, elements: f, extraPadding: p, numElementsPerPageRef: m, numPagesRef: h, viewerContainerRef: g }) => {
-	let _ = useRef(!1), v = useRef(!1), y = useRef(!1), b = useRef(), x = useRef(0), S = useRef(0), C = useRef(0), w = useRef(0), T = useCallback(() => {
+	let _ = useRef(!1), v = useRef(!1), y = useRef(!1), b = useRef(void 0), x = useRef(0), S = useRef(0), C = useRef(0), w = useRef(0), T = useCallback(() => {
 		a.current && (c || u.current !== h.current - 1) && s({ newPage: u.current + 1 });
 	}, [c, s]), E = useCallback(() => {
 		a.current && (c || u.current !== 0) && s({ newPage: u.current - 1 });

package/dist/esm/components/inputSignature/hook/useDraw.js

@@ -5,7 +5,7 @@ function isImageDataEqual(e, t) {
 	return !0;
 }
 const useDraw = (r) => {
-	let i = useRef(null), a = useRef(), o = useRef(!1), s = useRef(!1), c = useRef({
+	let i = useRef(null), a = useRef(null), o = useRef(!1), s = useRef(!1), c = useRef({
 		color: "black",
 		lineWidth: 2
 	}), l = useRef(null), u = () => {

package/dist/esm/components/option/option.js

@@ -8,7 +8,7 @@ const Option = forwardRef(({ additionalClasses: t, focus: n, onBlur: r, onFocus:
 		additionalClassNames: t,
 		component: "OPTION",
 		variant: a
-	}), { LINK: l } = useGenericComponents(), u = useRef(), [d, f] = useState(!1), [p, m] = useState(!1);
+	}), { LINK: l } = useGenericComponents(), u = useRef(null), [d, f] = useState(!1), [p, m] = useState(!1);
 	useImperativeHandle(s, () => u.current, []), useEffect(() => {
 		n && u.current?.focus();
 	}, [n]);

package/dist/esm/components/slider/slider.js

@@ -16,7 +16,7 @@ const Slider = forwardRef(({ additionalClasses: r, ariaLabel: i, ariaLabelBy: a,
 	}), j = useRef(null), [M, N] = useState(A(D ?? s)), [P, F] = useState(!1), [I, L] = useState(!1), R = useRef("left"), [z, B] = useState({
 		max: 100,
 		min: 0
-	}), V = useRef();
+	}), V = useRef(void 0);
 	focusThumb({
 		container: j.current,
 		currentActivePointer: R.current,

package/dist/esm/lib/hooks/useContentVisibility/useContentVisibility.js

@@ -1,7 +1,7 @@
 import { isContentVisibleEnough } from "./utils/contentVisibility.js";
 import { useCallback, useRef } from "react";
 const useContentVisibility = ({ minVisibleHeight: r = 100, onContentInvisible: i, onContentVisible: a }) => {
-	let o = useRef(null), s = useRef(null), c = useRef(), l = useRef(), u = useRef(void 0), d = useCallback(() => {
+	let o = useRef(null), s = useRef(null), c = useRef(void 0), l = useRef(void 0), u = useRef(void 0), d = useCallback(() => {
 		let e = o.current, t = s.current;
 		!e || !t || (a ? a() : (e.style.overflowY = "", t.style.overflowY = ""));
 	}, [a]), f = useCallback(() => {

package/dist/esm/lib/hooks/useScrollDetection/useScrollDetection.js

@@ -1,7 +1,7 @@
 import { hasScroll } from "../../utils/scroll/hasScroll.js";
 import { useCallback, useRef, useState } from "react";
 const useScrollDetection = ({ autoFocus: n = !1 } = {}) => {
-	let [r, i] = useState(!1), a = useRef(), o = useRef(!1);
+	let [r, i] = useState(!1), a = useRef(void 0), o = useRef(!1);
 	return {
 		handleScrollDetection: useCallback((e) => {
 			if (e) {

package/dist/types/index.d.ts

@@ -2562,8 +2562,8 @@ export declare interface ICarousel extends Omit<ICarouselStandAlone, 'cssClasses
 
 declare interface ICarouselStandAlone extends DataAttributes {
     cssClasses?: CarouselCssClasses;
-    viewerContainerRef: React.RefObject<HTMLDivElement>;
-    contentContainerRef: React.RefObject<HTMLDivElement>;
+    viewerContainerRef: React.RefObject<HTMLDivElement | null>;
+    contentContainerRef: React.RefObject<HTMLDivElement | null>;
     elements: JSX.Element[];
     screenReaderOnly?: CarouselScreenReaderOnlyType;
     allowModifySliceWidth?: boolean;
@@ -2951,7 +2951,7 @@ export declare interface InputSignatureLineStyles {
  */
 export declare interface InputSignatureStandAloneProps extends DataAttributes {
     state: InputSignatureState;
-    canvasRef: React.RefObject<HTMLCanvasElement>;
+    canvasRef: React.RefObject<HTMLCanvasElement | null>;
     placeholder: CommonTextProps;
     errorText?: CommonTextProps;
     onClickContainer: (e: React.MouseEvent<HTMLDivElement>) => void;
@@ -4306,13 +4306,13 @@ export declare interface SelectStandAloneProps extends DataAttributes {
     listOptions: SelectListOptionsProps;
     optionSelected?: string;
     onOptionClick: (value: string) => void;
-    listOptionsRef: RefObject<HTMLDivElement>;
+    listOptionsRef: RefObject<HTMLDivElement | null>;
     closePopoverOnScroll?: boolean;
     openAndCloseOnHover?: boolean;
     url?: string;
     urlTarget?: HTMLAttributeAnchorTarget;
     component: 'button' | GenericLinkType;
-    buttonOrLinkRef?: RefObject<HTMLButtonElement>;
+    buttonOrLinkRef?: RefObject<HTMLButtonElement | null>;
     onFocus?: FocusEventHandler<HTMLDivElement>;
     onBlur?: FocusEventHandler<HTMLDivElement>;
     onKeyDown?: KeyboardEventHandler<HTMLDivElement>;
@@ -4513,7 +4513,7 @@ export declare interface SliderStandAloneProps extends DataAttributes {
     hover: boolean;
     pressed: boolean;
     activePointer: React.MutableRefObject<string>;
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     onMouseDown: React.MouseEventHandler<HTMLDivElement>;
     onChange: (event: MouseEvent | React.TouchEvent | React.MouseEvent) => void;
     onTouchStart: React.TouchEventHandler<HTMLDivElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kubit-ui-web/react-components",
-  "version": "2.0.0-beta.54",
+  "version": "2.0.0-beta.56",
   "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience",
   "author": {
     "name": "Kubit",
@@ -138,8 +138,8 @@
     }
   },
   "peerDependencies": {
-    "react": ">=17.0.0 || >=18.3.1",
-    "react-dom": ">=17.0.0 || >=18.3.1"
+    "react": "^18.3.0 || ^19.0.0",
+    "react-dom": "^18.3.0 || ^19.0.0"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.7.5"
@@ -151,8 +151,8 @@
     "@testing-library/user-event": "^14.6.1",
     "@trivago/prettier-plugin-sort-imports": "^6.0.2",
     "@types/node": "^25.2.3",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
     "@types/testing-library__jest-dom": "^6.0.0",
     "@vitejs/plugin-react": "^5.1.4",
     "@vitest/coverage-v8": "^4.0.18",
@@ -164,15 +164,15 @@
     "html-validate": "^10.7.0",
     "jsdom": "^28.0.0",
     "prettier": "^3.8.1",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.55.0",
     "vite": "8.0.0-beta.10",
     "vite-plugin-dts": "^4.5.4",
     "vitest": "^4.0.18",
     "vitest-axe": "^0.1.0",
-    "@kubit-ui-web/design-system": "2.0.0-beta.13"
+    "@kubit-ui-web/design-system": "2.0.0-beta.15"
   },
   "publishConfig": {
     "access": "public",