@uipath/apollo-wind 0.7.2-pr188.4865fad

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

@@ -0,0 +1,252 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { ArrowDown, ArrowUp, ArrowUpDown, ChevronDown } from "lucide-react";
+import { Button } from "./button.js";
+import { Checkbox } from "./checkbox.js";
+import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu.js";
+import { EditableCell } from "./editable-cell.js";
+import { Input } from "./input.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
+import { flexRender, getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
+function DataTable({ columns, data, searchKey, searchPlaceholder = 'Search...', showColumnToggle = true, showPagination = true, pageSize = 10, editable = false, onCellUpdate, resizable = false, compact = false, columnToggleText = 'Columns' }) {
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const processedColumns = useMemo(()=>{
+        if (!editable || !onCellUpdate) return columns;
+        return columns.map((col)=>{
+            const meta = col.meta;
+            if (!meta?.type || col.cell) return col;
+            return {
+                ...col,
+                cell: (cellContext)=>/*#__PURE__*/ jsx(EditableCell, {
+                        cell: cellContext,
+                        onUpdate: (value)=>{
+                            onCellUpdate(cellContext.row.index, cellContext.column.id, value);
+                        }
+                    })
+            };
+        });
+    }, [
+        columns,
+        editable,
+        onCellUpdate
+    ]);
+    const table = useReactTable({
+        data,
+        columns: processedColumns,
+        onSortingChange: setSorting,
+        onColumnFiltersChange: setColumnFilters,
+        getCoreRowModel: getCoreRowModel(),
+        getPaginationRowModel: getPaginationRowModel(),
+        getSortedRowModel: getSortedRowModel(),
+        getFilteredRowModel: getFilteredRowModel(),
+        onColumnVisibilityChange: setColumnVisibility,
+        onRowSelectionChange: setRowSelection,
+        enableColumnResizing: resizable,
+        columnResizeMode: 'onChange',
+        state: {
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection
+        },
+        initialState: {
+            pagination: {
+                pageSize
+            }
+        }
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "w-full",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center gap-4 py-4",
+                children: [
+                    searchKey && /*#__PURE__*/ jsx(Input, {
+                        placeholder: searchPlaceholder,
+                        value: table.getColumn(searchKey)?.getFilterValue() ?? '',
+                        onChange: (event)=>table.getColumn(searchKey)?.setFilterValue(event.target.value),
+                        className: "max-w-sm"
+                    }),
+                    showColumnToggle && /*#__PURE__*/ jsxs(DropdownMenu, {
+                        children: [
+                            /*#__PURE__*/ jsx(DropdownMenuTrigger, {
+                                asChild: true,
+                                children: /*#__PURE__*/ jsxs(Button, {
+                                    variant: "outline",
+                                    className: "ml-auto",
+                                    children: [
+                                        columnToggleText,
+                                        " ",
+                                        /*#__PURE__*/ jsx(ChevronDown, {
+                                            className: "ml-2 h-4 w-4"
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ jsx(DropdownMenuContent, {
+                                align: "end",
+                                children: table.getAllColumns().filter((column)=>column.getCanHide()).map((column)=>/*#__PURE__*/ jsx(DropdownMenuCheckboxItem, {
+                                        className: "capitalize",
+                                        checked: column.getIsVisible(),
+                                        onCheckedChange: (value)=>column.toggleVisibility(!!value),
+                                        children: column.id
+                                    }, column.id))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-md border overflow-auto",
+                children: /*#__PURE__*/ jsxs(Table, {
+                    style: resizable ? {
+                        width: table.getTotalSize(),
+                        tableLayout: 'fixed'
+                    } : void 0,
+                    children: [
+                        /*#__PURE__*/ jsx(TableHeader, {
+                            children: table.getHeaderGroups().map((headerGroup)=>/*#__PURE__*/ jsx(TableRow, {
+                                    children: headerGroup.headers.map((header)=>{
+                                        const { column } = header;
+                                        return /*#__PURE__*/ jsxs(TableHead, {
+                                            className: compact ? 'relative h-8 px-2 py-1' : 'relative',
+                                            style: {
+                                                width: resizable ? header.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
+                                                minWidth: column.columnDef.minSize,
+                                                maxWidth: column.columnDef.maxSize
+                                            },
+                                            children: [
+                                                header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()),
+                                                resizable && header.column.getCanResize() && /*#__PURE__*/ jsx("div", {
+                                                    onMouseDown: header.getResizeHandler(),
+                                                    onTouchStart: header.getResizeHandler(),
+                                                    className: "absolute -right-1 top-0 z-10 h-full w-2 cursor-col-resize select-none touch-none group",
+                                                    children: /*#__PURE__*/ jsx("div", {
+                                                        className: `h-full w-px mx-auto ${header.column.getIsResizing() ? 'bg-primary' : 'group-hover:bg-primary/50'}`
+                                                    })
+                                                })
+                                            ]
+                                        }, header.id);
+                                    })
+                                }, headerGroup.id))
+                        }),
+                        /*#__PURE__*/ jsx(TableBody, {
+                            children: table.getRowModel().rows?.length ? table.getRowModel().rows.map((row)=>/*#__PURE__*/ jsx(TableRow, {
+                                    "data-state": row.getIsSelected() && 'selected',
+                                    children: row.getVisibleCells().map((cell)=>{
+                                        const { column } = cell;
+                                        return /*#__PURE__*/ jsx(TableCell, {
+                                            className: compact ? 'truncate px-2 py-1' : 'truncate',
+                                            style: {
+                                                width: resizable ? cell.column.getSize() : 150 !== column.getSize() ? column.getSize() : void 0,
+                                                minWidth: column.columnDef.minSize,
+                                                maxWidth: column.columnDef.maxSize
+                                            },
+                                            children: flexRender(cell.column.columnDef.cell, cell.getContext())
+                                        }, cell.id);
+                                    })
+                                }, row.id)) : /*#__PURE__*/ jsx(TableRow, {
+                                children: /*#__PURE__*/ jsx(TableCell, {
+                                    colSpan: columns.length,
+                                    className: "h-24 text-center",
+                                    children: "No results."
+                                })
+                            })
+                        })
+                    ]
+                })
+            }),
+            showPagination && /*#__PURE__*/ jsxs("div", {
+                className: "flex items-center justify-between space-x-2 py-4",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex-1 text-sm text-muted-foreground",
+                        children: [
+                            table.getFilteredSelectedRowModel().rows.length,
+                            " of",
+                            ' ',
+                            table.getFilteredRowModel().rows.length,
+                            " row(s) selected."
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center space-x-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "outline",
+                                size: "sm",
+                                onClick: ()=>table.previousPage(),
+                                disabled: !table.getCanPreviousPage(),
+                                children: "Previous"
+                            }),
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "text-sm font-medium",
+                                children: [
+                                    "Page ",
+                                    table.getState().pagination.pageIndex + 1,
+                                    " of ",
+                                    table.getPageCount()
+                                ]
+                            }),
+                            /*#__PURE__*/ jsx(Button, {
+                                variant: "outline",
+                                size: "sm",
+                                onClick: ()=>table.nextPage(),
+                                disabled: !table.getCanNextPage(),
+                                children: "Next"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+function DataTableColumnHeader({ column, title, children }) {
+    const sorted = column.getIsSorted();
+    const handleClick = ()=>{
+        if ('asc' === sorted) column.toggleSorting(true);
+        else if ('desc' === sorted) column.clearSorting();
+        else column.toggleSorting(false);
+    };
+    return /*#__PURE__*/ jsxs(Button, {
+        variant: "ghost",
+        size: "sm",
+        className: "-ml-3 h-8 data-[state=open]:bg-accent",
+        onClick: handleClick,
+        children: [
+            /*#__PURE__*/ jsx("span", {
+                children: title
+            }),
+            children,
+            'asc' === sorted ? /*#__PURE__*/ jsx(ArrowUp, {
+                className: "ml-2 h-4 w-4"
+            }) : 'desc' === sorted ? /*#__PURE__*/ jsx(ArrowDown, {
+                className: "ml-2 h-4 w-4"
+            }) : /*#__PURE__*/ jsx(ArrowUpDown, {
+                className: "ml-2 h-4 w-4"
+            })
+        ]
+    });
+}
+function DataTableSelectColumn() {
+    return {
+        id: 'select',
+        header: ({ table })=>/*#__PURE__*/ jsx(Checkbox, {
+                checked: table.getIsAllPageRowsSelected() || table.getIsSomePageRowsSelected() && 'indeterminate',
+                onCheckedChange: (value)=>table.toggleAllPageRowsSelected(!!value),
+                "aria-label": "Select all"
+            }),
+        cell: ({ row })=>/*#__PURE__*/ jsx(Checkbox, {
+                checked: row.getIsSelected(),
+                onCheckedChange: (value)=>row.toggleSelected(!!value),
+                "aria-label": "Select row"
+            }),
+        enableSorting: false,
+        enableHiding: false
+    };
+}
+export { DataTable, DataTableColumnHeader, DataTableSelectColumn };

package/dist/components/ui/date-picker.cjs

@@ -0,0 +1,118 @@
+'use client';
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DatePicker: ()=>DatePicker,
+    DateRangePicker: ()=>DateRangePicker
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_date_fns_namespaceObject = require("date-fns");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_button_cjs_namespaceObject = require("./button.cjs");
+const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
+const external_popover_cjs_namespaceObject = require("./popover.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    variant: "outline",
+                    "aria-label": value ? `Selected date: ${(0, external_date_fns_namespaceObject.format)(value, 'PPP')}` : placeholder,
+                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', !value && 'text-muted-foreground', className),
+                    disabled: disabled,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
+                        value ? (0, external_date_fns_namespaceObject.format)(value, 'PPP') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: placeholder
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                className: "w-auto p-0",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                    mode: "single",
+                    selected: value,
+                    onSelect: onValueChange,
+                    initialFocus: true,
+                    ...calendarProps
+                })
+            })
+        ]
+    });
+}
+function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }) {
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    variant: "outline",
+                    "aria-label": value?.from ? value.to ? `Selected range: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')} to ${(0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')}` : `Selected date: ${(0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y')}` : placeholder,
+                    className: (0, index_cjs_namespaceObject.cn)('w-[300px] justify-start text-left font-normal', !value && 'text-muted-foreground', className),
+                    disabled: disabled,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {}),
+                        value?.from ? value.to ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
+                            children: [
+                                (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y'),
+                                " - ",
+                                (0, external_date_fns_namespaceObject.format)(value.to, 'LLL dd, y')
+                            ]
+                        }) : (0, external_date_fns_namespaceObject.format)(value.from, 'LLL dd, y') : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
+                            children: placeholder
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                className: "w-auto p-0",
+                align: "start",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                    initialFocus: true,
+                    mode: "range",
+                    defaultMonth: value?.from,
+                    selected: value,
+                    onSelect: onValueChange,
+                    numberOfMonths: 2,
+                    required: false,
+                    ...calendarProps
+                })
+            })
+        ]
+    });
+}
+exports.DatePicker = __webpack_exports__.DatePicker;
+exports.DateRangePicker = __webpack_exports__.DateRangePicker;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DatePicker",
+    "DateRangePicker"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

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

