@povio/ui 2.1.14 → 2.1.15

package/dist/TextHighlightSelect.js

@@ -0,0 +1,24 @@
+import { HighlightIcon } from "./Highlight.js";
+import { HighlightOnIcon } from "./HighlightOn.js";
+import { ColorPickerDropdown } from "./ColorPickerDropdown.js";
+import { defaultColors } from "./textEditor.types.js";
+import { jsx } from "react/jsx-runtime";
+const TextHighlightSelect = ({ editor }) => {
+	if (!editor.extensionManager.extensions.some((extension) => extension.name === "highlight")) return null;
+	const onChange = (color) => {
+		if (color === "#FFFFFF") editor.chain().focus().unsetHighlight().run();
+		else editor.chain().focus().setHighlight({ color }).run();
+	};
+	const highlightColor = editor.getAttributes("highlight").color || "#FFFFFF";
+	return /* @__PURE__ */ jsx(ColorPickerDropdown, {
+		value: highlightColor,
+		onChange,
+		colors: defaultColors,
+		isDisabled: !editor.isEditable,
+		children: highlightColor ? /* @__PURE__ */ jsx(HighlightOnIcon, {
+			className: "size-6",
+			highlightColor
+		}) : /* @__PURE__ */ jsx(HighlightIcon, { className: "size-6" })
+	});
+};
+export { TextHighlightSelect };

package/dist/TextInput.js

@@ -0,0 +1,125 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { useInputCva } from "./input.cva.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { InputContent } from "./InputContent.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { Input } from "react-aria-components";
+import { useRef } from "react";
+import { useFocusVisible, useTextField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+var TextInputBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const inputCva = useInputCva();
+	const { ref, inputClassName, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, className, unit, isLoading, action, leadingIcon, trailingIcon, value, onChange, onBlur, as = ui.input.as, hideLabel = ui.input.hideLabel, variant = ui.input.variant, size = ui.input.size, isClearable = ui.input.isClearable,...rest } = props;
+	const textFieldRef = useRef(null);
+	const { isFocusVisible } = useFocusVisible();
+	const { labelProps, inputProps } = useTextField({
+		...rest,
+		label,
+		isDisabled,
+		isInvalid: !!error,
+		isRequired,
+		value,
+		onChange,
+		onBlur
+	}, textFieldRef);
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const inputContentProps = {
+		unit,
+		isLoading,
+		isDisabled,
+		action,
+		leadingIcon,
+		trailingIcon,
+		isClearable,
+		value,
+		onChange,
+		onBlur
+	};
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsx(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: clsx("group w-full", { "h-full": as === "inline" }, className),
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: /* @__PURE__ */ jsx(InputContent, {
+				...inputContentProps,
+				headerProps,
+				as,
+				size,
+				children: (style) => /* @__PURE__ */ jsx(Input, {
+					...inputProps,
+					ref,
+					"data-is-empty": value === "" || value === null || value === void 0 || void 0,
+					"data-is-dirty": isDirty || void 0,
+					"data-is-required": isRequired || void 0,
+					"data-is-disabled": isDisabled || void 0,
+					placeholder: as === "floating" ? "" : inputProps.placeholder,
+					className: inputCva({
+						variant,
+						as,
+						size,
+						...rest,
+						className: inputClassName
+					}),
+					style,
+					onFocus: (e) => {
+						inputProps.onFocus?.(e);
+						if (isFocusVisible) e.target.select();
+					}
+				})
+			})
+		})
+	});
+};
+const TextInput = (props) => {
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error, isDirty } }) => /* @__PURE__ */ jsx(TextInputBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: field.value,
+				onChange: field.onChange,
+				onBlur: field.onBlur,
+				isDirty,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(TextInputBase, { ...props });
+};
+export { TextInput };

package/dist/TextListActions.js

