@mohasinac/appkit 2.7.10 → 2.7.12

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

@@ -9,6 +9,7 @@ export interface ListingToolbarLabels {
     sort?: string;
     gridView?: string;
     listView?: string;
+    tableView?: string;
     resetAll?: string;
     selectAll?: (total: number) => string;
     deselectAll?: string;
@@ -29,10 +30,12 @@ export interface ListingToolbarProps {
     sortValue?: string;
     sortOptions?: readonly ListingToolbarSortOption[];
     onSortChange?: (value: string) => void;
-    /** Grid / list view toggle */
-    view?: "grid" | "list";
-    onViewChange?: (view: "grid" | "list") => void;
+    /** Grid / list / table view toggle */
+    view?: "grid" | "list" | "table";
+    onViewChange?: (view: "grid" | "list" | "table") => void;
     hideViewToggle?: boolean;
+    /** When true, adds a third Table button to the view toggle group (admin pages only). */
+    showTableView?: boolean;
     /** Reset all toolbar state to defaults */
     onResetAll?: () => void;
     hasActiveState?: boolean;
@@ -51,4 +54,4 @@ export interface ListingToolbarProps {
     labels?: ListingToolbarLabels;
     className?: string;
 }
-export declare function ListingToolbar({ filterCount, onFiltersClick, searchValue, searchPlaceholder, onSearchChange, onSearchCommit, onSearchKeyDown, sortValue, sortOptions, onSortChange, view, onViewChange, hideViewToggle, 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, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingToolbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, RotateCcw, Square, } from "lucide-react";
+import { CheckSquare, Search, SlidersHorizontal, LayoutGrid, List, Table2, RotateCcw, Square, } from "lucide-react";
 import { SortDropdown } from "./SortDropdown";
 const DEFAULT_LABELS = {
     search: "Search",
@@ -8,6 +8,7 @@ const DEFAULT_LABELS = {
     sort: "Sort",
     gridView: "Grid view",
     listView: "List view",
+    tableView: "Table view",
     resetAll: "Reset all",
     selectAll: (total) => `Select All (${total})`,
     deselectAll: "Deselect All",
@@ -17,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, 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, extra, labels, className = "", }) {
     const l = { ...DEFAULT_LABELS, ...labels };
     const handleKeyDown = (e) => {
         if (onSearchKeyDown) {
@@ -30,5 +31,5 @@ export function ListingToolbar({ filterCount = 0, onFiltersClick, searchValue =
     const allSelected = bulkTotalCount > 0 && bulkSelectedCount === bulkTotalCount;
     return (_jsx("div", { 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" }) })] })), 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" }) })), extra] })] }) }));
 }

package/dist/ui/components/SiteLogo.js

@@ -14,5 +14,5 @@ export function SiteLogo({ className = "h-7", title = "LetItRip.in", variant = "
         _jsx("img", { src: src, alt: title, className: `block w-auto object-contain ${className}` }));
     }
     const fill = variant === "gradient" ? `url(#${GRADIENT_ID})` : "currentColor";
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 226 56", role: "img", "aria-label": title, className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "181", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "186", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
+    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 214 56", role: "img", "aria-label": title, className: `block w-auto ${className}`, children: [_jsx("title", { children: title }), variant === "gradient" && (_jsx("defs", { children: _jsxs("linearGradient", { id: GRADIENT_ID, x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [_jsx("stop", { offset: "0%", style: { stopColor: "var(--appkit-color-primary-700, #1343de)" } }), _jsx("stop", { offset: "55%", style: { stopColor: "var(--appkit-color-cobalt, #3570fc)" } }), _jsx("stop", { offset: "100%", style: { stopColor: "var(--appkit-color-secondary-400, #84e122)" } })] }) })), _jsx("text", { x: "0", y: "44", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "800", fontSize: "44", letterSpacing: "-1.5", fill: fill, children: "LetItRip" }), _jsx("rect", { x: "169", y: "5", width: "43", height: "21", rx: "10.5", fill: fill, opacity: "0.12" }), _jsx("text", { x: "174", y: "21", fontFamily: "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif", fontWeight: "700", fontSize: "15", letterSpacing: "0.2", fill: fill, children: ".in" })] }));
 }

package/dist/utils/sieve-builder.d.ts

