@kala-ui/react 0.0.1-beta.1

package/dist/src/components/data-table/useTableState.d.ts

@@ -0,0 +1,28 @@
+/**
+ * useTableState Hook
+ * Manages table state including sorting, filtering, pagination, and search
+ */
+import type { ColumnDef, FilterConfig, SearchConfig, SortConfig, TableState } from "./data-table.types";
+interface UseTableStateOptions<TData> {
+    data: TData[];
+    columns: ColumnDef<TData>[];
+    defaultSort?: SortConfig<TData>;
+    defaultFilters?: FilterConfig<TData>[];
+    searchConfig?: SearchConfig<TData> | boolean;
+    pageSize?: number;
+    total?: number;
+    /** Callback when sort changes */
+    onSortChange?: (sort: SortConfig<TData> | null) => void;
+    /** Callback when filters change */
+    onFilterChange?: (filters: FilterConfig<TData>[]) => void;
+    /** Callback when search query changes */
+    onSearchChange?: (query: string) => void;
+    /** Callback when pagination changes */
+    onPaginationChange?: (page: number, pageSize: number) => void;
+}
+/**
+ * Hook to manage table state (sorting, filtering, search, pagination)
+ */
+export declare function useTableState<TData>({ data, columns, defaultSort, defaultFilters, searchConfig, pageSize: initialPageSize, total: manualTotal, onSortChange, onFilterChange, onSearchChange, onPaginationChange, }: UseTableStateOptions<TData>): TableState<TData>;
+export {};
+//# sourceMappingURL=useTableState.d.ts.map

package/dist/src/components/data-table/useTableState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTableState.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/useTableState.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,OAAO,KAAK,EACX,SAAS,EACT,YAAY,EACZ,YAAY,EACZ,UAAU,EACV,UAAU,EACV,MAAM,oBAAoB,CAAC;AAE5B,UAAU,oBAAoB,CAAC,KAAK;IACnC,IAAI,EAAE,KAAK,EAAE,CAAC;IACd,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,UAAU,CAAC,KAAK,CAAC,CAAC;IAChC,cAAc,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,CAAC;IACvC,YAAY,CAAC,EAAE,YAAY,CAAC,KAAK,CAAC,GAAG,OAAO,CAAC;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,KAAK,CAAC,GAAG,IAAI,KAAK,IAAI,CAAC;IACxD,mCAAmC;IACnC,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,YAAY,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,CAAC;IAC1D,yCAAyC;IACzC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACzC,uCAAuC;IACvC,kBAAkB,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAC9D;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,EACpC,IAAI,EACJ,OAAO,EACP,WAAW,EACX,cAAmB,EACnB,YAAY,EACZ,QAAQ,EAAE,eAAoB,EAC9B,KAAK,EAAE,WAAW,EAClB,YAAY,EACZ,cAAc,EACd,cAAc,EACd,kBAAkB,GAClB,EAAE,oBAAoB,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,CAyOjD"}

package/dist/src/components/data-table/useTableState.js

