@mohasinac/appkit 3.8.2 → 3.9.0

package/dist/ui/components/InlineCreateSelect.js

@@ -1,75 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { DynamicSelect } from "./DynamicSelect";
-import { SideDrawer } from "./SideDrawer";
-import { Button } from "./Button";
-import { QuickFormDrawer } from "../../features/shell/QuickFormDrawer";
-/**
- * InlineCreateSelect — extends DynamicSelect with a "+ Create new" button
- * that opens a SideDrawer containing an inline create form.
- *
- * @example
- * ```tsx
- * <InlineCreateSelect
- *   value={categoryId}
- *   onChange={(v) => setCategoryId(v)}
- *   loadOptions={loadCategoryOptions}
- *   createLabel="Category"
- *   renderCreateForm={({ onCreated, onCancel }) => (
- *     <CategoryForm
- *       onSuccess={(cat) => onCreated({ value: cat.id, label: cat.name })}
- *       onCancel={onCancel}
- *     />
- *   )}
- * />
- * ```
- */
-export function InlineCreateSelect({ createLabel = "item", drawerTitle, renderCreateForm, createFields, onCreateSubmit, createSubmitLabel, onChange, options, loadOptions, ...selectProps }) {
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const hasCreate = Boolean(renderCreateForm ?? (createFields && onCreateSubmit));
-    function handleCreated(option) {
-        setDrawerOpen(false);
-        onChange?.(option.value, option);
-    }
-    function handleCancel() {
-        setDrawerOpen(false);
-    }
-    // Inject a synthetic "+ Create new" sentinel option at the end of the static list.
-    // For async (loadOptions) mode we append the action after the list via a wrapper.
-    const CREATE_SENTINEL = "__inline_create__";
-    const augmentedOptions = hasCreate
-        ? [
-            ...(options ?? []),
-            {
-                value: CREATE_SENTINEL,
-                label: `+ Create new ${createLabel}`,
-            },
-        ]
-        : options;
-    // For async mode, wrap loadOptions to append the sentinel after each page.
-    const augmentedLoadOptions = hasCreate && loadOptions
-        ? async (query, page) => {
-            const result = await loadOptions(query, page);
-            const sentinel = {
-                value: CREATE_SENTINEL,
-                label: `+ Create new ${createLabel}`,
-            };
-            return {
-                ...result,
-                items: [...result.items, sentinel],
-            };
-        }
-        : loadOptions;
-    function handleChange(value, option) {
-        if (value === CREATE_SENTINEL) {
-            setDrawerOpen(true);
-            return;
-        }
-        onChange?.(value, option);
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(DynamicSelect, { ...selectProps, options: augmentedOptions, loadOptions: augmentedLoadOptions, onChange: handleChange }), renderCreateForm ? (_jsx(SideDrawer, { isOpen: drawerOpen, onClose: handleCancel, title: drawerTitle ?? `Create ${createLabel}`, mode: "create", footer: _jsx(Button, { variant: "ghost", onClick: handleCancel, children: "Cancel" }), children: renderCreateForm({ onCreated: handleCreated, onCancel: handleCancel }) })) : createFields && onCreateSubmit ? (_jsx(QuickFormDrawer, { isOpen: drawerOpen, onClose: handleCancel, 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/ListingViewShell.d.ts

@@ -1,37 +0,0 @@
-/**
- * ListingViewShell
- *
- * Thin wrapper around ListingLayout that adds overlay slots (drawer, modal)
- * and an optional detail-view short-circuit. Replaces the ~10 identical
- * Admin*View ListingLayout delegates and can be used by seller/account views
- * that need the full ListingLayout feature set.
- *
- * Usage:
- *   <ListingViewShell
- *     headerSlot={<PageHeader title="Products" />}
- *     searchSlot={<SearchInput />}
- *     overlays={<><ProductDrawer /><ConfirmDeleteModal /></>}
- *     isDashboard
- *   >
- *     <DataTable columns={cols} data={rows} />
- *   </ListingViewShell>
- */
-import { type ReactNode } from "react";
-import type { ViewPortal } from "./Layout";
-import type { ListingLayoutProps } from "./ListingLayout";
-export interface ListingViewShellProps extends Omit<ListingLayoutProps, "children"> {
-    /** Portal context — sets isDashboard default (admin/seller=true, user/public=false). */
-    portal?: ViewPortal;
-    /** Overlay elements rendered after the layout (drawers, modals, confirm dialogs). */
-    overlays?: ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a drawer overlay. */
-    renderDrawer?: () => ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a confirm modal overlay. */
-    renderConfirmModal?: () => ReactNode;
-    /** @deprecated Use `overlays` instead. Render-prop for a generic modal overlay. */
-    renderModal?: () => ReactNode;
-    /** When provided, the entire layout is replaced with this view (detail/edit mode). */
-    detailView?: ReactNode;
-    children?: ReactNode;
-}
-export declare function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }: ListingViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingViewShell.js

@@ -1,9 +0,0 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ListingLayout } from "./ListingLayout";
-export function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }) {
-    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller");
-    if (detailView) {
-        return _jsx(_Fragment, { children: detailView });
-    }
-    return (_jsxs(_Fragment, { children: [_jsx(ListingLayout, { ...listingProps, isDashboard: effectiveIsDashboard, children: children }), overlays, renderDrawer?.(), renderConfirmModal?.(), renderModal?.()] }));
-}

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

@@ -1,28 +0,0 @@
-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

@@ -1,141 +0,0 @@
-"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] }));
-}

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

