@x-plat/design-system 0.5.55 → 0.5.59

package/dist/components/Select/index.js

@@ -1036,10 +1036,11 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
+  const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
   return /* @__PURE__ */ jsx296(
     "div",
     {
-      className: clsx_default("select-item", disabled && "disabled"),
+      className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
       onClick: handleClick,
       role: "menuitem",
       tabIndex: disabled ? void 0 : 0,
@@ -1075,12 +1076,14 @@ var SelectRoot = (props) => {
   const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = React6.useState(false);
   const [uncontrolledLabel, setUncontrolledLabel] = React6.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = React6.useState(void 0);
   const controlledLabel = React6.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
+  const selectedValue = isControlled ? valueProp : uncontrolledValue;
   const triggerRef = React6.useRef(null);
   const contentRef = React6.useRef(null);
   const [mounted, setMounted] = React6.useState(false);
@@ -1107,6 +1110,7 @@ var SelectRoot = (props) => {
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
+        setUncontrolledValue(itemValue);
       }
       onChange?.(itemValue, label);
     },
@@ -1119,12 +1123,13 @@ var SelectRoot = (props) => {
       visible,
       triggerRef,
       selectedLabel,
+      selectedValue,
       setSelected,
       open,
       close,
       toggle
     }),
-    [isOpen, mounted, visible, selectedLabel, setSelected, open, close, toggle]
+    [isOpen, mounted, visible, selectedLabel, selectedValue, setSelected, open, close, toggle]
   );
   const stateClass = visible ? "visible" : "exit";
   const handleTriggerClick = (e) => {

package/dist/components/Steps/index.css

@@ -34,7 +34,7 @@
   transition: background-color 0.2s, color 0.2s;
 }
 .lib-xplat-steps .step-circle svg {
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-steps .step-content {
   display: flex;

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);
@@ -304,6 +309,7 @@ var Swiper = (props) => {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
+        onDragStart: (e) => e.preventDefault(),
         children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {

package/dist/components/Swiper/index.css

@@ -25,6 +25,10 @@
   flex-shrink: 0;
   overflow: hidden;
 }
+.lib-xplat-swiper__slide img {
+  -webkit-user-drag: none;
+  user-drag: none;
+}
 .lib-xplat-swiper__progress {
   margin-top: var(--spacing-space-4);
   display: flex;

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);
@@ -268,6 +273,7 @@ var Swiper = (props) => {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
+        onDragStart: (e) => e.preventDefault(),
         children: /* @__PURE__ */ jsx(
           "div",
           {

package/dist/components/Tab/index.css

@@ -14,15 +14,15 @@
 }
 .lib-xplat-tab.sm {
   height: var(--spacing-control-height-sm);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tab.md {
   height: var(--spacing-control-height-md);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-tab.lg {
   height: var(--spacing-control-height-lg);
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
 }
 .lib-xplat-tab.type-default {
   width: 100%;
@@ -60,7 +60,7 @@
   justify-content: center;
   white-space: nowrap;
   padding: 0 var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
   font-weight: 500;
   height: 100%;
   background: none;

package/dist/components/Table/index.css

@@ -22,14 +22,14 @@
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.md > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-2) var(--spacing-space-3);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > thead > tr > td,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > th,
 .lib-xplat-table-wrapper.lg > .lib-xplat-table > tbody > tr > td {
   padding: var(--spacing-space-3) var(--spacing-space-4);
-  font-size: var(--semantic-typo-label-1-m-size);
+  font-size: var(--semantic-typo-label-2-m-size);
 }
 .lib-xplat-table-wrapper > .lib-xplat-table {
   width: 100%;

package/dist/components/Tag/index.css

@@ -19,7 +19,7 @@
 .lib-xplat-tag.lg {
   gap: var(--spacing-space-1);
   padding: var(--spacing-space-1) var(--spacing-space-2);
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }
 .lib-xplat-tag.neutral {
   color: var(--semantic-text-muted);
@@ -95,5 +95,5 @@
   font-size: var(--semantic-typo-caption-2-r-size);
 }
 .lib-xplat-tag.lg .tag-close svg {
-  font-size: var(--semantic-typo-label-2-m-size);
+  font-size: var(--semantic-typo-caption-1-r-size);
 }

package/dist/components/TextArea/index.css

@@ -39,8 +39,8 @@
   color: var(--semantic-text-subtle);
   resize: none;
   height: 1.5em;
-  font-size: var(--semantic-typo-label-1-m-size);
-  line-height: var(--semantic-typo-label-1-m-lh);
+  font-size: var(--semantic-typo-label-2-m-size);
+  line-height: var(--semantic-typo-label-2-m-lh);
   font-family: inherit;
 }
 .lib-xplat-textarea-wrapper .lib-xplat-textarea > textarea:disabled {

package/dist/components/Toast/index.css

@@ -53,8 +53,8 @@
   gap: var(--spacing-space-2);
   padding: var(--spacing-space-3) var(--spacing-space-4);
   border-radius: var(--spacing-radius-md);
-  font-size: var(--semantic-typo-label-2-m-size);
-  line-height: var(--semantic-typo-label-2-m-lh);
+  font-size: var(--semantic-typo-caption-1-r-size);
+  line-height: var(--semantic-typo-caption-1-r-lh);
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
   pointer-events: auto;
   animation: lib-xplat-toast-enter 0.2s ease;
@@ -73,7 +73,7 @@
   background: none;
   border: none;
   cursor: pointer;
-  font-size: var(--semantic-typo-body-1-m-size);
+  font-size: var(--semantic-typo-label-1-m-size);
   line-height: 1;
   padding: 0;
   opacity: 0.6;

package/dist/components/index.cjs

@@ -5140,10 +5140,11 @@ var SelectItem = (props) => {
     ctx?.close();
     onClick?.();
   };
+  const isSelected = value !== void 0 ? ctx?.selectedValue === value : ctx?.selectedLabel === children;
   return /* @__PURE__ */ (0, import_jsx_runtime334.jsx)(
     "div",
     {
-      className: clsx_default("select-item", disabled && "disabled"),
+      className: clsx_default("select-item", disabled && "disabled", isSelected && "is-selected"),
       onClick: handleClick,
       role: "menuitem",
       tabIndex: disabled ? void 0 : 0,
@@ -5179,12 +5180,14 @@ var SelectRoot = (props) => {
   const isControlled = valueProp !== void 0;
   const [isOpen, setOpen] = import_react31.default.useState(false);
   const [uncontrolledLabel, setUncontrolledLabel] = import_react31.default.useState(null);
+  const [uncontrolledValue, setUncontrolledValue] = import_react31.default.useState(void 0);
   const controlledLabel = import_react31.default.useMemo(() => {
     if (!isControlled) return null;
     const match = itemChildren.find((child) => child.props.value === valueProp);
     return match ? match.props.children : null;
   }, [isControlled, valueProp, itemChildren]);
   const selectedLabel = isControlled ? controlledLabel : uncontrolledLabel;
+  const selectedValue = isControlled ? valueProp : uncontrolledValue;
   const triggerRef = import_react31.default.useRef(null);
   const contentRef = import_react31.default.useRef(null);
   const [mounted, setMounted] = import_react31.default.useState(false);
@@ -5211,6 +5214,7 @@ var SelectRoot = (props) => {
     (label, itemValue) => {
       if (!isControlled) {
         setUncontrolledLabel(label);
+        setUncontrolledValue(itemValue);
       }
       onChange?.(itemValue, label);
     },
@@ -5223,12 +5227,13 @@ var SelectRoot = (props) => {
       visible,
       triggerRef,
       selectedLabel,
+      selectedValue,
       setSelected,
       open,
       close,
       toggle
     }),
-    [isOpen, mounted, visible, selectedLabel, setSelected, open, close, toggle]
+    [isOpen, mounted, visible, selectedLabel, selectedValue, setSelected, open, close, toggle]
   );
   const stateClass = visible ? "visible" : "exit";
   const handleTriggerClick = (e) => {
@@ -5442,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);
@@ -5450,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);
@@ -5658,6 +5668,7 @@ var Swiper = (props) => {
         className: "lib-xplat-swiper__viewport",
         onMouseDown: handleDragStart,
         onTouchStart: handleDragStart,
+        onDragStart: (e) => e.preventDefault(),
         children: /* @__PURE__ */ (0, import_jsx_runtime339.jsx)(
           "div",
           {