@@ -0,0 +1,42 @@
+import { BulletedListIcon } from "./BulletedList.js";
+import { NumberedListIcon } from "./NumberedList.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const TextListActions = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const enabledActions = [{
+		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bulletList"),
+		isEnabled: () => editor.isEditable && editor.can().toggleBulletList(),
+		label: t(($) => $.ui.textEditor.marks.bold),
+		icon: BulletedListIcon,
+		onPress: () => {
+			editor.chain().focus().toggleBulletList().run();
+		},
+		isActive: () => editor.isActive("bulletList")
+	}, {
+		can: !!editor.extensionManager.extensions.find((extension) => extension.name === "orderedList"),
+		isEnabled: () => editor.isEditable && editor.can().toggleOrderedList(),
+		label: t(($) => $.ui.textEditor.marks.italic),
+		icon: NumberedListIcon,
+		onPress: () => {
+			editor.chain().focus().toggleOrderedList().run();
+		},
+		isActive: () => editor.isActive("orderedList")
+	}].filter((action) => action.can);
+	if (enabledActions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center gap-3",
+		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: action.label,
+			onPress: action.onPress,
+			icon: action.icon,
+			isDisabled: !action.isEnabled(),
+			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+		}, action.label))
+	});
+};
+export { TextListActions };

package/dist/TextMarksActions.js

@@ -0,0 +1,67 @@
+import { BoldIcon } from "./Bold.js";
+import { ItalicIcon } from "./Italic.js";
+import { StrikethroughIcon } from "./Strikethrough.js";
+import { UnderlinedIcon } from "./Underlined.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { ns } from "./i18n.js";
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useTranslation } from "react-i18next";
+const TextMarksActions = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	const enabledActions = [
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "bold"),
+			isEnabled: () => editor.isEditable && editor.can().toggleBold(),
+			label: t(($) => $.ui.textEditor.marks.bold),
+			icon: BoldIcon,
+			onPress: () => {
+				editor.chain().focus().toggleBold().run();
+			},
+			isActive: () => editor.isActive("bold")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "italic"),
+			isEnabled: () => editor.isEditable && editor.can().toggleItalic(),
+			label: t(($) => $.ui.textEditor.marks.italic),
+			icon: ItalicIcon,
+			onPress: () => {
+				editor.chain().focus().toggleItalic().run();
+			},
+			isActive: () => editor.isActive("italic")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "strike"),
+			isEnabled: () => editor.isEditable && editor.can().toggleStrike(),
+			label: t(($) => $.ui.textEditor.marks.strikethrough),
+			icon: StrikethroughIcon,
+			onPress: () => {
+				editor.chain().focus().toggleStrike().run();
+			},
+			isActive: () => editor.isActive("strike")
+		},
+		{
+			can: !!editor.extensionManager.extensions.find((extension) => extension.name === "underline"),
+			isEnabled: () => editor.isEditable && editor.can().toggleUnderline(),
+			label: t(($) => $.ui.textEditor.marks.underline),
+			icon: UnderlinedIcon,
+			onPress: () => {
+				editor.chain().focus().toggleUnderline().run();
+			},
+			isActive: () => editor.isActive("underline")
+		}
+	].filter((action) => action.can);
+	if (enabledActions.length === 0) return null;
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex h-full items-center gap-3",
+		children: enabledActions.map((action) => /* @__PURE__ */ jsx(InlineIconButton, {
+			color: "secondary",
+			label: action.label,
+			onPress: action.onPress,
+			icon: action.icon,
+			isDisabled: !action.isEnabled(),
+			className: clsx(action.isActive() && "!text-interactive-text-primary-idle")
+		}, action.label))
+	});
+};
+export { TextMarksActions };

package/dist/TextStyleSelect.js

@@ -0,0 +1,52 @@
+import { Typography } from "./Typography.js";
+import { ns } from "./i18n.js";
+import { Select } from "./Select.js";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+const TextStyleSelect = ({ editor }) => {
+	const { t } = useTranslation("ui");
+	if (!!!editor.extensionManager.extensions.find((extension) => extension.name === "heading")) return null;
+	const getItem = (level) => {
+		return {
+			id: level,
+			label: t(($) => $.ui.textEditor.textStyle[`heading${level}`]),
+			content: /* @__PURE__ */ jsx(Typography, {
+				size: `title-${level}`,
+				children: t(($) => $.ui.textEditor.textStyle[`heading${level}`])
+			})
+		};
+	};
+	const onChange = (val) => {
+		if (!val) {
+			const currentLevel = editor.getAttributes("heading")?.level;
+			if (!currentLevel) return;
+			editor.chain().focus().toggleHeading({ level: currentLevel }).run();
+			return;
+		}
+		if (!editor.can().setHeading({ level: val })) return;
+		editor.chain().focus().setHeading({ level: val }).run();
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		as: "inline",
+		placeholder: t(($) => $.ui.textEditor.textStyle.label),
+		label: t(($) => $.ui.textEditor.textStyle.label),
+		hideLabel: true,
+		ignoreTriggerWidth: true,
+		onChange,
+		items: [
+			{
+				id: 0,
+				label: t(($) => $.ui.textEditor.textStyle.normal)
+			},
+			...editor.can().toggleHeading({ level: 1 }) ? [getItem(1)] : [],
+			...editor.can().toggleHeading({ level: 2 }) ? [getItem(2)] : [],
+			...editor.can().toggleHeading({ level: 3 }) ? [getItem(3)] : [],
+			...editor.can().toggleHeading({ level: 4 }) ? [getItem(4)] : [],
+			...editor.can().toggleHeading({ level: 5 }) ? [getItem(5)] : [],
+			...editor.can().toggleHeading({ level: 6 }) ? [getItem(6)] : []
+		],
+		value: editor.getAttributes("heading")?.level || 0,
+		isDisabled: !editor.isEditable
+	});
+};
+export { TextStyleSelect };

