@mohasinac/appkit 2.7.58 → 2.8.0

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

@@ -1,4 +1,12 @@
 import type { ReactNode, MouseEvent } from "react";
+export interface BaseListingCardIconOverlayProps {
+    /** Single icon (emoji or `/media/<slug>` URL) — typically `product.groupIcon`. */
+    groupIcon?: string;
+    /** Second icon — typically `product.sublistingIcon`. */
+    sublistingIcon?: string;
+    /** Where the overlay sits inside the hero. */
+    position?: string;
+}
 export interface BaseListingCardRootProps {
     className?: string;
     isSelected?: boolean;
@@ -36,9 +44,11 @@ declare function BaseListingCardRoot({ className, isSelected, isDisabled, varian
 declare function BaseListingCardHero({ aspect, variant, className, children, onMouseEnter, onMouseLeave, }: BaseListingCardHeroProps): import("react/jsx-runtime").JSX.Element;
 declare function BaseListingCardInfo({ variant, className, children, }: BaseListingCardInfoProps): import("react/jsx-runtime").JSX.Element;
 declare function BaseListingCardCheckbox({ selected, onSelect, label, position, className, }: BaseListingCardCheckboxProps): import("react/jsx-runtime").JSX.Element;
+declare function BaseListingCardIconOverlay({ groupIcon, sublistingIcon, position, }: BaseListingCardIconOverlayProps): import("react/jsx-runtime").JSX.Element | null;
 export declare const BaseListingCard: typeof BaseListingCardRoot & {
     Hero: typeof BaseListingCardHero;
     Info: typeof BaseListingCardInfo;
     Checkbox: typeof BaseListingCardCheckbox;
+    IconOverlay: typeof BaseListingCardIconOverlay;
 };
 export {};

package/dist/ui/components/BaseListingCard.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Span } from "./Typography";
 function BaseListingCardRoot({ className = "", isSelected, isDisabled, variant = "grid", onClick, onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, children, }) {
     return (_jsx("div", { onClick: onClick, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onMouseLeave: onMouseLeave, onTouchStart: onTouchStart, onTouchEnd: onTouchEnd, className: [
             "group relative w-full min-w-0 overflow-hidden rounded-xl border bg-white dark:bg-zinc-900 transition-shadow",
@@ -62,8 +63,23 @@ function BaseListingCardCheckbox({ selected, onSelect, label, position = "top-2
             .filter(Boolean)
             .join(" "), children: selected && (_jsx("svg", { className: "w-2.5 h-2.5 text-white", viewBox: "0 0 10 10", fill: "none", "aria-hidden": "true", children: _jsx("path", { d: "M1.5 5L4 7.5L8.5 2.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })) }));
 }
+function BaseListingCardIconOverlay({ groupIcon, sublistingIcon, position = "top-2 right-2", }) {
+    if (!groupIcon && !sublistingIcon)
+        return null;
+    const renderOne = (icon, key) => {
+        const isMediaUrl = icon.startsWith("/media/") || icon.startsWith("http");
+        if (isMediaUrl) {
+            return (
+            // eslint-disable-next-line @next/next/no-img-element, lir/no-raw-media-elements
+            _jsx("img", { src: icon, alt: "", className: "w-5 h-5 rounded-full border border-white/80 shadow-sm bg-white dark:bg-zinc-900 object-cover" }, key));
+        }
+        return (_jsx(Span, { size: "sm", className: "inline-flex items-center justify-center w-5 h-5 rounded-full border border-white/80 bg-white/95 dark:bg-zinc-900/95 shadow-sm leading-none", children: icon }, key));
+    };
+    return (_jsxs("div", { className: `absolute z-10 flex items-center gap-1 ${position}`, "aria-hidden": "true", children: [groupIcon && renderOne(groupIcon, "group"), sublistingIcon && renderOne(sublistingIcon, "sublisting")] }));
+}
 export const BaseListingCard = Object.assign(BaseListingCardRoot, {
     Hero: BaseListingCardHero,
     Info: BaseListingCardInfo,
     Checkbox: BaseListingCardCheckbox,
+    IconOverlay: BaseListingCardIconOverlay,
 });

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

@@ -0,0 +1,32 @@
+import { type ReactNode } from "react";
+export interface DetailPageGalleryImage {
+    /** Public URL (resolved to `/media/<slug>` already). */
+    url: string;
+    /** Alt text — falls back to the gallery title if omitted. */
+    alt?: string;
+    /** Optional caption rendered beneath the image. */
+    caption?: ReactNode;
+}
+export interface DetailPageGalleryProps {
+    /** Image list. Empty array renders the fallback. */
+    images: DetailPageGalleryImage[];
+    /** Default title used as alt-text fallback. */
+    title?: string;
+    /** Aspect ratio for the main image — defaults to `square`. */
+    aspect?: "square" | "video" | "portrait" | "wide";
+    /** Optional fallback slot rendered when `images` is empty. */
+    fallback?: ReactNode;
+    /** Initial selected index. */
+    initialIndex?: number;
+    /** Additional classes appended to the outer wrapper. */
+    className?: string;
+}
+/**
+ * `DetailPageGallery` — main image + thumbnail strip used by Product, Auction
+ * and PreOrder detail pages. Lightweight presentational component — domain
+ * logic (zoom, hover-preview, image-cycling-on-tap) is opt-in by the consumer
+ * via overlays.
+ *
+ * W1-14 — extracted 2026-05-23.
+ */
+export declare function DetailPageGallery({ images, title, aspect, fallback, initialIndex, className, }: DetailPageGalleryProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DetailPageGallery.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Div } from "./Div";
+const ASPECT_CLASS = {
+    square: "aspect-square",
+    video: "aspect-video",
+    portrait: "aspect-[3/4]",
+    wide: "aspect-[16/9]",
+};
+/**
+ * `DetailPageGallery` — main image + thumbnail strip used by Product, Auction
+ * and PreOrder detail pages. Lightweight presentational component — domain
+ * logic (zoom, hover-preview, image-cycling-on-tap) is opt-in by the consumer
+ * via overlays.
+ *
+ * W1-14 — extracted 2026-05-23.
+ */
+export function DetailPageGallery({ images, title, aspect = "square", fallback, initialIndex = 0, className, }) {
+    const [activeIndex, setActiveIndex] = useState(Math.min(Math.max(initialIndex, 0), Math.max(images.length - 1, 0)));
+    if (!images.length) {
+        return (_jsx(Div, { className: [
+                "appkit-detail-gallery",
+                "w-full overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800",
+                ASPECT_CLASS[aspect],
+                className,
+            ]
+                .filter(Boolean)
+                .join(" "), children: fallback }));
+    }
+    const active = images[activeIndex] ?? images[0];
+    return (_jsxs(Div, { className: [
+            "appkit-detail-gallery",
+            "w-full space-y-2",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Div, { className: [
+                    "w-full overflow-hidden rounded-2xl bg-zinc-100 dark:bg-zinc-800",
+                    ASPECT_CLASS[aspect],
+                ].join(" "), children: _jsx("img", { src: active.url, alt: active.alt ?? title ?? "", className: "h-full w-full object-cover" }) }), images.length > 1 ? (_jsx(Div, { className: "flex gap-2 overflow-x-auto pb-1", children: images.map((img, idx) => (_jsx("button", { type: "button", "aria-label": `View image ${idx + 1}`, onClick: () => setActiveIndex(idx), className: [
+                        "flex-shrink-0 h-16 w-16 overflow-hidden rounded-md border-2 transition-colors",
+                        idx === activeIndex
+                            ? "border-[var(--appkit-color-primary)]"
+                            : "border-transparent hover:border-zinc-300 dark:hover:border-zinc-600",
+                    ].join(" "), children: _jsx("img", { src: img.url, alt: img.alt ?? `${title ?? ""} ${idx + 1}`, className: "h-full w-full object-cover" }) }, img.url + idx))) })) : null, active.caption ? (_jsx(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: active.caption })) : null] }));
+}

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

@@ -0,0 +1,30 @@
+import { type ReactNode } from "react";
+export interface DetailPageHeroProps {
+    /** Page H1. */
+    title: ReactNode;
+    /** Optional eyebrow (breadcrumb / pre-title chip). */
+    eyebrow?: ReactNode;
+    /** Optional secondary heading (subtitle). */
+    subtitle?: ReactNode;
+    /** Inline meta row directly below title — typically price + counts + badges. */
+    metaRow?: ReactNode;
+    /** Long-form description (markdown / plain text). */
+    description?: ReactNode;
+    /** Slot rendered to the left of the hero text — typically gallery / collage / hero image. */
+    mediaSlot?: ReactNode;
+    /** Primary CTA(s) rendered at the bottom of the text column. */
+    actionsSlot?: ReactNode;
+    /** Additional content rendered below `actionsSlot` (e.g. stock indicator, fine print). */
+    belowActions?: ReactNode;
+    /** Additional classes appended to the outer wrapper. */
+    className?: string;
+}
+/**
+ * `DetailPageHero` — the top hero region shared by every listing detail page
+ * (Product, Auction, PreOrder, Bundle, PrizeDraw). Renders a 2-column layout:
+ * media on the left (~40%), title + meta + description + actions on the right.
+ *
+ * Slots stay open so domain-specific badges, price components, and CTAs flow
+ * through unchanged. W1-14 — extracted 2026-05-23.
+ */
+export declare function DetailPageHero({ title, eyebrow, subtitle, metaRow, description, mediaSlot, actionsSlot, belowActions, className, }: DetailPageHeroProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DetailPageHero.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Div } from "./Div";
+import { Row, Stack } from "./Layout";
+import { Heading, Text } from "./Typography";
+/**
+ * `DetailPageHero` — the top hero region shared by every listing detail page
+ * (Product, Auction, PreOrder, Bundle, PrizeDraw). Renders a 2-column layout:
+ * media on the left (~40%), title + meta + description + actions on the right.
+ *
+ * Slots stay open so domain-specific badges, price components, and CTAs flow
+ * through unchanged. W1-14 — extracted 2026-05-23.
+ */
+export function DetailPageHero({ title, eyebrow, subtitle, metaRow, description, mediaSlot, actionsSlot, belowActions, className, }) {
+    return (_jsxs(Row, { gap: "lg", align: "start", className: [
+            "appkit-detail-hero",
+            "flex-col md:flex-row",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [mediaSlot ? _jsx(Div, { className: "w-full md:w-2/5", children: mediaSlot }) : null, _jsxs(Stack, { gap: "md", className: "flex-1 min-w-0", children: [eyebrow ? (_jsx(Div, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: eyebrow })) : null, _jsx(Heading, { level: 1, className: "text-3xl font-semibold text-zinc-900 dark:text-zinc-100", children: title }), subtitle ? (_jsx(Text, { size: "lg", color: "muted", children: subtitle })) : null, metaRow ? _jsx(Row, { gap: "sm", align: "center", className: "flex-wrap", children: metaRow }) : null, description ? (_jsx(Text, { className: "whitespace-pre-line", children: description })) : null, actionsSlot, belowActions] })] }));
+}

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

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export interface DetailPageTab {
+    /** Stable tab id used for the URL `tab=` param and ARIA wiring. */
+    id: string;
+    /** Tab trigger label. */
+    label: ReactNode;
+    /** Optional count chip rendered next to the label. */
+    count?: number;
+    /** Tab panel content. */
+    content: ReactNode;
+    /** When true, the tab is rendered but disabled. */
+    disabled?: boolean;
+}
+export interface DetailPageTabsProps {
+    /** Tab definitions. */
+    tabs: DetailPageTab[];
+    /** Controlled active tab id (omit for uncontrolled). */
+    activeTab?: string;
+    /** Default tab id (uncontrolled). */
+    defaultTab?: string;
+    /** Change callback. */
+    onTabChange?: (tabId: string) => void;
+    /** Additional classes appended to the outer wrapper. */
+    className?: string;
+}
+/**
+ * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
+ * pages. Renders an accessible trigger strip + a single visible panel.
+ * Animation and URL sync are intentionally not baked in so consumers can
+ * wire those via the standard `useUrlTable` / `usePanelUrlSync` hooks.
+ *
+ * W1-14 — extracted 2026-05-23.
+ */
+export declare function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }: DetailPageTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DetailPageTabs.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Div } from "./Div";
+/**
+ * `DetailPageTabs` — tab shell used by Product, Auction and Event detail
+ * pages. Renders an accessible trigger strip + a single visible panel.
+ * Animation and URL sync are intentionally not baked in so consumers can
+ * wire those via the standard `useUrlTable` / `usePanelUrlSync` hooks.
+ *
+ * W1-14 — extracted 2026-05-23.
+ */
+export function DetailPageTabs({ tabs, activeTab: activeTabProp, defaultTab, onTabChange, className, }) {
+    const [internalActive, setInternalActive] = useState(defaultTab ?? tabs[0]?.id ?? "");
+    const activeTab = activeTabProp ?? internalActive;
+    const active = tabs.find((t) => t.id === activeTab) ?? tabs[0];
+    const handleChange = (id) => {
+        if (activeTabProp === undefined)
+            setInternalActive(id);
+        onTabChange?.(id);
+    };
+    return (_jsxs(Div, { className: [
+            "appkit-detail-tabs",
+            "space-y-4",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx(Div, { role: "tablist", "aria-orientation": "horizontal", className: "flex gap-2 border-b border-zinc-200 dark:border-zinc-700 overflow-x-auto", children: tabs.map((tab) => {
+                    const isActive = tab.id === active?.id;
+                    return (_jsxs("button", { type: "button", role: "tab", "aria-selected": isActive, "aria-controls": `detail-tab-panel-${tab.id}`, id: `detail-tab-trigger-${tab.id}`, disabled: tab.disabled, onClick: () => handleChange(tab.id), className: [
+                            "flex-shrink-0 px-4 py-2 text-sm font-medium border-b-2 -mb-px transition-colors",
+                            isActive
+                                ? "border-[var(--appkit-color-primary)] text-zinc-900 dark:text-zinc-100"
+                                : "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200",
+                            tab.disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer",
+                        ].join(" "), children: [tab.label, typeof tab.count === "number" ? (_jsx("span", { className: "ml-2 inline-flex items-center justify-center rounded-full bg-zinc-100 dark:bg-zinc-800 px-2 py-0.5 text-xs", children: tab.count })) : null] }, tab.id));
+                }) }), active ? (_jsx(Div, { role: "tabpanel", id: `detail-tab-panel-${active.id}`, "aria-labelledby": `detail-tab-trigger-${active.id}`, children: active.content })) : null] }));
+}

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

@@ -18,11 +18,24 @@
   scroll-snap-type: x mandatory;
 }
 
+/* W1-47 — show a slim themed scrollbar instead of hiding it, so users can
+ * manually drag through the strip during auto-rotation. */
 .appkit-hscroller__track--no-scrollbar {
-  scrollbar-width: none;
+  scrollbar-width: thin;
+  scrollbar-color: var(--appkit-color-border) transparent;
 }
 .appkit-hscroller__track--no-scrollbar::-webkit-scrollbar {
-  display: none;
+  height: 6px;
+}
+.appkit-hscroller__track--no-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.appkit-hscroller__track--no-scrollbar::-webkit-scrollbar-thumb {
+  background: var(--appkit-color-border);
+  border-radius: 3px;
+}
+.appkit-hscroller__track--no-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: var(--appkit-color-text-muted);
 }
 
 /* -- Items ------------------------------------------- */

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

@@ -0,0 +1,10 @@
+import React from "react";
+export interface ListingFilterDrawerProps {
+    open: boolean;
+    onClose: () => void;
+    onApply: () => void;
+    onClear: () => void;
+    activeCount: number;
+    children: React.ReactNode;
+}
+export declare function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }: ListingFilterDrawerProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/ListingFilterDrawer.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+export function ListingFilterDrawer({ open, onClose, onApply, onClear, activeCount, children, }) {
+    if (!open)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeCount > 0 && (_jsx("button", { type: "button", onClick: onClear, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: onClose, "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 dark:text-zinc-400 hover:bg-zinc-100 dark:hover:bg-zinc-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: children }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: onApply, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeCount > 0 ? ` (${activeCount})` : ""] }) })] })] }));
+}

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

@@ -19,6 +19,7 @@
  */
 import { ReactNode } from "react";
 import type { BulkActionItem } from "./BulkActionBar";
+import type { ViewPortal } from "./Layout";
 export interface ListingLayoutLabels {
     filtersTitle?: string;
     clearAll?: string;
@@ -48,7 +49,9 @@ export interface ListingLayoutProps {
     resultCountSlot?: ReactNode;
     toolbarPaginationSlot?: ReactNode;
     paginationSlot?: ReactNode;
-    children: ReactNode;
+    /** Optional — when `detailView` is provided, children are bypassed; when `overlays`-only,
+     * the layout still renders empty toolbar + sidebar around no content. */
+    children?: ReactNode;
     /** When true, sticky toolbar sits at top-0 (inside overflow-y-auto container).
      *  When false, accounts for a top navbar above (top-14/top-[120px]). */
     isDashboard?: boolean;
@@ -59,5 +62,11 @@ export interface ListingLayoutProps {
     loading?: boolean;
     errorSlot?: ReactNode;
     labels?: ListingLayoutLabels;
+    /** Portal context — sets `isDashboard` default (admin/seller=true, user/public=false). */
+    portal?: ViewPortal;
+    /** Overlay elements rendered after the layout (drawers, modals, confirm dialogs). */
+    overlays?: ReactNode;
+    /** When provided, the entire layout is replaced with this view (detail/edit mode). */
+    detailView?: ReactNode;
 }
-export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading, errorSlot, labels, }: ListingLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen, filterPendingCount, className, loading, errorSlot, labels, portal, overlays, detailView, }: ListingLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingLayout.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * ListingLayout
  *
@@ -34,7 +34,13 @@ const DEFAULT_LABELS = {
     hideFilters: "Hide filters",
     filterActiveCount: (count) => `${count} active`,
 };
-export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard = false, defaultSidebarOpen = false, filterPendingCount, className = "", loading = false, errorSlot, labels, }) {
+export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filterActiveCount = 0, onFilterApply, onFilterClear, filterTitle, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, viewToggleSlot, actionsSlot, selectedCount = 0, onClearSelection, bulkActionItems, toolbarPaginationSlot, paginationSlot, children, isDashboard, defaultSidebarOpen = false, filterPendingCount, className = "", loading = false, errorSlot, labels, portal, overlays, detailView, }) {
+    // Detail view short-circuit (folded from ListingViewShell)
+    if (detailView) {
+        return _jsx(_Fragment, { children: detailView });
+    }
+    // Portal-derived isDashboard default (folded from ListingViewShell)
+    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller");
     const l = { ...DEFAULT_LABELS, ...labels };
     const [sidebarOpen, setSidebarOpen] = useState(defaultSidebarOpen);
     const [mobileFilterOpen, setMobileFilterOpen] = useState(false);
@@ -56,7 +62,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
             .filter(Boolean)
             .join(" "), children: [headerSlot, statusTabsSlot && (_jsx("div", { className: "appkit-listing-layout__status-tabs", "data-section": "listinglayout-div-539", children: statusTabsSlot })), _jsxs("div", { className: [
                     "appkit-listing-layout__toolbar",
-                    isDashboard
+                    effectiveIsDashboard
                         ? "appkit-listing-layout__toolbar--dashboard"
                         : "appkit-listing-layout__toolbar--page",
                 ].join(" "), "data-section": "listinglayout-div-540", children: [_jsxs("div", { className: "appkit-listing-layout__toolbar-row appkit-listing-layout__toolbar-row--desktop", "data-section": "listinglayout-div-541", children: [hasFilter && (_jsxs(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setSidebarOpen((prev) => !prev), "aria-label": sidebarOpen ? l.hideFilters : l.showFilters, "aria-expanded": sidebarOpen, className: [
@@ -73,7 +79,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                                 clearSelection: l.clearAll,
                             } }) }))] }), _jsxs("div", { className: "appkit-listing-layout__body", "data-section": "listinglayout-div-552", children: [hasFilter && (_jsx(Aside, { "aria-label": panelTitle, className: [
                             "appkit-listing-layout__sidebar",
-                            isDashboard
+                            effectiveIsDashboard
                                 ? "appkit-listing-layout__sidebar--dashboard"
                                 : "appkit-listing-layout__sidebar--page",
                             sidebarOpen
@@ -83,7 +89,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                                             ? `${l.applyFilters} (${filterPendingCount})`
                                             : l.applyFilters }) })] }) })), _jsxs("div", { className: "appkit-listing-layout__content", "data-section": "listinglayout-div-557", children: [activeFiltersSlot, resultCountSlot && (_jsx("div", { className: "appkit-listing-layout__result-count", "data-section": "listinglayout-div-558", children: resultCountSlot })), errorSlot ? (errorSlot) : (_jsxs(_Fragment, { children: [children, paginationSlot && (_jsx("div", { className: "appkit-listing-layout__pagination", "data-section": "listinglayout-div-559", children: paginationSlot }))] }))] })] }), toolbarPaginationSlot && (_jsx(Nav, { "aria-label": "Pagination", className: [
                     "appkit-listing-layout__mobile-pagination",
-                    isDashboard
+                    effectiveIsDashboard
                         ? "appkit-listing-layout__mobile-pagination--dashboard"
                         : selectedCount > 0
                             ? "appkit-listing-layout__mobile-pagination--bulk"
@@ -92,7 +98,7 @@ export function ListingLayout({ headerSlot, statusTabsSlot, filterContent, filte
                     ? `${panelTitle} (${filterActiveCount})`
                     : panelTitle, footer: _jsxs("div", { className: "appkit-listing-layout__mobile-overlay-footer", "data-section": "listinglayout-div-560", children: [_jsx(Button, { type: "button", variant: "secondary", className: "flex-1 rounded-xl", onClick: () => onFilterClear?.(), children: l.clearAll }), _jsx(Button, { type: "button", variant: "primary", className: "flex-1 rounded-xl", onClick: handleMobileApply, children: filterPendingCount != null && filterPendingCount > 0
                                 ? `${l.applyFilters} (${filterPendingCount})`
-                                : l.applyFilters })] }), children: filterContent }))] }));
+                                : l.applyFilters })] }), children: filterContent })), overlays] }));
 }
 function FilterIcon() {
     return (_jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2a1 1 0 01-.293.707L13 13.414V19a1 1 0 01-.553.894l-4 2A1 1 0 017 21v-7.586L3.293 6.707A1 1 0 013 6V4z" }) }));

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

@@ -0,0 +1,66 @@
+import { ReactNode } from "react";
+import type { QuickFieldDef } from "../../features/shell/QuickFormDrawer";
+export interface PaginatedSelectOption<V = string> {
+    value: V;
+    label: string;
+    meta?: Record<string, unknown>;
+}
+export interface AsyncPage<T> {
+    items: T[];
+    hasMore: boolean;
+    nextPage?: number;
+}
+interface BaseProps<V> {
+    options?: PaginatedSelectOption<V>[];
+    loadOptions?: (query: string, page: number) => Promise<AsyncPage<PaginatedSelectOption<V>>>;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    /** "+ Create new …" button. Provide `renderCreateForm` OR (`createFields` + `onCreateSubmit`). */
+    createLabel?: string;
+    drawerTitle?: string;
+    renderCreateForm?: (props: {
+        onCreated: (option: PaginatedSelectOption<V>) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+    createFields?: QuickFieldDef[];
+    onCreateSubmit?: (values: Record<string, unknown>) => Promise<PaginatedSelectOption<V>>;
+    createSubmitLabel?: string;
+}
+interface SingleProps<V> extends BaseProps<V> {
+    multiple?: false;
+    value?: V | null;
+    onChange?: (value: V | null, option: PaginatedSelectOption<V> | null) => void;
+}
+interface MultiProps<V> extends BaseProps<V> {
+    multiple: true;
+    value: V[];
+    onChange: (values: V[], options: PaginatedSelectOption<V>[]) => void;
+    maxChipsVisible?: number;
+}
+export type PaginatedSelectProps<V = string> = SingleProps<V> | MultiProps<V>;
+/**
+ * PaginatedSelect — searchable, async-paginated select with optional multi-mode
+ * and optional inline create-new drawer. Replaces DynamicSelect, InlineCreateSelect,
+ * and PaginatedMultiSelect.
+ *
+ * @example single-select
+ * <PaginatedSelect value={storeId} onChange={setStoreId} loadOptions={loadStores} />
+ *
+ * @example single-select with inline create
+ * <PaginatedSelect
+ *   value={categoryId}
+ *   onChange={(v) => setCategoryId(v ?? "")}
+ *   loadOptions={loadCategories}
+ *   createLabel="Category"
+ *   renderCreateForm={({ onCreated, onCancel }) => <CategoryForm ... />}
+ * />
+ *
+ * @example multi-select
+ * <PaginatedSelect multiple value={tagIds} onChange={setTagIds} loadOptions={loadTags} />
+ */
+export declare function PaginatedSelect<V = string>(props: PaginatedSelectProps<V>): import("react/jsx-runtime").JSX.Element;
+export {};