@monimesl/dot-renderer-react 0.1.0-alpha.10

package/dist/react-host/19.3.0/react.js

@@ -0,0 +1,3 @@
+import { React } from './react-host.js';
+export default React;
+export const { Activity, Children, Component, Fragment, Profiler, PureComponent, StrictMode, Suspense, ViewTransition, __CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, __COMPILER_RUNTIME, act, addTransitionType, cache, cacheSignal, captureOwnerStack, cloneElement, createContext, createElement, createRef, forwardRef, isValidElement, lazy, memo, startTransition, unstable_useCacheRefresh, use, useActionState, useCallback, useContext, useDebugValue, useDeferredValue, useEffect, useEffectEvent, useId, useImperativeHandle, useInsertionEffect, useLayoutEffect, useMemo, useOptimistic, useReducer, useRef, useState, useSyncExternalStore, useTransition, version } = React;

package/dist/renderer.d.ts

@@ -0,0 +1,17 @@
+import { Wrapper } from "./root.js";
+import { BuiltinReactComponents } from "./types.js";
+import { JSXElementConstructor } from "react";
+import { Renderer } from "@monimesl/dot-webview";
+//#region src/renderer.d.ts
+type ComponentImplementations = Readonly<Record<string, JSXElementConstructor<never>>>;
+export interface ReactRendererOptions {
+  components?: Partial<BuiltinReactComponents> & ComponentImplementations;
+  wrapper?: Wrapper | undefined;
+}
+export interface CreateReactRendererOptions {
+  components: ComponentImplementations;
+  wrapper?: Wrapper | undefined;
+}
+export declare function createReactRenderer({ components, wrapper }: CreateReactRendererOptions): Renderer;
+export declare function reactRenderer({ components, wrapper }?: ReactRendererOptions): Renderer;
+//#endregion

package/dist/renderer.js

@@ -0,0 +1,33 @@
+import { components_exports } from "./components/index.js";
+import { Root } from "./root.js";
+import { createRoot } from "react-dom/client";
+import { jsx } from "react/jsx-runtime";
+//#region src/renderer.tsx
+const builtins = components_exports;
+function createReactRenderer({ components, wrapper }) {
+	const registry = components;
+	return {
+		name: "react",
+		mount(container, page, dotContext) {
+			const root = createRoot(container);
+			root.render(/* @__PURE__ */ jsx(Root, {
+				page,
+				dotContext,
+				components: registry,
+				wrapper
+			}));
+			return () => root.unmount();
+		}
+	};
+}
+function reactRenderer({ components = {}, wrapper } = {}) {
+	return createReactRenderer({
+		components: {
+			...builtins,
+			...components
+		},
+		wrapper
+	});
+}
+//#endregion
+export { createReactRenderer, reactRenderer };

package/dist/root.d.ts

@@ -0,0 +1,10 @@
+import "./page-root.js";
+import { Theme } from "@monimesl/dot-core";
+import { ComponentType, ReactNode } from "react";
+import "@monimesl/dot-webview";
+//#region src/root.d.ts
+export type Wrapper = ComponentType<{
+  theme: Theme;
+  children: ReactNode;
+}>;
+//#endregion

package/dist/root.js

@@ -0,0 +1,51 @@
+import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { PortalContainerContext } from "./portal.js";
+import { PageRoot } from "./page-root.js";
+import { useMemo, useState, useSyncExternalStore } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/root.tsx
+function Root({ page, dotContext, components, wrapper: Wrapper }) {
+	const theme = useSyncExternalStore(dotContext.theme.subscribe, dotContext.theme.get);
+	const systemContext = useSyncExternalStore(dotContext.systemContext.subscribe, dotContext.systemContext.get);
+	const resolved = useMemo(() => resolveTheme(theme, systemContext.scheme), [theme, systemContext.scheme]);
+	const [rootElement, setRootElement] = useState(null);
+	const content = /* @__PURE__ */ jsx(PageRoot, {
+		page,
+		components
+	});
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: resolved,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setRootElement,
+			className: "dot-theme-root",
+			"data-dot-scheme": resolved.scheme,
+			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+				value: rootElement,
+				children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
+					theme: {
+						...theme,
+						scheme: resolved.scheme
+					},
+					children: content
+				}) : /* @__PURE__ */ jsx(DefaultSurface, { children: content })
+			})
+		})
+	});
+}
+function DefaultSurface({ children }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-surface",
+		style: {
+			minHeight: "100vh",
+			display: "flex",
+			flexDirection: "column",
+			background: colors.background,
+			color: colors.text,
+			fontFamily: FONT_FAMILY
+		},
+		children
+	});
+}
+//#endregion
+export { Root };

