@manta-eu/react 0.1.0

package/dist/components/slider/index.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { times } from "ramda";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+const sliderVariants = tv({
+    slots: {
+        root: [
+            "group relative flex w-full touch-none select-none items-center",
+            "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44",
+            "data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        ],
+        track: [
+            "relative grow overflow-hidden rounded-full bg-accent",
+            "data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5",
+        ],
+        range: ["absolute bg-primary", "data-[orientation=horizontal]:h-full", "data-[orientation=vertical]:w-full"],
+        thumb: [
+            "block size-4 shrink-0 rounded-full bg-secondary shadow-sm transition-[box-shadow,background-color]",
+            "hover:ring-4 hover:ring-active-border/25",
+            "focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-active-border/25",
+            "group-data-[disabled]:pointer-events-none group-data-[disabled]:bg-disabled",
+        ],
+    },
+});
+export function Slider(props) {
+    const { className, thumbProps, ...restProps } = props;
+    const { root, track, range, thumb } = sliderVariants();
+    const thumbCount = restProps.value?.length ?? restProps.defaultValue?.length ?? 1;
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", className: cn(root(), className), ...restProps, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: track(), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: range() }) }), times((index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", ...thumbProps?.[index], className: cn(thumb(), thumbProps?.[index]?.className) }, index)), thumbCount)] }));
+}

package/dist/components/status/index.d.ts

@@ -0,0 +1,38 @@
+import type { HTMLAttributes } from "react";
+import { type VariantPropsOf } from "#style";
+export declare const statusConfig: {
+    base: string;
+    slots: {
+        icon: string;
+        label: string;
+    };
+    variants: {
+        variant: {
+            success: string;
+            warning: string;
+            error: string;
+            neutral: string;
+        };
+        placement: {
+            left: {
+                icon: string;
+                label: string;
+            };
+            right: {
+                icon: string;
+                label: string;
+            };
+        };
+    };
+    defaultVariants: {
+        readonly placement: "left";
+        readonly variant: "success";
+    };
+};
+export type StatusVariant = VariantPropsOf<typeof statusConfig>["variant"];
+export declare const Status: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
+    label?: string;
+    variant?: StatusVariant;
+    placement?: VariantPropsOf<typeof statusConfig>["placement"];
+} & import("react").RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/status/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/status/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,OAAO,EAAM,KAAK,cAAc,EAAE,MAAM,QAAQ,CAAC;AAEjD,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAUF,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,SAAS,CAAC,CAAC;AAQ3E,eAAO,MAAM,MAAM;YALT,MAAM;cACJ,aAAa;gBACX,cAAc,CAAC,OAAO,YAAY,CAAC,CAAC,WAAW,CAAC;kDAkB5D,CAAC"}

package/dist/components/status/index.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+export const statusConfig = {
+    base: "flex items-center gap-1.5 typography-caption",
+    slots: {
+        icon: "",
+        label: "typography-caption",
+    },
+    variants: {
+        variant: {
+            success: "[&_[data-slot=icon]>svg]:fill-success-foreground",
+            warning: "[&_[data-slot=icon]>svg]:fill-warning-foreground",
+            error: "[&_[data-slot=icon]>svg]:fill-error-foreground",
+            neutral: "[&_[data-slot=icon]>svg]:fill-muted-foreground",
+        },
+        placement: {
+            left: {
+                icon: "order-1",
+                label: "order-2",
+            },
+            right: {
+                icon: "order-2",
+                label: "order-1",
+            },
+        },
+    },
+    defaultVariants: {
+        placement: "left",
+        variant: "success",
+    },
+};
+const statusVariants = tv(statusConfig);
+const EllipseIcon = () => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none", children: _jsx("circle", { cx: "4", cy: "4", r: "4" }) }));
+export const Status = forwardRef((props, ref) => {
+    const { variant, placement, label, className, ...restProps } = props;
+    const { base, icon, label: labelSlot } = statusVariants({ variant, placement });
+    return (_jsxs("div", { ref: ref, className: cn(base(), className), ...restProps, children: [_jsx("span", { "data-slot": "icon", "aria-hidden": "true", className: icon(), children: _jsx(EllipseIcon, {}) }), _jsx("span", { "data-slot": "label", className: labelSlot(), children: label })] }));
+});
+Status.displayName = "Status";

