@mohasinac/appkit 2.3.2 → 2.4.1

package/dist/ui/components/ImageLightbox.js

@@ -2,16 +2,23 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ChevronLeft, ChevronRight, X, ZoomIn } from "lucide-react";
+import { ChevronLeft, ChevronRight, X, ZoomIn, ZoomOut, RotateCw, Maximize2 } from "lucide-react";
 import { Button } from "./Button";
 import { Text, Span } from "./Typography";
+const MIN_ZOOM = 10;
+const MAX_ZOOM = 300;
+const ZOOM_STEP = 20;
 export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
     const [currentIndex, setCurrentIndex] = useState(activeIndex ?? 0);
+    const [zoom, setZoom] = useState(100);
+    const [rotation, setRotation] = useState(0);
     const overlayRef = useRef(null);
-    // Sync external activeIndex
+    // Sync external activeIndex and reset transforms
     useEffect(() => {
         if (activeIndex !== null && activeIndex >= 0) {
             setCurrentIndex(activeIndex);
+            setZoom(100);
+            setRotation(0);
         }
     }, [activeIndex]);
     const isOpen = activeIndex !== null && activeIndex >= 0 && images.length > 0;
@@ -21,9 +28,7 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             return;
         const prev = document.body.style.overflow;
         document.body.style.overflow = "hidden";
-        return () => {
-            document.body.style.overflow = prev;
-        };
+        return () => { document.body.style.overflow = prev; };
     }, [isOpen]);
     const navigate = useCallback((dir) => {
         setCurrentIndex((prev) => {
@@ -31,7 +36,16 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             onNavigate?.(next);
             return next;
         });
+        setZoom(100);
+        setRotation(0);
     }, [images.length, onNavigate]);
