@forthtilliath/shadcn-ui 0.2.0

package/dist/components/blocks/calendar-date-picker.js

@@ -0,0 +1,377 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { endOfDay, endOfMonth, endOfWeek, endOfYear, startOfDay, startOfMonth, startOfWeek, startOfYear, subDays, } from "date-fns";
+import { formatInTimeZone, toDate } from "date-fns-tz";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { Calendar } from "@forthtilliath/shadcn-ui/components/calendar";
+import { Popover, PopoverContent, PopoverTrigger, } from "@forthtilliath/shadcn-ui/components/popover";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@forthtilliath/shadcn-ui/components/select";
+import { cn } from "@forthtilliath/shadcn-ui/lib/utils";
+const months = [
+    "January",
+    "February",
+    "March",
+    "April",
+    "May",
+    "June",
+    "July",
+    "August",
+    "September",
+    "October",
+    "November",
+    "December",
+];
+const multiSelectVariants = cva("flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium text-foreground ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+            outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+            secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground text-background",
+            link: " underline-offset-4 hover:underline text-background",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+export function CalendarDatePicker({ id = "calendar-date-picker", className, date, closeOnSelect = false, numberOfMonths = 2, yearsRange = 10, onDateSelect, variant, ref, ...props }) {
+    const [isPopoverOpen, setIsPopoverOpen] = React.useState(false);
+    const [selectedRange, setSelectedRange] = React.useState(numberOfMonths === 2 ? "This Year" : "Today");
+    const [monthFrom, setMonthFrom] = React.useState(date.from);
+    const [yearFrom, setYearFrom] = React.useState(date.from?.getFullYear());
+    const [monthTo, setMonthTo] = React.useState(numberOfMonths === 2 ? date.to : date.from);
+    const [yearTo, setYearTo] = React.useState(numberOfMonths === 2 ? date.to?.getFullYear() : date.from?.getFullYear());
+    const [highlightedPart, setHighlightedPart] = React.useState(null);
+    const timeZone = React.useMemo(() => Intl.DateTimeFormat().resolvedOptions().timeZone, []);
+    // `new Date()` is impure, so it's seeded once via useState's lazy
+    // initializer (mount time) rather than recomputed directly during render.
+    const [today] = React.useState(() => new Date());
+    const years = Array.from({ length: yearsRange + 1 }, (_, i) => today.getFullYear() - yearsRange / 2 + i);
+    const handleClose = () => {
+        setIsPopoverOpen(false);
+    };
+    const handleTogglePopover = () => {
+        setIsPopoverOpen((prev) => !prev);
+    };
+    const selectDateRange = (from, to, range) => {
+        const startDate = startOfDay(toDate(from, { timeZone }));
+        const endDate = numberOfMonths === 2 ? endOfDay(toDate(to, { timeZone })) : startDate;
+        onDateSelect({ from: startDate, to: endDate });
+        setSelectedRange(range);
+        setMonthFrom(from);
+        setYearFrom(from.getFullYear());
+        setMonthTo(to);
+        setYearTo(to.getFullYear());
+        if (closeOnSelect)
+            setIsPopoverOpen(false);
+    };
+    const handleDateSelect = (range) => {
+        if (range?.from) {
+            let from = startOfDay(toDate(range.from, { timeZone }));
+            let to = range.to ? endOfDay(toDate(range.to, { timeZone })) : from;
+            if (numberOfMonths === 1) {
+                if (range.from !== date.from) {
+                    to = from;
+                }
+                else if (range.to) {
+                    from = startOfDay(toDate(range.to, { timeZone }));
+                }
+            }
+            onDateSelect({ from, to });
+            setMonthFrom(from);
+            setYearFrom(from.getFullYear());
+            setMonthTo(to);
+            setYearTo(to.getFullYear());
+        }
+        setSelectedRange(null);
+    };
+    const handleMonthChange = React.useCallback((newMonthIndex, part) => {
+        setSelectedRange(null);
+        if (part === "from") {
+            if (yearFrom !== undefined) {
+                if (newMonthIndex < 0 || newMonthIndex > yearsRange + 1)
+                    return;
+                const newMonth = new Date(yearFrom, newMonthIndex, 1);
+                const from = numberOfMonths === 2
+                    ? startOfMonth(toDate(newMonth, { timeZone }))
+                    : date.from
+                        ? new Date(date.from.getFullYear(), newMonth.getMonth(), date.from.getDate())
+                        : newMonth;
+                const to = numberOfMonths === 2
+                    ? date.to
+                        ? endOfDay(toDate(date.to, { timeZone }))
+                        : endOfMonth(toDate(newMonth, { timeZone }))
+                    : from;
+                if (from <= to) {
+                    onDateSelect({ from, to });
+                    setMonthFrom(newMonth);
+                    setMonthTo(date.to);
+                }
+            }
+        }
+        else {
+            if (yearTo !== undefined) {
+                if (newMonthIndex < 0 || newMonthIndex > yearsRange + 1)
+                    return;
+                const newMonth = new Date(yearTo, newMonthIndex, 1);
+                const from = date.from
+                    ? startOfDay(toDate(date.from, { timeZone }))
+                    : startOfMonth(toDate(newMonth, { timeZone }));
+                const to = numberOfMonths === 2
+                    ? endOfMonth(toDate(newMonth, { timeZone }))
+                    : from;
+                if (from <= to) {
+                    onDateSelect({ from, to });
+                    setMonthTo(newMonth);
+                    setMonthFrom(date.from);
+                }
+            }
+        }
+    }, [
+        date,
+        numberOfMonths,
+        timeZone,
+        yearFrom,
+        yearTo,
+        yearsRange,
+        onDateSelect,
+    ]);
+    const handleYearChange = React.useCallback((newYear, part) => {
+        setSelectedRange(null);
+        if (part === "from") {
+            if (years.includes(newYear)) {
+                const newMonth = monthFrom
+                    ? new Date(newYear, monthFrom.getMonth(), 1)
+                    : new Date(newYear, 0, 1);
+                const from = numberOfMonths === 2
+                    ? startOfMonth(toDate(newMonth, { timeZone }))
+                    : date.from
+                        ? new Date(newYear, newMonth.getMonth(), date.from.getDate())
+                        : newMonth;
+                const to = numberOfMonths === 2
+                    ? date.to
+                        ? endOfDay(toDate(date.to, { timeZone }))
+                        : endOfMonth(toDate(newMonth, { timeZone }))
+                    : from;
+                if (from <= to) {
+                    onDateSelect({ from, to });
+                    setYearFrom(newYear);
+                    setMonthFrom(newMonth);
+                    setYearTo(date.to?.getFullYear());
+                    setMonthTo(date.to);
+                }
+            }
+        }
+        else {
+            if (years.includes(newYear)) {
+                const newMonth = monthTo
+                    ? new Date(newYear, monthTo.getMonth(), 1)
+                    : new Date(newYear, 0, 1);
+                const from = date.from
+                    ? startOfDay(toDate(date.from, { timeZone }))
+                    : startOfMonth(toDate(newMonth, { timeZone }));
+                const to = numberOfMonths === 2
+                    ? endOfMonth(toDate(newMonth, { timeZone }))
+                    : from;
+                if (from <= to) {
+                    onDateSelect({ from, to });
+                    setYearTo(newYear);
+                    setMonthTo(newMonth);
+                    setYearFrom(date.from?.getFullYear());
+                    setMonthFrom(date.from);
+                }
+            }
+        }
+    }, [date, numberOfMonths, timeZone, monthFrom, monthTo, years, onDateSelect]);
+    const dateRanges = [
+        { label: "Today", start: today, end: today },
+        { label: "Yesterday", start: subDays(today, 1), end: subDays(today, 1) },
+        {
+            label: "This Week",
+            start: startOfWeek(today, { weekStartsOn: 1 }),
+            end: endOfWeek(today, { weekStartsOn: 1 }),
+        },
+        {
+            label: "Last Week",
+            start: subDays(startOfWeek(today, { weekStartsOn: 1 }), 7),
+            end: subDays(endOfWeek(today, { weekStartsOn: 1 }), 7),
+        },
+        { label: "Last 7 Days", start: subDays(today, 6), end: today },
+        {
+            label: "This Month",
+            start: startOfMonth(today),
+            end: endOfMonth(today),
+        },
+        {
+            label: "Last Month",
+            start: startOfMonth(subDays(today, today.getDate())),
+            end: endOfMonth(subDays(today, today.getDate())),
+        },
+        { label: "This Year", start: startOfYear(today), end: endOfYear(today) },
+        {
+            label: "Last Year",
+            start: startOfYear(subDays(today, 365)),
+            end: endOfYear(subDays(today, 365)),
+        },
+    ];
+    const handleMouseOver = (part) => {
+        setHighlightedPart(part);
+    };
+    const handleMouseLeave = () => {
+        setHighlightedPart(null);
+    };
+    // Wired up via a native `addEventListener` below (not a JSX event prop),
+    // which never passes a second argument, so there's no "part" parameter —
+    // the branch to act on comes from `highlightedPart` state instead.
+    const handleWheel = React.useCallback((event) => {
+        if (!date.from || !date.to)
+            return;
+        const from = date.from;
+        const to = date.to;
+        event.preventDefault();
+        setSelectedRange(null);
+        if (highlightedPart === "firstDay") {
+            const newDate = new Date(from);
+            const increment = event.deltaY > 0 ? -1 : 1;
+            newDate.setDate(newDate.getDate() + increment);
+            if (newDate <= to) {
+                if (numberOfMonths === 2) {
+                    onDateSelect({ from: newDate, to: new Date(to) });
+                }
+                else {
+                    onDateSelect({ from: newDate, to: newDate });
+                }
+                setMonthFrom(newDate);
+            }
+            else if (newDate > to && numberOfMonths === 1) {
+                onDateSelect({ from: newDate, to: newDate });
+                setMonthFrom(newDate);
+            }
+        }
+        else if (highlightedPart === "firstMonth") {
+            const currentMonth = monthFrom ? monthFrom.getMonth() : 0;
+            const newMonthIndex = currentMonth + (event.deltaY > 0 ? -1 : 1);
+            handleMonthChange(newMonthIndex, "from");
+        }
+        else if (highlightedPart === "firstYear" && yearFrom !== undefined) {
+            const newYear = yearFrom + (event.deltaY > 0 ? -1 : 1);
+            handleYearChange(newYear, "from");
+        }
+        else if (highlightedPart === "secondDay") {
+            const newDate = new Date(to);
+            const increment = event.deltaY > 0 ? -1 : 1;
+            newDate.setDate(newDate.getDate() + increment);
+            if (newDate >= from) {
+                onDateSelect({ from: new Date(from), to: newDate });
+                setMonthTo(newDate);
+            }
+        }
+        else if (highlightedPart === "secondMonth") {
+            const currentMonth = monthTo ? monthTo.getMonth() : 0;
+            const newMonthIndex = currentMonth + (event.deltaY > 0 ? -1 : 1);
+            handleMonthChange(newMonthIndex, "to");
+        }
+        else if (highlightedPart === "secondYear" && yearTo !== undefined) {
+            const newYear = yearTo + (event.deltaY > 0 ? -1 : 1);
+            handleYearChange(newYear, "to");
+        }
+    }, [
+        date,
+        highlightedPart,
+        numberOfMonths,
+        monthFrom,
+        monthTo,
+        yearFrom,
+        yearTo,
+        onDateSelect,
+        handleMonthChange,
+        handleYearChange,
+    ]);
+    React.useEffect(() => {
+        const firstDayElement = document.getElementById(`firstDay-${id}`);
+        const firstMonthElement = document.getElementById(`firstMonth-${id}`);
+        const firstYearElement = document.getElementById(`firstYear-${id}`);
+        const secondDayElement = document.getElementById(`secondDay-${id}`);
+        const secondMonthElement = document.getElementById(`secondMonth-${id}`);
+        const secondYearElement = document.getElementById(`secondYear-${id}`);
+        const elements = [
+            firstDayElement,
+            firstMonthElement,
+            firstYearElement,
+            secondDayElement,
+            secondMonthElement,
+            secondYearElement,
+        ];
+        const addPassiveEventListener = (element) => {
+            if (element) {
+                element.addEventListener("wheel", handleWheel, {
+                    passive: false,
+                });
+            }
+        };
+        elements.forEach(addPassiveEventListener);
+        return () => {
+            elements.forEach((element) => {
+                if (element) {
+                    element.removeEventListener("wheel", handleWheel);
+                }
+            });
+        };
+    }, [highlightedPart, date, id, handleWheel]);
+    const formatWithTz = (date, fmt) => formatInTimeZone(date, timeZone, fmt);
+    return (_jsxs(_Fragment, { children: [_jsx("style", { children: `
+            .date-part {
+              touch-action: none;
+            }
+          ` }), _jsxs(Popover, { open: isPopoverOpen, onOpenChange: setIsPopoverOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: "date", ref: ref, ...props, className: cn("w-auto", multiSelectVariants({ variant, className })), size: "default", onClick: handleTogglePopover, suppressHydrationWarning: true, children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), _jsx("span", { children: date.from ? (date.to ? (_jsxs(_Fragment, { children: [_jsx("span", { id: `firstDay-${id}`, className: cn("date-part", highlightedPart === "firstDay" && "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("firstDay");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "dd") }), " ", _jsx("span", { id: `firstMonth-${id}`, className: cn("date-part", highlightedPart === "firstMonth" &&
+                                                    "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("firstMonth");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "LLL") }), ",", " ", _jsx("span", { id: `firstYear-${id}`, className: cn("date-part", highlightedPart === "firstYear" &&
+                                                    "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("firstYear");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "y") }), numberOfMonths === 2 && (_jsxs(_Fragment, { children: [" - ", _jsx("span", { id: `secondDay-${id}`, className: cn("date-part", highlightedPart === "secondDay" &&
+                                                            "underline font-bold"), onMouseOver: () => {
+                                                            handleMouseOver("secondDay");
+                                                        }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.to, "dd") }), " ", _jsx("span", { id: `secondMonth-${id}`, className: cn("date-part", highlightedPart === "secondMonth" &&
+                                                            "underline font-bold"), onMouseOver: () => {
+                                                            handleMouseOver("secondMonth");
+                                                        }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.to, "LLL") }), ",", " ", _jsx("span", { id: `secondYear-${id}`, className: cn("date-part", highlightedPart === "secondYear" &&
+                                                            "underline font-bold"), onMouseOver: () => {
+                                                            handleMouseOver("secondYear");
+                                                        }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.to, "y") })] }))] })) : (_jsxs(_Fragment, { children: [_jsx("span", { id: "day", className: cn("date-part", highlightedPart === "day" && "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("day");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "dd") }), " ", _jsx("span", { id: "month", className: cn("date-part", highlightedPart === "month" && "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("month");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "LLL") }), ",", " ", _jsx("span", { id: "year", className: cn("date-part", highlightedPart === "year" && "underline font-bold"), onMouseOver: () => {
+                                                    handleMouseOver("year");
+                                                }, onMouseLeave: handleMouseLeave, children: formatWithTz(date.from, "y") })] }))) : (_jsx("span", { children: "Select a date" })) })] }) }), isPopoverOpen && (_jsx(PopoverContent, { className: "w-auto", align: "start", avoidCollisions: false, onInteractOutside: handleClose, onEscapeKeyDown: handleClose, style: {
+                            maxHeight: "var(--radix-popover-content-available-height)",
+                            overflowY: "auto",
+                        }, children: _jsxs("div", { className: "flex", children: [numberOfMonths === 2 && (_jsx("div", { className: "flex flex-col gap-1 pr-4 text-left border-r border-foreground/10", children: dateRanges.map(({ label, start, end }) => (_jsx(Button, { variant: "ghost", size: "default", className: cn("justify-start hover:bg-primary/90 hover:text-background", selectedRange === label &&
+                                            "bg-primary text-background hover:bg-primary/90 hover:text-background"), onClick: () => {
+                                            selectDateRange(start, end, label);
+                                            setMonthFrom(start);
+                                            setYearFrom(start.getFullYear());
+                                            setMonthTo(end);
+                                            setYearTo(end.getFullYear());
+                                        }, children: label }, label))) })), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsxs("div", { className: "flex gap-2 ml-3", children: [_jsxs(Select, { onValueChange: (value) => {
+                                                                handleMonthChange(months.indexOf(value), "from");
+                                                                setSelectedRange(null);
+                                                            }, value: monthFrom ? months[monthFrom.getMonth()] : undefined, children: [_jsx(SelectTrigger, { className: "w-[122px] focus:ring-0 focus:ring-offset-0 font-medium hover:bg-accent hover:text-accent-foreground", children: _jsx(SelectValue, { placeholder: "Month" }) }), _jsx(SelectContent, { children: months.map((month, idx) => (_jsx(SelectItem, { value: month, children: month }, idx))) })] }), _jsxs(Select, { onValueChange: (value) => {
+                                                                handleYearChange(Number(value), "from");
+                                                                setSelectedRange(null);
+                                                            }, value: yearFrom ? yearFrom.toString() : undefined, children: [_jsx(SelectTrigger, { className: "w-[122px] focus:ring-0 focus:ring-offset-0 font-medium hover:bg-accent hover:text-accent-foreground", children: _jsx(SelectValue, { placeholder: "Year" }) }), _jsx(SelectContent, { children: years.map((year, idx) => (_jsx(SelectItem, { value: year.toString(), children: year }, idx))) })] })] }), numberOfMonths === 2 && (_jsxs("div", { className: "flex gap-2", children: [_jsxs(Select, { onValueChange: (value) => {
+                                                                handleMonthChange(months.indexOf(value), "to");
+                                                                setSelectedRange(null);
+                                                            }, value: monthTo ? months[monthTo.getMonth()] : undefined, children: [_jsx(SelectTrigger, { className: "w-[122px] focus:ring-0 focus:ring-offset-0 font-medium hover:bg-accent hover:text-accent-foreground", children: _jsx(SelectValue, { placeholder: "Month" }) }), _jsx(SelectContent, { children: months.map((month, idx) => (_jsx(SelectItem, { value: month, children: month }, idx))) })] }), _jsxs(Select, { onValueChange: (value) => {
+                                                                handleYearChange(Number(value), "to");
+                                                                setSelectedRange(null);
+                                                            }, value: yearTo ? yearTo.toString() : undefined, children: [_jsx(SelectTrigger, { className: "w-[122px] focus:ring-0 focus:ring-offset-0 font-medium hover:bg-accent hover:text-accent-foreground", children: _jsx(SelectValue, { placeholder: "Year" }) }), _jsx(SelectContent, { children: years.map((year, idx) => (_jsx(SelectItem, { value: year.toString(), children: year }, idx))) })] })] }))] }), _jsx("div", { className: "flex", children: _jsx(Calendar, { mode: "range", defaultMonth: monthFrom, month: monthFrom, onMonthChange: setMonthFrom, selected: date, onSelect: handleDateSelect, numberOfMonths: numberOfMonths, showOutsideDays: false, className: className }) })] })] }) }))] })] }));
+}