package/dist/styles.css

@@ -0,0 +1,95 @@
+/*
+ * Dot's stylesheet, for what inline styles can't do, such as pseudo-elements, keyframes and
+ * rules for every element. Global rules sit in the lowest layer, so they never override a
+ * component's own styles. Component rules stay outside the layers.
+ */
+
+@layer base {
+  .dot-theme-root,
+  .dot-theme-root *,
+  .dot-theme-root ::before,
+  .dot-theme-root ::after {
+    box-sizing: border-box;
+  }
+
+  .dot-theme-root :is(button, input, select, textarea) {
+    font: inherit;
+  }
+
+  [data-dot-scheme='light'] {
+    color-scheme: light;
+  }
+
+  [data-dot-scheme='dark'] {
+    color-scheme: dark;
+  }
+}
+
+/* Skeleton: pulses down to 40% every 1.2s. */
+@keyframes dot-skeleton-pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+}
+
+/* Image: no wider than the space it's given, unless a Scroll lets it keep its own width. */
+.dot-image {
+  display: block;
+  max-width: 100%;
+}
+
+/* List: a full-width line under each row but the last, in the color the list passes. */
+.dot-list > .dot-list-item:not(:last-child) {
+  border-bottom: 1px solid var(--dot-list-divider);
+}
+
+/* Scroll: a row that scrolls sideways with the finger, without a scroll bar. */
+.dot-scroll {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  overflow-x: auto;
+  overflow-y: hidden;
+  overscroll-behavior-x: contain;
+  scrollbar-width: none;
+}
+
+.dot-scroll::-webkit-scrollbar {
+  display: none;
+}
+
+/* Each child keeps its own width. A View is as wide as its widest fixed-size child. Children are
+   styled here instead of wrapped, because a For loop's items reach the row as one child. */
+.dot-scroll > * {
+  flex: 0 0 auto;
+  width: min-content;
+  scroll-snap-align: var(--dot-scroll-snap);
+}
+
+/* A picture's own width sets its item's width. With max-width: 100% it would count for nothing. */
+.dot-scroll .dot-image {
+  max-width: none;
+}
+
+/* Sheet: slides up over a dimmed page, and back down when it closes. Base UI marks the first and
+   last frames, and waits for these transitions before it removes the sheet. */
+.dot-sheet-backdrop {
+  transition: opacity 0.2s;
+}
+
+.dot-sheet {
+  transition: transform 0.2s ease-out;
+}
+
+.dot-sheet-backdrop:is([data-starting-style], [data-ending-style]) {
+  opacity: 0;
+}
+
+.dot-sheet:is([data-starting-style], [data-ending-style]) {
+  transform: translateY(100%);
+}

package/dist/theme.d.ts

@@ -0,0 +1,25 @@
+import { ColorScheme, Theme, ThemeShape } from "@monimesl/dot-core";
+//#region src/theme.d.ts
+export interface ResolvedColors {
+  primary: string;
+  onPrimary: string;
+  background: string;
+  surface: string;
+  text: string;
+  subtle: string;
+  muted: string;
+  border: string;
+  info: string;
+  success: string;
+  warning: string;
+  danger: string;
+}
+export interface ResolvedTheme {
+  scheme: ColorScheme;
+  colors: ResolvedColors;
+  shape: ThemeShape;
+  radius: number;
+}
+export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme): ResolvedTheme;
+export declare function useTheme(): ResolvedTheme;
+//#endregion

package/dist/theme.js

