@mohasinac/appkit 2.3.0 → 2.3.2

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

@@ -0,0 +1,20 @@
+import React from "react";
+/**
+ * Drawer — slide-in panel from left, right, or bottom.
+ *
+ * Standalone @mohasinac/ui primitive. No app-specific imports.
+ * Bottom variant gets `rounded-t-2xl` and can be swipe-dismissed via drag handle.
+ */
+export interface DrawerProps {
+    isOpen: boolean;
+    onClose: () => void;
+    title?: string;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    side?: "left" | "right" | "bottom";
+    /** Width for left/right drawers. Default: 'md' */
+    size?: "sm" | "md" | "lg" | "full";
+    showCloseButton?: boolean;
+    className?: string;
+}
+export declare function Drawer({ isOpen, onClose, title, children, footer, side, size, showCloseButton, className, }: DrawerProps): React.ReactPortal | null;

package/dist/ui/components/Drawer.js

@@ -0,0 +1,71 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { Heading } from "./Typography";
+import { Button } from "./Button";
+const SIDE_TRANSLATE = {
+    left: {
+        closed: "appkit-drawer__panel--left-closed",
+        open: "appkit-drawer__panel--left-open",
+        base: "appkit-drawer__panel--left",
+    },
+    right: {
+        closed: "appkit-drawer__panel--right-closed",
+        open: "appkit-drawer__panel--right-open",
+        base: "appkit-drawer__panel--right",
+    },
+    bottom: {
+        closed: "appkit-drawer__panel--bottom-closed",
+        open: "appkit-drawer__panel--bottom-open",
+        base: "appkit-drawer__panel--bottom",
+    },
+};
+const SIDE_SIZE = {
+    sm: "appkit-drawer__panel--sm",
+    md: "appkit-drawer__panel--md",
+    lg: "appkit-drawer__panel--lg",
+    full: "appkit-drawer__panel--full",
+};
+export function Drawer({ isOpen, onClose, title, children, footer, side = "right", size = "md", showCloseButton = true, className = "", }) {
+    const panelRef = useRef(null);
+    const prevFocusRef = useRef(null);
+    // Body scroll lock
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const prev = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = prev;
+        };
+    }, [isOpen]);
+    // Focus management
+    useEffect(() => {
+        if (isOpen) {
+            prevFocusRef.current = document.activeElement;
+            requestAnimationFrame(() => panelRef.current?.focus());
+        }
+        else {
+            prevFocusRef.current?.focus();
+        }
+    }, [isOpen]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === "Escape")
+            onClose();
+    }, [onClose]);
+    const { closed, open, base } = SIDE_TRANSLATE[side];
+    const isBottom = side === "bottom";
+    if (typeof document === "undefined")
+        return null;
+    return createPortal(_jsxs("div", { className: `appkit-drawer ${isOpen ? "appkit-drawer--open" : "appkit-drawer--closed"}`, onKeyDown: handleKeyDown, "data-section": "drawer-div-480", children: [_jsx("div", { className: `appkit-drawer__backdrop ${isOpen ? "appkit-drawer__backdrop--open" : "appkit-drawer__backdrop--closed"}`, "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, role: "dialog", "aria-modal": "true", className: [
+                    "appkit-drawer__panel",
+                    base,
+                    isBottom
+                        ? "appkit-drawer__panel--bottom-shell"
+                        : `${SIDE_SIZE[size]} appkit-drawer__panel--full-height`,
+                    isOpen ? open : closed,
+                    className,
+                ].join(" "), "data-section": "drawer-div-481", children: [isBottom && (_jsx("div", { className: "appkit-drawer__drag-wrap", "data-section": "drawer-div-482", children: _jsx("div", { className: "appkit-drawer__drag", "aria-hidden": "true" }) })), (title || showCloseButton) && (_jsxs("div", { className: "appkit-drawer__header", "data-section": "drawer-div-483", children: [title && (_jsx(Heading, { level: 2, className: "appkit-drawer__title", children: title })), showCloseButton && (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-drawer__close", "aria-label": "Close", children: _jsx(X, { className: "appkit-drawer__close-icon" }) }))] })), _jsx("div", { className: "appkit-drawer__body", "data-section": "drawer-div-484", children: children }), footer && _jsx("div", { className: "appkit-drawer__footer", "data-section": "drawer-div-485", children: footer })] })] }), document.body);
+}

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

@@ -0,0 +1,146 @@
+.appkit-drawer {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+
+.appkit-drawer--open {
+  pointer-events: auto;
+}
+
+.appkit-drawer--closed {
+  pointer-events: none;
+}
+
+.appkit-drawer__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.3s ease;
+}
+
+.appkit-drawer__backdrop--open {
+  opacity: 1;
+}
+
+.appkit-drawer__backdrop--closed {
+  opacity: 0;
+}
+
+.appkit-drawer__panel {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  background: #ffffff;
+  border: 1px solid #e4e4e7;
+  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
+  transition: transform 0.3s ease;
+}
+
+.dark .appkit-drawer__panel {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.appkit-drawer__panel--left { left: 0; top: 0; bottom: 0; }
+.appkit-drawer__panel--right { right: 0; top: 0; bottom: 0; }
+.appkit-drawer__panel--bottom { left: 0; right: 0; bottom: 0; }
+
+.appkit-drawer__panel--left-open,
+.appkit-drawer__panel--right-open,
+.appkit-drawer__panel--bottom-open {
+  transform: translate(0, 0);
+}
+
+.appkit-drawer__panel--left-closed { transform: translateX(-100%); }
+.appkit-drawer__panel--right-closed { transform: translateX(100%); }
+.appkit-drawer__panel--bottom-closed { transform: translateY(100%); }
+
+.appkit-drawer__panel--sm { width: 18rem; }
+.appkit-drawer__panel--md { width: 20rem; }
+.appkit-drawer__panel--lg { width: 100%; max-width: 30rem; }
+.appkit-drawer__panel--full { width: 100%; }
+.appkit-drawer__panel--full-height { height: 100%; }
+.appkit-drawer__panel--bottom-shell { border-radius: 1rem 1rem 0 0; max-height: 90vh; }
+
+@media (min-width: 640px) {
+  .appkit-drawer__panel--md { width: 24rem; }
+}
+
+.appkit-drawer__drag-wrap {
+  display: flex;
+  justify-content: center;
+  padding: 0.75rem 0 0.25rem;
+  flex-shrink: 0;
+}
+
+.appkit-drawer__drag {
+  width: 2.5rem;
+  height: 0.25rem;
+  border-radius: 9999px;
+  background: #d4d4d8;
+}
+
+.dark .appkit-drawer__drag {
+  background: #475569;
+}
+
+.appkit-drawer__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid #f4f4f5;
+  flex-shrink: 0;
+}
+
+.dark .appkit-drawer__header {
+  border-bottom-color: #1e293b;
+}
+
+.appkit-drawer__title {
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+.appkit-drawer__close {
+  margin-left: auto;
+  min-height: 0;
+  padding: 0.375rem;
+  border-radius: 0.5rem;
+  color: #a1a1aa;
+}
+
+.appkit-drawer__close:hover {
+  color: #3f3f46;
+}
+
+.dark .appkit-drawer__close {
+  color: #71717a;
+}
+
+.dark .appkit-drawer__close:hover {
+  color: #cbd5e1;
+}
+
+.appkit-drawer__close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.appkit-drawer__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem 1.25rem;
+}
+
+.appkit-drawer__footer {
+  flex-shrink: 0;
+  border-top: 1px solid #f4f4f5;
+  padding: 1rem 1.25rem;
+}
+
+.dark .appkit-drawer__footer {
+  border-top-color: #1e293b;
+}

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

@@ -0,0 +1,35 @@
+import React from "react";
+export interface DropdownMenuItem {
+    id?: string;
+    label: React.ReactNode;
+    onSelect?: () => void;
+    disabled?: boolean;
+    destructive?: boolean;
+}
+export interface DropdownProps {
+    trigger?: React.ReactNode;
+    items?: DropdownMenuItem[];
+    align?: "left" | "right";
+    className?: string;
+    menuClassName?: string;
+    children?: React.ReactNode;
+}
+export declare function Dropdown({ trigger, items, align, className, menuClassName, children, }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownTrigger({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownMenu({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function DropdownItem({ children, onClick, disabled, className, }: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function DropdownSeparator({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default Dropdown;

package/dist/ui/components/Dropdown.js

@@ -0,0 +1,141 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useEffect, useMemo, useRef, useState, } from "react";
+const UI_DROPDOWN = {
+    root: "appkit-dropdown",
+    menu: "appkit-dropdown__menu",
+    menuLeft: "appkit-dropdown__menu--left",
+    menuRight: "appkit-dropdown__menu--right",
+    item: "appkit-dropdown__item",
+    itemActive: "appkit-dropdown__item--active",
+    itemDestructive: "appkit-dropdown__item--destructive",
+    composedMenu: "appkit-dropdown__composed-menu",
+    composedItem: "appkit-dropdown__composed-item",
+    separator: "appkit-dropdown__separator",
+    trigger: "appkit-dropdown__trigger",
+};
+const DropdownContext = createContext({
+    isOpen: false,
+    setIsOpen: () => { },
+    close: () => { },
+});
+export function Dropdown({ trigger, items, align = "right", className = "", menuClassName = "", children, }) {
+    const [isOpen, setIsOpen] = useState(false);
+    const [activeIndex, setActiveIndex] = useState(0);
+    const containerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const itemCount = items?.length ?? 0;
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutsideClick = (event) => {
+            if (!containerRef.current?.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", handleOutsideClick);
+        return () => document.removeEventListener("mousedown", handleOutsideClick);
+    }, [isOpen]);
+    const menuItems = useMemo(() => items ?? [], [items]);
+    const onKeyDown = (event) => {
+        if (!isOpen) {
+            if (event.key === "ArrowDown" ||
+                event.key === "Enter" ||
+                event.key === " ") {
+                event.preventDefault();
+                setIsOpen(true);
+            }
+            return;
+        }
+        if (!itemCount) {
+            if (event.key === "Escape") {
+                setIsOpen(false);
+                buttonRef.current?.focus();
+            }
+            return;
+        }
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setActiveIndex((prev) => (prev + 1) % itemCount);
+            return;
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setActiveIndex((prev) => (prev - 1 + itemCount) % itemCount);
+            return;
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setActiveIndex(0);
+            return;
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setActiveIndex(itemCount - 1);
+            return;
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            setIsOpen(false);
+            buttonRef.current?.focus();
+            return;
+        }
+        if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            const activeItem = menuItems[activeIndex];
+            if (activeItem && !activeItem.disabled) {
+                activeItem.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;
+                setIsOpen((prev) => !prev);
+            }, children: [trigger ? (_jsx("button", { ref: buttonRef, type: "button", "aria-haspopup": "menu", "aria-expanded": isOpen, onClick: () => {
+                        setIsOpen((prev) => !prev);
+                        setActiveIndex(0);
+                    }, children: trigger })) : null, children, isOpen && menuItems.length > 0 ? (_jsx("div", { role: "menu", className: [
+                        UI_DROPDOWN.menu,
+                        align === "left" ? UI_DROPDOWN.menuLeft : UI_DROPDOWN.menuRight,
+                        menuClassName,
+                    ]
+                        .filter(Boolean)
+                        .join(" "), onClick: (event) => event.stopPropagation(), children: menuItems.map((item, index) => {
+                        const isActive = index === activeIndex;
+                        const isDisabled = Boolean(item.disabled);
+                        return (_jsx("button", { role: "menuitem", type: "button", disabled: isDisabled, className: [
+                                UI_DROPDOWN.item,
+                                isActive ? UI_DROPDOWN.itemActive : "",
+                                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}`));
+                    }) })) : null] }) }));
+}
+export function DropdownTrigger({ className, children, }) {
+    return (_jsx("div", { className: [UI_DROPDOWN.trigger, className ?? ""].join(" "), "data-section": "dropdown-div-488", children: children }));
+}
+export function DropdownMenu({ className, children, }) {
+    const { isOpen } = useContext(DropdownContext);
+    if (!isOpen)
+        return null;
+    return (_jsx("div", { role: "menu", className: [UI_DROPDOWN.composedMenu, className ?? ""].join(" "), onClick: (event) => event.stopPropagation(), children: children }));
+}
+export function DropdownItem({ children, onClick, disabled, className, }) {
+    const { close } = useContext(DropdownContext);
+    return (_jsx("button", { type: "button", disabled: disabled, className: [UI_DROPDOWN.composedItem, className ?? ""].join(" "), onClick: () => {
+            onClick?.();
+            close();
+        }, children: children }));
+}
+export function DropdownSeparator({ className }) {
+    return _jsx("div", { className: [UI_DROPDOWN.separator, className ?? ""].join(" ") });
+}
+export default Dropdown;

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

@@ -0,0 +1,112 @@
+/* Dropdown — trigger + floating menu with items */
+
+.appkit-dropdown {
+  position: relative;
+  display: inline-block;
+}
+
+.appkit-dropdown__menu {
+  position: absolute;
+  z-index: 50;
+  margin-top: 0.5rem;
+  min-width: 180px;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #fff;
+  padding: 0.25rem;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+.appkit-dropdown__menu--left { left: 0; }
+.appkit-dropdown__menu--right { right: 0; }
+
+.appkit-dropdown__item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #3f3f46;
+  transition: background-color 0.15s;
+}
+.appkit-dropdown__item--active {
+  background: #f4f4f5;
+}
+.appkit-dropdown__item--destructive {
+  color: #dc2626;
+}
+.appkit-dropdown__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+/* Composable sub-components (DropdownMenu, DropdownItem) */
+.appkit-dropdown__composed-menu {
+  position: absolute;
+  right: 0;
+  z-index: 50;
+  margin-top: 0.25rem;
+  min-width: 160px;
+  border-radius: 0.5rem;
+  border: 1px solid #e4e4e7;
+  background: #fff;
+  padding: 0.25rem 0;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+.appkit-dropdown__composed-item {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  border-radius: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.875rem;
+  color: #3f3f46;
+}
+.appkit-dropdown__composed-item:hover {
+  background: #f4f4f5;
+}
+.appkit-dropdown__composed-item:disabled {
+  opacity: 0.5;
+}
+
+.appkit-dropdown__separator {
+  margin: 0.25rem 0;
+  border-top: 1px solid #e4e4e7;
+}
+
+.appkit-dropdown__trigger {
+  cursor: pointer;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  .appkit-dropdown__menu {
+    border-color: #334155;
+    background: #0f172a;
+  }
+  .appkit-dropdown__item {
+    color: #e2e8f0;
+  }
+  .appkit-dropdown__item--active {
+    background: #1e293b;
+  }
+  .appkit-dropdown__item--destructive {
+    color: #f87171;
+  }
+  .appkit-dropdown__composed-menu {
+    border-color: #334155;
+    background: #0f172a;
+  }
+  .appkit-dropdown__composed-item {
+    color: #e2e8f0;
+  }
+  .appkit-dropdown__composed-item:hover {
+    background: #1e293b;
+  }
+  .appkit-dropdown__separator {
+    border-color: #334155;
+  }
+}

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

@@ -0,0 +1,23 @@
+export interface DynamicSelectOption<V = string> {
+    value: V;
+    label: string;
+    meta?: Record<string, unknown>;
+}
+export interface AsyncPage<T> {
+    items: T[];
+    hasMore: boolean;
+    nextPage?: number;
+}
+export interface DynamicSelectProps<V = string> {
+    value?: V | null;
+    onChange?: (value: V | null, option: DynamicSelectOption<V> | null) => void;
+    options?: DynamicSelectOption<V>[];
+    loadOptions?: (query: string, page: number) => Promise<AsyncPage<DynamicSelectOption<V>>>;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    noResultsText?: string;
+    disabled?: boolean;
+    className?: string;
+    ariaLabel?: string;
+}
+export declare function DynamicSelect<V = string>({ value, onChange, options, loadOptions, placeholder, searchPlaceholder, noResultsText, disabled, className, ariaLabel, }: DynamicSelectProps<V>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/DynamicSelect.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Input } from "./Input";
+const UI_DYNAMIC_SELECT = {
+    root: "appkit-dynamic-select",
+    trigger: "appkit-dynamic-select__trigger",
+    triggerDisabled: "appkit-dynamic-select__trigger--disabled",
+    placeholder: "appkit-dynamic-select__placeholder",
+    dropdown: "appkit-dynamic-select__dropdown",
+    search: "appkit-dynamic-select__search",
+    list: "appkit-dynamic-select__list",
+    option: "appkit-dynamic-select__option",
+    optionSelected: "appkit-dynamic-select__option--selected",
+    empty: "appkit-dynamic-select__empty",
+    loading: "appkit-dynamic-select__loading",
+    loadMore: "appkit-dynamic-select__load-more",
+};
+export function DynamicSelect({ value, onChange, options, loadOptions, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", disabled, className = "", ariaLabel, }) {
+    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 containerRef = useRef(null);
+    const resolvedOptions = options ?? asyncOptions;
+    const load = useCallback(async (search, nextPage, reset = false) => {
+        if (!loadOptions)
+            return;
+        setLoading(true);
+        try {
+            const response = await loadOptions(search, nextPage);
+            setAsyncOptions((prev) => reset ? response.items : [...prev, ...response.items]);
+            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 = (event) => {
+            if (!containerRef.current?.contains(event.target)) {
+                setOpen(false);
+            }
+        };
+        document.addEventListener("mousedown", onClickOutside);
+        return () => document.removeEventListener("mousedown", onClickOutside);
+    }, []);
+    const filtered = options
+        ? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
+        : resolvedOptions;
+    const selectedLabel = resolvedOptions.find((option) => option.value === value)?.label ??
+        (value == null ? "" : String(value));
+    return (_jsxs("div", { ref: containerRef, className: [UI_DYNAMIC_SELECT.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, "data-section": "dynamicselect-div-490", children: [_jsxs("button", { type: "button", disabled: disabled, onClick: () => setOpen((prev) => !prev), className: [
+                    UI_DYNAMIC_SELECT.trigger,
+                    disabled ? UI_DYNAMIC_SELECT.triggerDisabled : "",
+                ]
+                    .filter(Boolean)
+                    .join(" "), children: [_jsx("span", { className: value == null ? UI_DYNAMIC_SELECT.placeholder : "", children: selectedLabel || placeholder }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open ? (_jsxs("div", { className: UI_DYNAMIC_SELECT.dropdown, "data-section": "dynamicselect-div-491", children: [_jsx(Input, { autoFocus: true, value: query, onChange: (event) => setQuery(event.target.value), placeholder: searchPlaceholder, className: UI_DYNAMIC_SELECT.search }), _jsxs("ul", { className: UI_DYNAMIC_SELECT.list, children: [filtered.map((option, index) => (_jsx("li", { children: _jsx("button", { type: "button", onClick: () => {
+                                        onChange?.(option.value, option);
+                                        setOpen(false);
+                                    }, className: [
+                                        UI_DYNAMIC_SELECT.option,
+                                        option.value === value
+                                            ? UI_DYNAMIC_SELECT.optionSelected
+                                            : "",
+                                    ]
+                                        .filter(Boolean)
+                                        .join(" "), children: option.label }) }, `${String(option.value)}-${index}`))), filtered.length === 0 && !loading ? (_jsx("li", { className: UI_DYNAMIC_SELECT.empty, children: noResultsText })) : null, loading ? (_jsx("li", { className: UI_DYNAMIC_SELECT.loading, children: "Loading..." })) : null, hasMore && !loading ? (_jsx("li", { children: _jsx("button", { type: "button", className: UI_DYNAMIC_SELECT.loadMore, onClick: () => void load(query, page + 1), children: "Load more" }) })) : null] })] })) : null] }));
+}