@abydahana/aksara-ui 1.2.3 → 1.2.5

package/dist/aksara.css

@@ -23496,6 +23496,18 @@ img,svg,video {
   border-radius:0;
   overflow:visible
 }
+.list-group-inset {
+  border-radius:var(--aksara-radius-lg,1rem);
+  background:var(--aksara-bg-subtle);
+  border-color:var(--aksara-border-subtle);
+  overflow:hidden
+}
+.list-group-inset .list-group-item {
+  background:transparent
+}
+.list-group-inset .list-group-item-action:hover,.list-group-inset .list-group-item-action:focus {
+  background:rgb(var(--aksara-primary)/.06)
+}
 .list-group-item {
   display:block;
   padding:1rem;
@@ -24271,6 +24283,28 @@ img,svg,video {
 .tab-panel {
   padding:1rem 0
 }
+.tabs-slider {
+  position:relative;
+  overflow:hidden;
+  width:100%
+}
+.tabs-slider-track {
+  display:flex;
+  flex-direction:row;
+  flex-wrap:nowrap;
+  width:100%;
+  will-change:transform;
+  touch-action:pan-y pinch-zoom;
+  transition:transform .3s cubic-bezier(.25,1,.5,1)
+}
+.tabs-slider-track > .tab-panel,.tabs-slider-track > .tab-pane {
+  flex:0 0 100%;
+  min-width:100%;
+  max-width:100%;
+  width:100%;
+  box-sizing:border-box;
+  display:block !important
+}
 .tab[aria-selected="true"] {
   background:var(--aksara-bg-subtle);
   color:var(--aksara-text-body)
@@ -24303,6 +24337,41 @@ img,svg,video {
   border-color:rgb(var(--aksara-primary)/.22);
   color:rgb(var(--aksara-primary))
 }
+.tabs-segmented {
+  display:flex;
+  gap:2px;
+  padding:3px;
+  background:var(--aksara-bg-subtle);
+  border-radius:var(--aksara-radius-lg,1rem);
+  border:1px solid var(--aksara-border-subtle)
+}
+.tabs-segmented .tab {
+  flex:1;
+  display:inline-flex;
+  align-items:center;
+  justify-content:center;
+  gap:.375rem;
+  border-radius:calc(var(--aksara-radius-lg,1rem) - 2px);
+  padding:.4375rem .75rem;
+  font:inherit;
+  font-size:.8125rem;
+  font-weight:600;
+  color:var(--aksara-text-subtle);
+  transition:all .15s ease-in-out;
+  border:0;
+  background:transparent;
+  text-decoration:none;
+  cursor:pointer
+}
+.tabs-segmented .tab:hover {
+  color:var(--aksara-text-body)
+}
+.tabs-segmented .tab.active,.tabs-segmented .tab[aria-selected="true"] {
+  background:var(--aksara-surface);
+  color:var(--aksara-text-body);
+  box-shadow:var(--aksara-shadow-sm);
+  font-weight:700
+}
 .toast {
   display:none;
   max-width:24rem;

package/dist/aksara.d.ts

@@ -189,7 +189,9 @@ export declare class Tabs extends Component {
     constructor(element: HTMLElement, options?: TabsOptions);
     updateOptions(options?: TabsOptions): this;
     activateInitial(): void;
-    show(tab: HTMLElement): this;
+    getSliderTrack(): HTMLElement | null;
+    bindSliderGestures(): void;
+    show(tab: HTMLElement, animate?: boolean): this;
 }
 export declare class Toast extends Component {
     static componentName: string;

package/dist/aksara.esm.js

@@ -990,6 +990,7 @@ export class Tabs extends Component {
                 this.show(next);
             }
         });
+        this.bindSliderGestures();
         this.activateInitial();
     }
     updateOptions(options = {}) {
@@ -1029,29 +1030,128 @@ export class Tabs extends Component {
         if (initial)
             this.show(initial);
     }
-    show(tab) {
+    getSliderTrack() {
+        const wrapper = this.element.closest(".tabs-wrapper") ||
+            this.element.closest(".feed-main-col, main, .page-container, [data-tabs-wrapper]") ||
+            this.element.parentElement;
+        return (wrapper?.querySelector(".tabs-slider-track, [data-tabs-slider]") ||
+            document.querySelector(".tabs-slider-track, [data-tabs-slider]"));
+    }
+    bindSliderGestures() {
+        const track = this.getSliderTrack();
+        if (!track || track.__sliderGesturesBound)
+            return;
+        track.__sliderGesturesBound = true;
+        let startX = 0;
+        let startY = 0;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isSwiping = false;
+        let isVertical = false;
+        track.addEventListener("touchstart", (e) => {
+            if (e.touches.length !== 1)
+                return;
+            const target = e.target;
+            if (target?.closest("input, textarea, select, [contenteditable='true'], video, audio, .carousel, .bento-carousel, .media-grid-scroll, .map-canvas-container, [data-prevent-swipe]")) {
+                return;
+            }
+            const touch = e.touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            deltaX = 0;
+            deltaY = 0;
+            isSwiping = false;
+            isVertical = false;
+        }, { passive: true });
+        track.addEventListener("touchmove", (e) => {
+            if (e.touches.length !== 1 || isVertical)
+                return;
+            const touch = e.touches[0];
+            deltaX = touch.clientX - startX;
+            deltaY = touch.clientY - startY;
+            if (!isSwiping) {
+                if (Math.abs(deltaY) > 8 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                    isVertical = true;
+                    return;
+                }
+                if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                    isSwiping = true;
+                }
+            }
+            if (isSwiping) {
+                if (e.cancelable)
+                    e.preventDefault();
+                const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+                const maxIdx = Math.max(0, tabs.length - 1);
+                let currentDelta = deltaX;
+                const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+                const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+                if ((safeIdx === 0 && currentDelta > 0) || (safeIdx === maxIdx && currentDelta < 0)) {
+                    currentDelta = currentDelta * 0.3;
+                }
+                track.style.transition = "none";
+                track.style.transform = `translate3d(calc(-${safeIdx * 100}% + ${currentDelta}px), 0, 0)`;
+            }
+        }, { passive: false });
+        const onTouchEnd = () => {
+            if (!isSwiping)
+                return;
+            isSwiping = false;
+            const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+            const maxIdx = Math.max(0, tabs.length - 1);
+            const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+            const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+            track.style.transition = "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)";
+            if (deltaX < -50 && safeIdx < maxIdx) {
+                this.show(tabs[safeIdx + 1]);
+            }
+            else if (deltaX > 50 && safeIdx > 0) {
+                this.show(tabs[safeIdx - 1]);
+            }
+            else {
+                track.style.transform = `translate3d(-${safeIdx * 100}%, 0, 0)`;
+            }
+        };
+        track.addEventListener("touchend", onTouchEnd, { passive: true });
+        track.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    }
+    show(tab, animate = true) {
         const selector = tab.getAttribute("data-tabs");
         const panel = selector ? document.querySelector(selector) : null;
         if (!panel)
             return this;
-        this.element.querySelectorAll(this.tabSelector).forEach((item) => {
+        const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+        const targetIndex = tabs.indexOf(tab);
+        const track = this.getSliderTrack();
+        const isSlider = Boolean(track && track.contains(panel));
+        tabs.forEach((item) => {
             const selected = item === tab;
             item.setAttribute("role", item.getAttribute("role") || "tab");
             item.setAttribute("aria-selected", String(selected));
+            item.classList.toggle("active", selected);
             item.tabIndex = selected ? 0 : -1;
             const targetSelector = item.getAttribute("data-tabs");
             const target = targetSelector ? document.querySelector(targetSelector) : null;
-            if (target)
-                target.hidden = !selected;
+            if (target) {
+                target.classList.toggle("active", selected);
+                if (!isSlider) {
+                    target.hidden = !selected;
+                }
+            }
         });
-        if (this.panelSelector) {
+        if (this.panelSelector && !isSlider) {
             document.querySelectorAll(this.panelSelector).forEach((item) => {
                 if (item !== panel)
                     item.hidden = true;
             });
         }
         panel.setAttribute("role", panel.getAttribute("role") || "tabpanel");
-        emit(this.element, "tabs:show", { tab, panel, instance: this });
+        if (isSlider && track && targetIndex >= 0) {
+            track.style.transition = animate ? "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)" : "none";
+            track.style.transform = `translate3d(-${targetIndex * 100}%, 0, 0)`;
+        }
+        tab.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+        emit(this.element, "tabs:show", { tab, panel, index: targetIndex, instance: this });
         return this;
     }
 }

package/dist/aksara.js

@@ -991,6 +991,7 @@ class Tabs extends Component {
                 this.show(next);
             }
         });
+        this.bindSliderGestures();
         this.activateInitial();
     }
     updateOptions(options = {}) {
@@ -1030,29 +1031,128 @@ class Tabs extends Component {
         if (initial)
             this.show(initial);
     }
-    show(tab) {
+    getSliderTrack() {
+        const wrapper = this.element.closest(".tabs-wrapper") ||
+            this.element.closest(".feed-main-col, main, .page-container, [data-tabs-wrapper]") ||
+            this.element.parentElement;
+        return (wrapper?.querySelector(".tabs-slider-track, [data-tabs-slider]") ||
+            document.querySelector(".tabs-slider-track, [data-tabs-slider]"));
+    }
+    bindSliderGestures() {
+        const track = this.getSliderTrack();
+        if (!track || track.__sliderGesturesBound)
+            return;
+        track.__sliderGesturesBound = true;
+        let startX = 0;
+        let startY = 0;
+        let deltaX = 0;
+        let deltaY = 0;
+        let isSwiping = false;
+        let isVertical = false;
+        track.addEventListener("touchstart", (e) => {
+            if (e.touches.length !== 1)
+                return;
+            const target = e.target;
+            if (target?.closest("input, textarea, select, [contenteditable='true'], video, audio, .carousel, .bento-carousel, .media-grid-scroll, .map-canvas-container, [data-prevent-swipe]")) {
+                return;
+            }
+            const touch = e.touches[0];
+            startX = touch.clientX;
+            startY = touch.clientY;
+            deltaX = 0;
+            deltaY = 0;
+            isSwiping = false;
+            isVertical = false;
+        }, { passive: true });
+        track.addEventListener("touchmove", (e) => {
+            if (e.touches.length !== 1 || isVertical)
+                return;
+            const touch = e.touches[0];
+            deltaX = touch.clientX - startX;
+            deltaY = touch.clientY - startY;
+            if (!isSwiping) {
+                if (Math.abs(deltaY) > 8 && Math.abs(deltaY) > Math.abs(deltaX)) {
+                    isVertical = true;
+                    return;
+                }
+                if (Math.abs(deltaX) > 8 && Math.abs(deltaX) > Math.abs(deltaY)) {
+                    isSwiping = true;
+                }
+            }
+            if (isSwiping) {
+                if (e.cancelable)
+                    e.preventDefault();
+                const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+                const maxIdx = Math.max(0, tabs.length - 1);
+                let currentDelta = deltaX;
+                const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+                const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+                if ((safeIdx === 0 && currentDelta > 0) || (safeIdx === maxIdx && currentDelta < 0)) {
+                    currentDelta = currentDelta * 0.3;
+                }
+                track.style.transition = "none";
+                track.style.transform = `translate3d(calc(-${safeIdx * 100}% + ${currentDelta}px), 0, 0)`;
+            }
+        }, { passive: false });
+        const onTouchEnd = () => {
+            if (!isSwiping)
+                return;
+            isSwiping = false;
+            const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+            const maxIdx = Math.max(0, tabs.length - 1);
+            const currentIdx = tabs.findIndex((t) => t.classList.contains("active"));
+            const safeIdx = currentIdx >= 0 ? currentIdx : 0;
+            track.style.transition = "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)";
+            if (deltaX < -50 && safeIdx < maxIdx) {
+                this.show(tabs[safeIdx + 1]);
+            }
+            else if (deltaX > 50 && safeIdx > 0) {
+                this.show(tabs[safeIdx - 1]);
+            }
+            else {
+                track.style.transform = `translate3d(-${safeIdx * 100}%, 0, 0)`;
+            }
+        };
+        track.addEventListener("touchend", onTouchEnd, { passive: true });
+        track.addEventListener("touchcancel", onTouchEnd, { passive: true });
+    }
+    show(tab, animate = true) {
         const selector = tab.getAttribute("data-tabs");
         const panel = selector ? document.querySelector(selector) : null;
         if (!panel)
             return this;
-        this.element.querySelectorAll(this.tabSelector).forEach((item) => {
+        const tabs = Array.from(this.element.querySelectorAll(this.tabSelector));
+        const targetIndex = tabs.indexOf(tab);
+        const track = this.getSliderTrack();
+        const isSlider = Boolean(track && track.contains(panel));
+        tabs.forEach((item) => {
             const selected = item === tab;
             item.setAttribute("role", item.getAttribute("role") || "tab");
             item.setAttribute("aria-selected", String(selected));
+            item.classList.toggle("active", selected);
             item.tabIndex = selected ? 0 : -1;
             const targetSelector = item.getAttribute("data-tabs");
             const target = targetSelector ? document.querySelector(targetSelector) : null;
-            if (target)
-                target.hidden = !selected;
+            if (target) {
+                target.classList.toggle("active", selected);
+                if (!isSlider) {
+                    target.hidden = !selected;
+                }
+            }
         });
-        if (this.panelSelector) {
+        if (this.panelSelector && !isSlider) {
             document.querySelectorAll(this.panelSelector).forEach((item) => {
                 if (item !== panel)
                     item.hidden = true;
             });
         }
         panel.setAttribute("role", panel.getAttribute("role") || "tabpanel");
-        emit(this.element, "tabs:show", { tab, panel, instance: this });
+        if (isSlider && track && targetIndex >= 0) {
+            track.style.transition = animate ? "transform 0.3s cubic-bezier(0.25, 1, 0.5, 1)" : "none";
+            track.style.transform = `translate3d(-${targetIndex * 100}%, 0, 0)`;
+        }
+        tab.scrollIntoView({ behavior: "smooth", inline: "center", block: "nearest" });
+        emit(this.element, "tabs:show", { tab, panel, index: targetIndex, instance: this });
         return this;
     }
 }