@mohasinac/appkit 2.7.58 → 2.8.0

package/dist/ui/components/PaginatedSelect.js

@@ -0,0 +1,201 @@
+"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-ps",
+    chips: "appkit-ps__chips",
+    chip: "appkit-ps__chip",
+    chipLabel: "appkit-ps__chip-label",
+    chipRemove: "appkit-ps__chip-remove",
+    overflowChip: "appkit-ps__overflow-chip",
+    trigger: "appkit-ps__trigger",
+    triggerDisabled: "appkit-ps__trigger--disabled",
+    placeholder: "appkit-ps__placeholder",
+    triggerLeft: "appkit-ps__trigger-left",
+    dropdown: "appkit-ps__dropdown",
+    search: "appkit-ps__search",
+    list: "appkit-ps__list",
+    option: "appkit-ps__option",
+    optionSelected: "appkit-ps__option--selected",
+    checkbox: "appkit-ps__checkbox",
+    checkmark: "appkit-ps__checkmark",
+    optionLabel: "appkit-ps__option-label",
+    empty: "appkit-ps__empty",
+    loading: "appkit-ps__loading",
+    loadMore: "appkit-ps__load-more",
+    createBtn: "appkit-ps__create-btn",
+};
+const CREATE_SENTINEL = "__paginated_select_create__";
+/**
+ * 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 function PaginatedSelect(props) {
+    const { options, loadOptions, placeholder = "Select...", searchPlaceholder = "Search...", noResultsText = "No results", disabled, className = "", ariaLabel, createLabel, drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, } = props;
+    const isMulti = props.multiple === true;
+    const maxChipsVisible = isMulti ? props.maxChipsVisible ?? 3 : 0;
+    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 labelMap = useRef(new Map());
+    const hasCreate = Boolean(createLabel && (renderCreateForm ?? (createFields && onCreateSubmit)));
+    const resolvedOptions = options ?? asyncOptions;
+    resolvedOptions.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 isSelected(value) {
+        if (isMulti)
+            return props.value.includes(value);
+        return props.value === value;
+    }
+    function handleSelect(opt) {
+        if (isMulti) {
+            const mp = props;
+            const selected = mp.value.includes(opt.value);
+            const nextValues = selected
+                ? mp.value.filter((v) => v !== opt.value)
+                : [...mp.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) ?? String(v) };
+            });
+            mp.onChange(nextValues, nextOptions);
+        }
+        else {
+            const sp = props;
+            sp.onChange?.(opt.value, opt);
+            setOpen(false);
+        }
+    }
+    function removeChip(v) {
+        if (!isMulti)
+            return;
+        const mp = props;
+        const nextValues = mp.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) ?? String(x) };
+        });
+        mp.onChange(nextValues, nextOptions);
+    }
+    function handleCreated(option) {
+        setDrawerOpen(false);
+        labelMap.current.set(option.value, option.label);
+        if (isMulti) {
+            const mp = props;
+            const nextValues = [...mp.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) ?? String(v) };
+            });
+            mp.onChange(nextValues, nextOptions);
+        }
+        else {
+            const sp = props;
+            sp.onChange?.(option.value, option);
+        }
+    }
+    const triggerLabel = (() => {
+        if (isMulti) {
+            const mp = props;
+            return mp.value.length === 0 ? placeholder : `${mp.value.length} selected`;
+        }
+        const sp = props;
+        if (sp.value == null)
+            return placeholder;
+        return (resolvedOptions.find((o) => o.value === sp.value)?.label ??
+            labelMap.current.get(sp.value) ??
+            String(sp.value));
+    })();
+    const triggerEmpty = isMulti
+        ? props.value.length === 0
+        : props.value == null;
+    const multiValue = isMulti ? props.value : [];
+    const visibleChips = multiValue.slice(0, maxChipsVisible);
+    const overflowCount = multiValue.length - maxChipsVisible;
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ref: containerRef, className: [C.root, className].filter(Boolean).join(" "), "aria-label": ariaLabel, children: [isMulti && multiValue.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) ?? String(v) }), !disabled && (_jsx("button", { type: "button", "aria-label": "Remove", className: C.chipRemove, onClick: (e) => {
+                                            e.stopPropagation();
+                                            removeChip(v);
+                                        }, children: "\u2715" }))] }, String(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: triggerEmpty ? C.placeholder : "", children: triggerLabel }) }), _jsx("span", { "aria-hidden": "true", children: "\u25BE" })] }), open && (_jsxs("div", { className: C.dropdown, role: "listbox", "aria-multiselectable": isMulti || undefined, children: [_jsx(Input, { autoFocus: true, value: query, onChange: (e) => setQuery(e.target.value), placeholder: searchPlaceholder, className: C.search }), _jsxs("ul", { className: C.list, children: [filtered.map((opt, idx) => {
+                                        const selected = isSelected(opt.value);
+                                        return (_jsx("li", { children: _jsxs("button", { type: "button", role: "option", "aria-selected": selected, className: [C.option, selected ? C.optionSelected : ""]
+                                                    .filter(Boolean)
+                                                    .join(" "), onClick: () => handleSelect(opt), children: [isMulti && (_jsx("span", { className: C.checkbox, "aria-hidden": "true", children: _jsx("span", { className: C.checkmark, children: "\u2713" }) })), _jsx("span", { className: C.optionLabel, children: opt.label })] }) }, `${String(opt.value)}-${idx}`));
+                                    }), filtered.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" }) })), hasCreate && (_jsx("li", { children: _jsxs("button", { type: "button", className: C.createBtn, onClick: () => {
+                                                setOpen(false);
+                                                setDrawerOpen(true);
+                                            }, children: ["+ Create new ", createLabel] }) }, CREATE_SENTINEL))] })] }))] }), hasCreate && 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),
+                }) })) : hasCreate && 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] }));
+}

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

@@ -0,0 +1,254 @@
+/* PaginatedSelect — single + multi searchable, async-paginated select with optional inline create. */
+
+.appkit-ps {
+  position: relative;
+}
+
+/* ── chips row (multi only) ── */
+.appkit-ps__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+  margin-bottom: 0.375rem;
+}
+
+.appkit-ps__chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  border-radius: 9999px;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  padding: 0.125rem 0.5rem 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--appkit-color-text);
+  line-height: 1.5;
+  max-width: 12rem;
+}
+
+.appkit-ps__chip-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.appkit-ps__chip-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 9999px;
+  font-size: 0.7rem;
+  color: var(--appkit-color-text-muted);
+  transition: color 0.15s, background-color 0.15s;
+}
+
+.appkit-ps__chip-remove:hover {
+  color: var(--appkit-color-text);
+  background-color: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-ps__chip-remove:hover {
+  color: var(--appkit-color-text);
+  background-color: var(--appkit-color-slate-700);
+}
+
+.appkit-ps__overflow-chip {
+  display: inline-flex;
+  align-items: center;
+  border-radius: 9999px;
+  border: 1px dashed var(--appkit-color-border);
+  padding: 0.125rem 0.625rem;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: var(--appkit-color-text-muted);
+}
+
+/* ── trigger ── */
+.appkit-ps__trigger {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-zinc-300);
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-zinc-800);
+  transition: border-color 0.15s;
+}
+
+.appkit-ps__trigger:hover:not(:disabled) {
+  border-color: var(--appkit-color-zinc-400);
+}
+
+.appkit-ps__trigger:focus-visible {
+  outline: 2px solid var(--appkit-color-focus-ring, var(--appkit-color-primary));
+  outline-offset: 2px;
+}
+
+:is(.dark) .appkit-ps__trigger {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  color: var(--appkit-color-slate-200);
+}
+
+.appkit-ps__trigger--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.appkit-ps__placeholder {
+  color: var(--appkit-color-text-faint);
+}
+
+.appkit-ps__trigger-left {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  overflow: hidden;
+}
+
+/* ── dropdown ── */
+.appkit-ps__dropdown {
+  position: absolute;
+  z-index: var(--appkit-z-dropdown);
+  margin-top: 0.25rem;
+  width: 100%;
+  min-width: 14rem;
+  overflow: hidden;
+  border-radius: 0.5rem;
+  border: 1px solid var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+  box-shadow: var(--appkit-shadow-lg);
+}
+
+:is(.dark) .appkit-ps__dropdown {
+  border-color: var(--appkit-color-border);
+  background: var(--appkit-color-surface);
+}
+
+.appkit-ps__search {
+  border-radius: 0;
+  border-left: 0;
+  border-right: 0;
+  border-top: 0;
+}
+
+/* ── option list ── */
+.appkit-ps__list {
+  max-height: 13rem;
+  overflow-y: auto;
+  padding: 0.25rem 0;
+}
+
+.appkit-ps__option {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.875rem;
+  text-align: left;
+  cursor: pointer;
+  transition: background-color 0.1s;
+}
+
+.appkit-ps__option:hover {
+  background-color: var(--appkit-color-zinc-100);
+}
+
+:is(.dark) .appkit-ps__option:hover {
+  background-color: var(--appkit-color-slate-800);
+}
+
+.appkit-ps__option--selected {
+  font-weight: 500;
+  background-color: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-ps__option--selected {
+  background-color: rgba(15, 23, 42, 0.6);
+}
+
+.appkit-ps__checkbox {
+  flex-shrink: 0;
+  width: 1rem;
+  height: 1rem;
+  border-radius: 0.25rem;
+  border: 1.5px solid var(--appkit-color-zinc-400);
+  background: var(--appkit-color-surface);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: border-color 0.15s, background-color 0.15s;
+}
+
+.appkit-ps__option--selected .appkit-ps__checkbox {
+  border-color: var(--appkit-color-primary);
+  background: var(--appkit-color-primary);
+}
+
+.appkit-ps__checkmark {
+  display: none;
+  font-size: 0.6rem;
+  color: var(--appkit-color-text-on-primary, #fff);
+  font-weight: 700;
+}
+
+.appkit-ps__option--selected .appkit-ps__checkmark {
+  display: block;
+}
+
+.appkit-ps__option-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  color: var(--appkit-color-text);
+}
+
+/* ── empty / loading / load-more / create ── */
+.appkit-ps__empty,
+.appkit-ps__loading {
+  padding: 0.5rem 0.75rem;
+  font-size: 0.75rem;
+  color: var(--appkit-color-text-muted);
+}
+
+.appkit-ps__load-more {
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  text-align: left;
+  font-size: 0.75rem;
+  color: var(--appkit-color-secondary-600);
+}
+
+.appkit-ps__load-more:hover {
+  text-decoration: underline;
+}
+
+.appkit-ps__create-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  width: 100%;
+  padding: 0.5rem 0.75rem;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--appkit-color-primary);
+  border-top: 1px solid var(--appkit-color-border-subtle);
+  transition: background-color 0.1s;
+}
+
+.appkit-ps__create-btn:hover {
+  background-color: var(--appkit-color-zinc-50);
+}
+
+:is(.dark) .appkit-ps__create-btn:hover {
+  background-color: var(--appkit-color-slate-800);
+}

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