package/dist/components/blocks/data-table-ext/pagination.d.ts

@@ -0,0 +1,12 @@
+import type { Table } from "@tanstack/react-table";
+interface DataTablePaginationProps<TData> {
+    table: Table<TData>;
+    totalItems?: number;
+    totalSelectedItems?: number;
+    pageSizeOptions?: number[];
+    size?: "sm" | "default" | "lg";
+}
+export declare function DataTablePagination<TData>({ table, totalItems, totalSelectedItems, pageSizeOptions, // Default options if none provided
+size, }: DataTablePaginationProps<TData>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=pagination.d.ts.map

package/dist/components/blocks/data-table-ext/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../src/components/blocks/data-table-ext/pagination.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAsBnD,UAAU,wBAAwB,CAAC,KAAK;IACtC,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,GAAG,IAAI,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,EACzC,KAAK,EACL,UAAc,EACd,kBAAsB,EACtB,eAAsC,EAAE,mCAAmC;AAC3E,IAAgB,GACjB,EAAE,wBAAwB,CAAC,KAAK,CAAC,+BA0HjC"}

package/dist/components/blocks/data-table-ext/pagination.js

@@ -0,0 +1,65 @@
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon, DoubleArrowLeftIcon, DoubleArrowRightIcon, } from "@radix-ui/react-icons";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@forthtilliath/shadcn-ui/components/select";
+const getButtonSizeClass = (size) => {
+    switch (size) {
+        case "sm":
+            return "h-7 w-7 p-0";
+        case "lg":
+            return "h-11 w-11 p-0";
+        default:
+            return "h-8 w-8 p-0";
+    }
+};
+export function DataTablePagination({ table, totalItems = 0, totalSelectedItems = 0, pageSizeOptions = [10, 20, 30, 40, 50], // Default options if none provided
+size = "default", }) {
+    // Convert 'lg' size to 'default' for SelectTrigger since it only accepts 'sm' | 'default'
+    const selectSize = size === "lg" ? "default" : size;
+    return (_jsxs("div", { className: "flex w-full flex-col items-center justify-between gap-4 overflow-auto px-2 py-1 sm:flex-row sm:gap-8", children: [_jsxs("div", { className: "flex-1 text-sm text-muted-foreground", children: [totalSelectedItems, " of ", totalItems, " row(s) selected."] }), _jsxs("div", { className: "flex flex-col items-center gap-4 sm:flex-row sm:gap-6 lg:gap-8", children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx("p", { className: "whitespace-nowrap text-sm font-medium", children: "Rows per page" }), _jsxs(Select, { value: table.getState().pagination.pageSize.toString(), onValueChange: (value) => {
+                                    // Validate the input value
+                                    const numericValue = parseInt(value, 10);
+                                    if (isNaN(numericValue) || numericValue <= 0) {
+                                        console.error(`Invalid page size value: ${value}`);
+                                        return;
+                                    }
+                                    try {
+                                        // Force URL update via direct window manipulation first
+                                        // This ensures the URL gets updated before the table state changes
+                                        const url = new URL(window.location.href);
+                                        url.searchParams.set("pageSize", value);
+                                        url.searchParams.set("page", "1"); // Always reset to page 1
+                                        window.history.replaceState({}, "", url.toString());
+                                        // Then use the table's pagination change handler to update table state
+                                        // This order ensures the URL is already set when the table state updates
+                                        table.setPagination({
+                                            pageIndex: 0, // Reset to first page
+                                            pageSize: numericValue,
+                                        });
+                                    }
+                                    catch (error) {
+                                        console.error("Error updating pagination:", error);
+                                    }
+                                }, children: [_jsx(SelectTrigger, { className: "cursor-pointer", size: selectSize, children: _jsx(SelectValue, { placeholder: table.getState().pagination.pageSize }) }), _jsx(SelectContent, { side: "top", className: "cursor-pointer", children: pageSizeOptions.map((pageSize) => (_jsx(SelectItem, { value: pageSize.toString(), className: "cursor-pointer", children: pageSize }, pageSize))) })] })] }), _jsxs("div", { className: "flex items-center justify-center text-sm font-medium", children: ["Page ", table.getState().pagination.pageIndex + 1, " of", " ", table.getPageCount() || 1] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Button, { "aria-label": "Go to first page", variant: "outline", className: `${getButtonSizeClass(size)} hidden lg:flex cursor-pointer`, onClick: () => {
+                                    table.setPagination({
+                                        pageIndex: 0,
+                                        pageSize: table.getState().pagination.pageSize,
+                                    });
+                                }, disabled: !table.getCanPreviousPage(), children: _jsx(DoubleArrowLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Go to previous page", variant: "outline", className: `${getButtonSizeClass(size)} cursor-pointer`, onClick: () => {
+                                    table.setPagination({
+                                        pageIndex: table.getState().pagination.pageIndex - 1,
+                                        pageSize: table.getState().pagination.pageSize,
+                                    });
+                                }, disabled: !table.getCanPreviousPage(), children: _jsx(ChevronLeftIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Go to next page", variant: "outline", className: `${getButtonSizeClass(size)} cursor-pointer`, onClick: () => {
+                                    table.setPagination({
+                                        pageIndex: table.getState().pagination.pageIndex + 1,
+                                        pageSize: table.getState().pagination.pageSize,
+                                    });
+                                }, disabled: !table.getCanNextPage(), children: _jsx(ChevronRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }) }), _jsx(Button, { "aria-label": "Go to last page", variant: "outline", className: `${getButtonSizeClass(size)} hidden lg:flex cursor-pointer`, onClick: () => {
+                                    table.setPagination({
+                                        pageIndex: table.getPageCount() - 1,
+                                        pageSize: table.getState().pagination.pageSize,
+                                    });
+                                }, disabled: !table.getCanNextPage(), children: _jsx(DoubleArrowRightIcon, { className: "h-4 w-4", "aria-hidden": "true" }) })] })] })] }));
+}

