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

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

@@ -1,212 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-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

@@ -1,189 +0,0 @@
-"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

@@ -1,12 +0,0 @@
-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

@@ -1,105 +0,0 @@
-"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

@@ -1,31 +0,0 @@
-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, };