@sprawlify/primitives 0.0.1

package/dist/machines/pagination/index.mjs

@@ -0,0 +1,411 @@
+import { t as createAnatomy } from "../../create-anatomy-BbDZbHpC.mjs";
+import { vn as dataAttr } from "../../dom-query-DFCRhyj1.mjs";
+import { ot as isNumber, u as createSplitProps } from "../../utils-BZyrxWWR.mjs";
+import { a as createMachine, s as memo } from "../../core-DCFNMTZF.mjs";
+import { t as createProps } from "../../create-props-BnF_vl-E.mjs";
+
+//#region src/machines/pagination/pagination.anatomy.ts
+const anatomy = createAnatomy("pagination").parts("root", "item", "ellipsis", "firstTrigger", "prevTrigger", "nextTrigger", "lastTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/pagination/pagination.dom.ts
+const getRootId = (ctx) => ctx.ids?.root ?? `pagination:${ctx.id}`;
+const getFirstTriggerId = (ctx) => ctx.ids?.firstTrigger ?? `pagination:${ctx.id}:first`;
+const getPrevTriggerId = (ctx) => ctx.ids?.prevTrigger ?? `pagination:${ctx.id}:prev`;
+const getNextTriggerId = (ctx) => ctx.ids?.nextTrigger ?? `pagination:${ctx.id}:next`;
+const getLastTriggerId = (ctx) => ctx.ids?.lastTrigger ?? `pagination:${ctx.id}:last`;
+const getEllipsisId = (ctx, index) => ctx.ids?.ellipsis?.(index) ?? `pagination:${ctx.id}:ellipsis:${index}`;
+const getItemId = (ctx, page) => ctx.ids?.item?.(page) ?? `pagination:${ctx.id}:item:${page}`;
+
+//#endregion
+//#region src/machines/pagination/pagination.utils.ts
+const range = (start, end) => {
+	let length = end - start + 1;
+	return Array.from({ length }, (_, idx) => idx + start);
+};
+const transform = (items) => {
+	return items.map((value) => {
+		if (isNumber(value)) return {
+			type: "page",
+			value
+		};
+		return { type: "ellipsis" };
+	});
+};
+const ELLIPSIS = "ellipsis";
+const getRange = (ctx) => {
+	const { page, totalPages, siblingCount, boundaryCount = 1 } = ctx;
+	if (totalPages <= 0) return [];
+	if (totalPages === 1) return [1];
+	const firstPageIndex = 1;
+	const lastPageIndex = totalPages;
+	const leftSiblingIndex = Math.max(page - siblingCount, firstPageIndex);
+	const rightSiblingIndex = Math.min(page + siblingCount, lastPageIndex);
+	const totalPageNumbers = Math.min(siblingCount * 2 + 3 + boundaryCount * 2, totalPages);
+	if (totalPages <= totalPageNumbers) return range(firstPageIndex, lastPageIndex);
+	const itemCount = totalPageNumbers - 2;
+	const showLeftEllipsis = leftSiblingIndex > firstPageIndex + boundaryCount + 1 && Math.abs(leftSiblingIndex - firstPageIndex) > boundaryCount + 1;
+	const showRightEllipsis = rightSiblingIndex < lastPageIndex - boundaryCount - 1 && Math.abs(lastPageIndex - rightSiblingIndex) > boundaryCount + 1;
+	let pages = [];
+	if (!showLeftEllipsis && showRightEllipsis) {
+		const leftRange = range(1, itemCount);
+		pages.push(...leftRange, ELLIPSIS);
+		pages.push(...range(lastPageIndex - boundaryCount + 1, lastPageIndex));
+	} else if (showLeftEllipsis && !showRightEllipsis) {
+		pages.push(...range(firstPageIndex, firstPageIndex + boundaryCount - 1));
+		pages.push(ELLIPSIS);
+		const rightRange = range(lastPageIndex - itemCount + 1, lastPageIndex);
+		pages.push(...rightRange);
+	} else if (showLeftEllipsis && showRightEllipsis) {
+		pages.push(...range(firstPageIndex, firstPageIndex + boundaryCount - 1));
+		pages.push(ELLIPSIS);
+		const middleRange = range(leftSiblingIndex, rightSiblingIndex);
+		pages.push(...middleRange);
+		pages.push(ELLIPSIS);
+		pages.push(...range(lastPageIndex - boundaryCount + 1, lastPageIndex));
+	} else pages.push(...range(firstPageIndex, lastPageIndex));
+	for (let i = 0; i < pages.length; i++) if (pages[i] === ELLIPSIS) {
+		const prevPage = isNumber(pages[i - 1]) ? pages[i - 1] : 0;
+		if ((isNumber(pages[i + 1]) ? pages[i + 1] : totalPages + 1) - prevPage === 2) pages[i] = prevPage + 1;
+	}
+	return pages;
+};
+const getTransformedRange = (ctx) => transform(getRange(ctx));
+
+//#endregion
+//#region src/machines/pagination/pagination.connect.ts
+function connect(service, normalize) {
+	const { send, scope, prop, computed, context } = service;
+	const totalPages = computed("totalPages");
+	const page = context.get("page");
+	const pageSize = context.get("pageSize");
+	const translations = prop("translations");
+	const count = prop("count");
+	const getPageUrl = prop("getPageUrl");
+	const type = prop("type");
+	const previousPage = computed("previousPage");
+	const nextPage = computed("nextPage");
+	const pageRange = computed("pageRange");
+	const isFirstPage = page === 1;
+	const isLastPage = page === totalPages;
+	return {
+		count,
+		page,
+		pageSize,
+		totalPages,
+		pages: getTransformedRange({
+			page,
+			totalPages,
+			siblingCount: prop("siblingCount"),
+			boundaryCount: prop("boundaryCount")
+		}),
+		previousPage,
+		nextPage,
+		pageRange,
+		slice(data) {
+			return data.slice(pageRange.start, pageRange.end);
+		},
+		setPageSize(size) {
+			send({
+				type: "SET_PAGE_SIZE",
+				size
+			});
+		},
+		setPage(page$1) {
+			send({
+				type: "SET_PAGE",
+				page: page$1
+			});
+		},
+		goToNextPage() {
+			send({ type: "NEXT_PAGE" });
+		},
+		goToPrevPage() {
+			send({ type: "PREVIOUS_PAGE" });
+		},
+		goToFirstPage() {
+			send({ type: "FIRST_PAGE" });
+		},
+		goToLastPage() {
+			send({ type: "LAST_PAGE" });
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				...parts.root.attrs,
+				dir: prop("dir"),
+				"aria-label": translations.rootLabel
+			});
+		},
+		getEllipsisProps(props$1) {
+			return normalize.element({
+				id: getEllipsisId(scope, props$1.index),
+				...parts.ellipsis.attrs,
+				dir: prop("dir")
+			});
+		},
+		getItemProps(props$1) {
+			const index = props$1.value;
+			const isCurrentPage = index === page;
+			return normalize.element({
+				id: getItemId(scope, index),
+				...parts.item.attrs,
+				dir: prop("dir"),
+				"data-index": index,
+				"data-selected": dataAttr(isCurrentPage),
+				"aria-current": isCurrentPage ? "page" : void 0,
+				"aria-label": translations.itemLabel?.({
+					page: index,
+					totalPages
+				}),
+				onClick() {
+					send({
+						type: "SET_PAGE",
+						page: index
+					});
+				},
+				...type === "button" && { type: "button" },
+				...type === "link" && getPageUrl && { href: getPageUrl({
+					page: index,
+					pageSize
+				}) }
+			});
+		},
+		getPrevTriggerProps() {
+			return normalize.element({
+				id: getPrevTriggerId(scope),
+				...parts.prevTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(isFirstPage),
+				"aria-label": translations.prevTriggerLabel,
+				onClick() {
+					send({ type: "PREVIOUS_PAGE" });
+				},
+				...type === "button" && {
+					disabled: isFirstPage,
+					type: "button"
+				},
+				...type === "link" && getPageUrl && previousPage && { href: getPageUrl({
+					page: previousPage,
+					pageSize
+				}) }
+			});
+		},
+		getFirstTriggerProps() {
+			return normalize.element({
+				id: getFirstTriggerId(scope),
+				...parts.firstTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(isFirstPage),
+				"aria-label": translations.firstTriggerLabel,
+				onClick() {
+					send({ type: "FIRST_PAGE" });
+				},
+				...type === "button" && {
+					disabled: isFirstPage,
+					type: "button"
+				},
+				...type === "link" && getPageUrl && { href: getPageUrl({
+					page: 1,
+					pageSize
+				}) }
+			});
+		},
+		getNextTriggerProps() {
+			return normalize.element({
+				id: getNextTriggerId(scope),
+				...parts.nextTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(isLastPage),
+				"aria-label": translations.nextTriggerLabel,
+				onClick() {
+					send({ type: "NEXT_PAGE" });
+				},
+				...type === "button" && {
+					disabled: isLastPage,
+					type: "button"
+				},
+				...type === "link" && getPageUrl && nextPage && { href: getPageUrl({
+					page: nextPage,
+					pageSize
+				}) }
+			});
+		},
+		getLastTriggerProps() {
+			return normalize.element({
+				id: getLastTriggerId(scope),
+				...parts.lastTrigger.attrs,
+				dir: prop("dir"),
+				"data-disabled": dataAttr(isLastPage),
+				"aria-label": translations.lastTriggerLabel,
+				onClick() {
+					send({ type: "LAST_PAGE" });
+				},
+				...type === "button" && {
+					disabled: isLastPage,
+					type: "button"
+				},
+				...type === "link" && getPageUrl && { href: getPageUrl({
+					page: totalPages,
+					pageSize
+				}) }
+			});
+		}
+	};
+}
+
+//#endregion
+//#region src/machines/pagination/pagination.machine.ts
+const machine = createMachine({
+	props({ props: props$1 }) {
+		return {
+			defaultPageSize: 10,
+			siblingCount: 1,
+			boundaryCount: 1,
+			defaultPage: 1,
+			type: "button",
+			count: 1,
+			...props$1,
+			translations: {
+				rootLabel: "pagination",
+				firstTriggerLabel: "first page",
+				prevTriggerLabel: "previous page",
+				nextTriggerLabel: "next page",
+				lastTriggerLabel: "last page",
+				itemLabel({ page, totalPages }) {
+					return `${totalPages > 1 && page === totalPages ? "last page, " : ""}page ${page}`;
+				},
+				...props$1.translations
+			}
+		};
+	},
+	initialState() {
+		return "idle";
+	},
+	context({ prop, bindable, getContext }) {
+		return {
+			page: bindable(() => ({
+				value: prop("page"),
+				defaultValue: prop("defaultPage"),
+				onChange(value) {
+					const context = getContext();
+					prop("onPageChange")?.({
+						page: value,
+						pageSize: context.get("pageSize")
+					});
+				}
+			})),
+			pageSize: bindable(() => ({
+				value: prop("pageSize"),
+				defaultValue: prop("defaultPageSize"),
+				onChange(value) {
+					prop("onPageSizeChange")?.({ pageSize: value });
+				}
+			}))
+		};
+	},
+	watch({ track, context, action }) {
+		track([() => context.get("pageSize")], () => {
+			action(["setPageIfNeeded"]);
+		});
+	},
+	computed: {
+		totalPages: memo(({ prop, context }) => [context.get("pageSize"), prop("count")], ([pageSize, count]) => Math.ceil(count / pageSize)),
+		pageRange: memo(({ context, prop }) => [
+			context.get("page"),
+			context.get("pageSize"),
+			prop("count")
+		], ([page, pageSize, count]) => {
+			const start = (page - 1) * pageSize;
+			return {
+				start,
+				end: Math.min(start + pageSize, count)
+			};
+		}),
+		previousPage: ({ context }) => context.get("page") === 1 ? null : context.get("page") - 1,
+		nextPage: ({ context, computed }) => context.get("page") === computed("totalPages") ? null : context.get("page") + 1,
+		isValidPage: ({ context, computed }) => context.get("page") >= 1 && context.get("page") <= computed("totalPages")
+	},
+	on: {
+		SET_PAGE: {
+			guard: "isValidPage",
+			actions: ["setPage"]
+		},
+		SET_PAGE_SIZE: { actions: ["setPageSize"] },
+		FIRST_PAGE: { actions: ["goToFirstPage"] },
+		LAST_PAGE: { actions: ["goToLastPage"] },
+		PREVIOUS_PAGE: {
+			guard: "canGoToPrevPage",
+			actions: ["goToPrevPage"]
+		},
+		NEXT_PAGE: {
+			guard: "canGoToNextPage",
+			actions: ["goToNextPage"]
+		}
+	},
+	states: { idle: {} },
+	implementations: {
+		guards: {
+			isValidPage: ({ event, computed }) => event.page >= 1 && event.page <= computed("totalPages"),
+			isValidCount: ({ context, event }) => context.get("page") > event.count,
+			canGoToNextPage: ({ context, computed }) => context.get("page") < computed("totalPages"),
+			canGoToPrevPage: ({ context }) => context.get("page") > 1
+		},
+		actions: {
+			setPage({ context, event, computed }) {
+				const page = clampPage(event.page, computed("totalPages"));
+				context.set("page", page);
+			},
+			setPageSize({ context, event }) {
+				context.set("pageSize", event.size);
+			},
+			goToFirstPage({ context }) {
+				context.set("page", 1);
+			},
+			goToLastPage({ context, computed }) {
+				context.set("page", computed("totalPages"));
+			},
+			goToPrevPage({ context, computed }) {
+				context.set("page", (prev) => clampPage(prev - 1, computed("totalPages")));
+			},
+			goToNextPage({ context, computed }) {
+				context.set("page", (prev) => clampPage(prev + 1, computed("totalPages")));
+			},
+			setPageIfNeeded({ context, computed }) {
+				if (computed("isValidPage")) return;
+				context.set("page", 1);
+			}
+		}
+	}
+});
+const clampPage = (page, totalPages) => Math.min(Math.max(page, 1), totalPages);
+
+//#endregion
+//#region src/machines/pagination/pagination.props.ts
+const props = createProps()([
+	"boundaryCount",
+	"count",
+	"dir",
+	"getRootNode",
+	"id",
+	"ids",
+	"onPageChange",
+	"onPageSizeChange",
+	"page",
+	"defaultPage",
+	"pageSize",
+	"defaultPageSize",
+	"siblingCount",
+	"translations",
+	"type",
+	"getPageUrl"
+]);
+const splitProps = createSplitProps(props);
+const itemProps = createProps()(["value", "type"]);
+const splitItemProps = createSplitProps(itemProps);
+const ellipsisProps = createProps()(["index"]);
+const splitEllipsisProps = createSplitProps(ellipsisProps);
+
+//#endregion
+export { anatomy, connect, ellipsisProps, itemProps, machine, props, splitEllipsisProps, splitItemProps, splitProps };

