@lindaui/blocks 0.4.2 → 0.5.1

package/dist/navigation-hotcrqoq.js

@@ -0,0 +1,115 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Tooltip } from '@lindaui/ui/compound';
+import { cn } from '@lindaui/ui/cn';
+
+function ShellLink({ renderLink, ...props }) {
+    return renderLink ? renderLink(props) : /*#__PURE__*/ jsx("a", {
+        ...props
+    });
+}
+function SidebarNavLink({ item, collapsed, onClick, renderLink }) {
+    const Icon = item.icon;
+    const link = /*#__PURE__*/ jsxs(ShellLink, {
+        "aria-current": item.isActive ? "page" : "false",
+        "aria-label": item.label,
+        className: cn("relative flex items-center gap-3 rounded-lg px-3 py-2.5", "transition-all duration-200 ease-out", "text-muted hover:scale-[1.02] hover:bg-surface-secondary hover:text-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent focus-visible:ring-offset-2", item.isActive ? "bg-accent/10 font-semibold text-accent hover:bg-accent/15" : "", collapsed ? "justify-center px-2" : ""),
+        href: item.href,
+        onClick: (event)=>{
+            if (item.onAction) {
+                event.preventDefault();
+                item.onAction();
+            }
+            onClick?.();
+        },
+        renderLink: renderLink,
+        children: [
+            item.isActive ? /*#__PURE__*/ jsx("div", {
+                className: "absolute top-1/2 left-0 h-5 w-1 -translate-y-1/2 rounded-r-full bg-accent"
+            }) : null,
+            /*#__PURE__*/ jsx(Icon, {
+                className: cn("flex-shrink-0 transition-transform duration-200", "group-hover:scale-110"),
+                size: 18
+            }),
+            collapsed ? null : /*#__PURE__*/ jsx("span", {
+                className: "text-sm",
+                children: item.label
+            })
+        ]
+    });
+    return collapsed ? /*#__PURE__*/ jsxs(Tooltip, {
+        children: [
+            /*#__PURE__*/ jsx(Tooltip.Trigger, {
+                "aria-label": item.label,
+                children: link
+            }),
+            /*#__PURE__*/ jsx(Tooltip.Content, {
+                placement: "right",
+                children: item.label
+            })
+        ]
+    }) : link;
+}
+function BottomNavLink({ item, floating, hasCenterButton, renderLink }) {
+    const Icon = item.icon;
+    return /*#__PURE__*/ jsx(ShellLink, {
+        "aria-current": item.isActive ? "page" : undefined,
+        "aria-label": item.label,
+        className: floating ? "absolute -top-5 left-1/2 -translate-x-1/2" : cn(hasCenterButton ? "flex flex-col items-center justify-center gap-1 px-4 py-2" : "flex flex-col items-center justify-center gap-1 px-3 py-2", "transition-all duration-200 ease-out", hasCenterButton ? "min-w-[60px]" : "min-w-[52px]", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent", item.isActive ? "text-accent" : "text-muted hover:text-foreground active:scale-95"),
+        href: item.href,
+        renderLink: renderLink,
+        children: floating ? /*#__PURE__*/ jsx("div", {
+            className: cn("flex h-14 w-14 items-center justify-center rounded-full", "bg-accent shadow-accent/40 shadow-lg", "ring-4 ring-background", "transition-all duration-200 ease-out", "hover:shadow-accent/50 hover:shadow-xl active:scale-95", item.isActive ? "scale-105" : ""),
+            children: /*#__PURE__*/ jsx(Icon, {
+                className: "text-white",
+                size: 24
+            })
+        }) : /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsx(Icon, {
+                    className: "transition-all duration-200",
+                    size: item.isActive ? 22 : 20
+                }),
+                /*#__PURE__*/ jsx("span", {
+                    className: cn("text-[10px] transition-all duration-200", item.isActive ? "font-semibold" : "font-medium"),
+                    children: item.label
+                })
+            ]
+        })
+    });
+}
+function MobileBottomNavigation({ navItems, isVisiting, label, renderLink }) {
+    const hasCenterButton = navItems.some((item)=>item.isCenterButton);
+    const mobileItems = navItems.filter((item)=>!item.hideOnMobile);
+    const centerItem = mobileItems.find((item)=>item.isCenterButton);
+    const regularItems = mobileItems.filter((item)=>!item.isCenterButton);
+    const link = (item)=>/*#__PURE__*/ jsx(BottomNavLink, {
+            hasCenterButton: hasCenterButton,
+            item: item,
+            renderLink: renderLink
+        }, item.key);
+    return /*#__PURE__*/ jsx("nav", {
+        "aria-label": label,
+        className: hasCenterButton ? cn("fixed right-0 bottom-0 left-0 z-50 border-border border-t backdrop-blur backdrop-saturate-200 lg:hidden dark:border-white/10", isVisiting ? "bg-warning-soft/80 dark:bg-warning/20" : "!bg-transparent") : "fixed right-0 bottom-0 left-0 z-50 border-border border-t bg-background backdrop-blur backdrop-saturate-200 lg:hidden dark:border-white/10",
+        children: /*#__PURE__*/ jsx("div", {
+            className: hasCenterButton ? "relative flex h-16 items-center justify-around px-2" : "flex h-16 items-center justify-around px-2",
+            children: hasCenterButton ? /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    regularItems.slice(0, 2).map(link),
+                    centerItem ? /*#__PURE__*/ jsx(BottomNavLink, {
+                        floating: true,
+                        hasCenterButton: true,
+                        item: centerItem,
+                        renderLink: renderLink
+                    }) : null,
+                    /*#__PURE__*/ jsx("div", {
+                        className: "min-w-[60px]"
+                    }),
+                    regularItems.slice(2, 4).map(link)
+                ]
+            }) : mobileItems.map(link)
+        })
+    });
+}
+
+export { MobileBottomNavigation as M, ShellLink as S, SidebarNavLink as a };

