@payfit/unity-components 3.1.14 → 3.1.15

package/dist/esm/components/date-picker-field/TanstackDatePickerField.d.ts

@@ -1,71 +0,0 @@
-import { ReactNode } from 'react';
-import { TanstackDatePickerProps } from '../date-picker/TanstackDatePicker.js';
-import { LabelProps } from '../label/Label.js';
-export type TanstackDatePickerFieldProps = TanstackDatePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
-    /** The label for the date picker field. */
-    label: string;
-    /** Helper text to display below the date picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date picker field. */
-    contextualLink?: ReactNode;
-};
-/**
- * The `TanstackDatePickerField` component renders a full field (label, date picker)
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
- *
- * Behavior:
- * - Renders `TanstackDatePicker` with calendar overlay for date selection.
- * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
- *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
- *
- * Accessibility:
- * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
- *   `aria-details` using identifiers from the `a11y` context.
- *
- * Key props:
- * - `label: string` — label text.
- * - `helperText?: ReactNode` — helper text displayed below the field.
- * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
- * - Inherits props from `TanstackDatePicker`.
- * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
- *
- * Example:
- * ```tsx
- * import { TanstackDatePickerField } from "@/components/date-picker-field/TanstackDatePickerField"
- * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
- * import { parseDate } from '@internationalized/date'
- *
- * function Example() {
- *  const schema = z.object({
- *     birthDate: z.custom<CalendarDate | null>()
- *       .refine(date => date !== null, 'Birth date is required'),
- *  })
- *
- *   const form = useTanstackUnityForm({ validators: {
- *     onBlur: schema,
- *   } })
- *   return (
- *     <form>
- *       <form.AppField name="birthDate">
- *         {() => (
- *           <TanstackDatePickerField
- *             label="Birth Date"
- *             helperText="Select your date of birth"
- *           />
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- */
-declare const TanstackDatePickerField: import('react').ForwardRefExoticComponent<TanstackDatePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
-    /** The label for the date picker field. */
-    label: string;
-    /** Helper text to display below the date picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date picker field. */
-    contextualLink?: ReactNode;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackDatePickerField };

package/dist/esm/components/date-picker-field/TanstackDatePickerField.js

@@ -1,28 +0,0 @@
-import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
-import { TanstackDatePicker as n } from "../date-picker/TanstackDatePicker.js";
-import { TanstackFormHelperText as r } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as i } from "../form-field/parts/TanstackFormLabel.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/date-picker-field/TanstackDatePickerField.tsx
-var c = a(({ label: a, helperText: c, contextualLink: l, isRequired: u, isLoading: d, isDisabled: f, isReadOnly: p, requiredVariant: m, ...h }, g) => /* @__PURE__ */ s(t, { children: [
-	/* @__PURE__ */ o(i, {
-		requiredVariant: m,
-		isRequired: u,
-		children: a
-	}),
-	c && /* @__PURE__ */ o(r, { children: c }),
-	/* @__PURE__ */ o(n, {
-		ref: g,
-		isLoading: d,
-		isDisabled: f,
-		isReadOnly: p,
-		...h
-	}),
-	/* @__PURE__ */ o(e, {}),
-	l
-] }));
-c.displayName = "TanstackDatePickerField";
-//#endregion
-export { c as TanstackDatePickerField };

package/dist/esm/components/date-picker-field/test-utils.js

@@ -1,27 +0,0 @@
-import { CalendarDate as e } from "@internationalized/date";
-import { userEvent as t, within as n } from "storybook/test";
-//#region src/components/date-picker-field/test-utils.ts
-var r = (r) => {
-	let i = (e) => {
-		let t = n(r.canvasElement).getAllByLabelText(e, {
-			exact: !1,
-			selector: "span"
-		});
-		if (t.length !== 3) throw Error(`Date field for ${e} not found`);
-		return t;
-	};
-	return {
-		fillCalendarDate: async ({ labelText: e, calendarDate: n }) => {
-			await r.step(`Fill date picker ${e}`, async () => {
-				let r = i(e);
-				await t.type(r.find((e) => e.getAttribute("data-type") === "day"), String(n.day)), await t.type(r.find((e) => e.getAttribute("data-type") === "month"), String(n.month)), await t.type(r.find((e) => e.getAttribute("data-type") === "year"), String(n.year));
-			});
-		},
-		getCalendarDateValue: ({ labelText: t }) => {
-			let n = i(t), r = (e) => parseInt(n.find((t) => t.getAttribute("data-type") === e)?.textContent ?? "");
-			return new e(r("year"), r("month"), r("day"));
-		}
-	};
-};
-//#endregion
-export { r as getTestingUtilsDatePicker };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.js

