@wirekyt/dom 0.0.1 → 0.0.2

package/dist/machines/tabs/index.cjs

@@ -0,0 +1,542 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_create_anatomy = require("../../create-anatomy-BwDn25ph.cjs");
+const require_dom_query = require("../../dom-query-CQzY93XU.cjs");
+const require_platform = require("../../platform-BZS-dkZN.cjs");
+const require_event = require("../../event-DDz-mMhM.cjs");
+const require_tabbable = require("../../tabbable-Bz1-1GAY.cjs");
+const require_raf = require("../../raf-BSDcY4UD.cjs");
+const require_navigate = require("../../navigate-uJG-006f.cjs");
+const require_array = require("../../array-BGtygd0o.cjs");
+const require_equal = require("../../equal-C927y7MN.cjs");
+const require_utils = require("../../utils-BH-oBBz2.cjs");
+const require_core = require("../../core-BNMw-JId.cjs");
+const require_create_props = require("../../create-props-CjLx2oS8.cjs");
+//#region src/machines/tabs/anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
+const parts = anatomy.build();
+//#endregion
+//#region src/machines/tabs/dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
+const getListId = (ctx) => ctx.ids?.list ?? `tabs:${ctx.id}:list`;
+const getContentId = (ctx, value) => ctx.ids?.content?.(value) ?? `tabs:${ctx.id}:content-${value}`;
+const getTriggerId = (ctx, value) => ctx.ids?.trigger?.(value) ?? `tabs:${ctx.id}:trigger-${value}`;
+const getIndicatorId = (ctx) => ctx.ids?.indicator ?? `tabs:${ctx.id}:indicator`;
+const getListEl = (ctx) => ctx.getById(getListId(ctx));
+const getContentEl = (ctx, value) => ctx.getById(getContentId(ctx, value));
+const getTriggerEl = (ctx, value) => value != null ? ctx.getById(getTriggerId(ctx, value)) : null;
+const getIndicatorEl = (ctx) => ctx.getById(getIndicatorId(ctx));
+const getElements = (ctx) => {
+	const selector = `[role=tab][data-ownedby='${CSS.escape(getListId(ctx))}']:not([disabled])`;
+	return require_dom_query.queryAll(getListEl(ctx), selector);
+};
+const getFirstTriggerEl = (ctx) => require_array.first(getElements(ctx));
+const getLastTriggerEl = (ctx) => require_array.last(getElements(ctx));
+const getNextTriggerEl = (ctx, opts) => require_dom_query.nextById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+const getPrevTriggerEl = (ctx, opts) => require_dom_query.prevById(getElements(ctx), getTriggerId(ctx, opts.value), opts.loopFocus);
+const getOffsetRect = (el) => ({
+	x: el?.offsetLeft ?? 0,
+	y: el?.offsetTop ?? 0,
+	width: el?.offsetWidth ?? 0,
+	height: el?.offsetHeight ?? 0
+});
+const getRectByValue = (ctx, value) => {
+	const tab = require_dom_query.itemById(getElements(ctx), getTriggerId(ctx, value));
+	return getOffsetRect(tab);
+};
+//#endregion
+//#region src/machines/tabs/connect.ts
+function connect(service, normalize) {
+	const { state, send, context, prop, scope } = service;
+	const translations = prop("translations");
+	const focused = state.matches("focused");
+	const isVertical = prop("orientation") === "vertical";
+	const isHorizontal = prop("orientation") === "horizontal";
+	const composite = prop("composite");
+	function getTriggerState(props) {
+		return {
+			selected: context.get("value") === props.value,
+			focused: context.get("focusedValue") === props.value,
+			disabled: !!props.disabled
+		};
+	}
+	return {
+		value: context.get("value"),
+		focusedValue: context.get("focusedValue"),
+		setValue(value) {
+			send({
+				type: "SET_VALUE",
+				value
+			});
+		},
+		clearValue() {
+			send({ type: "CLEAR_VALUE" });
+		},
+		setIndicatorRect(value) {
+			const id = getTriggerId(scope, value);
+			send({
+				type: "SET_INDICATOR_RECT",
+				id
+			});
+		},
+		syncTabIndex() {
+			send({ type: "SYNC_TAB_INDEX" });
+		},
+		selectNext(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectNext"
+			});
+			send({
+				type: "ARROW_NEXT",
+				src: "selectNext"
+			});
+		},
+		selectPrev(fromValue) {
+			send({
+				type: "TAB_FOCUS",
+				value: fromValue,
+				src: "selectPrev"
+			});
+			send({
+				type: "ARROW_PREV",
+				src: "selectPrev"
+			});
+		},
+		focus() {
+			const value = context.get("value");
+			if (!value) return;
+			getTriggerEl(scope, value)?.focus();
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				id: getRootId(scope),
+				"data-orientation": prop("orientation"),
+				"data-focus": require_dom_query.dataAttr(focused),
+				dir: prop("dir")
+			});
+		},
+		getListProps() {
+			return normalize.element({
+				...parts.list.attrs,
+				id: getListId(scope),
+				role: "tablist",
+				dir: prop("dir"),
+				"data-focus": require_dom_query.dataAttr(focused),
+				"aria-orientation": prop("orientation"),
+				"data-orientation": prop("orientation"),
+				"aria-label": translations?.listLabel,
+				onKeyDown(event) {
+					if (event.defaultPrevented) return;
+					if (require_event.isComposingEvent(event)) return;
+					if (!require_dom_query.contains(event.currentTarget, require_event.getEventTarget(event))) return;
+					const exec = {
+						ArrowDown() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowDown"
+							});
+						},
+						ArrowUp() {
+							if (isHorizontal) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowUp"
+							});
+						},
+						ArrowLeft() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_PREV",
+								key: "ArrowLeft"
+							});
+						},
+						ArrowRight() {
+							if (isVertical) return;
+							send({
+								type: "ARROW_NEXT",
+								key: "ArrowRight"
+							});
+						},
+						Home() {
+							send({ type: "HOME" });
+						},
+						End() {
+							send({ type: "END" });
+						}
+					}[require_event.getEventKey(event, {
+						dir: prop("dir"),
+						orientation: prop("orientation")
+					})];
+					if (exec) {
+						event.preventDefault();
+						exec(event);
+						return;
+					}
+				}
+			});
+		},
+		getTriggerState,
+		getTriggerProps(props) {
+			const { value, disabled } = props;
+			const triggerState = getTriggerState(props);
+			return normalize.button({
+				...parts.trigger.attrs,
+				role: "tab",
+				type: "button",
+				disabled,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"aria-disabled": disabled,
+				"data-value": value,
+				"aria-selected": triggerState.selected,
+				"data-selected": require_dom_query.dataAttr(triggerState.selected),
+				"data-focus": require_dom_query.dataAttr(triggerState.focused),
+				"aria-controls": triggerState.selected ? getContentId(scope, value) : void 0,
+				"data-ownedby": getListId(scope),
+				"data-ssr": require_dom_query.dataAttr(context.get("ssr")),
+				id: getTriggerId(scope, value),
+				tabIndex: triggerState.selected && composite ? 0 : -1,
+				onFocus() {
+					send({
+						type: "TAB_FOCUS",
+						value
+					});
+				},
+				onBlur(event) {
+					if (event.relatedTarget?.getAttribute("role") !== "tab") send({ type: "TAB_BLUR" });
+				},
+				onClick(event) {
+					if (event.defaultPrevented) return;
+					if (require_event.isOpeningInNewTab(event)) return;
+					if (disabled) return;
+					if (require_platform.isSafari()) event.currentTarget.focus();
+					send({
+						type: "TAB_CLICK",
+						value
+					});
+				}
+			});
+		},
+		getContentProps(props) {
+			const { value } = props;
+			const selected = context.get("value") === value;
+			return normalize.element({
+				...parts.content.attrs,
+				dir: prop("dir"),
+				id: getContentId(scope, value),
+				tabIndex: composite ? 0 : -1,
+				"aria-labelledby": getTriggerId(scope, value),
+				role: "tabpanel",
+				"data-ownedby": getListId(scope),
+				"data-selected": require_dom_query.dataAttr(selected),
+				"data-orientation": prop("orientation"),
+				hidden: !selected
+			});
+		},
+		getIndicatorProps() {
+			const rect = context.get("indicatorRect");
+			const animateIndicator = context.get("animateIndicator");
+			return normalize.element({
+				id: getIndicatorId(scope),
+				...parts.indicator.attrs,
+				dir: prop("dir"),
+				"data-orientation": prop("orientation"),
+				hidden: isRectEmpty(rect),
+				onTransitionEnd(event) {
+					if (require_event.getEventTarget(event) !== event.currentTarget) return;
+					send({ type: "INDICATOR_TRANSITION_END" });
+				},
+				style: {
+					"--transition-property": "left, right, top, bottom, width, height",
+					"--left": require_utils.toPx(rect?.x),
+					"--top": require_utils.toPx(rect?.y),
+					"--width": require_utils.toPx(rect?.width),
+					"--height": require_utils.toPx(rect?.height),
+					position: "absolute",
+					willChange: animateIndicator ? "var(--transition-property)" : "auto",
+					transitionProperty: animateIndicator ? "var(--transition-property)" : "none",
+					transitionDuration: animateIndicator ? "var(--transition-duration, 150ms)" : "0ms",
+					transitionTimingFunction: "var(--transition-timing-function)",
+					[isHorizontal ? "left" : "top"]: isHorizontal ? "var(--left)" : "var(--top)"
+				}
+			});
+		}
+	};
+}
+const isRectEmpty = (rect) => rect == null || rect.width === 0 && rect.height === 0 && rect.x === 0 && rect.y === 0;
+//#endregion
+//#region src/machines/tabs/machine.ts
+const { createMachine } = require_core.setup();
+const machine = createMachine({
+	props({ props }) {
+		return {
+			dir: "ltr",
+			orientation: "horizontal",
+			activationMode: "automatic",
+			loopFocus: true,
+			composite: true,
+			navigate(details) {
+				require_navigate.clickIfLink(details.node);
+			},
+			defaultValue: null,
+			...props
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable }) {
+		return {
+			value: bindable(() => ({
+				defaultValue: prop("defaultValue"),
+				value: prop("value"),
+				onChange(value) {
+					prop("onValueChange")?.({ value });
+				}
+			})),
+			focusedValue: bindable(() => ({
+				defaultValue: prop("value") || prop("defaultValue"),
+				sync: true,
+				onChange(value) {
+					prop("onFocusChange")?.({ focusedValue: value });
+				}
+			})),
+			ssr: bindable(() => ({ defaultValue: true })),
+			indicatorRect: bindable(() => ({ defaultValue: null })),
+			animateIndicator: bindable(() => ({ defaultValue: false }))
+		};
+	},
+	refs() {
+		return {
+			indicatorCleanup: null,
+			prevValue: null
+		};
+	},
+	watch({ context, prop, track, action }) {
+		track([() => context.get("value")], () => {
+			action([
+				"syncIndicatorAnimation",
+				"syncIndicatorRect",
+				"syncTabIndex",
+				"navigateIfNeeded"
+			]);
+		});
+		track([() => prop("dir"), () => prop("orientation")], () => {
+			action(["syncIndicatorRect"]);
+		});
+	},
+	on: {
+		SET_VALUE: { actions: ["setValue"] },
+		CLEAR_VALUE: { actions: ["clearValue"] },
+		SET_INDICATOR_RECT: { actions: ["setIndicatorRect"] },
+		SYNC_TAB_INDEX: { actions: ["syncTabIndex"] },
+		INDICATOR_TRANSITION_END: { actions: ["clearIndicatorAnimation"] }
+	},
+	entry: [
+		"syncPrevValue",
+		"syncIndicatorRect",
+		"syncTabIndex",
+		"syncSsr"
+	],
+	exit: ["cleanupObserver"],
+	states: {
+		idle: { on: {
+			TAB_FOCUS: {
+				target: "focused",
+				actions: ["setFocusedValue"]
+			},
+			TAB_CLICK: {
+				target: "focused",
+				actions: ["setFocusedValue", "setValue"]
+			}
+		} },
+		focused: { on: {
+			TAB_CLICK: { actions: ["setFocusedValue", "setValue"] },
+			ARROW_PREV: [{
+				guard: "selectOnFocus",
+				actions: ["focusPrevTab", "selectFocusedTab"]
+			}, { actions: ["focusPrevTab"] }],
+			ARROW_NEXT: [{
+				guard: "selectOnFocus",
+				actions: ["focusNextTab", "selectFocusedTab"]
+			}, { actions: ["focusNextTab"] }],
+			HOME: [{
+				guard: "selectOnFocus",
+				actions: ["focusFirstTab", "selectFocusedTab"]
+			}, { actions: ["focusFirstTab"] }],
+			END: [{
+				guard: "selectOnFocus",
+				actions: ["focusLastTab", "selectFocusedTab"]
+			}, { actions: ["focusLastTab"] }],
+			TAB_FOCUS: { actions: ["setFocusedValue"] },
+			TAB_BLUR: {
+				target: "idle",
+				actions: ["clearFocusedValue"]
+			}
+		} }
+	},
+	implementations: {
+		guards: { selectOnFocus: ({ prop }) => prop("activationMode") === "automatic" },
+		actions: {
+			selectFocusedTab({ context, prop }) {
+				require_raf.raf(() => {
+					const focusedValue = context.get("focusedValue");
+					if (!focusedValue) return;
+					const value = prop("deselectable") && context.get("value") === focusedValue ? null : focusedValue;
+					context.set("value", value);
+				});
+			},
+			setFocusedValue({ context, event, flush }) {
+				if (event.value == null) return;
+				flush(() => {
+					context.set("focusedValue", event.value);
+				});
+			},
+			clearFocusedValue({ context }) {
+				context.set("focusedValue", null);
+			},
+			setValue({ context, event, prop }) {
+				const nullable = prop("deselectable") && context.get("value") === context.get("focusedValue");
+				context.set("value", nullable ? null : event.value);
+			},
+			clearValue({ context }) {
+				context.set("value", null);
+			},
+			focusFirstTab({ scope }) {
+				require_raf.raf(() => {
+					getFirstTriggerEl(scope)?.focus();
+				});
+			},
+			focusLastTab({ scope }) {
+				require_raf.raf(() => {
+					getLastTriggerEl(scope)?.focus();
+				});
+			},
+			focusNextTab({ context, prop, scope, event }) {
+				const focusedValue = event.value ?? context.get("focusedValue");
+				if (!focusedValue) return;
+				const triggerEl = getNextTriggerEl(scope, {
+					value: focusedValue,
+					loopFocus: prop("loopFocus")
+				});
+				require_raf.raf(() => {
+					if (prop("composite")) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) context.set("focusedValue", triggerEl.dataset.value);
+				});
+			},
+			focusPrevTab({ context, prop, scope, event }) {
+				const focusedValue = event.value ?? context.get("focusedValue");
+				if (!focusedValue) return;
+				const triggerEl = getPrevTriggerEl(scope, {
+					value: focusedValue,
+					loopFocus: prop("loopFocus")
+				});
+				require_raf.raf(() => {
+					if (prop("composite")) triggerEl?.focus();
+					else if (triggerEl?.dataset.value != null) context.set("focusedValue", triggerEl.dataset.value);
+				});
+			},
+			syncTabIndex({ context, scope }) {
+				require_raf.raf(() => {
+					const value = context.get("value");
+					if (!value) return;
+					const contentEl = getContentEl(scope, value);
+					if (!contentEl) return;
+					if (require_tabbable.getFocusables(contentEl).length > 0) contentEl.removeAttribute("tabindex");
+					else contentEl.setAttribute("tabindex", "0");
+				});
+			},
+			cleanupObserver({ refs }) {
+				const cleanup = refs.get("indicatorCleanup");
+				if (cleanup) cleanup();
+			},
+			setIndicatorRect({ context, event, scope }) {
+				const value = event.id ?? context.get("value");
+				if (!getIndicatorEl(scope)) return;
+				if (!value) return;
+				if (!getTriggerEl(scope, value)) return;
+				context.set("indicatorRect", getRectByValue(scope, value));
+			},
+			syncSsr({ context }) {
+				context.set("ssr", false);
+			},
+			syncPrevValue({ context, refs }) {
+				refs.set("prevValue", context.get("value"));
+			},
+			syncIndicatorAnimation({ context, refs }) {
+				const prevValue = refs.get("prevValue");
+				const nextValue = context.get("value");
+				const animate = prevValue != null && nextValue != null && prevValue !== nextValue;
+				context.set("animateIndicator", animate);
+				refs.set("prevValue", nextValue);
+			},
+			clearIndicatorAnimation({ context }) {
+				context.set("animateIndicator", false);
+			},
+			syncIndicatorRect({ context, refs, scope }) {
+				const cleanup = refs.get("indicatorCleanup");
+				if (cleanup) cleanup();
+				if (!getIndicatorEl(scope)) return;
+				const exec = () => {
+					const triggerEl = getTriggerEl(scope, context.get("value"));
+					if (!triggerEl) return;
+					const rect = getOffsetRect(triggerEl);
+					context.set("indicatorRect", (prev) => require_equal.isEqual(prev, rect) ? prev : rect);
+				};
+				exec();
+				const triggerEls = getElements(scope);
+				const listEl = getListEl(scope);
+				const indicatorCleanup = require_utils.callAll(...triggerEls.map((el) => require_dom_query.resizeObserverBorderBox.observe(el, exec)), ...listEl ? [require_dom_query.resizeObserverBorderBox.observe(listEl, exec)] : []);
+				refs.set("indicatorCleanup", indicatorCleanup);
+			},
+			navigateIfNeeded({ context, prop, scope }) {
+				const value = context.get("value");
+				if (!value) return;
+				const triggerEl = getTriggerEl(scope, value);
+				if (require_dom_query.isAnchorElement(triggerEl)) prop("navigate")?.({
+					value,
+					node: triggerEl,
+					href: triggerEl.href
+				});
+			}
+		}
+	}
+});
+//#endregion
+//#region src/machines/tabs/props.ts
+const props = require_create_props.createProps()([
+	"activationMode",
+	"composite",
+	"deselectable",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"loopFocus",
+	"navigate",
+	"onFocusChange",
+	"onValueChange",
+	"orientation",
+	"translations",
+	"value",
+	"defaultValue"
+]);
+const splitProps = require_utils.createSplitProps(props);
+const triggerProps = require_create_props.createProps()(["disabled", "value"]);
+const splitTriggerProps = require_utils.createSplitProps(triggerProps);
+const contentProps = require_create_props.createProps()(["value"]);
+const splitContentProps = require_utils.createSplitProps(contentProps);
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.contentProps = contentProps;
+exports.machine = machine;
+exports.props = props;
+exports.splitContentProps = splitContentProps;
+exports.splitProps = splitProps;
+exports.splitTriggerProps = splitTriggerProps;
+exports.triggerProps = triggerProps;

