@flowselections/floriday-voorraad 1.0.150 → 1.0.154

package/dist-lib/components/fs-ui/DataTable.d.ts

@@ -0,0 +1,42 @@
+import { type ReactNode } from "react";
+export interface DataColumn<R> {
+    key: string;
+    header: ReactNode;
+    /** Vaste breedte (bijv. "12%" of "96px"); kolommen schalen evenredig mee. */
+    width?: string;
+    /** Sorteersleutel; zonder sleutel is de kolom niet sorteerbaar. */
+    sortKey?: string;
+    render: (row: R) => ReactNode;
+    className?: string;
+}
+/**
+ * Tabel naar de stijlgids: één afgerond vlak, kolomkoppen blijven zichtbaar,
+ * vaste kolombreedtes, alles links, rij 60 px, hover lichtgrijs, actieve rij met
+ * groene streep links, open-knop bij hover. J/K = volgende/vorige rij, Enter = openen
+ * (nooit tijdens typen). Op mobiel (onder 768 px) een kaartenlijst als `mobileCard` is gegeven.
+ */
+export declare function DataTable<R>({ columns, rows, getId, loading, sort, onSort, onOpen, openLabel, selection, empty, mobileCard, rowActions, skeletonRows, keyboard, }: {
+    columns: DataColumn<R>[];
+    rows: R[];
+    getId: (r: R) => string;
+    loading?: boolean;
+    sort?: {
+        key: string;
+        asc: boolean;
+    };
+    onSort?: (key: string) => void;
+    onOpen?: (r: R) => void;
+    openLabel?: string;
+    selection?: {
+        selected: Set<string>;
+        onToggle: (id: string) => void;
+        onToggleAll: (ids: string[]) => void;
+        label: (r: R) => string;
+    };
+    empty?: ReactNode;
+    mobileCard?: (r: R) => ReactNode;
+    rowActions?: (r: R) => ReactNode;
+    skeletonRows?: number;
+    keyboard?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=DataTable.d.ts.map

package/dist-lib/components/fs-ui/DataTable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataTable.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/DataTable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAKpE,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,EAAE,SAAS,CAAC;IAClB,6EAA6E;IAC7E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mEAAmE;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,CAAC,GAAG,EAAE,CAAC,KAAK,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAC3B,OAAO,EACP,IAAI,EACJ,KAAK,EACL,OAAO,EACP,IAAI,EACJ,MAAM,EACN,MAAM,EACN,SAAoB,EACpB,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACV,YAAgB,EAChB,QAAe,GAChB,EAAE;IACD,OAAO,EAAE,UAAU,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,OAAO,CAAA;KAAE,CAAC;IACrC,MAAM,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE;QAAE,QAAQ,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;QAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;QAAC,WAAW,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;QAAC,KAAK,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,MAAM,CAAA;KAAE,CAAC;IACrI,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;IACjC,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC;IACjC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,+BAoJA"}

package/dist-lib/components/fs-ui/DataTable.js

@@ -0,0 +1,68 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { ArrowDown, ArrowUp, ChevronRight } from "lucide-react";
+import { TableSkeleton } from "./TableSkeleton.js";
+import { isTypen } from "./SearchInput.js";
+/**
+ * Tabel naar de stijlgids: één afgerond vlak, kolomkoppen blijven zichtbaar,
+ * vaste kolombreedtes, alles links, rij 60 px, hover lichtgrijs, actieve rij met
+ * groene streep links, open-knop bij hover. J/K = volgende/vorige rij, Enter = openen
+ * (nooit tijdens typen). Op mobiel (onder 768 px) een kaartenlijst als `mobileCard` is gegeven.
+ */
+export function DataTable({ columns, rows, getId, loading, sort, onSort, onOpen, openLabel = "Openen", selection, empty, mobileCard, rowActions, skeletonRows = 8, keyboard = true, }) {
+    const [actief, setActief] = useState(-1);
+    const rowsRef = useRef(rows);
+    rowsRef.current = rows;
+    const ids = rows.map(getId);
+    useEffect(() => setActief(-1), [ids.join("|")]); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        if (!keyboard)
+            return;
+        const h = (e) => {
+            if (e.metaKey || e.ctrlKey || e.altKey || isTypen(e.target))
+                return;
+            if (document.querySelector("[role=dialog]"))
+                return;
+            const n = rowsRef.current.length;
+            if (!n)
+                return;
+            if (e.key === "j" || e.key === "J") {
+                e.preventDefault();
+                setActief((i) => Math.min(n - 1, i + 1));
+            }
+            else if (e.key === "k" || e.key === "K") {
+                e.preventDefault();
+                setActief((i) => Math.max(0, i - 1));
+            }
+            else if (e.key === "Enter" && onOpen) {
+                setActief((i) => { if (i >= 0 && i < n)
+                    onOpen(rowsRef.current[i]); return i; });
+            }
+            else if (e.key === "Escape")
+                setActief(-1);
+        };
+        window.addEventListener("keydown", h);
+        return () => window.removeEventListener("keydown", h);
+    }, [keyboard, onOpen]);
+    useEffect(() => {
+        if (actief < 0)
+            return;
+        document.querySelector(`[data-rij="${actief}"]`)?.scrollIntoView({ block: "nearest" });
+    }, [actief]);
+    const allesGekozen = selection ? ids.length > 0 && ids.every((id) => selection.selected.has(id)) : false;
+    const kolomBreedtes = [selection ? "36px" : undefined, ...columns.map((c) => c.width), onOpen || rowActions ? "96px" : undefined].filter((_, i, a) => i > 0 || a[0] !== undefined);
+    const leeg = !loading && rows.length === 0;
+    const eersteLaad = loading && rows.length === 0;
+    return (_jsxs("div", { className: "overflow-hidden rounded-xl border border-border bg-card shadow-sm", children: [(_jsxs("ul", { className: "divide-y divide-border md:hidden", children: [eersteLaad && Array.from({ length: 5 }).map((_, i) => (_jsxs("li", { className: "space-y-2 p-4", "aria-hidden": true, children: [_jsx("div", { className: "h-4 w-2/3 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-3 w-1/2 animate-pulse rounded bg-muted" })] }, i))), rows.map((r) => (_jsx("li", { className: "transition-opacity duration-150 " + (loading ? "opacity-60" : ""), children: _jsx("div", { role: onOpen ? "button" : undefined, tabIndex: onOpen ? 0 : undefined, onClick: () => onOpen?.(r), onKeyDown: (e) => { if (e.key === "Enter" && onOpen)
+                                onOpen(r); }, className: "block min-h-11 p-4 active:bg-muted/60", children: mobileCard ? mobileCard(r) : (_jsx("div", { className: "space-y-1", children: columns.map((c, ci) => (_jsxs("div", { className: ci === 0 ? "min-w-0 text-sm font-medium" : "flex min-w-0 items-baseline justify-between gap-3 text-xs", children: [ci > 0 && _jsx("span", { className: "shrink-0 text-muted-foreground", children: c.header }), _jsx("div", { className: "min-w-0 truncate", children: c.render(r) })] }, c.key))) })) }) }, getId(r)))), leeg && _jsx("li", { children: empty })] })), _jsx("div", { className: "hidden max-h-[calc(100dvh-7rem)] overflow-auto md:block xl:max-h-none xl:overflow-visible", children: _jsxs("table", { className: "w-full [&_thead_th]:h-10 [&_thead_th]:text-[11px] [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-wide [&_thead_th]:text-muted-foreground min-w-[900px] table-fixed caption-bottom text-sm [&_thead_th]:sticky [&_thead_th]:top-0 [&_thead_th]:z-10 [&_thead_th]:bg-card [&_tbody_tr]:transition-colors", children: [_jsxs("colgroup", { children: [selection && _jsx("col", { style: { width: "36px" } }), columns.map((c) => _jsx("col", { style: c.width ? { width: c.width } : undefined }, c.key)), (onOpen || rowActions) && _jsx("col", { style: { width: "96px" } })] }), _jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [selection && (_jsx("th", { className: "px-2 text-left align-middle", children: _jsx("input", { type: "checkbox", className: "h-4 w-4 rounded accent-primary", checked: allesGekozen, onChange: () => selection.onToggleAll(ids), "aria-label": "Alles op deze pagina kiezen" }) })), columns.map((c) => {
+                                        const act = sort && c.sortKey && sort.key === c.sortKey;
+                                        return (_jsx("th", { scope: "col", className: "px-2 text-left align-middle", "aria-sort": act ? (sort.asc ? "ascending" : "descending") : c.sortKey ? "none" : undefined, children: c.sortKey && onSort ? (_jsxs("button", { type: "button", onClick: () => onSort(c.sortKey), className: "inline-flex items-center gap-1 uppercase tracking-wide hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm " + (act ? "text-foreground" : ""), children: [c.header, act && (sort.asc ? _jsx(ArrowUp, { className: "h-3 w-3" }) : _jsx(ArrowDown, { className: "h-3 w-3" }))] })) : c.header }, c.key));
+                                    }), (onOpen || rowActions) && _jsx("th", { className: "px-2", children: _jsx("span", { className: "sr-only", children: "Acties" }) })] }) }), _jsxs("tbody", { children: [eersteLaad && _jsx(TableSkeleton, { columns: kolomBreedtes, rows: skeletonRows }), rows.map((r, i) => {
+                                    const id = getId(r);
+                                    const isActief = i === actief;
+                                    const gekozen = selection?.selected.has(id);
+                                    return (_jsxs("tr", { "data-rij": i, onClick: () => setActief(i), onDoubleClick: () => onOpen?.(r), className: "group h-[60px] border-b border-border transition-colors duration-150 last:border-0 hover:bg-muted/40 motion-reduce:transition-none " +
+                                            (isActief ? "bg-muted/60 " : "") +
+                                            (loading ? "opacity-60" : ""), children: [selection && (_jsxs("td", { className: "relative px-2 py-0 align-middle", onClick: (e) => e.stopPropagation(), children: [(gekozen || isActief) && _jsx("span", { "aria-hidden": true, className: "absolute inset-y-0 left-0 w-[3px] " + (gekozen ? "bg-primary" : "bg-primary/40") }), _jsx("input", { type: "checkbox", className: "h-4 w-4 rounded accent-primary", checked: !!gekozen, onChange: () => selection.onToggle(id), "aria-label": `Kies ${selection.label(r)}` })] })), columns.map((c) => _jsx("td", { className: "truncate px-2 py-0 align-middle " + (c.className ?? ""), children: c.render(r) }, c.key)), (onOpen || rowActions) && (_jsx("td", { className: "px-2 py-0 align-middle", onClick: (e) => e.stopPropagation(), children: _jsxs("div", { className: "flex items-center justify-end gap-1", children: [rowActions?.(r), onOpen && (_jsx("button", { type: "button", onClick: () => onOpen(r), "aria-label": openLabel, title: openLabel, className: "inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted-foreground transition-opacity duration-150 hover:bg-muted hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " + (isActief ? "opacity-100" : "opacity-0 group-hover:opacity-100"), children: _jsx(ChevronRight, { className: "h-4 w-4" }) }))] }) }))] }, id));
+                                }), leeg && (_jsx("tr", { className: "hover:bg-transparent", children: _jsx("td", { colSpan: columns.length + (selection ? 1 : 0) + (onOpen || rowActions ? 1 : 0), children: empty }) }))] })] }) })] }));
+}

