pixelize-design-library 3.0.1-beta.1 → 3.1.0

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

@@ -1,25 +0,0 @@
-import * as React from "react";
-export interface ContactFormValues {
-    name: string;
-    email: string;
-    subject?: string;
-    message: string;
-}
-export interface ContactFormProps {
-    onSubmit: (values: ContactFormValues) => void | Promise<void>;
-    isLoading?: boolean;
-    successMessage?: React.ReactNode;
-    /** Field visibility / required state. */
-    fields?: {
-        subject?: boolean | "required";
-    };
-    submitLabel?: string;
-    className?: string;
-    /** Reset state to idle after a successful submission. */
-    isSubmitted?: boolean;
-    onReset?: () => void;
-}
-export declare function ContactForm({ onSubmit, isLoading, successMessage, fields, submitLabel, className, isSubmitted, onReset, }: ContactFormProps): React.ReactElement;
-export declare namespace ContactForm {
-    var displayName: string;
-}

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

@@ -1,116 +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.ContactForm = ContactForm;
-const React = __importStar(require("react"));
-const lucide_react_1 = require("lucide-react");
-const utils_1 = require("../../lib/utils");
-const button_1 = require("../ui/button");
-const TextInput_1 = require("../Input/TextInput");
-const textarea_1 = require("../ui/textarea");
-const field_1 = require("../ui/field");
-const EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-function validate(values, requireSubject) {
-    var _a;
-    const errors = {};
-    if (!values.name.trim())
-        errors.name = "Name is required.";
-    if (!values.email.trim())
-        errors.email = "Email is required.";
-    else if (!EMAIL_RE.test(values.email))
-        errors.email = "Enter a valid email.";
-    if (requireSubject && !((_a = values.subject) !== null && _a !== void 0 ? _a : "").trim())
-        errors.subject = "Subject is required.";
-    if (!values.message.trim())
-        errors.message = "Message is required.";
-    return errors;
-}
-function ContactForm({ onSubmit, isLoading = false, successMessage, fields = { subject: true }, submitLabel = "Send message", className, isSubmitted = false, onReset, }) {
-    var _a;
-    const [values, setValues] = React.useState({
-        name: "",
-        email: "",
-        subject: "",
-        message: "",
-    });
-    const [errors, setErrors] = React.useState({});
-    const [touched, setTouched] = React.useState({
-        name: false,
-        email: false,
-        subject: false,
-        message: false,
-    });
-    const showSubject = fields.subject !== false;
-    const requireSubject = fields.subject === "required";
-    const update = (key) => (event) => {
-        setValues((prev) => (Object.assign(Object.assign({}, prev), { [key]: event.target.value })));
-        if (touched[key]) {
-            setErrors(validate(Object.assign(Object.assign({}, values), { [key]: event.target.value }), requireSubject));
-        }
-    };
-    const blur = (key) => () => {
-        setTouched((prev) => (Object.assign(Object.assign({}, prev), { [key]: true })));
-        setErrors(validate(values, requireSubject));
-    };
-    const handleSubmit = async (event) => {
-        event.preventDefault();
-        const next = validate(values, requireSubject);
-        setErrors(next);
-        setTouched({
-            name: true,
-            email: true,
-            subject: true,
-            message: true,
-        });
-        if (Object.keys(next).length > 0)
-            return;
-        await onSubmit(values);
-    };
-    if (isSubmitted && successMessage) {
-        return (React.createElement("div", { role: "status", className: (0, utils_1.cn)("flex flex-col items-center gap-3 rounded-lg border border-success/40 bg-success/10 p-6 text-center text-success", className) },
-            React.createElement(lucide_react_1.CheckCircle2, { "aria-hidden": "true", className: "h-8 w-8" }),
-            React.createElement("div", { className: "text-sm" }, successMessage),
-            onReset && (React.createElement(button_1.Button, { variant: "outline", size: "sm", onClick: onReset }, "Send another"))));
-    }
-    return (React.createElement("form", { onSubmit: handleSubmit, noValidate: true, className: (0, utils_1.cn)("space-y-4", className) },
-        React.createElement(TextInput_1.TextInput, { label: "Name", isRequired: true, value: values.name, onChange: update("name"), onBlur: blur("name"), error: !!errors.name && touched.name, errorMessage: errors.name, autoComplete: "name" }),
-        React.createElement(TextInput_1.TextInput, { label: "Email", type: "email", isRequired: true, value: values.email, onChange: update("email"), onBlur: blur("email"), error: !!errors.email && touched.email, errorMessage: errors.email, autoComplete: "email" }),
-        showSubject && (React.createElement(TextInput_1.TextInput, { label: "Subject", isRequired: requireSubject, value: (_a = values.subject) !== null && _a !== void 0 ? _a : "", onChange: update("subject"), onBlur: blur("subject"), error: !!errors.subject && touched.subject, errorMessage: errors.subject })),
-        React.createElement(field_1.Field, { label: "Message", isRequired: true, error: !!errors.message && touched.message, errorMessage: errors.message },
-            React.createElement(textarea_1.Textarea, { value: values.message, onChange: update("message"), onBlur: blur("message"), rows: 5, autoResize: true, minRows: 4, maxRows: 10 })),
-        React.createElement("div", { className: "flex justify-end" },
-            React.createElement(button_1.Button, { type: "submit", isLoading: isLoading, loadingText: "Sending\u2026" }, submitLabel))));
-}
-ContactForm.displayName = "ContactForm";

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

@@ -1,19 +0,0 @@
-import * as React from "react";
-import { type DateConstraints, type DayOfWeek } from "./utils";
-export interface CalendarProps {
-    /** Currently focused / displayed month. */
-    viewDate: Date;
-    onViewDateChange: (date: Date) => void;
-    /** Selected date(s). */
-    selected?: Date | null;
-    rangeStart?: Date | null;
-    rangeEnd?: Date | null;
-    onSelectDate: (date: Date) => void;
-    mode: "single" | "range";
-    constraints?: DateConstraints;
-    weekStartsOn?: DayOfWeek;
-    locale?: Intl.LocalesArgument;
-    /** Render compactly inside a Popover. */
-    compact?: boolean;
-}
-export declare const Calendar: React.ForwardRefExoticComponent<CalendarProps & React.RefAttributes<HTMLDivElement>>;

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;