@@ -0,0 +1,21 @@
+import type { DateRange } from 'react-day-picker';
+import type * as React from 'react';
+import { Calendar } from './calendar';
+export interface DatePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus'>;
+}
+export declare function DatePicker({ value, onValueChange, disabled, placeholder, className, calendarProps, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export interface DateRangePickerProps {
+    value?: DateRange;
+    onValueChange?: (range: DateRange | undefined) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    calendarProps?: Omit<React.ComponentProps<typeof Calendar>, 'mode' | 'selected' | 'onSelect' | 'initialFocus' | 'defaultMonth' | 'numberOfMonths' | 'required'>;
+}
+export declare function DateRangePicker({ value, onValueChange, disabled, placeholder, className, calendarProps, }: DateRangePickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,81 @@
+'use client';
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { format } from "date-fns";
+import { CalendarIcon } from "lucide-react";
+import { Button } from "./button.js";
+import { Calendar } from "./calendar.js";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { cn } from "../../lib/index.js";
+function DatePicker({ value, onValueChange, disabled, placeholder = 'Pick a date', className, calendarProps }) {
+    return /*#__PURE__*/ jsxs(Popover, {
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "outline",
+                    "aria-label": value ? `Selected date: ${format(value, 'PPP')}` : placeholder,
+                    className: cn('w-full justify-start text-left font-normal', !value && 'text-muted-foreground', className),
+                    disabled: disabled,
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarIcon, {}),
+                        value ? format(value, 'PPP') : /*#__PURE__*/ jsx("span", {
+                            children: placeholder
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(PopoverContent, {
+                className: "w-auto p-0",
+                children: /*#__PURE__*/ jsx(Calendar, {
+                    mode: "single",
+                    selected: value,
+                    onSelect: onValueChange,
+                    initialFocus: true,
+                    ...calendarProps
+                })
+            })
+        ]
+    });
+}
+function DateRangePicker({ value, onValueChange, disabled, placeholder = 'Pick a date range', className, calendarProps }) {
+    return /*#__PURE__*/ jsxs(Popover, {
+        children: [
+            /*#__PURE__*/ jsx(PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ jsxs(Button, {
+                    variant: "outline",
+                    "aria-label": value?.from ? value.to ? `Selected range: ${format(value.from, 'LLL dd, y')} to ${format(value.to, 'LLL dd, y')}` : `Selected date: ${format(value.from, 'LLL dd, y')}` : placeholder,
+                    className: cn('w-[300px] justify-start text-left font-normal', !value && 'text-muted-foreground', className),
+                    disabled: disabled,
+                    children: [
+                        /*#__PURE__*/ jsx(CalendarIcon, {}),
+                        value?.from ? value.to ? /*#__PURE__*/ jsxs(Fragment, {
+                            children: [
+                                format(value.from, 'LLL dd, y'),
+                                " - ",
+                                format(value.to, 'LLL dd, y')
+                            ]
+                        }) : format(value.from, 'LLL dd, y') : /*#__PURE__*/ jsx("span", {
+                            children: placeholder
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(PopoverContent, {
+                className: "w-auto p-0",
+                align: "start",
+                children: /*#__PURE__*/ jsx(Calendar, {
+                    initialFocus: true,
+                    mode: "range",
+                    defaultMonth: value?.from,
+                    selected: value,
+                    onSelect: onValueChange,
+                    numberOfMonths: 2,
+                    required: false,
+                    ...calendarProps
+                })
+            })
+        ]
+    });
+}
+export { DatePicker, DateRangePicker };

package/dist/components/ui/datetime-picker.cjs

@@ -0,0 +1,154 @@
+"use strict";
+var __webpack_require__ = {};
+(()=>{
+    __webpack_require__.d = (exports1, definition)=>{
+        for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
+            enumerable: true,
+            get: definition[key]
+        });
+    };
+})();
+(()=>{
+    __webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
+})();
+(()=>{
+    __webpack_require__.r = (exports1)=>{
+        if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
+            value: 'Module'
+        });
+        Object.defineProperty(exports1, '__esModule', {
+            value: true
+        });
+    };
+})();
+var __webpack_exports__ = {};
+__webpack_require__.r(__webpack_exports__);
+__webpack_require__.d(__webpack_exports__, {
+    DateTimePicker: ()=>DateTimePicker
+});
+const jsx_runtime_namespaceObject = require("react/jsx-runtime");
+const external_react_namespaceObject = require("react");
+const external_date_fns_namespaceObject = require("date-fns");
+const external_lucide_react_namespaceObject = require("lucide-react");
+const external_button_cjs_namespaceObject = require("./button.cjs");
+const external_calendar_cjs_namespaceObject = require("./calendar.cjs");
+const external_popover_cjs_namespaceObject = require("./popover.cjs");
+const external_input_cjs_namespaceObject = require("./input.cjs");
+const external_label_cjs_namespaceObject = require("./label.cjs");
+const index_cjs_namespaceObject = require("../../lib/index.cjs");
+function DateTimePicker({ value, onValueChange, disabled, placeholder = 'Pick a date and time', className, use12Hour = false }) {
+    const [open, setOpen] = external_react_namespaceObject.useState(false);
+    const [selectedDate, setSelectedDate] = external_react_namespaceObject.useState(value);
+    const [timeValue, setTimeValue] = external_react_namespaceObject.useState(value ? (0, external_date_fns_namespaceObject.format)(value, use12Hour ? 'hh:mm a' : 'HH:mm') : '');
+    const handleDateSelect = (date)=>{
+        if (!date) return;
+        if (selectedDate) {
+            date.setHours(selectedDate.getHours());
+            date.setMinutes(selectedDate.getMinutes());
+            date.setSeconds(selectedDate.getSeconds());
+        }
+        setSelectedDate(date);
+        onValueChange?.(date);
+    };
+    const handleTimeChange = (e)=>{
+        const time = e.target.value;
+        setTimeValue(time);
+        if (!selectedDate) return;
+        const [hours, minutes] = time.split(':').map(Number);
+        const newDate = new Date(selectedDate);
+        newDate.setHours(hours);
+        newDate.setMinutes(minutes);
+        setSelectedDate(newDate);
+        onValueChange?.(newDate);
+    };
+    const formatDisplayValue = ()=>{
+        if (!selectedDate) return placeholder;
+        const datePart = (0, external_date_fns_namespaceObject.format)(selectedDate, 'PPP');
+        const timePart = (0, external_date_fns_namespaceObject.format)(selectedDate, use12Hour ? 'hh:mm a' : 'HH:mm');
+        return `${datePart} at ${timePart}`;
+    };
+    return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.Popover, {
+        open: open,
+        onOpenChange: setOpen,
+        children: [
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverTrigger, {
+                asChild: true,
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_button_cjs_namespaceObject.Button, {
+                    variant: "outline",
+                    className: (0, index_cjs_namespaceObject.cn)('w-full justify-start text-left font-normal', !selectedDate && 'text-muted-foreground', className),
+                    disabled: disabled,
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.CalendarIcon, {
+                            className: "mr-2 h-4 w-4"
+                        }),
+                        formatDisplayValue()
+                    ]
+                })
+            }),
+            /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_popover_cjs_namespaceObject.PopoverContent, {
+                className: "w-auto p-0",
+                align: "start",
+                children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                    className: "p-3 space-y-3",
+                    children: [
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_calendar_cjs_namespaceObject.Calendar, {
+                            mode: "single",
+                            selected: selectedDate,
+                            onSelect: handleDateSelect,
+                            initialFocus: true
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "border-t pt-3 space-y-2",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_label_cjs_namespaceObject.Label, {
+                                    className: "text-sm font-medium flex items-center gap-2",
+                                    children: [
+                                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Clock, {
+                                            className: "h-4 w-4"
+                                        }),
+                                        "Time"
+                                    ]
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_input_cjs_namespaceObject.Input, {
+                                    type: "time",
+                                    value: timeValue,
+                                    onChange: handleTimeChange,
+                                    className: "w-full"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
+                            className: "flex gap-2",
+                            children: [
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                    variant: "outline",
+                                    className: "w-full",
+                                    onClick: ()=>{
+                                        setSelectedDate(void 0);
+                                        setTimeValue('');
+                                        onValueChange?.(void 0);
+                                        setOpen(false);
+                                    },
+                                    children: "Clear"
+                                }),
+                                /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_button_cjs_namespaceObject.Button, {
+                                    className: "w-full",
+                                    onClick: ()=>setOpen(false),
+                                    disabled: !selectedDate,
+                                    children: "Done"
+                                })
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+exports.DateTimePicker = __webpack_exports__.DateTimePicker;
+for(var __webpack_i__ in __webpack_exports__)if (-1 === [
+    "DateTimePicker"
+].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
+Object.defineProperty(exports, '__esModule', {
+    value: true
+});

package/dist/components/ui/datetime-picker.d.ts

@@ -0,0 +1,9 @@
+export interface DateTimePickerProps {
+    value?: Date;
+    onValueChange?: (date: Date | undefined) => void;
+    disabled?: boolean;
+    placeholder?: string;
+    className?: string;
+    use12Hour?: boolean;
+}
+export declare function DateTimePicker({ value, onValueChange, disabled, placeholder, className, use12Hour, }: DateTimePickerProps): import("react/jsx-runtime").JSX.Element;