@@ -0,0 +1,84 @@
+import { contrast, darken } from "./color.js";
+import { createContext, useContext } from "react";
+//#region src/theme.ts
+const FONT_FAMILY = "system-ui, sans-serif";
+const SHAPE_RADIUS = {
+	square: 0,
+	subtle: 4,
+	soft: 12,
+	rounded: 20
+};
+const DEFAULT_COLORS = {
+	light: {
+		primary: "#1c1c1e",
+		background: "#f2f2f2",
+		surface: "#ffffff",
+		text: "#111111",
+		subtle: "#8e8e93",
+		muted: "#e9e9eb",
+		border: "#e9e9eb",
+		info: "#0a64d6",
+		success: "#1a8a4a",
+		warning: "#b25e00",
+		danger: "#d0312d"
+	},
+	dark: {
+		primary: "#f5f5f5",
+		background: "#121212",
+		surface: "#1e1e1e",
+		text: "#f5f5f5",
+		subtle: "#8e8e93",
+		muted: "#2c2c2e",
+		border: "#2a2a2c",
+		info: "#4c9dff",
+		success: "#3ecf72",
+		warning: "#ffb340",
+		danger: "#ff6961"
+	}
+};
+const MOST_DARKENING = 15;
+function resolveTheme(theme, systemScheme) {
+	const scheme = !theme.scheme || theme.scheme === "system" ? systemScheme : theme.scheme;
+	const defaults = DEFAULT_COLORS[scheme];
+	const colors = theme.colors ?? {};
+	const pick = (color, fallback) => color?.[scheme] ?? fallback;
+	const shape = theme.shape ?? "soft";
+	const surface = pick(colors.surface, defaults.surface);
+	const text = pick(colors.text, defaults.text);
+	const primary = pick(colors.primary, defaults.primary);
+	return {
+		scheme,
+		colors: {
+			...defaults,
+			...primaryAndOnPrimary(primary, surface, text, scheme),
+			background: pick(colors.background, defaults.background),
+			surface,
+			text
+		},
+		shape,
+		radius: SHAPE_RADIUS[shape]
+	};
+}
+function primaryAndOnPrimary(primary, surface, text, scheme) {
+	if (contrast(primary, surface) >= 4.5) return {
+		primary,
+		onPrimary: surface
+	};
+	if (scheme === "light") for (let points = .5; points <= MOST_DARKENING; points += .5) {
+		const darker = darken(primary, points);
+		if (contrast(darker, surface) >= 4.5) return {
+			primary: darker,
+			onPrimary: surface
+		};
+	}
+	return {
+		primary,
+		onPrimary: contrast(primary, text) > contrast(primary, surface) ? text : surface
+	};
+}
+const ThemeContext = createContext(resolveTheme({}, "light"));
+function useTheme() {
+	return useContext(ThemeContext);
+}
+//#endregion
+export { FONT_FAMILY, ThemeContext, resolveTheme, useTheme };

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import { BuiltinComponents, ComponentManifest, PropsOf } from "@monimesl/dot-core";
+import { ComponentType, ReactNode } from "react";
+//#region src/types.d.ts
+export type ReactComponent<M extends ComponentManifest> = ComponentType<PropsOf<M, ReactNode>>;
+export type ReactComponents<Manifests extends Record<string, ComponentManifest>> = { readonly [K in keyof Manifests]: ReactComponent<Manifests[K]>; };
+export type BuiltinReactComponents = ReactComponents<BuiltinComponents>;
+//#endregion

package/dist/vendor/@base-ui/react/checkbox/indicator/CheckboxIndicator.js

@@ -0,0 +1,51 @@
+"use client";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { getCheckboxStateAttributesMapping } from "../utils/getCheckboxStateAttributesMapping.js";
+import { useCheckboxRootContext } from "../root/CheckboxRootContext.js";
+import * as React from "react";
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/indicator/CheckboxIndicator.mjs
+/**
+* Indicates whether the checkbox is ticked.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+*/
+const CheckboxIndicator = /*#__PURE__*/ React.forwardRef(function CheckboxIndicator(componentProps, forwardedRef) {
+	const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
+	const rootState = useCheckboxRootContext();
+	const rendered = rootState.checked || rootState.indeterminate;
+	const { mounted, transitionStatus, setMounted } = useTransitionStatus(rendered);
+	const indicatorRef = React.useRef(null);
+	const state = {
+		...rootState,
+		transitionStatus
+	};
+	useOpenChangeComplete({
+		batch: true,
+		enabled: !rendered,
+		open: rendered,
+		ref: indicatorRef,
+		onComplete() {
+			if (!rendered) setMounted(false);
+		}
+	});
+	const stateAttributesMapping = {
+		...getCheckboxStateAttributesMapping(rootState),
+		...transitionStatusMapping
+	};
+	const shouldRender = keepMounted || mounted;
+	const element = useRenderElement("span", componentProps, {
+		ref: [forwardedRef, indicatorRef],
+		state,
+		stateAttributesMapping,
+		props: elementProps
+	});
+	if (!shouldRender) return null;
+	return element;
+});
+if (process.env.NODE_ENV !== "production") CheckboxIndicator.displayName = "CheckboxIndicator";
+//#endregion
+export { CheckboxIndicator };

