@optimum-intelligence/opti-ui 0.0.0-stage → 0.3.0

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { type CalendarLabels, type DateRange, type RangeCalendarProps } from '../calendar/Calendar';
+import { type PickerFieldProps } from './PickerField';
+export interface DateRangePickerLabels extends CalendarLabels {
+    clear: string;
+    presets: string;
+}
+export interface DateRangePreset {
+    label: React.ReactNode;
+    value: DateRange;
+}
+export interface DateRangePickerProps extends PickerFieldProps, Pick<RangeCalendarProps, 'isDateDisabled' | 'defaultMonth' | 'locale' | 'weekStartsOn' | 'numberOfMonths'> {
+    /** Selected days as ISO dates; both ends are inclusive. */
+    value?: DateRange | null;
+    defaultValue?: DateRange | null;
+    /** Called with the new range, or `null` when cleared. */
+    onValueChange?: (value: DateRange | null) => void;
+    /** Earliest allowed day. */
+    min?: string;
+    /** Latest allowed day. */
+    max?: string;
+    /** Shortcuts listed beside the calendar ("Last 7 days", "This month"…). */
+    presets?: DateRangePreset[];
+    /** Submits the first day with a form under this name. */
+    startName?: string;
+    /** Submits the last day with a form under this name. */
+    endName?: string;
+    /** Show the Clear action. Defaults to `true` unless `required`. */
+    clearable?: boolean;
+    /** Custom display text for the selected range. */
+    formatValue?: (value: DateRange) => React.ReactNode;
+    /** Override texts for localisation. */
+    labels?: Partial<DateRangePickerLabels>;
+}
+/**
+ * Date range field with a calendar popover and optional presets. Values are
+ * `{ start, end }` ISO dates (`"2026-03-09"`), both inclusive.
+ */
+export declare function DateRangePicker({ value, defaultValue, onValueChange, min, max, isDateDisabled, defaultMonth, locale, weekStartsOn, numberOfMonths, presets, startName, endName, placeholder, clearable, formatValue, labels, contentProps, ...field }: DateRangePickerProps): React.JSX.Element;

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

