@optiaxiom/react 3.4.3 → 3.5.0

package/dist/cjs/date-input-BmROFcil.js

@@ -0,0 +1,166 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_Calendar = require("./Calendar-B5LRazO4.js");
+const require_input = require("./input-BVk2X8bm.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_FieldContext = require("./FieldContext-MRvFQT4y.js");
+const require_useObserveValue = require("./useObserveValue-B_tuG44C.js");
+let _optiaxiom_icons_IconXmark = require("@optiaxiom/icons/IconXmark");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconCalendar = require("@optiaxiom/icons/IconCalendar");
+require("./assets/DateInput.css.ts.vanilla-7G2tadyi.css");
+//#region src/date-input/DateInput.css.ts
+var clear = require_recipeRuntime.recipeRuntime({ base: [{ size: "sm" }, "a3gdp1"] });
+var date = require_recipeRuntime.recipeRuntime({ base: "mus2b2" });
+var input = require_recipeRuntime.recipeRuntime({ base: "ko2lv0" });
+var picker = require_recipeRuntime.recipeRuntime({ base: "_1eaep8u" });
+//#endregion
+//#region src/date-input/DateInput.tsx
+/**
+* Input field with calendar that lets user enter dates.
+*
+* Important Notes:
+* - The `placeholder` prop sets the default date/time in the calendar picker,
+*   NOT hint text for the input field (native date inputs don't support that)
+* - Don't use `addonBefore` as it will override the calendar icon that opens
+*   the date picker popover
+*
+* @category form
+* @category date
+* @since 1.4.0
+*/
+const DateInput = (0, react.forwardRef)(({ className, disabled, holiday, max: maxProp, min: minProp, onChange, placeholder, step, type = "date", weekend, ...props }, outerRef) => {
+	const { labelId: fieldLabelId } = require_FieldContext.useFieldContext("@optiaxiom/react/DateInput");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const [open, setOpen] = (0, react.useState)(false);
+	const hasInteractedOutsideRef = (0, react.useRef)(false);
+	const pickerRef = (0, react.useRef)(null);
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/DateInput",
+		defaultProp: props.defaultValue,
+		prop: props.value
+	});
+	const forceValueChange = require_useObserveValue.useObserveValue(innerRef, setValue);
+	const instant = typeof value === "string" ? require_Calendar.toInstant(value) ?? null : null;
+	const max = maxProp || "2100-12-31";
+	const min = minProp || "1900-01-01";
+	const maxDate = max ? require_Calendar.toInstant(max) : void 0;
+	const minDate = min ? require_Calendar.toInstant(min) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SuggestionPopover.Popover, {
+		onOpenChange: setOpen,
+		open: !disabled && open,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.PopoverAnchor, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_input.Input, {
+			addonAfter: value && !props.readOnly && !props.required && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				appearance: "subtle",
+				"aria-label": "Clear",
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconXmark.IconXmark, {}),
+				onPointerDown: (event) => {
+					event.preventDefault();
+					forceValueChange("");
+				},
+				tabIndex: -1,
+				...clear()
+			}),
+			addonBefore: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.PopoverTrigger, {
+				"aria-label": "Show date picker",
+				asChild: true,
+				onClick: (event) => {
+					if (props.readOnly) event.preventDefault();
+				},
+				ref: pickerRef,
+				role: "img",
+				...picker(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconCalendar.IconCalendar, {})
+			}),
+			asChild: true,
+			disabled,
+			max,
+			min,
+			onChange: (event) => {
+				onChange?.(event);
+				setValue(event.target.value);
+			},
+			onClick: (e) => {
+				if (CSS.supports("selector(::-webkit-datetime-edit)")) e.preventDefault();
+			},
+			onKeyDown: (e) => {
+				if (CSS.supports("selector(::-webkit-datetime-edit)")) {
+					if (e.key === " ") {
+						e.preventDefault();
+						if (!props.readOnly) setOpen(true);
+					} else if (e.key === "Escape") {
+						e.preventDefault();
+						setOpen(false);
+					}
+				}
+			},
+			ref,
+			step,
+			type,
+			...date({}, className),
+			...props,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", { ...input() })
+		}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SuggestionPopover.PopoverContent, {
+			"aria-labelledby": (0, clsx.default)(labelId, fieldLabelId),
+			gap: "8",
+			onCloseAutoFocus: (event) => {
+				if (hasInteractedOutsideRef.current) hasInteractedOutsideRef.current = false;
+				else {
+					event.preventDefault();
+					innerRef.current?.focus();
+				}
+			},
+			onInteractOutside: (event) => {
+				if (!(event.target instanceof Node && pickerRef.current?.contains(event.target))) hasInteractedOutsideRef.current = true;
+			},
+			children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+					asChild: true,
+					id: labelId,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", { children: "Calendar" })
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+					holiday,
+					max: maxDate,
+					min: minDate,
+					onValueChange: (date) => {
+						if (!date) return;
+						forceValueChange(type === "datetime-local" ? require_Calendar.toPlainDateTime(date) : require_Calendar.toPlainDate(date));
+						if (type === "date") setOpen(false);
+					},
+					placeholder,
+					step,
+					type,
+					value: instant,
+					weekend
+				}),
+				type === "datetime-local" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+					flex: "none",
+					justifyContent: "center",
+					onClick: () => setOpen(false),
+					children: "Done"
+				})
+			]
+		})]
+	});
+});
+DateInput.displayName = "@optiaxiom/react/DateInput";
+//#endregion
+Object.defineProperty(exports, "DateInput", {
+	enumerable: true,
+	get: function() {
+		return DateInput;
+	}
+});