@@ -0,0 +1,223 @@
+/**
+ * useTableState Hook
+ * Manages table state including sorting, filtering, pagination, and search
+ */
+import { useCallback, useEffect, useMemo, useState } from "react";
+/**
+ * Hook to manage table state (sorting, filtering, search, pagination)
+ */
+export function useTableState({ data, columns, defaultSort, defaultFilters = [], searchConfig, pageSize: initialPageSize = 10, total: manualTotal, onSortChange, onFilterChange, onSearchChange, onPaginationChange, }) {
+    // State
+    const [sortConfig, setSortConfig] = useState(defaultSort ?? null);
+    const [filterConfigs, setFilterConfigs] = useState(defaultFilters);
+    const [searchQuery, setSearchQuery] = useState("");
+    const [currentPage, setCurrentPage] = useState(1);
+    const [pageSize, setPageSize] = useState(initialPageSize);
+    // Sync pageSize when initialPageSize changes (e.g. data loads and pagination is false)
+    useEffect(() => {
+        setPageSize(initialPageSize);
+    }, [initialPageSize]);
+    // Get search keys
+    const searchKeys = useMemo(() => {
+        if (!searchConfig)
+            return [];
+        if (typeof searchConfig === "boolean") {
+            // Default: search in all string columns
+            return columns
+                .filter((col) => col.accessorKey)
+                .map((col) => col.accessorKey);
+        }
+        return searchConfig.searchKeys ?? [];
+    }, [searchConfig, columns]);
+    // Filter data based on search query
+    const searchedData = useMemo(() => {
+        if (!searchQuery.trim() || searchKeys.length === 0)
+            return data;
+        const query = searchQuery.toLowerCase();
+        return data.filter((row) => {
+            return searchKeys.some((key) => {
+                const value = row[key];
+                if (value === null || value === undefined)
+                    return false;
+                return String(value).toLowerCase().includes(query);
+            });
+        });
+    }, [data, searchQuery, searchKeys]);
+    // Apply filters
+    const filteredData = useMemo(() => {
+        if (filterConfigs.length === 0)
+            return searchedData;
+        return searchedData.filter((row) => {
+            return filterConfigs.every((filter) => {
+                const value = row[filter.key];
+                const filterValue = filter.value;
+                switch (filter.operator) {
+                    case "equals":
+                        return value === filterValue;
+                    case "contains":
+                        return String(value)
+                            .toLowerCase()
+                            .includes(String(filterValue).toLowerCase());
+                    case "startsWith":
+                        return String(value)
+                            .toLowerCase()
+                            .startsWith(String(filterValue).toLowerCase());
+                    case "endsWith":
+                        return String(value)
+                            .toLowerCase()
+                            .endsWith(String(filterValue).toLowerCase());
+                    case "in":
+                        return Array.isArray(filterValue) && filterValue.includes(value);
+                    default:
+                        return true;
+                }
+            });
+        });
+    }, [searchedData, filterConfigs]);
+    // Apply sorting
+    const sortedData = useMemo(() => {
+        if (!sortConfig)
+            return filteredData;
+        const { key, direction } = sortConfig;
+        const column = columns.find((col) => col.accessorKey === key);
+        return [...filteredData].sort((a, b) => {
+            // Use custom sort function if provided
+            if (column?.sortFn) {
+                return column.sortFn(a, b, direction);
+            }
+            // Default sort
+            const aValue = a[key];
+            const bValue = b[key];
+            if (aValue === bValue)
+                return 0;
+            if (aValue === null || aValue === undefined)
+                return 1;
+            if (bValue === null || bValue === undefined)
+                return -1;
+            // Handle different types
+            if (typeof aValue === "string" && typeof bValue === "string") {
+                const result = aValue.localeCompare(bValue);
+                return direction === "asc" ? result : -result;
+            }
+            if (typeof aValue === "number" && typeof bValue === "number") {
+                return direction === "asc" ? aValue - bValue : bValue - aValue;
+            }
+            if (aValue instanceof Date && bValue instanceof Date) {
+                return direction === "asc"
+                    ? aValue.getTime() - bValue.getTime()
+                    : bValue.getTime() - aValue.getTime();
+            }
+            // Fallback to string comparison
+            const result = String(aValue).localeCompare(String(bValue));
+            return direction === "asc" ? result : -result;
+        });
+    }, [filteredData, sortConfig, columns]);
+    // Pagination
+    const totalPages = Math.ceil((manualTotal ?? sortedData.length) / pageSize);
+    const hasNextPage = currentPage < totalPages;
+    const hasPreviousPage = currentPage > 1;
+    const pageData = useMemo(() => {
+        // If manualTotal is provided, we assume data is already paginated (server-side)
+        if (manualTotal !== undefined) {
+            return sortedData;
+        }
+        const startIndex = (currentPage - 1) * pageSize;
+        const endIndex = startIndex + pageSize;
+        return sortedData.slice(startIndex, endIndex);
+    }, [sortedData, currentPage, pageSize, manualTotal]);
+    // Toggle sort
+    const toggleSort = useCallback((key) => {
+        setSortConfig((prev) => {
+            let newSort;
+            if (!prev || prev.key !== key) {
+                newSort = { key, direction: "asc" };
+            }
+            else if (prev.direction === "asc") {
+                newSort = { key, direction: "desc" };
+            }
+            else {
+                newSort = null; // Clear sort
+            }
+            onSortChange?.(newSort);
+            return newSort;
+        });
+        setCurrentPage(1); // Reset to first page when sorting changes
+    }, [onSortChange]);
+    // Filter management
+    const setFilter = useCallback((filter) => {
+        setFilterConfigs((prev) => {
+            const filtered = prev.filter((f) => f.key !== filter.key);
+            const newFilters = [...filtered, filter];
+            onFilterChange?.(newFilters);
+            return newFilters;
+        });
+        setCurrentPage(1); // Reset to first page when filter changes
+    }, [onFilterChange]);
+    const removeFilter = useCallback((key) => {
+        setFilterConfigs((prev) => {
+            const newFilters = prev.filter((f) => f.key !== key);
+            onFilterChange?.(newFilters);
+            return newFilters;
+        });
+        setCurrentPage(1);
+    }, [onFilterChange]);
+    const clearFilters = useCallback(() => {
+        setFilterConfigs([]);
+        onFilterChange?.([]);
+        setCurrentPage(1);
+    }, [onFilterChange]);
+    // Search management
+    const handleSetSearchQuery = useCallback((query) => {
+        setSearchQuery(query);
+        onSearchChange?.(query);
+        setCurrentPage(1); // Reset to first page when search changes
+    }, [onSearchChange]);
+    // Pagination navigation
+    const nextPage = useCallback(() => {
+        if (hasNextPage) {
+            setCurrentPage((prev) => {
+                const newPage = prev + 1;
+                onPaginationChange?.(newPage, pageSize);
+                return newPage;
+            });
+        }
+    }, [hasNextPage, pageSize, onPaginationChange]);
+    const previousPage = useCallback(() => {
+        if (hasPreviousPage) {
+            setCurrentPage((prev) => {
+                const newPage = prev - 1;
+                onPaginationChange?.(newPage, pageSize);
+                return newPage;
+            });
+        }
+    }, [hasPreviousPage, pageSize, onPaginationChange]);
+    // Page size change
+    const handleSetPageSize = useCallback((size) => {
+        setPageSize(size);
+        setCurrentPage(1); // Reset to first page when page size changes
+        onPaginationChange?.(1, size);
+    }, [onPaginationChange]);
+    return {
+        processedData: sortedData,
+        pageData,
+        sortConfig,
+        setSortConfig,
+        toggleSort,
+        filterConfigs,
+        setFilter,
+        removeFilter,
+        clearFilters,
+        searchQuery,
+        setSearchQuery: handleSetSearchQuery,
+        currentPage,
+        setCurrentPage,
+        pageSize,
+        setPageSize: handleSetPageSize,
+        totalPages,
+        hasNextPage,
+        hasPreviousPage,
+        nextPage,
+        previousPage,
+    };
+}
+//# sourceMappingURL=useTableState.js.map

