@mohasinac/appkit 4.11.1 → 4.11.3

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

@@ -28,13 +28,31 @@ export interface FilterChipGroupProps {
     label: string;
     /** Tab definitions. Pass a constant from `appkit/src/features/admin/constants/filter-tabs.ts`. */
     tabs: readonly FilterChipGroupTab[];
-    /** Current filter value (empty string = "All" selected). */
+    /**
+     * Current filter value. Single-select: one id, or `""` for "All".
+     * Multi-select (`multiple`): a pipe-joined set of ids (`"auction|art"`),
+     * `""` when nothing is ticked.
+     */
     value: string;
-    /** Called with the new filter value (`""` when `All` is picked). */
+    /**
+     * Called with the new filter value. Single-select passes the picked id
+     * (`""` when `All` is picked); multi-select passes the whole pipe-joined
+     * set after toggling the clicked chip.
+     */
     onChange: (value: string) => void;
     /** Sentinel id treated as "no filter" — defaults to `"All"`. */
     allId?: string;
+    /**
+     * Checkbox semantics: several chips can be active at once and the value is
+     * a pipe-joined OR-group — the exact shape sievejs parses as a same-field OR
+     * and the Firebase adapter upgrades to a `.where(…, "in", …)` query.
+     *
+     * "Nothing ticked" already means "everything", so the `allId` sentinel chip
+     * is not rendered in this mode — it would be a second way to express the
+     * same state that every caller would have to remember to clear.
+     */
+    multiple?: boolean;
     /** Optional className spread onto the outer wrapper. */
     className?: string;
 }
-export declare function FilterChipGroup({ label, tabs, value, onChange, allId, className, }: FilterChipGroupProps): React.JSX.Element;
+export declare function FilterChipGroup({ label, tabs, value, onChange, allId, multiple, className, }: FilterChipGroupProps): React.JSX.Element;

package/dist/ui/components/FilterChipGroup.js

@@ -6,10 +6,39 @@ const ACTIVE_CLS = "bg-[var(--appkit-color-primary)] text-white border-[var(--ap
 const INACTIVE_CLS = "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-zinc-50 hover:bg-[var(--appkit-color-surface-elevated)]";
 const CHIP_BASE_CLS = "rounded-full px-3 py-1 text-xs font-medium border transition-colors";
 const LABEL_CLS = "text-xs font-semibold uppercase tracking-widest text-[var(--appkit-color-text-muted)]";