package/dist/components/stepped-progress/index.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentProps } from "react";
+export type SteppedProgressProps = Omit<ComponentProps<"div">, "role" | "aria-valuenow"> & {
+    currentStep: number;
+    totalSteps: number;
+    label?: string;
+    hideLabel?: boolean;
+};
+export declare function SteppedProgress(props: SteppedProgressProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/stepped-progress/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stepped-progress/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,GAAG;IACzF,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,2CAsC1D"}

package/dist/components/stepped-progress/index.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "#style";
+export function SteppedProgress(props) {
+    const { currentStep, totalSteps, label, hideLabel = false, className, ...rest } = props;
+    const total = Math.max(0, Math.trunc(totalSteps));
+    const current = Math.min(Math.max(0, Math.trunc(currentStep)), total);
+    const resolvedLabel = label ?? `Step ${current} of ${total}`;
+    return (_jsxs("div", { "data-slot": "stepped-progress", role: "progressbar", "aria-valuemin": 0, "aria-valuemax": total, "aria-valuenow": current, "aria-valuetext": resolvedLabel, className: cn("flex items-center gap-2", className), ...rest, children: [!hideLabel && (_jsx("span", { "data-slot": "stepped-progress-label", className: "typography-caption-medium whitespace-nowrap", children: resolvedLabel })), _jsx("div", { "data-slot": "stepped-progress-track", className: "flex w-[88px] items-center gap-1", children: Array.from({ length: total }, (_, index) => {
+                    const isCompleted = index < current;
+                    return (_jsx("div", { "data-slot": "stepped-progress-segment", "data-completed": isCompleted, className: cn("h-1.5 min-w-px flex-1 rounded-full", isCompleted ? "bg-success-foreground" : "bg-success") }, index));
+                }) })] }));
+}

package/dist/components/switch/index.d.ts

@@ -0,0 +1,9 @@
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import type { ComponentProps } from "react";
+export type SwitchProps = ComponentProps<typeof SwitchPrimitive.Root> & {
+    label?: string;
+    description?: string;
+    containerClassName?: string;
+};
+export declare const Switch: import("react").ForwardRefExoticComponent<Omit<SwitchProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/switch/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/switch/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,eAAe,MAAM,wBAAwB,CAAC;AAC1D,OAAO,KAAK,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAuBxD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B,CAAC;AAEF,eAAO,MAAM,MAAM,wHAuCjB,CAAC"}

package/dist/components/switch/index.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef, useId } from "react";
+import { tv } from "tailwind-variants";
+import { cn } from "#style";
+const switchVariants = tv({
+    slots: {
+        root: [
+            "inline-flex h-6 w-10.5 shrink-0 items-center rounded-full border-2 border-transparent transition-colors",
+            "focus-visible:border-active-border/25 focus:border-active-border/25",
+            "bg-accent",
+            "data-[value=checked]:bg-primary",
+            "data-[value=unchecked]:bg-muted",
+            "disabled:cursor-not-allowed disabled:bg-disabled",
+            "cursor-pointer",
+        ],
+        thumb: [
+            "pointer-events-none block size-5 rounded-full bg-card ring-0",
+            "transition-transform data-[value=checked]:translate-x-4.5 data-[value=unchecked]:translate-x-0",
+        ],
+    },
+});
+export const Switch = forwardRef(function Switch(props, ref) {
+    const { className, containerClassName, id: idProp, label, description, ...restProps } = props;
+    const { root, thumb } = switchVariants();
+    const labelId = useId();
+    const id = idProp ?? labelId;
+    const value = restProps.checked ? "checked" : "unchecked";
+    const switchEl = (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-value": value, className: cn(root(), className), ref: ref, id: id, "aria-labelledby": label ? labelId : undefined, ...restProps, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", "data-value": value, className: thumb() }) }));
+    if (label ?? description) {
+        return (_jsxs("div", { className: cn("inline-flex flex-row gap-4 items-center flex-wrap", containerClassName), children: [_jsxs("div", { className: "flex-1 flex flex-col gap-2", children: [label && (_jsx("label", { htmlFor: id, className: "typography-small-semibold", children: label })), description && _jsx("p", { className: "typography-tiny text-muted-foreground", children: description })] }), switchEl] }));
+    }
+    return switchEl;
+});
+Switch.displayName = SwitchPrimitive.Root.displayName;

