@mohasinac/appkit 2.3.1 → 2.4.0

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" })] })) })] }));
+}

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

@@ -116,40 +116,38 @@
 }
 
 /* Dark mode */
-@media (prefers-color-scheme: dark) {
-  .appkit-radio-classic__circle {
-    border-color: #475569;
-  }
-  .appkit-radio-classic__circle--selected {
-    border-color: #ec4899;
-  }
-  .appkit-radio-classic__dot--selected {
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__pill {
-    border-color: #334155;
-    background: #0f172a;
-    color: #e4e4e7;
-  }
-  .appkit-radio-toggle__pill:hover {
-    border-color: #ec4899;
-  }
-  .appkit-radio-toggle__pill--selected {
-    border-color: #ec4899;
-    background: rgba(236, 72, 153, 0.1);
-    color: #fce7f3;
-  }
-  .appkit-radio-toggle__pill--error {
-    border-color: rgba(239, 68, 68, 0.6);
-  }
-  .appkit-radio-toggle__dot-ring {
-    border-color: #475569;
-  }
-  .appkit-radio-toggle__dot-ring--selected {
-    border-color: #ec4899;
-    background: #ec4899;
-  }
-  .appkit-radio-toggle__dot-inner {
-    background: #020617;
-  }
+.dark .appkit-radio-classic__circle {
+  border-color: #475569;
+}
+.dark .appkit-radio-classic__circle--selected {
+  border-color: #ec4899;
+}
+.dark .appkit-radio-classic__dot--selected {
+  background: #ec4899;
+}
+.dark .appkit-radio-toggle__pill {
+  border-color: #334155;
+  background: #0f172a;
+  color: #e4e4e7;
+}
+.dark .appkit-radio-toggle__pill:hover {
+  border-color: #ec4899;
+}
+.dark .appkit-radio-toggle__pill--selected {
+  border-color: #ec4899;
+  background: rgba(236, 72, 153, 0.1);
+  color: #fce7f3;
+}
+.dark .appkit-radio-toggle__pill--error {
+  border-color: rgba(239, 68, 68, 0.6);
+}
+.dark .appkit-radio-toggle__dot-ring {
+  border-color: #475569;
+}
+.dark .appkit-radio-toggle__dot-ring--selected {
+  border-color: #ec4899;
+  background: #ec4899;
+}
+.dark .appkit-radio-toggle__dot-inner {
+  background: #020617;
 }

package/dist/ui/components/RichTextEditor.js

@@ -55,5 +55,5 @@ export function RichTextEditor({ value, onChange, disabled = false, className =
             editor.innerHTML = value;
         }
     }, [value]);
-    return (_jsxs("div", { className: `rounded-lg border border-zinc-200 bg-white dark:border-slate-700 dark:bg-slate-900 ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-slate-700", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "rounded border border-zinc-200 px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-600 dark:text-zinc-200 dark:hover:bg-slate-800", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
+    return (_jsxs("div", { className: `appkit-rich-text-editor rounded-lg border border-zinc-200 bg-white dark:border-slate-700 dark:bg-slate-900 ${className}`, "data-section": "richtexteditor-div-582", children: [_jsx("div", { className: "appkit-rich-text-editor__toolbar flex flex-wrap gap-1 border-b border-zinc-200 p-2 dark:border-slate-700", "data-section": "richtexteditor-div-583", children: toolbarActions.map((action) => (_jsx("button", { type: "button", title: action.title, onClick: action.run, disabled: disabled, className: "appkit-rich-text-editor__btn rounded px-2 py-1 text-xs font-medium text-zinc-700 transition hover:bg-zinc-50 disabled:cursor-not-allowed disabled:opacity-50 dark:text-zinc-200 dark:hover:bg-slate-800", children: action.label }, action.title))) }), _jsx("div", { ref: editorRef, role: "textbox", "aria-label": "Rich text editor", contentEditable: !disabled, suppressContentEditableWarning: true, "data-placeholder": placeholder, onInput: emitChange, onBlur: emitChange, className: `prose prose-sm max-w-none p-3 focus:outline-none dark:prose-invert ${minHeightClassName} ${disabled ? "cursor-not-allowed opacity-70" : ""}` })] }));
 }

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

@@ -3,6 +3,7 @@ export interface RowAction {
     label: string;
     onClick: () => void;
     destructive?: boolean;
+    disabled?: boolean;
     icon?: React.ReactNode;
     separator?: boolean;
 }

package/dist/ui/components/RowActionMenu.js

@@ -10,8 +10,10 @@ export function RowActionMenu({ actions, align = "right", }) {
     const ref = useRef(null);
     useClickOutside(ref, () => setOpen(false), { enabled: open });
     useKeyPress("Escape", () => setOpen(false), { enabled: open });
-    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, "data-section": "rowactionmenu-div-585", children: actions.map((action, idx) => (_jsxs("div", { "data-section": "rowactionmenu-div-586", children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", onClick: () => {
+    return (_jsxs("div", { ref: ref, className: "appkit-row-action-menu", onClick: (e) => e.stopPropagation(), children: [_jsx(Button, { type: "button", variant: "ghost", "aria-label": "Row actions", "aria-haspopup": "menu", "aria-expanded": open, onClick: () => setOpen((v) => !v), className: "appkit-row-action-menu__trigger", children: _jsx(MoreHorizontal, { className: "h-4 w-4", strokeWidth: 1.5 }) }), open ? (_jsx("div", { role: "menu", className: `appkit-row-action-menu__dropdown ${align === "right" ? "appkit-row-action-menu__dropdown--right" : "appkit-row-action-menu__dropdown--left"}`, "data-section": "rowactionmenu-div-585", children: actions.map((action, idx) => (_jsxs("div", { "data-section": "rowactionmenu-div-586", children: [action.separator && idx > 0 ? (_jsx("div", { className: "appkit-row-action-menu__separator" })) : null, _jsxs(Button, { type: "button", role: "menuitem", variant: "ghost", disabled: action.disabled, onClick: () => {
+                                if (action.disabled)
+                                    return;
                                 action.onClick();
                                 setOpen(false);
-                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
+                            }, className: `appkit-row-action-menu__item ${action.destructive ? "appkit-row-action-menu__item--destructive" : ""} ${action.disabled ? "opacity-40 cursor-not-allowed" : ""}`, children: [action.icon ? (_jsx(Span, { className: "appkit-row-action-menu__icon", children: action.icon })) : null, action.label] })] }, `${action.label}-${idx}`))) })) : null] }));
 }

package/dist/ui/components/SectionTabs.js

@@ -5,7 +5,7 @@ import { Nav } from "./Semantic";
 import { Button } from "./Button";
 import { Span } from "./Typography";
 import { TextLink } from "./TextLink";
-export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-12 md:top-[108px]", currentPath, }) {
+export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-[var(--header-height,0px)]", currentPath, }) {
     const pathname = usePathname();
     const isControlled = typeof onChange === "function";
     const activePath = currentPath ?? pathname ?? "";

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

@@ -1,5 +1,6 @@
 .appkit-section-tabs {
   position: sticky;
+  top: var(--header-height, 0px);
   z-index: 10;
   background: #ffffff;
   border-bottom: 1px solid #e4e4e7;

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

@@ -3,7 +3,7 @@
 .appkit-side-drawer__backdrop {
   position: fixed;
   inset: 0;
-  z-index: 50;
+  z-index: 40;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(4px);
   transition: opacity 0.2s ease;
@@ -13,7 +13,7 @@
   position: fixed;
   top: 0;
   bottom: 0;
-  z-index: 50;
+  z-index: 40;
   background: white;
   box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
   display: flex;
@@ -25,18 +25,10 @@
   background: #0f172a;
 }
 
-/* Position */
+/* Full-viewport width on all breakpoints — navbars (z-50) render over this */
 .appkit-side-drawer--left { left: 0; width: 100%; }
 .appkit-side-drawer--right { right: 0; width: 100%; }
 
-@media (min-width: 640px) {
-  .appkit-side-drawer--left { width: 100%; }
-}
-@media (min-width: 768px) {
-  .appkit-side-drawer--left { width: 420px; }
-  .appkit-side-drawer--right { width: 60%; }
-}
-
 /* Header */
 .appkit-side-drawer__header {
   padding: 1.5rem;

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

@@ -45,10 +45,8 @@
   transform: translateX(0);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__panel {
-    background: #18181b; /* zinc-900 */
-  }
+.dark .appkit-side-modal__panel {
+  background: #18181b; /* zinc-900 */
 }
 
 /* -- Header ------------------------------------------ */
@@ -62,10 +60,8 @@
   flex-shrink: 0;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-side-modal__header {
-    border-bottom-color: #3f3f46; /* zinc-700 */
-  }
+.dark .appkit-side-modal__header {
+  border-bottom-color: #3f3f46; /* zinc-700 */
 }
 
 /* -- Body -------------------------------------------- */

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

@@ -5,10 +5,8 @@
   accent-color: var(--color-primary, #6366f1);
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-slider {
-    accent-color: var(--color-secondary, #818cf8);
-  }
+.dark .appkit-slider {
+  accent-color: var(--color-secondary, #818cf8);
 }
 
 .appkit-slider--disabled {

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

@@ -33,14 +33,12 @@
   padding-bottom: 1rem;
 }
 
-@media (prefers-color-scheme: dark) {
-  .appkit-tabs-list {
-    border-color: #334155;
-  }
-  .appkit-tabs-trigger:not([aria-selected="true"]) {
-    color: #94a3b8;
-  }
-  .appkit-tabs-trigger:not([aria-selected="true"]):hover {
-    color: #fff;
-  }
+.dark .appkit-tabs-list {
+  border-color: #334155;
+}
+.dark .appkit-tabs-trigger:not([aria-selected="true"]) {
+  color: #94a3b8;
+}
+.dark .appkit-tabs-trigger:not([aria-selected="true"]):hover {
+  color: #fff;
 }