package/dist/components/blocks/data-table-ext/utils/table-config.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Table configuration options
+ * This file provides centralized configuration for the data table features
+ */
+export interface TableConfig {
+    enablePagination: boolean;
+}
+/**
+ * Provides table configuration, merging in any overrides.
+ *
+ * Not a hook (calls no hooks internally) despite the data it computes being
+ * hook-shaped — renamed off the `use` prefix so tooling doesn't treat it as
+ * one.
+ */
+export declare function getTableConfig(overrideConfig?: Partial<TableConfig>): TableConfig;
+//# sourceMappingURL=table-config.d.ts.map

package/dist/components/blocks/data-table-ext/utils/table-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"table-config.d.ts","sourceRoot":"","sources":["../../../../../src/components/blocks/data-table-ext/utils/table-config.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,WAAW;IAW1B,gBAAgB,EAAE,OAAO,CAAC;CAqC3B;AAqBD;;;;;;GAMG;AACH,wBAAgB,cAAc,CAC5B,cAAc,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,GACpC,WAAW,CAEb"}

package/dist/components/blocks/data-table-ext/utils/table-config.js

@@ -0,0 +1,28 @@
+// Default configuration
+const defaultConfig = {
+    // enableRowSelection: true, // Row selection enabled by default
+    // enableKeyboardNavigation: false, // Keyboard navigation disabled by default
+    // enableClickRowSelect: false, // Clicking row to select disabled by default
+    enablePagination: true, // Pagination enabled by default
+    // enableSearch: true, // Search enabled by default
+    // enableColumnFilters: true, // Column filters enabled by default
+    // enableDateFilter: true, // Date filter enabled by default
+    // enableColumnVisibility: true, // Column visibility options enabled by default
+    // enableExport: true, // Data export enabled by default
+    // enableUrlState: true, // URL state persistence enabled by default
+    // enableColumnResizing: true, // Column resizing enabled by default
+    // enableToolbar: true, // Toolbar enabled by default
+    // size: "default", // Default size for buttons and inputs
+    // columnResizingTableId: undefined, // No table ID by default
+    // searchPlaceholder: undefined, // No custom search placeholder by default
+};
+/**
+ * Provides table configuration, merging in any overrides.
+ *
+ * Not a hook (calls no hooks internally) despite the data it computes being
+ * hook-shaped — renamed off the `use` prefix so tooling doesn't treat it as
+ * one.
+ */
+export function getTableConfig(overrideConfig) {
+    return { ...defaultConfig, ...overrideConfig };
+}