+    const adjustZoom = useCallback((delta) => {
+        setZoom((z) => Math.min(MAX_ZOOM, Math.max(MIN_ZOOM, z + delta)));
+    }, []);
+    const handleWheel = useCallback((e) => {
+        e.preventDefault();
+        adjustZoom(e.deltaY < 0 ? ZOOM_STEP : -ZOOM_STEP);
+    }, [adjustZoom]);
     const handleKeyDown = useCallback((e) => {
         if (e.key === "Escape") {
             onClose();
@@ -45,16 +59,36 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
             navigate(1);
             return;
         }
-    }, [onClose, navigate]);
+        if (e.key === "+") {
+            adjustZoom(ZOOM_STEP);
+            return;
+        }
+        if (e.key === "-") {
+            adjustZoom(-ZOOM_STEP);
+            return;
+        }
+        if (e.key === "r" || e.key === "R") {
+            setRotation((r) => (r + 90) % 360);
+            return;
+        }
+        if (e.key === "0") {
+            setZoom(100);
+            setRotation(0);
+            return;
+        }
+    }, [onClose, navigate, adjustZoom]);
     // Focus overlay on open for keyboard to work
     useEffect(() => {
-        if (isOpen) {
+        if (isOpen)
             requestAnimationFrame(() => overlayRef.current?.focus());
-        }
     }, [isOpen]);
     if (!isOpen || typeof document === "undefined")
         return null;
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
-    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, "data-section": "imagelightbox-div-523", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "absolute top-4 right-4 z-10 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/50 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-7 h-7" }) }), hasMultiple && (_jsxs("div", { className: "appkit-lightbox__counter", "data-section": "imagelightbox-div-524", children: [currentIndex + 1, " / ", images.length] })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsxs("div", { className: "appkit-lightbox__image-wrap", "data-section": "imagelightbox-div-525", children: [_jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false }), _jsxs("div", { className: "appkit-lightbox__zoom-hint", "data-section": "imagelightbox-div-526", children: [_jsx(ZoomIn, { className: "w-4 h-4" }), _jsx(Span, { className: "text-xs", children: "Scroll to zoom" })] })] }), image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4", children: image.caption })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) }))] }), document.body);
+    const iconBtnClass = "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white flex items-center justify-center";
+    return createPortal(_jsxs("div", { ref: overlayRef, tabIndex: -1, className: "appkit-lightbox", role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", onKeyDown: handleKeyDown, onWheel: handleWheel, children: [_jsxs("div", { className: "absolute top-0 left-0 right-0 z-10 flex items-center justify-between px-4 py-3 bg-gradient-to-b from-black/60 to-transparent", children: [_jsx(Span, { className: "text-white/70 text-sm font-medium", children: hasMultiple ? `${currentIndex + 1} / ${images.length}` : "" }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(-ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom out", disabled: zoom <= MIN_ZOOM, children: _jsx(ZoomOut, { className: "w-4 h-4" }) }), _jsxs("button", { type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: "text-white/70 hover:text-white text-xs font-mono min-w-[3rem] text-center", "aria-label": "Reset zoom", children: [zoom, "%"] }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => adjustZoom(ZOOM_STEP), className: iconBtnClass, "aria-label": "Zoom in", disabled: zoom >= MAX_ZOOM, children: _jsx(ZoomIn, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => setRotation((r) => (r + 90) % 360), className: iconBtnClass, "aria-label": "Rotate 90\u00B0", children: _jsx(RotateCw, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => { setZoom(100); setRotation(0); }, className: iconBtnClass, "aria-label": "Reset", children: _jsx(Maximize2, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "w-10 h-10 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-red-500/60 text-white flex items-center justify-center", "aria-label": "Close lightbox", children: _jsx(X, { className: "w-5 h-5" }) })] })] }), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(-1), className: "absolute left-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Previous image", children: _jsx(ChevronLeft, { className: "w-7 h-7" }) })), _jsx("div", { className: "appkit-lightbox__image-wrap", style: { cursor: zoom > 100 ? "grab" : "default" }, children: _jsx("img", { src: image.src, alt: image.alt ?? "", className: "appkit-lightbox__img", draggable: false, style: {
+                        transform: `scale(${zoom / 100}) rotate(${rotation}deg)`,
+                        transition: "transform 0.2s ease",
+                    } }) }), image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "flex-shrink-0 !text-white/70 text-center px-8 pb-4", children: image.caption })), hasMultiple && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: () => navigate(1), className: "absolute right-4 top-1/2 -translate-y-1/2 w-12 h-12 p-0 !min-h-0 rounded-full bg-white/15 hover:bg-white/30 text-white z-10 flex items-center justify-center", "aria-label": "Next image", children: _jsx(ChevronRight, { className: "w-7 h-7" }) })), _jsxs("div", { className: "absolute bottom-4 left-1/2 -translate-x-1/2 text-white/30 text-[11px] flex gap-4", children: [_jsx("span", { children: "\u2190 \u2192 navigate" }), _jsx("span", { children: "scroll to zoom" }), _jsx("span", { children: "R to rotate" }), _jsx("span", { children: "0 to reset" })] })] }), document.body);
 }

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

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import type { DynamicSelectOption, DynamicSelectProps } from "./DynamicSelect";
+export interface InlineCreateSelectProps<V = string> extends DynamicSelectProps<V> {
+    /** Label for the "+ Create new …" button shown at the bottom of the dropdown. */
+    createLabel?: string;
+    /** Title shown in the SideDrawer header. Defaults to `createLabel`. */
+    drawerTitle?: string;
+    /**
+     * Render prop for the create form inside the SideDrawer.
+     * Call `onCreated` with the new option to close the drawer and auto-select it.
+     * Call `onCancel` to discard and close.
+     */
+    renderCreateForm?: (props: {
+        onCreated: (option: DynamicSelectOption<V>) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+}
+/**
+ * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
+ * that opens a SideDrawer containing an inline create form.
+ *
+ * @example
+ * ```tsx
+ * <InlineCreateSelect
+ *   value={categoryId}
+ *   onChange={(v) => setCategoryId(v)}
+ *   loadOptions={loadCategoryOptions}
+ *   createLabel="Category"
+ *   renderCreateForm={({ onCreated, onCancel }) => (
+ *     <CategoryForm
+ *       onSuccess={(cat) => onCreated({ value: cat.id, label: cat.name })}
+ *       onCancel={onCancel}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export declare function InlineCreateSelect<V = string>({ createLabel, drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }: InlineCreateSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/InlineCreateSelect.js

@@ -0,0 +1,70 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DynamicSelect } from "./DynamicSelect";
+import { SideDrawer } from "./SideDrawer";
+import { Button } from "./Button";
+/**
+ * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
+ * that opens a SideDrawer containing an inline create form.
+ *
+ * @example
+ * ```tsx
+ * <InlineCreateSelect
+ *   value={categoryId}
+ *   onChange={(v) => setCategoryId(v)}
+ *   loadOptions={loadCategoryOptions}
+ *   createLabel="Category"
+ *   renderCreateForm={({ onCreated, onCancel }) => (
+ *     <CategoryForm
+ *       onSuccess={(cat) => onCreated({ value: cat.id, label: cat.name })}
+ *       onCancel={onCancel}
+ *     />
+ *   )}
+ * />
+ * ```
+ */
+export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCreateForm, onChange, options, loadOptions, ...selectProps }) {
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    function handleCreated(option) {
+        setDrawerOpen(false);
+        onChange?.(option.value, option);
+    }
+    function handleCancel() {
+        setDrawerOpen(false);
+    }
+    // Inject a synthetic "+ Create new" sentinel option at the end of the static list.
+    // For async (loadOptions) mode we append the action after the list via a wrapper.
+    const CREATE_SENTINEL = "__inline_create__";
+    const augmentedOptions = renderCreateForm
+        ? [
+            ...(options ?? []),
+            {
+                value: CREATE_SENTINEL,
+                label: `+ Create new ${createLabel}`,
+            },
+        ]
+        : options;
+    // For async mode, wrap loadOptions to append the sentinel after each page.
+    const augmentedLoadOptions = renderCreateForm && loadOptions
+        ? async (query, page) => {
+            const result = await loadOptions(query, page);
+            const sentinel = {
+                value: CREATE_SENTINEL,
+                label: `+ Create new ${createLabel}`,
+            };
+            return {
+                ...result,
+                items: [...result.items, sentinel],
+            };
+        }
+        : loadOptions;
+    function handleChange(value, option) {
+        if (value === CREATE_SENTINEL) {
+            setDrawerOpen(true);
+            return;
+        }
+        onChange?.(value, option);
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(DynamicSelect, { ...selectProps, options: augmentedOptions, loadOptions: augmentedLoadOptions, onChange: handleChange }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: handleCancel, children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: handleCancel }) })) : null] }));
+}

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

