@monimesl/dot-renderer-react 0.1.0-alpha.3 → 0.1.0-alpha.30

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,71 @@
+import { FONT_FAMILY, ThemeContext, resolveTheme, useTheme } from "./theme.js";
+import { HOME_INDICATOR } from "./components/padding.js";
+import { PortalContainerContext } from "./portal.js";
+import { PageRoot } from "./page-root.js";
+import { PullToRefresh } from "./pull-to-refresh.js";
+import { mergeColors } from "@monimesl/dot-core";
+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 pageColors = useSyncExternalStore(page.subscribeToColors, page.getColors);
+	const resolvedTheme = useMemo(() => resolveTheme(theme, systemContext.scheme, pageColors), [
+		theme,
+		systemContext.scheme,
+		pageColors
+	]);
+	const [rootElement, setRootElement] = useState(null);
+	const pageContent = /* @__PURE__ */ jsx(PageRoot, {
+		page,
+		components
+	});
+	return /* @__PURE__ */ jsx(ThemeContext.Provider, {
+		value: resolvedTheme,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: setRootElement,
+			className: "dot-theme-root",
+			"data-dot-scheme": resolvedTheme.scheme,
+			children: /* @__PURE__ */ jsx(PortalContainerContext.Provider, {
+				value: rootElement,
+				children: /* @__PURE__ */ jsx(PullToRefresh, {
+					page,
+					children: Wrapper ? /* @__PURE__ */ jsx(Wrapper, {
+						theme: withPageColors(theme, resolvedTheme.scheme, pageColors),
+						children: pageContent
+					}) : /* @__PURE__ */ jsx(DefaultSurface, { children: pageContent })
+				})
+			})
+		})
+	});
+}
+function withPageColors(theme, scheme, pageColors) {
+	return {
+		...theme,
+		scheme,
+		colors: {
+			...theme.colors,
+			...mergeColors(theme.colors ?? {}, pageColors)
+		}
+	};
+}
+function DefaultSurface({ children }) {
+	const { colors } = useTheme();
+	return /* @__PURE__ */ jsx("div", {
+		className: "dot-surface",
+		style: {
+			boxSizing: "border-box",
+			minHeight: "100vh",
+			paddingBottom: HOME_INDICATOR,
+			display: "flex",
+			flexDirection: "column",
+			background: colors.background,
+			color: colors.text,
+			fontFamily: FONT_FAMILY
+		},
+		children
+	});
+}
+//#endregion
+export { Root };

package/dist/styles.css

@@ -0,0 +1 @@
+@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}.dot-theme-root{-webkit-user-select:none;user-select:none}.dot-theme-root :is(input,textarea){-webkit-user-select:text;user-select:text}}@keyframes dot-skeleton-pulse{0%,to{opacity:1}50%{opacity:.4}}.dot-image{max-width:100%;display:block}.dot-list>.dot-list-item:not(:last-child){border-bottom:1px solid var(--dot-list-divider)}.dot-scroll{overscroll-behavior-x:contain;scrollbar-width:none;flex-direction:row;display:flex;position:relative;overflow:auto hidden}.dot-scroll::-webkit-scrollbar{display:none}.dot-scroll>*{scroll-snap-align:var(--dot-scroll-snap);flex:none;width:min-content}.dot-scroll .dot-image{max-width:none}.dot-disclosure>summary{list-style:none}.dot-disclosure>summary::-webkit-details-marker{display:none}.dot-steps>.dot-step:last-child .dot-step-line{display:none}.dot-sheet-backdrop{transition:opacity .2s}.dot-sheet{transition:transform .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%)}.dot-prose>.dot-heading{margin-block-start:.5em}.dot-prose>.dot-heading:first-child{margin-block-start:0}

package/dist/theme.d.ts

@@ -0,0 +1,26 @@
+import { ColorScheme, PageColors, 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;
+  customColors: Readonly<Record<string, string>>;
+  shape: ThemeShape;
+  radius: number;
+}
+export declare function resolveTheme(theme: Theme, systemScheme: ColorScheme, pageColors?: PageColors): ResolvedTheme;
+export declare function useTheme(): ResolvedTheme;
+//#endregion

package/dist/theme.js