@@ -1,272 +0,0 @@
-/* PaginatedMultiSelect — multi-value chips + async paginated checkbox dropdown */
-
-.appkit-pms {
-  position: relative;
-}
-
-/* ── chips row ── */
-.appkit-pms__chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.375rem;
-  margin-bottom: 0.375rem;
-}
-
-.appkit-pms__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;
-}
-
-:is(.dark) .appkit-pms__chip {
-  border-color: var(--appkit-color-border);
-  background: var(--appkit-color-surface);
-  color: var(--appkit-color-text);
-}
-
-.appkit-pms__chip-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.appkit-pms__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-pms__chip-remove:hover {
-  color: var(--appkit-color-text);
-  background-color: var(--appkit-color-zinc-100);
-}
-
-:is(.dark) .appkit-pms__chip-remove:hover {
-  color: var(--appkit-color-text);
-  background-color: var(--appkit-color-slate-700);
-}
-
-.appkit-pms__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-pms__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-pms__trigger:hover:not(:disabled) {
-  border-color: var(--appkit-color-zinc-400);
-}
-
-.appkit-pms__trigger:focus-visible {
-  outline: 2px solid var(--appkit-color-focus-ring, var(--appkit-color-primary));
-  outline-offset: 2px;
-}
-
-:is(.dark) .appkit-pms__trigger {
-  border-color: var(--appkit-color-border);
-  background: var(--appkit-color-surface);
-  color: var(--appkit-color-slate-200);
-}
-
-.appkit-pms__trigger--disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.appkit-pms__placeholder {
-  color: var(--appkit-color-text-faint);
-}
-
-.appkit-pms__trigger-left {
-  display: flex;
-  align-items: center;
-  gap: 0.375rem;
-  overflow: hidden;
-}
-
-.appkit-pms__trigger-count {
-  flex-shrink: 0;
-  font-size: 0.75rem;
-  font-weight: 600;
-  color: var(--appkit-color-primary);
-}
-
-/* ── dropdown ── */
-.appkit-pms__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-pms__dropdown {
-  border-color: var(--appkit-color-border);
-  background: var(--appkit-color-surface);
-}
-
-.appkit-pms__search {
-  border-radius: 0;
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-}
-
-/* ── option list ── */
-.appkit-pms__list {
-  max-height: 13rem;
-  overflow-y: auto;
-  padding: 0.25rem 0;
-}
-
-.appkit-pms__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-pms__option:hover {
-  background-color: var(--appkit-color-zinc-100);
-}
-
-:is(.dark) .appkit-pms__option:hover {
-  background-color: var(--appkit-color-slate-800);
-}
-
-.appkit-pms__option--selected {
-  font-weight: 500;
-  background-color: var(--appkit-color-zinc-50);
-}
-
-:is(.dark) .appkit-pms__option--selected {
-  background-color: rgba(15, 23, 42, 0.6);
-}
-
-.appkit-pms__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-pms__option--selected .appkit-pms__checkbox {
-  border-color: var(--appkit-color-primary);
-  background: var(--appkit-color-primary);
-}
-
-:is(.dark) .appkit-pms__option--selected .appkit-pms__checkbox {
-  border-color: var(--appkit-color-primary);
-  background: var(--appkit-color-primary);
-}
-
-.appkit-pms__checkmark {
-  display: none;
-  font-size: 0.6rem;
-  color: var(--appkit-color-text-on-primary, #fff);
-  font-weight: 700;
-}
-
-.appkit-pms__option--selected .appkit-pms__checkmark {
-  display: block;
-}
-
-.appkit-pms__option-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  color: var(--appkit-color-text);
-}
-
-/* ── empty / loading / load-more / create ── */
-.appkit-pms__empty,
-.appkit-pms__loading {
-  padding: 0.5rem 0.75rem;
-  font-size: 0.75rem;
-  color: var(--appkit-color-text-muted);
-}
-
-.appkit-pms__load-more {
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  text-align: left;
-  font-size: 0.75rem;
-  color: var(--appkit-color-secondary-600);
-}
-
-.appkit-pms__load-more:hover {
-  text-decoration: underline;
-}
-
-.appkit-pms__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-pms__create-btn:hover {
-  background-color: var(--appkit-color-zinc-50);
-}
-
-:is(.dark) .appkit-pms__create-btn:hover {
-  background-color: var(--appkit-color-slate-800);
-}

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

