@kimdw-rtk/ui 0.1.15 → 0.1.16

package/dist/components/Range/Range.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Range.css.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA8BhB,CAAC;AAEH,eAAO,MAAM,KAAK,QA2ChB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,GAAG,QAWd,CAAC"}
+{"version":3,"file":"Range.css.d.ts","sourceRoot":"","sources":["../../../src/components/Range/Range.css.ts"],"names":[],"mappings":"AAkCA,eAAO,MAAM,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BhB,CAAC;AAEH,eAAO,MAAM,KAAK,QA4ChB,CAAC;AAEH,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,GAAG,QAWd,CAAC"}

package/dist/components/Range/Range.css.ts.vanilla.css

@@ -95,6 +95,7 @@
     width: 100%;
     height: 2em;
     user-select: none;
+    touch-action: none;
   }
   .Range_styleWithLayer__biyxwow {
     font-size: 0.75em;
@@ -116,6 +117,7 @@
     background-color: rgb(var(--backgroundVar__biyxwo0));
     transform: translate(-50%, -50%);
     cursor: pointer;
+    touch-action: none;
   }
   .Range_styleWithLayer__biyxwo1x::before {
     content: "";

package/dist/components/ScrollArea/ScrollArea.cjs

@@ -4,16 +4,16 @@
 var jsxRuntime = require('react/jsx-runtime');
 var react = require('react');
 var utils = require('@kimdw-rtk/utils');
+var vanillaExtractDynamic_esm = require('../../node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.cjs');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');
 var index = require('../../hooks/useMouseScroll/index.cjs');
 var ScrollArea_css = require('./ScrollArea.css.vanilla.cjs');
+var spacing = require('../../tokens/semantic/spacing.cjs');
 var sx = require('../../styles/sx.cjs');
 
-const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+const ScrollArea = react.forwardRef(({ children, className, innerPadding = 'lg', sx: propSx, style, ...props }, ref) => {
     const scrollAreaRef = react.useRef(null);
     const targetRef = utils.useCombinedRefs(ref, scrollAreaRef);
-    const [hasLeftSpace, setHasLeftSpace] = react.useState(false);
-    const [hasRightSpace, setHasRightSpace] = react.useState(true);
     index.useMouseScroll(scrollAreaRef);
     react.useEffect(() => {
         const element = scrollAreaRef.current;
@@ -28,20 +28,15 @@ const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props
             }
             e.preventDefault();
         };
-        const handleScroll = () => {
-            setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.ceil(element.scrollLeft + element.clientWidth) <
-                Math.floor(element.scrollWidth));
-        };
-        handleScroll();
-        element.addEventListener('scroll', handleScroll);
         element.addEventListener('wheel', handleWheel);
         return () => {
-            element.removeEventListener('scroll', handleScroll);
             element.removeEventListener('wheel', handleWheel);
         };
     }, []);