@@ -61,12 +61,10 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__toolbar {
-    background: rgba(2, 6, 23, 0.8); /* slate-950/80 */
-    border-bottom-color: rgba(30, 41, 59, 0.7); /* slate-800/70 */
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-  }
+.dark .appkit-listing-layout__toolbar {
+  background: rgba(2, 6, 23, 0.8); /* slate-950/80 */
+  border-bottom-color: rgba(30, 41, 59, 0.7); /* slate-800/70 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }
 
 .appkit-listing-layout__toolbar--dashboard {
@@ -74,13 +72,7 @@
 }
 
 .appkit-listing-layout__toolbar--page {
-  top: 3.5rem; /* top-14 */
-}
-
-@media (min-width: 768px) {
-  .appkit-listing-layout__toolbar--page {
-    top: 7.5rem; /* top-[120px] */
-  }
+  top: var(--header-height, 3.5rem);
 }
 
 /* -- Toolbar rows ------------------------------------ */
@@ -133,11 +125,9 @@
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__view-toggle-wrap {
-    border-color: #1e293b; /* slate-700 */
-    background: #0f172a; /* slate-900 */
-  }
+.dark .appkit-listing-layout__view-toggle-wrap {
+  border-color: #1e293b; /* slate-700 */
+  background: #0f172a; /* slate-900 */
 }
 
 .appkit-listing-layout__toolbar-pagination {
@@ -147,10 +137,8 @@
   border-left: 1px solid rgba(161, 161, 170, 0.35);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__toolbar-pagination {
-    border-left-color: rgba(30, 41, 59, 0.7);
-  }
+.dark .appkit-listing-layout__toolbar-pagination {
+  border-left-color: rgba(30, 41, 59, 0.7);
 }
 
 /* -- Mobile toolbar rows ----------------------------- */
@@ -205,15 +193,13 @@
   color: var(--color-primary, #6366f1);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__filter-btn {
-    border-color: #1e293b; /* slate-700 */
-    color: #cbd5e1; /* slate-300 */
-  }
-  .appkit-listing-layout__filter-btn:hover {
-    border-color: #334155; /* slate-600 */
-    background: rgba(30, 41, 59, 0.6);
-  }
+.dark .appkit-listing-layout__filter-btn {
+  border-color: #1e293b; /* slate-700 */
+  color: #cbd5e1; /* slate-300 */
+}
+.dark .appkit-listing-layout__filter-btn:hover {
+  border-color: #334155; /* slate-600 */
+  background: rgba(30, 41, 59, 0.6);
 }
 
 /* -- Filter badge ------------------------------------ */
@@ -253,10 +239,8 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__bulk-bar {
-    border-top-color: #1e293b; /* slate-800 */
-  }
+.dark .appkit-listing-layout__bulk-bar {
+  border-top-color: #1e293b; /* slate-800 */
 }
 
 /* -- Body (sidebar + content) ------------------------ */
@@ -289,14 +273,10 @@
   }
 }
 
