@mohasinac/appkit 3.9.1 → 4.0.2

package/dist/ui/DataTable.js

@@ -123,7 +123,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                 mobileCardRender &&
                 renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx(Div, { className: "appkit-data-table__mobile-cards", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
                         ? [...selectedIds, id]
-                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: "appkit-data-table__wrapper", children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx(Div, { className: `appkit-data-table__wrapper ${mobileCardRender ? "appkit-data-table__wrapper--has-mobile-cards" : ""}`, children: _jsx(Div, { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx(Checkbox, { bare: true, className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
                                                     paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
                                                     const pageIds = paginatedData.map(keyExtractor);
                                                     onSelectionChange?.(e.target.checked

package/dist/ui/DataTable.style.css

@@ -190,3 +190,13 @@
     display: none;
   }
 }
+
+/* When mobileCardRender is supplied, the desktop table wrapper must hide
+   below the same breakpoint the mobile-cards block uses above — otherwise
+   both render simultaneously on small screens. Wrapper has no modifier
+   (and always renders) when mobileCardRender is absent. */
+@media (max-width: 767px) {
+  .appkit-data-table__wrapper--has-mobile-cards {
+    display: none;
+  }
+}

package/dist/ui/components/DetailPageTabs.d.ts

@@ -31,4 +31,4 @@ export interface DetailPageTabsProps {
  *
  * W1-14 — extracted 2026-05-23.
  */
-export declare function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }: DetailPageTabsProps): React.JSX.Element;
+export declare function DetailPageTabs({ tabs, activeTab, defaultTab, onTabChange, className, }: DetailPageTabsProps): React.JSX.Element;

package/dist/ui/components/DetailPageTabs.js

@@ -1,11 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Div } from "./Div";
-import { Span } from "./Typography";
-const __O = {
-    xAuto: "overflow-x-auto",
-};
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./Tabs";
 /**
  * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
  * pages. Renders an accessible trigger strip + a single visible panel.
@@ -14,29 +10,9 @@ const __O = {
  *
  * W1-14 — extracted 2026-05-23.
  */
-export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }) {
-    const [internalActive, setInternalActive] = useState(defaultTab ?? tabs[0]?.id ?? "");
-    const activeTab = activeTabProp ?? internalActive;
-    const active = tabs.find((t) => t.id === activeTab) ?? tabs[0];
-    const handleChange = (id) => {
-        if (activeTabProp === undefined)
-            setInternalActive(id);
-        onTabChange?.(id);
-    };
-    return (_jsxs(Div, { className: [
-            "appkit-detail-tabs",
-            "space-y-4",
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: `flex gap-2 border-b border-[var(--appkit-color-border)] ${__O.xAuto}`, children: tabs.map((tab) => {
-                    const isActive = tab.id === active?.id;
-                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": `detail-tab-panel-${tab.id}`, id: `detail-tab-trigger-${tab.id}`, disabled: tab.disabled, onClick: () => handleChange(tab.id), className: [
-                            "flex-shrink-0 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
-                            isActive
-                                ? "border-[var(--appkit-color-primary)] text-[var(--appkit-color-text)]"
-                                : "border-transparent text-[var(--appkit-color-text-muted)] hover:text-zinc-700 hover:text-[var(--appkit-color-text-muted)]",
-                            tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
-                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx(Span, { size: "xs", className: "ml-2 inline-flex items-center justify-center rounded-full bg-[var(--appkit-color-surface)] px-2 py-0.5", children: tab.count })) : null] }, tab.id));
-                }) }), active ? (_jsx(Div, { role: "tabpanel", id: `detail-tab-panel-${active.id}`, "aria-labelledby": `detail-tab-trigger-${active.id}`, children: active.content })) : null] }));
+export function DetailPageTabs({ tabs, activeTab, defaultTab, onTabChange, className, }) {
+    return (_jsxs(Tabs, { value: activeTab, defaultValue: defaultTab ?? tabs[0]?.id ?? "", onChange: onTabChange, className: ["appkit-detail-tabs", "space-y-4", className].filter(Boolean).join(" "), children: [_jsx(TabsList, { children: tabs.map((tab) => {
+                    const label = typeof tab.label === "string" ? tab.label : undefined;
+                    return (_jsx(TabsTrigger, { value: tab.id, disabled: tab.disabled, badge: tab.count, label: label, children: tab.label }, tab.id));
+                }) }), tabs.map((tab) => (_jsx(TabsContent, { value: tab.id, children: _jsx(Div, { children: tab.content }) }, tab.id)))] }));
 }