package/dist/components/table/index.d.ts

@@ -0,0 +1,75 @@
+import type { Cell, Column, Row, Table as TableInstance } from "@tanstack/react-table";
+import type { ComponentProps, HTMLAttributes, ReactNode, RefObject } from "react";
+export { TableColumnRearrangePopover, type ColumnRearrangeDefaultState } from "./table-column-rearrange-popover.js";
+export { createTableConfig } from "./table-config.js";
+export { useSelectionColumn, type SelectionColumnOptions } from "./selection-column.js";
+export { getCommonPinnedColumnStyles, getPinnedColumnInfo, type CombinedSortOption } from "./table-utils.js";
+export { useMaxTableRows } from "./use-max-table-rows.js";
+export { useTableState, type UseTableStateOptions } from "./use-table-state.js";
+export declare function Table({ className, ...props }: ComponentProps<"table">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHeader({ className, ...props }: ComponentProps<"thead">): import("react/jsx-runtime").JSX.Element;
+export declare function TableBody({ className, ...props }: ComponentProps<"tbody">): import("react/jsx-runtime").JSX.Element;
+export declare function TableFooter({ className, ...props }: ComponentProps<"tfoot">): import("react/jsx-runtime").JSX.Element;
+export declare function TableRow({ className, ...props }: ComponentProps<"tr">): import("react/jsx-runtime").JSX.Element;
+export declare function TableHead({ className, ...props }: ComponentProps<"th">): import("react/jsx-runtime").JSX.Element;
+export declare function TableCell({ className, ...props }: ComponentProps<"td">): import("react/jsx-runtime").JSX.Element;
+export declare function TableCaption({ className, ...props }: ComponentProps<"caption">): import("react/jsx-runtime").JSX.Element;
+export declare enum SortingHandlerPlacement {
+    LEFT = "left",
+    RIGHT = "right"
+}
+declare module "@tanstack/react-table" {
+    interface ColumnMeta<TData, TValue> {
+        /**
+         * Placement of the sorting handler relative to the cell header
+         * @default SortingHandlerPlacement.RIGHT
+         */
+        sortingHandlerPlacement?: "left" | "right";
+        type?: "number";
+        className?: string;
+        /** Opts the column out of the blanket `max-w-56` cap, which no `size` can raise. */
+        wide?: boolean;
+    }
+}
+export declare function CustomTableCell<TData, TValue>({ cell }: {
+    cell: Cell<TData, TValue>;
+}): import("react/jsx-runtime").JSX.Element;
+export type NumberCellProps<TData, TValue> = HTMLAttributes<HTMLDivElement> & {
+    cell: Cell<TData, TValue>;
+};
+export declare function NumberCell<TData, TValue>({ cell, className, ...restProps }: NumberCellProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export type TColumnHeaderProps<TData, TValue> = {
+    column: Column<TData, TValue>;
+    children: ReactNode;
+};
+export declare function ColumnHeader<TData, TValue>({ column, children }: TColumnHeaderProps<TData, TValue>): import("react/jsx-runtime").JSX.Element;
+export type DataTableBaseProps<TData> = HTMLAttributes<HTMLDivElement> & {
+    table: TableInstance<TData>;
+    ref?: RefObject<HTMLDivElement>;
+    isLoading?: boolean;
+    isRefetching?: boolean;
+    noResultsMessage?: string;
+    headerClassName?: string;
+    bodyClassName?: string;
+    renderRow?: (row: Row<TData>) => ReactNode;
+    rowClassName?: (row: Row<TData>) => string | undefined;
+    isRowClickable?: (row: Row<TData>) => boolean;
+};
+export type DataTableWithRowClick<TData> = DataTableBaseProps<TData> & {
+    onRowClick: (row: Row<TData>) => void;
+    rowHref?: never;
+};
+export type DataTableWithRowHref<TData> = DataTableBaseProps<TData> & {
+    onRowClick?: never;
+    rowHref: (row: Row<TData>) => string;
+};
+export type DataTableWithoutRowInteraction<TData> = DataTableBaseProps<TData> & {
+    onRowClick?: never;
+    rowHref?: never;
+};
+export type DataTableProps<TData> = DataTableWithRowClick<TData> | DataTableWithRowHref<TData> | DataTableWithoutRowInteraction<TData>;
+export declare function DataTable<TData>(props: DataTableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export type { TableColumnRearrangePopoverProps, WithClassName } from "./table-column-rearrange-popover.js";
+export type { TableConfigProps } from "./table-config.js";
+export type { PinnedColumnInfo } from "./table-utils.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/table/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/table/index.tsx"],"names":[],"mappings":"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"}

package/dist/components/table/index.js

@@ -0,0 +1,116 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { flexRender } from "@tanstack/react-table";
+import { ChevronDown, ChevronsUpDown, ChevronUp } from "lucide-react";
+import { match } from "ts-pattern";
+import { getCommonPinnedColumnStyles } from "./table-utils.js";
+import { Button } from "#components/button/index";
+import { Skeleton } from "#components/skeleton/index";
+import { cn } from "#style";
+export { TableColumnRearrangePopover } from "./table-column-rearrange-popover.js";
+export { createTableConfig } from "./table-config.js";
+export { useSelectionColumn } from "./selection-column.js";
+export { getCommonPinnedColumnStyles, getPinnedColumnInfo } from "./table-utils.js";
+export { useMaxTableRows } from "./use-max-table-rows.js";
+export { useTableState } from "./use-table-state.js";
+export function Table({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom typography-small", className), ...props }) }));
+}
+export function TableHeader({ className, ...props }) {
+    return _jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b bg-faint", className), ...props });
+}
+export function TableBody({ className, ...props }) {
+    return _jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props });
+}
+export function TableFooter({ className, ...props }) {
+    return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("bg-faint border-t typography-small-medium [&>tr]:last:border-b-0", className), ...props }));
+}
+export function TableRow({ className, ...props }) {
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("bg-card hover:bg-muted data-[state=selected]:bg-muted border-b transition-colors text-default-foreground [&>td[data-is-pinned]]:bg-card [&>td[data-is-pinned]]:transition-colors [&>td[data-is-pinned]]:group-hover:bg-muted", className), ...props }));
+}
+export function TableHead({ className, ...props }) {
+    return (_jsx("th", { "data-slot": "table-head", className: cn("bg-faint text-muted-foreground h-10 px-2 text-left align-middle typography-small-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px] data-is-pinned:bg-faint", className), ...props }));
+}
+export function TableCell({ className, ...props }) {
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-4 not-first:px-3 py-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
+}
+export function TableCaption({ className, ...props }) {
+    return (_jsx("caption", { "data-slot": "table-caption", className: cn("text-muted-foreground mt-4 typography-small", className), ...props }));
+}
+export var SortingHandlerPlacement;
+(function (SortingHandlerPlacement) {
+    SortingHandlerPlacement["LEFT"] = "left";
+    SortingHandlerPlacement["RIGHT"] = "right";
+})(SortingHandlerPlacement || (SortingHandlerPlacement = {}));
+export function CustomTableCell({ cell }) {
+    const columnType = cell.column.columnDef.meta?.type;
+    const pinningStyles = getCommonPinnedColumnStyles(cell.column);
+    return (_jsx(TableCell, { className: cn("h-12", cell.column.columnDef.meta?.wide ? "max-w-none" : "max-w-56", cell.column.columnDef.meta?.className), "data-is-pinned": cell.column.getIsPinned() ? true : undefined, style: pinningStyles, children: match(columnType)
+            .with("number", () => _jsx(NumberCell, { cell: cell }))
+            .otherwise(() => flexRender(cell.column.columnDef.cell, cell.getContext())) }));
+}
+export function NumberCell({ cell, className, ...restProps }) {
+    return (_jsx("div", { className: cn("text-right text-muted-foreground", className), ...restProps, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }));
+}
+export function ColumnHeader({ column, children }) {
+    const isNumberColumn = column.columnDef.meta?.type === "number";
+    const isSorted = column.getIsSorted();
+    const className = cn("typography-caption-medium flex gap-0.5 text-muted-foreground items-center group/sort-header", isNumberColumn && "justify-end", column.getCanSort() && "cursor-pointer");
+    const placement = isNumberColumn
+        ? SortingHandlerPlacement.LEFT
+        : (column.columnDef.meta?.sortingHandlerPlacement ?? SortingHandlerPlacement.RIGHT);
+    const sortButton = (_jsx(Button, { "aria-label": isSorted === "asc" ? "Sort Descending" : "Sort Ascending", variant: "ghost", className: cn("size-4!", !isSorted && "opacity-0 group-hover/sort-header:opacity-100 transition-opacity"), tabIndex: !isSorted ? -1 : undefined, "aria-hidden": !isSorted ? true : undefined, iconOnly: true, size: "xs", icon: isSorted === "asc" ? ChevronUp : isSorted === "desc" ? ChevronDown : ChevronsUpDown }));
+    return (_jsxs("div", { className: className, onClick: () => column.toggleSorting(isSorted === "asc"), children: [placement === SortingHandlerPlacement.LEFT ? sortButton : null, children, placement === SortingHandlerPlacement.RIGHT ? sortButton : null] }));
+}
+function columnSizingHandler(thElement, table, column) {
+    if (!thElement)
+        return;
+    if (table.getState().columnSizing[column.id] === undefined ||
+        table.getState().columnSizing[column.id] !== thElement.getBoundingClientRect().width) {
+        table.setColumnSizing((prevSizes) => ({
+            ...prevSizes,
+            [column.id]: thElement.getBoundingClientRect().width,
+        }));
+    }
+}
+export function DataTable(props) {
+    const { ref, table, isLoading, isRefetching, className, noResultsMessage, onRowClick, rowHref, headerClassName, bodyClassName, renderRow, rowClassName, isRowClickable, ...restProps } = props;
+    const resolvedNoResultsMessage = noResultsMessage ?? "No results.";
+    const hasClickHandler = !!onRowClick || !!rowHref;
+    const tableBodyRowClassName = cn("group border-muted-border bg-card py-2 px-4", hasClickHandler && "cursor-pointer");
+    const handleRowClick = (row) => {
+        if (onRowClick) {
+            onRowClick(row);
+        }
+        else if (rowHref) {
+            window.location.href = rowHref(row);
+        }
+    };
+    const isInteractiveElement = (element) => element instanceof HTMLElement &&
+        !!element.closest('button, a, input, select, textarea, [role="switch"], [role="menuitem"], [role="option"], [role="combobox"], [role="dialog"], [role="alertdialog"], [role="dialog-overlay"]');
+    const defaultRenderRow = (row) => {
+        const rowIsClickable = hasClickHandler && (isRowClickable?.(row) ?? true);
+        return (_jsx(TableRow, { className: cn(tableBodyRowClassName, !rowIsClickable &&
+                hasClickHandler &&
+                "cursor-default hover:bg-card [&>td[data-is-pinned]]:group-hover:bg-card", rowClassName?.(row)), "data-state": row.getIsSelected() && "selected", role: rowIsClickable ? "button" : undefined, tabIndex: rowIsClickable ? 0 : undefined, onClick: (event) => {
+                if (!rowIsClickable || isInteractiveElement(event.target))
+                    return;
+                handleRowClick(row);
+            }, onKeyDown: (event) => {
+                if (event.key !== "Enter" && event.key !== " ")
+                    return;
+                if (!rowIsClickable || isInteractiveElement(event.target))
+                    return;
+                event.preventDefault();
+                handleRowClick(row);
+            }, children: row.getVisibleCells().map((cell) => isRefetching ? (_jsx(TableCell, { className: "h-[57px] max-w-56", "data-is-pinned": cell.column.getIsPinned() ? true : undefined, style: getCommonPinnedColumnStyles(cell.column), children: _jsx(Skeleton, { className: "h-5 w-full max-w-24" }) }, cell.id)) : (_jsx(CustomTableCell, { cell: cell }, cell.id))) }, row.id));
+    };
+    const renderTableRow = renderRow ?? defaultRenderRow;
+    return (_jsx("div", { className: cn("grid gap-2.5", className), ...restProps, ref: ref, children: _jsxs(Table, { children: [_jsx(TableHeader, { className: headerClassName, children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "border-muted-border", children: headerGroup.headers.map((header) => {
+                            const headerContent = header.isPlaceholder
+                                ? null
+                                : flexRender(header.column.columnDef.header, header.getContext());
+                            const pinningStyles = getCommonPinnedColumnStyles(header.column);
+                            return (_jsx(TableHead, { className: cn("h-13 px-4 not-first:px-3 py-2", header.column.columnDef.meta?.className), "data-is-pinned": header.column.getIsPinned() ? true : undefined, style: pinningStyles, ref: (thElement) => columnSizingHandler(thElement, table, header.column), children: header.isPlaceholder ? null : header.column.getCanSort() ? (_jsx(ColumnHeader, { column: header.column, children: headerContent })) : (headerContent) }, header.id));
+                        }) }, headerGroup.id))) }), _jsx(TableBody, { className: cn(isLoading && "animate-pulse", bodyClassName), children: table.getRowModel().rows?.length ? (table.getRowModel().rows.map((row) => renderTableRow(row))) : (_jsx(TableRow, { className: tableBodyRowClassName, children: _jsx(TableCell, { colSpan: table.getAllColumns().length, className: "h-24 text-center", children: resolvedNoResultsMessage }) })) })] }) }));
+}

