@mohasinac/appkit 3.5.2 → 3.5.3

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

@@ -160,7 +160,7 @@
 
 /* dark */
 .dark .appkit-bulk-bar {
-  border-color: rgba(233, 30, 140, 0.3);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 30%, transparent);
 }
 
 .dark .appkit-bulk-bar__stripe {
@@ -168,13 +168,13 @@
 }
 
 .dark .appkit-bulk-bar__count-pill {
-  border-color: rgba(233, 30, 140, 0.35);
-  background: rgba(233, 30, 140, 0.1);
+  border-color: color-mix(in srgb, var(--appkit-color-primary) 35%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-primary) 10%, transparent);
   color: var(--appkit-color-primary-300);
 }
 
 .dark .appkit-bulk-bar__count-pill:hover {
-  background: rgba(233, 30, 140, 0.18);
+  background: color-mix(in srgb, var(--appkit-color-primary) 18%, transparent);
 }
 
 .dark .appkit-bulk-bar__picker-trigger {

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

@@ -115,60 +115,61 @@
 }
 
 .appkit-button.appkit-button--secondary {
-  background: var(--appkit-color-surface);
+  background: var(--appkit-color-primary-50);
   border-color: var(--appkit-color-primary-700);
   color: var(--appkit-color-primary-700);
 }
 
 .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-primary-700) 8%, transparent);