@@ -1,150 +0,0 @@
-import { IconButton as e } from "../icon-button/IconButton.js";
-import { calendarBase as t } from "../date-calendar/DateCalendar.variants.js";
-import { useMonthsList as n } from "../date-calendar/hooks/useMonthsList.js";
-import { useYearsList as r } from "../date-calendar/hooks/useYearsList.js";
-import { DateSegmentSelect as i } from "../date-calendar/parts/DateSegmentSelect.js";
-import { useState as a } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useIntl as l } from "react-intl";
-import { Heading as u } from "react-aria-components/Heading";
-import { getLocalTimeZone as d, isToday as f, today as p } from "@internationalized/date";
-import { CalendarCell as m, CalendarGrid as h, CalendarGridBody as g, CalendarGridHeader as _, CalendarHeaderCell as v, RangeCalendar as y } from "react-aria-components/RangeCalendar";
-//#region src/components/date-range-calendar/DateRangeCalendar.tsx
-var b = o({
-	extend: t,
-	slots: {
-		calendarGrid: [
-			"uy:border-spacing-y-25 uy:border-spacing-x-0",
-			"uy:[&_td:has(>[data-selected])]:relative",
-			"uy:[&_td:has(>[data-selection-start])]:bg-transparent uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:content-[''] uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:absolute uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:top-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:right-0 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:w-1/2 uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:h-full ",
-			"uy:[&_td:has(>[data-selection-end])]:bg-transparent",
-			"uy:[&_td:has(>[data-selection-start][data-selection-end])]:bg-transparent",
-			"",
-			"uy:[&_td:has(>[data-selected])]:bg-surface-form-selected",
-			"uy:[&_td:has(>[data-selection-start]:not([data-selection-end]))]:before:bg-surface-form-selected",
-			"uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:content-[''] uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:absolute uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:top-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:left-0 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:w-1/2 uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:h-full  uy:[&_td:has(>[data-selection-end]:not([data-selection-start]))]:before:bg-surface-form-selected"
-		],
-		calendarHeaderCell: "uy:text-center",
-		calendarCell: [
-			"uy:data-[selected]:rounded-none",
-			"uy:data-[selection-start]:bg-surface-form-active uy:data-[selection-start]:rounded-circle",
-			"uy:data-[selection-end]:bg-surface-form-active",
-			"uy:data-[selection-end]:rounded-circle",
-			"",
-			"",
-			"",
-			"",
-			"uy:data-[selection-start]:text-content-form-active",
-			"uy:data-[selection-end]:text-content-form-active",
-			"uy:data-[today]:data-[selection-start]:after:bg-border-form-active",
-			"uy:data-[today]:data-[selection-end]:after:bg-border-form-active"
-		]
-	},
-	variants: {
-		isDisabled: { true: {
-			calendarGrid: "uy:[&_td]:bg-transparent uy:[&_td]:before:hidden",
-			calendarCell: "uy:data-[selected]:bg-transparent uy:data-[selection-start]:bg-transparent uy:data-[selection-start]:text-content-neutral-disabled uy:data-[selection-end]:bg-transparent uy:data-[selection-end]:text-content-neutral-disabled uy:cursor-not-allowed"
-		} },
-		isInteractive: { true: { calendarCell: [
-			"uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:rounded-circle",
-			"",
-			"uy:data-[selected]:not-data-[selection-start]:not-data-[selection-end]:hover:bg-surface-neutral-hover"
-		] } }
-	}
-});
-function x({ value: t, defaultValue: o, minValue: x, maxValue: S, onChange: C, onFocusChange: w, ...T }) {
-	let E = l(), D = p(d()), O = n(), k = r({
-		startYear: x?.year,
-		endYear: S?.year
-	}), [A, j] = a(() => {
-		let e = t?.start ?? o?.start ?? D;
-		return x && e.compare(x) < 0 ? x : S && e.compare(S) > 0 ? S : e;
-	}), M = (e) => {
-		j((t) => t.set({ month: parseInt(e, 10) }));
-	}, N = (e) => {
-		j((t) => t.set({ year: parseInt(e, 10) }));
-	}, { base: P, calendarWrapper: F, dialogHeader: I, dialogHeaderGroup: L, calendarGrid: R, calendarHeaderCell: z, calendarCell: B } = b({
-		isDisabled: T.isDisabled,
-		isInteractive: !T.isDisabled && !T.isReadOnly
-	}), V = "outlined", H = "primary";
-	return /* @__PURE__ */ s("div", {
-		className: P(),
-		"data-dd-privacy": "mask",
-		children: /* @__PURE__ */ s(y, {
-			...T,
-			minValue: x,
-			maxValue: S,
-			value: t,
-			defaultValue: o,
-			onChange: C,
-			focusedValue: A,
-			onFocusChange: (e) => {
-				j(e), w?.(e);
-			},
-			children: /* @__PURE__ */ c("div", {
-				className: F(),
-				children: [/* @__PURE__ */ c("header", {
-					className: I(),
-					children: [
-						/* @__PURE__ */ s(u, { className: "uy:sr-only" }),
-						/* @__PURE__ */ c("div", {
-							className: L({ className: "uy:pl-100 uy:gap-200" }),
-							children: [/* @__PURE__ */ s(i, {
-								type: "month",
-								items: O,
-								value: A.month.toString(),
-								onChange: M,
-								isDisabled: T.isDisabled
-							}), /* @__PURE__ */ s(i, {
-								type: "year",
-								items: k,
-								value: A.year.toString(),
-								onChange: N,
-								isDisabled: T.isDisabled
-							})]
-						}),
-						/* @__PURE__ */ c("div", {
-							className: L({ className: "uy:ml-auto uy:gap-100" }),
-							children: [/* @__PURE__ */ s(e, {
-								slot: "previous",
-								icon: "CaretLeftOutlined",
-								color: H,
-								label: E.formatMessage({
-									id: "unity:component:common:previous",
-									defaultMessage: "Previous"
-								}),
-								variant: V,
-								isDisabled: T.isDisabled
-							}), /* @__PURE__ */ s(e, {
-								slot: "next",
-								icon: "CaretRightOutlined",
-								color: H,
-								label: E.formatMessage({
-									id: "unity:component:common:next",
-									defaultMessage: "Next"
-								}),
-								variant: V,
-								isDisabled: T.isDisabled
-							})]
-						})
-					]
-				}), /* @__PURE__ */ c(h, {
-					className: R(),
-					weekdayStyle: "short",
-					children: [/* @__PURE__ */ s(_, { children: (e) => /* @__PURE__ */ s(v, {
-						className: z(),
-						children: e
-					}) }), /* @__PURE__ */ s(g, { children: (e) => /* @__PURE__ */ s(m, {
-						date: e,
-						"data-today": f(e, d()) ? !0 : void 0,
-						className: B()
-					}) })]
-				})]
-			})
-		})
-	});
-}
-x.displayName = "DateRangeCalendar";
-//#endregion
-export { x as DateRangeCalendar };