package/dist/src/components/data-table/useTableState.js.map

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

package/dist/src/components/date-picker/date-picker.d.ts

@@ -0,0 +1,27 @@
+import type { DateRange } from "react-day-picker";
+import { Calendar } from "../calendar/calendar";
+export interface DatePickerProps extends Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "className" | "required" | "disabled"> {
+    date?: Date;
+    onDateChange?: (date: Date | undefined) => void;
+    placeholder?: string;
+    disabled?: React.ComponentProps<typeof Calendar>["disabled"];
+    buttonDisabled?: boolean;
+    className?: string;
+    buttonClassName?: string;
+    formatStr?: string;
+    isLoading?: boolean;
+}
+export declare function DatePicker({ date, onDateChange, placeholder, disabled, buttonDisabled, className, buttonClassName, formatStr, isLoading, ...props }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DateRangePickerProps extends Omit<React.ComponentProps<typeof Calendar>, "mode" | "selected" | "onSelect" | "className" | "defaultMonth" | "numberOfMonths" | "required" | "disabled"> {
+    dateRange?: DateRange;
+    onDateRangeChange?: (range: DateRange | undefined) => void;
+    placeholder?: string;
+    disabled?: React.ComponentProps<typeof Calendar>["disabled"];
+    buttonDisabled?: boolean;
+    className?: string;
+    buttonClassName?: string;
+    formatStr?: string;
+    isLoading?: boolean;
+}
+export declare function DateRangePicker({ dateRange, onDateRangeChange, placeholder, disabled, buttonDisabled, className, buttonClassName, formatStr, isLoading, ...props }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=date-picker.d.ts.map

package/dist/src/components/date-picker/date-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,kBAAkB,CAAC;AAGlD,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAIhD,MAAM,WAAW,eAChB,SAAQ,IAAI,CACX,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EACrC,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,WAAW,GAAG,UAAU,GAAG,UAAU,CACxE;IACD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,GAAG,SAAS,KAAK,IAAI,CAAC;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,UAAU,CAAC,EAC1B,IAAI,EACJ,YAAY,EACZ,WAA2B,EAC3B,QAAQ,EACR,cAAsB,EACtB,SAAS,EACT,eAAe,EACf,SAAiB,EACjB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,eAAe,2CAqCjB;AAED,MAAM,WAAW,oBAChB,SAAQ,IAAI,CACX,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,EACnC,MAAM,GACN,UAAU,GACV,UAAU,GACV,WAAW,GACX,cAAc,GACd,gBAAgB,GAChB,UAAU,GACV,UAAU,CACZ;IACD,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,GAAG,SAAS,KAAK,IAAI,CAAC;IAC3D,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,QAAQ,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7D,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC/B,SAAS,EACT,iBAAiB,EACjB,WAAiC,EACjC,QAAQ,EACR,cAAsB,EACtB,SAAS,EACT,eAAe,EACf,SAAuB,EACvB,SAAiB,EACjB,GAAG,KAAK,EACR,EAAE,oBAAoB,2CAgDtB"}

package/dist/src/components/date-picker/date-picker.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { Button } from "../button/button";
+import { Calendar } from "../calendar/calendar";
+import { Popover, PopoverContent, PopoverTrigger } from "../popover";
+import { Skeleton } from "../skeleton/skeleton";
+export function DatePicker({ date, onDateChange, placeholder = "Pick a date", disabled, buttonDisabled = false, className, buttonClassName, formatStr = "PPP", isLoading = false, ...props }) {
+    if (isLoading) {
+        return (_jsx(Skeleton, { className: cn("h-10 w-[280px] rounded-md", buttonClassName) }));
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: cn("w-[280px] justify-start text-left font-normal", !date && "text-muted-foreground", buttonClassName), disabled: buttonDisabled, children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), date ? format(date, formatStr) : _jsx("span", { children: placeholder })] }) }), _jsx(PopoverContent, { className: cn("w-auto p-0", className), align: "start", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: onDateChange || (() => { }), required: false, disabled: disabled, autoFocus: true, ...props }) })] }));
+}
+export function DateRangePicker({ dateRange, onDateRangeChange, placeholder = "Pick a date range", disabled, buttonDisabled = false, className, buttonClassName, formatStr = "LLL dd, y", isLoading = false, ...props }) {
+    if (isLoading) {
+        return (_jsx(Skeleton, { className: cn("h-10 w-[300px] rounded-md", buttonClassName) }));
+    }
+    return (_jsxs(Popover, { children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", className: cn("w-[300px] justify-start text-left font-normal", !dateRange && "text-muted-foreground", buttonClassName), disabled: buttonDisabled, children: [_jsx(CalendarIcon, { className: "mr-2 h-4 w-4" }), dateRange?.from ? (dateRange.to ? (_jsxs(_Fragment, { children: [format(dateRange.from, formatStr), " -", " ", format(dateRange.to, formatStr)] })) : (format(dateRange.from, formatStr))) : (_jsx("span", { children: placeholder }))] }) }), _jsx(PopoverContent, { className: cn("w-auto p-0", className), align: "start", children: _jsx(Calendar, { mode: "range", defaultMonth: dateRange?.from, selected: dateRange, onSelect: onDateRangeChange || (() => { }), numberOfMonths: 2, disabled: disabled, ...props }) })] }));
+}
+//# sourceMappingURL=date-picker.js.map

package/dist/src/components/date-picker/date-picker.js.map

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

package/dist/src/components/date-picker/date-picker.stories.d.ts

@@ -0,0 +1,44 @@
+import type { StoryObj } from "@storybook/react";
+import { DatePicker } from "./date-picker";
+declare const meta: {
+    title: string;
+    component: typeof DatePicker;
+    parameters: {
+        layout: string;
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+    tags: string[];
+    argTypes: {
+        disabled: {
+            control: "boolean";
+            description: string;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithDefaultDate: Story;
+export declare const CustomPlaceholder: Story;
+export declare const CustomFormat: Story;
+export declare const DisabledState: Story;
+export declare const DisabledDates: Story;
+export declare const DateRangeLimit: Story;
+export declare const CustomButtonStyle: Story;
+export declare const WithCallback: Story;
+export declare const DateRange: Story;
+export declare const DateRangeWithDefault: Story;
+export declare const DateRangeCustomPlaceholder: Story;
+export declare const DateRangeCustomFormat: Story;
+export declare const DateRangeDisabled: Story;
+export declare const DateRangeWithCallback: Story;
+export declare const Comparison: Story;
+//# sourceMappingURL=date-picker.stories.d.ts.map

package/dist/src/components/date-picker/date-picker.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,UAAU,EAAmB,MAAM,eAAe,CAAC;AAE5D,QAAA,MAAM,IAAI;;;;;;;;;;;;;;;;;;;;;;CAuByB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAY/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KA+B1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAM3B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAuB3B,CAAC;AAEF,eAAO,MAAM,cAAc,EAAE,KAqB5B,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAa/B,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAuB1B,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAUvB,CAAC;AAEF,eAAO,MAAM,oBAAoB,EAAE,KAWlC,CAAC;AAEF,eAAO,MAAM,0BAA0B,EAAE,KAcxC,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAyCnC,CAAC;AAEF,eAAO,MAAM,iBAAiB,EAAE,KAe/B,CAAC;AAEF,eAAO,MAAM,qBAAqB,EAAE,KAgCnC,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,KAuBxB,CAAC"}

package/dist/src/components/date-picker/date-picker.stories.js

@@ -0,0 +1,165 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { DatePicker, DateRangePicker } from "./date-picker";
+const meta = {
+    title: "Components/DatePicker",
+    component: DatePicker,
+    parameters: {
+        layout: "centered",
+        docs: {
+            description: {
+                component: "A date picker component that combines a popover with a calendar, allowing users to select single dates or date ranges with a user-friendly interface.",
+            },
+        },
+    },
+    tags: ["autodocs"],
+    argTypes: {
+        disabled: {
+            control: "boolean",
+            description: "Disable the date picker",
+        },
+        placeholder: {
+            control: "text",
+            description: "Placeholder text when no date is selected",
+        },
+    },
+};
+export default meta;
+export const Default = {
+    render: () => {
+        const [date, setDate] = useState();
+        return _jsx(DatePicker, { date: date, onDateChange: setDate });
+    },
+};
+export const WithDefaultDate = {
+    render: () => {
+        const [date, setDate] = useState(new Date());
+        return _jsx(DatePicker, { date: date, onDateChange: setDate });
+    },
+};
+export const CustomPlaceholder = {
+    render: () => {
+        const [date, setDate] = useState();
+        return (_jsx(DatePicker, { date: date, onDateChange: setDate, placeholder: "Select a date" }));
+    },
+};
+export const CustomFormat = {
+    render: () => {
+        const [date, setDate] = useState(new Date());
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Default format (PPP):" }), _jsx(DatePicker, { date: date, onDateChange: setDate })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Short format (P):" }), _jsx(DatePicker, { date: date, onDateChange: setDate, formatStr: "P" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Custom format (yyyy-MM-dd):" }), _jsx(DatePicker, { date: date, onDateChange: setDate, formatStr: "yyyy-MM-dd" })] })] }));
+    },
+};
+export const DisabledState = {
+    render: () => {
+        const [date, setDate] = useState(new Date());
+        return _jsx(DatePicker, { date: date, onDateChange: setDate, disabled: true });
+    },
+};
+export const DisabledDates = {
+    render: () => {
+        const [date, setDate] = useState();
+        const disabledDates = (date) => {
+            const day = date.getDay();
+            // Disable weekends
+            return day === 0 || day === 6;
+        };
+        return (_jsxs("div", { children: [_jsx(DatePicker, { date: date, onDateChange: setDate, disabled: disabledDates }), _jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: "Weekends are disabled" })] }));
+    },
+};
+export const DateRangeLimit = {
+    render: () => {
+        const [date, setDate] = useState();
+        const today = new Date();
+        const thirtyDaysFromNow = new Date(today);
+        thirtyDaysFromNow.setDate(today.getDate() + 30);
+        return (_jsxs("div", { children: [_jsx(DatePicker, { date: date, onDateChange: setDate, disabled: { before: today, after: thirtyDaysFromNow } }), _jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: "Only the next 30 days are selectable" })] }));
+    },
+};
+export const CustomButtonStyle = {
+    render: () => {
+        const [date, setDate] = useState();
+        return (_jsx(DatePicker, { date: date, onDateChange: setDate, buttonClassName: "w-full", placeholder: "Full width button" }));
+    },
+};
+export const WithCallback = {
+    render: () => {
+        const [date, setDate] = useState();
+        const [message, setMessage] = useState("");
+        const handleDateChange = (newDate) => {
+            setDate(newDate);
+            if (newDate) {
+                setMessage(`Selected: ${newDate.toLocaleDateString()}`);
+            }
+            else {
+                setMessage("Date cleared");
+            }
+        };
+        return (_jsxs("div", { children: [_jsx(DatePicker, { date: date, onDateChange: handleDateChange }), message && (_jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: message }))] }));
+    },
+};
+export const DateRange = {
+    render: () => {
+        const [dateRange, setDateRange] = useState();
+        return (_jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange }));
+    },
+};
+export const DateRangeWithDefault = {
+    render: () => {
+        const [dateRange, setDateRange] = useState({
+            from: new Date(),
+            to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // 7 days from now
+        });
+        return (_jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange }));
+    },
+};
+export const DateRangeCustomPlaceholder = {
+    render: () => {
+        const [dateRange, setDateRange] = useState();
+        return (_jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange, placeholder: "Select date range" }));
+    },
+};
+export const DateRangeCustomFormat = {
+    render: () => {
+        const [dateRange, setDateRange] = useState({
+            from: new Date(),
+            to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+        });
+        return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Default format (LLL dd, y):" }), _jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Short format (P):" }), _jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange, formatStr: "P" })] }), _jsxs("div", { children: [_jsx("p", { className: "mb-2 text-sm text-muted-foreground", children: "Custom format (MM/dd/yyyy):" }), _jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange, formatStr: "MM/dd/yyyy" })] })] }));
+    },
+};
+export const DateRangeDisabled = {
+    render: () => {
+        const [dateRange, setDateRange] = useState({
+            from: new Date(),
+            to: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000),
+        });
+        return (_jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange, buttonDisabled: true }));
+    },
+};
+export const DateRangeWithCallback = {
+    render: () => {
+        const [dateRange, setDateRange] = useState();
+        const [message, setMessage] = useState("");
+        const handleRangeChange = (range) => {
+            setDateRange(range);
+            if (range?.from && range?.to) {
+                setMessage(`Selected: ${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`);
+            }
+            else if (range?.from) {
+                setMessage(`Start date: ${range.from.toLocaleDateString()}`);
+            }
+            else {
+                setMessage("Range cleared");
+            }
+        };
+        return (_jsxs("div", { children: [_jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: handleRangeChange }), message && (_jsx("p", { className: "mt-4 text-sm text-muted-foreground", children: message }))] }));
+    },
+};
+export const Comparison = {
+    render: () => {
+        const [singleDate, setSingleDate] = useState();
+        const [dateRange, setDateRange] = useState();
+        return (_jsxs("div", { className: "space-y-6", children: [_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium", children: "Single Date Picker" }), _jsx(DatePicker, { date: singleDate, onDateChange: setSingleDate })] }), _jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-medium", children: "Date Range Picker" }), _jsx(DateRangePicker, { dateRange: dateRange, onDateRangeChange: setDateRange })] })] }));
+    },
+};
+//# sourceMappingURL=date-picker.stories.js.map

package/dist/src/components/date-picker/date-picker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.stories.js","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.stories.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/date-picker/date-picker.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=date-picker.test.d.ts.map

package/dist/src/components/date-picker/date-picker.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker.test.d.ts","sourceRoot":"","sources":["../../../../src/components/date-picker/date-picker.test.tsx"],"names":[],"mappings":""}