@mohasinac/appkit 2.7.27 → 2.7.30

package/dist/ui/DataTable.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useMemo } from "react";
+const CLS_CHECKBOX = "rounded border-zinc-300";
 import { Button } from "./components/Button";
 import { Spinner } from "./components/Spinner";
 import { Pagination } from "./components/Pagination";
@@ -78,6 +79,10 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
         }
         return sorted;
     }, [data, sortKey, sortDirection]);
+    const handleRowSelectionChange = (item, checked) => {
+        const id = keyExtractor(item);
+        onSelectionChange?.(checked ? [...selectedIds, id] : selectedIds.filter((s) => s !== id));
+    };
     const paginatedData = useMemo(() => {
         if (externalPagination)
             return sortedData;
@@ -115,7 +120,7 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                 mobileCardRender &&
                 renderCardGrid(activeViewMode), activeViewMode === "table" && mobileCardRender && (_jsx("div", { className: "appkit-data-table__mobile-cards", "data-section": "datatable-div-638", children: paginatedData.map((item) => (_jsx(SelectableCard, { id: keyExtractor(item), selectable: selectable, selected: selectedIds.includes(keyExtractor(item)), onToggle: (id, checked) => onSelectionChange?.(checked
                         ? [...selectedIds, id]
-                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-639", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, "data-section": "datatable-div-640", children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
+                        : selectedIds.filter((s) => s !== id)), children: mobileCardRender(item) }, keyExtractor(item)))) })), activeViewMode === "table" && (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-639", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, "data-section": "datatable-div-640", children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 &&
                                                     paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
                                                     const pageIds = paginatedData.map(keyExtractor);
                                                     onSelectionChange?.(e.target.checked
@@ -133,15 +138,31 @@ pageSize: pageSizeProp, stickyHeader: stickyHeaderProp, striped: stripedProp, sh
                                             ? "appkit-data-table__row--striped"
                                             : "",
                                         onRowClick ? "appkit-data-table__row--clickable" : "",
-                                    ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: "rounded border-zinc-300", "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => {
-                                                    const id = keyExtractor(item);
-                                                    onSelectionChange?.(e.target.checked
-                                                        ? [...selectedIds, id]
-                                                        : selectedIds.filter((s) => s !== id));
-                                                } }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
+                                    ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => handleRowSelectionChange(item, e.target.checked) }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render
                                                 ? col.render(item)
                                                 : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) })), !externalPagination && totalPages > 1 && (_jsx("div", { className: "appkit-data-table__pagination", "data-section": "datatable-div-641", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: setCurrentPage, maxVisible: resolvedPag.maxVisible, showFirstLast: resolvedPag.showFirstLast, showPrevNext: resolvedPag.showPrevNext, size: resolvedPag.size }) }))] }));
 }
