UNPKG

one

Version:

One is a React framework for web, iOS, and Android apps.

1,853 lines • 52.2 kB
import { jsx } from "react/jsx-runtime";
import { isWorkletFunction, runOnUISync } from "react-native-worklets";
import { composeRangeDay, validateComposeFamily } from "./composeFamilyValidation.native.js";
import { Children, createContext, forwardRef, useContext, useEffect, useImperativeHandle, useRef, useState } from "react";
import { Image, StyleSheet } from "react-native";
import NativeComposeNode from "./specs/OneNativeComposeNodeNativeComponent.native.js";
import { iconColorRoles } from "./ui/iconRoles.native.js";
import { useControlled } from "./controlled.native.js";
import { getSyncStateId } from "./syncStore.native.js";
import { syncHandleOf, useSyncValue } from "./syncNativeState.native.js";
import { assertComposeStyle, assertFunction, composeIconGlyph, composeUtcDay, validateAlertDialogProps, validateAnimatedVisibilityProps, validateBadgeProps, validateBoxProps, validateButtonProps, validateCardProps, validateCheckboxProps, validateChipProps, validateColumnProps, validateDatePickerProps, validateDialogProps, validateDividerProps, validateDropdownMenuItemProps, validateDropdownMenuProps, validateExposedDropdownMenuBoxProps, validateFloatingActionButtonProps, validateFlowRowProps, validateIconButtonProps, validateIconProps, validateImageProps, validateLazyColumnProps, validateLazyRowProps, validateListItemProps, validateLoadingIndicatorProps, validateModalBottomSheetProps, validateNavigationBarItemProps, validateNavigationBarProps, validatePickerDialogProps, validateProgressIndicatorProps, validatePullToRefreshBoxProps, validateRadioButtonProps, validateRowProps, validateSearchBarProps, validateSegmentedButtonProps, validateSliderProps, validateSnackbarProps, validateSnackbarShowOptions, validateSurfaceProps, validateSwitchProps, validateTextFieldProps, validateTextProps, validateTimePickerProps, validateToggleButtonProps, validateTooltipBoxProps } from "./composeValidation.native.js";