-    return (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), hasLeftSpace && hasRightSpace && ScrollArea_css.maskBoth, hasLeftSpace && ScrollArea_css.maskLeft, hasRightSpace && ScrollArea_css.maskRight), ...props, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
+    return (jsxRuntime.jsx("div", { ref: targetRef, className: clsx.clsx(ScrollArea_css.scrollArea, className, sx.sx(propSx), ScrollArea_css.mask), ...props, style: {
+            ...style,
+            ...vanillaExtractDynamic_esm.assignInlineVars({ [ScrollArea_css.paddingVar]: spacing.spacing[innerPadding] }),
+        }, children: jsxRuntime.jsx("div", { className: ScrollArea_css.wrapper, children: children }) }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/components/ScrollArea/ScrollArea.css.d.ts

@@ -1,6 +1,5 @@
+export declare const paddingVar: `var(--${string})`;
 export declare const scrollArea: string;
-export declare const maskLeft: string;
-export declare const maskRight: string;
-export declare const maskBoth: string;
+export declare const mask: string;
 export declare const wrapper: string;
 //# sourceMappingURL=ScrollArea.css.d.ts.map

package/dist/components/ScrollArea/ScrollArea.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,SAAS,QAKpB,CAAC;AAEH,eAAO,MAAM,QAAQ,QAMnB,CAAC;AAEH,eAAO,MAAM,OAAO,QAElB,CAAC"}
+{"version":3,"file":"ScrollArea.css.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAEtC,eAAO,MAAM,UAAU,QASrB,CAAC;AAEH,eAAO,MAAM,IAAI,QAMf,CAAC;AAEH,eAAO,MAAM,OAAO,QAGlB,CAAC"}

package/dist/components/ScrollArea/ScrollArea.css.ts.vanilla.css

@@ -1,33 +1,22 @@
 @layer components;
-.ScrollArea_maskLeft__m6lfro1 {
-  mask-image: linear-gradient(to left,
-black 0%,
-black calc(100% - 3rem),
-transparent 100%);
-}
-.ScrollArea_maskRight__m6lfro2 {
-  mask-image: linear-gradient(to right,
-black 0%,
-black calc(100% - 3rem),
-transparent 100%);
-}
-.ScrollArea_maskBoth__m6lfro3 {
+.ScrollArea_mask__m6lfro2 {
   mask-image: linear-gradient(to right,
 transparent 0%,
-black 3rem,
-black calc(100% - 3rem),
+black var(--paddingVar__m6lfro0),
+black calc(100% - var(--paddingVar__m6lfro0)),
 transparent 100%);
 }
-.ScrollArea_wrapper__m6lfro4 {
+.ScrollArea_wrapper__m6lfro3 {
   width: max-content;
+  padding-inline: var(--paddingVar__m6lfro0);
 }
 @layer components {
-  .ScrollArea_styleWithLayer__m6lfro0 {
+  .ScrollArea_styleWithLayer__m6lfro1 {
     width: 100%;
     overflow-x: scroll;
     user-select: none;
   }
-  .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
+  .ScrollArea_styleWithLayer__m6lfro1::-webkit-scrollbar {
     display: none;
   }
 }

package/dist/components/ScrollArea/ScrollArea.css.vanilla.cjs

@@ -5,14 +5,12 @@ require('./../../styles/sprinkles.css.ts.vanilla.css');
 require('./../../styles/globalStyle.css.ts.vanilla.css');
 require('./ScrollArea.css.ts.vanilla.css');
 
-var maskBoth = 'ScrollArea_maskBoth__m6lfro3';
-var maskLeft = 'ScrollArea_maskLeft__m6lfro1';
-var maskRight = 'ScrollArea_maskRight__m6lfro2';
-var scrollArea = 'ScrollArea_styleWithLayer__m6lfro0';
-var wrapper = 'ScrollArea_wrapper__m6lfro4';
+var mask = 'ScrollArea_mask__m6lfro2';
+var paddingVar = 'var(--paddingVar__m6lfro0)';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro1';
+var wrapper = 'ScrollArea_wrapper__m6lfro3';
 
-exports.maskBoth = maskBoth;
-exports.maskLeft = maskLeft;
-exports.maskRight = maskRight;
+exports.mask = mask;
+exports.paddingVar = paddingVar;
 exports.scrollArea = scrollArea;
 exports.wrapper = wrapper;

package/dist/components/ScrollArea/ScrollArea.css.vanilla.js

@@ -3,10 +3,9 @@ import './../../styles/sprinkles.css.ts.vanilla.css';
 import './../../styles/globalStyle.css.ts.vanilla.css';
 import './ScrollArea.css.ts.vanilla.css';
 
-var maskBoth = 'ScrollArea_maskBoth__m6lfro3';
-var maskLeft = 'ScrollArea_maskLeft__m6lfro1';
-var maskRight = 'ScrollArea_maskRight__m6lfro2';
-var scrollArea = 'ScrollArea_styleWithLayer__m6lfro0';
-var wrapper = 'ScrollArea_wrapper__m6lfro4';
+var mask = 'ScrollArea_mask__m6lfro2';
+var paddingVar = 'var(--paddingVar__m6lfro0)';
+var scrollArea = 'ScrollArea_styleWithLayer__m6lfro1';
+var wrapper = 'ScrollArea_wrapper__m6lfro3';
 
-export { maskBoth, maskLeft, maskRight, scrollArea, wrapper };
+export { mask, paddingVar, scrollArea, wrapper };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -1,6 +1,9 @@
+import { spacing } from '#tokens';
 import type { UIComponent } from '#types';
 import * as s from './ScrollArea.css';
-type ScrollAreaProps = UIComponent<'div'>;
+interface ScrollAreaProps extends UIComponent<'div'> {
+    innerPadding?: keyof typeof spacing;
+}
 export declare const ScrollArea: import("react").ForwardRefExoticComponent<Omit<ScrollAreaProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 export { s as scrollAreaCss };
 //# sourceMappingURL=ScrollArea.d.ts.map

package/dist/components/ScrollArea/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,KAAK,eAAe,GAAG,WAAW,CAAC,KAAK,CAAC,CAAC;AAE1C,eAAO,MAAM,UAAU,yHA+DtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClC,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE1C,OAAO,KAAK,CAAC,MAAM,kBAAkB,CAAC;AAEtC,UAAU,eAAgB,SAAQ,WAAW,CAAC,KAAK,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,UAAU,yHAiDtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { forwardRef, useRef, useState, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { useCombinedRefs } from '@kimdw-rtk/utils';
+import { assignInlineVars } from '../../node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
 import { useMouseScroll } from '../../hooks/useMouseScroll/index.js';
-import { wrapper, scrollArea, maskBoth, maskLeft, maskRight } from './ScrollArea.css.vanilla.js';
+import { wrapper, paddingVar, scrollArea, mask } from './ScrollArea.css.vanilla.js';
 import * as ScrollArea_css from './ScrollArea.css.vanilla.js';
 export { ScrollArea_css as scrollAreaCss };
+import { spacing } from '../../tokens/semantic/spacing.js';
 import { sx } from '../../styles/sx.js';
 
-const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
+const ScrollArea = forwardRef(({ children, className, innerPadding = 'lg', sx: propSx, style, ...props }, ref) => {
     const scrollAreaRef = useRef(null);
     const targetRef = useCombinedRefs(ref, scrollAreaRef);
-    const [hasLeftSpace, setHasLeftSpace] = useState(false);
-    const [hasRightSpace, setHasRightSpace] = useState(true);
     useMouseScroll(scrollAreaRef);
     useEffect(() => {
         const element = scrollAreaRef.current;
@@ -28,20 +28,15 @@ const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, re
             }
             e.preventDefault();
         };
-        const handleScroll = () => {
-            setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.ceil(element.scrollLeft + element.clientWidth) <
-                Math.floor(element.scrollWidth));
-        };
-        handleScroll();
-        element.addEventListener('scroll', handleScroll);
         element.addEventListener('wheel', handleWheel);
         return () => {
-            element.removeEventListener('scroll', handleScroll);
             element.removeEventListener('wheel', handleWheel);
         };
     }, []);
-    return (jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), hasLeftSpace && hasRightSpace && maskBoth, hasLeftSpace && maskLeft, hasRightSpace && maskRight), ...props, children: jsx("div", { className: wrapper, children: children }) }));
+    return (jsx("div", { ref: targetRef, className: clsx(scrollArea, className, sx(propSx), mask), ...props, style: {
+            ...style,
+            ...assignInlineVars({ [paddingVar]: spacing[innerPadding] }),
+        }, children: jsx("div", { className: wrapper, children: children }) }));
 });
 ScrollArea.displayName = 'ScrollArea';
 