+function DataTableViewToggle({ showViewToggle, showTableView, activeViewMode, labels, onViewModeChange, }) {
+    if (!showViewToggle)
+        return null;
+    return (_jsxs("div", { className: "appkit-data-table__view-toggle", role: "toolbar", "aria-label": "View mode", "data-section": "datatable-div-635", children: [showTableView && (_jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("table"), "aria-label": labels.tableView, "aria-pressed": activeViewMode === "table", className: `appkit-data-table__view-btn ${activeViewMode === "table" ? "appkit-data-table__view-btn--active" : ""} hidden sm:flex`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3 10h18M3 6h18M3 14h18M3 18h18" }) }) })), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("grid"), "aria-label": labels.gridView, "aria-pressed": activeViewMode === "grid", className: `appkit-data-table__view-btn ${activeViewMode === "grid" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M3.75 6A2.25 2.25 0 016 3.75h2.25A2.25 2.25 0 0110.5 6v2.25a2.25 2.25 0 01-2.25 2.25H6a2.25 2.25 0 01-2.25-2.25V6zM3.75 15.75A2.25 2.25 0 016 13.5h2.25a2.25 2.25 0 012.25 2.25V18a2.25 2.25 0 01-2.25 2.25H6A2.25 2.25 0 013.75 18v-2.25zM13.5 6a2.25 2.25 0 012.25-2.25H18A2.25 2.25 0 0120.25 6v2.25A2.25 2.25 0 0118 10.5h-2.25a2.25 2.25 0 01-2.25-2.25V6zM13.5 15.75a2.25 2.25 0 012.25-2.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-2.25A2.25 2.25 0 0113.5 18v-2.25z" }) }) }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => onViewModeChange("list"), "aria-label": labels.listView, "aria-pressed": activeViewMode === "list", className: `appkit-data-table__view-btn ${activeViewMode === "list" ? "appkit-data-table__view-btn--active" : ""}`, children: _jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zM3.75 12h.007v.008H3.75V12zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0zm-.375 5.25h.007v.008H3.75v-.008zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" }) }) })] }));
+}
+function DataTableTableView({ columns, paginatedData, keyExtractor, selectable, selectedIds, stickyHeader, striped, sortKey, sortDirection, actions, labelActions, onRowClick, onSelectionChange, onSort, onRowSelectionChange, }) {
+    return (_jsx("div", { className: "appkit-data-table__wrapper", "data-section": "datatable-div-639", children: _jsx("div", { className: `appkit-data-table__scroll ${stickyHeader ? "appkit-data-table__scroll--sticky" : ""}`, "data-section": "datatable-div-640", children: _jsxs("table", { className: "appkit-data-table__table", children: [_jsx("thead", { className: `appkit-data-table__thead ${stickyHeader ? "appkit-data-table__thead--sticky" : ""}`, children: _jsxs("tr", { children: [selectable && (_jsx("th", { scope: "col", className: "px-4 py-3 w-8", children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select all on page", checked: paginatedData.length > 0 && paginatedData.every((item) => selectedIds.includes(keyExtractor(item))), onChange: (e) => {
+                                            const pageIds = paginatedData.map(keyExtractor);
+                                            onSelectionChange?.(e.target.checked
+                                                ? [...new Set([...selectedIds, ...pageIds])]
+                                                : selectedIds.filter((id) => !pageIds.includes(id)));
+                                        } }) })), columns.map((col) => (_jsx("th", { scope: "col", "aria-sort": col.sortable
+                                        ? sortKey === col.key
+                                            ? sortDirection === "asc" ? "ascending" : "descending"
+                                            : "none"
+                                        : undefined, className: `appkit-data-table__th ${col.sortable ? "appkit-data-table__th--sortable" : ""}`, style: { width: col.width }, onClick: () => col.sortable && onSort(col.key), children: _jsxs(Row, { gap: "sm", children: [col.header, col.sortable && (_jsx("span", { className: "text-zinc-400", "aria-hidden": "true", children: sortKey === col.key ? (sortDirection === "asc" ? "↑" : "↓") : _jsx("span", { className: "opacity-30", children: "\u2195" }) }))] }) }, col.key))), actions && (_jsx("th", { scope: "col", className: "appkit-data-table__th appkit-data-table__td--actions", children: labelActions }))] }) }), _jsx("tbody", { className: "appkit-data-table__tbody divide-y divide-zinc-200 dark:divide-slate-700", children: paginatedData.map((item, index) => (_jsxs("tr", { className: [
+                                "appkit-data-table__row",
+                                striped && index % 2 === 1 ? "appkit-data-table__row--striped" : "",
+                                onRowClick ? "appkit-data-table__row--clickable" : "",
+                            ].join(" "), onClick: () => onRowClick?.(item), children: [selectable && (_jsx("td", { className: "px-4 py-4 w-8", onClick: (e) => e.stopPropagation(), children: _jsx("input", { type: "checkbox", className: CLS_CHECKBOX, "aria-label": "Select row", checked: selectedIds.includes(keyExtractor(item)), onChange: (e) => onRowSelectionChange(item, e.target.checked) }) })), columns.map((col) => (_jsx("td", { className: "appkit-data-table__td", children: col.render ? col.render(item) : (item[col.key] ?? "-") }, col.key))), actions && (_jsx("td", { className: "appkit-data-table__td appkit-data-table__td--actions", onClick: (e) => e.stopPropagation(), children: actions(item) }))] }, keyExtractor(item)))) })] }) }) }));
+}
 function SelectableCard({ id, selectable, selected, onToggle, children, listMode = false, }) {
     if (!selectable)
         return _jsx("div", { className: "h-full", "data-section": "datatable-div-642", children: children });

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ActionDef } from "../../_internal/shared/actions/action-registry";
 /**
  * Button — versatile button with multiple variants, sizes, and loading state.
  *
@@ -28,6 +29,12 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     children?: React.ReactNode;
     /** Render as the child element (e.g. next/link) with button styling applied */
     asChild?: boolean;