package/dist/machines/tabs/index.d.cts

@@ -0,0 +1,113 @@
+import { n as AnatomyInstance } from "../../anatomy-DMuSMbOP.cjs";
+import { M as Service, S as EventObject, T as Machine } from "../../index-BKgxIVbE.cjs";
+import { b as PropTypes, g as RequiredBy, m as Rect, r as DirectionProperty, t as CommonProperties, y as NormalizeProps } from "../../index-BXfunVyD.cjs";
+import "../../index-BF6G2RiC.cjs";
+//#region src/machines/tabs/anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "list" | "trigger" | "content" | "indicator">;
+//#endregion
+//#region src/machines/tabs/types.d.ts
+interface ValueChangeDetails {
+  value: string;
+}
+interface FocusChangeDetails {
+  focusedValue: string;
+}
+interface NavigateDetails {
+  value: string;
+  node: HTMLAnchorElement;
+  href: string;
+}
+interface IntlTranslations {
+  listLabel?: string | undefined;
+}
+type ElementIds = Partial<{
+  root: string;
+  trigger: (value: string) => string;
+  list: string;
+  content: (value: string) => string;
+  indicator: string;
+}>;
+interface TabsProps extends DirectionProperty, CommonProperties {
+  ids?: ElementIds | undefined;
+  translations?: IntlTranslations | undefined;
+  loopFocus?: boolean | undefined;
+  value?: string | null | undefined;
+  defaultValue?: string | null | undefined;
+  orientation?: "horizontal" | "vertical" | undefined;
+  activationMode?: "manual" | "automatic" | undefined;
+  onValueChange?: ((details: ValueChangeDetails) => void) | undefined;
+  onFocusChange?: ((details: FocusChangeDetails) => void) | undefined;
+  composite?: boolean | undefined;
+  deselectable?: boolean | undefined;
+  navigate?: ((details: NavigateDetails) => void) | null | undefined;
+}
+type PropsWithDefault = "orientation" | "activationMode" | "loopFocus";
+type TabsSchema = {
+  state: "idle" | "focused";
+  props: RequiredBy<TabsProps, PropsWithDefault>;
+  context: {
+    ssr: boolean;
+    value: string | null;
+    focusedValue: string | null;
+    indicatorRect: Rect | null;
+    animateIndicator: boolean;
+  };
+  refs: {
+    indicatorCleanup: VoidFunction | null | undefined;
+    prevValue: string | null;
+  };
+  computed: {
+    focused: boolean;
+  };
+  action: string;
+  guard: string;
+  effect: string;
+  event: EventObject;
+};
+type TabsService = Service<TabsSchema>;
+type TabsMachine = Machine<TabsSchema>;
+interface TriggerProps {
+  value: string;
+  disabled?: boolean | undefined;
+}
+interface TriggerState {
+  selected: boolean;
+  focused: boolean;
+  disabled: boolean;
+}
+interface ContentProps {
+  value: string;
+}
+interface TabsApi<T extends PropTypes = PropTypes> {
+  value: string | null;
+  focusedValue: string | null;
+  setValue: (value: string) => void;
+  clearValue: VoidFunction;
+  setIndicatorRect: (value: string) => void;
+  syncTabIndex: VoidFunction;
+  focus: VoidFunction;
+  selectNext: (fromValue?: string) => void;
+  selectPrev: (fromValue?: string) => void;
+  getTriggerState: (props: TriggerProps) => TriggerState;
+  getRootProps: () => T["element"];
+  getListProps: () => T["element"];
+  getTriggerProps: (props: TriggerProps) => T["button"];
+  getContentProps: (props: ContentProps) => T["element"];
+  getIndicatorProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/tabs/connect.d.ts
+declare function connect<T extends PropTypes>(service: Service<TabsSchema>, normalize: NormalizeProps<T>): TabsApi<T>;
+//#endregion
+//#region src/machines/tabs/machine.d.ts
+declare const machine: Machine<TabsSchema>;
+//#endregion
+//#region src/machines/tabs/props.d.ts
+declare const props: (keyof TabsProps)[];
+declare const splitProps: <Props extends Partial<TabsProps>>(props: Props) => [Partial<TabsProps>, Omit<Props, keyof TabsProps>];
+declare const triggerProps: (keyof TriggerProps)[];
+declare const splitTriggerProps: <Props extends TriggerProps>(props: Props) => [TriggerProps, Omit<Props, keyof TriggerProps>];
+declare const contentProps: "value"[];
+declare const splitContentProps: <Props extends ContentProps>(props: Props) => [ContentProps, Omit<Props, "value">];
+//#endregion
+export { type TabsApi as Api, type ContentProps, type ElementIds, type FocusChangeDetails, type IntlTranslations, type TabsMachine as Machine, type NavigateDetails, type TabsProps as Props, type TabsService as Service, type TriggerProps, type TriggerState, type ValueChangeDetails, anatomy, connect, contentProps, machine, props, splitContentProps, splitProps, splitTriggerProps, triggerProps };