package/dist/components/blocks/data-table.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+import { type ColumnDef } from "@tanstack/react-table";
+import { type TableConfig } from "./data-table-ext/utils/table-config";
+export interface Props<T> {
+    columns: ColumnDef<T>[];
+    data: T[];
+    config?: Partial<TableConfig>;
+}
+export declare function DataTable<T>({ columns, data, config }: Props<T>): React.JSX.Element;
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/blocks/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/data-table.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACL,KAAK,SAAS,EAUf,MAAM,uBAAuB,CAAC;AAqB/B,OAAO,EAEL,KAAK,WAAW,EACjB,MAAM,qCAAqC,CAAC;AAE7C,MAAM,WAAW,KAAK,CAAC,CAAC;IACtB,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,IAAI,EAAE,CAAC,EAAE,CAAC;IACV,MAAM,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,CAAC;CAC/B;AAED,wBAAgB,SAAS,CAAC,CAAC,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,qBAiJ/D"}

package/dist/components/blocks/data-table.js

@@ -0,0 +1,59 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from "@tanstack/react-table";
+import { ChevronDown } from "lucide-react";
+import { Button } from "@forthtilliath/shadcn-ui/components/button";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger, } from "@forthtilliath/shadcn-ui/components/dropdown-menu";
+import { Input } from "@forthtilliath/shadcn-ui/components/input";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "@forthtilliath/shadcn-ui/components/table";
+import { DataTablePagination } from "./data-table-ext/pagination";
+import { getTableConfig, } from "./data-table-ext/utils/table-config";
+export function DataTable({ columns, data, config }) {
+    "use no memo";
+    // TanStack Table's useReactTable() returns functions that can't be safely
+    // memoized by the React Compiler (an upstream, documented limitation) —
+    // opt this component out of compiler memoization rather than let it skip
+    // silently.
+    const tableConfig = getTableConfig(config);
+    const [sorting, setSorting] = React.useState([]);
+    const [columnFilters, setColumnFilters] = React.useState([]);
+    const [columnVisibility, setColumnVisibility] = React.useState({});
+    const [rowSelection, setRowSelection] = React.useState({});
+    // TanStack Table's useReactTable() is a documented, upstream React
+    // Compiler incompatibility (it returns functions the compiler can't
+    // memoize safely) — not something fixable here; the "use no memo"
+    // directive above already opts this component out of compiler
+    // memoization, so this is expected, not a bug.
+    // eslint-disable-next-line react-hooks/incompatible-library
+    const table = useReactTable({
+        data,
+        columns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
+        },
+    });
+    return (_jsxs("div", { className: "w-full", children: [_jsxs("div", { className: "flex items-center py-4", children: [_jsx(Input, { placeholder: "Filter emails...", value: table.getColumn("email")?.getFilterValue() ?? "", onChange: (event) => table.getColumn("email")?.setFilterValue(event.target.value), className: "max-w-sm" }), _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: "ml-auto", children: ["Columns ", _jsx(ChevronDown, {})] }) }), _jsx(DropdownMenuContent, { align: "end", children: table
+                                    .getAllColumns()
+                                    .filter((column) => column.getCanHide())
+                                    .map((column) => {
+                                    return (_jsx(DropdownMenuCheckboxItem, { className: "capitalize", checked: column.getIsVisible(), onCheckedChange: (value) => {
+                                            column.toggleVisibility(value);
+                                        }, children: column.id }, column.id));
+                                }) })] })] }), _jsx("div", { className: "rounded-sm border overflow-hidden", children: _jsxs(Table, { children: [_jsx(TableHeader, { children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { children: headerGroup.headers.map((header) => {
+                                    return (_jsx(TableHead, { children: header.isPlaceholder
+                                            ? null
+                                            : flexRender(header.column.columnDef.header, header.getContext()) }, header.id));
+                                }) }, headerGroup.id))) }), _jsx(TableBody, { children: table.getRowModel().rows.length ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: columns.length, className: "h-24 text-center", children: "No results." }) })) })] }) }), tableConfig.enablePagination && (_jsx(DataTablePagination, { table: table, totalItems: table.getFilteredRowModel().rows.length, totalSelectedItems: table.getFilteredSelectedRowModel().rows.length, pageSizeOptions: [10, 20, 30, 40, 50], size: "sm" }))] }));
+}