package/dist/save-bar.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface SaveBarProps {
+    dirty: boolean;
+    saving: boolean;
+    form: string;
+    embedded?: boolean;
+    labels: {
+        pending: ReactNode;
+        upToDate: ReactNode;
+        submit: ReactNode;
+    };
+}
+/** Submit an existing form by id without owning its data or persistence. */
+export declare function SaveBar({ dirty, saving, form, embedded, labels }: SaveBarProps): import("react").JSX.Element;
+//# sourceMappingURL=save-bar.d.ts.map

package/dist/save-bar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"save-bar.d.ts","sourceRoot":"","sources":["../src/save-bar.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,OAAO,CAAC;IACf,MAAM,EAAE,OAAO,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QAAE,OAAO,EAAE,SAAS,CAAC;QAAC,QAAQ,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,SAAS,CAAA;KAAE,CAAC;CACxE;AAED,4EAA4E;AAC5E,wBAAgB,OAAO,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,QAAgB,EAAE,MAAM,EAAE,EAAE,YAAY,+BAoBtF"}

package/dist/save-bar.js

@@ -0,0 +1,38 @@
+'use client';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Button, Spinner } from '@lindaui/ui/compound';
+
+/** Submit an existing form by id without owning its data or persistence. */ function SaveBar({ dirty, saving, form, embedded = false, labels }) {
+    return /*#__PURE__*/ jsx("div", {
+        className: embedded ? "sticky bottom-0 z-10 border-border border-t bg-surface px-4 py-3 lg:px-6" : "fixed inset-x-0 bottom-24 z-40 border-border border-y bg-surface px-4 py-3 lg:static lg:border-b-0 lg:px-8",
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "mx-auto flex max-w-4xl items-center justify-between gap-3",
+            children: [
+                /*#__PURE__*/ jsx("p", {
+                    "aria-live": "polite",
+                    className: "text-muted text-sm",
+                    children: dirty ? labels.pending : labels.upToDate
+                }),
+                /*#__PURE__*/ jsx(Button, {
+                    className: "shrink-0 whitespace-nowrap",
+                    form: form,
+                    isDisabled: !dirty || saving,
+                    isPending: saving,
+                    type: "submit",
+                    variant: "primary",
+                    children: ({ isPending })=>/*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                isPending && /*#__PURE__*/ jsx(Spinner, {
+                                    color: "current",
+                                    size: "sm"
+                                }),
+                                labels.submit
+                            ]
+                        })
+                })
+            ]
+        })
+    });
+}
+
+export { SaveBar };

package/dist/scroll-indicators-gvxapogd.js