package/dist/esm/components/date-range-picker/DateRangePicker.js

@@ -1,132 +0,0 @@
-import { Icon as e } from "../icon/Icon.js";
-import { DateRangeCalendar as t } from "../date-range-calendar/DateRangeCalendar.js";
-import { DateRangeInput as n } from "./parts/DateRangeInput.js";
-import { forwardRef as r } from "react";
-import { uyTv as i } from "@payfit/unity-themes";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { useIntl as s } from "react-intl";
-import { Dialog as c } from "react-aria-components/Dialog";
-import { Button as l, DateRangePicker as u, Group as d, Popover as f } from "react-aria-components/DateRangePicker";
-//#region src/components/date-range-picker/DateRangePicker.tsx
-var p = i({
-	slots: {
-		base: ["uy:group uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75", "uy:active:border-border-form-active uy:data-[focus-visible=true]:border-border-form-active uy:data-[open=true]:border-border-form-active"],
-		inputWrapper: [
-			"uy:flex uy:grow uy:rounded-100 uy:sm:rounded-75 uy:outline-none",
-			"uy:focus-within:outline-2 uy:focus-within:outline-solid uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-3",
-			"uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
-		],
-		suffix: [
-			"uy:flex-grow-0 uy:content-center uy:p-125 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:text-content-neutral-low",
-			"uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed=true]:not-group-data-[open=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:not-group-data-[open=true]:border-border-form-active uy:group-data-[open=true]:border-border-form-active",
-			"uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-3"
-		]
-	},
-	variants: {
-		isInvalid: { true: {
-			base: "uy:border-border-form-error uy:bg-surface-form-error",
-			suffix: "uy:bg-surface-form-error uy:border-border-form-error"
-		} },
-		isReadOnly: { true: {
-			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-			inputWrapper: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
-		} },
-		isDisabled: { true: {
-			base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-			inputWrapper: "uy:bg-surface-form-disabled uy:text-content-form-disabled",
-			suffix: "uy:bg-surface-form-disabled uy:border-border-form-disabled uy:text-content-form-disabled"
-		} }
-	},
-	compoundVariants: [{
-		isInvalid: !1,
-		isDisabled: !1,
-		isReadOnly: !1,
-		className: {
-			base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
-			suffix: "uy:border-border-form-enabled uy:bg-surface-neutral uy:text-content-neutral-low"
-		}
-	}]
-}), m = i({
-	base: "uy:w-[356px] uy:overflow-auto uy:shadow-300 uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-md uy:sm:rounded-75",
-	variants: {
-		isEntering: { true: "uy:animate-in uy:fade-in uy:data-[placement-bottom]:slide-in-from-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-200 uy:ease-out" },
-		isExiting: { true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in" }
-	}
-}), h = r(({ value: r, defaultValue: i, isInvalid: h, isLoading: g, isDisabled: _, isReadOnly: v, onClearButtonPress: y, onBlur: b, onFocus: x, onChange: S, onOpenChange: C, id: w, "aria-label": T, "aria-labelledby": E, "aria-describedby": D, "aria-details": O, ...k }, A) => {
-	let j = s(), { base: M, inputWrapper: N, suffix: P } = p({
-		isInvalid: !!h,
-		isReadOnly: !!v,
-		isDisabled: !!_
-	}), F = (e) => {
-		S?.(e);
-	}, I = (e) => {
-		C?.(e), e ? x?.() : b?.();
-	}, L = (e) => k.isDateUnavailable ? k.isDateUnavailable(e) : !1, R = () => {
-		y?.();
-	};
-	return /* @__PURE__ */ o(u, {
-		ref: A,
-		"data-dd-privacy": "mask",
-		...k,
-		className: M(),
-		value: r,
-		defaultValue: i,
-		minValue: k.minValue,
-		maxValue: k.maxValue,
-		isReadOnly: !!v,
-		isDisabled: !!_,
-		onChange: F,
-		onFocus: x,
-		onBlur: b,
-		onOpenChange: I,
-		isInvalid: !!h,
-		isDateUnavailable: L,
-		"aria-label": T,
-		"aria-labelledby": E,
-		"aria-describedby": D,
-		"aria-details": O,
-		children: [/* @__PURE__ */ o(d, {
-			className: N(),
-			id: w,
-			children: [/* @__PURE__ */ a(n, {
-				isLoading: g,
-				isDisabled: _,
-				isReadOnly: v,
-				isInvalid: h,
-				onClearButtonPress: R
-			}), /* @__PURE__ */ a(l, {
-				className: P(),
-				isDisabled: v || _,
-				children: /* @__PURE__ */ a(e, {
-					src: "CalendarBlankOutlined",
-					color: "inherit",
-					alt: j.formatMessage({
-						id: "unity:component:form-field:date-range-picker:calendar-button",
-						defaultMessage: "Open Calendar"
-					})
-				})
-			})]
-		}), /* @__PURE__ */ a(f, {
-			className: ({ isEntering: e, isExiting: t }) => m({
-				isEntering: e,
-				isExiting: t
-			}),
-			children: /* @__PURE__ */ a(c, {
-				className: "uy:p-150",
-				"data-dd-privacy": "mask",
-				children: /* @__PURE__ */ a(t, {
-					value: r,
-					defaultValue: i,
-					minValue: k.minValue,
-					maxValue: k.maxValue,
-					onChange: F,
-					firstDayOfWeek: k.firstDayOfWeek
-				})
-			})
-		})]
-	});
-});
-h.displayName = "DateRangePicker";
-//#endregion
-export { h as DateRangePicker };

package/dist/esm/components/date-range-picker/TanstackDateRangePicker.d.ts

@@ -1,22 +0,0 @@
-import { DateRangePickerProps } from './DateRangePicker.js';
-export type TanstackDateRangePickerProps = Omit<DateRangePickerProps, 'value' | 'defaultValue' | 'isInvalid'>;
-/**
- * `TanstackDateRangePicker` is a controlled date range picker wired to the TanStack Form field context.
- * It is based on the Unity `DateRangePicker` component.
- *
- * Example:
- * ```tsx
- * function ExampleField() {
- *   const form = useTanstackUnityForm<{ period: DateRange | null }>({ validators: {} })
- *   return (
- *     <form>
- *       <form.AppField name="period">
- *         {() => <TanstackDateRangePicker />}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- */
-declare const TanstackDateRangePicker: import('react').ForwardRefExoticComponent<TanstackDateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackDateRangePicker };

package/dist/esm/components/date-range-picker/TanstackDateRangePicker.js

@@ -1,39 +0,0 @@
-import { DateRangePicker as e } from "./DateRangePicker.js";
-import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
-import { forwardRef as r } from "react";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/components/date-range-picker/TanstackDateRangePicker.tsx
-var a = r(({ onClearButtonPress: r, onBlur: a, onFocus: o, onChange: s, onOpenChange: c, isReadOnly: l, isDisabled: u, ...d }, f) => {
-	let p = t(), m = n(), h = p.state.meta.isTouched && !p.state.meta.isValid, g = [m.helperTextId, m.feedbackTextId].filter(Boolean).join(" ");
-	return /* @__PURE__ */ i(e, {
-		...d,
-		ref: f,
-		id: m.inputId,
-		value: p.state.value,
-		onChange: (e) => {
-			p.handleChange(e), s?.(e);
-		},
-		onBlur: () => {
-			p.handleBlur(), a?.();
-		},
-		onFocus: () => {
-			o?.();
-		},
-		onOpenChange: (e) => {
-			c?.(e);
-		},
-		onClearButtonPress: () => {
-			p.setValue(null), r?.();
-		},
-		isReadOnly: l,
-		isDisabled: u,
-		isInvalid: h,
-		"aria-labelledby": m.labelId,
-		"aria-describedby": g.length > 0 ? g : void 0,
-		"aria-details": m.contextualLinkId
-	});
-});
-a.displayName = "TanstackDateRangePicker";
-//#endregion
-export { a as TanstackDateRangePicker };