package/dist/ui/components/HorizontalScroller.d.ts

@@ -29,7 +29,7 @@ export interface HorizontalScrollerProps<T = unknown> {
     minItemWidth?: number;
     pauseOnHover?: boolean;
     itemClassName?: string;
-    /** Infinite-loop mode: circular slot rendering with scroll teleport — no array cloning */
+    /** When the scroller reaches the last item, snap instantly back to the first instead of stopping. */
     loop?: boolean;
 }
 export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, }: HorizontalScrollerProps<T>): import("react").JSX.Element;

package/dist/ui/components/HorizontalScroller.js

@@ -31,132 +31,60 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
     const containerRef = (externalRef ??
         internalRef);
     const autoScrollTimer = useRef(undefined);
-    // Prevents re-entrant teleports during the instantaneous scrollLeft reset
-    const isJumping = useRef(false);
-    // Prevents re-running the initial scroll-to-real-start on every itemWidth update
-    const loopInitialized = useRef(false);
+    // Tracks the pending "restore smooth scrolling" rAF so a fast reset (autoScroll
+    // firing again, or a manual arrow click) can't leave a stale callback that fires
+    // after — and clobbers — a newer scroll-behavior change.
+    const instantScrollRaf = useRef(undefined);
     const normalizedItems = Array.isArray(items) ? items : [];
     const itemsMode = Array.isArray(items) && renderItem != null;
     const itemCount = normalizedItems.length;
-    // Number of clone slots on each side — fixed size, computed once from perView hint.
-    // Using Math.min so tiny lists don't double-render more slots than they have items.
-    const loopCloneCount = loop && itemsMode && rows <= 1 && itemCount > 0
-        ? Math.min(itemCount, typeof perView === "number" ? perView : 3)
-        : 0;
-    // Grid mode (rows > 1): items are grouped into full-width "slides". Looping here
-    // clones exactly one slide on each side (the slide itself is the full stride, so a
-    // single buffer slide is enough) and teleports across a full cycle at the boundary —
-    // same technique as the single-item loop above, just at slide granularity.
     const gridMode = itemsMode && rows > 1;
     const gridCols = colCount > 0 ? colCount : 3;
     const gridCardsPerSlide = rows * gridCols;
     const gridSlideCount = gridMode
         ? Math.ceil(itemCount / gridCardsPerSlide)
         : 0;
