wex-ui-lib 1.4.4 → 1.4.5

package/dist/index.cjs.js

@@ -2565,6 +2565,7 @@ var Item = newStyled.button(templateObject_4$1 || (templateObject_4$1 = __makeTe
 var ItemContent = newStyled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  grid-area: content;\n  display: flex;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  gap: 20px;\n"], ["\n  grid-area: content;\n  display: flex;\n  position: relative;\n  width: 100%;\n  overflow: hidden;\n  flex-direction: column;\n  gap: 20px;\n"])));
 var templateObject_1$1, templateObject_2$1, templateObject_3$1, templateObject_4$1, templateObject_5$1;
 
+var isTouchDevice = function () { return typeof window !== 'undefined' && ('ontouchstart' in window || navigator.maxTouchPoints > 0); };
 var Tabs = function (_a) {
     var _b, _c;
     var tabs = _a.tabs, font = _a.font, _d = _a.displayMode, displayMode = _d === undefined ? "dark" : _d, accentColor = _a.accentColor, tabPadding = _a.tabPadding, onTabChange = _a.onTabChange, activeTabId = _a.activeTabId;
@@ -2573,6 +2574,9 @@ var Tabs = function (_a) {
     var activeTab = isControlled ? activeTabId : internalActiveTabId;
     var _f = React.useState({ left: 0, width: 0 }), indicatorStyle = _f[0], setIndicatorStyle = _f[1];
     var tabRefs = React.useRef([]);
+    var tabsListRef = React.useRef(null);
+    // Drag state for mobile
+    var dragState = React.useRef({ startX: 0, scrollLeft: 0, dragging: false });
     React.useEffect(function () {
         onTabChange && onTabChange(activeTab);
         var updateIndicator = function () {
@@ -2592,14 +2596,43 @@ var Tabs = function (_a) {
         }
         onTabChange === null || onTabChange === undefined ? undefined : onTabChange(id);
     };
+    // Drag handlers
+    React.useEffect(function () {
+        var el = tabsListRef.current;
+        if (!el || !isTouchDevice())
+            return;
+        var onTouchStart = function (e) {
+            dragState.current.dragging = true;
+            dragState.current.startX = e.touches[0].pageX - el.offsetLeft;
+            dragState.current.scrollLeft = el.scrollLeft;
+        };
+        var onTouchMove = function (e) {
+            if (!dragState.current.dragging)
+                return;
+            var x = e.touches[0].pageX - el.offsetLeft;
+            var walk = dragState.current.startX - x;
+            el.scrollLeft = dragState.current.scrollLeft + walk;
+        };
+        var onTouchEnd = function () {
+            dragState.current.dragging = false;
+        };
+        el.addEventListener('touchstart', onTouchStart);
+        el.addEventListener('touchmove', onTouchMove);
+        el.addEventListener('touchend', onTouchEnd);
+        return function () {
+            el.removeEventListener('touchstart', onTouchStart);
+            el.removeEventListener('touchmove', onTouchMove);
+            el.removeEventListener('touchend', onTouchEnd);
+        };
+    }, [tabs]);
     return (React.createElement(TabsContainer, null,
-        React.createElement(TabsList, null,
+        React.createElement(TabsList, { ref: tabsListRef },
             tabs.map(function (tab, index) { return (React.createElement(Tab, { ref: function (el) { tabRefs.current[index] = el; }, key: tab.id, active: activeTab === tab.id, onClick: function () { return handleTabClick(tab.id); }, font: font, accentColor: accentColor, displayMode: displayMode, tabPadding: tabPadding }, (font === null || font === undefined ? undefined : font.casing) ? formatText(tab.label, font.casing) : tab.label)); }),
             React.createElement(ActiveIndicator, { accentColor: accentColor, left: indicatorStyle.left, width: indicatorStyle.width })),
         React.createElement(TabPanel, null, (_c = tabs.find(function (tab) { return tab.id === activeTab; })) === null || _c === undefined ? undefined : _c.content)));
 };
 var TabsContainer = newStyled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n"], ["\n  width: 100%;\n  position: relative;\n"])));
-var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"], ["\n  display: flex;\n  justify-content: center;\n  position: relative;\n"])));
+var TabsList = newStyled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  position: relative;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar { display: none; }\n  width: 100%;\n  scroll-behavior: smooth;\n  @media (max-width: 700px) {\n    justify-content: flex-start;\n    cursor: grab;\n    -webkit-overflow-scrolling: touch;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  position: relative;\n  overflow-x: auto;\n  scrollbar-width: none;\n  -ms-overflow-style: none;\n  &::-webkit-scrollbar { display: none; }\n  width: 100%;\n  scroll-behavior: smooth;\n  @media (max-width: 700px) {\n    justify-content: flex-start;\n    cursor: grab;\n    -webkit-overflow-scrolling: touch;\n  }\n"])));
 var Tab = newStyled.button(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  padding: ", ";\n  width: fit-content;\n  border: none;\n  background: ", ";\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n  border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n  outline: none;\n  transition: color 0.3s;\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: 1px;\n  &:hover {\n    background: ", "\n  }\n"], ["\n  padding: ", ";\n  width: fit-content;\n  border: none;\n  background: ", ";\n  color: ", ";\n  font-size: 16px;\n  cursor: pointer;\n  border-bottom: 2px solid rgba(255, 255, 255, 0.1);\n  outline: none;\n  transition: color 0.3s;\n  font-size: ", ";\n  font-weight: ", ";\n  letter-spacing: 1px;\n  &:hover {\n    background: ", "\n  }\n"])), function (props) { return props.tabPadding || "14px 32px 12px"; }, function (props) { return props.active ? (props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black) : "transparent"; }, function (props) { return (props.active ? (props.displayMode === "dark" ? "white" : "black") : (props.displayMode === "dark" ? "#AEAEAE" : theme.black)); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.size) || "12px"); }, function (props) { var _a; return (((_a = props.font) === null || _a === undefined ? undefined : _a.weight) || "12px"); }, function (props) { return props.displayMode === "dark" ? "rgba(255, 255, 255, 0.1)" : theme.black; });
 var ActiveIndicator = newStyled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  bottom: 0;\n  left: ", "px;\n  width: ", "px;\n  height: 2px;\n  background: ", ";\n  transition: left 0.3s ease, width 0.3s ease;\n"], ["\n  position: absolute;\n  bottom: 0;\n  left: ", "px;\n  width: ", "px;\n  height: 2px;\n  background: ", ";\n  transition: left 0.3s ease, width 0.3s ease;\n"])), function (props) { return props.left; }, function (props) { return props.width; }, function (props) { return props.accentColor || theme.primary; });
 var TabPanel = newStyled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  padding: 16px;\n  font-size: 14px;\n"], ["\n  padding: 16px;\n  font-size: 14px;\n"])));