var ComposeContext = /* @__PURE__ */ createContext(false);
var leafNodeTypes = /* @__PURE__ */ new Set([
	"shape",
	"daterangepicker",
	"daterangepickerdialog",
	"text",
	"spacer",
	"icon",
	"button",
	"switch",
	"checkbox",
	"radio",
	"image",
	"snackbar",
	"navigationbaritem",
	"dropdownmenuitem",
	"textfield",
	"slider",
	"alertdialog",
	"progressindicator",
	"datepicker",
	"timepicker",
	"datepickerdialog",
	"timepickerdialog",
	"loadingindicator",
	"containedloadingindicator",
	"horizontaldivider",
	"verticaldivider"
]);
function ComposeNode(param) {
	var { children, style, composeStyle, ...props } = param;
	var nested = useContext(ComposeContext);
	var [contentHeight, setContentHeight] = useState();
	var rootStyle = StyleSheet.flatten(style);
	var intrinsicHeight = !nested && (rootStyle === null || rootStyle === void 0 ? void 0 : rootStyle.height) == null && !((rootStyle === null || rootStyle === void 0 ? void 0 : rootStyle.flex) && rootStyle.flex > 0) && !((rootStyle === null || rootStyle === void 0 ? void 0 : rootStyle.flexGrow) && rootStyle.flexGrow > 0) && (composeStyle === null || composeStyle === void 0 ? void 0 : composeStyle.height) == null && !(composeStyle === null || composeStyle === void 0 ? void 0 : composeStyle.fillMaxHeight);
	if (nested && style != null) throw new Error("Compose nodes nested in a Compose tree must use composeStyle instead of style");
	assertComposeStyle(composeStyle);
	if (leafNodeTypes.has(props.nodeType) && Children.count(children) > 0) {
		throw new Error(`Compose ${props.nodeType} does not accept children`);
	}
	return /* @__PURE__ */ jsx(NativeComposeNode, {
		...props,
		composeStyle,
		intrinsicHeight,
		onNativeComposeNodeContentSizeChange: intrinsicHeight ? function(event) {
			return setContentHeight(event.nativeEvent.height);
		} : void 0,
		style: nested ? void 0 : [intrinsicHeight && contentHeight !== void 0 ? { height: contentHeight } : void 0, style],
		collapsable: false,
		children: /* @__PURE__ */ jsx(ComposeContext.Provider, {
			value: true,
			children
		})
	});
}
function Column(param) {
	var { children, horizontalAlignment = "start", verticalArrangement = "top", spacing, ...props } = param;
	validateColumnProps({
		horizontalAlignment,
		verticalArrangement,
		spacing
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "column",
		alignment: horizontalAlignment,
		arrangement: verticalArrangement,
		spacing,
		children
	});
}
function Row(param) {
	var { children, verticalAlignment = "top", horizontalArrangement = "start", spacing, ...props } = param;
	validateRowProps({
		verticalAlignment,
		horizontalArrangement,
		spacing
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "row",
		alignment: verticalAlignment,
		arrangement: horizontalArrangement,
		spacing,
		children
	});
}
function Spacer(props) {
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "spacer"
	});
}
function FlowRow(param) {
	var { children, horizontalArrangement = "start", verticalArrangement = "top", ...props } = param;
	validateFlowRowProps({
		horizontalArrangement,
		verticalArrangement
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "flowrow",
		arrangement: typeof horizontalArrangement === "string" ? horizontalArrangement : "start",
		verticalArrangement: typeof verticalArrangement === "string" ? verticalArrangement : "top",
		spacing: typeof horizontalArrangement === "string" ? void 0 : horizontalArrangement.spacedBy,
		verticalSpacing: typeof verticalArrangement === "string" ? void 0 : verticalArrangement.spacedBy,
		children
	});
}
function Box(param) {
	var { children, contentAlignment = "topStart", ...props } = param;
	validateBoxProps({ contentAlignment });
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "box",
		alignment: contentAlignment,
		children
	});
}
function LazyColumn(param) {
	var { children, horizontalAlignment = "start", verticalArrangement = "top", contentPadding, ...props } = param;
	validateLazyColumnProps({
		horizontalAlignment,
		verticalArrangement,
		contentPadding
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "lazycolumn",
		alignment: horizontalAlignment,
		arrangement: typeof verticalArrangement === "string" ? verticalArrangement : "top",
		spacing: typeof verticalArrangement === "string" ? void 0 : verticalArrangement.spacedBy,
		lazyContentPadding: contentPadding,
		children
	});
}
function LazyRow(param) {
	var { children, verticalAlignment = "top", horizontalArrangement = "start", contentPadding, ...props } = param;
	validateLazyRowProps({
		verticalAlignment,
		horizontalArrangement,
		contentPadding
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "lazyrow",
		alignment: verticalAlignment,
		arrangement: typeof horizontalArrangement === "string" ? horizontalArrangement : "start",
		spacing: typeof horizontalArrangement === "string" ? void 0 : horizontalArrangement.spacedBy,
		lazyContentPadding: contentPadding,
		children
	});
}
function Image$1(param) {
	var { source, contentScale = "fit", alignment = "center", contentDescription, tint, alpha = 1, onLoad, onError, accessibilityLabel, ...props } = param;
	var _ref;
	validateImageProps({
		source,
		contentScale,
		alignment,
		contentDescription,
		tint,
		alpha,
		onLoad,
		onError
	});
	var resolved = typeof source === "number" ? Image.resolveAssetSource(source) : source;
	var uri = typeof (resolved === null || resolved === void 0 ? void 0 : resolved.uri) === "string" ? resolved.uri : void 0;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "image",
		accessibilityLabel: (_ref = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : contentDescription) !== null && _ref !== void 0 ? _ref : void 0,
		imageSource: uri === void 0 ? void 0 : { uri },
		imageOptions: {
			contentScale,
			alignment,
			tint,
			alpha
		},
		onNativeComposeNodeImageLoad: onLoad ? function() {
			return onLoad();
		} : void 0,
		onNativeComposeNodeImageError: onError ? function(event) {
			return onError(event.nativeEvent.message);
		} : void 0
	});
}
function Snackbar(param) {
	var { containerColor, contentColor, actionColor, actionContentColor, dismissActionContentColor, actionOnNewLine, ...props } = param;
	validateSnackbarProps({
		containerColor,
		contentColor,
		actionColor,
		actionContentColor,
		dismissActionContentColor,
		actionOnNewLine
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "snackbar",
		snackbarColors: {
			containerColor,
			contentColor,
			actionColor,
			actionContentColor,
			dismissActionContentColor,
			actionOnNewLine
		}
	});
}
var SnackbarHostRoot = /* @__PURE__ */ forwardRef(function SnackbarHost(param, ref) {
	var { children, ...props } = param;
	var requestId = useRef(0);
	var revision = useRef(0);
	var active = useRef(void 0);
	var queue = useRef([]);
	var [request, setRequest] = useState(void 0);
	var pump = function pump2() {
		if (active.current) return;
		var next = queue.current.shift();
		if (!next) return;
		active.current = next;
		revision.current += 1;
		setRequest({
			...next.options,
			requestId: next.id,
			revision: revision.current
		});
	};
	useImperativeHandle(ref, function() {
		return { showSnackbar: function showSnackbar(options) {
			return new Promise(function(resolve) {
				validateSnackbarShowOptions(options);
				requestId.current += 1;
				queue.current.push({
					id: requestId.current,
					options,
					resolve
				});
				pump();
			});
		} };
	}, []);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "snackbarhost",
		snackbarRequest: request,
		onNativeComposeNodeSnackbarResult: function onNativeComposeNodeSnackbarResult(event) {
			if (active.current && active.current.id === event.nativeEvent.requestId) {
				var resolve = active.current.resolve;
				active.current = void 0;
				resolve(event.nativeEvent.result === "actionPerformed" ? "actionPerformed" : "dismissed");
			}
			pump();
		},
		children
	});
});
var SnackbarHost2 = SnackbarHostRoot;
var ModalBottomSheetRoot = /* @__PURE__ */ forwardRef(function ModalBottomSheet(param, ref) {
	var { children, onDismissRequest, properties, scrimColor, skipPartiallyExpanded = false, initialFullyExpanded = false, showDragHandle = true, sheetGesturesEnabled = true, ...props } = param;
	validateModalBottomSheetProps({
		onDismissRequest,
		properties,
		scrimColor,
		skipPartiallyExpanded,
		initialFullyExpanded,
		showDragHandle,
		sheetGesturesEnabled
	});
	var commandId = useRef(0);
	var commandRevision = useRef(0);
	var active = useRef(void 0);
	var queue = useRef([]);
	var [hideCommand, setHideCommand] = useState(void 0);
	var pump = function pump2() {
		if (active.current) return;
		var next = queue.current.shift();
		if (!next) return;
		active.current = next;
		commandRevision.current += 1;
		setHideCommand({
			requestId: next.id,
			revision: commandRevision.current
		});
	};
	useImperativeHandle(ref, function() {
		return { hide: function hide() {
			return new Promise(function(resolve) {
				commandId.current += 1;
				queue.current.push({
					id: commandId.current,
					resolve
				});
				pump();
			});
		} };
	}, []);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "modalbottomsheet",
		sheetOptions: {
			skipPartiallyExpanded,
			initialFullyExpanded,
			showDragHandle,
			sheetGesturesEnabled,
			scrimColor
		},
		sheetProperties: properties,
		sheetCommand: hideCommand,
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismissRequest();
		},
		onNativeComposeNodeSheetHidden: function onNativeComposeNodeSheetHidden(event) {
			if (active.current && active.current.id === event.nativeEvent.requestId) {
				var resolve = active.current.resolve;
				active.current = void 0;
				resolve();
			}
			pump();
		},
		children
	});
});
var ModalBottomSheet2 = Object.assign(ModalBottomSheetRoot, { DragHandle: function DragHandle(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		nodeType: "sheetslot",
		slotName: "dragHandle",
		children
	});
} });
function DropdownMenu(param) {
	var { children, expanded, onDismissRequest, containerColor, ...props } = param;
	validateDropdownMenuProps({
		expanded,
		onDismissRequest,
		containerColor
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "dropdownmenu",
		visible: expanded,
		dropdownMenuColors: { containerColor },
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismissRequest();
		},
		children
	});
}
function DropdownMenuItem(param) {
	var { text, onClick, enabled = true, leadingIcon, trailingIcon, iconFilled = false, colors, ...props } = param;
	validateDropdownMenuItemProps({
		text,
		onClick,
		enabled,
		leadingIcon,
		trailingIcon,
		iconFilled,
		colors
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "dropdownmenuitem",
		text,
		disabled: !enabled,
		dropdownMenuItemOptions: {
			leadingIcon: leadingIcon === void 0 ? void 0 : composeIconGlyph("DropdownMenuItem leadingIcon", leadingIcon),
			trailingIcon: trailingIcon === void 0 ? void 0 : composeIconGlyph("DropdownMenuItem trailingIcon", trailingIcon),
			filled: iconFilled
		},
		dropdownMenuItemColors: colors,
		onNativeComposeNodeButtonPress: function onNativeComposeNodeButtonPress() {
			return onClick();
		}
	});
}
function ExposedDropdownMenuBox(param) {
	var { children, expanded, onExpandedChange, expandedRevision = 0, value, placeholder, enabled = true, ...props } = param;
	validateExposedDropdownMenuBoxProps({
		expanded,
		onExpandedChange,
		expandedRevision,
		value,
		placeholder,
		enabled
	});
	var controlledExpanded = useControlled(function(event) {
		return onExpandedChange(event.value);
	}, expandedRevision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "exposeddropdownmenubox",
		textValue: value,
		expandedValue: expanded,
		expandedRevision,
		acknowledgedExpandedEvent: controlledExpanded.acknowledgedEvent,
		placeholder,
		disabled: !enabled,
		onNativeComposeNodeBooleanValueChange: function onNativeComposeNodeBooleanValueChange(event) {
			return controlledExpanded.onNativeChange(event.nativeEvent);
		},
		children
	});
}
function TooltipBox(param) {
	var { children, text, title, enabled = true, ...props } = param;
	validateTooltipBoxProps({
		text,
		title,
		enabled
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "tooltipbox",
		text,
		title,
		disabled: !enabled,
		children
	});
}
function AnimatedVisibility(param) {
	var { children, visible, enter, exit, ...props } = param;
	validateAnimatedVisibilityProps({
		visible,
		enter,
		exit
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "animatedvisibility",
		visible,
		enterTransition: enter,
		exitTransition: exit,
		children
	});
}
function PullToRefreshBox(param) {
	var { children, isRefreshing, onRefresh, enabled = true, ...props } = param;
	validatePullToRefreshBoxProps({
		isRefreshing,
		onRefresh,
		enabled
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "pulltorefreshbox",
		isRefreshing,
		disabled: !enabled,
		onNativeComposeNodeButtonPress: function onNativeComposeNodeButtonPress() {
			return onRefresh();
		},
		children
	});
}
function NavigationBar(param) {
	var { children, containerColor, contentColor, tonalElevation, ...props } = param;
	validateNavigationBarProps({
		containerColor,
		contentColor,
		tonalElevation
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "navigationbar",
		navigationBarColors: {
			containerColor,
			contentColor
		},
		tonalElevation,
		children
	});
}
function SearchBarNode(param) {
	var { nodeType, owner, children, query, onQueryChange, revision = 0, expanded, onExpandedChange, expandedRevision = 0, placeholder, enabled = true, onSearch, containerColor, ...props } = param;
	validateSearchBarProps({
		query,
		onQueryChange,
		revision,
		expanded,
		onExpandedChange,
		expandedRevision,
		placeholder,
		enabled,
		onSearch,
		containerColor
	}, owner);
	var controlled = useControlled(function(event) {
		return onQueryChange(event.text);
	}, revision);
	var controlledExpanded = useControlled(function(event) {
		return onExpandedChange(event.value);
	}, expandedRevision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType,
		textValue: query,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		expandedValue: expanded,
		expandedRevision,
		acknowledgedExpandedEvent: controlledExpanded.acknowledgedEvent,
		placeholder,
		disabled: !enabled,
		searchBarColors: { containerColor },
		onNativeComposeNodeTextValueChange: function onNativeComposeNodeTextValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		},
		onNativeComposeNodeBooleanValueChange: function onNativeComposeNodeBooleanValueChange(event) {
			return controlledExpanded.onNativeChange(event.nativeEvent);
		},
		onNativeComposeNodeTextFieldSubmit: onSearch ? function(event) {
			return onSearch(event.nativeEvent.text);
		} : void 0,
		children
	});
}
function SearchBarRoot(props) {
	return /* @__PURE__ */ jsx(SearchBarNode, {
		...props,
		nodeType: "searchbar",
		owner: "SearchBar"
	});
}
function DockedSearchBarRoot(props) {
	return /* @__PURE__ */ jsx(SearchBarNode, {
		...props,
		nodeType: "dockedsearchbar",
		owner: "DockedSearchBar"
	});
}
function SearchBarSlot(param) {
	var { children, name } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		nodeType: "searchbarslot",
		slotName: name,
		children
	});
}
var SearchBarLeadingIcon = function SearchBarLeadingIcon2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(SearchBarSlot, {
		name: "leadingIcon",
		children
	});
};
var SearchBarTrailingIcon = function SearchBarTrailingIcon2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(SearchBarSlot, {
		name: "trailingIcon",
		children
	});
};
var SearchBar = Object.assign(SearchBarRoot, {
	LeadingIcon: SearchBarLeadingIcon,
	TrailingIcon: SearchBarTrailingIcon
});
var DockedSearchBar = Object.assign(DockedSearchBarRoot, {
	LeadingIcon: SearchBarLeadingIcon,
	TrailingIcon: SearchBarTrailingIcon
});
function NavigationBarItem(param) {
	var { selected, onClick, label, icon, iconFilled = false, enabled = true, alwaysShowLabel = true, colors, ...props } = param;
	validateNavigationBarItemProps({
		selected,
		onClick,
		label,
		icon,
		iconFilled,
		enabled,
		alwaysShowLabel,
		colors
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "navigationbaritem",
		selected,
		label,
		icon: composeIconGlyph("NavigationBarItem icon", icon),
		iconFilled,
		disabled: !enabled,
		alwaysShowLabel,
		navigationBarItemColors: colors,
		onNativeComposeNodeButtonPress: function onNativeComposeNodeButtonPress() {
			return onClick();
		}
	});
}
function Badge(param) {
	var { children, containerColor, contentColor, ...props } = param;
	validateBadgeProps({
		containerColor,
		contentColor
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "badge",
		badgeColors: {
			containerColor,
			contentColor
		},
		children
	});
}
function BadgedBoxRoot(param) {
	var { children, ...props } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "badgedbox",
		children
	});
}
var BadgedBox = Object.assign(BadgedBoxRoot, { Badge: function Badge2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		nodeType: "badgeslot",
		slotName: "badge",
		children
	});
} });
function ListItemRoot(param) {
	var { children, colors, tonalElevation, shadowElevation, ...props } = param;
	validateListItemProps({
		colors,
		tonalElevation,
		shadowElevation
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "listitem",
		listItemColors: colors,
		tonalElevation,
		shadowElevation,
		children
	});
}
function composeSlot(slotName) {
	return function(param) {
		var { children } = param;
		return /* @__PURE__ */ jsx(ComposeNode, {
			nodeType: "listitemslot",
			slotName,
			children
		});
	};
}
var ListItem = Object.assign(ListItemRoot, {
	HeadlineContent: composeSlot("headlineContent"),
	OverlineContent: composeSlot("overlineContent"),
	SupportingContent: composeSlot("supportingContent"),
	LeadingContent: composeSlot("leadingContent"),
	TrailingContent: composeSlot("trailingContent")
});
function renderCard(nodeType, kind, param) {
	var { children, colors, elevation, border, ...props } = param;
	validateCardProps({
		colors,
		elevation,
		border
	}, kind);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType,
		cardColors: colors,
		cardElevation: elevation,
		cardBorder: border,
		children
	});
}
function Card(props) {
	return renderCard("card", "Card", props);
}
function ElevatedCard(props) {
	return renderCard("elevatedcard", "ElevatedCard", props);
}
function OutlinedCard(props) {
	return renderCard("outlinedcard", "OutlinedCard", props);
}
function Surface(param) {
	var { children, color, contentColor, tonalElevation, shadowElevation, border, enabled = true, selected, checked, onClick, onCheckedChange, revision = 0, ...props } = param;
	validateSurfaceProps({
		color,
		contentColor,
		tonalElevation,
		shadowElevation,
		border,
		enabled,
		selected,
		checked,
		onClick,
		onCheckedChange
	});
	var mode = checked !== void 0 ? "toggleable" : selected !== void 0 ? "selectable" : onClick ? "clickable" : "plain";
	var controlled = useControlled(function(event) {
		return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "surface",
		surfaceMode: mode,
		cardColors: {
			containerColor: color,
			contentColor
		},
		tonalElevation,
		shadowElevation,
		cardBorder: border,
		disabled: !enabled,
		selected,
		value: checked,
		nativeClickable: mode === "toggleable" ? onCheckedChange !== void 0 : onClick !== void 0,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0,
		onNativeComposeNodeBooleanValueChange: onCheckedChange ? function(event) {
			return controlled.onNativeChange(event.nativeEvent);
		} : void 0,
		children
	});
}
function HorizontalDivider(param) {
	var { thickness, color, ...props } = param;
	validateDividerProps({
		thickness,
		color
	}, "HorizontalDivider");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "horizontaldivider",
		dividerStyle: {
			thickness,
			color
		}
	});
}
function VerticalDivider(param) {
	var { thickness, color, ...props } = param;
	validateDividerProps({
		thickness,
		color
	}, "VerticalDivider");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "verticaldivider",
		dividerStyle: {
			thickness,
			color
		}
	});
}
function renderChip(nodeType, kind, chipProps) {
	var _props_selected;
	validateChipProps(chipProps, kind);
	var { children, enabled = true, colors, elevation, border, onClick, ...props } = chipProps;
	var selected = "selected" in props ? (_props_selected = props.selected) !== null && _props_selected !== void 0 ? _props_selected : false : false;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType,
		selected,
		disabled: !enabled,
		chipColors: colors,
		chipElevation: elevation,
		chipBorder: border,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0,
		children
	});
}
function AssistChipRoot(props) {
	return renderChip("assistchip", "AssistChip", props);
}
function FilterChipRoot(props) {
	return renderChip("filterchip", "FilterChip", props);
}
function InputChipRoot(props) {
	return renderChip("inputchip", "InputChip", props);
}
function SuggestionChipRoot(props) {
	return renderChip("suggestionchip", "SuggestionChip", props);
}
function ChipSlot(param) {
	var { children, name } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		nodeType: "chipslot",
		slotName: name,
		children
	});
}
var ChipLabel = function ChipLabel2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ChipSlot, {
		name: "label",
		children
	});
};
var ChipLeadingIcon = function ChipLeadingIcon2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ChipSlot, {
		name: "leadingIcon",
		children
	});
};
var ChipTrailingIcon = function ChipTrailingIcon2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ChipSlot, {
		name: "trailingIcon",
		children
	});
};
var ChipAvatar = function ChipAvatar2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ChipSlot, {
		name: "avatar",
		children
	});
};
var ChipIcon = function ChipIcon2(param) {
	var { children } = param;
	return /* @__PURE__ */ jsx(ChipSlot, {
		name: "icon",
		children
	});
};
var AssistChip = Object.assign(AssistChipRoot, {
	Label: ChipLabel,
	LeadingIcon: ChipLeadingIcon,
	TrailingIcon: ChipTrailingIcon
});
var FilterChip = Object.assign(FilterChipRoot, {
	Label: ChipLabel,
	LeadingIcon: ChipLeadingIcon,
	TrailingIcon: ChipTrailingIcon
});
var InputChip = Object.assign(InputChipRoot, {
	Label: ChipLabel,
	Avatar: ChipAvatar,
	TrailingIcon: ChipTrailingIcon
});
var SuggestionChip = Object.assign(SuggestionChipRoot, {
	Label: ChipLabel,
	Icon: ChipIcon
});
function Text(param) {
	var { text, fontSize, fontWeight, textAlign, maxLines, ...props } = param;
	validateTextProps({
		text,
		fontSize,
		fontWeight,
		textAlign,
		maxLines
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "text",
		text,
		fontSize,
		fontWeight,
		textAlign,
		maxLines
	});
}
function renderIcon(param, colorRole) {
	var { name, size = 24, filled = false, ...props } = param;
	validateIconProps({
		name,
		size,
		filled
	});
	if (colorRole && !iconColorRoles.some(function(role) {
		return role === colorRole;
	})) throw new Error("Icon colorRole must be a One.UI icon color role");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "icon",
		text: composeIconGlyph("Icon name", name),
		fontSize: size,
		iconFilled: filled,
		colorRole
	});
}
function Icon(props) {
	return renderIcon(props);
}
function Button(param) {
	var { label, disabled = false, variant = "filled", tone = "default", icon, iconFilled = false, onPress, ...props } = param;
	validateButtonProps({
		label,
		disabled,
		variant,
		tone,
		icon,
		iconFilled,
		onPress
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "button",
		label,
		disabled,
		variant,
		tone,
		icon: icon === void 0 ? void 0 : composeIconGlyph("Button icon", icon),
		iconFilled,
		onNativeComposeNodeButtonPress: onPress ? function() {
			return onPress();
		} : void 0
	});
}
function renderIconButton(nodeType, param) {
	var { children, enabled = true, colors, onClick, ...props } = param;
	validateIconButtonProps({
		children,
		enabled,
		colors,
		onClick
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType,
		disabled: !enabled,
		iconButtonColors: colors,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0,
		children
	});
}
function IconButton(props) {
	return renderIconButton("iconbutton", props);
}
function FilledIconButton(props) {
	return renderIconButton("fillediconbutton", props);
}
function FilledTonalIconButton(props) {
	return renderIconButton("filledtonaliconbutton", props);
}
function OutlinedIconButton(props) {
	return renderIconButton("outlinediconbutton", props);
}
function FloatingActionButtonRoot(param) {
	var { children, containerColor, expanded = true, onClick, variant = "medium", ...props } = param;
	validateFloatingActionButtonProps({
		children,
		containerColor,
		expanded,
		onClick
	}, variant);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "floatingactionbutton",
		variant,
		fabColors: { containerColor },
		fabExpanded: expanded,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0,
		children
	});
}
var FloatingActionButton = Object.assign(function(props) {
	return /* @__PURE__ */ jsx(FloatingActionButtonRoot, {
		...props,
		variant: "medium"
	});
}, { Icon: composeSlot("icon") });
var SmallFloatingActionButton = Object.assign(function(props) {
	return /* @__PURE__ */ jsx(FloatingActionButtonRoot, {
		...props,
		variant: "small"
	});
}, { Icon: composeSlot("icon") });
var LargeFloatingActionButton = Object.assign(function(props) {
	return /* @__PURE__ */ jsx(FloatingActionButtonRoot, {
		...props,
		variant: "large"
	});
}, { Icon: composeSlot("icon") });
var ExtendedFloatingActionButton = Object.assign(function(props) {
	return /* @__PURE__ */ jsx(FloatingActionButtonRoot, {
		...props,
		variant: "extended"
	});
}, {
	Icon: composeSlot("icon"),
	Text: composeSlot("text")
});
function ToggleButtonNode(param) {
	var { children, checked, enabled = true, colors, onCheckedChange, revision = 0, nodeType, ...props } = param;
	validateToggleButtonProps({
		children,
		checked,
		enabled,
		colors,
		onCheckedChange,
		revision
	});
	var controlled = useControlled(function(event) {
		return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType,
		value: checked,
		disabled: !enabled,
		nativeClickable: onCheckedChange !== void 0,
		toggleButtonColors: colors,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		onNativeComposeNodeBooleanValueChange: onCheckedChange ? function(event) {
			return controlled.onNativeChange(event.nativeEvent);
		} : void 0,
		children
	});
}
function ToggleButton(props) {
	return /* @__PURE__ */ jsx(ToggleButtonNode, {
		...props,
		nodeType: "togglebutton"
	});
}
function IconToggleButton(props) {
	return /* @__PURE__ */ jsx(ToggleButtonNode, {
		...props,
		nodeType: "icontogglebutton"
	});
}
function FilledIconToggleButton(props) {
	return /* @__PURE__ */ jsx(ToggleButtonNode, {
		...props,
		nodeType: "filledicontogglebutton"
	});
}
function OutlinedIconToggleButton(props) {
	return /* @__PURE__ */ jsx(ToggleButtonNode, {
		...props,
		nodeType: "outlinedicontogglebutton"
	});
}
function SingleChoiceSegmentedButtonRow(param) {
	var { children, ...props } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "singlechoicesegmentedbuttonrow",
		children
	});
}
function MultiChoiceSegmentedButtonRow(param) {
	var { children, ...props } = param;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "multichoicesegmentedbuttonrow",
		children
	});
}
function SegmentedButton(param) {
	var { children, selected, checked, enabled = true, colors, onClick, onCheckedChange, revision = 0, ...props } = param;
	validateSegmentedButtonProps({
		children,
		selected,
		checked,
		enabled,
		colors,
		onClick,
		onCheckedChange,
		revision
	});
	var controlled = useControlled(function(event) {
		return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "segmentedbutton",
		selected,
		value: checked !== null && checked !== void 0 ? checked : false,
		disabled: !enabled,
		nativeClickable: onClick !== void 0 || onCheckedChange !== void 0,
		segmentedButtonColors: colors,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0,
		onNativeComposeNodeBooleanValueChange: onCheckedChange ? function(event) {
			return controlled.onNativeChange(event.nativeEvent);
		} : void 0,
		children
	});
}
function Switch(param) {
	var { isOn, disabled = false, label = "", colors, onIsOnChange, revision = 0, ...props } = param;
	validateSwitchProps({
		isOn,
		disabled,
		label,
		colors,
		onIsOnChange,
		revision
	});
	var controlled = useControlled(function(event) {
		return onIsOnChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "switch",
		value: isOn,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		label,
		switchColors: colors,
		disabled,
		onNativeComposeNodeBooleanValueChange: function onNativeComposeNodeBooleanValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		}
	});
}
function Checkbox(param) {
	var { value, disabled = false, onCheckedChange, revision = 0, colors, ...props } = param;
	validateCheckboxProps({
		value,
		disabled,
		onCheckedChange,
		revision,
		colors
	});
	var controlled = useControlled(function(event) {
		return onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "checkbox",
		value,
		nativeClickable: onCheckedChange !== void 0,
		checkboxColors: colors,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		disabled,
		onNativeComposeNodeBooleanValueChange: onCheckedChange ? function(event) {
			return controlled.onNativeChange(event.nativeEvent);
		} : void 0
	});
}
function RadioButton(param) {
	var { selected, disabled = false, onClick, colors, ...props } = param;
	validateRadioButtonProps({
		selected,
		disabled,
		onClick,
		colors
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "radio",
		selected,
		disabled,
		nativeClickable: onClick !== void 0,
		radioColors: colors,
		onNativeComposeNodeButtonPress: onClick ? function() {
			return onClick();
		} : void 0
	});
}
function TextField(param) {
	var { text, onTextChange, revision = 0, label, placeholder, disabled = false, variant = "filled", keyboardType = "default", secureText = false, focused, focusRevision = 0, onFocusChange, imeAction, onSubmit, maxLength, multiline = false, capitalization, autoCorrect, textAlign, ...props } = param;
	var _getSyncStateId;
	validateTextFieldProps({
		text,
		onTextChange,
		revision,
		label,
		placeholder,
		disabled,
		variant,
		keyboardType,
		secureText,
		focused,
		focusRevision,
		onFocusChange,
		imeAction,
		onSubmit,
		maxLength,
		multiline,
		capitalization,
		autoCorrect,
		textAlign
	});
	var syncHandle = syncHandleOf(text);
	var syncedText = useSyncValue(text);
	var controlled = useControlled(function(event) {
		syncHandle === null || syncHandle === void 0 ? void 0 : syncHandle.set(event.text);
		onTextChange(event.text);
	}, revision);
	var controlledFocus = useControlled(function(event) {
		return onFocusChange === null || onFocusChange === void 0 ? void 0 : onFocusChange(event.value);
	}, focusRevision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "textfield",
		textValue: syncedText,
		syncStateId: syncHandle ? (_getSyncStateId = getSyncStateId(syncHandle)) !== null && _getSyncStateId !== void 0 ? _getSyncStateId : 0 : 0,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		label,
		placeholder,
		disabled,
		variant,
		keyboardType,
		secureText,
		focused,
		focusRevision,
		acknowledgedFocusEvent: focused !== void 0 ? controlledFocus.acknowledgedEvent : 0,
		imeAction,
		maxLength,
		multiline,
		capitalization,
		autoCorrect,
		textAlign,
		onNativeComposeNodeTextValueChange: function onNativeComposeNodeTextValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		},
		onNativeComposeNodeTextFieldFocusChange: function onNativeComposeNodeTextFieldFocusChange(event) {
			return controlledFocus.onNativeChange(event.nativeEvent);
		},
		onNativeComposeNodeTextFieldSubmit: function onNativeComposeNodeTextFieldSubmit() {
			return onSubmit === null || onSubmit === void 0 ? void 0 : onSubmit();
		}
	});
}
function Slider(param) {
	var { value, onValueChange, revision = 0, minimumValue = 0, maximumValue = 1, lowerLimit, upperLimit, step = 0, disabled = false, colors, ...props } = param;
	validateSliderProps({
		value,
		onValueChange,
		revision,
		minimumValue,
		maximumValue,
		lowerLimit,
		upperLimit,
		step,
		disabled,
		colors
	});
	var controlled = useControlled(function(event) {
		return onValueChange(event.value);
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "slider",
		numberValue: value,
		minimumValue,
		maximumValue,
		sliderOptions: {
			lowerLimit,
			upperLimit,
			colors
		},
		step,
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		disabled,
		onNativeComposeNodeNumberValueChange: function onNativeComposeNodeNumberValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		}
	});
}
function AlertDialog(param) {
	var { visible, title, message, confirmLabel, dismissLabel, onConfirm, onDismiss, ...props } = param;
	validateAlertDialogProps({
		visible,
		title,
		message,
		confirmLabel,
		dismissLabel,
		onConfirm,
		onDismiss
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "alertdialog",
		visible,
		title,
		message,
		confirmLabel,
		dismissLabel,
		onNativeComposeNodeDialogConfirm: function onNativeComposeNodeDialogConfirm() {
			return onConfirm();
		},
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismiss();
		}
	});
}
function Dialog(param) {
	var { children, visible, onDismiss, ...props } = param;
	validateDialogProps({
		visible,
		onDismiss
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "dialog",
		visible,
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismiss();
		},
		children
	});
}
function ProgressIndicator(param) {
	var { variant = "circular", progress, color, trackColor, strokeCap, gapSize, strokeWidth, drawStopIndicator, stopSize, amplitude, wavelength, waveSpeed, ...props } = param;
	validateProgressIndicatorProps({
		variant,
		progress,
		color,
		trackColor,
		strokeCap,
		gapSize,
		strokeWidth,
		drawStopIndicator,
		stopSize,
		amplitude,
		wavelength,
		waveSpeed
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "progressindicator",
		progressVariant: variant,
		progress: progress !== null && progress !== void 0 ? progress : void 0,
		progressOptions: {
			color,
			trackColor,
			strokeCap,
			gapSize,
			strokeWidth,
			drawStopIndicator,
			stopSize,
			amplitude,
			wavelength,
			waveSpeed
		}
	});
}
function LinearProgressIndicator(props) {
	return /* @__PURE__ */ jsx(ProgressIndicator, {
		...props,
		variant: "linear"
	});
}
function CircularProgressIndicator(props) {
	return /* @__PURE__ */ jsx(ProgressIndicator, {
		...props,
		variant: "circular"
	});
}
function LinearWavyProgressIndicator(props) {
	return /* @__PURE__ */ jsx(ProgressIndicator, {
		...props,
		variant: "linearWavy"
	});
}
function CircularWavyProgressIndicator(props) {
	return /* @__PURE__ */ jsx(ProgressIndicator, {
		...props,
		variant: "circularWavy"
	});
}
function LoadingIndicator(param) {
	var { progress, color, ...props } = param;
	validateLoadingIndicatorProps({
		progress,
		color
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "loadingindicator",
		progress: progress === void 0 ? void 0 : progress !== null && progress !== void 0 ? progress : 0,
		loadingColors: { color }
	});
}
function ContainedLoadingIndicator(param) {
	var { progress, color, containerColor, ...props } = param;
	validateLoadingIndicatorProps({
		progress,
		color,
		containerColor
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "containedloadingindicator",
		progress: progress === void 0 ? void 0 : progress !== null && progress !== void 0 ? progress : 0,
		loadingColors: {
			color,
			containerColor
		}
	});
}
function withUtcDay(selection, utcDay) {
	var day = new Date(utcDay);
	var next = new Date(selection);
	next.setFullYear(day.getUTCFullYear(), day.getUTCMonth(), day.getUTCDate());
	return next;
}
function withMinuteOfDay(selection, minutes) {
	var next = new Date(selection);
	next.setHours(Math.floor(minutes / 60), minutes % 60, 0, 0);
	return next;
}
var minuteOfDay = function minuteOfDay2(date) {
	return date.getHours() * 60 + date.getMinutes();
};
function datePickerOptions(param) {
	var { minimumDate, maximumDate, showModeToggle = true, color, colors } = param;
	return {
		showModeToggle,
		minimumDay: minimumDate && composeUtcDay(minimumDate),
		maximumDay: maximumDate && composeUtcDay(maximumDate),
		color,
		colors
	};
}
function DatePicker(param) {
	var { selection, onSelectionChange, revision = 0, minimumDate, maximumDate, variant = "picker", showModeToggle, color, colors, ...props } = param;
	validateDatePickerProps({
		selection,
		revision,
		minimumDate,
		maximumDate,
		variant,
		showModeToggle,
		color,
		colors
	});
	assertFunction(onSelectionChange, "DatePicker onSelectionChange");
	var controlled = useControlled(function(event) {
		return onSelectionChange(withUtcDay(selection, event.value));
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "datepicker",
		numberValue: composeUtcDay(selection),
		variant,
		pickerOptions: datePickerOptions({
			minimumDate,
			maximumDate,
			showModeToggle,
			color,
			colors
		}),
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		onNativeComposeNodeNumberValueChange: function onNativeComposeNodeNumberValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		}
	});
}
function TimePicker(param) {
	var { selection, onSelectionChange, revision = 0, is24Hour, variant = "picker", color, colors, ...props } = param;
	validateTimePickerProps({
		selection,
		revision,
		is24Hour,
		variant,
		color,
		colors
	});
	assertFunction(onSelectionChange, "TimePicker onSelectionChange");
	var controlled = useControlled(function(event) {
		return onSelectionChange(withMinuteOfDay(selection, event.value));
	}, revision);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "timepicker",
		numberValue: minuteOfDay(selection),
		variant,
		pickerOptions: {
			is24Hour,
			color,
			colors
		},
		acknowledgedEvent: controlled.acknowledgedEvent,
		revision,
		onNativeComposeNodeNumberValueChange: function onNativeComposeNodeNumberValueChange(event) {
			return controlled.onNativeChange(event.nativeEvent);
		}
	});
}
function DatePickerDialog(param) {
	var { visible, selection, onConfirm, onDismiss, confirmLabel, dismissLabel, minimumDate, maximumDate, variant = "picker", showModeToggle, color, colors, ...props } = param;
	validatePickerDialogProps({
		visible,
		onConfirm,
		onDismiss,
		confirmLabel,
		dismissLabel
	}, "DatePickerDialog");
	validateDatePickerProps({
		selection,
		minimumDate,
		maximumDate,
		variant,
		showModeToggle,
		color,
		colors
	}, "DatePickerDialog");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "datepickerdialog",
		visible,
		numberValue: composeUtcDay(selection),
		variant,
		confirmLabel,
		dismissLabel,
		pickerOptions: datePickerOptions({
			minimumDate,
			maximumDate,
			showModeToggle,
			color,
			colors
		}),
		onNativeComposeNodeDialogConfirm: function onNativeComposeNodeDialogConfirm(event) {
			return onConfirm(withUtcDay(selection, event.nativeEvent.value));
		},
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismiss();
		}
	});
}
function TimePickerDialog(param) {
	var { visible, selection, onConfirm, onDismiss, confirmLabel, dismissLabel, is24Hour, variant = "picker", color, colors, ...props } = param;
	validatePickerDialogProps({
		visible,
		onConfirm,
		onDismiss,
		confirmLabel,
		dismissLabel
	}, "TimePickerDialog");
	validateTimePickerProps({
		selection,
		is24Hour,
		variant,
		color,
		colors
	}, "TimePickerDialog");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "timepickerdialog",
		visible,
		numberValue: minuteOfDay(selection),
		variant,
		confirmLabel,
		dismissLabel,
		pickerOptions: {
			is24Hour,
			color,
			colors
		},
		onNativeComposeNodeDialogConfirm: function onNativeComposeNodeDialogConfirm(event) {
			return onConfirm(withMinuteOfDay(selection, event.nativeEvent.value));
		},
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismiss();
		}
	});
}
function BasicAlertDialog(param) {
	var { children, onDismissRequest, properties, ...props } = param;
	validateComposeFamily("dialog", {
		properties,
		onDismissRequest
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "basicalertdialog",
		familyOptions: properties,
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismissRequest === null || onDismissRequest === void 0 ? void 0 : onDismissRequest();
		},
		children
	});
}
function carousel(nodeType) {
	return function(param) {
		var { children, contentPadding, itemSpacing, flingBehavior, userScrollEnabled, maxItemWidth, minSmallItemWidth, maxSmallItemWidth, preferredItemWidth, itemWidth, ...props } = param;
		var options = {
			itemSpacing,
			flingBehavior,
			userScrollEnabled,
			maxItemWidth,
			minSmallItemWidth,
			maxSmallItemWidth,
			preferredItemWidth,
			itemWidth
		};
		validateComposeFamily(nodeType, {
			...options,
			contentPadding
		});
		var padding = typeof contentPadding === "number" ? {
			start: contentPadding,
			end: contentPadding,
			top: contentPadding,
			bottom: contentPadding
		} : contentPadding;
		return /* @__PURE__ */ jsx(ComposeNode, {
			...props,
			nodeType,
			familyOptions: options,
			lazyContentPadding: padding,
			children
		});
	};
}
var HorizontalCenteredHeroCarousel = carousel("centeredherocarousel");
var HorizontalMultiBrowseCarousel = carousel("multibrowsecarousel");
var HorizontalUncontainedCarousel = carousel("uncontainedcarousel");
function dateRangeNode(props, dialog) {
	validateComposeFamily("range", props);
	var { initialStartDate, initialEndDate, onDateRangeSelected, variant, showVariantToggle, showTitle, showHeadline, color, elementColors, selectableDates, ...rest } = props;
	var { onDismissRequest, confirmButtonLabel, dismissButtonLabel, ...nodeProps } = rest;
	return /* @__PURE__ */ jsx(ComposeNode, {
		...nodeProps,
		nodeType: dialog ? "daterangepickerdialog" : "daterangepicker",
		variant,
		confirmLabel: confirmButtonLabel,
		dismissLabel: dismissButtonLabel,
		familyOptions: {
			initialStart: initialStartDate == null ? void 0 : composeRangeDay(new Date(initialStartDate)),
			initialEnd: initialEndDate == null ? void 0 : composeRangeDay(new Date(initialEndDate)),
			showTitle,
			showHeadline
		},
		pickerOptions: {
			minimumDay: (selectableDates === null || selectableDates === void 0 ? void 0 : selectableDates.start) && composeRangeDay(selectableDates.start),
			maximumDay: (selectableDates === null || selectableDates === void 0 ? void 0 : selectableDates.end) && composeRangeDay(selectableDates.end),
			showModeToggle: showVariantToggle,
			color,
			colors: elementColors
		},
		onNativeComposeNodeDateRangeSelected: function onNativeComposeNodeDateRangeSelected(param) {
			var { nativeEvent: { start, end, hasStart, hasEnd } } = param;
			return onDateRangeSelected === null || onDateRangeSelected === void 0 ? void 0 : onDateRangeSelected({
				start: hasStart ? new Date(start) : null,
				end: hasEnd ? new Date(end) : null
			});
		},
		onNativeComposeNodeDialogDismiss: function onNativeComposeNodeDialogDismiss() {
			return onDismissRequest === null || onDismissRequest === void 0 ? void 0 : onDismissRequest();
		}
	});
}
function DateRangePicker(props) {
	return dateRangeNode(props, false);
}
function DateRangePickerDialog(props) {
	assertFunction(props.onDismissRequest, "DateRangePickerDialog onDismissRequest");
	return dateRangeNode(props, true);
}
function ToolbarRoot(param) {
	var { children, variant, colors, ...props } = param;
	validateComposeFamily("toolbar", {
		variant,
		colors
	});
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "horizontalfloatingtoolbar",
		text: variant,
		familyOptions: colors,
		children
	});
}
function ToolbarFab(param) {
	var { children, onPress, ...props } = param;
	if (onPress !== void 0) assertFunction(onPress, "Toolbar FAB onPress");
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "toolbarfabslot",
		slotName: "floatingActionButton",
		onNativeComposeNodeButtonPress: onPress,
		children
	});
}
var HorizontalFloatingToolbar = Object.assign(ToolbarRoot, { FloatingActionButton: ToolbarFab });
function shape(type) {
	return function(param) {
		var { cornerRadii, color, cornerRounding, smoothing, verticesCount, innerRadius, radius, ...props } = param;
		var options = {
			shapeType: type,
			color,
			cornerRounding,
			smoothing,
			verticesCount,
			innerRadius,
			radius,
			...cornerRadii
		};
		validateComposeFamily("shape", options);
		return /* @__PURE__ */ jsx(ComposeNode, {
			...props,
			nodeType: "shape",
			familyOptions: options
		});
	};
}
var Shape = {
	Star: shape("star"),
	PillStar: shape("pillStar"),
	Pill: shape("pill"),
	Circle: shape("circle"),
	Rectangle: shape("rectangle"),
	Polygon: shape("polygon"),
	RoundedCorner: shape("roundedCorner")
};
var nextSyncCallback = 1;
function SyncSwitch(param) {
	var { isOn, enabled = true, onCheckedChangeSync, ...props } = param;
	validateComposeFamily("syncswitch", {
		isOn,
		enabled
	});
	if (onCheckedChangeSync !== void 0 && !isWorkletFunction(onCheckedChangeSync)) throw new Error("SyncSwitch onCheckedChangeSync must be a worklet");
	var [callbackId] = useState(function() {
		return nextSyncCallback++;
	});
	useEffect(function() {
		runOnUISync(function() {
			"worklet";
			var _globals, ___OneComposeCallbacks;
			var globals = globalThis;
			var callbacks = (___OneComposeCallbacks = (_globals = globals).__OneComposeCallbacks) !== null && ___OneComposeCallbacks !== void 0 ? ___OneComposeCallbacks : _globals.__OneComposeCallbacks = {};
			callbacks[callbackId] = onCheckedChangeSync;
		});
		return function() {
			return runOnUISync(function() {
				"worklet";
				var _globalThis___OneComposeCallbacks;
				(_globalThis___OneComposeCallbacks = globalThis.__OneComposeCallbacks) === null || _globalThis___OneComposeCallbacks === void 0 ? true : delete _globalThis___OneComposeCallbacks[callbackId];
			});
		};
	}, [callbackId, onCheckedChangeSync]);
	var value = useSyncValue(isOn);
	return /* @__PURE__ */ jsx(ComposeNode, {
		...props,
		nodeType: "switch",
		value,
		syncStateId: getSyncStateId(isOn),
		disabled: !enabled,
		familyOptions: { syncCallbackId: callbackId },
		onNativeComposeNodeBooleanValueChange: function onNativeComposeNodeBooleanValueChange() {
			return isOn.set(isOn.value);
		}
	});
}
var Compose = {
	BasicAlertDialog,
	HorizontalCenteredHeroCarousel,
	HorizontalMultiBrowseCarousel,
	HorizontalUncontainedCarousel,
	DateRangePicker,
	DateRangePickerDialog,
	HorizontalFloatingToolbar,
	Shape,
	SyncSwitch,
	Column,
	Row,
	Spacer,
	FlowRow,
	Box,
	Badge,
	BadgedBox,
	ListItem,
	Card,
	ElevatedCard,
	OutlinedCard,
	Surface,
	HorizontalDivider,
	VerticalDivider,
	FilterChip,
	AssistChip,
	InputChip,
	SuggestionChip,
	Text,
	Icon,
	Button,
	IconButton,
	FilledIconButton,
	FilledTonalIconButton,
	OutlinedIconButton,
	FloatingActionButton,
	SmallFloatingActionButton,
	LargeFloatingActionButton,
	ExtendedFloatingActionButton,
	ToggleButton,
	IconToggleButton,
	FilledIconToggleButton,
	OutlinedIconToggleButton,
	SingleChoiceSegmentedButtonRow,
	MultiChoiceSegmentedButtonRow,
	SegmentedButton,
	Switch,
	Checkbox,
	RadioButton,
	TextField,
	Slider,
	AlertDialog,
	Dialog,
	LazyColumn,
	LazyRow,
	Image: Image$1,
	Snackbar,
	SnackbarHost: SnackbarHost2,
	ModalBottomSheet: ModalBottomSheet2,
	NavigationBar,
	NavigationBarItem,
	SearchBar,
	DockedSearchBar,
	DropdownMenu,
	DropdownMenuItem,
	ExposedDropdownMenuBox,
	PullToRefreshBox,
	TooltipBox,
	AnimatedVisibility,
	ProgressIndicator,
	LinearProgressIndicator,
	CircularProgressIndicator,
	LinearWavyProgressIndicator,
	CircularWavyProgressIndicator,
	LoadingIndicator,
	ContainedLoadingIndicator,
	DatePicker,
	TimePicker,
	DatePickerDialog,
	TimePickerDialog
};

export { Compose, renderIcon };
//# sourceMappingURL=compose.android.js.map