@@ -1,19 +0,0 @@
-import React from "react";
-export interface SectionTab {
-    label: string;
-    href?: string;
-    value?: string;
-    icon?: React.ReactNode;
-    count?: number;
-}
-export interface SectionTabsProps {
-    tabs: readonly SectionTab[];
-    variant?: "admin" | "user" | "default";
-    className?: string;
-    value?: string;
-    onChange?: (value: string) => void;
-    inline?: boolean;
-    stickyTopClassName?: string;
-    currentPath?: string;
-}
-export declare function SectionTabs({ tabs, variant, className, value, onChange, inline, stickyTopClassName, currentPath, }: SectionTabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/SectionTabs.js

@@ -1,66 +0,0 @@
-"use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { usePathname } from "next/navigation";
-import { Nav } from "./Semantic";
-import { Button } from "./Button";
-import { Span } from "./Typography";
-import { TextLink } from "./TextLink";
-export function SectionTabs({ tabs, variant = "default", className = "", value, onChange, inline = false, stickyTopClassName = "top-[var(--header-height,0px)]", currentPath, }) {
-    const pathname = usePathname();
-    const isControlled = typeof onChange === "function";
-    const activePath = currentPath ?? pathname ?? "";
-    const isActiveTab = (tab) => {
-        if (isControlled) {
-            return value === (tab.value ?? tab.href ?? "");
-        }
-        const href = tab.href ?? "";
-        if (!href)
-            return false;
-        if (href.endsWith("/dashboard") || href.endsWith("/profile")) {
-            return activePath === href;
-        }
-        return activePath.startsWith(href);
-    };
-    const getTabKey = (tab) => tab.value ?? tab.href ?? tab.label;
-    const gradientClass = variant === "admin"
-        ? "appkit-section-tabs--admin"
-        : variant === "user"
-            ? "appkit-section-tabs--user"
-            : "";
-    const tabActiveClass = "appkit-section-tabs__tab--active";
-    const tabInactiveClass = "appkit-section-tabs__tab--inactive";
-    const tabBaseClass = "appkit-section-tabs__tab";
-    const strip = (_jsx(Nav, { "aria-label": "Section navigation", className: "appkit-section-tabs__nav", children: _jsx("div", { className: [
-                "appkit-section-tabs__scroll",
-                inline ? "" : "appkit-section-tabs__scroll--padded",
-            ]
-                .filter(Boolean)
-                .join(" "), "data-section": "sectiontabs-div-587", children: _jsx("div", { className: [
-                    "appkit-section-tabs__track",
-                    inline ? "" : "appkit-section-tabs__track--full",
-                ]
-                    .filter(Boolean)
-                    .join(" "), "data-section": "sectiontabs-div-588", children: tabs.map((tab) => {
-                    const key = getTabKey(tab);
-                    const isActive = isActiveTab(tab);
-                    const tabClass = `${tabBaseClass} ${isActive ? tabActiveClass : tabInactiveClass}`;
-                    const content = (_jsxs(_Fragment, { children: [tab.icon && (_jsx(Span, { variant: "inherit", className: "appkit-section-tabs__icon", "aria-hidden": true, children: tab.icon })), tab.label, tab.count !== undefined && (_jsx(Span, { className: `appkit-section-tabs__count ${isActive
-                                    ? "appkit-section-tabs__count--active"
-                                    : "appkit-section-tabs__count--inactive"}`, children: tab.count }))] }));
-                    if (isControlled) {
-                        return (_jsx(Button, { type: "button", variant: "ghost", role: "tab", "aria-selected": isActive, onClick: () => onChange(tab.value ?? tab.href ?? ""), className: tabClass, children: content }, key));
-                    }
-                    return (_jsx(TextLink, { href: tab.href ?? "#", className: tabClass, children: content }, key));
-                }) }) }) }));
-    if (inline) {
-        return _jsx("div", { className: className, "data-section": "sectiontabs-div-589", children: strip });
-    }
-    return (_jsx("div", { className: [
-            "appkit-section-tabs",
-            stickyTopClassName,
-            gradientClass,
-            className,
-        ]
-            .filter(Boolean)
-            .join(" "), "data-section": "sectiontabs-div-590", children: _jsx("div", { className: "appkit-section-tabs__container", "data-section": "sectiontabs-div-591", children: strip }) }));
-}