package/dist/esm/components/date-range-picker/parts/DateRangeInput.js

@@ -1,92 +0,0 @@
-import { Icon as e } from "../../icon/Icon.js";
-import { Spinner as t } from "../../spinner/Spinner.js";
-import { CircularIconButton as n } from "../../icon-button/CircularIconButton.js";
-import { dateInput as r, dateSegment as i } from "../../date-picker/parts/DateInput.js";
-import { useContext as a } from "react";
-import { uyTv as o } from "@payfit/unity-themes";
-import { jsx as s, jsxs as c } from "react/jsx-runtime";
-import { useIntl as l } from "react-intl";
-import { DateInput as u, DateRangePickerStateContext as d, DateSegment as f } from "react-aria-components/DateRangePicker";
-//#region src/components/date-range-picker/parts/DateRangeInput.tsx
-var p = o({
-	base: "uy:px-50 uy:flex uy:items-center",
-	variants: { isDisabled: {
-		true: "uy:text-content-form-disabled",
-		false: ["uy:text-content-neutral-lowest"]
-	} }
-});
-function m({ isLoading: o, isInvalid: m, isReadOnly: h, isDisabled: g, onClearButtonPress: _ }) {
-	let v = l(), y = a(d), { value: b } = y, { base: x, input: S, state: C } = r({
-		isInvalid: !!m,
-		isReadOnly: !!h,
-		isDisabled: !!g
-	}), w = b?.start && b?.end && !o && !h && !g;
-	return /* @__PURE__ */ c("div", {
-		className: x(),
-		children: [/* @__PURE__ */ c("div", {
-			className: S(),
-			children: [
-				/* @__PURE__ */ s(u, {
-					slot: "start",
-					className: "uy:flex uy:gap-25",
-					children: (e) => /* @__PURE__ */ s(f, {
-						segment: e,
-						className: i({
-							isPlaceholder: e.isPlaceholder,
-							isLiteral: e.type === "literal"
-						})
-					})
-				}),
-				/* @__PURE__ */ s("span", {
-					className: p({ isDisabled: !!g }),
-					children: "→"
-				}),
-				/* @__PURE__ */ s(u, {
-					slot: "end",
-					className: "uy:flex uy:gap-25",
-					children: (e) => /* @__PURE__ */ s(f, {
-						segment: e,
-						className: i({
-							isPlaceholder: e.isPlaceholder,
-							isLiteral: e.type === "literal"
-						})
-					})
-				})
-			]
-		}), /* @__PURE__ */ c("div", {
-			className: C(),
-			children: [
-				o && /* @__PURE__ */ s(t, {
-					color: "inherit",
-					size: "small",
-					label: v.formatMessage({
-						id: "unity:component:common:loading:label",
-						defaultMessage: "Loading..."
-					})
-				}),
-				m && /* @__PURE__ */ s(e, {
-					src: "WarningCircleOutlined",
-					color: "content.form.invalid",
-					alt: v.formatMessage({
-						id: "unity:component:form-field:form-input:error:alt",
-						defaultMessage: "Error"
-					})
-				}),
-				w && /* @__PURE__ */ s(n, {
-					slot: null,
-					title: v.formatMessage({
-						id: "unity:component:common:clear:title",
-						defaultMessage: "Clear"
-					}),
-					icon: "CloseOutlined",
-					onPress: () => {
-						y?.setValue(null), _?.();
-					}
-				})
-			]
-		})]
-	});
-}
-m.displayName = "DateRangeInput";
-//#endregion
-export { m as DateRangeInput };