+    /**
+     * CTA registry action — auto-fills children (label), aria-label, variant, and
+     * shows a confirmation dialog before firing onClick when action.confirmation is set.
+     * Children and aria-label props override the action defaults when explicitly provided.
+     */
+    action?: ActionDef;
 }
-export declare function Button({ variant, size, className, isLoading, disabled, children, asChild, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+export declare function Button({ variant, size, className, isLoading, disabled, children, asChild, action, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ui/components/Button.js

@@ -1,6 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useCallback } from "react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useCallback, useState } from "react";
+import { createPortal } from "react-dom";
 import { twMerge } from "tailwind-merge";
 import { Loader2 } from "lucide-react";
 function spawnRipple(host, clientX, clientY) {
@@ -37,22 +38,60 @@ const UI_BUTTON = {
         lg: "appkit-button--lg",
     },
 };
-export function Button({ variant = "primary", size = "md", className = "", isLoading = false, disabled, children, asChild = false, ...props }) {
-    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[variant], UI_BUTTON.sizes[size], className);
+// Map ActionKind → Button variant (caller can override via explicit variant prop)
+const ACTION_KIND_VARIANT = {
+    primary: "primary",
+    secondary: "secondary",
+    danger: "danger",
+    ghost: "ghost",
+    link: "ghost",
+    chip: "outline",
+};
+export function Button({ variant, size = "md", className = "", isLoading = false, disabled, children, asChild = false, action, ...props }) {
+    const [confirmOpen, setConfirmOpen] = useState(false);
+    // Resolve defaults from action registry
+    const resolvedVariant = variant ?? (action ? (ACTION_KIND_VARIANT[action.kind] ?? "primary") : "primary");
+    const resolvedChildren = children ?? (action ? action.label : undefined);
+    const resolvedAriaLabel = props["aria-label"] ?? (action ? (action.ariaLabel ?? action.label) : undefined);
+    const classes = twMerge(UI_BUTTON.base, UI_BUTTON.variants[resolvedVariant], UI_BUTTON.sizes[size], className);
     const userOnClick = props.onClick;
     const handleClick = useCallback((event) => {
         if (!disabled && !isLoading) {
             spawnRipple(event.currentTarget, event.clientX, event.clientY);
         }
+        if (action?.confirmation) {
+            event.preventDefault();
+            setConfirmOpen(true);
+            return;
+        }
+        userOnClick?.(event);
+    }, [disabled, isLoading, action, userOnClick]);
+    const handleConfirm = useCallback((event) => {
+        setConfirmOpen(false);
         userOnClick?.(event);
-    }, [disabled, isLoading, userOnClick]);
-    if (asChild && React.isValidElement(children)) {
-        const child = children;
+    }, [userOnClick]);
+    if (asChild && React.isValidElement(resolvedChildren)) {
+        const child = resolvedChildren;
         return React.cloneElement(child, {
             ...props,
             className: twMerge(String(child.props.className ?? ""), classes),
             ...(disabled ? { "aria-disabled": true } : {}),
         });
     }
-    return (_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: children })) : (_jsx("span", { className: "appkit-button__content", children: children }))] }));
+    const confirmDef = action?.confirmation;
+    const confirmVariant = confirmDef?.confirmKind
+        ? (ACTION_KIND_VARIANT[confirmDef.confirmKind] ?? "primary")
+        : "primary";
+    return (_jsxs(_Fragment, { children: [_jsxs("button", { className: classes, disabled: disabled || isLoading, "aria-busy": isLoading || undefined, ...props, "aria-label": resolvedAriaLabel, onClick: handleClick, children: [isLoading && (_jsx(Loader2, { className: "appkit-button__spinner", "aria-hidden": "true" })), isLoading ? (_jsx("span", { className: "appkit-button__content appkit-button__content--loading", children: resolvedChildren })) : (_jsx("span", { className: "appkit-button__content", children: resolvedChildren }))] }), confirmOpen && confirmDef && typeof document !== "undefined" && createPortal(_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "appkit-action-confirm-title", style: {
+                    position: "fixed", inset: 0, zIndex: "var(--appkit-z-modal, 1000)",
+                    display: "flex", alignItems: "center", justifyContent: "center",
+                    background: "rgba(0,0,0,0.45)", backdropFilter: "blur(2px)",
+                }, onClick: (e) => { if (e.target === e.currentTarget)
+                    setConfirmOpen(false); }, children: _jsxs("div", { style: {
+                        background: "var(--appkit-surface, #fff)",
+                        borderRadius: "var(--appkit-radius-lg, 12px)",
+                        padding: "1.5rem",
+                        maxWidth: "380px", width: "calc(100% - 2rem)",
+                        boxShadow: "var(--appkit-shadow-lg, 0 20px 60px rgba(0,0,0,0.2))",
+                    }, children: [_jsx("p", { id: "appkit-action-confirm-title", style: { fontWeight: 600, marginBottom: "0.5rem", fontSize: "1rem" }, children: confirmDef.title }), _jsx("p", { style: { fontSize: "0.875rem", color: "var(--appkit-color-muted, #6b7280)", marginBottom: "1.25rem" }, children: confirmDef.body }), _jsxs("div", { style: { display: "flex", gap: "0.5rem", justifyContent: "flex-end" }, children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: () => setConfirmOpen(false), children: confirmDef.cancelLabel ?? "Cancel" }), _jsx(Button, { variant: confirmVariant, size: "sm", onClick: handleConfirm, children: confirmDef.confirmLabel })] })] }) }), document.body)] }));
 }

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