@@ -0,0 +1,39 @@
+'use client';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { cn } from '@lindaui/ui/cn';
+
+function ScrollIndicators({ scrollRef }) {
+    const [showLeft, setShowLeft] = useState(false);
+    const [showRight, setShowRight] = useState(false);
+    useEffect(()=>{
+        const element = scrollRef.current;
+        if (!element) return;
+        const checkScroll = ()=>{
+            const { scrollLeft, scrollWidth, clientWidth } = element;
+            setShowLeft(scrollLeft > 10);
+            setShowRight(scrollLeft < scrollWidth - clientWidth - 10);
+        };
+        checkScroll();
+        element.addEventListener("scroll", checkScroll);
+        window.addEventListener("resize", checkScroll);
+        return ()=>{
+            element.removeEventListener("scroll", checkScroll);
+            window.removeEventListener("resize", checkScroll);
+        };
+    }, [
+        scrollRef
+    ]);
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: cn("pointer-events-none absolute top-0 left-0 z-10 h-full w-12 bg-gradient-to-r from-background to-transparent transition-opacity duration-300", showLeft ? "opacity-100" : "opacity-0")
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: cn("pointer-events-none absolute top-0 right-0 z-10 h-full w-12 bg-gradient-to-l from-background to-transparent transition-opacity duration-300", showRight ? "opacity-100" : "opacity-0")
+            })
+        ]
+    });
+}
+
+export { ScrollIndicators as S };

package/dist/settings-layout.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+export interface SettingsLayoutSection<Id extends string = string> {
+    id: Id;
+    label: string;
+    icon?: ReactNode;
+}
+export interface SettingsLayoutProps<Id extends string = string> {
+    sections: readonly SettingsLayoutSection<Id>[];
+    selected: Id;
+    onSelect: (id: Id) => void;
+    panels: Record<Id, ReactNode>;
+    footer?: ReactNode;
+    navigationLabel: string;
+    title?: ReactNode;
+    compact?: boolean;
+    idPrefix?: string;
+}
+/** Responsive section navigation with mounted, hidden panels and a footer slot. */
+export declare function SettingsLayout<Id extends string>({ sections, panels, selected, onSelect, footer, navigationLabel, title, compact, idPrefix, }: SettingsLayoutProps<Id>): import("react").JSX.Element;
+//# sourceMappingURL=settings-layout.d.ts.map

package/dist/settings-layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"settings-layout.d.ts","sourceRoot":"","sources":["../src/settings-layout.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,qBAAqB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM;IAC/D,EAAE,EAAE,EAAE,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,SAAS,CAAC;CAClB;AAED,MAAM,WAAW,mBAAmB,CAAC,EAAE,SAAS,MAAM,GAAG,MAAM;IAC7D,QAAQ,EAAE,SAAS,qBAAqB,CAAC,EAAE,CAAC,EAAE,CAAC;IAC/C,QAAQ,EAAE,EAAE,CAAC;IACb,QAAQ,EAAE,CAAC,EAAE,EAAE,EAAE,KAAK,IAAI,CAAC;IAC3B,MAAM,EAAE,MAAM,CAAC,EAAE,EAAE,SAAS,CAAC,CAAC;IAC9B,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,mFAAmF;AACnF,wBAAgB,cAAc,CAAC,EAAE,SAAS,MAAM,EAAE,EAChD,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,eAAe,EACf,KAAK,EACL,OAAe,EACf,QAAqB,GACtB,EAAE,mBAAmB,CAAC,EAAE,CAAC,+BA2CzB"}

package/dist/settings-layout.js

