@mohasinac/appkit 4.10.0 → 4.11.1

package/dist/features/live/components/LiveItemsListView.d.ts

@@ -1,6 +0,0 @@
-type SearchParams = Record<string, string | string[]>;
-export interface LiveItemsListViewProps {
-    searchParams?: SearchParams;
-}
-export declare function LiveItemsListView({ searchParams }: LiveItemsListViewProps): Promise<import("react").JSX.Element>;
-export {};

package/dist/features/live/components/LiveItemsListView.js

@@ -1,44 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
-import { productRepository } from "../../../repositories";
-import { Container, Heading, Main, Section } from "../../../ui";
-import { AdSlot } from "../../homepage/components/AdSlot";
-import { parseListingSearchParams } from "../../../utils/listing-params";
-import { LiveItemsIndexListing } from "./LiveItemsIndexListing";
-const DEFAULT_PAGE = 1;
-const DEFAULT_PAGE_SIZE = 24;
-const DEFAULT_SORT = "-createdAt";
-function sp(params, key) {
-    const v = params[key];
-    return Array.isArray(v) ? v[0] ?? "" : v ?? "";
-}
-function buildLiveFilters(params) {
-    const parts = ["status==published", "listingType==live"];
-    const minPrice = sp(params, "minPrice");
-    const maxPrice = sp(params, "maxPrice");
-    if (minPrice)
-        parts.push(sieveFilter("price", SIEVE_OP.GTE, minPrice));
-    if (maxPrice)
-        parts.push(sieveFilter("price", SIEVE_OP.LTE, maxPrice));
-    const species = sp(params, "species");
-    if (species)
-        parts.push(sieveFilter("liveSpecies", SIEVE_OP.EQ, species));
-    const liveSex = sp(params, "liveSex");
-    if (liveSex)
-        parts.push(sieveFilter("liveSex", SIEVE_OP.EQ, liveSex));
-    const transport = sp(params, "liveTransportMethod");
-    if (transport)
-        parts.push(sieveFilter("liveTransportMethod", SIEVE_OP.EQ, transport));
-    return parts.join(",");
-}
-export async function LiveItemsListView({ searchParams = {} }) {
-    const std = parseListingSearchParams(searchParams);
-    const sort = std.sorts ?? DEFAULT_SORT;
-    const page = std.page ?? DEFAULT_PAGE;
-    const pageSize = std.pageSize ?? DEFAULT_PAGE_SIZE;
-    const filters = buildLiveFilters(searchParams);
-    const result = await productRepository
-        .list({ filters, sorts: sort, page, pageSize })
-        .catch(() => null);
-    return (_jsx(Main, { children: _jsx(Section, { padding: "y-2xl", children: _jsxs(Container, { size: "xl", children: [_jsx(Heading, { level: 1, className: "mb-8", color: "primary", size: "3xl", weight: "semibold", children: "Live Items" }), _jsx(AdSlot, { id: "listing-sidebar-top", className: "mb-6" }), _jsx(LiveItemsIndexListing, { initialData: result ?? undefined }), _jsx(AdSlot, { id: "listing-sidebar-bottom", className: "mt-8" })] }) }) }));
-}

package/dist/features/seller/components/SellerTemplatesView.d.ts

@@ -1,12 +0,0 @@
-import type { JsonValue } from "@mohasinac/appkit";
-import React from "react";
-export interface SellerTemplatesViewProps {
-    onDelete?: (id: string) => Promise<void>;
-    onBulkDelete?: (ids: string[]) => Promise<void>;
-    onDuplicate?: (row: {
-        id: string;
-        name: string;
-        raw: Record<string, JsonValue>;
-    }) => Promise<void>;
-}
-export declare function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }: SellerTemplatesViewProps): React.JSX.Element;

package/dist/features/seller/components/SellerTemplatesView.js