package/dist/hooks/usePointerSlider/index.cjs

@@ -7,40 +7,91 @@ const usePointerSlider = (ref, { min, max, defaultValue, }) => {
     const [value, setValue] = react.useState(defaultValue);
     react.useEffect(() => {
         const element = ref.current;
-        let isDown = false, parentWidth = 0, parentX = 0;
         if (element === null) {
             return;
         }
-        element.style.left = `${((defaultValue - min) / (max - min)) * 100}%`;
-        const handlePointerDown = (e) => {
-            element.setPointerCapture(e.pointerId);
-            isDown = true;
+        const ownerWindow = element.ownerDocument.defaultView;
+        if (ownerWindow === null) {
+            return;
+        }
+        let isDragging = false, activePointerId = null, parentWidth = 0, parentX = 0;
+        const setThumbPosition = (nextValue) => {
+            element.style.left = `${((nextValue - min) / (max - min)) * 100}%`;
+        };
+        const syncParentRect = () => {
             const boundingRect = element.parentElement?.getBoundingClientRect();
             if (boundingRect === undefined) {
-                return;
+                return false;
             }
             parentWidth = boundingRect.width;
             parentX = boundingRect.x;
+            return parentWidth > 0;
         };
-        const handlePointerMove = (e) => {
-            if (!isDown) {
+        const updateValue = (clientX) => {
+            if (parentWidth <= 0 || !Number.isFinite(clientX)) {
                 return;
             }
-            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
-            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+            const currentValue = Math.min(max, Math.max(min, Math.round((clientX - parentX) / (parentWidth / (max - min))) + min));
+            setThumbPosition(currentValue);
             setValue(currentValue);
         };
+        setValue(defaultValue);
+        setThumbPosition(defaultValue);
+        const handlePointerDown = (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0) {
+                return;
+            }
+            if (!syncParentRect()) {
+                return;
+            }
+            e.preventDefault();
+            isDragging = true;
+            activePointerId = Number.isFinite(e.pointerId) ? e.pointerId : null;
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId) === false) {
+                element.setPointerCapture?.(activePointerId);
+            }
+            updateValue(e.clientX);
+        };
+        const handlePointerMove = (e) => {
+            if (!isDragging ||
+                (activePointerId !== null && activePointerId !== e.pointerId)) {
+                return;
+            }
+            updateValue(e.clientX);
+        };
         const handlePointerUp = (e) => {
-            element.releasePointerCapture(e.pointerId);
-            isDown = false;
+            if (activePointerId !== null && activePointerId !== e.pointerId) {
+                return;
+            }
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId)) {
+                element.releasePointerCapture?.(activePointerId);
+            }
+            isDragging = false;
+            activePointerId = null;
+        };
+        const handleLostPointerCapture = () => {
+            isDragging = false;
+            activePointerId = null;
         };
         element.addEventListener('pointerdown', handlePointerDown);
         element.addEventListener('pointermove', handlePointerMove);
         element.addEventListener('pointerup', handlePointerUp);
+        element.addEventListener('pointercancel', handlePointerUp);
+        element.addEventListener('lostpointercapture', handleLostPointerCapture);
+        ownerWindow.addEventListener('pointermove', handlePointerMove);
+        ownerWindow.addEventListener('pointerup', handlePointerUp);
+        ownerWindow.addEventListener('pointercancel', handlePointerUp);
         return () => {
             element.removeEventListener('pointerdown', handlePointerDown);
             element.removeEventListener('pointermove', handlePointerMove);
             element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointercancel', handlePointerUp);
+            element.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            ownerWindow.removeEventListener('pointermove', handlePointerMove);
+            ownerWindow.removeEventListener('pointerup', handlePointerUp);
+            ownerWindow.removeEventListener('pointercancel', handlePointerUp);
         };
     }, [ref, max, min, defaultValue]);
     return value;