package/dist/machines/password-input/index.cjs

@@ -0,0 +1,228 @@
+const require_create_anatomy = require('../../create-anatomy-CDsIFUXg.cjs');
+const require_dom_query = require('../../dom-query-CWZdWUGp.cjs');
+const require_utils = require('../../utils-_6frwjgJ.cjs');
+const require_core = require('../../core-CQFbMdTl.cjs');
+const require_create_props = require('../../create-props-YKy7JIKj.cjs');
+
+//#region src/machines/password-input/password-input.anatomy.ts
+const anatomy = require_create_anatomy.createAnatomy("password-input").parts("root", "input", "label", "control", "indicator", "visibilityTrigger");
+const parts = anatomy.build();
+
+//#endregion
+//#region src/machines/password-input/password-input.dom.ts
+const getInputId = (ctx) => ctx.ids?.input ?? `password-input:${ctx.id}:input`;
+const getInputEl = (ctx) => ctx.getById(getInputId(ctx));
+
+//#endregion
+//#region src/machines/password-input/password-input.connect.ts
+function connect(service, normalize) {
+	const { scope, prop, context } = service;
+	const visible = context.get("visible");
+	const disabled = !!prop("disabled");
+	const invalid = !!prop("invalid");
+	const readOnly = !!prop("readOnly");
+	const required = !!prop("required");
+	const interactive = !(readOnly || disabled);
+	const translations = prop("translations");
+	return {
+		visible,
+		disabled,
+		invalid,
+		focus() {
+			getInputEl(scope)?.focus();
+		},
+		setVisible(value) {
+			service.send({
+				type: "VISIBILITY.SET",
+				value
+			});
+		},
+		toggleVisible() {
+			service.send({
+				type: "VISIBILITY.SET",
+				value: !visible
+			});
+		},
+		getRootProps() {
+			return normalize.element({
+				...parts.root.attrs,
+				dir: prop("dir"),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-readonly": require_dom_query.dataAttr(readOnly)
+			});
+		},
+		getLabelProps() {
+			return normalize.label({
+				...parts.label.attrs,
+				htmlFor: getInputId(scope),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				"data-required": require_dom_query.dataAttr(required)
+			});
+		},
+		getInputProps() {
+			return normalize.input({
+				...parts.input.attrs,
+				id: getInputId(scope),
+				autoCapitalize: "off",
+				name: prop("name"),
+				required: prop("required"),
+				autoComplete: prop("autoComplete"),
+				spellCheck: false,
+				readOnly,
+				disabled,
+				type: visible ? "text" : "password",
+				"data-state": visible ? "visible" : "hidden",
+				"aria-invalid": require_dom_query.ariaAttr(invalid),
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				...prop("ignorePasswordManagers") ? passwordManagerProps : {}
+			});
+		},
+		getVisibilityTriggerProps() {
+			return normalize.button({
+				...parts.visibilityTrigger.attrs,
+				type: "button",
+				tabIndex: -1,
+				"aria-controls": getInputId(scope),
+				"aria-expanded": visible,
+				"data-readonly": require_dom_query.dataAttr(readOnly),
+				disabled,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-state": visible ? "visible" : "hidden",
+				"aria-label": translations?.visibilityTrigger?.(visible),
+				onPointerDown(event) {
+					if (!require_dom_query.isLeftClick(event)) return;
+					if (!interactive) return;
+					event.preventDefault();
+					service.send({ type: "TRIGGER.CLICK" });
+				}
+			});
+		},
+		getIndicatorProps() {
+			return normalize.element({
+				...parts.indicator.attrs,
+				"aria-hidden": true,
+				"data-state": visible ? "visible" : "hidden",
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-readonly": require_dom_query.dataAttr(readOnly)
+			});
+		},
+		getControlProps() {
+			return normalize.element({
+				...parts.control.attrs,
+				"data-disabled": require_dom_query.dataAttr(disabled),
+				"data-invalid": require_dom_query.dataAttr(invalid),
+				"data-readonly": require_dom_query.dataAttr(readOnly)
+			});
+		}
+	};
+}
+const passwordManagerProps = {
+	"data-1p-ignore": "",
+	"data-lpignore": "true",
+	"data-bwignore": "true",
+	"data-form-type": "other",
+	"data-protonpass-ignore": "true"
+};
+
+//#endregion
+//#region src/machines/password-input/password-input.machine.ts
+const machine = require_core.createMachine({
+	props({ props: props$1 }) {
+		return {
+			id: require_utils.uuid(),
+			defaultVisible: false,
+			autoComplete: "current-password",
+			ignorePasswordManagers: false,
+			...props$1,
+			translations: {
+				visibilityTrigger(visible) {
+					return visible ? "Hide password" : "Show password";
+				},
+				...props$1.translations
+			}
+		};
+	},
+	context({ prop, bindable }) {
+		return { visible: bindable(() => ({
+			value: prop("visible"),
+			defaultValue: prop("defaultVisible"),
+			onChange(value) {
+				prop("onVisibilityChange")?.({ visible: value });
+			}
+		})) };
+	},
+	initialState() {
+		return "idle";
+	},
+	effects: ["trackFormEvents"],
+	states: { idle: { on: {
+		"VISIBILITY.SET": { actions: ["setVisibility"] },
+		"TRIGGER.CLICK": { actions: ["toggleVisibility", "focusInputEl"] }
+	} } },
+	implementations: {
+		actions: {
+			setVisibility({ context, event }) {
+				context.set("visible", event.value);
+			},
+			toggleVisibility({ context }) {
+				context.set("visible", (c) => !c);
+			},
+			focusInputEl({ scope }) {
+				getInputEl(scope)?.focus();
+			}
+		},
+		effects: { trackFormEvents({ scope, send }) {
+			const form = getInputEl(scope)?.form;
+			if (!form) return;
+			const controller = new (scope.getWin()).AbortController();
+			form.addEventListener("reset", (event) => {
+				if (event.defaultPrevented) return;
+				send({
+					type: "VISIBILITY.SET",
+					value: false
+				});
+			}, { signal: controller.signal });
+			form.addEventListener("submit", () => {
+				send({
+					type: "VISIBILITY.SET",
+					value: false
+				});
+			}, { signal: controller.signal });
+			return () => controller.abort();
+		} }
+	}
+});
+
+//#endregion
+//#region src/machines/password-input/password-input.props.ts
+const props = require_create_props.createProps()([
+	"defaultVisible",
+	"dir",
+	"id",
+	"onVisibilityChange",
+	"visible",
+	"ids",
+	"getRootNode",
+	"disabled",
+	"invalid",
+	"required",
+	"readOnly",
+	"translations",
+	"ignorePasswordManagers",
+	"autoComplete",
+	"name"
+]);
+const splitProps = require_utils.createSplitProps(props);
+
+//#endregion
+exports.anatomy = anatomy;
+exports.connect = connect;
+exports.machine = machine;
+exports.props = props;
+exports.splitProps = splitProps;