@@ -1,276 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { normalizeError } from "../../../errors/normalize";
-import { Row, sortBy } from "@mohasinac/appkit";
-import { useState, useCallback, useMemo } from "react";
-import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
-import { Plus } from "lucide-react";
-import { useUrlTable } from "../../../react/hooks/useUrlTable";
-import { useBulkSelection } from "../../../react/hooks/useBulkSelection";
-import { BulkActionBar, Button, ConfirmDeleteModal, DataTable, Div, FilterDrawer, Input, Label, ListingToolbar, Pagination, RowActionMenu, Select, SideDrawer, Span, Stack, Text, useToast, StickyToolbar, } from "../../../ui";
-import { useBottomActions } from "../../layout";
-import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
-import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
-import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
-import { toRecordArray, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { TABLE_KEYS } from "../../../constants/table-keys";
-const __P = {
-    p4: "p-[var(--appkit-space-4)]",
-};
-const PAGE_SIZE = 25;
-const DEFAULT_SORT = "name";
-const SORT_OPTIONS = [
-    { value: sortBy("name", "ASC"), label: "Name A–Z" },
-    { value: sortBy("name", "DESC"), label: "Name Z–A" },
-    { value: sortBy("createdAt", "DESC"), label: "Newest" },
-];
-const CONDITION_OPTIONS = [
-    { value: "", label: "Any condition" },
-    { value: "new", label: "New" },
-    { value: "like_new", label: "Like New" },
-    { value: "good", label: "Good" },
-    { value: "fair", label: "Fair" },
-    { value: "used", label: "Used" },
-];
-const EMPTY_DRAFT = {
-    name: "",
-    description: "",
-    category: "",
-    brand: "",
-    condition: "",
-};
-const COLUMNS = [
-    {
-        key: "name",
-        header: "Name",
-        render: (row) => _jsx(Text, { size: "sm", weight: "medium", children: row.name }),
-    },
-    {
-        key: "category",
-        header: "Category",
-        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.category || "—" })),
-    },
-    {
-        key: "brand",
-        header: "Brand",
-        render: (row) => (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: row.brand || "—" })),
-    },
-    {
-        key: "condition",
-        header: "Condition",
-        render: (row) => row.condition ? (_jsx(Span, { layout: "inline-flex", size: "xs", weight: "medium", rounded: "full", padding: "pill-xs", surface: "subtle", color: "muted", transform: "capitalize", children: row.condition.replace(/_/g, " ") })) : (_jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "\u2014" })),
-    },
-];
-export function SellerTemplatesView({ onDelete, onBulkDelete, onDuplicate, }) {
-    const table = useUrlTable({ defaults: { sort: DEFAULT_SORT } });
-    const [searchInput, setSearchInput] = useState(table.get(TABLE_KEYS.QUERY) || "");
-    const [filterOpen, setFilterOpen] = useState(false);
-    const [pendingCondition, setPendingCondition] = useState(table.get(TABLE_KEYS.CONDITION) || "");
-    // Drawer state
-    const [drawerOpen, setDrawerOpen] = useState(false);
-    const [drawerMode, setDrawerMode] = useState("create");
-    const [editingId, setEditingId] = useState(null);
-    const [draft, setDraft] = useState(EMPTY_DRAFT);
-    const [saving, setSaving] = useState(false);
-    const [savingError, setSavingError] = useState(null);
-    // Delete state
-    const [deleteTargetId, setDeleteTargetId] = useState(null);
-    const { deletingId, handleDelete: performDelete } = useEntityDelete({
-        endpoint: SELLER_ENDPOINTS.TEMPLATE_BY_ID,
-        deleteFn: onDelete,
-        successMessage: "Template deleted.",
-        onSuccess: () => { refetch?.(); },
-        fetchOptions: { credentials: "include" },
-    });
-    const [duplicatingId, setDuplicatingId] = useState(null);
-    const { showToast } = useToast();
-    const commitSearch = useCallback(() => {
-        table.set(TABLE_KEYS.QUERY, searchInput.trim());
-    }, [searchInput, table]);
-    const openFilters = useCallback(() => {
-        setPendingCondition(table.get(TABLE_KEYS.CONDITION) || "");
-        setFilterOpen(true);
-    }, [table]);
-    const applyFilters = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.CONDITION]: pendingCondition });
-        setFilterOpen(false);
-    }, [pendingCondition, table]);
-    const resetAll = useCallback(() => {
-        table.setMany({ [TABLE_KEYS.QUERY]: "", [TABLE_KEYS.SORT]: "", [TABLE_KEYS.CONDITION]: "" });
-        setSearchInput("");
-    }, [table]);
-    const q = table.get(TABLE_KEYS.QUERY) || "";
-    const conditionFilter = table.get(TABLE_KEYS.CONDITION) || "";
-    const sort = table.get(TABLE_KEYS.SORT) || DEFAULT_SORT;
-    const currentPage = table.getNumber(TABLE_KEYS.PAGE, 1);
-    const hasActiveState = !!q || sort !== DEFAULT_SORT || !!conditionFilter;
-    const filterActiveCount = conditionFilter ? 1 : 0;
-    // Fetch all templates (server doesn't paginate this endpoint)
-    const { rows: allRows, isLoading, errorMessage, refetch } = useSellerListingData({
-        queryKey: ["seller", "templates"],
-        endpoint: SELLER_ENDPOINTS.TEMPLATES,
-        page: 1,
-        pageSize: 1000,
-        mapRows: (response) => toRecordArray(response.templates).map((item, index) => ({
-            id: toStringValue(item.id, `tpl-${index}`),
-            raw: item,
-            name: String(item.name ?? ""),
-            category: String(item.category ?? ""),
-            brand: String(item.brand ?? ""),
-            condition: String(item.condition ?? ""),
-        })),
-    });
-    // Client-side filter + sort
-    const filteredRows = useMemo(() => {
-        let result = allRows;
-        if (q)
-            result = result.filter((r) => r.name.toLowerCase().includes(q.toLowerCase()));
-        if (conditionFilter)
-            result = result.filter((r) => r.condition === conditionFilter);
-        return [...result].sort((a, b) => sort === "-name" ? b.name.localeCompare(a.name) : a.name.localeCompare(b.name));
-    }, [allRows, q, conditionFilter, sort]);
-    const totalPages = Math.max(1, Math.ceil(filteredRows.length / PAGE_SIZE));
-    const safePage = Math.min(Math.max(1, currentPage), totalPages);
-    const pageRows = filteredRows.slice((safePage - 1) * PAGE_SIZE, safePage * PAGE_SIZE);
-    const selection = useBulkSelection({ items: filteredRows, keyExtractor: (r) => r.id });
-    // Drawer helpers
-    const openCreate = useCallback(() => {
-        setDraft(EMPTY_DRAFT);
-        setEditingId(null);
-        setDrawerMode("create");
-        setSavingError(null);
-        setDrawerOpen(true);
-    }, []);
-    const openEdit = useCallback((row) => {
-        setDraft({
-            name: row.name,
-            description: String(row.raw.description ?? ""),
-            category: row.category,
-            brand: row.brand,
-            condition: row.condition,
-        });
-        setEditingId(row.id);
-        setDrawerMode("edit");
-        setSavingError(null);
-        setDrawerOpen(true);
-    }, []);
-    const closeDrawer = useCallback(() => {
-        setDrawerOpen(false);
-        setEditingId(null);
-        setSavingError(null);
-    }, []);
-    const handleSave = useCallback(async () => {
-        if (!draft.name.trim()) {
-            setSavingError("Template name is required.");
-            return;
-        }
-        setSaving(true);
-        setSavingError(null);
-        try {
-            const body = {
-                name: draft.name.trim(),
-                description: draft.description.trim() || undefined,
-                category: draft.category.trim() || undefined,
-                brand: draft.brand.trim() || undefined,
-                condition: draft.condition || undefined,
-            };
-            const url = drawerMode === "edit" && editingId
-                ? SELLER_ENDPOINTS.TEMPLATE_BY_ID(editingId)
-                : SELLER_ENDPOINTS.TEMPLATES;
-            const method = drawerMode === "edit" ? "PUT" : "POST";
-            await fetch(url, {
-                method,
-                headers: { "Content-Type": "application/json" },
-                credentials: "include",
-                body: JSON.stringify(body),
-            });
-            closeDrawer();
-            refetch?.();
-            showToast("Template saved.", "success");
-        }
-        catch (err) {
-            void normalizeError(err);
-            setSavingError("Failed to save template. Please try again.");
-            showToast(err instanceof Error ? err.message : "Failed to save template.", "error");
-        }
-        finally {
-            setSaving(false);
-        }
-    }, [draft, drawerMode, editingId, closeDrawer, refetch, showToast]);
-    const handleDelete = useCallback(async (id) => {
-        try {
-            await performDelete(id);
-        }
-        catch (err) {
-            void normalizeError(err);
-            showToast(err instanceof Error ? err.message : "Failed to delete template", "error");
-        }
-        setDeleteTargetId(null);
-    }, [performDelete, showToast]);
-    const handleDuplicate = useCallback(async (row) => {
-        setDuplicatingId(row.id);
-        try {
-            if (onDuplicate) {
-                await onDuplicate(row);
-            }
-            else {
-                await fetch(SELLER_ENDPOINTS.TEMPLATES, {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    credentials: "include",
-                    body: JSON.stringify({
-                        name: `Copy of ${row.name}`,
-                        description: String(row.raw.description ?? "") || undefined,
-                        category: row.category || undefined,
-                        brand: row.brand || undefined,
-                        condition: row.condition || undefined,
-                    }),
-                });
-            }
-            refetch?.();
-            showToast("Template duplicated.", "success");
-        }
-        catch (err) {
-            void normalizeError(err);
-            showToast(err instanceof Error ? err.message : "Failed to duplicate template.", "error");
-        }
-        finally {
-            setDuplicatingId(null);
-        }
-    }, [onDuplicate, refetch, showToast]);
-    const bulkActions = [
-        buildBulkAction(ACTIONS.STORE["delete-template"], async () => {
-            if (onBulkDelete) {
-                await onBulkDelete(selection.selectedIds);
-            }
-            else {
-                await Promise.all(selection.selectedIds.map((id) => fetch(SELLER_ENDPOINTS.TEMPLATE_BY_ID(id), {
-                    method: "DELETE",
-                    credentials: "include",
-                })));
-            }
-            selection.clearSelection();
-            refetch?.();
-        }),
-    ];
-    useBottomActions(selection.selectedCount > 0 ? { bulk: { selectedCount: selection.selectedCount, onClearSelection: selection.clearSelection, actions: bulkActions } } : {});
-    return (_jsxs(Div, { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search templates by name...", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: sort, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set(TABLE_KEYS.SORT, v); }, showTableView: true, view: "table", onViewChange: () => { }, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsxs(Button, { gap: "sm", size: "sm", onClick: openCreate, children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx(Span, { children: "New Template" })] }) }), totalPages > 1 && (_jsx(StickyToolbar, { offset: "header+pagination", tone: "translucent", border: true, padding: "toolbar", children: _jsx(Row, { justify: "center", children: _jsx(Pagination, { currentPage: safePage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) }) })), selection.selectedCount > 0 && (_jsx(BulkActionBar, { selectedCount: selection.selectedCount, actions: bulkActions, onClearSelection: selection.clearSelection })), _jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), isLoading ? (_jsx(Stack, { gap: "sm", children: Array.from({ length: 5 }).map((_, i) => (_jsx(Div, { className: "h-14 animate-pulse", border: "subtle", surface: "muted", rounded: "xl" }, i))) })) : pageRows.length === 0 ? (_jsx(Div, { className: "text-center", padding: "y-4xl", children: _jsx(Text, { color: "faint", children: q || conditionFilter
-                                ? "No templates match your search or filters"
-                                : "No templates yet — add your first product template" }) })) : (_jsx(DataTable, { columns: COLUMNS, data: pageRows, keyExtractor: (r) => r.id, selectable: bulkActions.length > 0, selectedIds: selection.selectedIds, onSelectionChange: (ids) => selection.setSelectedIds(ids), actions: (row) => (_jsx(RowActionMenu, { actions: [
-                                {
-                                    label: ACTIONS.STORE["edit-template"].label,
-                                    onClick: () => openEdit(row),
-                                },
-                                {
-                                    label: "Clone",
-                                    disabled: duplicatingId === row.id,
-                                    onClick: () => handleDuplicate(row),
-                                },
-                                {
-                                    label: ACTIONS.STORE["delete-template"].label,
-                                    destructive: true,
-                                    onClick: () => setDeleteTargetId(row.id),
-                                    disabled: deletingId === row.id,
-                                },
-                            ] })) }))] }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: () => setPendingCondition(""), activeCount: filterActiveCount, hideTrigger: true, children: _jsx(Stack, { className: `${__P.p4}`, gap: "md", children: _jsxs(Div, { children: [_jsx(Label, { className: "mb-1.5 block", color: "primary", size: "sm", weight: "medium", children: "Condition" }), _jsx(Select, { value: pendingCondition, onValueChange: setPendingCondition, options: CONDITION_OPTIONS })] }) }) }), _jsx(SideDrawer, { isOpen: drawerOpen, onClose: closeDrawer, title: drawerMode === "create" ? "New Template" : "Edit Template", mode: drawerMode, isDirty: draft.name !== "" || draft.category !== "" || draft.brand !== "", footer: _jsxs(Row, { align: "center", justify: "end", gap: "sm", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: closeDrawer, disabled: saving, children: "Cancel" }), _jsx(Button, { size: "sm", isLoading: saving, onClick: handleSave, children: drawerMode === "create" ? "Create Template" : "Save Changes" })] }), children: _jsxs(Stack, { gap: "md", children: [savingError && (_jsx(Div, { textSize: "sm", className: "border border-error/20", color: "error", surface: "danger-surface", padding: "inlineSm", rounded: "lg", children: savingError })), _jsx(Input, { id: "tpl-name", label: "Template Name", value: draft.name, onChange: (e) => setDraft((d) => ({ ...d, name: e.target.value })), placeholder: "e.g. Pok\u00E9mon Card Standard", required: true, autoComplete: "off" }), _jsx(Input, { id: "tpl-description", label: "Description (optional)", value: draft.description, onChange: (e) => setDraft((d) => ({ ...d, description: e.target.value })), placeholder: "Short note about when to use this template", autoComplete: "off" }), _jsx(Input, { id: "tpl-category", label: "Category (optional)", value: draft.category, onChange: (e) => setDraft((d) => ({ ...d, category: e.target.value })), placeholder: "e.g. trading-cards", autoComplete: "off" }), _jsx(Input, { id: "tpl-brand", label: "Brand (optional)", value: draft.brand, onChange: (e) => setDraft((d) => ({ ...d, brand: e.target.value })), placeholder: "e.g. Pok\u00E9mon Company", autoComplete: "off" }), _jsx(Select, { label: "Condition (optional)", name: "tpl-condition", value: draft.condition, onValueChange: (v) => setDraft((d) => ({ ...d, condition: v })), options: CONDITION_OPTIONS })] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Template", message: "Are you sure you want to delete this template? This cannot be undone.", onConfirm: () => handleDelete(deleteTargetId), onClose: () => setDeleteTargetId(null), isDeleting: deletingId === deleteTargetId }))] }));
-}

package/dist/react/hooks/useVisibleItems.d.ts

@@ -1,37 +0,0 @@
-export interface UseVisibleItemsOptions {
-    /** Total number of items */
-    total: number;
-    /** Minimum width of each item in pixels */
-    minItemWidth: number;
-    /** Width reserved for each scroll arrow button (default: 36) */
-    arrowWidth?: number;
-    /** Gap between items in pixels (default: 8) */
-    gap?: number;
-}
-export interface UseVisibleItemsResult {
-    /** Attach to the scroll container element */
-    containerRef: React.RefObject<HTMLElement | null>;
-    /** Number of items that fit in the current container width */
-    visibleCount: number;
-    /** Whether any items are hidden (arrows should be shown) */
-    hasOverflow: boolean;
-    /** Index of the first visible item */
-    scrollOffset: number;
-    setScrollOffset: React.Dispatch<React.SetStateAction<number>>;
-    /** Scroll left by one page */
-    scrollLeft: () => void;
-    /** Scroll right by one page */
-    scrollRight: () => void;
-    canScrollLeft: boolean;
-    canScrollRight: boolean;
-}
-/**
- * `useVisibleItems` — compute how many items fit in a container, handling
- * arrow button reservations. Powers `HorizontalScroller` and `TabStrip`.
- *
- * **Formula** (when overflow exists):
- * `visible = floor((containerWidth - 2 × (arrowWidth + gap) + gap) / (minItemWidth + gap))`
- *
- * When all items fit without arrows, no arrows are shown.
- */
-export declare function useVisibleItems({ total, minItemWidth, arrowWidth, gap, }: UseVisibleItemsOptions): UseVisibleItemsResult;

package/dist/react/hooks/useVisibleItems.js

@@ -1,59 +0,0 @@
-"use client";
-// appkit/src/react/hooks/useVisibleItems.ts
-import { useRef, useState, useEffect, useCallback } from "react";
-/**
- * `useVisibleItems` — compute how many items fit in a container, handling
- * arrow button reservations. Powers `HorizontalScroller` and `TabStrip`.
- *
- * **Formula** (when overflow exists):
- * `visible = floor((containerWidth - 2 × (arrowWidth + gap) + gap) / (minItemWidth + gap))`
- *
- * When all items fit without arrows, no arrows are shown.
- */
-export function useVisibleItems({ total, minItemWidth, arrowWidth = 36, gap = 8, }) {
-    const containerRef = useRef(null);
-    const [visibleCount, setVisibleCount] = useState(total);
-    const [scrollOffset, setScrollOffset] = useState(0);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (!el)
-            return;
-        const compute = (width) => {
-            // Check if all items fit without scrolling
-            const totalItemsWidth = total * minItemWidth + Math.max(0, total - 1) * gap;
-            if (totalItemsWidth <= width) {
-                setVisibleCount(total);
-                return;
-            }
-            // Reserve space for both arrows
-            const usable = width - 2 * (arrowWidth + gap);
-            const raw = Math.floor((usable + gap) / (minItemWidth + gap));
-            setVisibleCount(Math.max(1, raw));
-        };
-        const ro = new ResizeObserver(([entry]) => {
-            if (entry)
-                compute(entry.contentRect.width);
-        });
-        ro.observe(el);
-        compute(el.getBoundingClientRect().width);
-        return () => ro.disconnect();
-    }, [total, minItemWidth, arrowWidth, gap]);
-    // Clamp scroll offset when visibleCount or total changes
-    useEffect(() => {
-        setScrollOffset((o) => Math.min(o, Math.max(0, total - visibleCount)));
-    }, [visibleCount, total]);
-    const hasOverflow = visibleCount < total;
-    const scrollLeft = useCallback(() => setScrollOffset((o) => Math.max(0, o - visibleCount)), [visibleCount]);
-    const scrollRight = useCallback(() => setScrollOffset((o) => Math.min(total - visibleCount, o + visibleCount)), [visibleCount, total]);
-    return {
-        containerRef,
-        visibleCount,
-        hasOverflow,
-        scrollOffset,
-        setScrollOffset,
-        scrollLeft,
-        scrollRight,
-        canScrollLeft: scrollOffset > 0,
-        canScrollRight: scrollOffset + visibleCount < total,
-    };
-}

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