@@ -0,0 +1,18 @@
+export interface LightboxImage {
+    src: string;
+    alt: string;
+    /** Short label shown in top-left corner of the enlarged image (e.g. "#1"). */
+    badge?: string;
+    /** Title/caption rendered below the image. */
+    caption?: string;
+    /** Secondary line below caption (e.g. formatted price or estimated value). */
+    sub?: string;
+}
+export interface CollageLightboxProps {
+    images: LightboxImage[];
+    /** Index of the image that triggered the open — lightbox starts here. */
+    initialIndex: number;
+    onClose: () => void;
+}
+export declare function CollageLightbox({ images, initialIndex, onClose, }: CollageLightboxProps): import("react/jsx-runtime").JSX.Element;
+export default CollageLightbox;

package/dist/ui/components/CollageLightbox.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * CollageLightbox — full-screen image viewer for collage grids.
+ *
+ * Opens at the clicked index and cycles circularly through all images.
+ * Keyboard: Escape = close, ArrowLeft/Right = navigate.
+ * Clicking the backdrop closes the lightbox.
+ */
+import React, { useCallback, useEffect } from "react";
+import { Div, Text } from "./index";
+export function CollageLightbox({ images, initialIndex, onClose, }) {
+    const [current, setCurrent] = React.useState(initialIndex);
+    const count = images.length;
+    const prev = useCallback(() => setCurrent((i) => (i - 1 + count) % count), [count]);
+    const next = useCallback(() => setCurrent((i) => (i + 1) % count), [count]);
+    useEffect(() => {
+        const onKey = (e) => {
+            if (e.key === "Escape")
+                onClose();
+            else if (e.key === "ArrowLeft")
+                prev();
+            else if (e.key === "ArrowRight")
+                next();
+        };
+        document.addEventListener("keydown", onKey);
+        return () => document.removeEventListener("keydown", onKey);
+    }, [onClose, prev, next]);
+    const img = images[current];
+    return (_jsx(Div, { className: "fixed inset-0 z-[var(--appkit-z-modal,9999)] flex items-center justify-center bg-black/92 backdrop-blur-sm", onClick: onClose, role: "dialog", "aria-modal": "true", "aria-label": "Image lightbox", children: _jsxs(Div, { className: "relative flex w-full max-w-5xl flex-col items-center px-4", onClick: (e) => e.stopPropagation(), children: [_jsxs(Div, { className: "mb-3 flex w-full items-center justify-between", children: [_jsxs(Text, { className: "text-sm font-medium text-white/60", children: [current + 1, " / ", count] }), _jsx("button", { onClick: onClose, className: "rounded-full bg-white/10 p-2 text-white transition-colors hover:bg-white/25", "aria-label": "Close lightbox", children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) }) })] }), _jsxs(Div, { className: "flex w-full items-center gap-3", children: [_jsx("button", { onClick: prev, className: "flex-shrink-0 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/25 disabled:opacity-30", "aria-label": "Previous image", disabled: count <= 1, children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) }) }), _jsxs(Div, { className: "relative flex max-h-[68vh] flex-1 items-center justify-center overflow-hidden rounded-2xl bg-black/30", children: [img?.src ? (
+                                /* eslint-disable-next-line @next/next/no-img-element */
+                                _jsx("img", { src: img.src, alt: img.alt, className: "max-h-[68vh] w-full object-contain" }, img.src + current)) : (_jsx(Div, { className: "flex h-64 w-full items-center justify-center text-6xl text-white/30", children: "\uD83D\uDDBC\uFE0F" })), img?.badge ? (_jsx(Div, { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white", children: img.badge })) : null] }), _jsx("button", { onClick: next, className: "flex-shrink-0 rounded-full bg-white/10 p-3 text-white transition-colors hover:bg-white/25 disabled:opacity-30", "aria-label": "Next image", disabled: count <= 1, children: _jsx("svg", { className: "h-5 w-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }) })] }), (img?.caption || img?.sub) && (_jsxs(Div, { className: "mt-3 text-center", children: [img.caption && (_jsx(Text, { className: "text-sm font-medium text-white", children: img.caption })), img.sub && (_jsx(Text, { className: "text-xs text-white/60", children: img.sub }))] })), count > 1 && (_jsx(Div, { className: "mt-4 flex max-w-full gap-2 overflow-x-auto pb-2", children: images.map((thumb, i) => (_jsx("button", { onClick: () => setCurrent(i), className: [
+                            "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all",
+                            i === current
+                                ? "scale-110 border-white"
+                                : "border-transparent opacity-50 hover:opacity-90",
+                        ].join(" "), "aria-label": `Go to image ${i + 1}`, children: thumb.src ? (
+                        /* eslint-disable-next-line @next/next/no-img-element */
+                        _jsx("img", { src: thumb.src, alt: thumb.alt, className: "h-full w-full object-cover" })) : (_jsx(Div, { className: "flex h-full w-full items-center justify-center bg-white/10 text-white/30 text-lg", children: "\uD83D\uDDBC\uFE0F" })) }, i))) }))] }) }));
+}
+export default CollageLightbox;