package/dist-lib/components/fs-ui/EmptyState.d.ts

@@ -0,0 +1,9 @@
+import type { ReactNode } from "react";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export declare function EmptyState({ icon, title, text, action, }: {
+    icon: ReactNode;
+    title: string;
+    text?: string;
+    action?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=EmptyState.d.ts.map

package/dist-lib/components/fs-ui/EmptyState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmptyState.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/EmptyState.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,8DAA8D;AAC9D,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,MAAM,GACP,EAAE;IACD,IAAI,EAAE,SAAS,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,+BAaA"}

package/dist-lib/components/fs-ui/EmptyState.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Lege toestand: groot zacht icoon, korte zin, één actie. */
+export function EmptyState({ icon, title, text, action, }) {
+    return (_jsxs("div", { className: "flex flex-col items-center gap-3 px-4 py-14 text-center", children: [_jsx("span", { className: "inline-flex h-14 w-14 items-center justify-center rounded-full bg-muted text-muted-foreground", "aria-hidden": true, children: icon }), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-semibold text-foreground", children: title }), text && _jsx("div", { className: "mt-1 max-w-sm text-sm text-muted-foreground", children: text })] }), action] }));
+}

package/dist-lib/components/fs-ui/FilterChips.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export interface FilterChip {
+    key: string;
+    label: string;
+    icon?: ReactNode;
+    onRemove: () => void;
+}
+/** FilterChip exact naar Verkooporders; "Alles wissen" bij meer dan één. Inline in de werkbalk. */
+export declare function FilterChips({ chips, onClearAll }: {
+    chips: FilterChip[];
+    onClearAll?: () => void;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=FilterChips.d.ts.map

package/dist-lib/components/fs-ui/FilterChips.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterChips.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterChips.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,MAAM,WAAW,UAAU;IACzB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,mGAAmG;AACnG,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE;IAAE,KAAK,EAAE,UAAU,EAAE,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,sCAwBlG"}

package/dist-lib/components/fs-ui/FilterChips.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { X } from "lucide-react";
+/** FilterChip exact naar Verkooporders; "Alles wissen" bij meer dan één. Inline in de werkbalk. */
+export function FilterChips({ chips, onClearAll }) {
+    if (chips.length === 0)
+        return null;
+    return (_jsxs(_Fragment, { children: [chips.map((c) => (_jsxs("button", { type: "button", onClick: c.onRemove, "aria-label": `Filter ${c.label} wissen`, className: "inline-flex h-8 items-center gap-1.5 rounded-full border border-border bg-muted px-3 text-xs font-medium text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:h-3.5 [&_svg]:w-3.5", children: [c.icon, c.label, _jsx(X, { className: "h-3.5 w-3.5", "aria-hidden": true })] }, c.key))), onClearAll && chips.length > 1 && (_jsx("button", { type: "button", onClick: onClearAll, className: "h-8 rounded-full px-2 text-xs font-medium text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: "Alles wissen" }))] }));
+}

package/dist-lib/components/fs-ui/FilterPanel.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+/** Zijpaneel met alle extra filters (rechts op desktop, volledig scherm op mobiel). */
+export declare function FilterPanel({ open, onOpenChange, children, onClear }: {
+    open: boolean;
+    onOpenChange: (o: boolean) => void;
+    children: ReactNode;
+    onClear?: () => void;
+}): import("react").JSX.Element;
+/** Eén filtergroep met keuzeknoppen. */
+export declare function FilterGroup<T extends string>({ title, value, options, onChange }: {
+    title: string;
+    value: T;
+    options: {
+        value: T;
+        label: string;
+    }[];
+    onChange: (v: T) => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FilterPanel.d.ts.map

package/dist-lib/components/fs-ui/FilterPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterPanel.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FilterPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,uFAAuF;AACvF,wBAAgB,WAAW,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,OAAO,CAAC;IAAC,YAAY,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,+BAatK;AAED,wCAAwC;AACxC,wBAAgB,WAAW,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,CAAC,CAAC;IAAC,OAAO,EAAE;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAA;CAAE,+BAc/K"}

package/dist-lib/components/fs-ui/FilterPanel.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@flowselections/core";
+/** Zijpaneel met alle extra filters (rechts op desktop, volledig scherm op mobiel). */
+export function FilterPanel({ open, onOpenChange, children, onClear }) {
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: _jsxs(DialogContent, { className: "left-auto right-0 top-0 h-[100dvh] max-w-sm translate-x-0 translate-y-0 rounded-none sm:rounded-none flex flex-col gap-4 data-[state=open]:slide-in-from-right", children: [_jsx(DialogHeader, { children: _jsx(DialogTitle, { children: "Filters" }) }), _jsx("div", { className: "min-h-0 flex-1 space-y-5 overflow-auto", children: children }), _jsxs("div", { className: "flex justify-between gap-2 border-t border-border pt-3", children: [onClear ? _jsx(Button, { variant: "ghost", size: "sm", onClick: onClear, children: "Alles wissen" }) : _jsx("span", {}), _jsx(Button, { size: "sm", onClick: () => onOpenChange(false), children: "Klaar" })] })] }) }));
+}
+/** Eén filtergroep met keuzeknoppen. */
+export function FilterGroup({ title, value, options, onChange }) {
+    return (_jsxs("fieldset", { className: "space-y-2", children: [_jsx("legend", { className: "text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }), _jsx("div", { className: "flex flex-wrap gap-2", children: options.map((o) => (_jsx("button", { type: "button", "aria-pressed": o.value === value, onClick: () => onChange(o.value), className: "h-8 rounded-full border px-3 text-xs font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " + (o.value === value ? "border-primary/30 bg-primary/10 text-foreground" : "border-border bg-card text-foreground/80 hover:bg-muted"), children: o.label }, o.value))) })] }));
+}

package/dist-lib/components/fs-ui/FiltersButton.d.ts

@@ -0,0 +1,6 @@
+/** Knop "Filters" exact naar Verkooporders, met teller als er filters actief zijn. */
+export declare function FiltersButton({ count, onClick }: {
+    count: number;
+    onClick: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=FiltersButton.d.ts.map

package/dist-lib/components/fs-ui/FiltersButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FiltersButton.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/FiltersButton.tsx"],"names":[],"mappings":"AAGA,sFAAsF;AACtF,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BAYvF"}

package/dist-lib/components/fs-ui/FiltersButton.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@flowselections/core";
+import { SlidersHorizontal } from "lucide-react";
+/** Knop "Filters" exact naar Verkooporders, met teller als er filters actief zijn. */
+export function FiltersButton({ count, onClick }) {
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClick, "aria-label": "Filters", className: "relative h-10 px-3 sm:h-9", children: [_jsx(SlidersHorizontal, { className: "h-4 w-4 sm:mr-2" }), _jsx("span", { className: "hidden sm:inline", children: "Filters" }), count > 0 && (_jsx("span", { className: "ml-2 inline-flex h-5 min-w-5 items-center justify-center rounded-full bg-primary px-1.5 text-[11px] font-semibold text-primary-foreground", children: count }))] }));
+}

package/dist-lib/components/fs-ui/HeaderButton.d.ts

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+/** Secundaire kopknop exact naar Verkooporders: outline sm; op mobiel alleen icoon van 40 px. */
+export declare function HeaderButton({ icon, label, onClick, disabled }: {
+    icon: ReactNode;
+    label: string;
+    onClick?: () => void;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+/** Primaire kopknop: size sm met kbd-hint; op mobiel verborgen (vaste knop onderin). */
+export declare function HeaderPrimary({ icon, label, kbd, onClick }: {
+    icon: ReactNode;
+    label: string;
+    kbd?: string;
+    onClick: () => void;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HeaderButton.d.ts.map

package/dist-lib/components/fs-ui/HeaderButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderButton.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/HeaderButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,iGAAiG;AACjG,wBAAgB,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAM5I;AAED,wFAAwF;AACxF,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,OAAO,EAAE,EAAE;IAAE,IAAI,EAAE,SAAS,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,+BASjI"}

package/dist-lib/components/fs-ui/HeaderButton.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button } from "@flowselections/core";
+/** Secundaire kopknop exact naar Verkooporders: outline sm; op mobiel alleen icoon van 40 px. */
+export function HeaderButton({ icon, label, onClick, disabled }) {
+    return (_jsxs(Button, { variant: "outline", size: "sm", onClick: onClick, disabled: disabled, "aria-label": label, className: "h-10 w-10 p-0 sm:h-9 sm:w-auto sm:px-3 [&_svg]:h-4 [&_svg]:w-4 [&_svg]:sm:mr-2", children: [icon, " ", _jsx("span", { className: "hidden sm:inline", children: label })] }));
+}
+/** Primaire kopknop: size sm met kbd-hint; op mobiel verborgen (vaste knop onderin). */
+export function HeaderPrimary({ icon, label, kbd, onClick }) {
+    return (_jsxs(Button, { size: "sm", className: "hidden sm:inline-flex [&_svg]:mr-2 [&_svg]:h-4 [&_svg]:w-4", onClick: onClick, children: [icon, " ", label, kbd && (_jsx("kbd", { "aria-hidden": true, className: "ml-2 hidden rounded border border-primary-foreground/30 bg-primary-foreground/15 px-1.5 font-mono text-[10px] leading-4 text-primary-foreground sm:inline-block", children: kbd }))] }));
+}

package/dist-lib/components/fs-ui/HoverTip.d.ts

@@ -0,0 +1,15 @@
+import { type ReactNode } from "react";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export declare function HoverTip({ content, label, children, side, align, className, }: {
+    align?: "start" | "center" | "end";
+    content: ReactNode;
+    label: string;
+    children: ReactNode;
+    side?: "top" | "bottom" | "left" | "right";
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=HoverTip.d.ts.map

package/dist-lib/components/fs-ui/HoverTip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HoverTip.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/HoverTip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGzD;;;;GAIG;AACH,wBAAgB,QAAQ,CAAC,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,IAAY,EACZ,KAAgB,EAChB,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACnC,OAAO,EAAE,SAAS,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4CA"}

package/dist-lib/components/fs-ui/HoverTip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "@flowselections/core";
+/**
+ * Tooltip op basis van Popover (core heeft geen Tooltip-export): opent bij
+ * aanwijzen én bij toetsenbordfocus, sluit met Esc of bij verlaten. De
+ * trigger is een knop met een toegankelijke naam.
+ */
+export function HoverTip({ content, label, children, side = "top", align = "center", className = "", }) {
+    const [open, setOpen] = useState(false);
+    const timer = useRef(null);
+    const show = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        setOpen(true);
+    };
+    const hide = () => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = setTimeout(() => setOpen(false), 80);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { type: "button", "aria-label": label, onPointerEnter: show, onPointerLeave: hide, onFocus: show, onBlur: hide, onClick: (e) => e.stopPropagation(), className: "inline-flex shrink-0 items-center justify-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+                    className, children: children }), _jsx(PopoverContent, { side: side, align: align, avoidCollisions: true, collisionPadding: 8, onOpenAutoFocus: (e) => e.preventDefault(), onCloseAutoFocus: (e) => e.preventDefault(), onPointerEnter: show, onPointerLeave: hide, onClick: (e) => e.stopPropagation(), className: "w-auto min-w-[14rem] max-w-[20rem] rounded-lg p-3 text-xs leading-snug shadow-lg motion-reduce:animate-none", children: content })] }));
+}

package/dist-lib/components/fs-ui/InlineAlert.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+/**
+ * Melding: afgerond vlak met zachte rode of oker achtergrond, icoon links, actie rechts.
+ * Geen technische fouttekst. Op mobiel ingeklapt tot één regel; tik om uit te klappen.
+ */
+export declare function InlineAlert({ tone, children, action, icon, }: {
+    tone?: "fout" | "let_op" | "info";
+    children: ReactNode;
+    action?: ReactNode;
+    icon?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=InlineAlert.d.ts.map

package/dist-lib/components/fs-ui/InlineAlert.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineAlert.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/InlineAlert.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,IAAe,EACf,QAAQ,EACR,MAAM,EACN,IAAI,GACL,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,MAAM,CAAC;IAClC,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,+BAyBA"}

package/dist-lib/components/fs-ui/InlineAlert.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { AlertTriangle, ChevronDown, Info, XCircle } from "lucide-react";
+/**
+ * Melding: afgerond vlak met zachte rode of oker achtergrond, icoon links, actie rechts.
+ * Geen technische fouttekst. Op mobiel ingeklapt tot één regel; tik om uit te klappen.
+ */
+export function InlineAlert({ tone = "let_op", children, action, icon, }) {
+    const [open, setOpen] = useState(false);
+    const kleur = tone === "fout" ? "border-destructive/30 bg-destructive/10 text-foreground"
+        : tone === "let_op" ? "border-transparent bg-warning-soft text-warning-soft-foreground"
+            : "border-border bg-muted/50 text-foreground";
+    const Ico = tone === "fout" ? XCircle : tone === "let_op" ? AlertTriangle : Info;
+    return (_jsxs("div", { role: tone === "fout" ? "alert" : "status", className: "flex items-start gap-3 rounded-lg border px-3 py-2.5 text-sm " + kleur, children: [_jsx("span", { className: "mt-0.5 shrink-0 [&_svg]:h-4 [&_svg]:w-4 " + (tone === "fout" ? "text-destructive" : ""), "aria-hidden": true, children: icon ?? _jsx(Ico, {}) }), _jsx("div", { className: "min-w-0 flex-1 " + (open ? "" : "line-clamp-1 sm:line-clamp-none"), children: children }), _jsx("button", { type: "button", onClick: () => setOpen((o) => !o), "aria-expanded": open, "aria-label": open ? "Melding inklappen" : "Melding uitklappen", className: "inline-flex h-6 w-6 shrink-0 items-center justify-center rounded-lg sm:hidden", children: _jsx(ChevronDown, { className: "h-4 w-4 transition-transform motion-reduce:transition-none " + (open ? "rotate-180" : "") }) }), action && _jsx("div", { className: "shrink-0", children: action })] }));
+}

package/dist-lib/components/fs-ui/KpiRow.d.ts

@@ -0,0 +1,10 @@
+import type { ReactNode } from "react";
+/**
+ * Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet; op mobiel veegbaar.
+ * De eerste tegel staat binnen de paginamarge van 16 px (scroll-padding), nooit tegen de rand.
+ */
+export declare function KpiRow({ children, label }: {
+    children: ReactNode;
+    label?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KpiRow.d.ts.map

package/dist-lib/components/fs-ui/KpiRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiRow.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/KpiRow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,KAAqB,EAAE,EAAE;IAAE,QAAQ,EAAE,SAAS,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BASlG"}

package/dist-lib/components/fs-ui/KpiRow.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Rij KPI-tegels: 4 naast elkaar vanaf desktop, 2 op tablet; op mobiel veegbaar.
+ * De eerste tegel staat binnen de paginamarge van 16 px (scroll-padding), nooit tegen de rand.
+ */
+export function KpiRow({ children, label = "Kerncijfers" }) {
+    return (_jsx("section", { "aria-label": label, className: "-mx-4 flex snap-x snap-mandatory scroll-px-4 gap-3 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:grid sm:grid-cols-2 sm:overflow-visible sm:px-0 sm:pb-0 lg:grid-cols-4 [&::-webkit-scrollbar]:hidden [&>*]:w-[78%] [&>*]:shrink-0 [&>*]:snap-start sm:[&>*]:w-auto", children: children }));
+}

package/dist-lib/components/fs-ui/KpiTile.d.ts

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+export interface KpiTrend {
+    /** Procentuele wijziging t.o.v. de vorige periode (null = geen vergelijking). */
+    pct: number | null;
+    label: string;
+    /** Hoger is beter (omzet) of slechter (actie nodig). */
+    goodWhenUp?: boolean;
+}
+/** KPI-tegel: icoon, label, groot getal, subregel en optionele trend. Alleen weergave. */
+export declare function KpiTile({ title, value, sub, icon, tone, loading, onClick, active, trend, }: {
+    title: string;
+    value: ReactNode;
+    sub?: ReactNode;
+    icon?: ReactNode;
+    tone?: "default" | "warning";
+    loading?: boolean;
+    onClick?: () => void;
+    active?: boolean;
+    trend?: KpiTrend | null;
+}): import("react").JSX.Element;
+//# sourceMappingURL=KpiTile.d.ts.map

package/dist-lib/components/fs-ui/KpiTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KpiTile.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/KpiTile.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIvC,MAAM,WAAW,QAAQ;IACvB,iFAAiF;IACjF,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,wDAAwD;IACxD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAoCD,0FAA0F;AAC1F,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,GAAG,EACH,IAAI,EACJ,IAAgB,EAChB,OAAO,EACP,OAAO,EACP,MAAM,EACN,KAAK,GACN,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,SAAS,CAAC;IACjB,GAAG,CAAC,EAAE,SAAS,CAAC;IAChB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC7B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,CAAC,EAAE,QAAQ,GAAG,IAAI,CAAC;CACzB,+BA4DA"}

package/dist-lib/components/fs-ui/KpiTile.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card, Skeleton } from "@flowselections/core";
+import { ChevronRight, Minus, TrendingDown, TrendingUp } from "lucide-react";
+function Trend({ trend }) {
+    if (trend.pct == null)
+        return null;
+    const flat = Math.abs(trend.pct) < 0.5;
+    const up = trend.pct > 0;
+    const good = flat ? null : up === (trend.goodWhenUp ?? true);
+    const Icon = flat ? Minus : up ? TrendingUp : TrendingDown;
+    const tone = good == null ? "text-muted-foreground" : good ? "text-primary" : "text-destructive";
+    return (_jsxs("span", { className: "inline-flex min-w-0 items-center gap-1 whitespace-nowrap text-xs font-medium tabular-nums " + tone, title: trend.label, children: [_jsx(Icon, { className: "h-3.5 w-3.5", "aria-hidden": true }), flat ? "0%" : `${up ? "+" : ""}${Math.round(trend.pct)}%`, _jsx("span", { className: "truncate font-normal text-muted-foreground", children: trend.label })] }));
+}
+/** Klein trendlijntje van vorige naar huidige periode (alleen weergave). */
+function Spark({ trend }) {
+    if (trend.pct == null)
+        return null;
+    const up = trend.pct > 0.5;
+    const down = trend.pct < -0.5;
+    const good = up || down ? up === (trend.goodWhenUp ?? true) : null;
+    const tone = good == null ? "text-muted-foreground" : good ? "text-primary" : "text-destructive";
+    const y0 = up ? 26 : down ? 6 : 16;
+    const y1 = up ? 6 : down ? 26 : 16;
+    const mid = (y0 + y1) / 2;
+    const d = `M2 ${y0} C 14 ${y0}, 18 ${mid + (up ? 4 : down ? -4 : 0)}, 28 ${mid} S 44 ${mid - (up ? 6 : down ? -6 : 0)}, 50 ${(mid + y1) / 2} S 58 ${y1}, 62 ${y1}`;
+    return (_jsx("svg", { viewBox: "0 0 64 32", className: "hidden h-8 w-16 shrink-0 self-end sm:block " + tone, "aria-hidden": true, children: _jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }));
+}
+/** KPI-tegel: icoon, label, groot getal, subregel en optionele trend. Alleen weergave. */
+export function KpiTile({ title, value, sub, icon, tone = "default", loading, onClick, active, trend, }) {
+    const body = (_jsxs("div", { className: "flex items-center gap-3 sm:gap-4", children: [icon && (_jsx("span", { className: "inline-flex h-10 w-10 sm:h-12 sm:w-12 shrink-0 items-center justify-center rounded-xl [&_svg]:h-5 [&_svg]:w-5 sm:[&_svg]:h-6 sm:[&_svg]:w-6 " +
+                    (tone === "warning" ? "bg-warning-soft text-warning-soft-foreground" : "bg-primary/10 text-primary"), "aria-hidden": true, children: icon })), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("div", { className: "truncate text-[11px] font-semibold uppercase tracking-wider text-muted-foreground", children: title }), _jsx("div", { className: "mt-0.5 text-2xl font-semibold leading-tight tabular-nums text-foreground", children: loading ? _jsx(Skeleton, { className: "h-7 w-24" }) : value }), _jsx("div", { className: "mt-1 flex min-h-4 flex-col gap-0.5 text-xs text-muted-foreground", children: loading ? _jsx(Skeleton, { className: "h-3 w-32" }) : (_jsxs(_Fragment, { children: [_jsx("div", { className: "truncate", children: sub }), trend && _jsx(Trend, { trend: trend })] })) })] }), !loading && trend && _jsx(Spark, { trend: trend }), onClick && tone === "warning" && _jsx(ChevronRight, { className: "h-5 w-5 shrink-0 text-muted-foreground", "aria-hidden": true })] }));
+    return (_jsx(Card, { className: "h-full p-4 sm:p-5 transition-shadow " +
+            (onClick ? "hover:border-ring/50 hover:shadow-md " : "") +
+            (active ? "ring-2 ring-ring" : ""), children: onClick ? (_jsx("div", { role: "button", tabIndex: 0, onClick: onClick, onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onClick();
+                }
+            }, className: "block w-full cursor-pointer rounded-sm text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", children: body })) : (body) }));
+}

package/dist-lib/components/fs-ui/MobilePrimaryAction.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+/**
+ * Primaire actie op mobiel: vaste, schermbrede knop (48 px) onderin met veilige rand.
+ * Verbergt zich vanaf tablet en wanneer `hidden` (bijv. bij een selectiebalk).
+ */
+export declare function MobilePrimaryAction({ children, onClick, hidden, disabled, icon, }: {
+    children: ReactNode;
+    onClick: () => void;
+    hidden?: boolean;
+    disabled?: boolean;
+    icon?: ReactNode;
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=MobilePrimaryAction.d.ts.map

package/dist-lib/components/fs-ui/MobilePrimaryAction.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobilePrimaryAction.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/MobilePrimaryAction.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,QAAQ,EACR,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,GACL,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB,sCAeA"}

package/dist-lib/components/fs-ui/MobilePrimaryAction.js

@@ -0,0 +1,10 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Primaire actie op mobiel: vaste, schermbrede knop (48 px) onderin met veilige rand.
+ * Verbergt zich vanaf tablet en wanneer `hidden` (bijv. bij een selectiebalk).
+ */
+export function MobilePrimaryAction({ children, onClick, hidden, disabled, icon, }) {
+    if (hidden)
+        return null;
+    return (_jsx("div", { className: "fixed inset-x-0 bottom-0 z-30 border-t border-border bg-background/95 p-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] backdrop-blur md:hidden", children: _jsxs("button", { type: "button", onClick: onClick, disabled: disabled, className: "inline-flex h-12 w-full items-center justify-center gap-2 rounded-lg bg-primary text-base font-medium text-primary-foreground shadow-lg transition-opacity active:opacity-90 disabled:opacity-50 [&_svg]:h-4 [&_svg]:w-4", children: [icon, children] }) }));
+}

package/dist-lib/components/fs-ui/NoticeBar.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+/**
+ * NoticeBar naar Verkooporders: één inklapbare balk voor alle meldingen. Ingeklapt
+ * hooguit 2 regels (één per melding), de rest als "+ n meldingen"; uitklappen toont alles.
+ * `items` zijn korte zinnen, nooit lijsten van artikelen.
+ */
+export declare function NoticeBar({ items }: {
+    items: ReactNode[];
+}): import("react").JSX.Element | null;
+//# sourceMappingURL=NoticeBar.d.ts.map

package/dist-lib/components/fs-ui/NoticeBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NoticeBar.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/NoticeBar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD;;;;GAIG;AACH,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,SAAS,EAAE,CAAA;CAAE,sCA0B1D"}

package/dist-lib/components/fs-ui/NoticeBar.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown, Info } from "lucide-react";
+/**
+ * NoticeBar naar Verkooporders: één inklapbare balk voor alle meldingen. Ingeklapt
+ * hooguit 2 regels (één per melding), de rest als "+ n meldingen"; uitklappen toont alles.
+ * `items` zijn korte zinnen, nooit lijsten van artikelen.
+ */
+export function NoticeBar({ items }) {
+    const [open, setOpen] = useState(false);
+    if (items.length === 0)
+        return null;
+    const zichtbaar = open ? items : items.slice(0, 2);
+    const rest = items.length - zichtbaar.length;
+    return (_jsx("div", { role: "status", className: "shrink-0 rounded-lg border border-border bg-warning-soft text-sm text-warning-soft-foreground", children: _jsxs("button", { type: "button", "aria-expanded": open, onClick: () => setOpen((o) => !o), className: "flex w-full items-start gap-2 px-3 py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-lg", children: [_jsx(Info, { className: "mt-0.5 h-4 w-4 shrink-0", "aria-hidden": true }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col", children: [zichtbaar.map((it, i) => (_jsx("span", { className: "min-w-0 " + (open ? "" : "truncate"), children: it }, i))), rest > 0 && _jsxs("span", { className: "font-medium", children: ["+ ", rest, " ", rest === 1 ? "melding" : "meldingen"] })] }), (items.length > 2 || open) && (_jsx(ChevronDown, { className: "ml-auto mt-0.5 h-4 w-4 shrink-0 transition-transform " + (open ? "rotate-180" : ""), "aria-hidden": true }))] }) }));
+}

package/dist-lib/components/fs-ui/PageHeader.d.ts

@@ -0,0 +1,19 @@
+import type { ReactNode } from "react";
+/**
+ * Paginakop exact naar Verkooporders: h1 (20/24 px, 700) met daaronder alleen
+ * "Bijgewerkt hh:mm". Rechts periode, secundaire knoppen en één primaire knop.
+ * Op mobiel staat de kop in een raster: titel links, knoppen (icoon) rechts.
+ */
+export declare function PageHeader({ title, updated, crumb, media, meta, actions, }: {
+    title: ReactNode;
+    /** Meestal <UpdatedAt />. */
+    updated?: ReactNode;
+    /** Kleine terug-link boven de titel (alleen detailpagina's). */
+    crumb?: ReactNode;
+    /** Optioneel beeld links van de titel (alleen detailpagina's). */
+    media?: ReactNode;
+    /** Alleen detailpagina's: vaste kerngegevens onder de titel. */
+    meta?: ReactNode;
+    actions?: ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PageHeader.d.ts.map

package/dist-lib/components/fs-ui/PageHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageHeader.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/PageHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,IAAI,EACJ,OAAO,GACR,EAAE;IACD,KAAK,EAAE,SAAS,CAAC;IACjB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,gEAAgE;IAChE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,kEAAkE;IAClE,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gEAAgE;IAChE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,OAAO,CAAC,EAAE,SAAS,CAAC;CACrB,+BAqBA"}

package/dist-lib/components/fs-ui/PageHeader.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Paginakop exact naar Verkooporders: h1 (20/24 px, 700) met daaronder alleen
+ * "Bijgewerkt hh:mm". Rechts periode, secundaire knoppen en één primaire knop.
+ * Op mobiel staat de kop in een raster: titel links, knoppen (icoon) rechts.
+ */
+export function PageHeader({ title, updated, crumb, media, meta, actions, }) {
+    return (_jsxs("header", { className: "shrink-0 flex flex-col gap-1", children: [crumb && _jsx("div", { className: "text-sm text-muted-foreground", children: crumb }), _jsxs("div", { className: "grid grid-cols-[minmax(0,1fr)_auto] items-center gap-3 sm:flex sm:flex-wrap sm:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-center gap-3", children: [media, _jsxs("div", { className: "min-w-0", children: [_jsx("h1", { className: "truncate text-xl font-bold leading-tight sm:text-2xl tracking-tight text-foreground", children: title }), updated && (_jsx("p", { className: "flex flex-wrap items-center gap-x-2 text-xs text-muted-foreground", "aria-live": "polite", children: updated })), meta && _jsx("div", { className: "mt-2 flex flex-wrap items-center gap-2 text-sm", children: meta })] })] }), actions && _jsx("div", { className: "flex flex-wrap items-center justify-end gap-2", children: actions })] })] }));
+}

package/dist-lib/components/fs-ui/Pagination.d.ts

@@ -0,0 +1,10 @@
+/** Paginering exact naar Verkooporders: "1–25 van 120" links, "Per pagina" en pijlen met "1 / 5" rechts. */
+export declare function Pagination({ page, pageSize, totalCount, onPage, onPageSize, sizes, }: {
+    page: number;
+    pageSize: number;
+    totalCount: number;
+    onPage: (p: number) => void;
+    onPageSize?: (n: number) => void;
+    sizes?: number[];
+}): import("react").JSX.Element;
+//# sourceMappingURL=Pagination.d.ts.map

package/dist-lib/components/fs-ui/Pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.d.ts","sourceRoot":"","sources":["../../../src/components/fs-ui/Pagination.tsx"],"names":[],"mappings":"AAGA,4GAA4G;AAC5G,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,QAAQ,EACR,UAAU,EACV,MAAM,EACN,UAAU,EACV,KAAyB,GAC1B,EAAE;IACD,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5B,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;CAClB,+BAuCA"}

package/dist-lib/components/fs-ui/Pagination.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@flowselections/core";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+/** Paginering exact naar Verkooporders: "1–25 van 120" links, "Per pagina" en pijlen met "1 / 5" rechts. */
+export function Pagination({ page, pageSize, totalCount, onPage, onPageSize, sizes = [10, 25, 50, 100], }) {
+    const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+    return (_jsxs("nav", { "aria-label": "Paginering", className: "shrink-0 flex flex-wrap items-center justify-between gap-3 text-sm text-muted-foreground", children: [_jsx("div", { className: "tabular-nums", children: totalCount === 0
+                    ? "Geen resultaten"
+                    : `${((page - 1) * pageSize + 1).toLocaleString("nl-NL")}–${Math.min(page * pageSize, totalCount).toLocaleString("nl-NL")} van ${totalCount.toLocaleString("nl-NL")}` }), _jsxs("div", { className: "flex items-center gap-3", children: [onPageSize && (_jsxs("div", { className: "hidden items-center gap-2 sm:flex", children: [_jsx("span", { children: "Per pagina" }), _jsxs(Select, { value: String(pageSize), onValueChange: (v) => onPageSize(Number(v)), children: [_jsx(SelectTrigger, { className: "h-8 w-20", "aria-label": "Resultaten per pagina", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: sizes.map((n) => (_jsx(SelectItem, { value: String(n), children: n }, n))) })] })] })), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPage(Math.max(1, page - 1)), disabled: page <= 1, "aria-label": "Vorige pagina", children: _jsx(ChevronLeft, { className: "h-4 w-4" }) }), _jsxs("div", { className: "px-2 text-foreground tabular-nums", "aria-current": "page", children: [page, " / ", totalPages] }), _jsx(Button, { variant: "outline", size: "icon", className: "h-10 w-10 sm:h-8 sm:w-8", onClick: () => onPage(Math.min(totalPages, page + 1)), disabled: page >= totalPages, "aria-label": "Volgende pagina", children: _jsx(ChevronRight, { className: "h-4 w-4" }) })] })] })] }));
+}

package/dist-lib/components/fs-ui/PillTabs.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+export interface PillTab<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+    /** Teller; undefined = geen teller, null = nog laden. */
+    count?: number | null;
+    hint?: string;
+}
+/** StatusTabs exact naar Verkooporders: altijd één regel, scrollt horizontaal met vervaging. */
+export declare function PillTabs<T extends string>({ tabs, value, onChange, label, }: {
+    tabs: PillTab<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    label?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=PillTabs.d.ts.map