@mohasinac/appkit 2.7.50 → 2.7.52

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

@@ -3,6 +3,11 @@ export interface ListingToolbarSortOption {
     value: string;
     label: string;
 }
+export interface ListingToolbarToggle {
+    label: string;
+    active: boolean;
+    onChange: (next: boolean) => void;
+}
 export interface ListingToolbarLabels {
     search?: string;
     filters?: string;
@@ -48,10 +53,12 @@ export interface ListingToolbarProps {
     bulkTotalCount?: number;
     onBulkSelectAll?: () => void;
     onBulkClear?: () => void;
+    /** Pill-style filter toggles rendered between view controls and extra */
+    toggles?: ListingToolbarToggle[];
     /** Any extra action buttons placed after the view toggle */
     extra?: React.ReactNode;
     /** Overridable text labels for i18n */
     labels?: ListingToolbarLabels;
     className?: string;
 }
-export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, showTableView, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, toggles, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingToolbar.js

@@ -18,7 +18,7 @@ const DEFAULT_LABELS = {
 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_INACTIVE = "text-zinc-500 hover:bg-zinc-50 dark:hover:bg-slate-800 dark:text-zinc-400";
-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, extra, labels, className = "", }) {
+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 };
     const handleKeyDown = (e) => {
         if (onSearchKeyDown) {
@@ -31,5 +31,7 @@ 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-zinc-200 dark:border-slate-700 bg-white/95 dark:bg-slate-900/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-zinc-300 dark:border-slate-600 px-3 py-1.5 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 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", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-500 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 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-zinc-900 dark:text-zinc-100 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-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { 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] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 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: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", children: _jsx(RotateCcw, { className: "h-4 w-4" }) })), extra] })] }) }));
+                                    : _jsx(Square, { className: "h-4 w-4" }), allSelected ? l.deselectAll : l.selectAll(bulkTotalCount)] }), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: l.selected(bulkSelectedCount) }), _jsx("button", { type: "button", onClick: onBulkClear, className: "text-xs text-zinc-400 hover:text-rose-500 dark:text-zinc-500 transition-colors", children: l.clearSelection })] })) : onSearchChange ? (_jsxs("div", { className: "flex flex-1 items-center overflow-hidden rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-900 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-zinc-900 dark:text-zinc-100 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-zinc-300 dark:border-slate-600 px-2.5 py-1.5 sm:px-3.5 sm:py-2 text-sm font-medium text-zinc-700 dark:text-zinc-200 hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: l.filters }), filterCount > 0 && (_jsx("span", { 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] font-bold text-white", children: filterCount }))] })), sortOptions && sortValue !== undefined && onSortChange && (_jsxs("div", { className: "flex items-center gap-1.5 text-sm text-zinc-500 dark:text-zinc-400", children: [_jsx("span", { className: "hidden md:inline whitespace-nowrap text-xs", children: l.sort }), _jsx(SortDropdown, { value: sortValue, onChange: onSortChange, options: sortOptions })] })), !hideViewToggle && onViewChange && (_jsxs("div", { className: "flex items-center rounded-lg border border-zinc-300 dark:border-slate-600 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: "flex shrink-0 items-center justify-center rounded-lg border border-zinc-300 dark:border-slate-600 p-1.5 sm:p-2 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:bg-slate-800 hover:text-rose-500 dark:hover:text-rose-400 transition-colors", 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"
+                                    : "border-zinc-300 dark:border-slate-600 text-zinc-600 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: t.label }, t.label))) })), extra] })] }) }));
 }

package/dist/ui/components/__tests__/BulkActionBar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/__tests__/BulkActionBar.test.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { BulkActionBar } from "../BulkActionBar";
+const actions = [
+    { id: "publish", label: "Publish", onClick: vi.fn() },
+    { id: "delete", label: "Delete", variant: "danger", onClick: vi.fn() },
+];
+describe("BulkActionBar", () => {
+    it("renders nothing when selectedCount is 0", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 0, actions: actions }));
+        expect(screen.queryByTestId("bulk-action-bar")).toBeNull();
+    });
+    it("renders the bar when selectedCount > 0", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 3, actions: actions }));
+        expect(screen.getByTestId("bulk-action-bar")).toBeTruthy();
+    });
+    it("shows the selected count in the count pill", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 5, actions: actions }));
+        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("5");
+    });
+    it("calls onClearSelection when the count pill button is clicked", () => {
+        const onClear = vi.fn();
+        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, onClearSelection: onClear }));
+        fireEvent.click(screen.getByRole("button", { name: /clear selection/i }));
+        expect(onClear).toHaveBeenCalledOnce();
+    });
+    it("renders no action buttons when actions array is empty", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: [] }));
+        expect(screen.queryByRole("button", { name: /apply/i })).toBeNull();
+    });
+    it("renders the picker trigger and apply button when actions are provided", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        // Apply button must exist
+        expect(screen.getByRole("button", { name: /apply/i })).toBeTruthy();
+        // Picker trigger has aria-haspopup="listbox"
+        expect(screen.getByRole("button", { expanded: false })).toBeTruthy();
+    });
+    it("opens the action picker on trigger click", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        const trigger = screen.getByRole("button", { expanded: false });
+        fireEvent.click(trigger);
+        // Trigger now has aria-expanded="true"
+        expect(screen.getByRole("button", { expanded: true })).toBeTruthy();
+    });
+    it("selects an action when an option is clicked and closes the picker", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actions }));
+        // Open picker
+        const trigger = screen.getByRole("button", { expanded: false });
+        fireEvent.click(trigger);
+        // Trigger is expanded
+        expect(trigger.getAttribute("aria-expanded")).toBe("true");
+        // Click Delete option
+        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
+        // Picker should close — aria-expanded returns to false
+        expect(trigger.getAttribute("aria-expanded")).toBe("false");
+    });
+    it("calls the selected action's onClick when Apply is clicked", () => {
+        const publishFn = vi.fn();
+        const actionsWithFns = [
+            { id: "publish", label: "Publish", onClick: publishFn },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
+        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+        expect(publishFn).toHaveBeenCalledOnce();
+    });
+    it("executes the newly selected action when a different option is chosen then Apply clicked", () => {
+        const publishFn = vi.fn();
+        const deleteFn = vi.fn();
+        const actionsWithFns = [
+            { id: "publish", label: "Publish", onClick: publishFn },
+            { id: "delete", label: "Delete", variant: "danger", onClick: deleteFn },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: actionsWithFns }));
+        // Select Delete via picker
+        fireEvent.click(screen.getByRole("button", { expanded: false }));
+        fireEvent.click(screen.getByRole("option", { name: /delete/i }));
+        // Apply
+        fireEvent.click(screen.getByRole("button", { name: /apply/i }));
+        expect(deleteFn).toHaveBeenCalledOnce();
+        expect(publishFn).not.toHaveBeenCalled();
+    });
+    it("disables the apply button when the selected action is disabled", () => {
+        const disabledActions = [
+            { id: "archive", label: "Archive", onClick: vi.fn(), disabled: true },
+        ];
+        render(_jsx(BulkActionBar, { selectedCount: 1, actions: disabledActions }));
+        const applyBtn = screen.getByRole("button", { name: /apply/i });
+        expect(applyBtn.disabled).toBe(true);
+    });
+    it("uses custom labels", () => {
+        render(_jsx(BulkActionBar, { selectedCount: 2, actions: actions, labels: { apply: "Run", selected: "chosen" } }));
+        expect(screen.getByRole("button", { name: /run/i })).toBeTruthy();
+        expect(screen.getByTestId("bulk-selected-count").textContent).toContain("chosen");
+    });
+});

