@x-plat/design-system 0.5.58 → 0.5.60

package/dist/components/CheckBox/index.css

@@ -1,7 +1,7 @@
 /* src/components/CheckBox/checkbox.scss */
 .lib-xplat-checkbox {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;

package/dist/components/Radio/index.css

@@ -1,7 +1,7 @@
 /* src/components/Radio/radio.scss */
 .lib-xplat-radio {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;

package/dist/components/Swiper/index.cjs

@@ -88,7 +88,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = import_react.default.useState(false);
   const [dragOffset, setDragOffset] = import_react.default.useState(0);
-  const [animated, setAnimated] = import_react.default.useState(true);
+  const [animated, setAnimated] = import_react.default.useState(false);
   const [containerWidth, setContainerWidth] = import_react.default.useState(0);
   const containerRef = import_react.default.useRef(null);
   const startXRef = import_react.default.useRef(0);
@@ -96,12 +96,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = import_react.default.useRef(null);
   const resumeTimeoutRef = import_react.default.useRef(null);
   const [paused, setPaused] = import_react.default.useState(false);
+  const initializedRef = import_react.default.useRef(false);
   import_react.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/dist/components/Swiper/index.css

@@ -28,7 +28,6 @@
 .lib-xplat-swiper__slide img {
   -webkit-user-drag: none;
   user-drag: none;
-  pointer-events: none;
 }
 .lib-xplat-swiper__progress {
   margin-top: var(--spacing-space-4);

package/dist/components/Swiper/index.js

@@ -52,7 +52,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = React.useState(false);
   const [dragOffset, setDragOffset] = React.useState(0);
-  const [animated, setAnimated] = React.useState(true);
+  const [animated, setAnimated] = React.useState(false);
   const [containerWidth, setContainerWidth] = React.useState(0);
   const containerRef = React.useRef(null);
   const startXRef = React.useRef(0);
@@ -60,12 +60,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = React.useRef(null);
   const resumeTimeoutRef = React.useRef(null);
   const [paused, setPaused] = React.useState(false);
+  const initializedRef = React.useRef(false);
   React.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/dist/components/index.cjs

@@ -5447,7 +5447,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = import_react32.default.useState(false);
   const [dragOffset, setDragOffset] = import_react32.default.useState(0);
-  const [animated, setAnimated] = import_react32.default.useState(true);
+  const [animated, setAnimated] = import_react32.default.useState(false);
   const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
   const containerRef = import_react32.default.useRef(null);
   const startXRef = import_react32.default.useRef(0);
@@ -5455,12 +5455,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = import_react32.default.useRef(null);
   const resumeTimeoutRef = import_react32.default.useRef(null);
   const [paused, setPaused] = import_react32.default.useState(false);
+  const initializedRef = import_react32.default.useRef(false);
   import_react32.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/dist/components/index.css

@@ -2684,7 +2684,7 @@
 /* src/components/CheckBox/checkbox.scss */
 .lib-xplat-checkbox {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;
@@ -4086,7 +4086,7 @@
 /* src/components/Radio/radio.scss */
 .lib-xplat-radio {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;
@@ -4589,7 +4589,6 @@
 .lib-xplat-swiper__slide img {
   -webkit-user-drag: none;
   user-drag: none;
-  pointer-events: none;
 }
 .lib-xplat-swiper__progress {
   margin-top: var(--spacing-space-4);

package/dist/components/index.js

@@ -5356,7 +5356,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = React31.useState(false);
   const [dragOffset, setDragOffset] = React31.useState(0);
-  const [animated, setAnimated] = React31.useState(true);
+  const [animated, setAnimated] = React31.useState(false);
   const [containerWidth, setContainerWidth] = React31.useState(0);
   const containerRef = React31.useRef(null);
   const startXRef = React31.useRef(0);
@@ -5364,12 +5364,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = React31.useRef(null);
   const resumeTimeoutRef = React31.useRef(null);
   const [paused, setPaused] = React31.useState(false);
+  const initializedRef = React31.useRef(false);
   React31.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/dist/index.cjs

@@ -9859,7 +9859,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = import_react32.default.useState(false);
   const [dragOffset, setDragOffset] = import_react32.default.useState(0);
-  const [animated, setAnimated] = import_react32.default.useState(true);
+  const [animated, setAnimated] = import_react32.default.useState(false);
   const [containerWidth, setContainerWidth] = import_react32.default.useState(0);
   const containerRef = import_react32.default.useRef(null);
   const startXRef = import_react32.default.useRef(0);
@@ -9867,12 +9867,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = import_react32.default.useRef(null);
   const resumeTimeoutRef = import_react32.default.useRef(null);
   const [paused, setPaused] = import_react32.default.useState(false);
+  const initializedRef = import_react32.default.useRef(false);
   import_react32.default.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/dist/index.css

@@ -2684,7 +2684,7 @@
 /* src/components/CheckBox/checkbox.scss */
 .lib-xplat-checkbox {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   cursor: pointer;
   user-select: none;
@@ -4086,7 +4086,7 @@
 /* src/components/Radio/radio.scss */
 .lib-xplat-radio {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-space-2);
   user-select: none;
   cursor: pointer;
@@ -4589,7 +4589,6 @@
 .lib-xplat-swiper__slide img {
   -webkit-user-drag: none;
   user-drag: none;
-  pointer-events: none;
 }
 .lib-xplat-swiper__progress {
   margin-top: var(--spacing-space-4);

package/dist/index.js

@@ -9459,7 +9459,7 @@ var Swiper = (props) => {
   );
   const [isDragging, setIsDragging] = React31.useState(false);
   const [dragOffset, setDragOffset] = React31.useState(0);
-  const [animated, setAnimated] = React31.useState(true);
+  const [animated, setAnimated] = React31.useState(false);
   const [containerWidth, setContainerWidth] = React31.useState(0);
   const containerRef = React31.useRef(null);
   const startXRef = React31.useRef(0);
@@ -9467,12 +9467,17 @@ var Swiper = (props) => {
   const autoplayTimerRef = React31.useRef(null);
   const resumeTimeoutRef = React31.useRef(null);
   const [paused, setPaused] = React31.useState(false);
+  const initializedRef = React31.useRef(false);
   React31.useEffect(() => {
     const el = containerRef.current;
     if (!el) return;
     const ro = new ResizeObserver((entries) => {
       for (const entry of entries) {
         setContainerWidth(entry.contentRect.width);
+        if (!initializedRef.current) {
+          initializedRef.current = true;
+          requestAnimationFrame(() => setAnimated(true));
+        }
       }
     });
     ro.observe(el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@x-plat/design-system",
-  "version": "0.5.58",
+  "version": "0.5.60",
   "description": "XPLAT UI Design System",
   "author": "XPLAT WOONG",
   "main": "dist/index.cjs",