@kimdw-rtk/ui 0.1.11 → 0.1.13

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

@@ -1 +1 @@
-{"version":3,"file":"Card.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAsBtC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAsEP,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,QAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAgB;;;;EAKpC,CAAC"}
+{"version":3,"file":"Card.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/Card.css.ts"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,oBAAc,CAAC;AAsBtC,eAAO,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAuEP,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,WAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,QAAY;;;;;gBAMxB,CAAC,UAAU,CAAC,UAAgB;;;;EAKpC,CAAC"}

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

@@ -94,6 +94,7 @@
     display: flex;
     flex-direction: column;
     position: relative;
+    overflow: clip;
     border-radius: var(--borderRadius__n6e2fs0);
     color: rgb(var(--color-foreground__n6e2fs2));
     transition: border-color 0.2s ease, transform 0.4s ease;

package/dist/components/Card/CardInteraction.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CardInteraction.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAQ1B,CAAC"}
+{"version":3,"file":"CardInteraction.css.d.ts","sourceRoot":"","sources":["../../../src/components/Card/CardInteraction.css.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAO1B,CAAC"}

package/dist/components/Card/CardInteraction.css.ts.vanilla.css

@@ -2,7 +2,6 @@
 @layer components {
   .CardInteraction_styleWithLayer__3n4sac0 {
     position: relative;
-    overflow: clip;
     height: 100%;
     cursor: pointer;
     user-select: none;

package/dist/components/Dialog/Dialog.cjs

@@ -8,7 +8,7 @@ var index = require('../Box/index.cjs');
 var sx = require('../../styles/sx.cjs');
 
 const Dialog = react.forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
-    return (jsxRuntime.jsx(index.Box, { ref: ref, boxShadow: "border-sm", className: clsx.clsx(Dialog_css.container, className, sx.sx(propSx)), flexDirection: "row", gap: "lg", flex: true, ...props, children: children }));
+    return (jsxRuntime.jsx(index.Box, { ref: ref, boxShadow: "border-sm", className: clsx.clsx(Dialog_css.container, className, sx.sx(propSx)), flexDirection: "row", gap: "lg", padding: "xl", flex: true, ...props, children: children }));
 });
 Dialog.displayName = 'Dialog';
 

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

@@ -1 +1 @@
-{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAgBlB,CAAC"}
+{"version":3,"file":"Dialog.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/Dialog.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAI1C,KAAK,WAAW,GAAG,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,OAAO,CAAC,CAAC;AAErD,eAAO,MAAM,MAAM,qHAiBlB,CAAC"}

package/dist/components/Dialog/Dialog.js

@@ -6,7 +6,7 @@ import { Box } from '../Box/index.js';
 import { sx } from '../../styles/sx.js';
 
 const Dialog = forwardRef(({ children, className, sx: propSx, ...props }, ref) => {
-    return (jsx(Box, { ref: ref, boxShadow: "border-sm", className: clsx(container, className, sx(propSx)), flexDirection: "row", gap: "lg", flex: true, ...props, children: children }));
+    return (jsx(Box, { ref: ref, boxShadow: "border-sm", className: clsx(container, className, sx(propSx)), flexDirection: "row", gap: "lg", padding: "xl", flex: true, ...props, children: children }));
 });
 Dialog.displayName = 'Dialog';
 

package/dist/components/Dialog/DialogContent.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAUpB,CAAC"}
+{"version":3,"file":"DialogContent.css.d.ts","sourceRoot":"","sources":["../../../src/components/Dialog/DialogContent.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,SAAS,QAQpB,CAAC"}

package/dist/components/Dialog/DialogContent.css.ts.vanilla.css

@@ -1,7 +1,6 @@
 @layer components;
 @layer components {
   .DialogContent_styleWithLayer__1v0lk0e0 {
-    padding: 0 1.5rem 1.5rem 1.5rem;
     word-break: break-all;
   }
   .DialogHeader_styleWithLayer__jb8ns00 + .DialogContent_styleWithLayer__1v0lk0e0 {

package/dist/components/ScrollArea/ScrollArea.cjs

@@ -20,15 +20,25 @@ const ScrollArea = react.forwardRef(({ children, className, sx: propSx, ...props
         if (element === null) {
             return;
         }
+        const handleWheel = (e) => {
+            if (element.scrollLeft + e.deltaY <= 0 ||
+                Math.round(element.scrollLeft + e.deltaY + element.clientWidth) >=
+                    element.scrollWidth) {
+                return;
+            }
+            e.preventDefault();
+        };
         const handleScroll = () => {
             setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.round(element.scrollLeft + element.clientWidth) <
-                element.scrollWidth);
+            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 }) }));

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,QAOrB,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":"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"}

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

@@ -25,6 +25,7 @@ transparent 100%);
   .ScrollArea_styleWithLayer__m6lfro0 {
     width: 100%;
     overflow-x: scroll;
+    user-select: none;
   }
   .ScrollArea_styleWithLayer__m6lfro0::-webkit-scrollbar {
     display: none;

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,yHAiDtB,CAAC;AAGF,OAAO,EAAE,CAAC,IAAI,aAAa,EAAE,CAAC"}
+{"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"}

package/dist/components/ScrollArea/ScrollArea.js

@@ -20,15 +20,25 @@ const ScrollArea = forwardRef(({ children, className, sx: propSx, ...props }, re
         if (element === null) {
             return;
         }
+        const handleWheel = (e) => {
+            if (element.scrollLeft + e.deltaY <= 0 ||
+                Math.round(element.scrollLeft + e.deltaY + element.clientWidth) >=
+                    element.scrollWidth) {
+                return;
+            }
+            e.preventDefault();
+        };
         const handleScroll = () => {
             setHasLeftSpace(element.scrollLeft !== 0);
-            setHasRightSpace(Math.round(element.scrollLeft + element.clientWidth) <
-                element.scrollWidth);
+            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 }) }));

package/dist/hooks/useMouseScroll/index.cjs

@@ -9,12 +9,12 @@ var react = require('react');
 const useMouseScroll = (ref) => {
     react.useEffect(() => {
         const element = ref.current;
-        let isDown = false, startX = 0, startLeft = 0;
+        let isDown = false, startX = 0, startLeft = 0, currentLeft = element?.scrollLeft ?? 0;
         if (element === null) {
             return;
         }
         const handleMouseDown = (e) => {
-            if (!element.contains(e.target)) {
+            if (!element.contains(e.target) || e.button === 1) {
                 return;
             }
             isDown = true;
@@ -26,13 +26,15 @@ const useMouseScroll = (ref) => {
                 return;
             }
             element.scrollLeft = startLeft + startX - e.x;
+            currentLeft = element.scrollLeft;
         };
         const handleMouseUp = () => {
             isDown = false;
         };
         const handleWheel = (e) => {
+            currentLeft = Math.min(Math.max(0, currentLeft + e.deltaY), element.scrollWidth - element.clientWidth);
             element.scrollTo({
-                left: element.scrollLeft + e.deltaY,
+                left: currentLeft,
                 behavior: 'smooth',
             });
         };

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseScroll/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1E,KAAK,CAAC,KACL,IAqDF,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMouseScroll/index.ts"],"names":[],"mappings":"AAIA;;GAEG;AACH,eAAO,MAAM,cAAc,GAAI,CAAC,SAAS,KAAK,CAAC,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,EAC1E,KAAK,CAAC,KACL,IA4DF,CAAC"}

package/dist/hooks/useMouseScroll/index.js

@@ -7,12 +7,12 @@ import { useEffect } from 'react';
 const useMouseScroll = (ref) => {
     useEffect(() => {
         const element = ref.current;
-        let isDown = false, startX = 0, startLeft = 0;
+        let isDown = false, startX = 0, startLeft = 0, currentLeft = element?.scrollLeft ?? 0;
         if (element === null) {
             return;
         }
         const handleMouseDown = (e) => {
-            if (!element.contains(e.target)) {
+            if (!element.contains(e.target) || e.button === 1) {
                 return;
             }
             isDown = true;
@@ -24,13 +24,15 @@ const useMouseScroll = (ref) => {
                 return;
             }
             element.scrollLeft = startLeft + startX - e.x;
+            currentLeft = element.scrollLeft;
         };
         const handleMouseUp = () => {
             isDown = false;
         };
         const handleWheel = (e) => {
+            currentLeft = Math.min(Math.max(0, currentLeft + e.deltaY), element.scrollWidth - element.clientWidth);
             element.scrollTo({
-                left: element.scrollLeft + e.deltaY,
+                left: currentLeft,
                 behavior: 'smooth',
             });
         };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kimdw-rtk/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "type": "module",
   "imports": {
@@ -39,8 +39,8 @@
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@kimdw-rtk/animation": "^0.1.4",
-    "@kimdw-rtk/utils": "0.1.5"
+    "@kimdw-rtk/animation": "^0.1.5",
+    "@kimdw-rtk/utils": "0.1.6"
   },
   "devDependencies": {
     "@babel/preset-env": "^7.26.9",
@@ -65,8 +65,8 @@
     "rollup-plugin-preserve-directives": "^0.4.0",
     "ts-jest": "^29.3.4",
     "typescript": "5.8.2",
-    "@repo/eslint-config": "0.0.1",
-    "@repo/typescript-config": "0.0.0"
+    "@repo/typescript-config": "0.0.0",
+    "@repo/eslint-config": "0.0.1"
   },
   "publishConfig": {
     "access": "public"