package/dist/components/table/selection-column.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnDef, Row } from "@tanstack/react-table";
+export type SelectionColumnOptions<TData> = {
+    id?: string;
+    size?: number;
+    getRowAriaLabel?: (row: Row<TData>) => string;
+    scope?: "all" | "page";
+};
+export declare function useSelectionColumn<TData>(options?: SelectionColumnOptions<TData>): ColumnDef<TData>;
+//# sourceMappingURL=selection-column.d.ts.map

package/dist/components/table/selection-column.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-column.d.ts","sourceRoot":"","sources":["../../../src/components/table/selection-column.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAS,MAAM,uBAAuB,CAAC;AAInE,MAAM,MAAM,sBAAsB,CAAC,KAAK,IAAI;IAC1C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,KAAK,CAAC,KAAK,MAAM,CAAC;IAC9C,KAAK,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;CACxB,CAAC;AAeF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,OAAO,CAAC,EAAE,sBAAsB,CAAC,KAAK,CAAC,GAAG,SAAS,CAAC,KAAK,CAAC,CAgDnG"}

package/dist/components/table/selection-column.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isPresent } from "@manta-eu/lib/present";
+import { useMemo, useRef } from "react";
+import { Checkbox } from "#components/checkbox/index";
+function selectRange(table, anchorRowIndex, currentRow) {
+    const rows = table.getRowModel().rows;
+    const anchorPos = rows.findIndex((r) => r.index === anchorRowIndex);
+    const currentPos = rows.findIndex((r) => r.index === currentRow.index);
+    if (anchorPos === -1 || currentPos === -1 || anchorPos === currentPos)
+        return;
+    const nextSelected = !currentRow.getIsSelected();
+    const [start, end] = anchorPos < currentPos ? [anchorPos, currentPos] : [currentPos, anchorPos];
+    for (let i = start; i <= end; i++) {
+        if (rows[i]?.getCanSelect())
+            rows[i]?.toggleSelected(nextSelected);
+    }
+}
+export function useSelectionColumn(options) {
+    const { id = "select", size = 36, getRowAriaLabel, scope = "all" } = options ?? {};
+    const getRowAriaLabelRef = useRef(getRowAriaLabel);
+    getRowAriaLabelRef.current = getRowAriaLabel;
+    const lastClickedRowIndexRef = useRef(null);
+    return useMemo(() => ({
+        id,
+        size,
+        // Nothing else sizes a column, so w-full would hand this one a share of the slack.
+        meta: { className: "w-0" },
+        enableSorting: false,
+        enableHiding: false,
+        enableResizing: false,
+        header: ({ table }) => {
+            const pageScoped = scope === "page";
+            const allSelected = pageScoped ? table.getIsAllPageRowsSelected() : table.getIsAllRowsSelected();
+            const someSelected = pageScoped ? table.getIsSomePageRowsSelected() : table.getIsSomeRowsSelected();
+            return (_jsx(Checkbox, { "aria-label": pageScoped ? "Select all rows on this page" : "Select all rows", checked: allSelected ? true : someSelected ? "indeterminate" : false, onCheckedChange: (value) => pageScoped ? table.toggleAllPageRowsSelected(!!value) : table.toggleAllRowsSelected(!!value), onClick: (event) => event.stopPropagation() }));
+        },
+        cell: ({ row, table }) => (_jsx(Checkbox, { "aria-label": getRowAriaLabelRef.current?.(row) ?? "Select row", checked: row.getIsSelected(), disabled: !row.getCanSelect(), onClick: (event) => {
+                event.stopPropagation();
+                if (event.shiftKey && isPresent(lastClickedRowIndexRef.current)) {
+                    selectRange(table, lastClickedRowIndexRef.current, row);
+                }
+                lastClickedRowIndexRef.current = row.index;
+            }, onCheckedChange: (value) => row.toggleSelected(!!value) })),
+    }), [id, size, scope]);
+}