-.appkit-listing-layout__sidebar--page {
-  position: sticky;
-  top: 11rem; /* top-[176px] */
-}
-
+.appkit-listing-layout__sidebar--page,
 .appkit-listing-layout__sidebar--dashboard {
   position: sticky;
-  top: 4rem; /* top-16 */
+  top: var(--header-height, 0px);
 }
 
 .appkit-listing-layout__sidebar--open {
@@ -335,11 +315,9 @@
   .appkit-listing-layout__sidebar-panel { width: 18rem; }
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-panel {
-    border-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */
-    background: #0f172a; /* slate-900 */
-  }
+.dark .appkit-listing-layout__sidebar-panel {
+  border-color: rgba(51, 65, 85, 0.6); /* slate-700/60 */
+  background: #0f172a; /* slate-900 */
 }
 
 .appkit-listing-layout__sidebar-header {
@@ -350,10 +328,8 @@
   border-bottom: 1px solid #f4f4f5; /* zinc-100 */
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-header {
-    border-bottom-color: #1e293b; /* slate-800 */
-  }
+.dark .appkit-listing-layout__sidebar-header {
+  border-bottom-color: #1e293b; /* slate-800 */
 }
 
 .appkit-listing-layout__sidebar-facets {
@@ -370,10 +346,8 @@
   border-top: 1px solid #f4f4f5;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__sidebar-footer {
-    border-top-color: #1e293b;
-  }
+.dark .appkit-listing-layout__sidebar-footer {
+  border-top-color: #1e293b;
 }
 
 /* -- Main content ------------------------------------ */
@@ -416,12 +390,10 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-pagination {
-    background: rgba(2, 6, 23, 0.9);
-    border-top-color: rgba(30, 41, 59, 0.8);
-    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
-  }
+.dark .appkit-listing-layout__mobile-pagination {
+  background: rgba(2, 6, 23, 0.9);
+  border-top-color: rgba(30, 41, 59, 0.8);
+  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
 }
 
 .appkit-listing-layout__mobile-pagination--dashboard { bottom: 0; }
@@ -458,10 +430,8 @@
   }
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay {
-    background: #020617; /* slate-950 */
-  }
+.dark .appkit-listing-layout__mobile-overlay {
+  background: #020617; /* slate-950 */
 }
 
 .appkit-listing-layout__mobile-overlay-header {
@@ -473,10 +443,8 @@
   flex-shrink: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay-header {
-    border-bottom-color: #1e293b;
-  }
+.dark .appkit-listing-layout__mobile-overlay-header {
+  border-bottom-color: #1e293b;
 }
 
 .appkit-listing-layout__mobile-overlay-facets {
@@ -497,11 +465,9 @@
   background: #ffffff;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__mobile-overlay-footer {
-    border-top-color: #1e293b;
-    background: #020617;
-  }
+.dark .appkit-listing-layout__mobile-overlay-footer {
+  border-top-color: #1e293b;
+  background: #020617;
 }
 
 /* -- Close button in mobile overlay ----------------- */
@@ -520,8 +486,6 @@
   background: #f4f4f5; /* zinc-100 */
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-listing-layout__close-btn:hover {
-    background: #1e293b; /* slate-800 */
-  }
+.dark .appkit-listing-layout__close-btn:hover {
+  background: #1e293b; /* slate-800 */
 }

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

@@ -0,0 +1,54 @@
+import React from "react";
+export interface ListingToolbarSortOption {
+    value: string;
+    label: string;
+}
+export interface ListingToolbarLabels {
+    search?: string;
+    filters?: string;
+    sort?: string;
+    gridView?: string;
+    listView?: string;
+    resetAll?: string;
+    selectAll?: (total: number) => string;
+    deselectAll?: string;
+    selected?: (count: number) => string;
+    clearSelection?: string;
+}
+export interface ListingToolbarProps {
+    /** Filter button */
+    filterCount?: number;
+    onFiltersClick?: () => void;
+    /** Search */
+    searchValue?: string;
+    searchPlaceholder?: string;
+    onSearchChange?: (value: string) => void;
+    onSearchCommit?: () => void;
+    onSearchKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** Sort */
+    sortValue?: string;
+    sortOptions?: readonly ListingToolbarSortOption[];
+    onSortChange?: (value: string) => void;
+    /** Grid / list view toggle */
+    view?: "grid" | "list";
+    onViewChange?: (view: "grid" | "list") => void;
+    hideViewToggle?: boolean;
+    /** Reset all toolbar state to defaults */
+    onResetAll?: () => void;
+    hasActiveState?: boolean;
+    /**
+     * Bulk-selection mode.
+     * When `true`, the search row is replaced by Select All / Clear controls.
+     */
+    bulkMode?: boolean;
+    bulkSelectedCount?: number;
+    bulkTotalCount?: number;
+    onBulkSelectAll?: () => void;
+    onBulkClear?: () => void;
+    /** 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, onResetAll, hasActiveState, bulkMode, bulkSelectedCount, bulkTotalCount, onBulkSelectAll, onBulkClear, extra, labels, className, }: ListingToolbarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingToolbar.js

@@ -0,0 +1,34 @@
+"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 { SortDropdown } from "./SortDropdown";
+const DEFAULT_LABELS = {
+    search: "Search",
+    filters: "Filters",
+    sort: "Sort",
+    gridView: "Grid view",
+    listView: "List view",
+    resetAll: "Reset all",
+    selectAll: (total) => `Select All (${total})`,
+    deselectAll: "Deselect All",
+    selected: (count) => `${count} selected`,
+    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_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 = "", }) {
+    const l = { ...DEFAULT_LABELS, ...labels };
+    const handleKeyDown = (e) => {
+        if (onSearchKeyDown) {
+            onSearchKeyDown(e);
+        }
+        else if (e.key === "Enter") {
+            onSearchCommit?.();
+        }
+    };
+    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] })] }) }));
+}

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

@@ -23,15 +23,15 @@
   max-height: 90vh;
   overflow: hidden;
   border-radius: 1rem;
-  background: #ffffff;
+  background: var(--appkit-color-surface, #ffffff);
   box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
-  border: 1px solid #e4e4e7;
+  border: 1px solid var(--appkit-color-border, #e4e4e7);
   animation: appkit-modal-fade-up 0.15s ease forwards;
 }
 
 .dark .appkit-modal__panel {
-  background: #0f172a;
-  border-color: #334155;
+  background: var(--appkit-color-surface, #0f172a);
+  border-color: var(--appkit-color-border, #334155);
 }
 
 .appkit-modal__panel--sm { max-width: 24rem; }
@@ -45,18 +45,19 @@
   align-items: center;
   justify-content: space-between;
   padding: 1rem 1.5rem;
-  border-bottom: 1px solid #f4f4f5;
+  border-bottom: 1px solid var(--appkit-color-border-subtle, #f4f4f5);
   flex-shrink: 0;
 }
 
 .dark .appkit-modal__header {
-  border-bottom-color: #1e293b;
+  border-bottom-color: var(--appkit-color-border-subtle, #1e293b);
 }
 
 .appkit-modal__title {
   font-size: 1.125rem;
   font-weight: 600;
   letter-spacing: -0.01em;
+  color: var(--appkit-color-text, #18181b);
 }
 
 .appkit-modal__close {
@@ -64,19 +65,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-modal__close:hover {
-  color: #52525b;
+  color: var(--appkit-color-text-muted, #52525b);
+  background-color: var(--appkit-color-border-subtle, #f4f4f5);
 }
 
 .dark .appkit-modal__close {
-  color: #71717a;
+  color: var(--appkit-color-text-faint, #71717a);
 }
 
 .dark .appkit-modal__close:hover {
-  color: #cbd5e1;
+  color: var(--appkit-color-text-muted, #cbd5e1);
+  background-color: rgba(30, 41, 59, 0.5);
 }
 
 .appkit-modal__close-icon {

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

@@ -0,0 +1,11 @@
+import React from "react";
+export interface PageLoaderProps {
+    /**
+     * Optional skeleton layout rendered behind the spinner overlay.
+     * Improves Lighthouse CLS — the skeleton reserves the correct page shape
+     * while data loads. The spinner floats on top as a semi-transparent overlay.
+     * After 15s timeout the overlay switches to the error message.
+     */
+    children?: React.ReactNode;
+}
+export declare function PageLoader({ children }: PageLoaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/PageLoader.js

@@ -0,0 +1,21 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { Spinner } from "./Spinner";
+import { Button } from "./Button";
+export function PageLoader({ children }) {
+    const [timedOut, setTimedOut] = React.useState(false);
+    React.useEffect(() => {
+        const id = setTimeout(() => setTimedOut(true), 15000);
+        return () => clearTimeout(id);
+    }, []);
+    if (!children) {
+        // No skeleton — simple centred spinner / timeout message
+        if (timedOut) {
+            return (_jsxs("div", { className: "flex min-h-[60vh] flex-col items-center justify-center gap-4 p-8 text-center", children: [_jsx("p", { className: "text-base font-medium text-zinc-700 dark:text-zinc-300", children: "Something went wrong. Please refresh the page." }), _jsx(Button, { variant: "secondary", onClick: () => window.location.reload(), children: "Refresh" })] }));
+        }
+        return (_jsxs("div", { className: "flex min-h-[60vh] flex-col items-center justify-center gap-3", children: [_jsx(Spinner, { size: "lg" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Loading\u2026" })] }));
+    }
+    // Skeleton provided — render it behind a floating overlay
+    return (_jsxs("div", { className: "relative", children: [_jsx("div", { "aria-hidden": "true", children: children }), _jsx("div", { className: "pointer-events-none fixed inset-0 z-50 flex flex-col items-center justify-center gap-4 bg-white/60 p-8 text-center backdrop-blur-sm dark:bg-zinc-900/60", children: timedOut ? (_jsxs(_Fragment, { children: [_jsx("p", { className: "text-base font-medium text-zinc-700 dark:text-zinc-300", children: "Something went wrong. Please refresh the page." }), _jsx("div", { className: "pointer-events-auto", children: _jsx(Button, { variant: "secondary", onClick: () => window.location.reload(), children: "Refresh" }) })] })) : (_jsxs(_Fragment, { children: [_jsx(Spinner, { size: "lg" }), _jsx("p", { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Loading\u2026" })] })) })] }));
+}