package/dist/ui/components/__tests__/ListingToolbar.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/components/__tests__/ListingToolbar.test.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { ListingToolbar } from "../ListingToolbar";
+describe("ListingToolbar", () => {
+    it("renders the toolbar container", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.getByTestId("listing-toolbar")).toBeTruthy();
+    });
+    it("renders search input when onSearchChange is provided", () => {
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), searchValue: "", searchPlaceholder: "Find\u2026" }));
+        expect(screen.getByPlaceholderText("Find…")).toBeTruthy();
+    });
+    it("does not render search input when onSearchChange is absent", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.queryByRole("textbox")).toBeNull();
+    });
+    it("calls onSearchChange when typing in the search input", () => {
+        const onChange = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: onChange, searchValue: "" }));
+        fireEvent.change(screen.getByRole("textbox"), { target: { value: "pokemon" } });
+        expect(onChange).toHaveBeenCalledWith("pokemon");
+    });
+    it("calls onSearchCommit when Enter is pressed in the search input", () => {
+        const onCommit = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
+        fireEvent.keyDown(screen.getByRole("textbox"), { key: "Enter" });
+        expect(onCommit).toHaveBeenCalledOnce();
+    });
+    it("calls onSearchCommit when the search button is clicked", () => {
+        const onCommit = vi.fn();
+        render(_jsx(ListingToolbar, { onSearchChange: vi.fn(), onSearchCommit: onCommit, searchValue: "" }));
+        fireEvent.click(screen.getByRole("button", { name: /search/i }));
+        expect(onCommit).toHaveBeenCalledOnce();
+    });
+    it("renders filters button when onFiltersClick is provided", () => {
+        const onClick = vi.fn();
+        render(_jsx(ListingToolbar, { onFiltersClick: onClick }));
+        const btn = screen.getByRole("button", { name: /filters/i });
+        expect(btn).toBeTruthy();
+        fireEvent.click(btn);
+        expect(onClick).toHaveBeenCalledOnce();
+    });
+    it("does not render filters button when onFiltersClick is absent", () => {
+        render(_jsx(ListingToolbar, {}));
+        expect(screen.queryByRole("button", { name: /filters/i })).toBeNull();
+    });
+    it("shows filter count badge when filterCount > 0", () => {
+        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), filterCount: 3 }));
+        expect(screen.getByText("3")).toBeTruthy();
+    });
+    it("renders grid and list view buttons when onViewChange is provided", () => {
+        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
+        expect(screen.getByRole("button", { name: /grid view/i })).toBeTruthy();
+        expect(screen.getByRole("button", { name: /list view/i })).toBeTruthy();
+    });
+    it("does not render view buttons when hideViewToggle is true", () => {
+        render(_jsx(ListingToolbar, { onViewChange: vi.fn(), hideViewToggle: true, view: "grid" }));
+        expect(screen.queryByRole("button", { name: /grid view/i })).toBeNull();
+    });
+    it("calls onViewChange with 'list' when list button is clicked", () => {
+        const onViewChange = vi.fn();
+        render(_jsx(ListingToolbar, { onViewChange: onViewChange, view: "grid" }));
+        fireEvent.click(screen.getByRole("button", { name: /list view/i }));
+        expect(onViewChange).toHaveBeenCalledWith("list");
+    });
+    it("renders table view button only when showTableView is true", () => {
+        const { rerender } = render(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid" }));
+        expect(screen.queryByRole("button", { name: /table view/i })).toBeNull();
+        rerender(_jsx(ListingToolbar, { onViewChange: vi.fn(), view: "grid", showTableView: true }));
+        expect(screen.getByRole("button", { name: /table view/i })).toBeTruthy();
+    });
+    it("shows reset-all button only when onResetAll + hasActiveState are both truthy", () => {
+        const onReset = vi.fn();
+        const { rerender } = render(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: false }));
+        expect(screen.queryByRole("button", { name: /reset all/i })).toBeNull();
+        rerender(_jsx(ListingToolbar, { onResetAll: onReset, hasActiveState: true }));
+        expect(screen.getByRole("button", { name: /reset all/i })).toBeTruthy();
+        fireEvent.click(screen.getByRole("button", { name: /reset all/i }));
+        expect(onReset).toHaveBeenCalledOnce();
+    });
+    it("renders bulk-mode controls when bulkMode is true", () => {
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 10, onBulkSelectAll: vi.fn(), onBulkClear: vi.fn() }));
+        expect(screen.getByText(/select all/i)).toBeTruthy();
+        expect(screen.getByText(/2 selected/i)).toBeTruthy();
+        expect(screen.getByText(/clear/i)).toBeTruthy();
+    });
+    it("calls onBulkSelectAll when Select All is clicked", () => {
+        const onSelectAll = vi.fn();
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 0, bulkTotalCount: 5, onBulkSelectAll: onSelectAll }));
+        fireEvent.click(screen.getByText(/select all/i));
+        expect(onSelectAll).toHaveBeenCalledOnce();
+    });
+    it("calls onBulkClear when Clear button is clicked", () => {
+        const onClear = vi.fn();
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 2, bulkTotalCount: 5, onBulkClear: onClear }));
+        fireEvent.click(screen.getByText(/clear/i));
+        expect(onClear).toHaveBeenCalledOnce();
+    });
+    it("shows 'Deselect All' label when all items are selected", () => {
+        render(_jsx(ListingToolbar, { bulkMode: true, bulkSelectedCount: 5, bulkTotalCount: 5, onBulkSelectAll: vi.fn() }));
+        expect(screen.getByText(/deselect all/i)).toBeTruthy();
+    });
+    it("renders pill toggle buttons from the toggles prop", () => {
+        const onToggle = vi.fn();
+        const toggles = [
+            { label: "In Stock", active: false, onChange: onToggle },
+            { label: "Featured", active: true, onChange: vi.fn() },
+        ];
+        render(_jsx(ListingToolbar, { toggles: toggles }));
+        expect(screen.getByRole("switch", { name: "In Stock" })).toBeTruthy();
+        expect(screen.getByRole("switch", { name: "Featured" })).toBeTruthy();
+    });
+    it("calls toggle onChange with flipped value when a pill toggle is clicked", () => {
+        const onChange = vi.fn();
+        const toggles = [{ label: "In Stock", active: false, onChange }];
+        render(_jsx(ListingToolbar, { toggles: toggles }));
+        fireEvent.click(screen.getByRole("switch", { name: "In Stock" }));
+        expect(onChange).toHaveBeenCalledWith(true);
+    });
+    it("uses custom labels from the labels prop", () => {
+        render(_jsx(ListingToolbar, { onFiltersClick: vi.fn(), labels: { filters: "Refine" } }));
+        expect(screen.getByRole("button", { name: /refine/i })).toBeTruthy();
+    });
+});