package/dist/components/table/table-column-rearrange-popover.d.ts

@@ -0,0 +1,25 @@
+import { type Table } from "@tanstack/react-table";
+export type WithClassName = {
+    className?: string;
+};
+export type ColumnRearrangeDefaultState = {
+    order: string[];
+    visibility: Record<string, boolean>;
+};
+export type TableColumnRearrangePopoverProps<TData> = WithClassName & {
+    table: Table<TData>;
+    formatLabel?: (columnId: string) => string;
+    columnLabels?: Record<string, string>;
+    title?: string;
+    defaultState?: ColumnRearrangeDefaultState;
+    defaultOrder?: string[];
+    defaultVisibility?: Record<string, boolean>;
+} & ({
+    enableReset: true;
+    resetLabel?: string;
+} | {
+    enableReset?: false;
+    resetLabel?: string;
+});
+export declare function TableColumnRearrangePopover<TData>(props: TableColumnRearrangePopoverProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+//# sourceMappingURL=table-column-rearrange-popover.d.ts.map

package/dist/components/table/table-column-rearrange-popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-column-rearrange-popover.d.ts","sourceRoot":"","sources":["../../../src/components/table/table-column-rearrange-popover.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAUnD,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAuKF,MAAM,MAAM,2BAA2B,GAAG;IACxC,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB,UAAU,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACrC,CAAC;AAEF,MAAM,MAAM,gCAAgC,CAAC,KAAK,IAAI,aAAa,GAAG;IACpE,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,MAAM,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,2BAA2B,CAAC;IAC3C,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,iBAAiB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CAC7C,GAAG,CAAC;IAAE,WAAW,EAAE,IAAI,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,WAAW,CAAC,EAAE,KAAK,CAAC;IAAC,UAAU,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAEhG,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,KAAK,EAAE,gCAAgC,CAAC,KAAK,CAAC,kDA6IhG"}