package/dist/components/blocks/field.d.ts

@@ -0,0 +1,10 @@
+import { type ReactNode } from "react";
+import type { FieldValues, Path, UseFormRegisterReturn } from "react-hook-form";
+type Props<TFieldValues extends FieldValues> = {
+    label?: ReactNode | undefined;
+    description?: ReactNode | undefined;
+    name: Path<TFieldValues>;
+} & UseFormRegisterReturn;
+export declare function Field<TFieldValues extends FieldValues>({ label, description, ...props }: Props<TFieldValues>): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=field.d.ts.map

package/dist/components/blocks/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAWhF,KAAK,KAAK,CAAC,YAAY,SAAS,WAAW,IAAI;IAC7C,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAC9B,WAAW,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IACpC,IAAI,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC;CAC1B,GAAG,qBAAqB,CAAC;AAE1B,wBAAgB,KAAK,CAAC,YAAY,SAAS,WAAW,EAAE,EACtD,KAAK,EACL,WAAW,EACX,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,YAAY,CAAC,+BAoBrB"}

package/dist/components/blocks/field.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, } from "@forthtilliath/shadcn-ui/components/form";
+export function Field({ label, description, ...props }) {
+    return (_jsx(FormField, { render: ({ field }) => (_jsxs(FormItem, { children: [_jsx(FormLabel, { children: label }), _jsx(FormControl, { children: _jsx("input", { className: "border-input bg-background w-full rounded-md border px-3 py-2", placeholder: "username", ...field }) }), _jsxs(FormDescription, { children: [description, "."] }), _jsx(FormMessage, {})] })), ...props }));
+}