@@ -0,0 +1,41 @@
+export declare const SIEVE_OP: {
+    readonly EQ: "==";
+    readonly NEQ: "!=";
+    readonly GT: ">";
+    readonly LT: "<";
+    readonly GTE: ">=";
+    readonly LTE: "<=";
+    readonly CONTAINS: "@=";
+    readonly STARTS: "_=";
+    readonly ENDS: "_-=";
+    readonly NOT_CONTAINS: "!@=";
+    readonly NOT_STARTS: "!_=";
+    readonly NOT_ENDS: "!_-=";
+    readonly CONTAINS_CI: "@=*";
+    readonly STARTS_CI: "_=*";
+    readonly ENDS_CI: "_-=*";
+    readonly EQ_CI: "==*";
+    readonly NEQ_CI: "!=*";
+};
+export type SieveOp = (typeof SIEVE_OP)[keyof typeof SIEVE_OP];
+/** Operators for which the pipe `|` is valid for OR-matching within a single clause */
+export declare const SIEVE_PIPE_OPS: Set<SieveOp>;
+/** Single Sieve clause: sieveFilter("status", "==", "published") → "status==published" */
+export declare function sieveFilter(field: string, op: SieveOp, value: string | number | boolean): string;
+/**
+ * Multi-value equality filter as multiple AND clauses.
+ *   sieveMultiEq("condition", ["new","used"]) → "condition==new,condition==used"
+ *
+ * For pipe-valid ops (CONTAINS / STARTS / ENDS and CI variants), pass the
+ * pipe-joined value directly to sieveFilter() instead of this helper.
+ */
+export declare function sieveMultiEq(field: string, values: (string | number | boolean)[]): string;
+/**
+ * Expand a URL param that may contain "|"-separated values into the correct Sieve clause(s).
+ *   - For equality ops: "new|used" → "condition==new,condition==used"
+ *   - For pipe-valid ops: "foo|bar" → "title@=*foo|bar" (single clause, valid)
+ */
+export declare function expandSieveParam(field: string, value: string | null, op?: SieveOp): string;
+/** Join Sieve clauses with comma (AND) — drops falsy values */
+export declare function sieveAnd(...clauses: (string | null | undefined | false)[]): string;
+export { sortBy } from "../constants/sort";

package/dist/utils/sieve-builder.js

@@ -0,0 +1,66 @@
+export const SIEVE_OP = {
+    EQ: "==",
+    NEQ: "!=",
+    GT: ">",
+    LT: "<",
+    GTE: ">=",
+    LTE: "<=",
+    CONTAINS: "@=",
+    STARTS: "_=",
+    ENDS: "_-=",
+    NOT_CONTAINS: "!@=",
+    NOT_STARTS: "!_=",
+    NOT_ENDS: "!_-=",
+    CONTAINS_CI: "@=*",
+    STARTS_CI: "_=*",
+    ENDS_CI: "_-=*",
+    EQ_CI: "==*",
+    NEQ_CI: "!=*",
+};
+/** Operators for which the pipe `|` is valid for OR-matching within a single clause */
+export const SIEVE_PIPE_OPS = new Set([
+    SIEVE_OP.CONTAINS,
+    SIEVE_OP.STARTS,
+    SIEVE_OP.ENDS,
+    SIEVE_OP.CONTAINS_CI,
+    SIEVE_OP.STARTS_CI,
+    SIEVE_OP.ENDS_CI,
+]);
+/** Single Sieve clause: sieveFilter("status", "==", "published") → "status==published" */
+export function sieveFilter(field, op, value) {
+    return `${field}${op}${value}`;
+}
+/**
+ * Multi-value equality filter as multiple AND clauses.
+ *   sieveMultiEq("condition", ["new","used"]) → "condition==new,condition==used"
+ *
+ * For pipe-valid ops (CONTAINS / STARTS / ENDS and CI variants), pass the
+ * pipe-joined value directly to sieveFilter() instead of this helper.
+ */
+export function sieveMultiEq(field, values) {
+    return values.map((v) => sieveFilter(field, SIEVE_OP.EQ, v)).join(",");
+}
+/**
+ * Expand a URL param that may contain "|"-separated values into the correct Sieve clause(s).
+ *   - For equality ops: "new|used" → "condition==new,condition==used"
+ *   - For pipe-valid ops: "foo|bar" → "title@=*foo|bar" (single clause, valid)
+ */
+export function expandSieveParam(field, value, op = SIEVE_OP.EQ) {
+    if (!value)
+        return "";
+    const values = value.split("|").filter(Boolean);
+    if (values.length === 0)
+        return "";
+    if (SIEVE_PIPE_OPS.has(op)) {
+        return sieveFilter(field, op, value);
+    }
+    if (values.length === 1) {
+        return sieveFilter(field, op, values[0]);
+    }
+    return sieveMultiEq(field, values);
+}
+/** Join Sieve clauses with comma (AND) — drops falsy values */
+export function sieveAnd(...clauses) {
+    return clauses.filter(Boolean).join(",");
+}
+export { sortBy } from "../constants/sort";

package/package.json

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