-    const gridLoopActive = loop && gridMode && gridSlideCount > 1;
-    // On first paint after itemWidth resolves, scroll to the first *real* item
-    // (skipping the left clone slots that provide backward-wrap buffer).
-    useEffect(() => {
-        if (!loop || loopCloneCount === 0 || itemWidth === undefined)
-            return;
-        const el = containerRef.current;
-        if (!el || loopInitialized.current)
-            return;
-        loopInitialized.current = true;
-        el.style.scrollBehavior = "auto";
-        el.scrollLeft = loopCloneCount * (itemWidth + gap);
-        requestAnimationFrame(() => {
-            el.style.scrollBehavior = "";
-        });
-    }, [loop, loopCloneCount, itemWidth, gap, containerRef]);
-    // Circular teleporter: when scroll enters a clone zone, jump by exactly one
-    // full cycle so the viewport content is unchanged but we're back in real territory.
-    const handleScrollLoop = useCallback(() => {
-        if (!loop || loopCloneCount === 0 || itemWidth === undefined)
-            return;
-        const el = containerRef.current;
-        if (!el || isJumping.current)
-            return;
-        const stride = itemWidth + gap;
-        const cycleWidth = itemCount * stride;
-        // scrollLeft where real items start and end
-        const realStart = loopCloneCount * stride;
-        const realEnd = realStart + cycleWidth;
-        if (el.scrollLeft < realStart - stride * 0.5) {
-            // Entered left clone zone — jump forward one cycle
-            isJumping.current = true;
-            el.style.scrollBehavior = "auto";
-            el.scrollLeft += cycleWidth;
-            requestAnimationFrame(() => {
-                isJumping.current = false;
-                el.style.scrollBehavior = "";
-            });
-        }
-        else if (el.scrollLeft > realEnd - el.clientWidth + stride * 0.5) {
-            // Entered right clone zone — jump backward one cycle
-            isJumping.current = true;
-            el.style.scrollBehavior = "auto";
-            el.scrollLeft -= cycleWidth;
-            requestAnimationFrame(() => {
-                isJumping.current = false;
-                el.style.scrollBehavior = "";
-            });
+    // Instantly jumps to a scroll position — used to wrap the loop back to the start
+    // (or to the end, for prev-at-start) instead of layering a teleport on top of an
+    // in-flight smooth scroll, which is what produced the old flicker/oscillation.
+    // Cancels any previously-scheduled "restore smooth scrolling" rAF first so a
+    // rapid-fire reset (autoScroll ticking again, or an arrow click) can't leave a
+    // stale callback that fires later and clobbers a newer scroll-behavior change.
+    const instantScrollTo = useCallback((el, left) => {
+        if (instantScrollRaf.current !== undefined) {
+            cancelAnimationFrame(instantScrollRaf.current);
         }
-    }, [loop, loopCloneCount, itemWidth, gap, itemCount, containerRef]);
-    // Prevents re-running the initial scroll-to-real-start on every resize in grid loop mode
-    const gridLoopInitialized = useRef(false);
-    // On first paint, scroll past the prepended clone slide to the first *real* slide.
-    useEffect(() => {
-        if (!gridLoopActive)
-            return;
-        const el = containerRef.current;
-        if (!el || gridLoopInitialized.current)
-            return;
-        gridLoopInitialized.current = true;
-        const stride = el.clientWidth + gap;
         el.style.scrollBehavior = "auto";
-        el.scrollLeft = stride;
-        requestAnimationFrame(() => {
+        el.scrollLeft = left;
+        instantScrollRaf.current = requestAnimationFrame(() => {
             el.style.scrollBehavior = "";
+            instantScrollRaf.current = undefined;
         });
-    }, [gridLoopActive, gap, containerRef]);
-    // Circular teleporter for grid mode — same idea as handleScrollLoop, at slide granularity.
-    const handleGridScrollLoop = useCallback(() => {
-        if (!gridLoopActive)
-            return;
-        const el = containerRef.current;
-        if (!el || isJumping.current)
-            return;
-        const stride = el.clientWidth + gap;
-        const cycleWidth = gridSlideCount * stride;
-        const realStart = stride; // after the 1 prepended clone slide
-        const realEnd = realStart + cycleWidth;
-        if (el.scrollLeft < realStart - stride * 0.5) {
-            isJumping.current = true;
-            el.style.scrollBehavior = "auto";
-            el.scrollLeft += cycleWidth;
-            requestAnimationFrame(() => {
-                isJumping.current = false;
-                el.style.scrollBehavior = "";
-            });
-        }
-        else if (el.scrollLeft > realEnd - el.clientWidth + stride * 0.5) {
-            isJumping.current = true;
-            el.style.scrollBehavior = "auto";
-            el.scrollLeft -= cycleWidth;
-            requestAnimationFrame(() => {
-                isJumping.current = false;
-                el.style.scrollBehavior = "";
-            });
-        }
-    }, [gridLoopActive, gap, gridSlideCount, containerRef]);
+    }, []);
+    // Cancel any pending rAF on unmount so it never fires against a detached node.
+    useEffect(() => {
+        return () => {
+            if (instantScrollRaf.current !== undefined) {
+                cancelAnimationFrame(instantScrollRaf.current);
+            }
+        };
+    }, []);
     const scrollBy = useCallback((direction) => {
         const el = containerRef.current;
         if (!el)
             return;
         const width = el.clientWidth;
+        const maxScroll = el.scrollWidth - width;
+        if (loop && direction === 1 && el.scrollLeft >= maxScroll - 1) {
+            instantScrollTo(el, 0);
+            return;
+        }
+        if (loop && direction === -1 && el.scrollLeft <= 1) {
+            instantScrollTo(el, maxScroll);
+            return;
+        }
         el.scrollBy({ left: direction * width * 0.8, behavior: "smooth" });
-    }, [containerRef]);
+    }, [containerRef, loop, instantScrollTo]);
     const updateExtents = useCallback(() => {
         const el = containerRef.current;
         if (!el)
@@ -188,98 +116,57 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             const el = containerRef.current;
             if (!el)
                 return;
-            // Always advance; handleScrollLoop teleports when clone zone is reached
+            const maxScroll = el.scrollWidth - el.clientWidth;
+            const atRealEnd = maxScroll <= 1 || el.scrollLeft >= maxScroll - 1;
+            if (atRealEnd) {
+                if (loop)
+                    instantScrollTo(el, 0);
+                return;
+            }
             el.scrollBy({ left: el.clientWidth * 0.8, behavior: "smooth" });
         }, autoScrollInterval);
         return () => clearInterval(autoScrollTimer.current);
-    }, [autoScroll, isPaused, autoScrollInterval, containerRef]);
+    }, [autoScroll, isPaused, autoScrollInterval, loop, instantScrollTo, containerRef]);
     useEffect(() => {
-        if (!perView && !loop)
+        if (!perView)
             return;
         const el = containerRef.current;
         if (!el)
             return;
         const observer = new ResizeObserver(([entry]) => {
             const w = entry.contentRect.width;
-            if (perView) {
-                const count = resolvePerView(perView, w);
-                if (count > 0) {
-                    setColCount(count);
-                    setItemWidth((w - (count - 1) * gap) / count);
-                }
-            }
-            else {
-                // loop is true but no perView hint was given: items render at their
-                // natural width, so measure a real rendered item to get the scroll
-                // stride the clone-buffer offset / edge teleporter need — without
-                // this, itemWidth never resolves and loop mode never initializes.
-                const item = el.querySelector(".appkit-hscroller__item");
-                if (item)
-                    setItemWidth(item.getBoundingClientRect().width);
+            const count = resolvePerView(perView, w);
+            if (count > 0) {
+                setColCount(count);
+                setItemWidth((w - (count - 1) * gap) / count);
             }
             updateExtents();
         });
         observer.observe(el);
         return () => observer.disconnect();
-    }, [perView, loop, gap, containerRef, updateExtents]);
+    }, [perView, gap, containerRef, updateExtents]);
     // Recompute extents when content size changes (itemWidth resolved, items count changes).
     useEffect(() => {
         updateExtents();
     }, [updateExtents, itemWidth, itemCount]);
     const content = itemsMode ? (rows > 1 ? (
     // Grid mode: group items into slides of (rows × colCount) cards.
-    // Loop mode prepends a clone of the last slide and appends a clone of the
-    // first slide; handleGridScrollLoop teleports across a full cycle at the
-    // boundary so the strip appears to scroll infinitely.
-    (() => {
-        const renderSlide = (slideIndex, key, isClone) => {
-            const slideItems = normalizedItems.slice(slideIndex * gridCardsPerSlide, (slideIndex + 1) * gridCardsPerSlide);
-            return (_jsx("div", { className: "appkit-hscroller__slide", style: {
-                    display: "grid",
-                    gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
-                    gap: `${gap}px`,
-                    width: "100%",
-                    flexShrink: 0,
-                }, "aria-hidden": isClone ? true : undefined, children: slideItems.map((item, idx) => (_jsx("div", { className: [
-                        "appkit-hscroller__item",
-                        snapToItems ? "appkit-hscroller__item--snap" : "",
-                        itemClassName,
-                    ]
-                        .filter(Boolean)
-                        .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * gridCardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * gridCardsPerSlide + idx) : slideIndex * gridCardsPerSlide + idx))) }, key));
-        };
-        const realSlides = Array.from({ length: gridSlideCount }, (_, slideIndex) => renderSlide(slideIndex, `slide-${slideIndex}`, false));
-        if (!gridLoopActive)
-            return realSlides;
-        return [
-            renderSlide(gridSlideCount - 1, "slide-clone-start", true),
-            ...realSlides,
-            renderSlide(0, "slide-clone-end", true),
-        ];
-    })()) : loop && itemCount > 0 ? (
-    // Circular loop: fixed (itemCount + 2×loopCloneCount) DOM slots.
-    // Each slot maps to a real item via modulo — no array cloning, no list growth.
-    // Left slots  [0 .. loopCloneCount-1]              → tail of real list (left buffer)
-    // Real slots  [loopCloneCount .. loopCloneCount+n-1] → items[0..n-1]
-    // Right slots [loopCloneCount+n .. end]             → head of real list (right buffer)
-    Array.from({ length: itemCount + 2 * loopCloneCount }, (_, i) => {
-        const realIndex = ((i - loopCloneCount) % itemCount + itemCount) % itemCount;
-        const item = normalizedItems[realIndex];
-        const isClone = i < loopCloneCount || i >= loopCloneCount + itemCount;
-        return (_jsx("div", { className: [
-                "appkit-hscroller__item",
-                snapToItems ? "appkit-hscroller__item--snap" : "",
-                itemClassName,
-            ]
-                .filter(Boolean)
-                .join(" "), style: itemWidth !== undefined
-                ? { width: itemWidth, flexShrink: 0 }
-                : minItemWidth
-                    ? { minWidth: minItemWidth }
-                    : undefined, "aria-hidden": isClone ? true : undefined, children: renderItem(item, realIndex) }, `loop-slot-${i}`));
-    })) : (
-    // Normal single row (no loop)
-    normalizedItems.map((item, i) => (_jsx("div", { className: [
+    Array.from({ length: gridSlideCount }, (_, slideIndex) => {
+        const slideItems = normalizedItems.slice(slideIndex * gridCardsPerSlide, (slideIndex + 1) * gridCardsPerSlide);
+        return (_jsx("div", { className: "appkit-hscroller__slide", style: {
+                display: "grid",
+                gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
+                gap: `${gap}px`,
+                width: "100%",
+                flexShrink: 0,
+            }, children: slideItems.map((item, idx) => (_jsx("div", { className: [
+                    "appkit-hscroller__item",
+                    snapToItems ? "appkit-hscroller__item--snap" : "",
+                    itemClassName,
+                ]
+                    .filter(Boolean)
+                    .join(" "), style: minItemWidth ? { minWidth: minItemWidth } : undefined, children: renderItem(item, slideIndex * gridCardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * gridCardsPerSlide + idx) : slideIndex * gridCardsPerSlide + idx))) }, `slide-${slideIndex}`));
+    })) : (normalizedItems.map((item, i) => (_jsx("div", { className: [
             "appkit-hscroller__item",
             snapToItems ? "appkit-hscroller__item--snap" : "",
             itemClassName,
@@ -290,40 +177,34 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             : minItemWidth
                 ? { minWidth: minItemWidth }
                 : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : (children);
-    const hoverHandlers = pauseOnHover
+    // Pauses autoScroll for the duration of any user interaction — hover, touch,
+    // keyboard focus (arrow-key nav), or an active wheel/drag scroll — so autoplay
+    // never fights a scroll the user is in the middle of driving themselves.
+    const interactionHandlers = pauseOnHover
         ? {
             onMouseEnter: () => setIsPaused(true),
             onMouseLeave: () => setIsPaused(false),
             onTouchStart: () => setIsPaused(true),
             onTouchEnd: () => setIsPaused(false),
             onTouchCancel: () => setIsPaused(false),
+            onFocus: () => setIsPaused(true),
+            onBlur: () => setIsPaused(false),
+            onWheel: () => setIsPaused(true),
         }
         : {};
     const combinedOnScroll = () => {
-        if (gridMode) {
-            if (gridLoopActive)
-                handleGridScrollLoop();
-            else
-                updateExtents();
-        }
-        else {
-            if (loop)
-                handleScrollLoop();
-            if (!loop)
-                updateExtents();
-        }
+        updateExtents();
         onScroll?.();
     };
     if (showArrows) {
-        const effectiveLoop = gridMode ? gridLoopActive : loop;
-        const prevDisabled = !effectiveLoop && atStart;
-        const nextDisabled = !effectiveLoop && atEnd;
-        const arrowsHidden = !effectiveLoop && atStart && atEnd; // no scrollable overflow
+        const prevDisabled = !loop && atStart;
+        const nextDisabled = !loop && atEnd;
+        const arrowsHidden = !loop && atStart && atEnd; // no scrollable overflow
         return (_jsxs("div", { className: ["appkit-hscroller appkit-hscroller--with-arrows", className]
                 .filter(Boolean)
-                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
+                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-511", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", "aria-disabled": prevDisabled || undefined, disabled: prevDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--prev appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), !arrowsHidden && (_jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", "aria-disabled": nextDisabled || undefined, disabled: nextDisabled, className: `appkit-hscroller__arrow appkit-hscroller__arrow--next appkit-hscroller__arrow--${arrowSize}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
     }
-    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...hoverHandlers, "data-section": "horizontalscroller-div-513", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
+    return (_jsxs("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-513", children: [showFadeEdges && (_jsxs(_Fragment, { children: [_jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--left" }), _jsx("div", { className: "appkit-hscroller__fade appkit-hscroller__fade--right" })] })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "data-section": "horizontalscroller-div-514", children: content })] }));
 }
 function scrollerCls(snapToItems, showScrollbar) {
     return [

package/dist/ui/components/Tabs.d.ts

@@ -15,6 +15,14 @@ export interface TabsTriggerProps {
     disabled?: boolean;
     className?: string;
     children?: React.ReactNode;
+    /** Optional count badge rendered as a small pill after the label. */
+    badge?: number;
+    /**
+     * Plain-text label to use for the collapsed mobile dropdown's option text
+     * when `children` isn't a plain string (e.g. it renders a badge pill).
+     * Falls back to `value` when omitted and `children` isn't a string.
+     */
+    label?: string;
 }
 export interface TabsContentProps {
     value: string;
@@ -23,6 +31,6 @@ export interface TabsContentProps {
 }
 export declare function Tabs({ defaultValue, value, onChange, className, children, }: TabsProps): React.JSX.Element;
 export declare function TabsList({ className, children }: TabsListProps): React.JSX.Element;
-export declare function TabsTrigger({ value, disabled, className, children, }: TabsTriggerProps): React.JSX.Element;
+export declare function TabsTrigger({ value, disabled, className, children, badge, }: TabsTriggerProps): React.JSX.Element;
 export declare function TabsContent({ value, className, children, }: TabsContentProps): React.JSX.Element | null;
 export default Tabs;

package/dist/ui/components/Tabs.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { createContext, useContext, useMemo, useState } from "react";
 import { Select } from "./Select";
 const UI_TABS = {
@@ -7,6 +7,7 @@ const UI_TABS = {
     listDropdown: "appkit-tabs-list--dropdown",
     trigger: "appkit-tabs-trigger",
     content: "appkit-tabs-content",
+    badge: "appkit-tabs-trigger__badge",
 };
 /** Past this many items, TabsList renders a <Select> dropdown instead of a
  * horizontal row — a scrollable row of 6+ tabs is unreadable/unreachable on
@@ -34,19 +35,23 @@ export function TabsList({ className = "", children }) {
     const { active, setActive } = useContext(TabsContext);
     const items = React.Children.toArray(children).filter((child) => React.isValidElement(child));
     if (items.length > TABS_DROPDOWN_THRESHOLD) {
-        const options = items.map((item) => ({
-            value: item.props.value,
-            label: typeof item.props.children === "string" ? item.props.children : item.props.value,
-            disabled: item.props.disabled,
-        }));
+        const options = items.map((item) => {
+            const baseLabel = item.props.label ??
+                (typeof item.props.children === "string" ? item.props.children : item.props.value);
+            return {
+                value: item.props.value,
+                label: item.props.badge ? `${baseLabel} (${item.props.badge})` : baseLabel,
+                disabled: item.props.disabled,
+            };
+        });
         return (_jsx(Select, { bare: true, "aria-label": "Tabs", role: "tablist", options: options, value: active, onValueChange: setActive, className: [UI_TABS.list, UI_TABS.listDropdown, className].filter(Boolean).join(" ") }));
     }
     return (_jsx("div", { role: "tablist", className: [UI_TABS.list, className].filter(Boolean).join(" "), "data-section": "tabs-div-615", children: children }));
 }
-export function TabsTrigger({ value, disabled, className = "", children, }) {
+export function TabsTrigger({ value, disabled, className = "", children, badge, }) {
     const { active, setActive } = useContext(TabsContext);
     const isActive = active === value;
-    return (_jsx("button", { role: "tab", type: "button", disabled: disabled, "aria-selected": isActive, onClick: () => setActive(value), className: [UI_TABS.trigger, className].filter(Boolean).join(" "), children: children }));
+    return (_jsxs("button", { role: "tab", type: "button", disabled: disabled, "aria-selected": isActive, onClick: () => setActive(value), className: [UI_TABS.trigger, className].filter(Boolean).join(" "), children: [children, typeof badge === "number" && badge > 0 && (_jsx("span", { className: UI_TABS.badge, children: badge > 99 ? "99+" : badge }))] }));
 }
 export function TabsContent({ value, className = "", children, }) {
     const { active } = useContext(TabsContext);

package/dist/ui/components/Tabs.style.css

@@ -49,6 +49,25 @@
   opacity: 0.5;
 }
 
+.appkit-tabs-trigger__badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-left: 0.5rem;
+  padding: 0 0.4rem;
+  min-width: 1.25rem;
+  height: 1.25rem;
+  border-radius: 9999px;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  background: var(--appkit-color-surface-elevated);
+  color: var(--appkit-color-text-muted);
+}
+.appkit-tabs-trigger[aria-selected="true"] .appkit-tabs-trigger__badge {
+  background: color-mix(in srgb, var(--appkit-color-primary) 15%, transparent);
+  color: var(--appkit-color-primary);
+}
+
 .appkit-tabs-content {
   padding-top: 1rem;
   padding-bottom: 1rem;

package/dist/ui/components/index.style.css

@@ -22,7 +22,6 @@
 @import "./PriceDisplay.style.css";
 @import "./ItemRow.style.css";
 @import "./Tooltip.style.css";
-@import "./TabStrip.style.css";
 @import "./Layout.style.css";
 @import "./SortDropdown.style.css";
 @import "./TablePagination.style.css";

package/dist/ui/index.d.ts

@@ -113,8 +113,6 @@ export type { ItemRowProps } from "./components/ItemRow";
 export { ItemRow } from "./components/ItemRow";
 export type { HorizontalScrollerProps, PerViewConfig, } from "./components/HorizontalScroller";
 export { HorizontalScroller } from "./components/HorizontalScroller";
-export type { TabStripProps, TabStripTab } from "./components/TabStrip";
-export { TabStrip } from "./components/TabStrip";
 export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
 export type { SettingsSectionProps, ToggleRowProps } from "./components/SettingsSection";

package/dist/ui/index.js

@@ -59,7 +59,6 @@ export { SummaryCard } from "./components/SummaryCard";
 export { CountdownDisplay } from "./components/CountdownDisplay";
 export { ItemRow } from "./components/ItemRow";
 export { HorizontalScroller } from "./components/HorizontalScroller";
-export { TabStrip } from "./components/TabStrip";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
 export { SettingsSection, ToggleRow } from "./components/SettingsSection";
 export { DetailPageHero } from "./components/DetailPageHero";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "3.9.1",
+  "version": "4.0.2",
   "license": "MIT",
   "publishConfig": {
     "access": "public"