package/dist/components/blocks/form.d.ts

@@ -0,0 +1,14 @@
+import { type DefaultValues, type FieldValues, type UseFormRegister } from "react-hook-form";
+import type { z } from "zod/v4";
+interface Props<TFieldValues extends FieldValues> {
+    schema: z.ZodType<TFieldValues, TFieldValues>;
+    defaultValues?: DefaultValues<TFieldValues>;
+    onSubmit: (data: TFieldValues) => void;
+    className?: string;
+    children: ({ register, }: {
+        register: UseFormRegister<TFieldValues>;
+    }) => React.ReactNode;
+}
+export declare function Form<TFieldValues extends FieldValues>({ children, schema, defaultValues, onSubmit, className, }: Props<TFieldValues>): React.ReactNode;
+export {};
+//# sourceMappingURL=form.d.ts.map

package/dist/components/blocks/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../src/components/blocks/form.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,aAAa,EAClB,KAAK,WAAW,EAEhB,KAAK,eAAe,EACrB,MAAM,iBAAiB,CAAC;AAEzB,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,QAAQ,CAAC;AAIhC,UAAU,KAAK,CAAC,YAAY,SAAS,WAAW;IAC9C,MAAM,EAAE,CAAC,CAAC,OAAO,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;IAC9C,aAAa,CAAC,EAAE,aAAa,CAAC,YAAY,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,IAAI,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,CAAC,EACT,QAAQ,GACT,EAAE;QACD,QAAQ,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;KACzC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAED,wBAAgB,IAAI,CAAC,YAAY,SAAS,WAAW,EAAE,EACrD,QAAQ,EACR,MAAM,EACN,aAAa,EACb,QAAQ,EACR,SAAS,GACV,EAAE,KAAK,CAAC,YAAY,CAAC,GAAG,KAAK,CAAC,SAAS,CAgBvC"}