@galaxy-io/dls 1.6.1 → 2.0.1

package/dist/inputs/CronInput.js

@@ -0,0 +1,618 @@
+import { FontFamily } from "../theme/enums.js";
+import Text, { TextSize, TextVariant } from "../text/Text.js";
+import { useControlledState } from "../hooks/useControlledState.js";
+import Flex, { AlignItems } from "../layout/Flex.js";
+import Button, { ButtonSize, ButtonVariant } from "../buttons/Button.js";
+import ButtonGroup from "../buttons/ButtonGroup.js";
+import { useDevWarning } from "./internal/devWarn.js";
+import { FieldContext } from "../hooks/useField.js";
+import { useFieldWiring } from "./internal/fieldWiring.js";
+import Field, { FieldSize } from "./Field.js";
+import { rootStyle, useOwnField } from "./internal/ownField.js";
+import { InputSize, InputVariant } from "./Input.js";
+import TextInput from "./TextInput.js";
+import SelectInput, { SelectInputSize, SelectInputVariant } from "./SelectInput.js";
+import ToggleInput, { ToggleInputSize, ToggleInputVariant } from "./ToggleInput.js";
+/* empty css                    */
+import { styled } from "@linaria/react";
+import { forwardRef, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { cx } from "@linaria/core";
+import cronstrue from "cronstrue";
+//#region src/inputs/CronInput.tsx
+/**
+* The form control for a recurring schedule written as a five-field cron expression
+* (`minute hour day-of-month month day-of-week`). It shows a small builder: a frequency
+* (Hourly / Daily / Weekly / Monthly / Custom) and the fields that frequency needs (the minute, the
+* time, the weekdays, the day of the month), and writes the expression. Expressions the builder
+* cannot represent open in Custom, where the expression is edited as text. Under the fields a
+* sentence from `cronstrue` reads the schedule back ("Runs at 09:00, Monday through Friday.").
+*
+* The value is the expression string. CronInput never validates (the app passes `error`; the
+* sentence only says when it cannot read an expression), holds no time zone, and does not support
+* seconds or year fields. New in 2.0 (sources: rafa's CronInput and Filament's schedule fields).
+*/
+/** Canonical rungs; CronInput supports all five and passes the rung to every control it renders. */
+var CronInputSize = /* @__PURE__ */ function(CronInputSize) {
+	/** 20px controls, caption text. */
+	CronInputSize["X_SMALL"] = "X_SMALL";
+	/** 24px controls, body_sm text. */
+	CronInputSize["SMALL"] = "SMALL";
+	/** 32px controls, body_md text. The default. */
+	CronInputSize["MEDIUM"] = "MEDIUM";
+	/** 36px controls, body_lg text. */
+	CronInputSize["LARGE"] = "LARGE";
+	/** 40px controls, body_lg text. */
+	CronInputSize["X_LARGE"] = "X_LARGE";
+	return CronInputSize;
+}({});
+/** Resting fill of the builder's controls (Constitution V-A surface set). */
+var CronInputVariant = /* @__PURE__ */ function(CronInputVariant) {
+	/** `background.base` fill. */
+	CronInputVariant["BASE"] = "BASE";
+	/** `background.primary` fill. The default. */
+	CronInputVariant["PRIMARY"] = "PRIMARY";
+	/** `background.secondary` fill. */
+	CronInputVariant["SECONDARY"] = "SECONDARY";
+	/** `background.tertiary` fill. */
+	CronInputVariant["TERTIARY"] = "TERTIARY";
+	return CronInputVariant;
+}({});
+/** The uncontrolled default: daily at 00:00. */
+var CRON_INPUT_DEFAULT_VALUE = "0 0 * * *";
+/** Width of the two-digit selects (minute, hour, day of month). */
+/** Width of the Custom expression field without `fillWidth`. */
+/** The neutral hint shown when `cronstrue` cannot read the expression. */
+var CRON_INPUT_HINT = "Enter five fields: minute, hour, day of month, month, day of week.";
+/** Each builder row's label; the label column is as wide as the longest, whichever rows show. */
+var ROW_LABELS = {
+	frequency: "Frequency",
+	minute: "At minute",
+	time: "At",
+	weekdays: "On",
+	day: "On day",
+	expression: "Expression"
+};
+/** Defaults for a part the builder has not set yet. */
+var DEFAULT_PARTS = {
+	minute: 0,
+	hour: 0,
+	weekdays: [1],
+	dayOfMonth: 1
+};
+var FREQUENCY_OPTIONS = [
+	{
+		id: "HOURLY",
+		label: "Hourly"
+	},
+	{
+		id: "DAILY",
+		label: "Daily"
+	},
+	{
+		id: "WEEKLY",
+		label: "Weekly"
+	},
+	{
+		id: "MONTHLY",
+		label: "Monthly"
+	},
+	{
+		id: "CUSTOM",
+		label: "Custom"
+	}
+];
+/** Two-digit labels for 0–(count − 1); the id is the plain number. */
+function numberOptions(count, start = 0, isPadded = true) {
+	return Array.from({ length: count }, (_, index) => {
+		const number = start + index;
+		return {
+			id: String(number),
+			label: isPadded ? String(number).padStart(2, "0") : String(number)
+		};
+	});
+}
+var MINUTE_OPTIONS = numberOptions(60);
+var HOUR_OPTIONS = numberOptions(24);
+var DAY_OF_MONTH_OPTIONS = numberOptions(31, 1, false);
+/** The weekday toggles, Monday first; `day` is cron's number (Sunday = 0). */
+var WEEKDAYS = [
+	{
+		day: 1,
+		label: "Mon",
+		name: "Monday"
+	},
+	{
+		day: 2,
+		label: "Tue",
+		name: "Tuesday"
+	},
+	{
+		day: 3,
+		label: "Wed",
+		name: "Wednesday"
+	},
+	{
+		day: 4,
+		label: "Thu",
+		name: "Thursday"
+	},
+	{
+		day: 5,
+		label: "Fri",
+		name: "Friday"
+	},
+	{
+		day: 6,
+		label: "Sat",
+		name: "Saturday"
+	},
+	{
+		day: 0,
+		label: "Sun",
+		name: "Sunday"
+	}
+];
+/** One integer within `[low, high]`, written without a sign or leading `+`. */
+function parseInteger(field, low, high) {
+	if (!/^\d+$/.test(field)) return null;
+	const number = Number(field);
+	return number >= low && number <= high ? number : null;
+}
+/** A day-of-week list of integers and `a-b` ranges within 0–7 (7 is Sunday), expanded. */
+function parseWeekdays(field) {
+	const days = /* @__PURE__ */ new Set();
+	for (const item of field.split(",")) {
+		const range = item.split("-");
+		if (range.length === 1) {
+			const day = parseInteger(item, 0, 7);
+			if (day === null) return null;
+			days.add(day % 7);
+		} else if (range.length === 2) {
+			const from = parseInteger(range[0] ?? "", 0, 7);
+			const to = parseInteger(range[1] ?? "", 0, 7);
+			if (from === null || to === null || from > to) return null;
+			for (let day = from; day <= to; day += 1) days.add(day % 7);
+		} else return null;
+	}
+	return days.size === 0 ? null : [...days].sort((a, b) => a - b);
+}
+/** What the builder shows for `value`; anything it cannot write back unchanged is Custom. */
+function valueToBuilder(value, previous = DEFAULT_PARTS) {
+	const custom = {
+		frequency: "CUSTOM",
+		parts: previous
+	};
+	const fields = value.trim().split(/\s+/);
+	if (fields.length !== 5) return custom;
+	const [minuteField = "", hourField = "", domField = "", monthField = "", dowField = ""] = fields;
+	const minute = parseInteger(minuteField, 0, 59);
+	if (minute === null || monthField !== "*") return custom;
+	if (hourField === "*") {
+		if (domField === "*" && dowField === "*") return {
+			frequency: "HOURLY",
+			parts: {
+				...previous,
+				minute
+			}
+		};
+		return custom;
+	}
+	const hour = parseInteger(hourField, 0, 23);
+	if (hour === null) return custom;
+	if (domField === "*" && dowField === "*") return {
+		frequency: "DAILY",
+		parts: {
+			...previous,
+			minute,
+			hour
+		}
+	};
+	if (domField === "*") {
+		const weekdays = parseWeekdays(dowField);
+		if (weekdays === null) return custom;
+		return {
+			frequency: "WEEKLY",
+			parts: {
+				...previous,
+				minute,
+				hour,
+				weekdays
+			}
+		};
+	}
+	if (dowField === "*") {
+		const dayOfMonth = parseInteger(domField, 1, 31);
+		if (dayOfMonth === null) return custom;
+		return {
+			frequency: "MONTHLY",
+			parts: {
+				...previous,
+				minute,
+				hour,
+				dayOfMonth
+			}
+		};
+	}
+	return custom;
+}
+/** The expression a builder frequency writes. */
+function builderToValue(frequency, parts) {
+	const { minute, hour, weekdays, dayOfMonth } = parts;
+	switch (frequency) {
+		case "HOURLY": return `${minute} * * * *`;
+		case "DAILY": return `${minute} ${hour} * * *`;
+		case "WEEKLY": return `${minute} ${hour} * * ${[...new Set(weekdays)].sort((a, b) => a - b).join(",")}`;
+		case "MONTHLY": return `${minute} ${hour} ${dayOfMonth} * *`;
+	}
+}
+/** The sentence under the builder, or `null` when `cronstrue` cannot read the expression. */
+function describe(expression) {
+	if (expression.split(/\s+/).length !== 5) return null;
+	try {
+		const text = cronstrue.toString(expression, {
+			use24HourTimeFormat: true,
+			throwExceptionOnParseError: true,
+			verbose: false
+		});
+		if (text === "") return null;
+		const sentence = `Runs ${text.charAt(0).toLowerCase()}${text.slice(1)}`;
+		return sentence.endsWith(".") ? sentence : `${sentence}.`;
+	} catch {
+		return null;
+	}
+}
+var CRON_INPUT_SIZE_TO_TOGGLE_INPUT_SIZE_MAP = {
+	["X_SMALL"]: ToggleInputSize.X_SMALL,
+	["SMALL"]: ToggleInputSize.SMALL,
+	["MEDIUM"]: ToggleInputSize.MEDIUM,
+	["LARGE"]: ToggleInputSize.LARGE,
+	["X_LARGE"]: ToggleInputSize.X_LARGE
+};
+var CRON_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP = {
+	["X_SMALL"]: SelectInputSize.X_SMALL,
+	["SMALL"]: SelectInputSize.SMALL,
+	["MEDIUM"]: SelectInputSize.MEDIUM,
+	["LARGE"]: SelectInputSize.LARGE,
+	["X_LARGE"]: SelectInputSize.X_LARGE
+};
+var CRON_INPUT_SIZE_TO_INPUT_SIZE_MAP = {
+	["X_SMALL"]: InputSize.X_SMALL,
+	["SMALL"]: InputSize.SMALL,
+	["MEDIUM"]: InputSize.MEDIUM,
+	["LARGE"]: InputSize.LARGE,
+	["X_LARGE"]: InputSize.X_LARGE
+};
+var CRON_INPUT_SIZE_TO_BUTTON_SIZE_MAP = {
+	["X_SMALL"]: ButtonSize.X_SMALL,
+	["SMALL"]: ButtonSize.SMALL,
+	["MEDIUM"]: ButtonSize.MEDIUM,
+	["LARGE"]: ButtonSize.LARGE,
+	["X_LARGE"]: ButtonSize.X_LARGE
+};
+var CRON_INPUT_SIZE_TO_FIELD_SIZE_MAP = {
+	["X_SMALL"]: FieldSize.X_SMALL,
+	["SMALL"]: FieldSize.SMALL,
+	["MEDIUM"]: FieldSize.MEDIUM,
+	["LARGE"]: FieldSize.LARGE,
+	["X_LARGE"]: FieldSize.X_LARGE
+};
+/** Row labels use the rung's control text. */
+var CRON_INPUT_SIZE_TO_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.BODY_SM,
+	["MEDIUM"]: TextSize.BODY_MD,
+	["LARGE"]: TextSize.BODY_LG,
+	["X_LARGE"]: TextSize.BODY_LG
+};
+/** The preview uses Field's help steps. */
+var CRON_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP = {
+	["X_SMALL"]: TextSize.CAPTION,
+	["SMALL"]: TextSize.CAPTION,
+	["MEDIUM"]: TextSize.BODY_SM,
+	["LARGE"]: TextSize.BODY_SM,
+	["X_LARGE"]: TextSize.BODY_MD
+};
+var CRON_INPUT_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP = {
+	["BASE"]: ToggleInputVariant.BASE,
+	["PRIMARY"]: ToggleInputVariant.PRIMARY,
+	["SECONDARY"]: ToggleInputVariant.SECONDARY,
+	["TERTIARY"]: ToggleInputVariant.TERTIARY
+};
+var CRON_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP = {
+	["BASE"]: SelectInputVariant.BASE,
+	["PRIMARY"]: SelectInputVariant.PRIMARY,
+	["SECONDARY"]: SelectInputVariant.SECONDARY,
+	["TERTIARY"]: SelectInputVariant.TERTIARY
+};
+var CRON_INPUT_VARIANT_TO_INPUT_VARIANT_MAP = {
+	["BASE"]: InputVariant.BASE,
+	["PRIMARY"]: InputVariant.PRIMARY,
+	["SECONDARY"]: InputVariant.SECONDARY,
+	["TERTIARY"]: InputVariant.TERTIARY
+};
+/** The group: the builder rows, then the preview sentence. */
+var Group = /*#__PURE__*/ styled("div")({
+	name: "Group",
+	class: "gx-CronInput-Group-gmu78vg",
+	propsAsIs: false
+});
+/**
+* Row labels in the first column, controls in the second. Controls keep their own width
+* (`justify-items: start`), so the wide weekday row never stretches the frequency toggle.
+*/
+var Rows = /*#__PURE__*/ styled("div")({
+	name: "Rows",
+	class: "gx-CronInput-Rows-rvetpyb",
+	propsAsIs: false
+});
+/**
+* The frequency row's label cell: the label and every other row label stacked in one grid area.
+* The hidden ones size the label column, so switching frequency never moves the controls.
+*/
+var LabelStack = /*#__PURE__*/ styled("span")({
+	name: "LabelStack",
+	class: "gx-CronInput-LabelStack-lwvebjn",
+	propsAsIs: false
+});
+/** A row label that only sizes the label column: not painted, not announced. */
+var LABEL_SIZER_CSS = "gx-CronInput-LABEL_SIZER_CSS-lendsmc";
+/** Holds a two-digit select at its fixed width. */
+var SelectSlot = /*#__PURE__*/ styled("span")({
+	name: "SelectSlot",
+	class: "gx-CronInput-SelectSlot-s1iubrvv",
+	propsAsIs: false
+});
+/** Holds the Custom expression field at its fixed width. */
+var ExpressionSlot = /*#__PURE__*/ styled("span")({
+	name: "ExpressionSlot",
+	class: "gx-CronInput-ExpressionSlot-e1i5sgim",
+	propsAsIs: false
+});
+/** Stretch to the parent's width (group, and the `Field` wrapper when there is one). */
+var FILL_WIDTH_CSS = "gx-CronInput-FILL_WIDTH_CSS-f1xjp6qf";
+/** With `fillWidth`, the control column takes the rest of each row. */
+var ROWS_FILL_CSS = "gx-CronInput-ROWS_FILL_CSS-r73e2ix";
+/** With `fillWidth`, the Custom field fills its cell. */
+var EXPRESSION_FILL_CSS = "gx-CronInput-EXPRESSION_FILL_CSS-e1tyf0oc";
+/** The builder and its preview, wired to the nearest Field (the CronInput's own or the app's). */
+function CronGroup({ cronProps, forwardedRef, isRoot }) {
+	const { value, defaultValue = CRON_INPUT_DEFAULT_VALUE, onChange, size = "MEDIUM", variant = "PRIMARY", isGhost = false, label: _label, error, isError = false, isDisabled = false, isReadOnly = false, isRequired = false, fillWidth = false, ariaLabel, id, "aria-describedby": ariaDescribedBy, className, style, ...rest } = cronProps;
+	const { field, controlId, describedBy, isInvalid, isRequired: isRequiredState, hasName } = useFieldWiring({
+		id,
+		ariaLabel,
+		ariaLabelAttribute: rest["aria-label"],
+		ariaLabelledBy: rest["aria-labelledby"],
+		ariaDescribedBy,
+		describedByIds: (groupId) => [`${groupId}-preview`],
+		error,
+		isError,
+		isRequired
+	});
+	const previewId = `${controlId}-preview`;
+	const rowLabelId = (row) => `${controlId}-${row}`;
+	const [expression, setExpression] = useControlledState({
+		value,
+		defaultValue,
+		onChange
+	});
+	const lastEmittedRef = useRef(null);
+	const [builder, setBuilder] = useState(() => valueToBuilder(expression));
+	const [lastSeen, setLastSeen] = useState(expression);
+	if (lastSeen !== expression) {
+		setLastSeen(expression);
+		if (expression !== lastEmittedRef.current) setBuilder((previous) => valueToBuilder(expression, previous.parts));
+	}
+	const emit = (next) => {
+		if (next === expression) return;
+		lastEmittedRef.current = next;
+		setExpression(next);
+	};
+	const isEditable = !isDisabled && !isReadOnly;
+	const { frequency, parts } = builder;
+	/** Applies new parts in the current builder frequency and writes the expression. */
+	const updateParts = (next) => {
+		if (!isEditable || frequency === "CUSTOM") return;
+		const merged = {
+			...parts,
+			...next
+		};
+		setBuilder({
+			frequency,
+			parts: merged
+		});
+		emit(builderToValue(frequency, merged));
+	};
+	const changeFrequency = (next) => {
+		if (!isEditable || next === frequency) return;
+		setBuilder({
+			frequency: next,
+			parts
+		});
+		if (next !== "CUSTOM") emit(builderToValue(next, parts));
+	};
+	const toggleWeekday = (day) => {
+		if (!isEditable) return;
+		const isOn = parts.weekdays.includes(day);
+		if (isOn && parts.weekdays.length === 1) return;
+		updateParts({ weekdays: isOn ? parts.weekdays.filter((selected) => selected !== day) : [...parts.weekdays, day].sort((a, b) => a - b) });
+	};
+	const trimmed = expression.trim();
+	const sentence = useMemo(() => describe(trimmed), [trimmed]);
+	useDevWarning(!hasName, "[@galaxy-io/dls] CronInput has no accessible name. Pass `label`, wrap it in a labelled `Field`, or set `ariaLabel`.");
+	const textSize = CRON_INPUT_SIZE_TO_TEXT_SIZE_MAP[size];
+	const helpSize = CRON_INPUT_SIZE_TO_HELP_TEXT_SIZE_MAP[size];
+	const selectSize = CRON_INPUT_SIZE_TO_SELECT_INPUT_SIZE_MAP[size];
+	const selectVariant = CRON_INPUT_VARIANT_TO_SELECT_INPUT_VARIANT_MAP[variant];
+	const controlState = {
+		isDisabled,
+		isReadOnly,
+		isError: isInvalid,
+		isRequired: isRequiredState
+	};
+	const rowLabel = (row) => /* @__PURE__ */ jsx(Text, {
+		as: "span",
+		id: rowLabelId(row),
+		size: textSize,
+		variant: isDisabled ? TextVariant.DISABLED : TextVariant.SECONDARY,
+		children: ROW_LABELS[row]
+	});
+	/** A two-digit select named by its row label (plus its own name inside a time row). */
+	const numberSelect = (row, part, options, ownName) => {
+		const selectId = `${rowLabelId(row)}-${part}`;
+		return /* @__PURE__ */ jsx(SelectSlot, { children: /* @__PURE__ */ jsx(SelectInput, {
+			id: selectId,
+			...ownName === void 0 ? { "aria-labelledby": rowLabelId(row) } : {
+				ariaLabel: ownName,
+				"aria-labelledby": `${rowLabelId(row)} ${selectId}`
+			},
+			options,
+			value: String(parts[part]),
+			onChange: (next) => {
+				if (next !== null) updateParts({ [part]: Number(next) });
+			},
+			size: selectSize,
+			variant: selectVariant,
+			isGhost,
+			fillWidth: true,
+			...controlState
+		}) });
+	};
+	const timeRow = /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("time"), /* @__PURE__ */ jsxs(Flex, {
+		alignItems: AlignItems.CENTER,
+		gap: 4,
+		children: [
+			numberSelect("time", "hour", HOUR_OPTIONS, "Hour"),
+			/* @__PURE__ */ jsx(Text, {
+				as: "span",
+				size: textSize,
+				variant: TextVariant.TERTIARY,
+				"aria-hidden": true,
+				children: ":"
+			}),
+			numberSelect("time", "minute", MINUTE_OPTIONS, "Minute")
+		]
+	})] });
+	return /* @__PURE__ */ jsxs(Group, {
+		ref: forwardedRef,
+		role: "group",
+		id: controlId,
+		"aria-labelledby": field?.labelId,
+		"aria-label": ariaLabel,
+		"aria-describedby": describedBy,
+		...rest,
+		className: cx(fillWidth && FILL_WIDTH_CSS, isRoot ? className : void 0),
+		...rootStyle(isRoot, style),
+		children: [/* @__PURE__ */ jsx(FieldContext.Provider, {
+			value: null,
+			children: /* @__PURE__ */ jsxs(Rows, {
+				className: cx(fillWidth && ROWS_FILL_CSS),
+				children: [
+					/* @__PURE__ */ jsxs(LabelStack, { children: [rowLabel("frequency"), Object.entries(ROW_LABELS).map(([row, text]) => row === "frequency" ? null : /* @__PURE__ */ jsx(Text, {
+						as: "span",
+						size: textSize,
+						className: LABEL_SIZER_CSS,
+						"aria-hidden": true,
+						children: text
+					}, row))] }),
+					/* @__PURE__ */ jsx(ToggleInput, {
+						options: FREQUENCY_OPTIONS,
+						value: frequency,
+						onChange: changeFrequency,
+						size: CRON_INPUT_SIZE_TO_TOGGLE_INPUT_SIZE_MAP[size],
+						variant: CRON_INPUT_VARIANT_TO_TOGGLE_INPUT_VARIANT_MAP[variant],
+						isGhost,
+						"aria-labelledby": rowLabelId("frequency"),
+						fillWidth,
+						...controlState
+					}),
+					frequency === "HOURLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("minute"), numberSelect("minute", "minute", MINUTE_OPTIONS)] }),
+					frequency === "DAILY" && timeRow,
+					frequency === "WEEKLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						rowLabel("weekdays"),
+						/* @__PURE__ */ jsx(ButtonGroup, {
+							isAttached: true,
+							"aria-labelledby": rowLabelId("weekdays"),
+							fillWidth,
+							children: WEEKDAYS.map(({ day, label, name }) => /* @__PURE__ */ jsx(Button, {
+								variant: ButtonVariant.SECONDARY,
+								size: CRON_INPUT_SIZE_TO_BUTTON_SIZE_MAP[size],
+								label,
+								ariaLabel: name,
+								isActive: parts.weekdays.includes(day),
+								isDisabled,
+								fillWidth,
+								...isReadOnly ? { "aria-disabled": true } : {},
+								onClick: () => toggleWeekday(day)
+							}, day))
+						}),
+						timeRow
+					] }),
+					frequency === "MONTHLY" && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						rowLabel("day"),
+						numberSelect("day", "dayOfMonth", DAY_OF_MONTH_OPTIONS),
+						timeRow
+					] }),
+					frequency === "CUSTOM" && /* @__PURE__ */ jsxs(Fragment$1, { children: [rowLabel("expression"), /* @__PURE__ */ jsx(ExpressionSlot, {
+						className: cx(fillWidth && EXPRESSION_FILL_CSS),
+						children: /* @__PURE__ */ jsx(TextInput, {
+							"aria-labelledby": rowLabelId("expression"),
+							family: FontFamily.MONO,
+							placeholder: "*/15 * * * *",
+							spellCheck: false,
+							value: expression,
+							onChange: (next) => {
+								if (!isEditable) return;
+								lastEmittedRef.current = next;
+								setExpression(next);
+							},
+							size: CRON_INPUT_SIZE_TO_INPUT_SIZE_MAP[size],
+							variant: CRON_INPUT_VARIANT_TO_INPUT_VARIANT_MAP[variant],
+							isGhost,
+							fillWidth: true,
+							...controlState
+						})
+					})] })
+				]
+			})
+		}), /* @__PURE__ */ jsx(Text, {
+			as: "p",
+			id: previewId,
+			size: helpSize,
+			variant: isDisabled ? TextVariant.DISABLED : sentence === null ? TextVariant.TERTIARY : TextVariant.SECONDARY,
+			children: sentence ?? CRON_INPUT_HINT
+		})]
+	});
+}
+/** A five-field cron expression, edited through a frequency builder with a plain-English preview. */
+var CronInput = forwardRef(function CronInput(props, ref) {
+	const { label, error, isRequired = false, size = "MEDIUM", fillWidth = false } = props;
+	const { id, className, style } = props;
+	const ownField = useOwnField({
+		componentName: "CronInput",
+		label,
+		error,
+		isRequired,
+		size: CRON_INPUT_SIZE_TO_FIELD_SIZE_MAP[size],
+		id,
+		className,
+		style,
+		rootClassName: fillWidth && FILL_WIDTH_CSS
+	});
+	if (ownField !== null) return /* @__PURE__ */ jsx(Field, {
+		...ownField,
+		children: /* @__PURE__ */ jsx(CronGroup, {
+			cronProps: props,
+			forwardedRef: ref,
+			isRoot: false
+		})
+	});
+	return /* @__PURE__ */ jsx(CronGroup, {
+		cronProps: props,
+		forwardedRef: ref,
+		isRoot: true
+	});
+});
+CronInput.displayName = "CronInput";
+//#endregion
+export { CronInputSize, CronInputVariant, CronInput as default };