@mohasinac/appkit 2.3.2 → 2.4.1

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

@@ -7,29 +7,29 @@
 
 /* Variants */
 .appkit-card--flat {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
 }
 .appkit-card--default {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
 }
 .appkit-card--primary {
   background: var(--color-primary);
   color: var(--color-primary-foreground, white);
 }
 .appkit-card--outlined {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 1px solid #e4e4e7;
 }
 .appkit-card--bordered {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 2px solid #e4e4e7;
 }
 .appkit-card--elevated {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   box-shadow: 0 4px 6px -1px rgba(228, 228, 231, 0.5);
 }
 .appkit-card--interactive {
-  background: white;
+  background: var(--appkit-color-surface, #ffffff);
   border: 1px solid #e4e4e7;
   box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
 }
@@ -133,60 +133,58 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-card--flat,
-  .appkit-card--default {
-    background: #0f172a;
-  }
-  .appkit-card--outlined {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--bordered {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--elevated {
-    background: #0f172a;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
-  }
-  .appkit-card--interactive {
-    background: #0f172a;
-    border-color: #334155;
-  }
-  .appkit-card--glass {
-    border-color: rgba(51, 65, 85, 0.4);
-    background: rgba(15, 23, 42, 0.75);
-  }
-  .appkit-card--stat-indigo {
-    background: rgba(49, 46, 129, 0.4);
-    color: #c7d2fe;
-    border-color: rgba(99, 102, 241, 0.6);
-  }
-  .appkit-card--stat-teal {
-    background: rgba(19, 78, 74, 0.4);
-    color: #99f6e4;
-    border-color: rgba(20, 184, 166, 0.6);
-  }
-  .appkit-card--stat-amber {
-    background: rgba(120, 53, 15, 0.4);
-    color: #fde68a;
-    border-color: rgba(245, 158, 11, 0.6);
-  }
-  .appkit-card--stat-rose {
-    background: rgba(136, 19, 55, 0.4);
-    color: #fecdd3;
-    border-color: rgba(244, 63, 94, 0.6);
-  }
-  .appkit-card--stat-emerald {
-    background: rgba(6, 78, 59, 0.4);
-    color: #a7f3d0;
-    border-color: rgba(16, 185, 129, 0.6);
-  }
-  .appkit-card__header {
-    border-bottom-color: #334155;
-  }
-  .appkit-card__footer {
-    border-top-color: #334155;
-  }
+.dark .appkit-card--flat,
+.dark .appkit-card--default {
+  background: #0f172a;
+}
+.dark .appkit-card--outlined {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--bordered {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--elevated {
+  background: #0f172a;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
+}
+.dark .appkit-card--interactive {
+  background: #0f172a;
+  border-color: #334155;
+}
+.dark .appkit-card--glass {
+  border-color: rgba(51, 65, 85, 0.4);
+  background: rgba(15, 23, 42, 0.75);
+}
+.dark .appkit-card--stat-indigo {
+  background: rgba(49, 46, 129, 0.4);
+  color: #c7d2fe;
+  border-color: rgba(99, 102, 241, 0.6);
+}
+.dark .appkit-card--stat-teal {
+  background: rgba(19, 78, 74, 0.4);
+  color: #99f6e4;
+  border-color: rgba(20, 184, 166, 0.6);
+}
+.dark .appkit-card--stat-amber {
+  background: rgba(120, 53, 15, 0.4);
+  color: #fde68a;
+  border-color: rgba(245, 158, 11, 0.6);
+}
+.dark .appkit-card--stat-rose {
+  background: rgba(136, 19, 55, 0.4);
+  color: #fecdd3;
+  border-color: rgba(244, 63, 94, 0.6);
+}
+.dark .appkit-card--stat-emerald {
+  background: rgba(6, 78, 59, 0.4);
+  color: #a7f3d0;
+  border-color: rgba(16, 185, 129, 0.6);
+}
+.dark .appkit-card__header {
+  border-bottom-color: #334155;
+}
+.dark .appkit-card__footer {
+  border-top-color: #334155;
 }

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

@@ -89,25 +89,23 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-checkbox__input {
-    border-color: #475569;
-    background: #0f172a;
-  }
-  .appkit-checkbox__input:focus-visible {
-    box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
-  }
-  .appkit-checkbox__input:not(:disabled):hover {
-    border-color: #ec4899;
-  }
-  .appkit-checkbox__input:checked {
-    border-color: #ec4899;
-    background-color: #ec4899;
-  }
-  .appkit-checkbox__input--error {
-    border-color: #ef4444;
-  }
-  .appkit-checkbox__text {
-    color: #e4e4e7;
-  }
+.dark .appkit-checkbox__input {
+  border-color: #475569;
+  background: #0f172a;
+}
+.dark .appkit-checkbox__input:focus-visible {
+  box-shadow: 0 0 0 2px rgba(236, 72, 153, 0.3), 0 0 0 4px #020617;
+}
+.dark .appkit-checkbox__input:not(:disabled):hover {
+  border-color: #ec4899;
+}
+.dark .appkit-checkbox__input:checked {
+  border-color: #ec4899;
+  background-color: #ec4899;
+}
+.dark .appkit-checkbox__input--error {
+  border-color: #ef4444;
+}
+.dark .appkit-checkbox__text {
+  color: #e4e4e7;
 }

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

@@ -53,18 +53,16 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-stats-card {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-stats-card__label {
-    color: #a1a1aa;
-  }
-  .appkit-stats-card__trend--up {
-    color: #34d399;
-  }
-  .appkit-stats-card__trend--down {
-    color: #f87171;
-  }
+.dark .appkit-stats-card {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-stats-card__label {
+  color: #a1a1aa;
+}
+.dark .appkit-stats-card__trend--up {
+  color: #34d399;
+}
+.dark .appkit-stats-card__trend--down {
+  color: #f87171;
 }

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

@@ -32,15 +32,15 @@
   position: absolute;
   display: flex;
   flex-direction: column;
-  background: #ffffff;
-  border: 1px solid #e4e4e7;
+  background: var(--appkit-color-surface, #ffffff);
+  border: 1px solid var(--appkit-color-border, #e4e4e7);
   box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
   transition: transform 0.3s ease;
 }
 
 .dark .appkit-drawer__panel {
-  background: #0f172a;
-  border-color: #334155;
+  background: var(--appkit-color-surface, #0f172a);
+  border-color: var(--appkit-color-border, #334155);
 }
 
 .appkit-drawer__panel--left { left: 0; top: 0; bottom: 0; }
@@ -79,11 +79,11 @@
   width: 2.5rem;
   height: 0.25rem;
   border-radius: 9999px;
-  background: #d4d4d8;
+  background: var(--appkit-color-border, #d4d4d8);
 }
 
 .dark .appkit-drawer__drag {
-  background: #475569;
+  background: var(--appkit-color-border, #475569);
 }
 
 .appkit-drawer__header {
@@ -91,17 +91,18 @@
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.25rem;
-  border-bottom: 1px solid #f4f4f5;
+  border-bottom: 1px solid var(--appkit-color-border-subtle, #f4f4f5);
   flex-shrink: 0;
 }
 
 .dark .appkit-drawer__header {
-  border-bottom-color: #1e293b;
+  border-bottom-color: var(--appkit-color-border-subtle, #1e293b);
 }
 
 .appkit-drawer__title {
   font-size: 1rem;
   font-weight: 600;
+  color: var(--appkit-color-text, #18181b);
 }
 
 .appkit-drawer__close {
@@ -109,19 +110,22 @@
   min-height: 0;
   padding: 0.375rem;
   border-radius: 0.5rem;
-  color: #a1a1aa;
+  color: var(--appkit-color-text-faint, #a1a1aa);
+  transition: color 0.15s ease, background-color 0.15s ease;
 }
 
 .appkit-drawer__close:hover {
-  color: #3f3f46;
+  color: var(--appkit-color-text, #3f3f46);
+  background-color: var(--appkit-color-border-subtle, #f4f4f5);
 }
 
 .dark .appkit-drawer__close {
-  color: #71717a;
+  color: var(--appkit-color-text-faint, #71717a);
 }
 
 .dark .appkit-drawer__close:hover {
-  color: #cbd5e1;
+  color: var(--appkit-color-text-muted, #cbd5e1);
+  background-color: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-drawer__close-icon {
@@ -137,10 +141,10 @@
 
 .appkit-drawer__footer {
   flex-shrink: 0;
-  border-top: 1px solid #f4f4f5;
+  border-top: 1px solid var(--appkit-color-border-subtle, #f4f4f5);
   padding: 1rem 1.25rem;
 }
 
 .dark .appkit-drawer__footer {
-  border-top-color: #1e293b;
+  border-top-color: var(--appkit-color-border-subtle, #1e293b);
 }

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

@@ -82,31 +82,29 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-dropdown__menu {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-dropdown__item {
-    color: #e2e8f0;
-  }
-  .appkit-dropdown__item--active {
-    background: #1e293b;
-  }
-  .appkit-dropdown__item--destructive {
-    color: #f87171;
-  }
-  .appkit-dropdown__composed-menu {
-    border-color: #334155;
-    background: #0f172a;
-  }
-  .appkit-dropdown__composed-item {
-    color: #e2e8f0;
-  }
-  .appkit-dropdown__composed-item:hover {
-    background: #1e293b;
-  }
-  .appkit-dropdown__separator {
-    border-color: #334155;
-  }
+.dark .appkit-dropdown__menu {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-dropdown__item {
+  color: #e2e8f0;
+}
+.dark .appkit-dropdown__item--active {
+  background: #1e293b;
+}
+.dark .appkit-dropdown__item--destructive {
+  color: #f87171;
+}
+.dark .appkit-dropdown__composed-menu {
+  border-color: #334155;
+  background: #0f172a;
+}
+.dark .appkit-dropdown__composed-item {
+  color: #e2e8f0;
+}
+.dark .appkit-dropdown__composed-item:hover {
+  background: #1e293b;
+}
+.dark .appkit-dropdown__separator {
+  border-color: #334155;
 }

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

@@ -23,8 +23,6 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-empty-state__icon {
-    color: #64748b;
-  }
+.dark .appkit-empty-state__icon {
+  color: #64748b;
 }

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

@@ -29,5 +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 */
+    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, }: HorizontalScrollerProps<T>): import("react/jsx-runtime").JSX.Element;
+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-runtime").JSX.Element;

package/dist/ui/components/HorizontalScroller.js

@@ -21,13 +21,74 @@ function resolvePerView(perView, containerWidth) {
     }
     return 1;
 }
-export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", }) {
+export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
     const [isPaused, setIsPaused] = useState(false);
     const internalRef = useRef(null);
     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);
+    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 && itemCount > 0
+        ? Math.min(itemCount, typeof perView === "number" ? perView : 3)
+        : 0;
+    // 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 = "";
+            });
+        }
+    }, [loop, loopCloneCount, itemWidth, gap, itemCount, containerRef]);
     const scrollBy = useCallback((direction) => {
         const el = containerRef.current;
         if (!el)
@@ -48,9 +109,15 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
     useEffect(() => {
         if (!autoScroll || isPaused)
             return;
-        autoScrollTimer.current = setInterval(() => scrollBy(1), autoScrollInterval);
+        autoScrollTimer.current = setInterval(() => {
+            const el = containerRef.current;
+            if (!el)
+                return;
+            // Always advance; handleScrollLoop teleports when clone zone is reached
+            el.scrollBy({ left: el.clientWidth * 0.8, behavior: "smooth" });
+        }, autoScrollInterval);
         return () => clearInterval(autoScrollTimer.current);
-    }, [autoScroll, isPaused, autoScrollInterval, scrollBy]);
+    }, [autoScroll, isPaused, autoScrollInterval, containerRef]);
     useEffect(() => {
         if (!perView)
             return;
@@ -67,20 +134,10 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         observer.observe(el);
         return () => observer.disconnect();
     }, [perView, gap, containerRef]);
-    const normalizedItems = Array.isArray(items) ? items : [];
-    const itemsMode = Array.isArray(items) && renderItem != null;
-    const scrollerCls = [
-        "appkit-hscroller__track",
-        snapToItems ? "appkit-hscroller__track--snap" : "",
-        !showScrollbar ? "appkit-hscroller__track--no-scrollbar" : "",
-    ]
-        .filter(Boolean)
-        .join(" ");
     const content = itemsMode ? (rows > 1 ? (
     // Grid mode: group items into slides with rows x cols
-    // On mobile: 1 card centered, on larger screens: 2x3 grid
     normalizedItems.reduce((slides, item, i) => {
-        const cardsPerSlide = 6; // Always 6 cards per slide (2x3 grid)
+        const cardsPerSlide = 6;
         const slideIndex = Math.floor(i / cardsPerSlide);
         const itemInSlide = i % cardsPerSlide;
         const rowIndex = Math.floor(itemInSlide / 3);
@@ -88,7 +145,6 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         if (!slides[slideIndex]) {
             slides[slideIndex] = (_jsx("div", { className: "appkit-hscroller__slide grid grid-cols-1 sm:grid-cols-3 gap-4 place-items-center sm:place-items-start", style: { gap: `${gap}px`, width: "100%", flexShrink: 0 }, children: Array.from({ length: 6 }, (_, idx) => (_jsx("div", { className: "appkit-hscroller__item-placeholder w-full sm:w-auto" }, `placeholder-${idx}`))) }, `slide-${slideIndex}`));
         }
-        // Replace placeholder with actual item
         const slideElement = slides[slideIndex];
         const gridIndex = rowIndex * 3 + colIndex;
         const childrenArr = slideElement.props.children ?? [];
@@ -107,8 +163,29 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             });
         }
         return slides;
-    }, [])) : (
-    // Single row mode
+    }, [])) : 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: [
             "appkit-hscroller__item",
             snapToItems ? "appkit-hscroller__item--snap" : "",
@@ -119,14 +196,32 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
             ? { width: itemWidth, flexShrink: 0 }
             : minItemWidth
                 ? { minWidth: minItemWidth }
-                : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : children;
+                : undefined, children: renderItem(item, i) }, keyExtractor ? keyExtractor(item, i) : i))))) : (children);
     const hoverHandlers = pauseOnHover
-        ? { onMouseEnter: () => setIsPaused(true), onMouseLeave: () => setIsPaused(false) }
+        ? {
+            onMouseEnter: () => setIsPaused(true),
+            onMouseLeave: () => setIsPaused(false),
+        }
         : {};
+    const combinedOnScroll = loop
+        ? () => {
+            handleScrollLoop();
+            onScroll?.();
+        }
+        : onScroll;
     if (showArrows) {
         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" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", 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: onScroll, className: scrollerCls, style: { gap: `${gap}px`, paddingLeft: 36, paddingRight: 36 }, "data-section": "horizontalscroller-div-512", children: content }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", 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, ...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" })] })), _jsx("button", { type: "button", onClick: () => scrollBy(-1), "aria-label": "Previous", 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 }), _jsx("button", { type: "button", onClick: () => scrollBy(1), "aria-label": "Next", 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: onScroll, className: scrollerCls, 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, ...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 })] }));