@@ -1,34 +0,0 @@
-import React from "react";
-export interface TabStripTab {
-    key: string;
-    label: string;
-    badge?: number;
-    disabled?: boolean;
-}
-export interface TabStripProps {
-    tabs: TabStripTab[];
-    activeKey: string;
-    onChange: (key: string) => void;
-    /** Minimum width per tab in pixels (default: FLUID_GRID_MIN_WIDTHS.tabItem = 100) */
-    minTabWidth?: number;
-    className?: string;
-}
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- * tabs={[
- * { key: "all", label: "All" },
- * { key: "active", label: "Active", badge: 3 },
- * { key: "archived", label: "Archived", disabled: true },
- * ]}
- * activeKey={activeTab}
- * onChange={setActiveTab}
- * />
- * ```
- */
-export declare function TabStrip({ tabs, activeKey, onChange, minTabWidth, className, }: TabStripProps): React.JSX.Element;

package/dist/ui/components/TabStrip.js

@@ -1,56 +0,0 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-// appkit/src/ui/components/TabStrip.tsx
-import { useEffect } from "react";
-import { Span } from "./Typography";
-import { useVisibleItems } from "../../react/hooks/useVisibleItems";
-import { FLUID_GRID_MIN_WIDTHS } from "../../tokens";
-/**
- * `TabStrip` — a horizontally scrollable tab bar that shows as many tabs as
- * fit the container width. Arrow buttons appear automatically when tabs overflow.
- * The active tab is always scrolled into the visible window.
- *
- * @example
- * ```tsx
- * <TabStrip
- * tabs={[
- * { key: "all", label: "All" },
- * { key: "active", label: "Active", badge: 3 },
- * { key: "archived", label: "Archived", disabled: true },
- * ]}
- * activeKey={activeTab}
- * onChange={setActiveTab}
- * />
- * ```
- */
-export function TabStrip({ tabs, activeKey, onChange, minTabWidth = FLUID_GRID_MIN_WIDTHS.tabItem, className, }) {
-    const { containerRef, visibleCount, hasOverflow, scrollLeft, scrollRight, setScrollOffset, scrollOffset, canScrollLeft, canScrollRight, } = useVisibleItems({
-        total: tabs.length,
-        minItemWidth: minTabWidth,
-        gap: 0,
-    });
-    // Keep active tab scrolled into the visible window
-    useEffect(() => {
-        const idx = tabs.findIndex((t) => t.key === activeKey);
-        if (idx < 0)
-            return;
-        if (idx < scrollOffset) {
-            setScrollOffset(idx);
-        }
-        else if (idx >= scrollOffset + visibleCount) {
-            setScrollOffset(idx - visibleCount + 1);
-        }
-    }, [activeKey, scrollOffset, visibleCount, tabs, setScrollOffset]);
-    const visible = tabs.slice(scrollOffset, scrollOffset + visibleCount);
-    return (_jsxs("div", { ref: containerRef, role: "tablist", className: ["appkit-tab-strip", className ?? ""].join(" ").trim(), children: [hasOverflow && (_jsx("button", { type: "button", onClick: scrollLeft, disabled: !canScrollLeft, "aria-label": "Previous tabs", className: "appkit-tab-strip__arrow", children: "\u2039" })), visible.map((tab) => (_jsxs("button", { type: "button", role: "tab", "aria-selected": tab.key === activeKey, "aria-disabled": tab.disabled, onClick: () => !tab.disabled && onChange(tab.key), style: { minWidth: `${minTabWidth}px` }, className: [
-                    "appkit-tab-strip__tab",
-                    tab.key === activeKey
-                        ? "appkit-tab-strip__tab--active"
-                        : "appkit-tab-strip__tab--inactive",
-                    tab.disabled
-                        ? "appkit-tab-strip__tab--disabled"
-                        : "appkit-tab-strip__tab--enabled",
-                ]
-                    .join(" ")
-                    .trim(), children: [tab.label, tab.badge != null && tab.badge > 0 && (_jsx(Span, { className: "appkit-tab-strip__badge", children: tab.badge > 99 ? "99+" : tab.badge }))] }, tab.key))), hasOverflow && (_jsx("button", { type: "button", onClick: scrollRight, disabled: !canScrollRight, "aria-label": "Next tabs", className: "appkit-tab-strip__arrow", children: "\u203A" }))] }));
-}

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

@@ -1,97 +0,0 @@
-.appkit-tab-strip {
-  display: flex;
-  align-items: flex-end;
-  border-bottom: 1px solid var(--appkit-color-border);
-}
-
-.dark .appkit-tab-strip {
-  border-bottom-color: var(--appkit-color-border);
-}
-
-.appkit-tab-strip__arrow {
-  flex: none;
-  width: 2.25rem;
-  height: 3rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--appkit-color-zinc-500);
-  transition: color 0.2s ease, opacity 0.2s ease;
-}
-
-.appkit-tab-strip__arrow:hover:not(:disabled) {
-  color: var(--appkit-color-text);
-}
-
-.dark .appkit-tab-strip__arrow:hover:not(:disabled) {
-  color: var(--appkit-color-text);
-}
-
-.appkit-tab-strip__arrow:disabled {
-  opacity: 0.3;
-}
-
-.appkit-tab-strip__tab {
-  flex: 1;
-  height: 3rem;
-  padding: 0 1rem;
-  white-space: nowrap;
-  border-bottom: 2px solid transparent;
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: color 0.2s ease, border-color 0.2s ease;
-}
-
-.appkit-tab-strip__tab--active {
-  border-bottom-color: var(--appkit-color-secondary-600);
-  color: var(--appkit-color-secondary-600);
-}
-
-.dark .appkit-tab-strip__tab--active {
-  border-bottom-color: var(--appkit-color-primary);
-  color: var(--appkit-color-primary-400);
-}
-
-.appkit-tab-strip__tab--inactive {
-  color: var(--appkit-color-zinc-600);
-}
-
-.appkit-tab-strip__tab--inactive:hover {
-  color: var(--appkit-color-text);
-}
-
-.dark .appkit-tab-strip__tab--inactive {
-  color: var(--appkit-color-text-faint);
-}
-
-.dark .appkit-tab-strip__tab--inactive:hover {
-  color: var(--appkit-color-text);
-}
-
-.appkit-tab-strip__tab--disabled {
-  opacity: 0.4;
-  cursor: not-allowed;
-}
-
-.appkit-tab-strip__tab--enabled {
-  cursor: pointer;
-}
-
-.appkit-tab-strip__badge {
-  margin-left: 0.375rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1rem;
-  height: 1rem;
-  padding: 0 0.25rem;
-  border-radius: 9999px;
-  font-size: var(--appkit-text-2xs);
-  background: var(--appkit-color-secondary-50);
-  color: var(--appkit-color-secondary-600);
-}
-
-.dark .appkit-tab-strip__badge {
-  background: rgba(112, 26, 117, 0.3);
-  color: var(--appkit-color-primary-300);
-}