package/dist/TimeField.js

@@ -0,0 +1,17 @@
+import { DateSegmentItem } from "./DateSegmentItem.js";
+import { jsx } from "react/jsx-runtime";
+const TimeField = ({ ref, fieldProps, state, isDisabled, hidePlaceholder }) => {
+	return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", {
+		...fieldProps,
+		ref,
+		className: "flex",
+		children: state.segments.map((segment, i) => /* @__PURE__ */ jsx(DateSegmentItem, {
+			segment,
+			state,
+			isDisabled,
+			timePickerOnly: true,
+			hidePlaceholder
+		}, i))
+	}) });
+};
+export { TimeField };

package/dist/TimePicker.js

@@ -0,0 +1,158 @@
+import { UIConfig } from "./uiConfig.context.js";
+import { TimePickerForm } from "./TimePickerForm.js";
+import { DateTimeDialog } from "./DateTimeDialog.js";
+import { DateTimeDialogFooter } from "./DateTimeDialogFooter.js";
+import { FormField } from "./FormField.js";
+import { TooltipWrapper } from "./TooltipWrapper.js";
+import { DateTimeUtils } from "./date-time.utils.js";
+import { TimePickerInput } from "./TimePickerInput.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { useLocale, useTimeField } from "react-aria";
+import { mergeRefs } from "@react-aria/utils";
+import { Controller } from "react-hook-form";
+import { getLocalTimeZone, now, toTime } from "@internationalized/date";
+import { DateTime } from "luxon";
+import { useTimeFieldState } from "react-stately";
+var TimePickerBase = (props) => {
+	const ui = UIConfig.useConfig();
+	const { ref, label, tooltipText, helperText, isRequired, rightContent, isDisabled, isDirty, headerClassName, errorClassName, isHeaderHidden, error, onChange, value, disableDropdown, placeholder, variant = ui.input.variant, as = ui.input.as, size = ui.input.size, hideLabel = ui.input.hideLabel, isClearable = ui.input.isClearable, disableManualEntry = ui.dateInput.disableManualEntry,...rest } = props;
+	const formFieldProps = {
+		error,
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+		hideLabel,
+		isDisabled,
+		headerClassName,
+		errorClassName
+	};
+	const [isOpen, setIsOpen] = useState(false);
+	const initialDateEmitRef = useRef(true);
+	const { locale } = useLocale();
+	const dialogState = useTimeFieldState({
+		...rest,
+		defaultValue: value || rest.defaultValue,
+		locale
+	});
+	const state = useTimeFieldState({
+		...rest,
+		isDisabled,
+		value,
+		onChange,
+		locale
+	});
+	useEffect(() => {
+		if (initialDateEmitRef.current) {
+			initialDateEmitRef.current = false;
+			return;
+		}
+		if (state.timeValue) onChange?.(state.timeValue);
+	}, [rest.date]);
+	const timeFieldRef = useRef(null);
+	const { labelProps, fieldProps } = useTimeField({
+		...rest,
+		label,
+		isReadOnly: disableManualEntry
+	}, state, timeFieldRef);
+	const headerProps = {
+		label,
+		tooltipText,
+		helperText,
+		isRequired,
+		rightContent,
+		isHeaderHidden: hideLabel || isHeaderHidden,
+		isDisabled,
+		className: headerClassName,
+		labelProps
+	};
+	const onApply = () => {
+		state.setValue(dialogState.value);
+		setIsOpen(false);
+	};
+	const onOpenChange = (open) => {
+		setIsOpen(open);
+		if (!isOpen) dialogState.setValue(state.value);
+	};
+	const onOpen = () => {
+		dialogState.setValue(state.value);
+		setIsOpen(true);
+	};
+	return /* @__PURE__ */ jsx(TooltipWrapper, {
+		as,
+		error,
+		triggerTabIndex: as === "inline" ? -1 : void 0,
+		children: /* @__PURE__ */ jsxs(FormField, {
+			...formFieldProps,
+			as,
+			labelProps,
+			className: "relative inline-flex w-full flex-col text-left",
+			tabIndex: as === "inline" ? -1 : void 0,
+			children: [/* @__PURE__ */ jsx(TimePickerInput, {
+				ref: mergeRefs(ref, timeFieldRef),
+				as,
+				fieldProps,
+				state,
+				onPress: onOpen,
+				isDisabled,
+				isDirty,
+				isInvalid: !!error,
+				disableDropdown,
+				variant,
+				size,
+				isClearable,
+				headerProps,
+				disableManualEntry,
+				placeholder
+			}), (!disableDropdown || disableManualEntry) && /* @__PURE__ */ jsx(DateTimeDialog, {
+				footer: /* @__PURE__ */ jsx(DateTimeDialogFooter, {
+					isDisabled,
+					onApply,
+					isValid: !dialogState.isInvalid && !!dialogState.value
+				}),
+				label,
+				triggerRef: timeFieldRef,
+				isOpen,
+				onOpenChange,
+				children: /* @__PURE__ */ jsx(TimePickerForm, { state: dialogState })
+			})]
+		})
+	});
+};
+const TimePicker = (props) => {
+	const formatTimeValue = (timeValue) => {
+		if (timeValue === null) return null;
+		const parsedDate = props.date ? DateTime.fromISO(props.date).toJSDate() : void 0;
+		const dateTimeValue = (parsedDate ? DateTimeUtils.fromLocalToZonedDateTime(parsedDate) : now(getLocalTimeZone())).set(timeValue);
+		return DateTimeUtils.fromDateValueToISO(dateTimeValue);
+	};
+	const parseTimeValue = (isoString) => {
+		if (isoString == null) return isoString;
+		return toTime(DateTimeUtils.fromISOtoZonedDateTime(isoString));
+	};
+	if ("formControl" in props && props.formControl) {
+		const { formControl, ref,...innerProps } = props;
+		return /* @__PURE__ */ jsx(Controller, {
+			control: formControl.control,
+			name: formControl.name,
+			render: ({ field, fieldState: { error } }) => /* @__PURE__ */ jsx(TimePickerBase, {
+				...innerProps,
+				ref: mergeRefs(ref, field.ref),
+				value: parseTimeValue(field.value),
+				onChange: (value) => field.onChange(formatTimeValue(value)),
+				onBlur: field.onBlur,
+				isDisabled: field.disabled || props.isDisabled,
+				error: props.error ?? error?.message
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(TimePickerBase, {
+		...props,
+		value: parseTimeValue(props.value),
+		onChange: (value) => props.onChange?.(formatTimeValue(value))
+	});
+};
+export { TimePicker };

package/dist/TimePickerForm.js

@@ -0,0 +1,158 @@
+import { ChevronDownIcon } from "./ChevronDown.js";
+import { ChevronUpIcon } from "./ChevronUp.js";
+import { Typography } from "./Typography.js";
+import { InlineIconButton } from "./InlineIconButton.js";
+import { useBreakpoint } from "./useBreakpoint.js";
+import { getPlaceholder } from "./DateSegmentItem.js";
+import { useLongPressRepeat } from "./useLongPressRepeat.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { clsx } from "clsx";
+import { useEffect, useRef } from "react";
+import { useDateSegment, useLocale, useTimeField } from "react-aria";
+import { Time } from "@internationalized/date";
+import { useTimeFieldState } from "@react-stately/datepicker";
+var INCREMENT_STEP_SIZE = 5;
+const TimePickerForm = ({ state, datePickerState }) => {
+	const isDesktop = useBreakpoint("md");
+	const { locale } = useLocale();
+	const fieldState = useTimeFieldState({
+		locale,
+		defaultValue: datePickerState?.timeValue,
+		onChange: (value) => {
+			datePickerState?.setTimeValue(value ?? new Time(0, 0));
+		},
+		hideTimeZone: true
+	});
+	const ref = useRef(null);
+	const innerState = state ?? fieldState;
+	const { fieldProps } = useTimeField({ "aria-label": "Time Picker" }, innerState, ref);
+	const getAutoFocus = (index) => {
+		if (!isDesktop) return false;
+		return index === innerState.segments.findIndex(({ type }) => [
+			"hour",
+			"minute",
+			"dayPeriod"
+		].includes(type));
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: "w-full p-8",
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "increment"
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				ref,
+				...fieldProps,
+				className: "flex items-center justify-center gap-4 py-2",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentInput, {
+					segment,
+					state: innerState,
+					autoFocus: getAutoFocus(i)
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-center gap-4",
+				children: innerState.segments.map((segment, i) => /* @__PURE__ */ jsx(TimeSegmentButton, {
+					segment,
+					state: innerState,
+					type: "decrement"
+				}, i))
+			})
+		]
+	});
+};
+var TimeSegmentInput = ({ segment, state, autoFocus }) => {
+	const ref = useRef(null);
+	const { segmentProps } = useDateSegment(segment, state, ref);
+	const isDesktop = useBreakpoint("md");
+	useEffect(() => {
+		if (autoFocus) ref.current?.focus();
+	}, [autoFocus]);
+	if (![
+		"literal",
+		"hour",
+		"minute",
+		"dayPeriod"
+	].includes(segment.type)) return null;
+	if (segment.type === "literal") {
+		if (!showSegmentText(segment.text)) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col text-center",
+			ref,
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "text-text-default-2",
+				children: segment.text
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col items-center justify-center gap-2",
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			...isDesktop && segmentProps,
+			className: clsx("w-11 rounded-input-rounding-default bg-input-filled-idle py-input-height-extra-small text-center", "font-labels-default text-text-default-3", "border border-input-filled-idle border-solid", "hover:border-interactive-contained-primary-hover", "focus-within:border-interactive-contained-primary-idle focus-within:outline-none"),
+			children: getPlaceholder(segment) ?? segment.text
+		})
+	});
+};
+var TimeSegmentButton = ({ segment, state, type }) => {
+	const stateRef = useRef(state);
+	useEffect(() => {
+		stateRef.current = state;
+	}, [state]);
+	const onPress = (isLongPress) => {
+		if (isLongPress && segment.type === "minute") {
+			const currentValue = stateRef.current.segments.find((item) => item.type === "minute")?.value ?? 0;
+			const diff = type === "increment" ? INCREMENT_STEP_SIZE : -INCREMENT_STEP_SIZE;
+			const normalizedValue = (Math.round((currentValue + diff) / INCREMENT_STEP_SIZE) * INCREMENT_STEP_SIZE % 60 + 60) % 60;
+			stateRef.current.setSegment(segment.type, normalizedValue);
+		} else stateRef.current[type](segment.type);
+	};
+	const { onPressStart, onPressEnd } = useLongPressRepeat({
+		onPress,
+		enabled: segment.type !== "dayPeriod",
+		timeout: 300,
+		interval: 300
+	});
+	if (![
+		"literal",
+		"hour",
+		"minute",
+		"dayPeriod"
+	].includes(segment.type)) return null;
+	if (segment.type === "literal") {
+		if (!showSegmentText(segment.text)) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: "flex shrink-0",
+			children: /* @__PURE__ */ jsx(Typography, {
+				as: "span",
+				variant: "prominent-1",
+				size: "label-2",
+				className: "invisible text-text-default-2",
+				"aria-hidden": true,
+				children: segment.text
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex w-11 select-none items-center justify-center",
+		onContextMenu: (e) => e.preventDefault(),
+		children: /* @__PURE__ */ jsx(InlineIconButton, {
+			label: "",
+			color: "secondary",
+			onPressStart,
+			onPressEnd,
+			icon: type === "increment" ? ChevronUpIcon : ChevronDownIcon
+		})
+	});
+};
+var showSegmentText = (text) => !/[\u2066\u2069]/.test(text);
+export { TimePickerForm };