universal-datetime-picker 2.0.0

package/dist/index.d.mts

@@ -0,0 +1,183 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { Dayjs } from 'dayjs';
+export { default as dayjs } from 'dayjs';
+
+type DateTimeMode = "datetime" | "date" | "time";
+/**
+ * How date and time panels are arranged when `mode="datetime"`.
+ * - `combined` (default): both panels visible at once (no Date/Time tabs)
+ * - `tabs`: separate Date / Time tabs (legacy layout)
+ */
+type DateTimeLayout = "combined" | "tabs";
+type DateTimeValue = Date | string | Dayjs | null;
+/**
+ * Time-only selection when `asString={false}` and `mode="time"`.
+ * `hour` is 1–12; `hour24` is 0–23.
+ */
+interface TimeValue {
+    hour: number;
+    hour24: number;
+    minute: number;
+    second: number;
+    ampm: "AM" | "PM";
+    formatted: string;
+}
+/** Value passed to `onChange` for DateTime / DateTimeInput. */
+type DateTimeChangeValue = Date | TimeValue | string | null;
+/** Optional chrome strings for UI labels (not a full i18n suite). */
+interface DateTimeLabels {
+    date?: string;
+    time?: string;
+    clear?: string;
+    close?: string;
+    ok?: string;
+    start?: string;
+    end?: string;
+    chooseDate?: string;
+    chooseDateRange?: string;
+    chooseMonth?: string;
+    chooseYear?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+    previousYear?: string;
+    nextYear?: string;
+    selectEnd?: string;
+}
+declare const DEFAULT_LABELS: Required<DateTimeLabels>;
+/** Shared picker options (framework-agnostic). */
+interface DateTimeBaseOptions {
+    value?: DateTimeValue;
+    defaultValue?: DateTimeValue;
+    onChange?: (value: DateTimeChangeValue) => void;
+    asString?: boolean;
+    showSeconds?: boolean;
+    format?: string;
+    mode?: DateTimeMode;
+    layout?: DateTimeLayout;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    use12Hours?: boolean;
+    inline?: boolean;
+    className?: string;
+    /** Inline style object or CSS string (vanilla / WC). */
+    style?: Partial<CSSStyleDeclaration> | string | Record<string, string | number>;
+    locale?: string;
+    labels?: DateTimeLabels;
+    theme?: "light" | "dark";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorEl?: HTMLElement | null;
+    popover?: boolean;
+}
+interface DateRangeValue {
+    start: Date | string | null;
+    end: Date | string | null;
+}
+interface DateTimeRangeOptions {
+    value?: {
+        start: DateTimeValue;
+        end: DateTimeValue;
+    } | null;
+    defaultValue?: {
+        start: DateTimeValue;
+        end: DateTimeValue;
+    } | null;
+    onChange?: (value: DateRangeValue) => void;
+    asString?: boolean;
+    format?: string;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: string;
+    labels?: DateTimeLabels;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    inline?: boolean;
+    className?: string;
+    style?: Partial<CSSStyleDeclaration> | string | Record<string, string | number>;
+}
+interface CalendarDay {
+    date: Dayjs;
+    isCurrentMonth: boolean;
+    isCurrentDate: boolean;
+    isFuture: boolean;
+    isPast: boolean;
+    isWeekend: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isInRange?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+}
+
+type DateTimeBaseProps = Omit<DateTimeBaseOptions, "style"> & {
+    style?: CSSProperties;
+};
+interface DateTimeProps extends DateTimeBaseProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorEl?: HTMLElement | null;
+    popover?: boolean;
+}
+interface DateTimeInputProps extends DateTimeBaseProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+    inputClassName?: string;
+}
+type DateTimeRangeProps = Omit<DateTimeRangeOptions, "style"> & {
+    style?: CSSProperties;
+};
+
+declare function DateTime(props: DateTimeProps): react.JSX.Element | null;
+
+declare function DateTimeInput(props: DateTimeInputProps): react.JSX.Element;
+
+declare function DateTimeRange(props: DateTimeRangeProps): react.JSX.Element | null;
+
+declare const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+declare const DATE_FORMAT = "YYYY-MM-DD";
+declare const TIME_FORMAT = "HH:mm:ss";
+
+interface BuildCalendarOptions {
+    viewMonth: Dayjs;
+    selected?: Dayjs | null;
+    rangeStart?: Dayjs | null;
+    rangeEnd?: Dayjs | null;
+    /** Tentative end for hover preview while selecting a range. */
+    hoverEnd?: Dayjs | null;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: number;
+}
+/**
+ * Builds a month grid of weeks × days with correct current-month flags
+ * (including the last day of the month).
+ */
+declare function buildCalendarMonth(options: BuildCalendarOptions): CalendarDay[][];
+
+type DateTimeComponent = typeof DateTime & {
+    Input: typeof DateTimeInput;
+    Range: typeof DateTimeRange;
+};
+declare const DateTimeWithExtras: DateTimeComponent;
+
+export { type CalendarDay, DATE_FORMAT, DEFAULT_FORMAT, DEFAULT_LABELS, type DateRangeValue, DateTime, type DateTimeBaseProps, type DateTimeChangeValue, DateTimeInput, type DateTimeInputProps, type DateTimeLabels, type DateTimeLayout, type DateTimeMode, type DateTimeProps, DateTimeRange, type DateTimeRangeProps, type DateTimeValue, TIME_FORMAT, type TimeValue, buildCalendarMonth, DateTimeWithExtras as default };

