pixelize-design-library 2.2.198 → 2.3.1-beta.1

package/dist/components-v2/DatePicker/Calendar.js

@@ -0,0 +1,212 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Calendar = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const utils_2 = require("./utils");
+exports.Calendar = React.forwardRef(({ viewDate, onViewDateChange, selected, rangeStart, rangeEnd, onSelectDate, mode, constraints = {}, weekStartsOn = 0, locale, compact = false, }, ref) => {
+    const [pane, setPane] = React.useState("days");
+    const [focusDate, setFocusDate] = React.useState((0, utils_2.startOfDay)(viewDate));
+    const gridRef = React.useRef(null);
+    React.useEffect(() => {
+        if (focusDate.getMonth() !== viewDate.getMonth() ||
+            focusDate.getFullYear() !== viewDate.getFullYear()) {
+            setFocusDate((0, utils_2.startOfDay)(viewDate));
+        }
+    }, [viewDate, focusDate]);
+    const moveFocus = (next) => {
+        if (next.getMonth() !== viewDate.getMonth() ||
+            next.getFullYear() !== viewDate.getFullYear()) {
+            onViewDateChange(next);
+        }
+        setFocusDate((0, utils_2.startOfDay)(next));
+        requestAnimationFrame(() => {
+            var _a;
+            const node = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`[data-date="${next.toDateString()}"]`);
+            node === null || node === void 0 ? void 0 : node.focus();
+        });
+    };
+    const cells = React.useMemo(() => (0, utils_2.buildMonthGrid)(viewDate, weekStartsOn), [viewDate, weekStartsOn]);
+    const weekdayLabels = React.useMemo(() => (0, utils_2.getWeekdayHeaders)(weekStartsOn, locale), [weekStartsOn, locale]);
+    const monthLabel = (0, utils_2.formatDate)(viewDate, "MMMM");
+    const yearLabel = (0, utils_2.formatDate)(viewDate, "yyyy");
+    const handleDayKeyDown = (event, cellDate) => {
+        const handled = (next) => {
+            event.preventDefault();
+            moveFocus(next);
+        };
+        switch (event.key) {
+            case "ArrowLeft":
+                return handled((0, utils_2.addDays)(cellDate, -1));
+            case "ArrowRight":
+                return handled((0, utils_2.addDays)(cellDate, 1));
+            case "ArrowUp":
+                return handled((0, utils_2.addDays)(cellDate, -7));
+            case "ArrowDown":
+                return handled((0, utils_2.addDays)(cellDate, 7));
+            case "Home":
+                return handled((0, utils_2.addDays)(cellDate, -cellDate.getDay()));
+            case "End":
+                return handled((0, utils_2.addDays)(cellDate, 6 - cellDate.getDay()));
+            case "PageUp":
+                return handled((0, utils_2.addMonths)(cellDate, event.shiftKey ? -12 : -1));
+            case "PageDown":
+                return handled((0, utils_2.addMonths)(cellDate, event.shiftKey ? 12 : 1));
+            case "Enter":
+            case " ":
+                event.preventDefault();
+                if (!(0, utils_2.isDateDisabled)(cellDate, constraints))
+                    onSelectDate(cellDate);
+                return;
+            default:
+                return;
+        }
+    };
+    return (React.createElement("div", { ref: ref, className: (0, utils_1.cn)("select-none", compact ? "p-2" : "p-3"), role: "application", "aria-label": "Calendar" },
+        React.createElement(CalendarHeader, { pane: pane, setPane: setPane, viewDate: viewDate, onViewDateChange: onViewDateChange, monthLabel: monthLabel, yearLabel: yearLabel, constraints: constraints }),
+        pane === "days" && (React.createElement("div", { ref: gridRef, role: "grid", "aria-label": `${monthLabel} ${yearLabel}`, className: "mt-2" },
+            React.createElement("div", { className: "grid grid-cols-7 gap-0 text-center text-[11px] font-medium text-muted-foreground" }, weekdayLabels.map((label) => (React.createElement("span", { key: label, className: "py-1" }, label)))),
+            React.createElement("div", { role: "rowgroup", className: "grid grid-cols-7 gap-0.5" }, cells.map((cell) => {
+                const disabled = (0, utils_2.isDateDisabled)(cell.date, constraints);
+                const isSelected = mode === "single"
+                    ? selected && (0, utils_2.isSameDay)(cell.date, selected)
+                    : !!((rangeStart && (0, utils_2.isSameDay)(cell.date, rangeStart)) ||
+                        (rangeEnd && (0, utils_2.isSameDay)(cell.date, rangeEnd)));
+                const inRange = mode === "range" &&
+                    rangeStart &&
+                    rangeEnd &&
+                    (0, utils_2.isAfter)(cell.date, rangeStart) &&
+                    (0, utils_2.isBefore)(cell.date, rangeEnd);
+                const isFocused = (0, utils_2.isSameDay)(cell.date, focusDate);
+                return (React.createElement(DayCell, { key: cell.date.toISOString(), date: cell.date, inCurrentMonth: cell.inCurrentMonth, isToday: cell.isToday, isSelected: !!isSelected, inRange: !!inRange, disabled: disabled, focusable: isFocused, onSelect: () => {
+                        if (!disabled)
+                            onSelectDate(cell.date);
+                        setFocusDate((0, utils_2.startOfDay)(cell.date));
+                    }, onKeyDown: (event) => handleDayKeyDown(event, cell.date) }));
+            })))),
+        pane === "months" && (React.createElement(MonthPane, { viewDate: viewDate, constraints: constraints, onSelect: (monthIndex) => {
+                const next = new Date(viewDate);
+                next.setMonth(monthIndex);
+                onViewDateChange(next);
+                setPane("days");
+            } })),
+        pane === "years" && (React.createElement(YearPane, { viewDate: viewDate, constraints: constraints, onSelect: (year) => {
+                const next = new Date(viewDate);
+                next.setFullYear(year);
+                onViewDateChange(next);
+                setPane("months");
+            } }))));
+});
+exports.Calendar.displayName = "Calendar";
+function CalendarHeader({ pane, setPane, viewDate, onViewDateChange, monthLabel, yearLabel, constraints, }) {
+    const goPrev = () => {
+        if (pane === "days") {
+            onViewDateChange((0, utils_2.addMonths)(viewDate, -1));
+        }
+        else if (pane === "months") {
+            onViewDateChange((0, utils_2.addYears)(viewDate, -1));
+        }
+        else {
+            onViewDateChange((0, utils_2.addYears)(viewDate, -12));
+        }
+    };
+    const goNext = () => {
+        if (pane === "days") {
+            onViewDateChange((0, utils_2.addMonths)(viewDate, 1));
+        }
+        else if (pane === "months") {
+            onViewDateChange((0, utils_2.addYears)(viewDate, 1));
+        }
+        else {
+            onViewDateChange((0, utils_2.addYears)(viewDate, 12));
+        }
+    };
+    const prevDisabled = constraints.minDate
+        ? !(0, utils_2.isAfter)((0, utils_2.startOfMonth)(viewDate), constraints.minDate)
+        : false;
+    const nextDisabled = constraints.maxDate
+        ? !(0, utils_2.isBefore)((0, utils_2.endOfMonth)(viewDate), constraints.maxDate)
+        : false;
+    return (React.createElement("div", { className: "flex items-center justify-between gap-2" },
+        React.createElement("button", { type: "button", "aria-label": pane === "days" ? "Previous month" : pane === "months" ? "Previous year" : "Previous 12 years", onClick: goPrev, disabled: prevDisabled, className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40" },
+            React.createElement(lucide_react_1.ChevronLeft, { className: "h-4 w-4" })),
+        React.createElement("h2", { role: "heading", "aria-level": 2, className: "flex flex-1 items-center justify-center gap-1 text-sm font-medium text-foreground" },
+            React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setPane(pane === "months" ? "days" : "months"), "aria-label": "Pick month" }, monthLabel),
+            React.createElement("button", { type: "button", className: "rounded px-1.5 py-0.5 hover:bg-accent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", onClick: () => setPane(pane === "years" ? "days" : "years"), "aria-label": "Pick year" }, yearLabel)),
+        React.createElement("button", { type: "button", "aria-label": pane === "days" ? "Next month" : pane === "months" ? "Next year" : "Next 12 years", onClick: goNext, disabled: nextDisabled, className: "inline-flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-40" },
+            React.createElement(lucide_react_1.ChevronRight, { className: "h-4 w-4" }))));
+}
+function DayCell({ date, inCurrentMonth, isToday, isSelected, inRange, disabled, focusable, onSelect, onKeyDown, }) {
+    return (React.createElement("div", { role: "gridcell" },
+        React.createElement("button", { type: "button", role: "button", tabIndex: focusable ? 0 : -1, "aria-label": (0, utils_2.formatDate)(date, "EEEE, MMMM d, yyyy"), "aria-selected": isSelected || undefined, "aria-disabled": disabled || undefined, disabled: disabled, onClick: onSelect, onKeyDown: onKeyDown, "data-date": date.toDateString(), className: (0, utils_1.cn)("relative inline-flex h-8 w-8 items-center justify-center rounded-md text-sm", "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", "hover:bg-accent hover:text-accent-foreground", !inCurrentMonth && "text-muted-foreground/60", inRange && "bg-primary/15 rounded-none", isSelected &&
+                "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground", isToday &&
+                !isSelected &&
+                "ring-1 ring-inset ring-primary/40", disabled && "cursor-not-allowed opacity-40 hover:bg-transparent") }, date.getDate())));
+}
+function MonthPane({ viewDate, constraints, onSelect }) {
+    const monthNames = React.useMemo(() => {
+        const result = [];
+        for (let i = 0; i < 12; i++) {
+            const d = new Date(viewDate.getFullYear(), i, 1);
+            result.push((0, utils_2.formatDate)(d, "MMM"));
+        }
+        return result;
+    }, [viewDate]);
+    return (React.createElement("div", { className: "mt-2 grid grid-cols-3 gap-1" }, monthNames.map((name, index) => {
+        const monthStart = new Date(viewDate.getFullYear(), index, 1);
+        const monthEnd = (0, utils_2.endOfMonth)(monthStart);
+        const disabled = (constraints.minDate && (0, utils_2.isBefore)(monthEnd, constraints.minDate)) ||
+            (constraints.maxDate && (0, utils_2.isAfter)(monthStart, constraints.maxDate)) ||
+            false;
+        const isCurrent = index === viewDate.getMonth();
+        return (React.createElement("button", { key: name, type: "button", disabled: disabled, onClick: () => onSelect(index), className: (0, utils_1.cn)("rounded-md px-2 py-2 text-sm transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isCurrent && "bg-primary text-primary-foreground hover:bg-primary", disabled && "cursor-not-allowed opacity-40 hover:bg-transparent") }, name));
+    })));
+}
+function YearPane({ viewDate, constraints, onSelect }) {
+    const currentYear = viewDate.getFullYear();
+    const startYear = Math.floor(currentYear / 12) * 12;
+    const years = Array.from({ length: 12 }, (_, i) => startYear + i);
+    return (React.createElement("div", { className: "mt-2 grid grid-cols-3 gap-1" }, years.map((year) => {
+        const yearStart = new Date(year, 0, 1);
+        const yearEnd = new Date(year, 11, 31);
+        const disabled = (constraints.minDate && (0, utils_2.isBefore)(yearEnd, constraints.minDate)) ||
+            (constraints.maxDate && (0, utils_2.isAfter)(yearStart, constraints.maxDate)) ||
+            false;
+        const isCurrent = year === currentYear;
+        return (React.createElement("button", { key: year, type: "button", disabled: disabled, onClick: () => onSelect(year), className: (0, utils_1.cn)("rounded-md px-2 py-2 text-sm transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", isCurrent && "bg-primary text-primary-foreground hover:bg-primary", disabled && "cursor-not-allowed opacity-40 hover:bg-transparent") }, year));
+    })));
+}

package/dist/components-v2/DatePicker/DatePicker.d.ts

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { type DateConstraints, type DateRange, type DayOfWeek, formatDate, isDateDisabled } from "./utils";
+export type DatePickerSize = "sm" | "md" | "lg";
+export type DatePickerType = "date" | "time" | "datetime";
+export interface DatePickerProps {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date | null) => void;
+    mode?: "single" | "range";
+    rangeValue?: DateRange;
+    onRangeChange?: (range: DateRange) => void;
+    label?: React.ReactNode;
+    placeholder?: string;
+    format?: string;
+    helperText?: React.ReactNode;
+    error?: boolean;
+    errorMessage?: React.ReactNode;
+    isInformation?: boolean;
+    informationMessage?: React.ReactNode;
+    isRequired?: boolean;
+    type?: DatePickerType;
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    disabledDaysOfWeek?: DayOfWeek[];
+    isDisabled?: boolean;
+    isReadOnly?: boolean;
+    size?: DatePickerSize;
+    width?: string;
+    /** 0 = Sunday … 6 = Saturday. Defaults to 0. */
+    weekStartsOn?: DayOfWeek;
+    /** Locale for weekday header labels (Intl.DateTimeFormat locale). */
+    locale?: Intl.LocalesArgument;
+    /** 12 or 24 hour clock for the time picker. */
+    hourFormat?: 12 | 24;
+    /** Minute step for the time picker. */
+    minuteStep?: number;
+    id?: string;
+    name?: string;
+    className?: string;
+    /** Show ✕ clear button inside the trigger when a value is set. */
+    clearable?: boolean;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export type { DateRange, DateConstraints, DayOfWeek };
+export { isDateDisabled, formatDate };

package/dist/components-v2/DatePicker/DatePicker.js

@@ -0,0 +1,189 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatDate = exports.isDateDisabled = exports.DatePicker = void 0;
+const React = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const utils_1 = require("../../lib/utils");
+const field_1 = require("../ui/field");
+const form_field_1 = require("../ui/form-field");
+const popover_1 = require("../ui/popover");
+const Calendar_1 = require("./Calendar");
+const TimePicker_1 = require("./TimePicker");
+const utils_2 = require("./utils");
+Object.defineProperty(exports, "formatDate", { enumerable: true, get: function () { return utils_2.formatDate; } });
+Object.defineProperty(exports, "isDateDisabled", { enumerable: true, get: function () { return utils_2.isDateDisabled; } });
+const TRIGGER_SIZE = {
+    sm: "h-8 text-xs px-2.5",
+    md: "h-9 text-sm px-3",
+    lg: "h-10 text-base px-3.5",
+};
+exports.DatePicker = React.forwardRef((props, ref) => {
+    const { id, label, helperText, error, errorMessage, isInformation, informationMessage, isRequired, width, className } = props, controlProps = __rest(props, ["id", "label", "helperText", "error", "errorMessage", "isInformation", "informationMessage", "isRequired", "width", "className"]);
+    return (React.createElement(field_1.Field, { id: id, label: label, isRequired: isRequired, isInformation: isInformation, informationMessage: informationMessage, helperText: helperText, error: error, errorMessage: errorMessage, width: width },
+        React.createElement(DatePickerControl, Object.assign({ ref: ref, error: error, className: className }, controlProps))));
+});
+exports.DatePicker.displayName = "DatePicker";
+const DatePickerControl = React.forwardRef((props, ref) => {
+    var _a, _b, _c, _d, _e;
+    const { value, defaultValue, onChange, mode = "single", rangeValue, onRangeChange, type, placeholder = "Select date…", format, minDate, maxDate, disabledDates, disabledDaysOfWeek, isDisabled = false, isReadOnly = false, size = "md", weekStartsOn = 0, locale, hourFormat = 24, minuteStep = 1, error, className, clearable = true, name, } = props;
+    const inferredFormat = format !== null && format !== void 0 ? format : (type === "time"
+        ? utils_2.DEFAULT_TIME_FORMAT
+        : type === "datetime"
+            ? utils_2.DEFAULT_DATETIME_FORMAT
+            : utils_2.DEFAULT_DATE_FORMAT);
+    const effectiveType = type !== null && type !== void 0 ? type : (0, utils_2.inferTypeFromFormat)(inferredFormat);
+    const field = (0, form_field_1.useFormField)();
+    const [open, setOpen] = React.useState(false);
+    const isRange = mode === "range";
+    const isControlledSingle = !isRange && value !== undefined;
+    const [internalValue, setInternalValue] = React.useState(defaultValue !== null && defaultValue !== void 0 ? defaultValue : null);
+    const singleValue = isControlledSingle ? value : internalValue;
+    const isControlledRange = isRange && rangeValue !== undefined;
+    const [internalRange, setInternalRange] = React.useState({
+        start: null,
+        end: null,
+    });
+    const range = isControlledRange ? rangeValue : internalRange;
+    const [viewDate, setViewDate] = React.useState(() => {
+        var _a;
+        if (isRange)
+            return (_a = range.start) !== null && _a !== void 0 ? _a : new Date();
+        return singleValue !== null && singleValue !== void 0 ? singleValue : new Date();
+    });
+    const constraints = {
+        minDate,
+        maxDate,
+        disabledDates,
+        disabledDaysOfWeek,
+    };
+    const commitSingle = (next) => {
+        if (!isControlledSingle)
+            setInternalValue(next);
+        onChange === null || onChange === void 0 ? void 0 : onChange(next);
+    };
+    const commitRange = (next) => {
+        if (!isControlledRange)
+            setInternalRange(next);
+        onRangeChange === null || onRangeChange === void 0 ? void 0 : onRangeChange(next);
+    };
+    const handleSelectDate = (date) => {
+        if (isReadOnly)
+            return;
+        if (isRange) {
+            if (!range.start || (range.start && range.end)) {
+                commitRange({ start: (0, utils_2.startOfDay)(date), end: null });
+            }
+            else if (date < range.start) {
+                commitRange({ start: (0, utils_2.startOfDay)(date), end: range.start });
+            }
+            else {
+                commitRange({ start: range.start, end: (0, utils_2.startOfDay)(date) });
+                if (effectiveType === "date")
+                    setOpen(false);
+            }
+        }
+        else {
+            const next = new Date(date);
+            if (effectiveType !== "date" && singleValue) {
+                next.setHours(singleValue.getHours(), singleValue.getMinutes(), 0, 0);
+            }
+            commitSingle(next);
+            if (effectiveType === "date")
+                setOpen(false);
+        }
+    };
+    const handleTimeChange = (next) => {
+        if (isRange)
+            return;
+        commitSingle(next);
+    };
+    const handleClear = (event) => {
+        event.stopPropagation();
+        if (isRange) {
+            commitRange({ start: null, end: null });
+        }
+        else {
+            commitSingle(null);
+        }
+    };
+    const displayValue = (() => {
+        if (isRange) {
+            if (!range.start && !range.end)
+                return "";
+            const startText = range.start ? (0, utils_2.formatDate)(range.start, inferredFormat) : "…";
+            const endText = range.end ? (0, utils_2.formatDate)(range.end, inferredFormat) : "…";
+            return `${startText} – ${endText}`;
+        }
+        return singleValue ? (0, utils_2.formatDate)(singleValue, inferredFormat) : "";
+    })();
+    const hasValue = isRange
+        ? !!(range.start || range.end)
+        : !!singleValue;
+    const onlyTime = effectiveType === "time";
+    return (React.createElement(React.Fragment, null,
+        React.createElement(popover_1.Popover, { open: open, onOpenChange: isReadOnly || isDisabled ? undefined : setOpen },
+            React.createElement(popover_1.PopoverTrigger, { asChild: true },
+                React.createElement("button", { ref: ref, type: "button", id: field.id || undefined, disabled: isDisabled, "aria-haspopup": "dialog", "aria-expanded": open, "aria-invalid": error || field.hasError || undefined, "aria-readonly": isReadOnly || undefined, className: (0, utils_1.cn)("flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background text-foreground shadow-sm transition-colors", "focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-1 focus:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50", "data-[state=open]:ring-2 data-[state=open]:ring-ring", TRIGGER_SIZE[size], error &&
+                        "border-destructive bg-destructive/5 focus:ring-destructive", isReadOnly && "cursor-default bg-muted", className) },
+                    React.createElement("span", { className: (0, utils_1.cn)("truncate text-left", !displayValue && "text-muted-foreground") }, displayValue || placeholder),
+                    React.createElement("span", { className: "flex items-center gap-1 text-muted-foreground" },
+                        clearable && hasValue && !isDisabled && !isReadOnly && (React.createElement("button", { type: "button", "aria-label": "Clear date", onClick: handleClear, className: "rounded-sm hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" },
+                            React.createElement(lucide_react_1.X, { className: "h-4 w-4" }))),
+                        React.createElement(lucide_react_1.Calendar, { className: "h-4 w-4 opacity-70" })))),
+            React.createElement(popover_1.PopoverContent, { align: "start", className: "w-auto p-0", onOpenAutoFocus: (event) => {
+                    event.preventDefault();
+                } },
+                !onlyTime && (React.createElement(Calendar_1.Calendar, { viewDate: viewDate, onViewDateChange: setViewDate, selected: isRange ? null : singleValue, rangeStart: isRange ? range.start : null, rangeEnd: isRange ? range.end : null, onSelectDate: handleSelectDate, mode: isRange ? "range" : "single", constraints: constraints, weekStartsOn: weekStartsOn, locale: locale, compact: true })),
+                (effectiveType === "datetime" || onlyTime) && !isRange && (React.createElement(TimePicker_1.TimePicker, { value: singleValue, onChange: handleTimeChange, hourFormat: hourFormat, minuteStep: minuteStep, referenceDate: viewDate })))),
+        name && (React.createElement("input", { type: "hidden", name: name, value: isRange
+                ? JSON.stringify({
+                    start: (_b = (_a = range.start) === null || _a === void 0 ? void 0 : _a.toISOString()) !== null && _b !== void 0 ? _b : null,
+                    end: (_d = (_c = range.end) === null || _c === void 0 ? void 0 : _c.toISOString()) !== null && _d !== void 0 ? _d : null,
+                })
+                : (_e = singleValue === null || singleValue === void 0 ? void 0 : singleValue.toISOString()) !== null && _e !== void 0 ? _e : "" }))));
+});
+DatePickerControl.displayName = "DatePickerControl";

package/dist/components-v2/DatePicker/TimePicker.d.ts

@@ -0,0 +1,12 @@
+import * as React from "react";
+export interface TimePickerProps {
+    value: Date | null;
+    onChange: (date: Date) => void;
+    /** 12 = 12-hour with AM/PM, 24 = 24-hour. */
+    hourFormat?: 12 | 24;
+    /** Step in minutes for the minute column. */
+    minuteStep?: number;
+    /** Base date when value is null — used to compose a Date with the chosen time. */
+    referenceDate?: Date;
+}
+export declare function TimePicker({ value, onChange, hourFormat, minuteStep, referenceDate, }: TimePickerProps): React.ReactElement;

package/dist/components-v2/DatePicker/TimePicker.js

@@ -0,0 +1,105 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimePicker = TimePicker;
+const React = __importStar(require("react"));
+const utils_1 = require("../../lib/utils");
+function TimePicker({ value, onChange, hourFormat = 24, minuteStep = 1, referenceDate, }) {
+    var _a;
+    const base = (_a = value !== null && value !== void 0 ? value : referenceDate) !== null && _a !== void 0 ? _a : new Date();
+    const currentHour24 = base.getHours();
+    const currentMinute = base.getMinutes();
+    const isPM = currentHour24 >= 12;
+    const hour12 = currentHour24 % 12 === 0 ? 12 : currentHour24 % 12;
+    const setHour = (nextHour24) => {
+        const next = new Date(base);
+        next.setHours(nextHour24, currentMinute, 0, 0);
+        onChange(next);
+    };
+    const setMinute = (m) => {
+        const next = new Date(base);
+        next.setMinutes(m, 0, 0);
+        onChange(next);
+    };
+    const togglePeriod = (period) => {
+        const wantsPM = period === "PM";
+        if (wantsPM === isPM)
+            return;
+        const nextHour = wantsPM ? currentHour24 + 12 : currentHour24 - 12;
+        setHour(((nextHour % 24) + 24) % 24);
+    };
+    const hours = hourFormat === 24
+        ? Array.from({ length: 24 }, (_, i) => i)
+        : Array.from({ length: 12 }, (_, i) => i + 1);
+    const minutes = [];
+    for (let m = 0; m < 60; m += minuteStep)
+        minutes.push(m);
+    return (React.createElement("div", { role: "group", "aria-label": "Time picker", className: "flex items-stretch justify-center gap-1 border-t border-border p-2" },
+        React.createElement(ScrollColumn, { label: "Hour", items: hours, isSelected: (value) => hourFormat === 24 ? value === currentHour24 : value === hour12, onSelect: (value) => {
+                if (hourFormat === 24) {
+                    setHour(value);
+                }
+                else {
+                    const normalized = value === 12 ? 0 : value;
+                    setHour(isPM ? normalized + 12 : normalized);
+                }
+            }, render: (v) => String(v).padStart(2, "0") }),
+        React.createElement("span", { className: "self-center text-sm text-muted-foreground" }, ":"),
+        React.createElement(ScrollColumn, { label: "Minute", items: minutes, isSelected: (value) => value === currentMinute, onSelect: setMinute, render: (v) => String(v).padStart(2, "0") }),
+        hourFormat === 12 && (React.createElement("div", { role: "group", "aria-label": "Period", className: "ml-2 flex flex-col gap-1" },
+            React.createElement(PeriodButton, { active: !isPM, onClick: () => togglePeriod("AM") }, "AM"),
+            React.createElement(PeriodButton, { active: isPM, onClick: () => togglePeriod("PM") }, "PM")))));
+}
+function ScrollColumn({ label, items, isSelected, onSelect, render, }) {
+    const ref = React.useRef(null);
+    React.useEffect(() => {
+        const node = ref.current;
+        if (!node)
+            return;
+        const selected = node.querySelector('[data-selected="true"]');
+        if (selected) {
+            node.scrollTop =
+                selected.offsetTop - node.clientHeight / 2 + selected.clientHeight / 2;
+        }
+    }, [items]);
+    return (React.createElement("div", { ref: ref, role: "listbox", "aria-label": label, className: "flex h-32 w-12 flex-col gap-0.5 overflow-y-auto rounded-md border border-border bg-background p-1" }, items.map((item, index) => {
+        const selected = isSelected(item);
+        return (React.createElement("button", { key: index, type: "button", role: "option", "aria-selected": selected, "data-selected": selected, onClick: () => onSelect(item), className: (0, utils_1.cn)("rounded px-2 py-1 text-center text-sm transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", selected &&
+                "bg-primary text-primary-foreground hover:bg-primary") }, render(item)));
+    })));
+}
+function PeriodButton({ active, onClick, children, }) {
+    return (React.createElement("button", { type: "button", "aria-pressed": active, onClick: onClick, className: (0, utils_1.cn)("flex-1 rounded-md border border-border px-2 py-1 text-xs font-medium transition-colors", "hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", active && "bg-primary text-primary-foreground border-primary") }, children));
+}

package/dist/components-v2/DatePicker/utils.d.ts

@@ -0,0 +1,31 @@
+import { addDays, addMonths, addYears, endOfMonth, isAfter, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth } from "date-fns";
+export type DayOfWeek = 0 | 1 | 2 | 3 | 4 | 5 | 6;
+export interface DateRange {
+    start: Date | null;
+    end: Date | null;
+}
+export declare const DEFAULT_DATE_FORMAT = "dd/MM/yyyy";
+export declare const DEFAULT_DATETIME_FORMAT = "dd/MM/yyyy HH:mm";
+export declare const DEFAULT_TIME_FORMAT = "HH:mm";
+export declare function formatDate(date: Date | null | undefined, pattern: string): string;
+export declare function tryParseDate(text: string, pattern: string, referenceDate?: Date): Date | null;
+export interface CalendarCell {
+    date: Date;
+    inCurrentMonth: boolean;
+    isToday: boolean;
+}
+/**
+ * Returns the 6×7 grid for a given month, filled with leading/trailing days
+ * from the adjacent months so the grid is always rectangular.
+ */
+export declare function buildMonthGrid(referenceDate: Date, weekStartsOn: DayOfWeek): CalendarCell[];
+export declare function getWeekdayHeaders(weekStartsOn: DayOfWeek, locale?: Intl.LocalesArgument): string[];
+export interface DateConstraints {
+    minDate?: Date;
+    maxDate?: Date;
+    disabledDates?: Date[];
+    disabledDaysOfWeek?: DayOfWeek[];
+}
+export declare function isDateDisabled(date: Date, constraints: DateConstraints): boolean;
+export declare function inferTypeFromFormat(pattern: string): "date" | "time" | "datetime";
+export { addDays, addMonths, addYears, isAfter, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, endOfMonth, };