package/dist/ui/index.d.ts

@@ -158,7 +158,7 @@ export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveF
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
 export { SortDropdown } from "./components/SortDropdown";
-export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels } from "./components/ListingToolbar";
+export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels, ListingToolbarToggle } from "./components/ListingToolbar";
 export { ListingToolbar } from "./components/ListingToolbar";
 export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
 export { TablePagination } from "./components/TablePagination";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mohasinac/appkit",
-  "version": "2.7.50",
+  "version": "2.7.52",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -149,6 +149,8 @@
     "audit": "node scripts/audit-violations.mjs",
     "check:types": "tsc --noEmit",
     "check:audits": "node scripts/audit-violations.mjs && node scripts/verify-entries.mjs && node scripts/verify-css-build.mjs && node scripts/audit-use-client.mjs && node scripts/audit-double-navigation.mjs && node scripts/audit-repository-fields.mjs && node scripts/audit-query-provider.mjs && node scripts/audit-export-paths.mjs",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest",
     "check": "npm run check:types && npm run check:audits"
   },
   "dependencies": {
@@ -190,6 +192,8 @@
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@upstash/ratelimit": "^2.0.8",
     "@upstash/redis": "^1.37.0",
     "concurrently": "^9.2.1",
@@ -197,6 +201,7 @@
     "firebase": "^12.8.0",
     "firebase-admin": "^10.3.0",
     "firebase-functions": "^6.6.0",
+    "jsdom": "^29.1.1",
     "lucide-react": "^1.7.0",
     "next": "^15.0.0",
     "next-intl": "^4.9.1",
@@ -206,6 +211,7 @@
     "resend": "^6.10.0",
     "server-only": "^0.0.1",
     "tailwindcss": "^3.4.19",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.7"
   }
 }