package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRoot.js

@@ -0,0 +1,265 @@
+"use client";
+import { useMergedRefs } from "../../../utils/useMergedRefs.js";
+import { EMPTY_OBJECT } from "../../../utils/empty.js";
+import { mergeProps } from "../../merge-props/mergeProps.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { getWindow } from "../../../../@floating-ui/utils/dist/floating-ui.utils.dom.js";
+import { useIsoLayoutEffect } from "../../../utils/useIsoLayoutEffect.js";
+import { dispatchClickWithModifiers } from "../../utils/dispatchClickWithModifiers.js";
+import { useButton } from "../../internals/use-button/useButton.js";
+import { none } from "../../internals/reason-parts.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
+import { visuallyHidden, visuallyHiddenInput } from "../../../utils/visuallyHidden.js";
+import { useValueChanged } from "../../internals/useValueChanged.js";
+import { useControlled } from "../../../utils/useControlled.js";
+import { getDefaultFormSubmitter } from "../../../utils/getDefaultFormSubmitter.js";
+import { getCheckboxStateAttributesMapping } from "../utils/getCheckboxStateAttributesMapping.js";
+import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../internals/field-register-control/useRegisterFieldControl.js";
+import { useFieldItemContext } from "../../field/item/FieldItemContext.js";
+import { useFormContext } from "../../internals/form-context/FormContext.js";
+import { useLabelableContext } from "../../internals/labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../internals/labelable-provider/useAriaLabelledBy.js";
+import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
+import { useCheckboxGroupContext } from "../../checkbox-group/CheckboxGroupContext.js";
+import { CheckboxRootContext } from "./CheckboxRootContext.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRoot.mjs
+const PARENT_CHECKBOX = "data-parent";
+/**
+* Represents the checkbox itself.
+* Renders a `<span>` element and a hidden `<input>` beside.
+*
+* Documentation: [Base UI Checkbox](https://base-ui.com/react/components/checkbox)
+*/
+const CheckboxRoot = /*#__PURE__*/ React.forwardRef(function CheckboxRoot(componentProps, forwardedRef) {
+	const { checked: checkedProp, className, defaultChecked = false, "aria-labelledby": ariaLabelledByProp, disabled: disabledProp = false, form, id: idProp, indeterminate = false, inputRef: inputRefProp, name: nameProp, onCheckedChange, parent = false, readOnly = false, render, required = false, uncheckedValue, value: valueProp, nativeButton = false, style, ...elementProps } = componentProps;
+	const { clearErrors } = useFormContext();
+	const { disabled: rootDisabled, name: fieldName, setDirty, setFilled, setFocused, setTouched, state: fieldState, validationMode, validityData, validation: localValidation } = useFieldRootContext();
+	const fieldItemContext = useFieldItemContext();
+	const { labelId, registerControlId, getDescriptionProps } = useLabelableContext();
+	const groupContext = useCheckboxGroupContext();
+	const parentContext = groupContext?.allValues === void 0 ? void 0 : groupContext.parent;
+	const isGroupedWithParent = parentContext !== void 0;
+	const disabled = rootDisabled || fieldItemContext.disabled || groupContext?.disabled || disabledProp;
+	const name = fieldName ?? nameProp;
+	const value = valueProp ?? name;
+	const id = useBaseUiId();
+	const ownsControlId = groupContext?.registerControlId !== registerControlId;
+	const controlId = useLabelableId({
+		id: idProp || void 0,
+		enabled: ownsControlId
+	});
+	const rootId = nativeButton ? controlId : id;
+	let groupProps = {};
+	if (isGroupedWithParent) {
+		if (parent) groupProps = parentContext.getParentProps();
+		else if (value !== void 0) groupProps = parentContext.getChildProps(value);
+	}
+	const { checked: groupChecked = checkedProp, indeterminate: groupIndeterminate = indeterminate, onCheckedChange: groupOnChange, ...otherGroupProps } = groupProps;
+	const groupValue = groupContext?.value;
+	const controlRef = React.useRef(null);
+	const { getButtonProps, buttonRef } = useButton({
+		disabled,
+		native: nativeButton
+	});
+	const validation = groupContext?.validation ?? localValidation;
+	const [checked, setCheckedState] = useControlled({
+		controlled: value !== void 0 && groupValue !== void 0 && !parent ? groupValue.includes(value) : groupChecked,
+		default: defaultChecked,
+		name: "Checkbox",
+		state: "checked"
+	});
+	const computedChecked = isGroupedWithParent ? Boolean(groupChecked) : checked;
+	const computedIndeterminate = isGroupedWithParent ? groupIndeterminate || indeterminate : indeterminate;
+	useRegisterFieldControl(controlRef, id, checked, void 0, !groupContext && !disabled, nameProp);
+	const registerChildId = parentContext?.registerChildId;
+	const inputRef = React.useRef(null);
+	const registerFieldInput = validation.registerInput;
+	const registeredInputValue = groupContext ? value : void 0;
+	const registerInput = React.useCallback((element) => registerFieldInput(element, {
+		controlRef,
+		value: registeredInputValue
+	}), [registerFieldInput, registeredInputValue]);
+	const mergedInputRef = useMergedRefs(inputRefProp, inputRef, parent ? void 0 : registerInput);
+	const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, inputRef, !nativeButton, controlId);
+	useIsoLayoutEffect(() => {
+		if (inputRef.current) inputRef.current.indeterminate = computedIndeterminate;
+		if (!groupContext) setFilled(checked);
+	}, [
+		checked,
+		computedIndeterminate,
+		groupContext,
+		setFilled
+	]);
+	useValueChanged(checked, () => {
+		if (groupContext) return;
+		clearErrors(name);
+		setDirty(checked !== validityData.initialValue);
+		validation.change(checked);
+	});
+	const inputProps = mergeProps({
+		checked,
+		disabled,
+		form,
+		name: parent ? void 0 : name,
+		id: nativeButton ? void 0 : controlId,
+		required,
+		ref: mergedInputRef,
+		style: name ? visuallyHiddenInput : visuallyHidden,
+		tabIndex: -1,
+		type: "checkbox",
+		"aria-hidden": true,
+		onChange(event) {
+			if (event.nativeEvent.defaultPrevented) return;
+			if (readOnly) {
+				event.preventDefault();
+				return;
+			}
+			const nextChecked = event.currentTarget.checked;
+			const details = createChangeEventDetails(none, event.nativeEvent);
+			onCheckedChange?.(nextChecked, details);
+			if (details.isCanceled) return;
+			groupOnChange?.(nextChecked, details);
+			if (details.isCanceled) return;
+			setCheckedState(nextChecked);
+			if (value !== void 0 && groupContext !== void 0 && !parent && !isGroupedWithParent) {
+				const nextGroupValue = nextChecked ? [...groupContext.value, value] : groupContext.value.filter((item) => item !== value);
+				groupContext.setValue(nextGroupValue, details);
+			}
+		},
+		onClick(event) {
+			event.stopPropagation();
+		},
+		onFocus() {
+			controlRef.current?.focus();
+		}
+	}, valueProp !== void 0 ? { value: (groupContext ? checked && valueProp : valueProp) || "" } : EMPTY_OBJECT, getDescriptionProps, (props) => validation.getValidationProps(disabled, props));
+	React.useEffect(() => {
+		if (!parentContext || value === void 0) return;
+		const disabledStates = parentContext.disabledStatesRef.current;
+		disabledStates.set(value, disabled);
+		return () => {
+			disabledStates.delete(value);
+		};
+	}, [
+		parentContext,
+		disabled,
+		value
+	]);
+	const state = React.useMemo(() => ({
+		...fieldState,
+		checked: computedChecked,
+		disabled,
+		readOnly,
+		required,
+		indeterminate: computedIndeterminate
+	}), [
+		fieldState,
+		computedChecked,
+		disabled,
+		readOnly,
+		required,
+		computedIndeterminate
+	]);
+	const stateAttributesMapping = getCheckboxStateAttributesMapping(state);
+	const element = useRenderElement("span", componentProps, {
+		state,
+		ref: [
+			buttonRef,
+			controlRef,
+			forwardedRef
+		],
+		props: [
+			{
+				id: rootId,
+				role: "checkbox",
+				"aria-checked": computedIndeterminate ? "mixed" : computedChecked,
+				"aria-readonly": readOnly || void 0,
+				"aria-required": required || void 0,
+				"aria-labelledby": ariaLabelledBy,
+				[PARENT_CHECKBOX]: parent ? "" : void 0,
+				onFocus() {
+					if (!disabled) setFocused(true);
+				},
+				onBlur() {
+					const inputEl = inputRef.current;
+					if (!inputEl) return;
+					setTouched(true);
+					setFocused(false);
+					if (validationMode === "onBlur") validation.commit(groupContext ? groupValue : inputEl.checked);
+				},
+				onKeyDown(event) {
+					if (event.key !== "Enter") return;
+					event.preventBaseUIHandler();
+					if (event.defaultPrevented) return;
+					const formToSubmit = inputRef.current?.form ?? null;
+					const currentTarget = event.currentTarget;
+					const nativeEvent = event.nativeEvent;
+					const originalPreventDefault = event.preventDefault;
+					const originalNativePreventDefault = nativeEvent.preventDefault;
+					let preventDefaultCalledAfterPropagation = false;
+					event.preventDefault = () => {
+						preventDefaultCalledAfterPropagation = true;
+						originalPreventDefault.call(event);
+					};
+					nativeEvent.preventDefault = () => {
+						preventDefaultCalledAfterPropagation = true;
+						originalNativePreventDefault.call(nativeEvent);
+					};
+					originalNativePreventDefault.call(nativeEvent);
+					getWindow(currentTarget).queueMicrotask(() => {
+						event.preventDefault = originalPreventDefault;
+						nativeEvent.preventDefault = originalNativePreventDefault;
+						if (!preventDefaultCalledAfterPropagation) getDefaultFormSubmitter(formToSubmit)?.click();
+					});
+				},
+				onClick(event) {
+					if (readOnly || disabled) return;
+					event.preventDefault();
+					const input = inputRef.current;
+					if (!input) return;
+					dispatchClickWithModifiers(input, event);
+				}
+			},
+			elementProps,
+			otherGroupProps,
+			getButtonProps,
+			getDescriptionProps,
+			(props) => validation.getValidationProps(disabled, props)
+		],
+		stateAttributesMapping
+	});
+	const renderedId = element.props.id;
+	useIsoLayoutEffect(() => {
+		if (!registerChildId || parent || value === void 0 || renderedId === void 0) return;
+		return registerChildId(value, renderedId);
+	}, [
+		registerChildId,
+		parent,
+		value,
+		renderedId
+	]);
+	return /*#__PURE__*/ jsxs(CheckboxRootContext.Provider, {
+		value: state,
+		children: [
+			element,
+			!checked && !groupContext && name && !parent && uncheckedValue !== void 0 && /*#__PURE__*/ jsx("input", {
+				type: "hidden",
+				form,
+				name,
+				value: uncheckedValue,
+				disabled
+			}),
+			/*#__PURE__*/ jsx("input", {
+				...inputProps,
+				suppressHydrationWarning: true
+			})
+		]
+	});
+});
+if (process.env.NODE_ENV !== "production") CheckboxRoot.displayName = "CheckboxRoot";
+//#endregion
+export { CheckboxRoot, PARENT_CHECKBOX };

