@vjdesigns/vjdesigns-ui 0.0.0-stage → 2.0.0

package/dist/components/forms/DatePicker/dateUtils.d.ts

@@ -0,0 +1,88 @@
+/** A calendar date as an ISO string, "YYYY-MM-DD" (e.g. "2026-10-04"). */
+export type ISODate = string;
+/** A calendar month as "YYYY-MM" (e.g. "2026-10"). */
+export type ISOMonth = string;
+/** Builds a local Date for a calendar date (years 0 to 99 stay literal). */
+export declare function makeDate(year: number, monthIndex: number, day: number): Date;
+/** Formats a Date's local date parts as "YYYY-MM-DD". */
+export declare function toISODate(date: Date): ISODate;
+/** Number of days in a month (monthIndex is 0-based). */
+export declare function daysInMonth(year: number, monthIndex: number): number;
+/**
+ * Parses "YYYY-MM-DD" into a local Date at midnight. Returns null for
+ * anything else, including impossible dates such as "2026-02-30".
+ */
+export declare function parseISODate(value: string | null | undefined): Date | null;
+/** True when `value` is a valid "YYYY-MM-DD" date. */
+export declare function isISODate(value: string | null | undefined): value is ISODate;
+/** "YYYY-MM" of an ISO date or a Date. */
+export declare function toISOMonth(value: ISODate | Date): ISOMonth;
+/** Parses "YYYY-MM" (or a full ISO date) into [year, monthIndex]. */
+export declare function parseISOMonth(value: string | null | undefined): [number, number] | null;
+/** Adds (or subtracts) days. */
+export declare function addDays(iso: ISODate, amount: number): ISODate;
+/** Adds months, clamping the day to the target month's length (Jan 31 + 1 month = Feb 28). */
+export declare function addMonths(iso: ISODate, amount: number): ISODate;
+/** Adds months to a "YYYY-MM" month. */
+export declare function addMonthsToMonth(month: ISOMonth, amount: number): ISOMonth;
+/** Whole months from month `a` to month `b` (b - a). */
+export declare function monthDiff(a: ISOMonth, b: ISOMonth): number;
+/** Day of week, 0 (Sunday) to 6 (Saturday). */
+export declare function dayOfWeek(iso: ISODate): number;
+/** The first day of the week containing `iso`. */
+export declare function startOfWeek(iso: ISODate, weekStartsOn: number): ISODate;
+/** The last day of the week containing `iso`. */
+export declare function endOfWeek(iso: ISODate, weekStartsOn: number): ISODate;
+/** The first day of a "YYYY-MM" month. */
+export declare function firstOfMonth(month: ISOMonth): ISODate;
+/** The last day of a "YYYY-MM" month. */
+export declare function lastOfMonth(month: ISOMonth): ISODate;
+/** Six weeks of ISO dates (42 days) covering `month`, starting on `weekStartsOn`. */
+export declare function monthGrid(month: ISOMonth, weekStartsOn: number): ISODate[][];
+/** ISO strings compare correctly as plain strings (four-digit years). */
+export declare const isBefore: (a: ISODate, b: ISODate) => boolean;
+/** Clamps `iso` into [min, max] (either bound optional). */
+export declare function clampDate(iso: ISODate, min?: ISODate | null, max?: ISODate | null): ISODate;
+/** Today's local date as ISO. */
+export declare function todayISO(): ISODate;
+/**
+ * The locale's first day of the week (0 = Sunday ... 6 = Saturday), from
+ * `Intl.Locale` week info where the browser supports it; otherwise 0.
+ */
+export declare function getLocaleWeekStart(locale?: string): number;
+/**
+ * Swaps the English pattern letters ("DD", "MM", "YYYY") for a language's,
+ * e.g. "TT.MM.JJJJ" in German.
+ */
+export declare function localizeDatePattern(pattern: string, letters: {
+    day: string;
+    month: string;
+    year: string;
+}): string;
+/** The numeric short date format of a locale: field order, separators, and a pattern like "MM/DD/YYYY". */
+export interface DateFormatInfo {
+    /** Field order in the locale's short format. */
+    order: Array<"day" | "month" | "year">;
+    /** Human-readable pattern, e.g. "MM/DD/YYYY" or "DD.MM.YYYY". */
+    pattern: string;
+    /** Formats an ISO date in the locale's numeric short format. */
+    format: (iso: ISODate) => string;
+    /**
+     * Text the locale puts before the first or after the last field (e.g.
+     * " г." in bg). Dropped when formatting and stripped from typed text.
+     */
+    affixes: string[];
+}
+export declare function getDateFormatInfo(locale?: string): DateFormatInfo;
+/**
+ * Parses typed text as a date: ISO ("2026-10-04") or the locale's numeric
+ * short format in its own field order ("10/4/2026" in en-US, "4.10.2026"
+ * in de-DE). Any non-digit separators are accepted, and two-digit years
+ * mean 20xx. Returns an ISO date, or null when the text isn't a real date.
+ */
+export declare function parseDateText(text: string, locale?: string): ISODate | null;
+export declare function getFormatter(locale: string | undefined, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat;
+/** Full spoken date, e.g. "Sunday, October 4, 2026". */
+export declare function formatFullDate(iso: ISODate, locale?: string): string;
+/** Month heading, e.g. "October 2026". */
+export declare function formatMonthYear(month: ISOMonth, locale?: string): string;

package/dist/components/forms/DatePicker/dateUtils.mjs

@@ -0,0 +1,204 @@
+//#region src/components/forms/DatePicker/dateUtils.ts
+var e = (e, t = 2) => String(e).padStart(t, "0");
+function t(e, t, n) {
+	let r = new Date(2e3, 0, 1);
+	return r.setFullYear(e, t, n), r.setHours(0, 0, 0, 0), r;
+}
+function n(t) {
+	return `${e(t.getFullYear(), 4)}-${e(t.getMonth() + 1)}-${e(t.getDate())}`;
+}
+function r(e, n) {
+	return t(e, n + 1, 0).getDate();
+}
+function i(e) {
+	if (!e) return null;
+	let n = /^(\d{4})-(\d{2})-(\d{2})$/.exec(e.trim());
+	if (!n) return null;
+	let i = Number(n[1]), a = Number(n[2]), o = Number(n[3]);
+	return a < 1 || a > 12 || o < 1 || o > r(i, a - 1) ? null : t(i, a - 1, o);
+}
+function a(e) {
+	return i(e) !== null;
+}
+function o(e) {
+	return (typeof e == "string" ? e : n(e)).slice(0, 7);
+}
+function s(e) {
+	if (!e) return null;
+	let t = /^(\d{4})-(\d{1,2})/.exec(e.trim());
+	if (!t) return null;
+	let n = Number(t[2]);
+	return n < 1 || n > 12 ? null : [Number(t[1]), n - 1];
+}
+function c(e, r) {
+	let a = i(e);
+	return n(t(a.getFullYear(), a.getMonth(), a.getDate() + r));
+}
+function l(e, a) {
+	let o = i(e), s = t(o.getFullYear(), o.getMonth() + a, 1), c = Math.min(o.getDate(), r(s.getFullYear(), s.getMonth()));
+	return n(t(s.getFullYear(), s.getMonth(), c));
+}
+function u(e, n) {
+	let [r, i] = s(e);
+	return o(t(r, i + n, 1));
+}
+function d(e) {
+	return i(e).getDay();
+}
+function f(e, t) {
+	return c(e, -((d(e) - t + 7) % 7));
+}
+function p(e, t) {
+	return c(f(e, t), 6);
+}
+function m(e) {
+	return `${e}-01`;
+}
+function h(e) {
+	let [i, a] = s(e);
+	return n(t(i, a, r(i, a)));
+}
+function g(e, t) {
+	let n = f(m(e), t), r = [];
+	for (let e = 0; e < 6; e += 1) {
+		let e = [];
+		for (let t = 0; t < 7; t += 1) e.push(n), n = c(n, 1);
+		r.push(e);
+	}
+	return r;
+}
+function _(e, t, n) {
+	return t && e < t ? t : n && e > n ? n : e;
+}
+function v() {
+	return n(/* @__PURE__ */ new Date());
+}
+function y(e) {
+	try {
+		let t = e ?? new Intl.DateTimeFormat().resolvedOptions().locale, n = new Intl.Locale(t), r = n.getWeekInfo?.() ?? n.weekInfo;
+		if (r?.firstDay) return r.firstDay % 7;
+	} catch {}
+	return 0;
+}
+var b = t(2026, 10, 23);
+function x(e, t) {
+	return e.replace(/YYYY|MM|DD/g, (e) => e === "YYYY" ? t.year : e === "MM" ? t.month : t.day);
+}
+var S = /* @__PURE__ */ new Map(), C = /[‎‏؜]/g, w = {
+	year: "numeric",
+	month: "2-digit",
+	day: "2-digit",
+	calendar: "gregory",
+	numberingSystem: "latn"
+};
+function T(e) {
+	let t = e ?? "", n = S.get(t);
+	if (n) return n;
+	let r;
+	try {
+		r = new Intl.DateTimeFormat(e, w);
+	} catch {
+		r = new Intl.DateTimeFormat(void 0, w);
+	}
+	let a = (e, t) => {
+		let n = e.findIndex((e) => e.type === "day" || e.type === "month" || e.type === "year"), r = -1;
+		e.forEach((e, t) => {
+			(e.type === "day" || e.type === "month" || e.type === "year") && (r = t);
+		});
+		let i = "";
+		return e.forEach((e, a) => {
+			e.type === "day" || e.type === "month" || e.type === "year" ? i += t(e) : e.type === "literal" && a > n && a < r && (i += e.value.replace(C, ""));
+		}), i;
+	}, o = r.formatToParts(b), s = [], c = [], l = !1;
+	o.forEach((e, t) => {
+		if (e.type === "day" || e.type === "month" || e.type === "year") s.push(e.type), l = !0;
+		else if (e.type === "literal") {
+			let n = !l || !o.slice(t + 1).some((e) => e.type === "day" || e.type === "month" || e.type === "year"), r = e.value.replace(C, "").trim();
+			n && r && c.push(r);
+		}
+	});
+	let u = a(o, (e) => e.type === "day" ? "DD" : e.type === "month" ? "MM" : "YYYY");
+	s.length !== 3 && (s.splice(0, s.length, "year", "month", "day"), u = "YYYY-MM-DD");
+	let d = {
+		order: s,
+		pattern: u.trim(),
+		affixes: c,
+		format: (e) => {
+			let t = i(e);
+			return t ? s.length === 3 && u !== "YYYY-MM-DD" ? a(r.formatToParts(t), (e) => e.value) : e : "";
+		}
+	};
+	return S.set(t, d), d;
+}
+var E = [
+	1632,
+	1776,
+	2406,
+	2534,
+	3664,
+	4160,
+	65296
+];
+function D(e) {
+	return e.replace(/\p{Nd}/gu, (e) => {
+		let t = e.codePointAt(0);
+		if (t >= 48 && t <= 57) return e;
+		let n = E.find((e) => t >= e && t <= e + 9);
+		return n === void 0 ? e : String(t - n);
+	});
+}
+function O(e, a) {
+	let { order: o, affixes: s } = T(a), c = D(e).replace(C, "").trim();
+	for (let e of s) c = c.split(e).join(" ");
+	if (c = c.trim(), !c) return null;
+	if (/^\d{4}-\d{1,2}-\d{1,2}$/.test(c)) {
+		let [e, t, r] = c.split("-"), a = i(`${e}-${t.padStart(2, "0")}-${r.padStart(2, "0")}`);
+		return a ? n(a) : null;
+	}
+	if (/^\d{6}$|^\d{8}$/.test(c)) {
+		let e = c.length === 8 ? 4 : 2, t = 0;
+		return O(o.map((n) => {
+			let r = n === "year" ? e : 2, i = c.slice(t, t + r);
+			return t += r, i;
+		}).join("/"), a);
+	}
+	let l = c.match(/\d+/g);
+	if (!l || l.length !== 3 || /\p{L}/u.test(c)) return null;
+	let u = {};
+	if (o.forEach((e, t) => {
+		u[e] = l[t];
+	}), u.year.length !== 4 && u.year.length !== 2) return null;
+	let d = u.year.length === 2 ? 2e3 + Number(u.year) : Number(u.year), f = Number(u.month), p = Number(u.day);
+	return f < 1 || f > 12 || p < 1 || p > r(d, f - 1) ? null : n(t(d, f - 1, p));
+}
+var k = /* @__PURE__ */ new Map();
+function A(e, t) {
+	let n = `${e ?? ""}|${JSON.stringify(t)}`, r = k.get(n);
+	if (!r) {
+		try {
+			r = new Intl.DateTimeFormat(e, t);
+		} catch {
+			r = new Intl.DateTimeFormat(void 0, t);
+		}
+		k.set(n, r);
+	}
+	return r;
+}
+function j(e, t) {
+	let n = i(e);
+	return n ? A(t, {
+		weekday: "long",
+		year: "numeric",
+		month: "long",
+		day: "numeric"
+	}).format(n) : "";
+}
+function M(e, n) {
+	let r = s(e);
+	return r ? A(n, {
+		year: "numeric",
+		month: "long"
+	}).format(t(r[0], r[1], 1)) : "";
+}
+//#endregion
+export { c as addDays, l as addMonths, u as addMonthsToMonth, _ as clampDate, d as dayOfWeek, r as daysInMonth, p as endOfWeek, m as firstOfMonth, j as formatFullDate, M as formatMonthYear, T as getDateFormatInfo, A as getFormatter, y as getLocaleWeekStart, a as isISODate, h as lastOfMonth, x as localizeDatePattern, t as makeDate, g as monthGrid, O as parseDateText, i as parseISODate, s as parseISOMonth, f as startOfWeek, n as toISODate, o as toISOMonth, v as todayISO };

package/dist/components/forms/DatePicker/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Calendar';
+export * from './DatePicker';
+export * from './DateRangePicker';
+export { isISODate, parseDateText, parseISODate, toISODate, type ISODate, type ISOMonth, } from './dateUtils';

package/dist/components/forms/DateTimePicker/DateTimePicker.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../hooks/useControllableState.cjs.js"),t=require("../../utilities/LocaleProvider/LocaleProvider.cjs.js"),n=require("../../../utils/cx.cjs.js"),r=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),i=require("../Field/FieldContext.cjs.js"),a=require("../DatePicker/dateUtils.cjs.js"),o=require("../DatePicker/DatePicker.cjs.js"),s=require("../TimePicker/timeUtils.cjs.js"),c=require("../TimePicker/TimePicker.cjs.js"),l=require("./DateTimePicker.module.css.cjs.js");let u=require("react"),d=require("react/jsx-runtime");function f(e){return!e||e.length<16||e[10]!==`T`?!1:a.isISODate(e.slice(0,10))&&s.isISOTime(e.slice(11,16))}function p(e){return f(e)?{date:e.slice(0,10),time:e.slice(11,16)}:null}var m=({value:a,defaultValue:s,onValueChange:f,min:m,max:ee,isDateDisabled:te,step:ne=30,hourCycle:h,defaultTime:g,locale:_,weekStartsOn:v,today:y,size:b,name:x,clearable:S=!1,invalid:C,required:w,disabled:T,readOnly:E,placement:re=`bottom-start`,dateLabel:ie,timeLabel:ae,onInvalidDate:oe,onInvalidTime:se,fullWidth:ce=!0,id:D,"aria-label":O,"aria-describedby":k,className:A,style:j})=>{let{messages:M}=t.useLocale(),N=ie??M.timePicker.date,P=ae??M.timePicker.time,F=i.useFieldContext(),I=i.useFieldControl({id:D,disabled:T,readOnly:E,size:b,invalid:C,required:w}),[L,R]=e.useControllableState({value:a,defaultValue:s??null,onChange:f}),[z,B]=(0,u.useState)(()=>p(L)?.date??null),[V,H]=(0,u.useState)(()=>p(L)?.time??null),U=(0,u.useRef)(L);(0,u.useEffect)(()=>{if(U.current===L)return;U.current=L;let e=p(L);B(e?.date??null),H(e?.time??null)},[L]);let W=(e,t)=>{B(e),H(t);let n=e&&t?`${e}T${t}`:null;n!==L&&(U.current=n,R(n))},G=p(m),K=p(ee),le=G&&z===G.date?G.time:void 0,ue=K&&z===K.date?K.time:void 0,q=(0,u.useId)(),J=`${q}-name`,Y=`${q}-date`,X=`${q}-time`,Z=F?.labelId??(O?J:void 0),Q=e=>[Z,e].filter(Boolean).join(` `),$={locale:_,size:b,clearable:S,placement:re,invalid:I.invalid||void 0,required:I.required,disabled:I.disabled,readOnly:I.readOnly,fullWidth:!0,"aria-describedby":k};return(0,d.jsxs)(`div`,{className:n.cx(l.default.root,ce&&l.default.fullWidth,A),style:j,"data-size":I.size??`md`,children:[(0,d.jsxs)(`div`,{role:`group`,"aria-labelledby":Z,className:l.default.fields,children:[(0,d.jsxs)(`div`,{className:n.cx(l.default.part,l.default.datePart),children:[(0,d.jsx)(`span`,{id:Y,className:l.default.partLabel,children:N}),(0,d.jsx)(o.DatePicker,{...$,id:I.id??`${q}-date-input`,"aria-labelledby":Q(Y),value:z,onValueChange:e=>W(e,e&&!V&&g?g:V),min:G?.date,max:K?.date,isDateDisabled:te,weekStartsOn:v,today:y,onInvalidInput:oe})]}),(0,d.jsxs)(`div`,{className:n.cx(l.default.part,l.default.timePart),children:[(0,d.jsx)(`span`,{id:X,className:l.default.partLabel,children:P}),(0,d.jsx)(c.TimePicker,{...$,id:`${q}-time-input`,"aria-labelledby":Q(X),value:V,onValueChange:e=>W(z,e),min:le,max:ue,step:ne,hourCycle:h,onInvalidInput:se})]})]}),O&&!F?.labelId&&(0,d.jsx)(r.VisuallyHidden,{id:J,children:O}),x!==void 0&&(0,d.jsx)(`input`,{type:`hidden`,name:x,value:L??``,disabled:I.disabled})]})};exports.DateTimePicker=m,exports.isISODateTime=f;

package/dist/components/forms/DateTimePicker/DateTimePicker.d.ts

@@ -0,0 +1,101 @@
+import { CSSProperties } from 'react';
+import { Placement, Size } from '../../../types/common';
+import { DateInputError, WeekDay } from '../DatePicker';
+import { ISODate } from '../DatePicker/dateUtils';
+import { HourCycle, ISOTime, TimeInputError } from '../TimePicker';
+/** A local date and wall-clock time, "YYYY-MM-DDTHH:mm" (the format of `<input type="datetime-local">`). */
+export type ISODateTime = string;
+/** True when `value` is a valid "YYYY-MM-DDTHH:mm" date and time. */
+export declare function isISODateTime(value: string | null | undefined): value is ISODateTime;
+export interface DateTimePickerProps {
+    /** Selected date and time, "YYYY-MM-DDTHH:mm", or null (controlled). */
+    value?: ISODateTime | null;
+    /** Initial value when uncontrolled. */
+    defaultValue?: ISODateTime | null;
+    /**
+     * Called with "YYYY-MM-DDTHH:mm" once both a date and a time are set, and
+     * with null when either is cleared or invalid.
+     */
+    onValueChange?: (value: ISODateTime | null) => void;
+    /** Earliest allowed moment, "YYYY-MM-DDTHH:mm". Its time applies on its own date only. */
+    min?: ISODateTime;
+    /** Latest allowed moment, "YYYY-MM-DDTHH:mm". Its time applies on its own date only. */
+    max?: ISODateTime;
+    /** Marks individual dates unavailable. */
+    isDateDisabled?: (date: ISODate, dateObject: Date) => boolean;
+    /** Minutes between the times in the time list. @default 30 */
+    step?: number;
+    /** 12-hour (AM/PM) or 24-hour clock. Defaults to the locale's. */
+    hourCycle?: HourCycle;
+    /**
+     * Time filled in when a date is picked while the time is empty (e.g.
+     * "09:00"), so one pick gives a complete value. Without it, the value
+     * stays null until a time is set.
+     */
+    defaultTime?: ISOTime;
+    /** BCP 47 locale for formats and labels. Defaults to the `LocaleProvider` locale. */
+    locale?: string;
+    /** First day of the week in the calendar. Defaults to the locale's. */
+    weekStartsOn?: WeekDay;
+    /** Override "today" ("YYYY-MM-DD") in the calendar, e.g. for tests. */
+    today?: ISODate;
+    /** Field size. Inherits from a surrounding `Field`. @default "md" */
+    size?: Size;
+    /** Name of a hidden input that submits "YYYY-MM-DDTHH:mm" with a form. */
+    name?: string;
+    /** Shows clear buttons in both fields. @default false */
+    clearable?: boolean;
+    /** Danger styling and `aria-invalid`. Inherits from a surrounding `Field`. */
+    invalid?: boolean;
+    /** Requires both a date and a time. Inherits from a surrounding `Field`. */
+    required?: boolean;
+    /** Disables both fields. Inherits from a surrounding `Field`. */
+    disabled?: boolean;
+    /** Shows the value without allowing changes. Inherits from a surrounding `Field`. */
+    readOnly?: boolean;
+    /** Where the calendar and the time list open. @default "bottom-start" */
+    placement?: Placement;
+    /** Visible label of the date field. @default "Date" */
+    dateLabel?: string;
+    /** Visible label of the time field. @default "Time" */
+    timeLabel?: string;
+    /** Called when the date field rejects typed text. */
+    onInvalidDate?: (error: DateInputError) => void;
+    /** Called when the time field rejects typed text. */
+    onInvalidTime?: (error: TimeInputError) => void;
+    /** Stretches the fields to fill the container. @default true */
+    fullWidth?: boolean;
+    /** Id for the date input. Inside a `Field`, the Field's id is used, so its label points there. */
+    id?: string;
+    /** Accessible name of the pair, when there is no `Field` label. */
+    "aria-label"?: string;
+    /** Ids of elements that describe both fields. */
+    "aria-describedby"?: string;
+    /** Class name for the outer root. */
+    className?: string;
+    /** Style for the outer root. */
+    style?: CSSProperties;
+}
+/**
+ * A date and a time together: a `DatePicker` and a `TimePicker` side by
+ * side, with one value, "YYYY-MM-DDTHH:mm" (the format of a native
+ * `datetime-local` input, with no time zone). Each half keeps its full
+ * behavior: typed dates in the locale's format or the calendar popup, typed
+ * times in any common form or the list of times.
+ *
+ * `min` and `max` limit the calendar by their dates, and the time list by
+ * their times on those boundary dates. `defaultTime` fills the time when a
+ * date is picked first.
+ *
+ * Accessibility: the pair is a `role="group"` named by the `Field` label
+ * (or `aria-label`); each field is named by that label plus its own
+ * visible label ("Tip-off, Date", "Tip-off, Time"). Field hint, error,
+ * required, disabled, and invalid state reach both.
+ *
+ * ```tsx
+ * <Field label="Tip-off">
+ *   <DateTimePicker name="tipoff" defaultTime="19:00" step={15} />
+ * </Field>
+ * ```
+ */
+export declare const DateTimePicker: ({ value: valueProp, defaultValue, onValueChange, min, max, isDateDisabled, step, hourCycle, defaultTime, locale, weekStartsOn, today, size, name, clearable, invalid, required, disabled, readOnly, placement, dateLabel: dateLabelProp, timeLabel: timeLabelProp, onInvalidDate, onInvalidTime, fullWidth, id, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, className, style, }: DateTimePickerProps) => import("react").JSX.Element;

package/dist/components/forms/DateTimePicker/DateTimePicker.mjs

@@ -0,0 +1,120 @@
+import { useControllableState as e } from "../../../hooks/useControllableState.mjs";
+import { useLocale as t } from "../../utilities/LocaleProvider/LocaleProvider.mjs";
+import { cx as n } from "../../../utils/cx.mjs";
+import { VisuallyHidden as ee } from "../../utilities/VisuallyHidden/VisuallyHidden.mjs";
+import { useFieldContext as r, useFieldControl as i } from "../Field/FieldContext.mjs";
+import { isISODate as a } from "../DatePicker/dateUtils.mjs";
+import { DatePicker as o } from "../DatePicker/DatePicker.mjs";
+import { isISOTime as s } from "../TimePicker/timeUtils.mjs";
+import { TimePicker as c } from "../TimePicker/TimePicker.mjs";
+import l from "./DateTimePicker.module.css.mjs";
+import { useEffect as u, useId as te, useRef as ne, useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/components/forms/DateTimePicker/DateTimePicker.tsx
+function m(e) {
+	return !e || e.length < 16 || e[10] !== "T" ? !1 : a(e.slice(0, 10)) && s(e.slice(11, 16));
+}
+function h(e) {
+	return m(e) ? {
+		date: e.slice(0, 10),
+		time: e.slice(11, 16)
+	} : null;
+}
+var g = ({ value: a, defaultValue: s, onValueChange: m, min: g, max: _, isDateDisabled: v, step: y = 30, hourCycle: re, defaultTime: b, locale: ie, weekStartsOn: ae, today: oe, size: x, name: S, clearable: se = !1, invalid: ce, required: le, disabled: ue, readOnly: de, placement: fe = "bottom-start", dateLabel: C, timeLabel: w, onInvalidDate: T, onInvalidTime: E, fullWidth: D = !0, id: O, "aria-label": k, "aria-describedby": A, className: j, style: M }) => {
+	let { messages: N } = t(), P = C ?? N.timePicker.date, F = w ?? N.timePicker.time, I = r(), L = i({
+		id: O,
+		disabled: ue,
+		readOnly: de,
+		size: x,
+		invalid: ce,
+		required: le
+	}), [R, pe] = e({
+		value: a,
+		defaultValue: s ?? null,
+		onChange: m
+	}), [z, B] = d(() => h(R)?.date ?? null), [V, H] = d(() => h(R)?.time ?? null), U = ne(R);
+	u(() => {
+		if (U.current === R) return;
+		U.current = R;
+		let e = h(R);
+		B(e?.date ?? null), H(e?.time ?? null);
+	}, [R]);
+	let W = (e, t) => {
+		B(e), H(t);
+		let n = e && t ? `${e}T${t}` : null;
+		n !== R && (U.current = n, pe(n));
+	}, G = h(g), K = h(_), me = G && z === G.date ? G.time : void 0, he = K && z === K.date ? K.time : void 0, q = te(), J = `${q}-name`, Y = `${q}-date`, X = `${q}-time`, Z = I?.labelId ?? (k ? J : void 0), Q = (e) => [Z, e].filter(Boolean).join(" "), $ = {
+		locale: ie,
+		size: x,
+		clearable: se,
+		placement: fe,
+		invalid: L.invalid || void 0,
+		required: L.required,
+		disabled: L.disabled,
+		readOnly: L.readOnly,
+		fullWidth: !0,
+		"aria-describedby": A
+	};
+	return /* @__PURE__ */ p("div", {
+		className: n(l.root, D && l.fullWidth, j),
+		style: M,
+		"data-size": L.size ?? "md",
+		children: [
+			/* @__PURE__ */ p("div", {
+				role: "group",
+				"aria-labelledby": Z,
+				className: l.fields,
+				children: [/* @__PURE__ */ p("div", {
+					className: n(l.part, l.datePart),
+					children: [/* @__PURE__ */ f("span", {
+						id: Y,
+						className: l.partLabel,
+						children: P
+					}), /* @__PURE__ */ f(o, {
+						...$,
+						id: L.id ?? `${q}-date-input`,
+						"aria-labelledby": Q(Y),
+						value: z,
+						onValueChange: (e) => W(e, e && !V && b ? b : V),
+						min: G?.date,
+						max: K?.date,
+						isDateDisabled: v,
+						weekStartsOn: ae,
+						today: oe,
+						onInvalidInput: T
+					})]
+				}), /* @__PURE__ */ p("div", {
+					className: n(l.part, l.timePart),
+					children: [/* @__PURE__ */ f("span", {
+						id: X,
+						className: l.partLabel,
+						children: F
+					}), /* @__PURE__ */ f(c, {
+						...$,
+						id: `${q}-time-input`,
+						"aria-labelledby": Q(X),
+						value: V,
+						onValueChange: (e) => W(z, e),
+						min: me,
+						max: he,
+						step: y,
+						hourCycle: re,
+						onInvalidInput: E
+					})]
+				})]
+			}),
+			k && !I?.labelId && /* @__PURE__ */ f(ee, {
+				id: J,
+				children: k
+			}),
+			S !== void 0 && /* @__PURE__ */ f("input", {
+				type: "hidden",
+				name: S,
+				value: R ?? "",
+				disabled: L.disabled
+			})
+		]
+	});
+};
+//#endregion
+export { g as DateTimePicker, m as isISODateTime };

package/dist/components/forms/DateTimePicker/DateTimePicker.module.css.cjs.js

@@ -0,0 +1 @@
+var e=`_root_tmjqy_6`,t=`_fullWidth_tmjqy_12`,n=`_fields_tmjqy_17`,r=`_part_tmjqy_24`,i=`_datePart_tmjqy_32`,a=`_timePart_tmjqy_36`,o=`_partLabel_tmjqy_41`,s={root:e,fullWidth:t,fields:n,part:r,datePart:i,timePart:a,partLabel:o};exports.datePart=i,exports.default=s,exports.fields=n,exports.fullWidth=t,exports.part=r,exports.partLabel=o,exports.root=e,exports.timePart=a;

package/dist/components/forms/DateTimePicker/DateTimePicker.module.css.mjs

@@ -0,0 +1,12 @@
+//#region src/components/forms/DateTimePicker/DateTimePicker.module.css
+var e = "_root_tmjqy_6", t = "_fullWidth_tmjqy_12", n = "_fields_tmjqy_17", r = "_part_tmjqy_24", i = "_datePart_tmjqy_32", a = "_timePart_tmjqy_36", o = "_partLabel_tmjqy_41", s = {
+	root: e,
+	fullWidth: t,
+	fields: n,
+	part: r,
+	datePart: i,
+	timePart: a,
+	partLabel: o
+};
+//#endregion
+export { i as datePart, s as default, n as fields, t as fullWidth, r as part, o as partLabel, e as root, a as timePart };

package/dist/components/forms/DateTimePicker/index.d.ts

@@ -0,0 +1 @@
+export * from './DateTimePicker';

package/dist/components/forms/Field/Field.cjs.js

@@ -0,0 +1 @@
+const e=require("../../../utils/cx.cjs.js"),t=require("../../utilities/VisuallyHidden/VisuallyHidden.cjs.js"),n=require("../../primitives/Icon/icons.cjs.js"),r=require("./FieldContext.cjs.js"),i=require("./Field.module.css.cjs.js");let a=require("react"),o=require("react/jsx-runtime");var s=(0,a.createContext)(null),c=e=>e!=null&&e!==!1&&e!==``;function l(e){let[t,n]=(0,a.useState)({hint:0,error:0}),r=(0,a.useCallback)(e=>(n(t=>({...t,[e]:t[e]+1})),()=>n(t=>({...t,[e]:t[e]-1}))),[]);return{parts:(0,a.useMemo)(()=>({hintId:`${e}-hint`,errorId:`${e}-error`,register:r}),[e,r]),counts:t}}function u(e,t){let n=(0,a.useContext)(s)?.register;(0,a.useLayoutEffect)(()=>{if(t&&n)return n(e)},[t,e,n])}var d={sm:i.default.sizeSm,md:i.default.sizeMd,lg:i.default.sizeLg};function f({required:e,requiredIndicator:t,optionalIndicator:n}){return e?t===!1||t===null?null:(0,o.jsx)(`span`,{className:i.default.requiredIndicator,"aria-hidden":`true`,children:t===void 0||t===!0?`*`:t}):c(n)?(0,o.jsx)(`span`,{className:i.default.optionalIndicator,children:n===!0?`(optional)`:n}):null}var p=`input:not([type="hidden"]), select, textarea, button, meter, output, progress`;function m({required:t,requiredIndicator:n,optionalIndicator:s,size:c,className:l,children:u,...m}){let h=r.useFieldContext(),g=t??h?.required??!1,_=c??h?.size??`md`,v=h&&!h.isGroup?h.controlId:void 0,[y,b]=(0,a.useState)(!0);return(0,a.useLayoutEffect)(()=>{let e=v?document.getElementById(v):null;b(!e||e.matches(p))},[v]),(0,o.jsxs)(`label`,{htmlFor:y?v:void 0,id:h?.labelId,...m,className:e.cx(i.default.label,d[_],h?.disabled&&i.default.labelDisabled,l),children:[u,(0,o.jsx)(f,{required:g,requiredIndicator:n,optionalIndicator:s})]})}function h({className:t,children:n,...r}){let l=(0,a.useContext)(s),d=c(n);return u(`hint`,d),d?(0,o.jsx)(`p`,{id:l?.hintId,...r,className:e.cx(i.default.hint,t),children:n}):null}function g({announce:t=!1,className:r,children:l,...d}){let f=(0,a.useContext)(s),p=c(l);u(`error`,p);let m=p?(0,o.jsxs)(`p`,{id:f?.errorId,...d,className:e.cx(i.default.error,r),children:[(0,o.jsx)(n.ErrorIcon,{size:`sm`,className:i.default.errorIcon}),(0,o.jsx)(`span`,{children:l})]}):null;return t?(0,o.jsx)(`div`,{role:`alert`,className:i.default.alertRegion,children:m}):m}function _({label:n,labelVisuallyHidden:u=!1,hint:f,error:p,invalid:_,required:v=!1,disabled:y=!1,readOnly:b=!1,size:x,id:S,requiredIndicator:C,optionalIndicator:w,announceError:T=!1,orientation:E=`vertical`,labelAction:D,counter:O,className:k,children:A,...j}){let M=(0,a.useId)(),{parts:N,counts:P}=l(M),F=c(p),I=_??F,L=F&&I,R=c(f),z=c(O),B=R||P.hint>0,V=L||P.error>0,H=(0,a.useMemo)(()=>({controlId:S??`${M}-control`,labelId:`${M}-label`,hintId:B?N.hintId:void 0,errorId:V?N.errorId:void 0,invalid:I,required:v,disabled:y,readOnly:b,size:x,isGroup:!1}),[S,M,B,V,N,I,v,y,b,x]),U=(0,o.jsx)(m,{requiredIndicator:C,optionalIndicator:w,children:n}),W=c(D);return(0,o.jsx)(r.FieldContext.Provider,{value:H,children:(0,o.jsx)(s.Provider,{value:N,children:(0,o.jsx)(`div`,{...j,"data-orientation":E,"data-invalid":I||void 0,"data-disabled":y||void 0,className:e.cx(i.default.field,E===`horizontal`&&i.default.horizontal,x&&d[x],k),children:(0,o.jsxs)(`div`,{className:i.default.layout,children:[u?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(t.VisuallyHidden,{children:U}),W&&(0,o.jsx)(`div`,{className:e.cx(i.default.labelRow,i.default.labelRowActionOnly),children:(0,o.jsx)(`span`,{className:i.default.labelAction,children:D})})]}):(0,o.jsxs)(`div`,{className:i.default.labelRow,children:[U,W&&(0,o.jsx)(`span`,{className:i.default.labelAction,children:D})]}),(0,o.jsxs)(`div`,{className:i.default.body,children:[A,(R||z)&&(0,o.jsxs)(`div`,{className:i.default.hintRow,children:[R&&(0,o.jsx)(h,{children:f}),z&&(0,o.jsx)(`span`,{className:i.default.counter,children:O})]}),(L||T)&&(0,o.jsx)(g,{announce:T,children:L?p:null})]})]})})})})}function v({id:e,invalid:t=!1,required:n=!1,disabled:i=!1,readOnly:c=!1,size:u,children:d}){let f=(0,a.useId)(),{parts:p,counts:m}=l(f),h=(0,a.useMemo)(()=>({controlId:e??`${f}-control`,labelId:`${f}-label`,hintId:m.hint>0?p.hintId:void 0,errorId:m.error>0?p.errorId:void 0,invalid:t,required:n,disabled:i,readOnly:c,size:u,isGroup:!1}),[e,f,m.hint,m.error,p,t,n,i,c,u]);return(0,o.jsx)(r.FieldContext.Provider,{value:h,children:(0,o.jsx)(s.Provider,{value:p,children:d})})}function y({label:n,labelVisuallyHidden:u=!1,hint:p,error:m,invalid:_,required:v=!1,disabled:y=!1,readOnly:b=!1,size:x,requiredIndicator:S,optionalIndicator:C,requiredText:w=`required`,announceError:T=!1,className:E,children:D,"aria-describedby":O,...k}){let A=(0,a.useId)(),{parts:j,counts:M}=l(A),N=c(m),P=_??N,F=N&&P,I=c(p),L=I||M.hint>0,R=F||M.error>0,z=`${A}-label`,B=(0,a.useMemo)(()=>({controlId:`${A}-control`,labelId:z,hintId:L?j.hintId:void 0,errorId:R?j.errorId:void 0,invalid:P,required:v,disabled:y,readOnly:b,size:x,isGroup:!0}),[A,z,L,R,j,P,v,y,b,x]),V=[O,L?j.hintId:void 0,P&&R?j.errorId:void 0].filter(Boolean).join(` `)||void 0,H=(0,o.jsxs)(o.Fragment,{children:[n,(0,o.jsx)(f,{required:v,requiredIndicator:S,optionalIndicator:C}),v&&(0,o.jsxs)(t.VisuallyHidden,{children:[` (`,w,`)`]})]});return(0,o.jsx)(r.FieldContext.Provider,{value:B,children:(0,o.jsx)(s.Provider,{value:j,children:(0,o.jsxs)(`fieldset`,{...k,disabled:y,"aria-describedby":V,"data-invalid":P||void 0,"data-disabled":y||void 0,className:e.cx(i.default.fieldset,x&&d[x],E),children:[(0,o.jsx)(`legend`,{id:z,className:e.cx(i.default.label,i.default.legend,d[x??`md`],y&&i.default.labelDisabled,u&&i.default.legendHidden),children:u?(0,o.jsx)(t.VisuallyHidden,{children:H}):H}),(0,o.jsxs)(`div`,{className:i.default.groupBody,children:[I&&(0,o.jsx)(h,{children:p}),D,(F||T)&&(0,o.jsx)(g,{announce:T,children:F?m:null})]})]})})})}exports.Field=_,exports.FieldError=g,exports.FieldHint=h,exports.FieldLabel=m,exports.FieldProvider=v,exports.Fieldset=y;