package/dist/machines/password-input/index.d.cts

@@ -0,0 +1,71 @@
+import { n as AnatomyInstance } from "../../create-anatomy-BGQ8pv8J.cjs";
+import { p as Machine, u as EventObject, y as Service } from "../../types-DejIu60O.cjs";
+import { b as NormalizeProps, r as DirectionProperty, t as CommonProperties, x as PropTypes } from "../../index-Bqw3r34-.cjs";
+
+//#region src/machines/password-input/password-input.anatomy.d.ts
+declare const anatomy: AnatomyInstance<"root" | "input" | "label" | "control" | "indicator" | "visibilityTrigger">;
+//#endregion
+//#region src/machines/password-input/password-input.types.d.ts
+interface VisibilityChangeDetails {
+  visible: boolean;
+}
+type ElementIds = Partial<{
+  input: string;
+  visibilityTrigger: string;
+}>;
+type IntlTranslations = Partial<{
+  visibilityTrigger: ((visible: boolean) => string) | undefined;
+}>;
+interface PasswordInputProps extends DirectionProperty, CommonProperties {
+  defaultVisible?: boolean | undefined;
+  visible?: boolean | undefined;
+  onVisibilityChange?: ((details: VisibilityChangeDetails) => void) | undefined;
+  ids?: ElementIds | undefined;
+  disabled?: boolean | undefined;
+  invalid?: boolean | undefined;
+  readOnly?: boolean | undefined;
+  required?: boolean | undefined;
+  translations?: IntlTranslations | undefined;
+  ignorePasswordManagers?: boolean | undefined;
+  autoComplete?: "current-password" | "new-password" | undefined;
+  name?: string | undefined;
+}
+interface PasswordInputSchema {
+  state: "idle";
+  props: PasswordInputProps;
+  context: {
+    visible: boolean;
+  };
+  event: EventObject;
+  action: string;
+  guard: string;
+  effect: string;
+}
+type PasswordInputService = Service<PasswordInputSchema>;
+type PasswordInputMachine = Machine<PasswordInputSchema>;
+interface PasswordInputApi<T extends PropTypes = PropTypes> {
+  visible: boolean;
+  disabled: boolean;
+  invalid: boolean;
+  focus: VoidFunction;
+  setVisible: (value: boolean) => void;
+  toggleVisible: VoidFunction;
+  getRootProps: () => T["element"];
+  getLabelProps: () => T["label"];
+  getInputProps: () => T["input"];
+  getVisibilityTriggerProps: () => T["button"];
+  getIndicatorProps: () => T["element"];
+  getControlProps: () => T["element"];
+}
+//#endregion
+//#region src/machines/password-input/password-input.connect.d.ts
+declare function connect<T extends PropTypes>(service: PasswordInputService, normalize: NormalizeProps<T>): PasswordInputApi<T>;
+//#endregion
+//#region src/machines/password-input/password-input.machine.d.ts
+declare const machine: Machine<PasswordInputSchema>;
+//#endregion
+//#region src/machines/password-input/password-input.props.d.ts
+declare const props: (keyof PasswordInputProps)[];
+declare const splitProps: <Props extends Partial<PasswordInputProps>>(props: Props) => [Partial<PasswordInputProps>, Omit<Props, keyof PasswordInputProps>];
+//#endregion
+export { type PasswordInputApi as Api, type ElementIds, type IntlTranslations, type PasswordInputMachine as Machine, type PasswordInputProps as Props, type PasswordInputService as Service, type VisibilityChangeDetails, anatomy, connect, machine, props, splitProps };