package/dist/cjs/date-input.js

@@ -0,0 +1,3 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_date_input = require("./date-input-BmROFcil.js");
+exports.DateInput = require_date_input.DateInput;

package/dist/cjs/date-range-picker-rcfbRPRZ.js

@@ -0,0 +1,191 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_Calendar = require("./Calendar-B5LRazO4.js");
+const require_SuggestionPopover = require("./SuggestionPopover-Bu_sY4dq.js");
+const require_group = require("./group.js");
+const require_VisuallyHidden = require("./VisuallyHidden-DK0Wtj7A.js");
+const require_useEvent = require("./useEvent-BGCT9scH.js");
+const require_FieldContext = require("./FieldContext-MRvFQT4y.js");
+const require_utils = require("./utils-Dt_U6NjH.js");
+const require_LocaleContext = require("./LocaleContext-C3x9rY0T.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let clsx = require("clsx");
+clsx = require_rolldown_runtime.__toESM(clsx, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _optiaxiom_icons_IconCalendar = require("@optiaxiom/icons/IconCalendar");
+//#region src/date-range-picker/DateRangePickerContext.ts
+const [DateRangePickerProvider, useDateRangePickerContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/DateRangePicker");
+//#endregion
+//#region src/date-range-picker/DateRangePicker.tsx
+/**
+* Calendar popover that lets user pick date ranges.
+*
+* @category date
+* @group DateRangePicker
+* @since 1.4.0
+* @extends Popover
+*/
+function DateRangePicker({ children, defaultOpen = false, defaultValue = null, disabled, onOpenChange, onValueChange, open: openProp, value: valueProp, ...props }) {
+	const triggerRef = (0, react.useRef)(null);
+	const [from, setFrom] = (0, react.useState)();
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/DateRangePicker",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [value, setValue] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/DateRangePicker",
+		defaultProp: defaultValue,
+		onChange: onValueChange,
+		prop: valueProp
+	});
+	const setValueStable = require_useEvent.useEvent(setValue);
+	(0, react.useEffect)(() => {
+		if (open) setFrom(void 0);
+	}, [open]);
+	(0, react.useEffect)(() => {
+		if (!open && from) {
+			const end = require_Calendar.toInstant(require_Calendar.toPlainDate(from) + "T23:59:59.999");
+			if (end) setValueStable({
+				from,
+				to: end
+			});
+		}
+	}, [
+		from,
+		open,
+		setValueStable
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.Popover, {
+		onOpenChange: setOpen,
+		open,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DateRangePickerProvider, {
+			disabled,
+			setFrom,
+			setOpen,
+			setValue,
+			triggerRef,
+			value,
+			children
+		})
+	});
+}
+DateRangePicker.displayName = "@optiaxiom/react/DateRangePicker";
+//#endregion
+//#region src/date-range-picker/DateRangePickerContent.css.ts
+var panels = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "stretch",
+	gap: "0"
+}] });
+//#endregion
+//#region src/date-range-picker/DateRangePickerContent.tsx
+/**
+* @group DateRangePicker
+*/
+const DateRangePickerContent = (0, react.forwardRef)(({ addonAfter, addonBefore, "aria-label": ariaLabel, children, holiday, max, min, today, weekend, ...props }, ref) => {
+	const { labelId: fieldLabelId } = require_FieldContext.useFieldContext("@optiaxiom/react/DateRangePickerContent");
+	const { setFrom, setOpen, setValue, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerContent");
+	const labelId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_SuggestionPopover.PopoverContent, {
+		"aria-labelledby": (0, clsx.default)(fieldLabelId ?? triggerRef.current?.id, labelId),
+		gap: "8",
+		maxW: void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_VisuallyHidden.VisuallyHidden, {
+				id: labelId,
+				children: ariaLabel || "Calendar"
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+				...panels(),
+				children: [
+					addonBefore,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Calendar.Calendar, {
+						alignSelf: "start",
+						holiday,
+						max,
+						min,
+						mode: "range",
+						onDateSelect: (date) => {
+							setFrom((from) => from ? void 0 : date);
+						},
+						onValueChange: (value) => {
+							setValue(value);
+							requestAnimationFrame(() => {
+								setOpen(false);
+							});
+						},
+						today,
+						value,
+						weekend
+					}),
+					addonAfter
+				]
+			}),
+			children
+		]
+	});
+});
+DateRangePickerContent.displayName = "@optiaxiom/react/DateRangePickerContent";
+//#endregion
+//#region src/date-range-picker/DateRangePickerTrigger.tsx
+const dateFormatterFor = require_Calendar.memoize((locale) => new Intl.DateTimeFormat(locale, {
+	day: "numeric",
+	month: "short",
+	year: "numeric"
+}));
+/**
+* @group DateRangePicker
+* @extends Button
+*/
+const DateRangePickerTrigger = (0, react.forwardRef)(({ "aria-labelledby": ariaLabelledBy, children, formatRange, placeholder = "Pick a date", ...props }, outerRef) => {
+	const { disabled, triggerRef, value } = useDateRangePickerContext("@optiaxiom/react/DateRangePickerTrigger");
+	const { locale } = require_LocaleContext.useLocaleContext("@optiaxiom/react/DateRangePickerTrigger");
+	const id = (0, _radix_ui_react_id.useId)();
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(outerRef, triggerRef);
+	const labelId = require_utils.useFieldLabelTrigger(triggerRef, ariaLabelledBy);
+	const formatter = formatRange ? { formatRange } : dateFormatterFor(locale);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_SuggestionPopover.PopoverTrigger, {
+		"aria-labelledby": labelId,
+		disabled,
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconCalendar.IconCalendar, {}),
+		id,
+		justifyContent: "flex-start",
+		ref,
+		...props,
+		children: children ?? (value ? formatter.formatRange(value.from, value.to) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			color: "fg.tertiary",
+			children: placeholder
+		}))
+	});
+});
+DateRangePickerTrigger.displayName = "@optiaxiom/react/DateRangePickerTrigger";
+//#endregion
+Object.defineProperty(exports, "DateRangePicker", {
+	enumerable: true,
+	get: function() {
+		return DateRangePicker;
+	}
+});
+Object.defineProperty(exports, "DateRangePickerContent", {
+	enumerable: true,
+	get: function() {
+		return DateRangePickerContent;
+	}
+});
+Object.defineProperty(exports, "DateRangePickerTrigger", {
+	enumerable: true,
+	get: function() {
+		return DateRangePickerTrigger;
+	}
+});

package/dist/cjs/date-range-picker.js

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_date_range_picker = require("./date-range-picker-rcfbRPRZ.js");
+exports.DateRangePicker = require_date_range_picker.DateRangePicker;
+exports.DateRangePickerContent = require_date_range_picker.DateRangePickerContent;
+exports.DateRangePickerTrigger = require_date_range_picker.DateRangePickerTrigger;

package/dist/cjs/decorateChildren-BuXnWpNx.js

@@ -0,0 +1,18 @@
+let react = require("react");
+//#region src/utils/decorateChildren.ts
+const decorateChildren = ({ asChild, children }, decorator) => {
+	if (asChild) {
+		const newElement = (0, react.isValidElement)(children) ? children : null;
+		return newElement ? (0, react.cloneElement)(newElement, void 0, decorateChildren({
+			...newElement.props,
+			asChild: newElement.props.asChild || typeof newElement.type !== "string" && "displayName" in newElement.type && typeof newElement.type.displayName === "string" && newElement.type.displayName?.endsWith(".Slot")
+		}, decorator)) : children;
+	} else return decorator(children);
+};
+//#endregion
+Object.defineProperty(exports, "decorateChildren", {
+	enumerable: true,
+	get: function() {
+		return decorateChildren;
+	}
+});