@@ -0,0 +1,339 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { Button } from "../button/Button.js";
+import { clampDate, datePart, formatDate, toRange } from "../calendar/date-utils.js";
+import { RangeCalendar } from "../calendar/Calendar.js";
+import { PickerField, useOpenState } from "./PickerField.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/date-picker/DateRangePicker.tsx
+var defaultLabels = {
+	clear: "Clear",
+	presets: "Presets"
+};
+function formatDisplay(range) {
+	return `${formatDate(range.start)} – ${formatDate(range.end)}`;
+}
+/**
+* Date range field with a calendar popover and optional presets. Values are
+* `{ start, end }` ISO dates (`"2026-03-09"`), both inclusive.
+*/
+function DateRangePicker(t0) {
+	const $ = c(104);
+	let clearable;
+	let contentProps;
+	let defaultMonth;
+	let endName;
+	let field;
+	let formatValue;
+	let isDateDisabled;
+	let labels;
+	let locale;
+	let max;
+	let min;
+	let onValueChange;
+	let presets;
+	let startName;
+	let t1;
+	let t2;
+	let t3;
+	let value;
+	let weekStartsOn;
+	if ($[0] !== t0) {
+		({value, defaultValue: t1, onValueChange, min, max, isDateDisabled, defaultMonth, locale, weekStartsOn, numberOfMonths: t2, presets, startName, endName, placeholder: t3, clearable, formatValue, labels, contentProps, ...field} = t0);
+		$[0] = t0;
+		$[1] = clearable;
+		$[2] = contentProps;
+		$[3] = defaultMonth;
+		$[4] = endName;
+		$[5] = field;
+		$[6] = formatValue;
+		$[7] = isDateDisabled;
+		$[8] = labels;
+		$[9] = locale;
+		$[10] = max;
+		$[11] = min;
+		$[12] = onValueChange;
+		$[13] = presets;
+		$[14] = startName;
+		$[15] = t1;
+		$[16] = t2;
+		$[17] = t3;
+		$[18] = value;
+		$[19] = weekStartsOn;
+	} else {
+		clearable = $[1];
+		contentProps = $[2];
+		defaultMonth = $[3];
+		endName = $[4];
+		field = $[5];
+		formatValue = $[6];
+		isDateDisabled = $[7];
+		labels = $[8];
+		locale = $[9];
+		max = $[10];
+		min = $[11];
+		onValueChange = $[12];
+		presets = $[13];
+		startName = $[14];
+		t1 = $[15];
+		t2 = $[16];
+		t3 = $[17];
+		value = $[18];
+		weekStartsOn = $[19];
+	}
+	const defaultValue = t1 === void 0 ? null : t1;
+	const numberOfMonths = t2 === void 0 ? 2 : t2;
+	const placeholder = t3 === void 0 ? "Select dates" : t3;
+	let t4;
+	if ($[20] !== labels) {
+		t4 = {
+			...defaultLabels,
+			...labels
+		};
+		$[20] = labels;
+		$[21] = t4;
+	} else t4 = $[21];
+	const text = t4;
+	let t5;
+	if ($[22] !== defaultValue?.end || $[23] !== defaultValue?.start) {
+		t5 = () => toRange(defaultValue?.start, defaultValue?.end);
+		$[22] = defaultValue?.end;
+		$[23] = defaultValue?.start;
+		$[24] = t5;
+	} else t5 = $[24];
+	const [inner, setInner] = React.useState(t5);
+	let t6;
+	if ($[25] !== inner || $[26] !== value) {
+		t6 = value === void 0 ? inner : toRange(value?.start, value?.end);
+		$[25] = inner;
+		$[26] = value;
+		$[27] = t6;
+	} else t6 = $[27];
+	const current = t6;
+	const [open, setOpen] = useOpenState(field);
+	let T0;
+	let commit;
+	let lower;
+	let t10;
+	let t11;
+	let t12;
+	let t13;
+	let t14;
+	let t15;
+	let t7;
+	let t8;
+	let t9;
+	let upper;
+	if ($[28] !== contentProps || $[29] !== current || $[30] !== endName || $[31] !== field || $[32] !== formatValue || $[33] !== max || $[34] !== min || $[35] !== onValueChange || $[36] !== open || $[37] !== placeholder || $[38] !== presets || $[39] !== setOpen || $[40] !== startName || $[41] !== text) {
+		[lower, upper] = [datePart(min) ?? void 0, datePart(max) ?? void 0];
+		commit = (next) => {
+			const bounded = next && toRange(clampDate(next.start, lower, upper), clampDate(next.end, lower, upper));
+			setInner(bounded);
+			onValueChange?.(bounded);
+			setOpen(false);
+		};
+		T0 = PickerField;
+		t9 = field;
+		t10 = open;
+		t11 = setOpen;
+		t12 = placeholder;
+		if ($[55] !== current || $[56] !== formatValue) {
+			t13 = current ? formatValue?.(current) ?? formatDisplay(current) : null;
+			$[55] = current;
+			$[56] = formatValue;
+			$[57] = t13;
+		} else t13 = $[57];
+		const t16 = typeof contentProps?.className === "string" && contentProps.className;
+		let t17;
+		if ($[58] !== t16) {
+			t17 = cx("oui-date-range-picker__popup", t16);
+			$[58] = t16;
+			$[59] = t17;
+		} else t17 = $[59];
+		if ($[60] !== contentProps || $[61] !== t17) {
+			t14 = {
+				...contentProps,
+				className: t17
+			};
+			$[60] = contentProps;
+			$[61] = t17;
+			$[62] = t14;
+		} else t14 = $[62];
+		let t18;
+		if ($[63] !== current?.start || $[64] !== startName) {
+			t18 = startName && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: startName,
+				value: current?.start ?? ""
+			});
+			$[63] = current?.start;
+			$[64] = startName;
+			$[65] = t18;
+		} else t18 = $[65];
+		let t19;
+		if ($[66] !== current?.end || $[67] !== endName) {
+			t19 = endName && /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name: endName,
+				value: current?.end ?? ""
+			});
+			$[66] = current?.end;
+			$[67] = endName;
+			$[68] = t19;
+		} else t19 = $[68];
+		if ($[69] !== t18 || $[70] !== t19) {
+			t15 = /* @__PURE__ */ jsxs(Fragment, { children: [t18, t19] });
+			$[69] = t18;
+			$[70] = t19;
+			$[71] = t15;
+		} else t15 = $[71];
+		t7 = "oui-date-range-picker__body";
+		t8 = presets && presets.length > 0 && /* @__PURE__ */ jsx("div", {
+			role: "group",
+			"aria-label": text.presets,
+			className: "oui-date-range-picker__presets",
+			children: presets.map((preset, index) => {
+				const range = toRange(preset.value.start, preset.value.end);
+				const active = Boolean(range && current && range.start === current.start && range.end === current.end);
+				return /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: "oui-date-range-picker__preset",
+					"aria-pressed": active,
+					"data-active": active ? "" : void 0,
+					disabled: !range,
+					onClick: () => commit(range),
+					children: preset.label
+				}, index);
+			})
+		});
+		$[28] = contentProps;
+		$[29] = current;
+		$[30] = endName;
+		$[31] = field;
+		$[32] = formatValue;
+		$[33] = max;
+		$[34] = min;
+		$[35] = onValueChange;
+		$[36] = open;
+		$[37] = placeholder;
+		$[38] = presets;
+		$[39] = setOpen;
+		$[40] = startName;
+		$[41] = text;
+		$[42] = T0;
+		$[43] = commit;
+		$[44] = lower;
+		$[45] = t10;
+		$[46] = t11;
+		$[47] = t12;
+		$[48] = t13;
+		$[49] = t14;
+		$[50] = t15;
+		$[51] = t7;
+		$[52] = t8;
+		$[53] = t9;
+		$[54] = upper;
+	} else {
+		T0 = $[42];
+		commit = $[43];
+		lower = $[44];
+		t10 = $[45];
+		t11 = $[46];
+		t12 = $[47];
+		t13 = $[48];
+		t14 = $[49];
+		t15 = $[50];
+		t7 = $[51];
+		t8 = $[52];
+		t9 = $[53];
+		upper = $[54];
+	}
+	let t16;
+	if ($[72] !== commit || $[73] !== current || $[74] !== defaultMonth || $[75] !== isDateDisabled || $[76] !== labels || $[77] !== locale || $[78] !== lower || $[79] !== numberOfMonths || $[80] !== upper || $[81] !== weekStartsOn) {
+		t16 = /* @__PURE__ */ jsx(RangeCalendar, {
+			value: current,
+			onValueChange: commit,
+			min: lower,
+			max: upper,
+			isDateDisabled,
+			defaultMonth,
+			locale,
+			weekStartsOn,
+			numberOfMonths,
+			labels
+		});
+		$[72] = commit;
+		$[73] = current;
+		$[74] = defaultMonth;
+		$[75] = isDateDisabled;
+		$[76] = labels;
+		$[77] = locale;
+		$[78] = lower;
+		$[79] = numberOfMonths;
+		$[80] = upper;
+		$[81] = weekStartsOn;
+		$[82] = t16;
+	} else t16 = $[82];
+	let t17;
+	if ($[83] !== t16 || $[84] !== t7 || $[85] !== t8) {
+		t17 = /* @__PURE__ */ jsxs("div", {
+			className: t7,
+			children: [t8, t16]
+		});
+		$[83] = t16;
+		$[84] = t7;
+		$[85] = t8;
+		$[86] = t17;
+	} else t17 = $[86];
+	let t18;
+	if ($[87] !== clearable || $[88] !== commit || $[89] !== current || $[90] !== field || $[91] !== text) {
+		t18 = (clearable ?? !field.required) && /* @__PURE__ */ jsx("div", {
+			className: "oui-date-picker__footer",
+			children: /* @__PURE__ */ jsx(Button, {
+				size: "sm",
+				variant: "ghost",
+				shape: "rounded",
+				disabled: !current,
+				onClick: () => commit(null),
+				children: text.clear
+			})
+		});
+		$[87] = clearable;
+		$[88] = commit;
+		$[89] = current;
+		$[90] = field;
+		$[91] = text;
+		$[92] = t18;
+	} else t18 = $[92];
+	let t19;
+	if ($[93] !== T0 || $[94] !== t10 || $[95] !== t11 || $[96] !== t12 || $[97] !== t13 || $[98] !== t14 || $[99] !== t15 || $[100] !== t17 || $[101] !== t18 || $[102] !== t9) {
+		t19 = /* @__PURE__ */ jsxs(T0, {
+			...t9,
+			open: t10,
+			onOpenChange: t11,
+			placeholder: t12,
+			display: t13,
+			contentProps: t14,
+			inputs: t15,
+			children: [t17, t18]
+		});
+		$[93] = T0;
+		$[94] = t10;
+		$[95] = t11;
+		$[96] = t12;
+		$[97] = t13;
+		$[98] = t14;
+		$[99] = t15;
+		$[100] = t17;
+		$[101] = t18;
+		$[102] = t9;
+		$[103] = t19;
+	} else t19 = $[103];
+	return t19;
+}
+//#endregion
+export { DateRangePicker };
+
+//# sourceMappingURL=DateRangePicker.js.map