package/dist/hooks/usePointerSlider/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePointerSlider/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC5E,KAAK,CAAC,EACN,6BAIG;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,KACA,MA+DF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePointerSlider/index.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC5E,KAAK,CAAC,EACN,6BAIG;IACD,GAAG,EAAE,MAAM,CAAC;IACZ,GAAG,EAAE,MAAM,CAAC;IACZ,YAAY,EAAE,MAAM,CAAC;CACtB,KACA,MA2IF,CAAC"}

package/dist/hooks/usePointerSlider/index.js

@@ -5,40 +5,91 @@ const usePointerSlider = (ref, { min, max, defaultValue, }) => {
     const [value, setValue] = useState(defaultValue);
     useEffect(() => {
         const element = ref.current;
-        let isDown = false, parentWidth = 0, parentX = 0;
         if (element === null) {
             return;
         }
-        element.style.left = `${((defaultValue - min) / (max - min)) * 100}%`;
-        const handlePointerDown = (e) => {
-            element.setPointerCapture(e.pointerId);
-            isDown = true;
+        const ownerWindow = element.ownerDocument.defaultView;
+        if (ownerWindow === null) {
+            return;
+        }
+        let isDragging = false, activePointerId = null, parentWidth = 0, parentX = 0;
+        const setThumbPosition = (nextValue) => {
+            element.style.left = `${((nextValue - min) / (max - min)) * 100}%`;
+        };
+        const syncParentRect = () => {
             const boundingRect = element.parentElement?.getBoundingClientRect();
             if (boundingRect === undefined) {
-                return;
+                return false;
             }
             parentWidth = boundingRect.width;
             parentX = boundingRect.x;
+            return parentWidth > 0;
         };
-        const handlePointerMove = (e) => {
-            if (!isDown) {
+        const updateValue = (clientX) => {
+            if (parentWidth <= 0 || !Number.isFinite(clientX)) {
                 return;
             }
-            const currentValue = Math.min(max, Math.max(min, Math.round((e.clientX - parentX) / (parentWidth / (max - min))) + min));
-            element.style.left = `${((currentValue - min) / (max - min)) * 100}%`;
+            const currentValue = Math.min(max, Math.max(min, Math.round((clientX - parentX) / (parentWidth / (max - min))) + min));
+            setThumbPosition(currentValue);
             setValue(currentValue);
         };
+        setValue(defaultValue);
+        setThumbPosition(defaultValue);
+        const handlePointerDown = (e) => {
+            if (e.pointerType === 'mouse' && e.button !== 0) {
+                return;
+            }
+            if (!syncParentRect()) {
+                return;
+            }
+            e.preventDefault();
+            isDragging = true;
+            activePointerId = Number.isFinite(e.pointerId) ? e.pointerId : null;
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId) === false) {
+                element.setPointerCapture?.(activePointerId);
+            }
+            updateValue(e.clientX);
+        };
+        const handlePointerMove = (e) => {
+            if (!isDragging ||
+                (activePointerId !== null && activePointerId !== e.pointerId)) {
+                return;
+            }
+            updateValue(e.clientX);
+        };
         const handlePointerUp = (e) => {
-            element.releasePointerCapture(e.pointerId);
-            isDown = false;
+            if (activePointerId !== null && activePointerId !== e.pointerId) {
+                return;
+            }
+            if (activePointerId !== null &&
+                element.hasPointerCapture?.(activePointerId)) {
+                element.releasePointerCapture?.(activePointerId);
+            }
+            isDragging = false;
+            activePointerId = null;
+        };
+        const handleLostPointerCapture = () => {
+            isDragging = false;
+            activePointerId = null;
         };
         element.addEventListener('pointerdown', handlePointerDown);
         element.addEventListener('pointermove', handlePointerMove);
         element.addEventListener('pointerup', handlePointerUp);
+        element.addEventListener('pointercancel', handlePointerUp);
+        element.addEventListener('lostpointercapture', handleLostPointerCapture);
+        ownerWindow.addEventListener('pointermove', handlePointerMove);
+        ownerWindow.addEventListener('pointerup', handlePointerUp);
+        ownerWindow.addEventListener('pointercancel', handlePointerUp);
         return () => {
             element.removeEventListener('pointerdown', handlePointerDown);
             element.removeEventListener('pointermove', handlePointerMove);
             element.removeEventListener('pointerup', handlePointerUp);
+            element.removeEventListener('pointercancel', handlePointerUp);
+            element.removeEventListener('lostpointercapture', handleLostPointerCapture);
+            ownerWindow.removeEventListener('pointermove', handlePointerMove);
+            ownerWindow.removeEventListener('pointerup', handlePointerUp);
+            ownerWindow.removeEventListener('pointercancel', handlePointerUp);
         };
     }, [ref, max, min, defaultValue]);
     return value;

package/dist/node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var vanillaExtractPrivate_esm = require('../../../../../@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.cjs');
+
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      if (value == null) {
+        continue;
+      }
+      styles[vanillaExtractPrivate_esm.getVarName(varName)] = value;
+    }
+  }
+  Object.defineProperty(styles, 'toString', {
+    value: function value() {
+      return Object.keys(this).map(key => "".concat(key, ":").concat(this[key])).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
+exports.assignInlineVars = assignInlineVars;

package/dist/node_modules/.pnpm/@vanilla-extract_dynamic@2.1.5/node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js

@@ -0,0 +1,24 @@
+import { getVarName } from '../../../../../@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.js';
+
+function assignInlineVars(varsOrContract, tokens) {
+  var styles = {};
+  {
+    var _vars = varsOrContract;
+    for (var varName in _vars) {
+      var value = _vars[varName];
+      if (value == null) {
+        continue;
+      }
+      styles[getVarName(varName)] = value;
+    }
+  }
+  Object.defineProperty(styles, 'toString', {
+    value: function value() {
+      return Object.keys(this).map(key => "".concat(key, ":").concat(this[key])).join(';');
+    },
+    writable: false
+  });
+  return styles;
+}
+
+export { assignInlineVars };

package/dist/node_modules/.pnpm/@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+
+exports.getVarName = getVarName;

package/dist/node_modules/.pnpm/@vanilla-extract_private@1.0.9/node_modules/@vanilla-extract/private/dist/vanilla-extract-private.esm.js

@@ -0,0 +1,9 @@
+function getVarName(variable) {
+  var matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+  return variable;
+}
+
+export { getVarName };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimdw-rtk/ui",
-  "version": "0.1.15",
+  "version": "0.1.16",
   "private": false,
   "type": "module",
   "imports": {