package/dist/index.d.ts

@@ -0,0 +1,185 @@
+import * as react from 'react';
+import { CSSProperties } from 'react';
+import { Dayjs } from 'dayjs';
+export { default as dayjs } from 'dayjs';
+
+type DateTimeMode = "datetime" | "date" | "time";
+/**
+ * How date and time panels are arranged when `mode="datetime"`.
+ * - `combined` (default): both panels visible at once (no Date/Time tabs)
+ * - `tabs`: separate Date / Time tabs (legacy layout)
+ */
+type DateTimeLayout = "combined" | "tabs";
+type DateTimeValue = Date | string | Dayjs | null;
+/**
+ * Time-only selection when `asString={false}` and `mode="time"`.
+ * `hour` is 1–12; `hour24` is 0–23.
+ */
+interface TimeValue {
+    hour: number;
+    hour24: number;
+    minute: number;
+    second: number;
+    ampm: "AM" | "PM";
+    formatted: string;
+}
+/** Value passed to `onChange` for DateTime / DateTimeInput. */
+type DateTimeChangeValue = Date | TimeValue | string | null;
+/** Optional chrome strings for UI labels (not a full i18n suite). */
+interface DateTimeLabels {
+    date?: string;
+    time?: string;
+    clear?: string;
+    close?: string;
+    ok?: string;
+    start?: string;
+    end?: string;
+    chooseDate?: string;
+    chooseDateRange?: string;
+    chooseMonth?: string;
+    chooseYear?: string;
+    previousMonth?: string;
+    nextMonth?: string;
+    previousYear?: string;
+    nextYear?: string;
+    selectEnd?: string;
+}
+declare const DEFAULT_LABELS: Required<DateTimeLabels>;
+/** Shared picker options (framework-agnostic). */
+interface DateTimeBaseOptions {
+    value?: DateTimeValue;
+    defaultValue?: DateTimeValue;
+    onChange?: (value: DateTimeChangeValue) => void;
+    asString?: boolean;
+    showSeconds?: boolean;
+    format?: string;
+    mode?: DateTimeMode;
+    layout?: DateTimeLayout;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    use12Hours?: boolean;
+    inline?: boolean;
+    className?: string;
+    /** Inline style object or CSS string (vanilla / WC). */
+    style?: Partial<CSSStyleDeclaration> | string | Record<string, string | number>;
+    locale?: string;
+    labels?: DateTimeLabels;
+    theme?: "light" | "dark";
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorEl?: HTMLElement | null;
+    popover?: boolean;
+}
+interface DateRangeValue {
+    start: Date | string | null;
+    end: Date | string | null;
+}
+interface DateTimeRangeOptions {
+    value?: {
+        start: DateTimeValue;
+        end: DateTimeValue;
+    } | null;
+    defaultValue?: {
+        start: DateTimeValue;
+        end: DateTimeValue;
+    } | null;
+    onChange?: (value: DateRangeValue) => void;
+    asString?: boolean;
+    format?: string;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    locale?: string;
+    labels?: DateTimeLabels;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    inline?: boolean;
+    className?: string;
+    style?: Partial<CSSStyleDeclaration> | string | Record<string, string | number>;
+}
+interface CalendarDay {
+    date: Dayjs;
+    isCurrentMonth: boolean;
+    isCurrentDate: boolean;
+    isFuture: boolean;
+    isPast: boolean;
+    isWeekend: boolean;
+    isDisabled: boolean;
+    isSelected: boolean;
+    isInRange?: boolean;
+    isRangeStart?: boolean;
+    isRangeEnd?: boolean;
+}
+
+type DateTimeBaseProps = Omit<DateTimeBaseOptions, "style"> & {
+    style?: CSSProperties;
+};
+interface DateTimeProps extends DateTimeBaseProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    anchorEl?: HTMLElement | null;
+    popover?: boolean;
+}
+interface DateTimeInputProps extends DateTimeBaseProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    id?: string;
+    name?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    "aria-labelledby"?: string;
+    "aria-label"?: string;
+    inputClassName?: string;
+}
+type DateTimeRangeProps = Omit<DateTimeRangeOptions, "style"> & {
+    style?: CSSProperties;
+};
+
+declare function DateTime(props: DateTimeProps): react.JSX.Element | null;
+
+declare function DateTimeInput(props: DateTimeInputProps): react.JSX.Element;
+
+declare function DateTimeRange(props: DateTimeRangeProps): react.JSX.Element | null;
+
+declare const DEFAULT_FORMAT = "YYYY-MM-DD HH:mm:ss";
+declare const DATE_FORMAT = "YYYY-MM-DD";
+declare const TIME_FORMAT = "HH:mm:ss";
+
+interface BuildCalendarOptions {
+    viewMonth: Dayjs;
+    selected?: Dayjs | null;
+    rangeStart?: Dayjs | null;
+    rangeEnd?: Dayjs | null;
+    /** Tentative end for hover preview while selecting a range. */
+    hoverEnd?: Dayjs | null;
+    minDate?: DateTimeValue;
+    maxDate?: DateTimeValue;
+    disablePastDates?: boolean;
+    disableFutureDates?: boolean;
+    weekStartsOn?: number;
+}
+/**
+ * Builds a month grid of weeks × days with correct current-month flags
+ * (including the last day of the month).
+ */
+declare function buildCalendarMonth(options: BuildCalendarOptions): CalendarDay[][];
+
+type DateTimeComponent = typeof DateTime & {
+    Input: typeof DateTimeInput;
+    Range: typeof DateTimeRange;
+};
+declare const DateTimeWithExtras: DateTimeComponent;
+
+// @ts-ignore
+export = DateTimeWithExtras;
+export { type CalendarDay, DATE_FORMAT, DEFAULT_FORMAT, DEFAULT_LABELS, type DateRangeValue, DateTime, type DateTimeBaseProps, type DateTimeChangeValue, DateTimeInput, type DateTimeInputProps, type DateTimeLabels, type DateTimeLayout, type DateTimeMode, type DateTimeProps, DateTimeRange, type DateTimeRangeProps, type DateTimeValue, TIME_FORMAT, type TimeValue, buildCalendarMonth };