-export function FilterChipGroup({ label, tabs, value, onChange, allId = "All", className, }) {
+/** Split a pipe-joined multi-select value into its ids. */
+function parseMulti(value) {
+    return value ? value.split("|").filter(Boolean) : [];
+}
+export function FilterChipGroup({ label, tabs, value, onChange, allId = "All", multiple = false, className, }) {
+    const selected = new Set(multiple ? parseMulti(value) : []);
     const current = value || allId;
-    return (_jsxs(Div, { className: `space-y-2 ${className ?? ""}`.trim(), children: [_jsx(Text, { as: "p", className: LABEL_CLS, children: label }), _jsx(Div, { className: "flex flex-wrap gap-2", children: tabs.map((tab) => {
-                    const isActive = current === tab.id;
-                    return (_jsx("button", { type: "button", "aria-pressed": isActive, onClick: () => onChange(tab.id === allId ? "" : tab.id), className: `${CHIP_BASE_CLS} ${isActive ? ACTIVE_CLS : INACTIVE_CLS}`, children: tab.label }, tab.id));
+    // In multi-select the "All" sentinel is redundant with an empty selection —
+    // see the `multiple` prop docs.
+    const visibleTabs = multiple ? tabs.filter((t) => t.id !== allId) : tabs;
+    const handleClick = (tabId) => {
+        if (!multiple) {
+            onChange(tabId === allId ? "" : tabId);
+            return;
+        }
+        // Rebuild in the source array's order, not click order, so the same
+        // selection always serialises to the same string — a value that varied by
+        // click order would be a different React Query key for identical results.
+        const next = new Set(selected);
+        if (next.has(tabId))
+            next.delete(tabId);
+        else
+            next.add(tabId);
+        onChange(visibleTabs
+            .map((t) => t.id)
+            .filter((id) => next.has(id))
+            .join("|"));
+    };
+    return (_jsxs(Div, { className: `space-y-2 ${className ?? ""}`.trim(), children: [_jsx(Text, { as: "p", className: LABEL_CLS, children: label }), _jsx(Div, { className: "flex flex-wrap gap-2", role: multiple ? "group" : undefined, "aria-label": multiple ? label : undefined, children: visibleTabs.map((tab) => {
+                    const isActive = multiple ? selected.has(tab.id) : current === tab.id;
+                    return (_jsx("button", { type: "button", 
+                        // Checkboxes report checked state, not pressed state — a screen
+                        // reader announcing "pressed" for a filter that stays on is wrong.
+                        role: multiple ? "checkbox" : undefined, "aria-checked": multiple ? isActive : undefined, "aria-pressed": multiple ? undefined : isActive, onClick: () => handleClick(tab.id), className: `${CHIP_BASE_CLS} ${isActive ? ACTIVE_CLS : INACTIVE_CLS}`, children: tab.label }, tab.id));
                 }) })] }));
 }

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

@@ -22,7 +22,6 @@ export interface HorizontalScrollerProps<T = unknown> {
      */
     arrowStyle?: "circle" | "full-height";
     showScrollbar?: boolean;
-    showFadeEdges?: boolean;
     scrollContainerRef?: RefObject<HTMLDivElement | null>;
     onScroll?: () => void;
     items?: T[];
@@ -38,4 +37,4 @@ export interface HorizontalScrollerProps<T = unknown> {
     /** 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, arrowStyle, showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows, autoScroll, autoScrollInterval, minItemWidth, pauseOnHover, itemClassName, loop, }: HorizontalScrollerProps<T>): import("react").JSX.Element;
+export declare function HorizontalScroller<T = unknown>({ children, className, gap, snapToItems, showArrows, arrowSize, arrowStyle, showScrollbar, 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

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState, useEffect, useCallback, } from "react";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 const BREAKPOINTS = [
@@ -21,7 +21,7 @@ function resolvePerView(perView, containerWidth) {
     }
     return 1;
 }
-export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", arrowStyle = "circle", showScrollbar, showFadeEdges, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
+export function HorizontalScroller({ children, className = "", gap = 16, snapToItems, showArrows, arrowSize = "md", arrowStyle = "circle", showScrollbar, scrollContainerRef: externalRef, onScroll, items, renderItem, keyExtractor, perView, rows = 1, autoScroll, autoScrollInterval = 3500, minItemWidth, pauseOnHover = false, itemClassName = "", loop = false, }) {
     const [itemWidth, setItemWidth] = useState(undefined);
     const [colCount, setColCount] = useState(typeof perView === "number" ? perView : 3);
     const [isPaused, setIsPaused] = useState(false);
@@ -200,11 +200,15 @@ export function HorizontalScroller({ children, className = "", gap = 16, snapToI
         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]
+        return (_jsxs("div", { className: [
+                "appkit-hscroller appkit-hscroller--with-arrows",
+                `appkit-hscroller--arrow-${arrowSize}`,
+                className,
+            ]
                 .filter(Boolean)
-                .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} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, 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} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
+                .join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-511", children: [!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} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronLeft, { className: "w-4 h-4" }) })), _jsx("div", { ref: containerRef, onScroll: combinedOnScroll, className: scrollerCls(snapToItems, showScrollbar), style: { gap: `${gap}px` }, "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} ${arrowStyle === "full-height" ? "appkit-hscroller__arrow--full-height" : ""}`, children: _jsx(ChevronRight, { className: "w-4 h-4" }) }))] }));
     }
-    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 })] }));
+    return (_jsx("div", { className: ["appkit-hscroller", className].filter(Boolean).join(" "), tabIndex: 0, onKeyDown: handleKeyDown, ...interactionHandlers, "data-section": "horizontalscroller-div-513", children: _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/HorizontalScroller.style.css

@@ -50,9 +50,38 @@
 
 /* -- Arrows ------------------------------------------ */
 
-.appkit-hscroller--with-arrows .appkit-hscroller__track {
-  padding-left: 36px;
-  padding-right: 36px;
+/* Component-local custom properties — never added to tokens.css, so
+ * audit-theme-drift.mjs's stray-key check can't fire on them. Default
+ * gutter is 0 so the no-arrows variant is untouched. --arrow-size defaults
+ * to the old hardcoded 36px ("md") and is overridden by the
+ * --arrow-{sm,md,lg} modifiers below. */
+.appkit-hscroller {
+  --appkit-hscroller-arrow-size: 2.25rem;
+  --appkit-hscroller-gutter: 0px;
+}
+
+.appkit-hscroller--arrow-sm { --appkit-hscroller-arrow-size: 1.75rem; }
+.appkit-hscroller--arrow-md { --appkit-hscroller-arrow-size: 2.25rem; }
+.appkit-hscroller--arrow-lg { --appkit-hscroller-arrow-size: 2.75rem; }
+
+/* Arrows only render at sm+ — below that, touch users swipe and reserving
+ * gutter space would eat into an already-narrow single-column card. Gutter
+ * lives on the WRAPPER (padding box), not the scrollable track, so items
+ * are clipped at the gutter's inner edge instead of scrolling underneath
+ * an absolutely-positioned arrow. */
+.appkit-hscroller__arrow {
+  display: none;
+}
+
+@media (min-width: 640px) {
+  .appkit-hscroller--with-arrows {
+    --appkit-hscroller-gutter: calc(var(--appkit-hscroller-arrow-size) + var(--appkit-space-2));
+    padding-left: var(--appkit-hscroller-gutter);
+    padding-right: var(--appkit-hscroller-gutter);
+  }
+  .appkit-hscroller--with-arrows .appkit-hscroller__arrow {
+    display: flex;
+  }
 }
 
 .appkit-hscroller__arrow {
@@ -60,11 +89,12 @@
   top: 50%;
   transform: translateY(-50%);
   z-index: 20;
+  width: var(--appkit-hscroller-arrow-size);
+  height: var(--appkit-hscroller-arrow-size);
   border-radius: 9999px;
   background: rgba(255, 255, 255, 0.9);
   border: 1px solid var(--appkit-color-border);
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
-  display: flex;
   align-items: center;
   justify-content: center;
   transition: background 150ms;
@@ -80,18 +110,20 @@
   pointer-events: none;
 }
 
-.appkit-hscroller__arrow--prev { left: 0; }
-.appkit-hscroller__arrow--next { right: 0; }
+/* Centered within the gutter (gutter = arrow size + space-2 breathing room). */
+.appkit-hscroller__arrow--prev { left: calc((var(--appkit-hscroller-gutter) - var(--appkit-hscroller-arrow-size)) / 2); }
+.appkit-hscroller__arrow--next { right: calc((var(--appkit-hscroller-gutter) - var(--appkit-hscroller-arrow-size)) / 2); }
 
-.appkit-hscroller__arrow--sm { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; }
-.appkit-hscroller__arrow--md { width: 2.25rem;  height: 2.25rem;  font-size: 1rem; }
-.appkit-hscroller__arrow--lg { width: 2.75rem;  height: 2.75rem;  font-size: 1.125rem; }
+.appkit-hscroller__arrow--sm { font-size: 0.875rem; }
+.appkit-hscroller__arrow--md { font-size: 1rem; }
+.appkit-hscroller__arrow--lg { font-size: 1.125rem; }
 
 /* Full-height variant — a thin sliver spanning the whole track height
  * instead of a small centered circle, so a double-row grid of cards has a
  * much taller, easier-to-hit click target on either side. Width still comes
- * from the --sm/--md/--lg size classes above; this only overrides the
- * vertical sizing/position and squares off the rounding on the outer edge. */
+ * from --appkit-hscroller-arrow-size via the --sm/--md/--lg modifiers above;
+ * this only overrides the vertical sizing/position and squares off the
+ * rounding on the outer edge. */
 .appkit-hscroller__arrow--full-height {
   top: 0;
   height: 100%;
@@ -119,30 +151,3 @@
   background: var(--appkit-color-slate-700);
 }
 
-/* -- Fade edges -------------------------------------- */
-
-.appkit-hscroller__fade {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 2rem;
-  z-index: var(--appkit-z-raised);
-  pointer-events: none;
-}
-
-.appkit-hscroller__fade--left {
-  left: 0;
-  background: linear-gradient(to right, var(--appkit-color-surface), transparent);
-}
-
-.appkit-hscroller__fade--right {
-  right: 0;
-  background: linear-gradient(to left, var(--appkit-color-surface), transparent);
-}
-
-.dark .appkit-hscroller__fade--left {
-  background: linear-gradient(to right, var(--appkit-color-surface), transparent);
-}
-.dark .appkit-hscroller__fade--right {
-  background: linear-gradient(to left, var(--appkit-color-surface), transparent);
-}

package/package.json

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