@@ -0,0 +1,129 @@
+import { darken, mix } from "./color.js";
+import { DEFAULT_BACKGROUND, READABLE_CONTRAST, contrast, isDark, pageBackground, textOn, themeScheme } from "@monimesl/dot-core";
+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: DEFAULT_BACKGROUND.light,
+		surface: "#ffffff",
+		text: "#111111",
+		subtle: "#8e8e93",
+		muted: "#e9e9eb",
+		border: "#e9e9eb",
+		info: "#0a64d6",
+		success: "#1a8a4a",
+		warning: "#b25e00",
+		danger: "#d0312d"
+	},
+	dark: {
+		primary: "#f5f5f5",
+		background: DEFAULT_BACKGROUND.dark,
+		surface: "#1e1e1e",
+		text: "#f5f5f5",
+		subtle: "#8e8e93",
+		muted: "#2c2c2e",
+		border: "#2a2a2c",
+		info: "#4c9dff",
+		success: "#3ecf72",
+		warning: "#ffb340",
+		danger: "#ff6961"
+	}
+};
+function resolveTheme(theme, systemScheme, pageColors = {}) {
+	const scheme = themeScheme(theme, systemScheme);
+	const defaults = DEFAULT_COLORS[scheme];
+	const themeColors = theme.colors ?? {};
+	const ownColor = (name) => pageColors[name]?.[scheme] ?? themeColors[name]?.[scheme];
+	const shape = theme.shape ?? "soft";
+	const background = pageBackground(pageColors.background, theme, systemScheme);
+	const onDashBackground = background === defaults.background;
+	let surfaces = defaults;
+	if (!onDashBackground) surfaces = surfacesOn(background);
+	const surface = ownColor("surface") ?? surfaces.surface;
+	const text = ownColor("text") ?? readableText(defaults.text, background);
+	let subtle = defaults.subtle;
+	if (!onDashBackground) subtle = quieterText(text, background, surface);
+	const primary = ownColor("primary") ?? defaults.primary;
+	return {
+		scheme,
+		colors: {
+			...defaults,
+			...primaryAndOnPrimary(primary, surface, text, scheme),
+			background,
+			surface,
+			text,
+			muted: ownColor("muted") ?? surfaces.muted,
+			border: ownColor("border") ?? surfaces.border,
+			subtle: ownColor("subtle") ?? subtle
+		},
+		customColors: resolveCustomColors(themeColors.custom ?? {}, scheme),
+		shape,
+		radius: SHAPE_RADIUS[shape]
+	};
+}
+function surfacesOn(background) {
+	if (isDark(background)) return {
+		surface: mix(background, "#ffffff", .08),
+		muted: mix(background, "#ffffff", .14),
+		border: mix(background, "#ffffff", .16)
+	};
+	return {
+		surface: mix(background, "#ffffff", .75),
+		muted: mix(background, "#000000", .06),
+		border: mix(background, "#000000", .1)
+	};
+}
+const QUIET_CONTRAST = 3;
+function quieterText(text, background, surface) {
+	for (let shareOfBackground = .5; shareOfBackground > 0; shareOfBackground -= .05) {
+		const quieter = mix(text, background, shareOfBackground);
+		const readsOnBackground = contrast(quieter, background) >= QUIET_CONTRAST;
+		const readsOnSurface = contrast(quieter, surface) >= QUIET_CONTRAST;
+		if (readsOnBackground && readsOnSurface) return quieter;
+	}
+	return text;
+}
+function readableText(text, background) {
+	if (contrast(text, background) >= READABLE_CONTRAST) return text;
+	return textOn(background);
+}
+function resolveCustomColors(custom, scheme) {
+	const resolved = {};
+	for (const [name, color] of Object.entries(custom)) {
+		const value = color[scheme] ?? color.light ?? color.dark;
+		if (value) resolved[name] = value;
+	}
+	return resolved;
+}
+const MOST_DARKENING = 15;
+function primaryAndOnPrimary(primary, surface, text, scheme) {
+	if (contrast(primary, surface) >= READABLE_CONTRAST) 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) >= READABLE_CONTRAST) 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 };

package/dist/vendor/@base-ui/react/checkbox/utils/getCheckboxStateAttributesMapping.js

@@ -0,0 +1,15 @@
+import { fieldValidityMapping } from "../../internals/field-constants/constants.js";
+import { checked, unchecked } from "../root/CheckboxRootDataAttributes.js";
+//#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/utils/getCheckboxStateAttributesMapping.mjs
+function getCheckboxStateAttributesMapping(state) {
+	return {
+		checked(value) {
+			if (state.indeterminate) return {};
+			if (value) return { [checked]: "" };
+			return { [unchecked]: "" };
+		},
+		...fieldValidityMapping
+	};
+}
+//#endregion
+export { getCheckboxStateAttributesMapping };

package/dist/vendor/@base-ui/react/checkbox-group/CheckboxGroupContext.js

@@ -0,0 +1,10 @@
+"use client";
+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-group/CheckboxGroupContext.mjs
+const CheckboxGroupContext = /*#__PURE__*/ React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") CheckboxGroupContext.displayName = "CheckboxGroupContext";
+function useCheckboxGroupContext() {
+	return React.useContext(CheckboxGroupContext);
+}
+//#endregion
+export { CheckboxGroupContext, useCheckboxGroupContext };