package/dist/ui/components/Dropdown.js

@@ -89,6 +89,12 @@ export function Dropdown({ trigger, items, align = "right", className = "", menu
             }
         }
     };
+    const handleMenuItemClick = (item, isDisabled) => {
+        if (isDisabled)
+            return;
+        item.onSelect?.();
+        setIsOpen(false);
+    };
     return (_jsx(DropdownContext.Provider, { value: { isOpen, setIsOpen, close: () => setIsOpen(false) }, children: _jsxs("div", { ref: containerRef, className: [UI_DROPDOWN.root, className].filter(Boolean).join(" "), onKeyDown: onKeyDown, onClick: () => {
                 if (trigger)
                     return;
@@ -111,12 +117,7 @@ export function Dropdown({ trigger, items, align = "right", className = "", menu
                                 item.destructive ? UI_DROPDOWN.itemDestructive : "",
                             ]
                                 .filter(Boolean)
-                                .join(" "), onClick: () => {
-                                if (isDisabled)
-                                    return;
-                                item.onSelect?.();
-                                setIsOpen(false);
-                            }, onMouseEnter: () => setActiveIndex(index), children: item.label }, item.id ?? `${String(item.label)}-${index}`));
+                                .join(" "), onClick: () => handleMenuItemClick(item, isDisabled), onMouseEnter: () => setActiveIndex(index), children: item.label }, item.id ?? `${String(item.label)}-${index}`));
                     }) })) : null] }) }));
 }
 export function DropdownTrigger({ className, children, }) {

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

@@ -3,6 +3,10 @@ export interface LightboxImage {
     src: string;
     alt?: string;
     caption?: string;
+    /** Secondary line below caption (e.g. price or estimated value). */
+    sub?: string;
+    /** Badge rendered top-left on the enlarged image (e.g. "#1"). */
+    badge?: string;
 }
 export interface ImageLightboxProps {
     images: LightboxImage[];
@@ -10,5 +14,7 @@ export interface ImageLightboxProps {
     activeIndex: number | null;
     onClose: () => void;
     onNavigate?: (index: number) => void;
+    /** Show clickable thumbnail strip below the main image. */
+    showThumbnails?: boolean;
 }
-export declare function ImageLightbox({ images, activeIndex, onClose, onNavigate, }: ImageLightboxProps): React.ReactPortal | null;
+export declare function ImageLightbox({ images, activeIndex, onClose, onNavigate, showThumbnails, }: ImageLightboxProps): React.ReactPortal | null;

package/dist/ui/components/ImageLightbox.js

@@ -8,7 +8,7 @@ import { Text, Span } from "./Typography";
 const MIN_ZOOM = 10;
 const MAX_ZOOM = 300;
 const ZOOM_STEP = 20;
-export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
+export function ImageLightbox({ images, activeIndex, onClose, onNavigate, showThumbnails = false, }) {
     const [currentIndex, setCurrentIndex] = useState(activeIndex ?? 0);
     const [zoom, setZoom] = useState(100);
     const [rotation, setRotation] = useState(0);
@@ -87,8 +87,18 @@ export function ImageLightbox({ images, activeIndex, onClose, onNavigate, }) {
     const image = images[currentIndex];
     const hasMultiple = images.length > 1;
     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);
+    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" }) })), _jsxs("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.badge && (_jsx("div", { className: "absolute left-3 top-3 rounded bg-black/70 px-2 py-1 text-xs font-semibold text-white pointer-events-none", children: image.badge }))] }), (image.caption || image.sub) && (_jsxs("div", { className: "flex-shrink-0 text-center px-8 pb-2", children: [image.caption && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/80", children: image.caption })), image.sub && (_jsx(Text, { size: "sm", variant: "secondary", className: "!text-white/50", children: image.sub }))] })), showThumbnails && images.length > 1 && (_jsx("div", { className: "flex-shrink-0 flex gap-2 overflow-x-auto px-4 pb-3 justify-center", children: images.map((thumb, i) => (_jsx("button", { type: "button", onClick: () => {
+                        setCurrentIndex(i);
+                        setZoom(100);
+                        setRotation(0);
+                        onNavigate?.(i);
+                    }, className: [
+                        "h-14 w-14 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all",
+                        i === currentIndex
+                            ? "scale-110 border-white"
+                            : "border-transparent opacity-50 hover:opacity-90",
+                    ].join(" "), "aria-label": `Go to image ${i + 1}`, children: _jsx("img", { src: thumb.src, alt: thumb.alt ?? `Image ${i + 1}`, className: "h-full w-full object-cover" }) }, i))) })), 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/PageLoader.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import React from "react";
 import { Spinner } from "./Spinner";
 import { Button } from "./Button";