package/dist/esm/components/date-range-picker-field/TanstackDateRangePickerField.d.ts

@@ -1,64 +0,0 @@
-import { ReactNode } from 'react';
-import { TanstackDateRangePickerProps } from '../date-range-picker/TanstackDateRangePicker.js';
-import { LabelProps } from '../label/Label.js';
-export type TanstackDateRangePickerFieldProps = TanstackDateRangePickerProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
-    /** The label for the date range picker field. */
-    label: string;
-    /** Helper text to display below the date range picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date range picker field. */
-    contextualLink?: ReactNode;
-};
-/**
- * The `TanstackDateRangePickerField` component renders a full field (label, date range picker)
- * wired to the TanStack Form context. It manages state and accessibility via the
- * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
- *
- * Behavior:
- * - Renders `TanstackDateRangePicker` with calendar overlay for date range selection.
- * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
- *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
- *
- * Accessibility:
- * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
- *   `aria-details` using identifiers from the `a11y` context.
- *
- * Example:
- * ```tsx
- * import { TanstackDateRangePickerField } from "@payfit/unity-components"
- * import { useTanstackUnityForm } from "@payfit/unity-components"
- * import { CalendarDate } from '@internationalized/date'
- *
- * function Example() {
- *   const schema = z.object({
- *     period: z.custom<{ start: CalendarDate; end: CalendarDate } | null>()
- *       .refine(range => range !== null, 'Date range is required'),
- *   })
- *
- *   const form = useTanstackUnityForm({ validators: {
- *     onBlur: schema,
- *   } })
- *   return (
- *     <form>
- *       <form.AppField name="period">
- *         {() => (
- *           <TanstackDateRangePickerField
- *             label="Period"
- *             helperText="Select a date range"
- *           />
- *         )}
- *       </form.AppField>
- *     </form>
- *   )
- * }
- * ```
- */
-declare const TanstackDateRangePickerField: import('react').ForwardRefExoticComponent<TanstackDateRangePickerProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
-    /** The label for the date range picker field. */
-    label: string;
-    /** Helper text to display below the date range picker field. */
-    helperText?: ReactNode;
-    /** A contextual link to display below the date range picker field. */
-    contextualLink?: ReactNode;
-} & import('react').RefAttributes<HTMLDivElement>>;
-export { TanstackDateRangePickerField };

package/dist/esm/components/date-range-picker-field/TanstackDateRangePickerField.js

@@ -1,28 +0,0 @@
-import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
-import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackDateRangePicker as i } from "../date-range-picker/TanstackDateRangePicker.js";
-import { forwardRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-//#region src/components/date-range-picker-field/TanstackDateRangePickerField.tsx
-var c = a(({ label: a, helperText: c, contextualLink: l, isRequired: u, isLoading: d, isDisabled: f, isReadOnly: p, requiredVariant: m, ...h }, g) => /* @__PURE__ */ s(t, { children: [
-	/* @__PURE__ */ o(r, {
-		requiredVariant: m,
-		isRequired: u,
-		children: a
-	}),
-	c && /* @__PURE__ */ o(n, { children: c }),
-	/* @__PURE__ */ o(i, {
-		ref: g,
-		isLoading: d,
-		isDisabled: f,
-		isReadOnly: p,
-		...h
-	}),
-	/* @__PURE__ */ o(e, {}),
-	l
-] }));
-c.displayName = "TanstackDateRangePickerField";
-//#endregion
-export { c as TanstackDateRangePickerField };