@@ -0,0 +1,56 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '@lindaui/ui/compound';
+import { cn } from '@lindaui/ui/cn';
+
+/** Responsive section navigation with mounted, hidden panels and a footer slot. */ function SettingsLayout({ sections, panels, selected, onSelect, footer, navigationLabel, title, compact = false, idPrefix = "settings" }) {
+    return /*#__PURE__*/ jsxs("div", {
+        className: cn("mx-auto w-full max-w-5xl", compact ? "h-full p-0" : "p-4 pb-28 lg:p-8"),
+        children: [
+            title ? /*#__PURE__*/ jsx("h1", {
+                className: "mb-6 font-semibold text-2xl tracking-tight",
+                children: title
+            }) : null,
+            /*#__PURE__*/ jsxs("div", {
+                className: cn("overflow-hidden rounded-2xl border border-border bg-surface lg:grid lg:grid-cols-[220px_minmax(0,1fr)]", compact ? "h-full min-h-0 rounded-none border-0" : "lg:min-h-[620px]"),
+                children: [
+                    /*#__PURE__*/ jsx("nav", {
+                        "aria-label": navigationLabel,
+                        className: "min-h-0 min-w-0 overflow-x-auto border-border border-b bg-surface-secondary p-2 lg:overflow-y-auto lg:border-r lg:border-b-0 lg:p-3",
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "flex w-max gap-1 lg:w-full lg:flex-col",
+                            children: sections.map(({ id, icon, label })=>/*#__PURE__*/ jsxs(Button, {
+                                    "aria-controls": `${idPrefix}-${id}`,
+                                    "aria-pressed": selected === id,
+                                    className: `shrink-0 justify-start gap-2 whitespace-nowrap rounded-lg px-3 text-sm lg:w-full ${selected === id ? "bg-default font-semibold text-foreground" : "text-muted"}`,
+                                    onPress: ()=>onSelect(id),
+                                    variant: "ghost",
+                                    children: [
+                                        icon,
+                                        label
+                                    ]
+                                }, id))
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex min-h-0 min-w-0 flex-col",
+                        children: [
+                            /*#__PURE__*/ jsx("div", {
+                                className: "min-h-0 flex-1 overflow-y-auto p-5 lg:p-8",
+                                children: sections.map(({ id, label })=>/*#__PURE__*/ jsx("section", {
+                                        "aria-label": label,
+                                        hidden: selected !== id,
+                                        id: `${idPrefix}-${id}`,
+                                        children: panels[id]
+                                    }, id))
+                            }),
+                            footer
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+export { SettingsLayout };

package/dist/source-selector.d.ts

@@ -0,0 +1,18 @@
+import type { ReactNode } from "react";
+export interface SourceSelectorOption<Source extends string = string> {
+    key: Source;
+    label: string;
+    triggerLabel?: string;
+    icon?: ReactNode;
+    triggerIcon?: ReactNode;
+}
+export interface SourceSelectorProps<Source extends string = string> {
+    source: Source;
+    options: readonly SourceSelectorOption<Source>[];
+    onSourceChange: (source: Source) => void;
+    isLoading?: boolean;
+    ariaLabel?: string;
+}
+/** Controlled selection; option labels and icons are supplied by the product. */
+export declare function SourceSelector<Source extends string = string>({ source, options, onSourceChange, isLoading, ariaLabel, }: SourceSelectorProps<Source>): import("react").JSX.Element;
+//# sourceMappingURL=source-selector.d.ts.map

package/dist/source-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"source-selector.d.ts","sourceRoot":"","sources":["../src/source-selector.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,oBAAoB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IAClE,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,WAAW,CAAC,EAAE,SAAS,CAAC;CACzB;AAED,MAAM,WAAW,mBAAmB,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM;IACjE,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,SAAS,oBAAoB,CAAC,MAAM,CAAC,EAAE,CAAC;IACjD,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iFAAiF;AACjF,wBAAgB,cAAc,CAAC,MAAM,SAAS,MAAM,GAAG,MAAM,EAAE,EAC7D,MAAM,EACN,OAAO,EACP,cAAc,EACd,SAAS,EACT,SAA2B,GAC5B,EAAE,mBAAmB,CAAC,MAAM,CAAC,+BAyC7B"}

package/dist/source-selector.js

@@ -0,0 +1,59 @@
+'use client';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Dropdown, Button, Spinner, Label } from '@lindaui/ui/compound';
+import { ChevronDown } from 'lucide-react';
+
+/** Controlled selection; option labels and icons are supplied by the product. */ function SourceSelector({ source, options, onSourceChange, isLoading, ariaLabel = "Change source" }) {
+    const current = options.find((option)=>option.key === source);
+    return /*#__PURE__*/ jsxs(Dropdown, {
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                className: "h-6 min-w-0 gap-1 px-2 text-[10px]",
+                isPending: isLoading,
+                size: "sm",
+                variant: "tertiary",
+                children: ({ isPending })=>/*#__PURE__*/ jsxs(Fragment, {
+                        children: [
+                            isPending ? /*#__PURE__*/ jsx(Spinner, {
+                                color: "current",
+                                size: "sm"
+                            }) : current?.triggerIcon ?? current?.icon,
+                            current?.triggerLabel ?? current?.label ?? source,
+                            /*#__PURE__*/ jsx(ChevronDown, {
+                                size: 12
+                            })
+                        ]
+                    })
+            }),
+            /*#__PURE__*/ jsx(Dropdown.Popover, {
+                className: "rounded-[14px]",
+                children: /*#__PURE__*/ jsx(Dropdown.Menu, {
+                    "aria-label": ariaLabel,
+                    className: "[&_[data-slot=menu-item]]:rounded-lg",
+                    onAction: (key)=>{
+                        const option = options.find((item)=>item.key === key);
+                        if (option) onSourceChange(option.key);
+                    },
+                    selectedKeys: [
+                        source
+                    ],
+                    selectionMode: "single",
+                    children: options.map((option)=>/*#__PURE__*/ jsxs(Dropdown.Item, {
+                            className: "text-sm",
+                            id: option.key,
+                            textValue: option.label,
+                            children: [
+                                /*#__PURE__*/ jsx(Dropdown.ItemIndicator, {}),
+                                option.icon,
+                                /*#__PURE__*/ jsx(Label, {
+                                    children: option.label
+                                })
+                            ]
+                        }, option.key))
+                })
+            })
+        ]
+    });
+}
+
+export { SourceSelector };

package/dist/status-distribution-chart-oucedzv7.js

@@ -0,0 +1,87 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { ResponsiveContainer, BarChart, CartesianGrid, XAxis, YAxis, Tooltip, Bar, Cell } from 'recharts';
+
+function StatusDistributionChart({ data, emptyLabel, valueLabel, height = 220 }) {
+    const chartData = [
+        ...data
+    ].sort((a, b)=>b.count - a.count);
+    const formatTooltip = useCallback((value)=>[
+            value,
+            valueLabel
+        ], [
+        valueLabel
+    ]);
+    if (!chartData.length) return /*#__PURE__*/ jsx("p", {
+        className: "py-8 text-center text-muted text-sm",
+        children: emptyLabel
+    });
+    return /*#__PURE__*/ jsx(ResponsiveContainer, {
+        height: height,
+        width: "100%",
+        children: /*#__PURE__*/ jsxs(BarChart, {
+            data: chartData,
+            layout: "vertical",
+            margin: {
+                bottom: 0,
+                left: 0,
+                right: 16,
+                top: 0
+            },
+            children: [
+                /*#__PURE__*/ jsx(CartesianGrid, {
+                    horizontal: false,
+                    stroke: "var(--border)",
+                    strokeDasharray: "3 3"
+                }),
+                /*#__PURE__*/ jsx(XAxis, {
+                    axisLine: false,
+                    tick: {
+                        fill: "var(--muted)",
+                        fontSize: 11
+                    },
+                    tickLine: false,
+                    type: "number"
+                }),
+                /*#__PURE__*/ jsx(YAxis, {
+                    axisLine: false,
+                    dataKey: "label",
+                    tick: {
+                        fill: "var(--muted)",
+                        fontSize: 11
+                    },
+                    tickLine: false,
+                    type: "category",
+                    width: 110
+                }),
+                /*#__PURE__*/ jsx(Tooltip, {
+                    contentStyle: {
+                        backgroundColor: "var(--surface)",
+                        border: "1px solid var(--border)",
+                        borderRadius: "8px",
+                        fontSize: "12px"
+                    },
+                    cursor: {
+                        fill: "var(--surface-secondary)"
+                    },
+                    formatter: formatTooltip
+                }),
+                /*#__PURE__*/ jsx(Bar, {
+                    dataKey: "count",
+                    radius: [
+                        0,
+                        4,
+                        4,
+                        0
+                    ],
+                    children: chartData.map((entry)=>/*#__PURE__*/ jsx(Cell, {
+                            fill: entry.color
+                        }, entry.key))
+                })
+            ]
+        })
+    });
+}
+
+export { StatusDistributionChart as S };

package/dist/status-filters.d.ts

@@ -0,0 +1,12 @@
+import { type BadgeColor } from "@lindaui/ui/compat";
+export interface StatusFiltersProps {
+    availableStatuses: string[];
+    colors?: Record<string, BadgeColor>;
+    counts?: Record<string, number>;
+    labels?: Record<string, string>;
+    onStatusToggle: (status: string) => void;
+    selectedStatuses: string[];
+}
+/** Controlled status chips; labels, colors and counts belong to the consumer. */
+export declare function StatusFilters({ availableStatuses, selectedStatuses, onStatusToggle, counts, labels, colors }: StatusFiltersProps): import("react").JSX.Element;
+//# sourceMappingURL=status-filters.d.ts.map

package/dist/status-filters.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status-filters.d.ts","sourceRoot":"","sources":["../src/status-filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAE5D,MAAM,WAAW,kBAAkB;IACjC,iBAAiB,EAAE,MAAM,EAAE,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,cAAc,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,gBAAgB,EAAE,MAAM,EAAE,CAAC;CAC5B;AAED,iFAAiF;AACjF,wBAAgB,aAAa,CAAC,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,kBAAkB,+BAahI"}

package/dist/status-filters.js

@@ -0,0 +1,31 @@
+'use client';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Badge } from '@lindaui/ui/compat';
+
+/** Controlled status chips; labels, colors and counts belong to the consumer. */ function StatusFilters({ availableStatuses, selectedStatuses, onStatusToggle, counts, labels, colors }) {
+    const handleToggle = (status)=>()=>onStatusToggle(status);
+    return /*#__PURE__*/ jsx("div", {
+        className: "flex flex-wrap gap-2",
+        children: availableStatuses.map((status)=>{
+            const isSelected = selectedStatuses.includes(status);
+            const count = counts?.[status] ?? 0;
+            return /*#__PURE__*/ jsx("button", {
+                "aria-pressed": isSelected,
+                className: "cursor-pointer transition-opacity hover:opacity-80",
+                onClick: handleToggle(status),
+                type: "button",
+                children: /*#__PURE__*/ jsxs(Badge, {
+                    color: colors?.[status] ?? "default",
+                    size: "sm",
+                    variant: isSelected ? "solid" : "flat",
+                    children: [
+                        labels?.[status] ?? status,
+                        count > 0 ? ` (${count})` : ""
+                    ]
+                })
+            }, status);
+        })
+    });
+}
+
+export { StatusFilters };

package/dist/stepper.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+export interface StepperProps {
+    /** Presentation only: the app supplies its own step/completion calculation. */
+    value: number;
+    label: string;
+    stepLabel?: ReactNode;
+    description?: ReactNode;
+    complete?: boolean;
+    variant?: "steps" | "compact";
+    className?: string;
+    formatValue?: (value: number) => ReactNode;
+}
+/** The progress presentation shared by onboarding steps and compact connection wizards. */
+export declare function Stepper({ value, label, stepLabel, description, complete, variant, className, formatValue, }: StepperProps): import("react").JSX.Element;
+//# sourceMappingURL=stepper.d.ts.map

package/dist/stepper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","sourceRoot":"","sources":["../src/stepper.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,MAAM,WAAW,YAAY;IAC3B,+EAA+E;IAC/E,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAC9B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,SAAS,CAAC;CAC5C;AAED,2FAA2F;AAC3F,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,SAAS,EACT,WAAW,EACX,QAAgB,EAChB,OAAiB,EACjB,SAAS,EACT,WAAsD,GACvD,EAAE,YAAY,+BAmBd"}

package/dist/stepper.js

@@ -0,0 +1,42 @@
+'use client';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ProgressBar } from '@lindaui/ui/compound';
+
+/** The progress presentation shared by onboarding steps and compact connection wizards. */ function Stepper({ value, label, stepLabel, description, complete = false, variant = "steps", className, formatValue = (progress)=>`${Math.round(progress)}%` }) {
+    const progress = Number.isFinite(value) ? Math.max(0, Math.min(100, value)) : 0;
+    const compact = variant === "compact";
+    return /*#__PURE__*/ jsxs("div", {
+        className: className ?? (compact ? "mx-auto max-w-xs space-y-2" : "mb-6"),
+        children: [
+            !compact && /*#__PURE__*/ jsxs("div", {
+                className: "mb-2 flex items-center justify-between font-bold text-muted text-xs uppercase tracking-widest",
+                children: [
+                    /*#__PURE__*/ jsx("span", {
+                        children: stepLabel
+                    }),
+                    /*#__PURE__*/ jsx("span", {
+                        children: formatValue(progress)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(ProgressBar, {
+                "aria-label": label,
+                color: complete ? "success" : "accent",
+                size: "sm",
+                value: progress,
+                children: /*#__PURE__*/ jsx(ProgressBar.Track, {
+                    className: compact ? undefined : "rounded-full",
+                    children: /*#__PURE__*/ jsx(ProgressBar.Fill, {
+                        className: compact ? undefined : "rounded-full"
+                    })
+                })
+            }),
+            description && /*#__PURE__*/ jsx("p", {
+                className: "text-muted text-xs",
+                children: description
+            })
+        ]
+    });
+}
+
+export { Stepper };