+}
+function scrollerCls(snapToItems, showScrollbar) {
+    return [
+        "appkit-hscroller__track",
+        snapToItems ? "appkit-hscroller__track--snap" : "",
+        !showScrollbar ? "appkit-hscroller__track--no-scrollbar" : "",
+    ]
+        .filter(Boolean)
+        .join(" ");
 }

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

@@ -98,8 +98,8 @@
 }
 
 .dark .appkit-hscroller__fade--left {
-  background: linear-gradient(to right, #111827, transparent); /* gray-900 */
+  background: linear-gradient(to right, #0f172a, transparent); /* slate-900 — matches surface dark */
 }
 .dark .appkit-hscroller__fade--right {
-  background: linear-gradient(to left, #111827, transparent);
+  background: linear-gradient(to left, #0f172a, transparent);
 }

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

@@ -1,13 +1,4 @@
 import React from "react";
-/**
- * ImageLightbox — full-screen image overlay with keyboard navigation.
- *
- * Standalone @mohasinac/ui primitive. No app-specific imports.
- * Navigation: ← / → arrow keys, Esc to close. Displays item counter.
- *
- * Uses a standard <img> tag for framework portability.
- * In a Next.js app, callers may swap src with a blurDataURL if desired.
- */
 export interface LightboxImage {
     src: string;
     alt?: string;