+import { Text } from "./Typography";
 export function PageLoader({ children }) {
     const [timedOut, setTimedOut] = React.useState(false);
     React.useEffect(() => {
@@ -12,10 +13,10 @@ export function PageLoader({ children }) {
     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-4 p-8 text-center", children: [_jsx(Text, { 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" })] }));
+        return (_jsxs("div", { className: "flex min-h-[60vh] flex-col items-center justify-center gap-3", children: [_jsx(Spinner, { size: "lg" }), _jsx(Text, { 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" })] })) })] }));
+    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(Text, { 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(Text, { className: "text-sm text-neutral-500 dark:text-neutral-400", children: "Loading\u2026" })] })) })] }));
 }

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

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+import type { QuickFieldDef } from "../../features/shell/QuickFormDrawer";
+import type { DynamicSelectOption, AsyncPage } from "./DynamicSelect";
+export type { DynamicSelectOption, AsyncPage };
+export interface PaginatedMultiSelectProps {
+    value: string[];
+    onChange: (values: string[], options: DynamicSelectOption[]) => void;
+    loadOptions?: (query: string, page: number) => Promise<AsyncPage<DynamicSelectOption>>;
+    options?: DynamicSelectOption[];
+    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    maxChipsVisible?: number;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+    /** "+ Create new" support — same pattern as InlineCreateSelect */
+    createLabel?: string;
+    drawerTitle?: string;
+    renderCreateForm?: (props: {
+        onCreated: (option: DynamicSelectOption) => void;
+        onCancel: () => void;
+    }) => ReactNode;
+    createFields?: QuickFieldDef[];
+    onCreateSubmit?: (values: Record<string, unknown>) => Promise<DynamicSelectOption>;
+    createSubmitLabel?: string;
+}
+export declare function PaginatedMultiSelect({ value, onChange, loadOptions, options, placeholder, searchPlaceholder, noResultsText, maxChipsVisible, disabled, className, ariaLabel, createLabel, drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, }: PaginatedMultiSelectProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/PaginatedMultiSelect.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "./Input";
+import { SideDrawer } from "./SideDrawer";
+import { Button } from "./Button";
+import { QuickFormDrawer } from "../../features/shell/QuickFormDrawer";
+const C = {
+    root: "appkit-pms",
+    chips: "appkit-pms__chips",
+    chip: "appkit-pms__chip",
+    chipLabel: "appkit-pms__chip-label",
+    chipRemove: "appkit-pms__chip-remove",
+    overflowChip: "appkit-pms__overflow-chip",
+    trigger: "appkit-pms__trigger",
+    triggerDisabled: "appkit-pms__trigger--disabled",
+    placeholder: "appkit-pms__placeholder",
+    triggerLeft: "appkit-pms__trigger-left",
+    triggerCount: "appkit-pms__trigger-count",
+    dropdown: "appkit-pms__dropdown",
+    search: "appkit-pms__search",
+    list: "appkit-pms__list",
+    option: "appkit-pms__option",
+    optionSelected: "appkit-pms__option--selected",
+    checkbox: "appkit-pms__checkbox",
+    checkmark: "appkit-pms__checkmark",
+    optionLabel: "appkit-pms__option-label",
+    empty: "appkit-pms__empty",
+    loading: "appkit-pms__loading",
+    loadMore: "appkit-pms__load-more",
+    createBtn: "appkit-pms__create-btn",
+};
+const CREATE_SENTINEL = "__pms_create__";
+export function PaginatedMultiSelect({ value, onChange, loadOptions, options, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", maxChipsVisible = 3, disabled, className = "", ariaLabel, createLabel, drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, }) {
+    const [query, setQuery] = useState("");
+    const [open, setOpen] = useState(false);
+    const [asyncOptions, setAsyncOptions] = useState([]);
+    const [page, setPage] = useState(1);
+    const [hasMore, setHasMore] = useState(false);
+    const [loading, setLoading] = useState(false);
+    const [drawerOpen, setDrawerOpen] = useState(false);
+    const containerRef = useRef(null);
+    const hasCreate = Boolean(createLabel && (renderCreateForm ?? (createFields && onCreateSubmit)));
+    const resolvedOptions = options ?? asyncOptions;
+    const selectedOptions = resolvedOptions.filter((o) => value.includes(o.value));
+    // Build a label map from whatever is loaded so chips show labels even when not in current page
+    const labelMap = useRef(new Map());
+    selectedOptions.forEach((o) => labelMap.current.set(o.value, o.label));
+    const load = useCallback(async (search, nextPage, reset = false) => {
+        if (!loadOptions)
+            return;
+        setLoading(true);
+        try {
+            const response = await loadOptions(search, nextPage);
+            setAsyncOptions((prev) => {
+                const merged = reset ? response.items : [...prev, ...response.items];
+                merged.forEach((o) => labelMap.current.set(o.value, o.label));
+                return merged;
+            });
+            setPage(nextPage);
+            setHasMore(response.hasMore);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [loadOptions]);
+    useEffect(() => {
+        if (!open || !loadOptions)
+            return;
+        void load(query, 1, true);
+    }, [open, query, load, loadOptions]);
+    useEffect(() => {
+        const onClickOutside = (e) => {
+            if (!containerRef.current?.contains(e.target))
+                setOpen(false);
+        };
+        const onKeydown = (e) => {
+            if (e.key === "Escape")
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", onClickOutside);
+        document.addEventListener("keydown", onKeydown);
+        return () => {
+            document.removeEventListener("mousedown", onClickOutside);
+            document.removeEventListener("keydown", onKeydown);
+        };
+    }, []);
+    const filtered = options
+        ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+        : resolvedOptions;
+    function toggle(opt) {
+        if (opt.value === CREATE_SENTINEL) {
+            setOpen(false);
+            setDrawerOpen(true);
+            return;
+        }
+        const isSelected = value.includes(opt.value);
+        const nextValues = isSelected
+            ? value.filter((v) => v !== opt.value)
+            : [...value, opt.value];
+        const nextOptions = nextValues.map((v) => {
+            const found = resolvedOptions.find((o) => o.value === v);
+            return found ?? { value: v, label: labelMap.current.get(v) ?? v };
+        });
+        onChange(nextValues, nextOptions);
+    }
+    function removeChip(v) {
+        const nextValues = value.filter((x) => x !== v);
+        const nextOptions = nextValues.map((x) => {
+            const found = resolvedOptions.find((o) => o.value === x);
+            return found ?? { value: x, label: labelMap.current.get(x) ?? x };
+        });
+        onChange(nextValues, nextOptions);
+    }
+    function handleCreated(option) {
+        setDrawerOpen(false);
+        labelMap.current.set(option.value, option.label);
+        const nextValues = [...value, option.value];
+        const nextOptions = nextValues.map((v) => {
+            const found = resolvedOptions.find((o) => o.value === v);
+            return found ?? { value: v, label: labelMap.current.get(v) ?? v };
+        });
+        onChange(nextValues, nextOptions);
+    }
+    const visibleChips = value.slice(0, maxChipsVisible);
+    const overflowCount = value.length - maxChipsVisible;
+    const displayOptions = hasCreate
+        ? [...filtered, { value: CREATE_SENTINEL, label: `+ Create new ${createLabel}` }]
+        : filtered;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: containerRef, className: [C.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, children: [value.length > 0 && (_jsxs("div", { className: C.chips, children: [visibleChips.map((v) => (_jsxs("span", { className: C.chip, children: [_jsx("span", { className: C.chipLabel, children: labelMap.current.get(v) ?? v }), !disabled && (_jsx("button", { type: "button", "aria-label": "Remove", className: C.chipRemove, onClick: (e) => { e.stopPropagation(); removeChip(v); }, children: "\u2715" }))] }, v))), overflowCount > 0 && (_jsxs("span", { className: C.overflowChip, children: ["+", overflowCount, " more"] }))] })), _jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [C.trigger, disabled ? C.triggerDisabled : ""].filter(Boolean).join(" "), "aria-expanded": open, "aria-haspopup": "listbox", children: [_jsx("span", { className: C.triggerLeft, children: _jsx("span", { className: value.length === 0 ? C.placeholder : "", children: value.length === 0 ? placeholder : `${value.length} selected` }) }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open && (_jsxs("div", { className: C.dropdown, role: "listbox", "aria-multiselectable": "true", children: [_jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, className: C.search }), _jsxs("ul", { className: C.list, children: [displayOptions.map((opt, idx) => {
+                                        const isCreate = opt.value === CREATE_SENTINEL;
+                                        const isSelected = !isCreate && value.includes(opt.value);
+                                        if (isCreate) {
+                                            return (_jsx("li", { children: _jsx("button", { type: "button", className: C.createBtn, onClick: () => toggle(opt), children: opt.label }) }, "__create__"));
+                                        }
+                                        return (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": isSelected, className: [C.option, isSelected ? C.optionSelected : ""].filter(Boolean).join(" "), onClick: () => toggle(opt), children: [_jsx("span", { className: C.checkbox, "aria-hidden": "true", children: _jsx("span", { className: C.checkmark, children: "\u2713" }) }), _jsx("span", { className: C.optionLabel, children: opt.label })] }) }, `${opt.value}-${idx}`));
+                                    }), displayOptions.filter((o) => o.value !== CREATE_SENTINEL).length === 0 && !loading && (_jsx("li", { className: C.empty, children: noResultsText })), loading && _jsx("li", { className: C.loading, children: "Loading\u2026" }), hasMore && !loading && (_jsx("li", { children: _jsx("button", { type: "button", className: C.loadMore, onClick: () => void load(query, page + 1), children: "Load more" }) }))] })] }))] }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: () => setDrawerOpen(false), children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: () => setDrawerOpen(false) }) })) : createFields && onCreateSubmit ? (_jsx(QuickFormDrawer, { isOpen: drawerOpen, onClose: () => setDrawerOpen(false), title: drawerTitle ?? `Create ${createLabel}`, fields: createFields, submitLabel: createSubmitLabel ?? `Create ${createLabel}`, onSubmit: async (values) => {
+                    const option = await onCreateSubmit(values);
+                    handleCreated(option);
+                } })) : null] }));
+}