package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRootContext.js

@@ -0,0 +1,13 @@
+"use client";
+import formatErrorMessage from "../../../utils/formatErrorMessage.js";
+import * as React from "react";
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRootContext.mjs
+const CheckboxRootContext = /*#__PURE__*/ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") CheckboxRootContext.displayName = "CheckboxRootContext";
+function useCheckboxRootContext() {
+	const context = React.useContext(CheckboxRootContext);
+	if (context === void 0) throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CheckboxRootContext is missing. Checkbox parts must be placed within <Checkbox.Root>." : formatErrorMessage(14));
+	return context;
+}
+//#endregion
+export { CheckboxRootContext, useCheckboxRootContext };

package/dist/vendor/@base-ui/react/checkbox/root/CheckboxRootDataAttributes.js

@@ -0,0 +1,11 @@
+//#region ../../../node_modules/.pnpm/@base-ui+react@1.8.0_@date-fns+tz@1.5.0_@types+react@19.3.0_date-fns@4.4.0_react-dom@19.3.0_react@19.3.0__react@19.3.0/node_modules/@base-ui/react/checkbox/root/CheckboxRootDataAttributes.mjs
+/**
+* Present when the checkbox is checked.
+*/
+const checked = "data-checked";
+/**
+* Present when the checkbox is not checked.
+*/
+const unchecked = "data-unchecked";
+//#endregion
+export { checked, unchecked };