+  background: var(--appkit-color-primary-100);
 }
 
 .dark .appkit-button.appkit-button--secondary {
-  background: transparent;
+  background: color-mix(in srgb, var(--appkit-color-secondary) 16%, transparent);
   border-color: var(--appkit-color-secondary);
   color: var(--appkit-color-secondary);
 }
 
 .dark .appkit-button.appkit-button--secondary:hover:not(:disabled) {
-  background: color-mix(in srgb, var(--appkit-color-secondary) 12%, transparent);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 26%, transparent);
 }
 
 .appkit-button--outline {
-  background: var(--appkit-color-surface);
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 6%, var(--appkit-color-surface));
+  border-color: var(--appkit-color-primary-300);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--outline:hover:not(:disabled) {
-  background: var(--appkit-color-bg);
+  background: color-mix(in srgb, var(--appkit-color-primary-700) 12%, var(--appkit-color-surface));
 }
 
 .dark .appkit-button--outline {
-  background: transparent;
-  border-color: var(--appkit-color-border);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 10%, transparent);
+  border-color: color-mix(in srgb, var(--appkit-color-secondary) 40%, transparent);
   color: var(--appkit-color-text);
 }
 
 .dark .appkit-button--outline:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: color-mix(in srgb, var(--appkit-color-secondary) 18%, transparent);
 }
 
 .appkit-button--ghost {
-  background: transparent;
+  background: var(--appkit-color-border-subtle);
   color: var(--appkit-color-text);
 }
 
 .appkit-button--ghost:hover:not(:disabled) {
-  background: var(--appkit-color-border-subtle);
+  background: var(--appkit-color-border);
 }
 
 .dark .appkit-button--ghost {
+  background: rgba(255, 255, 255, 0.06);
   color: var(--appkit-color-text-muted);
 }
 
 .dark .appkit-button--ghost:hover:not(:disabled) {
-  background: rgba(30, 41, 59, 0.5);
+  background: rgba(255, 255, 255, 0.12);
 }
 
 .appkit-button.appkit-button--danger {

package/dist/ui/components/HorizontalScroller.js

@@ -216,27 +216,35 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         updateExtents();
     }, [updateExtents, itemWidth, itemCount]);
     const content = itemsMode ? (rows > 1 ? (
-    // Grid mode: group items into slides of (rows × colCount) cards
+    // 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 cols = colCount > 0 ? colCount : 3;
-        const cardsPerSlide = rows * cols;
-        const slideCount = Math.ceil(normalizedItems.length / cardsPerSlide);
-        return Array.from({ length: slideCount }, (_, slideIndex) => {
-            const slideItems = normalizedItems.slice(slideIndex * cardsPerSlide, (slideIndex + 1) * cardsPerSlide);
+        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(${cols}, 1fr)`,
+                    gridTemplateColumns: `repeat(${gridCols}, 1fr)`,
                     gap: `${gap}px`,
                     width: "100%",
                     flexShrink: 0,
-                }, children: slideItems.map((item, idx) => (_jsx("div", { className: [
+                }, "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 * cardsPerSlide + idx) }, keyExtractor ? keyExtractor(item, slideIndex * cardsPerSlide + idx) : slideIndex * cardsPerSlide + idx))) }, `slide-${slideIndex}`));
-        });
+                        .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.

package/dist/ui/components/ListingToolbar.js

@@ -20,7 +20,7 @@ const DEFAULT_LABELS = {
     clearSelection: "Clear",
 };
 const VIEW_BTN_BASE = "p-1.5 sm:p-2 transition-colors";
-const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white";
+const VIEW_BTN_ACTIVE = "bg-[var(--appkit-color-primary)] text-white";
 const VIEW_BTN_INACTIVE = "text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] text-[var(--appkit-color-text-muted)]";
 export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue = "", searchPlaceholder = "Search…", onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view = "grid", onViewChange, hideViewToggle = false, showTableView = false, onResetAll, hasActiveState = false, bulkMode = false, bulkSelectedCount = 0, bulkTotalCount = 0, onBulkSelectAll, onBulkClear, toggles, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
@@ -34,8 +34,8 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     };
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { "data-testid": "listing-toolbar", className: `sticky top-[var(--header-height,0px)] z-20 border-b border-[var(--appkit-color-border)] bg-white/95 bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm py-2 px-3 sm:py-2.5 sm:px-4 ${className}`, children: _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center gap-2 sm:gap-2.5", children: [bulkMode ? (_jsxs("div", { className: "flex flex-1 items-center gap-2", children: [_jsxs("button", { type: "button", onClick: onBulkSelectAll, className: "flex items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-3 py-1.5 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [allSelected
-                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary,theme(colors.violet.600))]" })
-                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary,theme(colors.violet.600))] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
-                                    ? "border-transparent bg-[var(--appkit-color-primary,theme(colors.violet.600))] text-white"
+                                    ? _jsx(CheckSquare, { className: "h-4 w-4 text-[var(--appkit-color-primary)]" })
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx(Span, { size: "sm", color: "muted", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: CLS_CLEAR_LINK, children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] min-w-0", children: [_jsx("input", { type: "text", value: searchValue, onChange: (e) => onSearchChange(e.target.value), onKeyDown: handleKeyDown, placeholder: searchPlaceholder, className: "min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-[var(--appkit-color-text)] placeholder-zinc-400 outline-none" }), _jsx("button", { type: "button", onClick: onSearchCommit, className: "flex shrink-0 items-center justify-center px-2.5 py-2 text-zinc-400 hover:text-[var(--appkit-color-primary)] transition-colors", "aria-label": l.search, children: _jsx(Search, { className: "h-4 w-4" }) })] })) : null, _jsxs("div", { className: "flex items-center gap-1.5 sm:gap-2 shrink-0", children: [onFiltersClick && (_jsxs("button", { type: "button", onClick: onFiltersClick, className: "relative flex shrink-0 items-center gap-1.5 rounded-lg border border-[var(--appkit-color-border)] px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)] transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx(Span, { weight: "bold", className: "absolute -top-1.5 -right-1.5 flex h-4 w-4 items-center justify-center rounded-full bg-[var(--appkit-color-primary)] text-[10px] text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs(Div, { className: "flex items-center gap-1.5 text-[var(--appkit-color-text-muted)]", children: [_jsx(Span, { size: "xs", className: "hidden md:inline whitespace-nowrap", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-[var(--appkit-color-border)] overflow-hidden", children: [_jsx("button", { type: "button", onClick: () => onViewChange("grid"), "aria-label": l.gridView, className: `${VIEW_BTN_BASE} ${view === "grid" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(LayoutGrid, { className: "h-4 w-4" }) }), _jsx("button", { type: "button", onClick: () => onViewChange("list"), "aria-label": l.listView, className: `${VIEW_BTN_BASE} ${view === "list" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(List, { className: "h-4 w-4" }) }), showTableView && (_jsx("button", { type: "button", onClick: () => onViewChange("table"), "aria-label": l.tableView, className: `${VIEW_BTN_BASE} ${view === "table" ? VIEW_BTN_ACTIVE : VIEW_BTN_INACTIVE}`, children: _jsx(Table2, { className: "h-4 w-4" }) }))] })), onResetAll && hasActiveState && (_jsx("button", { type: "button", onClick: onResetAll, "aria-label": l.resetAll, title: l.resetAll, className: CLS_CLEAR_ICON_BTN, children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), toggles && toggles.length > 0 && (_jsx("div", { className: "flex items-center gap-1", children: toggles.map((t) => (_jsx("button", { type: "button", role: "switch", "aria-checked": t.active, onClick: () => t.onChange(!t.active), className: `rounded-full border px-2.5 py-1 text-xs font-medium transition-colors whitespace-nowrap ${t.active
+                                    ? "border-transparent bg-[var(--appkit-color-primary)] text-white"
                                     : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/package.json

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