@@ -145,10 +145,6 @@ export interface LiProps extends React.LiHTMLAttributes<HTMLLIElement> {
     children: React.ReactNode;
 }
 export declare function Li({ className, children, ...props }: LiProps): import("react/jsx-runtime").JSX.Element;
-export type HeaderProps = BlockHeaderProps;
-export declare const Header: typeof BlockHeader;
-export type FooterProps = BlockFooterProps;
-export declare const Footer: typeof BlockFooter;
 type TableVariant = "default" | "striped" | "bordered";
 type TableSize = "sm" | "md" | "lg";
 export interface TableProps extends Omit<React.TableHTMLAttributes<HTMLTableElement>, "border">, SurfaceProps {

package/dist/ui/components/Semantic.js

@@ -29,8 +29,6 @@ export function Ol({ className = "", children, ...props }) {
 export function Li({ className = "", children, ...props }) {
     return (_jsx("li", { className: className, ...props, children: children }));
 }
-export const Header = BlockHeader;
-export const Footer = BlockFooter;
 const TABLE_VARIANT_MAP = {
     default: "appkit-table--default",
     striped: "appkit-table--striped",

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

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+export interface SettingsSectionProps {
+    /** Section title rendered as an h3. */
+    title: ReactNode;
+    /** Optional supporting copy below the title. */
+    description?: ReactNode;
+    /** Action slot rendered top-right (e.g. a "Reset" button). */
+    action?: ReactNode;
+    /** Section body. */
+    children: ReactNode;
+    /** Additional classes appended to the outer wrapper. */
+    className?: string;
+}
+/**
+ * `SettingsSection` — a bordered card with a heading and optional description,
+ * used by admin/seller/user settings pages to group related controls.
+ *
+ * W1-31: extracted from inline `<div className="space-y-* rounded-lg border …">`
+ * blocks scattered across `AdminSiteSettingsView`, `SellerStoreSettingsView`,
+ * `UserSettingsView`, etc.
+ */
+export declare function SettingsSection({ title, description, action, children, className, }: SettingsSectionProps): import("react/jsx-runtime").JSX.Element;
+export interface ToggleRowProps {
+    /** Row label (rendered next to the toggle). */
+    label: ReactNode;
+    /** Optional secondary description below the label. */
+    description?: ReactNode;
+    /** Controlled checked state. */
+    checked: boolean;
+    /** Change handler. */
+    onChange: (next: boolean) => void;
+    /** Disabled state. */
+    disabled?: boolean;
+    /** Toggle size — defaults to `md`. */
+    size?: "sm" | "md" | "lg";
+    /** Additional classes appended to the outer wrapper. */
+    className?: string;
+}
+/**
+ * `ToggleRow` — a labelled toggle with optional description, used wherever a
+ * settings page needs a boolean control with explanatory copy. Pair with
+ * `SettingsSection` to group related rows.
+ *
+ * W1-31: replaces the inline `<Toggle label="…" />` + helper-text patterns
+ * across admin/seller/user settings views.
+ */
+export declare function ToggleRow({ label, description, checked, onChange, disabled, size, className, }: ToggleRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SettingsSection.js

@@ -0,0 +1,38 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Heading, Text } from "./Typography";
+import { Toggle } from "./Toggle";
+/**
+ * `SettingsSection` — a bordered card with a heading and optional description,
+ * used by admin/seller/user settings pages to group related controls.
+ *
+ * W1-31: extracted from inline `<div className="space-y-* rounded-lg border …">`
+ * blocks scattered across `AdminSiteSettingsView`, `SellerStoreSettingsView`,
+ * `UserSettingsView`, etc.
+ */
+export function SettingsSection({ title, description, action, children, className, }) {
+    return (_jsxs("section", { className: [
+            "appkit-settings-section",
+            "space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsxs("header", { className: "flex items-start justify-between gap-3", children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Heading, { level: 3, className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: title }), description ? (_jsx(Text, { className: "mt-1 text-sm text-zinc-600 dark:text-zinc-400", children: description })) : null] }), action ? _jsx("div", { className: "flex-shrink-0", children: action }) : null] }), _jsx("div", { className: "space-y-3", children: children })] }));
+}
+/**
+ * `ToggleRow` — a labelled toggle with optional description, used wherever a
+ * settings page needs a boolean control with explanatory copy. Pair with
+ * `SettingsSection` to group related rows.
+ *
+ * W1-31: replaces the inline `<Toggle label="…" />` + helper-text patterns
+ * across admin/seller/user settings views.
+ */
+export function ToggleRow({ label, description, checked, onChange, disabled = false, size = "md", className, }) {
+    return (_jsxs("div", { className: [
+            "appkit-toggle-row",
+            "flex items-start justify-between gap-3 py-1",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), description ? (_jsx(Text, { className: "mt-0.5 text-xs text-zinc-500 dark:text-zinc-400", children: description })) : null] }), _jsx("div", { className: "flex-shrink-0 pt-0.5", children: _jsx(Toggle, { checked: checked, onChange: onChange, disabled: disabled, size: size }) })] }));
+}

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

@@ -23,7 +23,6 @@
 @import "./ItemRow.style.css";
 @import "./Tooltip.style.css";
 @import "./TabStrip.style.css";
-@import "./SectionTabs.style.css";
 @import "./Layout.style.css";
 @import "./SortDropdown.style.css";
 @import "./TablePagination.style.css";
@@ -54,12 +53,10 @@
 @import "./Tabs.style.css";
 @import "./Radio.style.css";
 @import "./Dropdown.style.css";
-@import "./DashboardStatsCard.style.css";
 @import "./AvatarDisplay.style.css";
 @import "./BaseListingCard.style.css";
 @import "./ConfirmDeleteModal.style.css";
-@import "./DynamicSelect.style.css";
-@import "./PaginatedMultiSelect.style.css";
+@import "./PaginatedSelect.style.css";
 @import "./SideDrawer.style.css";
 @import "./FormActionBar.style.css";
 @import "./BackgroundRenderer.style.css";

package/dist/ui/index.d.ts

@@ -10,8 +10,8 @@ export type { FieldCheckboxProps } from "./forms";
 export { FieldCheckbox } from "./forms";
 export { buildColumns, createColumnBuilder, renderBoolean, renderCurrency, renderCurrencyCompact, renderCount, renderNullable, renderRating, } from "./columns";
 export type { BooleanRenderOpts, RatingMode, RatingRenderOpts, } from "./columns";
-export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, HeaderProps, FooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
-export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Header, Footer, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
+export type { SectionProps, ArticleProps, MainProps, AsideProps, NavProps, BlockHeaderProps, BlockFooterProps, UlProps, OlProps, LiProps, TableProps, TheadProps, TbodyProps, TrProps, ThProps, TdProps, CodeProps, PreProps, BlockquoteProps, FigureProps, FigcaptionProps, DlProps, DtProps, DdProps, } from "./components/Semantic";
+export { Section, Article, Main, Aside, Nav, BlockHeader, BlockFooter, Ul, Ol, Li, Table, Thead, Tbody, Tr, Th, Td, Code, Pre, Blockquote, Figure, Figcaption, Dl, Dt, Dd, } from "./components/Semantic";
 export type { DivProps } from "./components/Div";
 export { Div } from "./components/Div";
 export type { ColorVariant } from "./components/Typography";
@@ -111,12 +111,18 @@ export type { ItemRowProps } from "./components/ItemRow";
 export { ItemRow } from "./components/ItemRow";
 export type { HorizontalScrollerProps, PerViewConfig, } from "./components/HorizontalScroller";
 export { HorizontalScroller } from "./components/HorizontalScroller";
-export type { SectionTabsProps, SectionTab } from "./components/SectionTabs";
-export { SectionTabs } from "./components/SectionTabs";
 export type { TabStripProps, TabStripTab } from "./components/TabStrip";
 export { TabStrip } from "./components/TabStrip";
 export type { FormGridProps, FormFieldProps } from "./components/FormGrid";
 export { FormGrid, FormField as FormGridField } from "./components/FormGrid";
+export type { SettingsSectionProps, ToggleRowProps } from "./components/SettingsSection";
+export { SettingsSection, ToggleRow } from "./components/SettingsSection";
+export type { DetailPageHeroProps } from "./components/DetailPageHero";
+export { DetailPageHero } from "./components/DetailPageHero";
+export type { DetailPageGalleryProps, DetailPageGalleryImage } from "./components/DetailPageGallery";
+export { DetailPageGallery } from "./components/DetailPageGallery";
+export type { DetailPageTabsProps, DetailPageTab } from "./components/DetailPageTabs";
+export { DetailPageTabs } from "./components/DetailPageTabs";
 export type { FormFieldProps as SmartFormFieldProps } from "./components/FormField";
 export { FormField } from "./components/FormField";
 export type { DescriptionFieldProps } from "./components/DescriptionField";
@@ -131,12 +137,8 @@ export type { DropdownProps, DropdownMenuItem } from "./components/Dropdown";
 export { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSeparator, } from "./components/Dropdown";
 export type { MenuProps } from "./components/Menu";
 export { Menu, MenuTrigger, MenuContent, MenuItem, MenuSeparator, } from "./components/Menu";
-export type { DynamicSelectProps, DynamicSelectOption, AsyncPage, } from "./components/DynamicSelect";
-export { DynamicSelect } from "./components/DynamicSelect";
-export type { InlineCreateSelectProps } from "./components/InlineCreateSelect";
-export { InlineCreateSelect } from "./components/InlineCreateSelect";
-export type { PaginatedMultiSelectProps } from "./components/PaginatedMultiSelect";
-export { PaginatedMultiSelect } from "./components/PaginatedMultiSelect";
+export type { PaginatedSelectProps, PaginatedSelectOption, AsyncPage, } from "./components/PaginatedSelect";
+export { PaginatedSelect } from "./components/PaginatedSelect";
 export type { RoleBadgeProps } from "./components/RoleBadge";
 export { RoleBadge } from "./components/RoleBadge";
 export type { SkipToMainProps } from "./components/SkipToMain";
@@ -153,12 +155,12 @@ export type { PasswordStrengthIndicatorProps } from "./components/PasswordStreng
 export { PasswordStrengthIndicator } from "./components/PasswordStrengthIndicator";
 export type { AvatarDisplayProps } from "./components/AvatarDisplay";
 export { AvatarDisplay } from "./components/AvatarDisplay";
-export type { DashboardStatsCardProps } from "./components/DashboardStatsCard";
-export { DashboardStatsCard } from "./components/DashboardStatsCard";
 export type { ActiveFilter, ActiveFilterChipsProps, } from "./components/ActiveFilterChips";
 export { ActiveFilterChips } from "./components/ActiveFilterChips";
 export type { SortOption, SortDropdownProps } from "./components/SortDropdown";
 export { SortDropdown } from "./components/SortDropdown";
+export type { ListingFilterDrawerProps } from "./components/ListingFilterDrawer";
+export { ListingFilterDrawer } from "./components/ListingFilterDrawer";
 export type { ListingToolbarProps, ListingToolbarSortOption, ListingToolbarLabels, ListingToolbarToggle } from "./components/ListingToolbar";
 export { ListingToolbar } from "./components/ListingToolbar";
 export type { TablePaginationProps, TablePaginationLabels, } from "./components/TablePagination";
@@ -182,8 +184,6 @@ export type { RichTextEditorProps } from "./components/RichTextEditor";
 export { RichTextEditor } from "./components/RichTextEditor";
 export type { ListingLayoutProps, ListingLayoutLabels, } from "./components/ListingLayout";
 export { ListingLayout } from "./components/ListingLayout";
-export type { ListingViewShellProps } from "./components/ListingViewShell";
-export { ListingViewShell } from "./components/ListingViewShell";
 export type { SlottedListingViewProps, SlottedListingViewLabels, } from "./components/SlottedListingView";
 export { SlottedListingView } from "./components/SlottedListingView";
 export type { DetailViewShellProps, DetailViewLayout, } from "./components/DetailViewShell";