package/dist/components/date-picker/DateRangePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangePicker.js","names":["React","cx","Button","RangeCalendar","CalendarLabels","DateRange","RangeCalendarProps","clampDate","datePart","formatDate","toRange","PickerField","useOpenState","PickerFieldProps","DateRangePickerLabels","clear","presets","defaultLabels","Omit","DateRangePreset","label","ReactNode","value","DateRangePickerProps","Pick","defaultValue","onValueChange","min","max","startName","endName","clearable","formatValue","labels","Partial","formatDisplay","range","start","end","DateRangePicker","t0","$","_c","contentProps","defaultMonth","field","isDateDisabled","locale","t1","t2","t3","weekStartsOn","numberOfMonths","placeholder","undefined","t4","text","t5","inner","setInner","useState","t6","current","open","setOpen","T0","commit","lower","t10","t11","t12","t13","t14","t15","t7","t8","t9","upper","next","bounded","t16","className","t17","t18","t19","length","map","preset","index","active","Boolean","required","_c","_Fragment"],"sources":["../../../src/components/date-picker/DateRangePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { cx } from '../../utils/cx';\nimport { Button } from '../button/Button';\nimport { RangeCalendar, type CalendarLabels, type DateRange, type RangeCalendarProps } from '../calendar/Calendar';\nimport { clampDate, datePart, formatDate, toRange } from '../calendar/date-utils';\nimport { PickerField, useOpenState, type PickerFieldProps } from './PickerField';\n\nexport interface DateRangePickerLabels extends CalendarLabels {\n  clear: string;\n  presets: string;\n}\n\nconst defaultLabels: Omit<DateRangePickerLabels, keyof CalendarLabels> = {\n  clear: 'Clear',\n  presets: 'Presets',\n};\n\nexport interface DateRangePreset {\n  label: React.ReactNode;\n  value: DateRange;\n}\n\nexport interface DateRangePickerProps\n  extends PickerFieldProps,\n    Pick<RangeCalendarProps, 'isDateDisabled' | 'defaultMonth' | 'locale' | 'weekStartsOn' | 'numberOfMonths'> {\n  /** Selected days as ISO dates; both ends are inclusive. */\n  value?: DateRange | null;\n  defaultValue?: DateRange | null;\n  /** Called with the new range, or `null` when cleared. */\n  onValueChange?: (value: DateRange | null) => void;\n  /** Earliest allowed day. */\n  min?: string;\n  /** Latest allowed day. */\n  max?: string;\n  /** Shortcuts listed beside the calendar (\"Last 7 days\", \"This month\"…). */\n  presets?: DateRangePreset[];\n  /** Submits the first day with a form under this name. */\n  startName?: string;\n  /** Submits the last day with a form under this name. */\n  endName?: string;\n  /** Show the Clear action. Defaults to `true` unless `required`. */\n  clearable?: boolean;\n  /** Custom display text for the selected range. */\n  formatValue?: (value: DateRange) => React.ReactNode;\n  /** Override texts for localisation. */\n  labels?: Partial<DateRangePickerLabels>;\n}\n\nfunction formatDisplay(range: DateRange): string {\n  return `${formatDate(range.start)} – ${formatDate(range.end)}`;\n}\n\n/**\n * Date range field with a calendar popover and optional presets. Values are\n * `{ start, end }` ISO dates (`\"2026-03-09\"`), both inclusive.\n */\nexport function DateRangePicker({\n  value,\n  defaultValue = null,\n  onValueChange,\n  min,\n  max,\n  isDateDisabled,\n  defaultMonth,\n  locale,\n  weekStartsOn,\n  numberOfMonths = 2,\n  presets,\n  startName,\n  endName,\n  placeholder = 'Select dates',\n  clearable,\n  formatValue,\n  labels,\n  contentProps,\n  ...field\n}: DateRangePickerProps) {\n  const text = { ...defaultLabels, ...labels };\n  const [inner, setInner] = React.useState(() => toRange(defaultValue?.start, defaultValue?.end));\n  const current = value === undefined ? inner : toRange(value?.start, value?.end);\n  const [open, setOpen] = useOpenState(field);\n  const [lower, upper] = [datePart(min) ?? undefined, datePart(max) ?? undefined];\n\n  const commit = (next: DateRange | null) => {\n    const bounded = next && toRange(clampDate(next.start, lower, upper), clampDate(next.end, lower, upper));\n    setInner(bounded);\n    onValueChange?.(bounded);\n    setOpen(false);\n  };\n\n  return (\n    <PickerField\n      {...field}\n      open={open}\n      onOpenChange={setOpen}\n      placeholder={placeholder}\n      display={current ? (formatValue?.(current) ?? formatDisplay(current)) : null}\n      contentProps={{\n        ...contentProps,\n        className: cx('oui-date-range-picker__popup', typeof contentProps?.className === 'string' && contentProps.className),\n      }}\n      inputs={\n        <>\n          {startName && <input type=\"hidden\" name={startName} value={current?.start ?? ''} />}\n          {endName && <input type=\"hidden\" name={endName} value={current?.end ?? ''} />}\n        </>\n      }\n    >\n      <div className=\"oui-date-range-picker__body\">\n        {presets && presets.length > 0 && (\n          <div role=\"group\" aria-label={text.presets} className=\"oui-date-range-picker__presets\">\n            {presets.map((preset, index) => {\n              const range = toRange(preset.value.start, preset.value.end);\n              const active = Boolean(range && current && range.start === current.start && range.end === current.end);\n              return (\n                <button\n                  key={index}\n                  type=\"button\"\n                  className=\"oui-date-range-picker__preset\"\n                  aria-pressed={active}\n                  data-active={active ? '' : undefined}\n                  disabled={!range}\n                  onClick={() => commit(range)}\n                >\n                  {preset.label}\n                </button>\n              );\n            })}\n          </div>\n        )}\n        <RangeCalendar\n          value={current}\n          onValueChange={commit}\n          min={lower}\n          max={upper}\n          isDateDisabled={isDateDisabled}\n          defaultMonth={defaultMonth}\n          locale={locale}\n          weekStartsOn={weekStartsOn}\n          numberOfMonths={numberOfMonths}\n          labels={labels}\n        />\n      </div>\n      {(clearable ?? !field.required) && (\n        <div className=\"oui-date-picker__footer\">\n          <Button size=\"sm\" variant=\"ghost\" shape=\"rounded\" disabled={!current} onClick={() => commit(null)}>\n            {text.clear}\n          </Button>\n        </div>\n      )}\n    </PickerField>\n  );\n}\n"],"mappings":"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"}

package/dist/components/date-picker/PickerField.d.ts

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Popover as BasePopover } from '@base-ui/react/popover';
+import { type PopoverContentProps } from '../popover/Popover';
+import type { ControlSize } from '../input/Input';
+/** Field props shared by the date pickers. */
+export interface PickerFieldProps {
+    ref?: React.Ref<HTMLButtonElement>;
+    label?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Error message. When set, the field is marked invalid. */
+    error?: React.ReactNode;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: React.ReactNode;
+    size?: ControlSize;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    id?: string;
+    className?: string;
+    /** Props for the trigger button (aria-*, data-*, onBlur…). */
+    triggerProps?: Omit<React.ComponentProps<typeof BasePopover.Trigger>, 'children' | 'disabled' | 'id'>;
+    contentProps?: Omit<PopoverContentProps, 'children'>;
+}
+export declare function useOpenState({ open, defaultOpen, onOpenChange }: PickerFieldProps): readonly [boolean, (next: boolean) => void];
+interface PickerFieldShellProps extends Omit<PickerFieldProps, 'open' | 'defaultOpen' | 'onOpenChange'> {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** Text for the current value; `null` shows the placeholder. */
+    display: React.ReactNode | null;
+    /** Popover content. */
+    children: React.ReactNode;
+    /** Hidden inputs that submit the value with a form. */
+    inputs?: React.ReactNode;
+}
+/** Label, trigger button, calendar popover, description and error of a date picker. */
+export declare function PickerField({ label, description, error, required, disabled, placeholder, size, open, onOpenChange, id: idProp, className, triggerProps, contentProps, display, children, inputs, ref, }: PickerFieldShellProps): React.JSX.Element;
+export {};

package/dist/components/date-picker/PickerField.js

@@ -0,0 +1,238 @@
+"use client";
+import { cx } from "../../utils/cx.js";
+import { CalendarIcon } from "../../icons/index.js";
+import { Popover as Popover$1 } from "../popover/Popover.js";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Popover } from "@base-ui/react/popover";
+//#region src/components/date-picker/PickerField.tsx
+function useOpenState(t0) {
+	const $ = c(5);
+	const { open, defaultOpen: t1, onOpenChange } = t0;
+	const defaultOpen = t1 === void 0 ? false : t1;
+	const [inner, setInner] = React.useState(defaultOpen);
+	let t2;
+	if ($[0] !== onOpenChange) {
+		t2 = (next) => {
+			setInner(next);
+			onOpenChange?.(next);
+		};
+		$[0] = onOpenChange;
+		$[1] = t2;
+	} else t2 = $[1];
+	const setOpen = t2;
+	const t3 = open ?? inner;
+	let t4;
+	if ($[2] !== setOpen || $[3] !== t3) {
+		t4 = [t3, setOpen];
+		$[2] = setOpen;
+		$[3] = t3;
+		$[4] = t4;
+	} else t4 = $[4];
+	return t4;
+}
+/** Label, trigger button, calendar popover, description and error of a date picker. */
+function PickerField(t0) {
+	const $ = c(59);
+	const { label, description, error, required, disabled, placeholder, size: t1, open, onOpenChange, id: idProp, className, triggerProps, contentProps, display, children, inputs, ref } = t0;
+	const size = t1 === void 0 ? "md" : t1;
+	const generatedId = React.useId();
+	const id = idProp ?? generatedId;
+	const popupRef = React.useRef(null);
+	const errorId = error ? `${id}-error` : void 0;
+	let t2;
+	if ($[0] !== description || $[1] !== errorId || $[2] !== id) {
+		t2 = cx(description != null && `${id}-description`, errorId) || void 0;
+		$[0] = description;
+		$[1] = errorId;
+		$[2] = id;
+		$[3] = t2;
+	} else t2 = $[3];
+	const describedBy = t2;
+	let t3;
+	if ($[4] !== className) {
+		t3 = cx("oui-field", "oui-date-picker", className);
+		$[4] = className;
+		$[5] = t3;
+	} else t3 = $[5];
+	const t4 = disabled || void 0;
+	const t5 = error ? "" : void 0;
+	let t6;
+	if ($[6] !== id || $[7] !== label || $[8] !== required) {
+		t6 = label != null && /* @__PURE__ */ jsxs("label", {
+			id: `${id}-label`,
+			htmlFor: id,
+			className: "oui-field__label",
+			children: [label, required && /* @__PURE__ */ jsx("span", {
+				className: "oui-field__required",
+				"aria-hidden": true,
+				children: "*"
+			})]
+		});
+		$[6] = id;
+		$[7] = label;
+		$[8] = required;
+		$[9] = t6;
+	} else t6 = $[9];
+	let t7;
+	if ($[10] !== onOpenChange) {
+		t7 = (next) => onOpenChange(next);
+		$[10] = onOpenChange;
+		$[11] = t7;
+	} else t7 = $[11];
+	const t8 = label != null ? `${id}-label ${id}-value` : void 0;
+	const t9 = required || void 0;
+	const t10 = error ? true : void 0;
+	const t11 = typeof triggerProps?.className === "string" && triggerProps.className;
+	let t12;
+	if ($[12] !== t11) {
+		t12 = cx("oui-date-picker__trigger", t11);
+		$[12] = t11;
+		$[13] = t12;
+	} else t12 = $[13];
+	const t13 = error ? "" : void 0;
+	const t14 = display == null ? "" : void 0;
+	const t15 = `${id}-value`;
+	const t16 = display ?? placeholder;
+	let t17;
+	if ($[14] !== t15 || $[15] !== t16) {
+		t17 = /* @__PURE__ */ jsx("span", {
+			id: t15,
+			className: "oui-date-picker__value",
+			children: t16
+		});
+		$[14] = t15;
+		$[15] = t16;
+		$[16] = t17;
+	} else t17 = $[16];
+	let t18;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t18 = /* @__PURE__ */ jsx(CalendarIcon, {});
+		$[17] = t18;
+	} else t18 = $[17];
+	let t19;
+	if ($[18] !== describedBy || $[19] !== disabled || $[20] !== id || $[21] !== ref || $[22] !== size || $[23] !== t10 || $[24] !== t12 || $[25] !== t13 || $[26] !== t14 || $[27] !== t17 || $[28] !== t8 || $[29] !== t9 || $[30] !== triggerProps) {
+		t19 = /* @__PURE__ */ jsxs(Popover.Trigger, {
+			ref,
+			id,
+			disabled,
+			"aria-labelledby": t8,
+			"aria-describedby": describedBy,
+			"aria-required": t9,
+			"aria-invalid": t10,
+			...triggerProps,
+			className: t12,
+			"data-size": size,
+			"data-invalid": t13,
+			"data-placeholder": t14,
+			children: [t17, t18]
+		});
+		$[18] = describedBy;
+		$[19] = disabled;
+		$[20] = id;
+		$[21] = ref;
+		$[22] = size;
+		$[23] = t10;
+		$[24] = t12;
+		$[25] = t13;
+		$[26] = t14;
+		$[27] = t17;
+		$[28] = t8;
+		$[29] = t9;
+		$[30] = triggerProps;
+		$[31] = t19;
+	} else t19 = $[31];
+	let t20;
+	if ($[32] === Symbol.for("react.memo_cache_sentinel")) {
+		t20 = () => popupRef.current?.querySelector(".oui-calendar__day[tabindex=\"0\"]") ?? true;
+		$[32] = t20;
+	} else t20 = $[32];
+	const t21 = typeof contentProps?.className === "string" && contentProps.className;
+	let t22;
+	if ($[33] !== t21) {
+		t22 = cx("oui-date-picker__popup", t21);
+		$[33] = t21;
+		$[34] = t22;
+	} else t22 = $[34];
+	let t23;
+	if ($[35] !== children || $[36] !== contentProps || $[37] !== t22) {
+		t23 = /* @__PURE__ */ jsx(Popover$1.Content, {
+			ref: popupRef,
+			align: "start",
+			sideOffset: 6,
+			initialFocus: t20,
+			...contentProps,
+			className: t22,
+			children
+		});
+		$[35] = children;
+		$[36] = contentProps;
+		$[37] = t22;
+		$[38] = t23;
+	} else t23 = $[38];
+	let t24;
+	if ($[39] !== open || $[40] !== t19 || $[41] !== t23 || $[42] !== t7) {
+		t24 = /* @__PURE__ */ jsxs(Popover$1.Root, {
+			open,
+			onOpenChange: t7,
+			children: [t19, t23]
+		});
+		$[39] = open;
+		$[40] = t19;
+		$[41] = t23;
+		$[42] = t7;
+		$[43] = t24;
+	} else t24 = $[43];
+	let t25;
+	if ($[44] !== description || $[45] !== id) {
+		t25 = description != null && /* @__PURE__ */ jsx("p", {
+			id: `${id}-description`,
+			className: "oui-field__description",
+			children: description
+		});
+		$[44] = description;
+		$[45] = id;
+		$[46] = t25;
+	} else t25 = $[46];
+	let t26;
+	if ($[47] !== error || $[48] !== id) {
+		t26 = error && /* @__PURE__ */ jsx("div", {
+			id: `${id}-error`,
+			className: "oui-field__error",
+			children: error
+		});
+		$[47] = error;
+		$[48] = id;
+		$[49] = t26;
+	} else t26 = $[49];
+	let t27;
+	if ($[50] !== inputs || $[51] !== t24 || $[52] !== t25 || $[53] !== t26 || $[54] !== t3 || $[55] !== t4 || $[56] !== t5 || $[57] !== t6) {
+		t27 = /* @__PURE__ */ jsxs("div", {
+			className: t3,
+			"data-disabled": t4,
+			"data-invalid": t5,
+			children: [
+				t6,
+				t24,
+				inputs,
+				t25,
+				t26
+			]
+		});
+		$[50] = inputs;
+		$[51] = t24;
+		$[52] = t25;
+		$[53] = t26;
+		$[54] = t3;
+		$[55] = t4;
+		$[56] = t5;
+		$[57] = t6;
+		$[58] = t27;
+	} else t27 = $[58];
+	return t27;
+}
+//#endregion
+export { PickerField, useOpenState };
+
+//# sourceMappingURL=PickerField.js.map