fluid-primitives 0.17.2 → 0.18.0-next.8.a9be2d6

package/README.md

@@ -6,6 +6,8 @@ Unstyled, flexible and accessible UI Primitives that provide a foundation for bu
 
 Fluid Primitives brings modern component patterns to TYPO3. Build accessible, composable UI components with the same developer experience you'd expect from React libraries like Radix or Base UI - but for Fluid templates.
 
+## Documentation
+
 Full documentation can be found at [fluid-primitives.com](https://fluid-primitives.com).
 
 ## What You Get
@@ -39,17 +41,11 @@ Fluid Primitives solves this by bringing proven patterns from the modern fronten
 
 ## Acknowledgments
 
-Built on the shoulders of giants:
-
 - [Zag.js](https://zagjs.com/) - The state machine foundation
 - [Radix UI](https://www.radix-ui.com/primitives) - API design inspiration
 - [Base UI](https://base-ui.com/) - Component behavior patterns
 - [Ark UI](https://ark-ui.com/) - Zag.js integration patterns
 
-## Documentation
-
-The full documentation can be found at [fluid-primitives.com](https://fluid-primitives.com).
-
 ## Development
 
 See [github.com/jramke/fluid-primitives.com](https://github.com/jramke/fluid-primitives.com) monorepo for the development setup.

package/dist/Client-C51NSHxg.js

@@ -0,0 +1,248 @@
+import { ListCollection } from "@zag-js/collection";
+import { VanillaMachine, VanillaMachine as Machine, mergeProps, normalizeProps, spreadProps } from "@zag-js/vanilla";
+import { uuid } from "@zag-js/utils";
+
+//#region Resources/Private/Client/src/lib/component.ts
+var Component = class {
+	document;
+	machine;
+	api;
+	hydrator = null;
+	userProps;
+	static name;
+	get doc() {
+		return this.document;
+	}
+	constructor(props, userDocument = document) {
+		this.document = userDocument;
+		this.userProps = this.transformProps(props);
+		this.hydrator = this.initHydrator(props);
+		this.machine = this.initMachine(props);
+		this.api = this.initApi();
+	}
+	initHydrator(props) {
+		const id = props.id;
+		if (!id) throw new Error("ComponentHydrator requires an id prop to initialize.");
+		return new ComponentHydrator(this.getName(), id, props.ids, this.doc);
+	}
+	init() {
+		this.render();
+		this.machine.subscribe(() => {
+			this.api = this.initApi();
+			this.render();
+		});
+		this.machine.start();
+	}
+	getName() {
+		return this.constructor.name;
+	}
+	/**
+	* Override in consumer for example when a getter is used for collection
+	* Needs to be used manually inside the initMachine method
+	*/
+	transformProps(props) {
+		return props;
+	}
+	updateProps(newProps) {
+		this.machine.updateProps(newProps);
+	}
+	destroy() {
+		this.machine.stop();
+		this.hydrator?.destroy();
+	}
+	spreadProps(node, attrs) {
+		spreadProps(node, attrs, this.machine.scope.id);
+	}
+	getElement(part, parent) {
+		return this.hydrator?.getElement(part, parent) || null;
+	}
+	getElements(part, parent) {
+		return this.hydrator?.getElements(part, parent) || [];
+	}
+};
+
+//#endregion
+//#region Resources/Private/Primitives/Field/src/field.registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerFieldMachine(field, service) {
+	if (!field) return;
+	registry.set(field, service);
+	field.dispatchEvent(new CustomEvent("fluid-primitives:field:registered", { bubbles: true }));
+}
+function getFieldMachineFor(el) {
+	if (!el) return;
+	return registry.get(el);
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/field-aware-component.ts
+const fieldProps = [
+	"invalid",
+	"disabled",
+	"readOnly",
+	"required"
+];
+const fieldAccessors = {
+	disabled: (s) => s.context.get("disabled"),
+	readOnly: (s) => s.context.get("readOnly"),
+	required: (s) => s.context.get("required"),
+	invalid: (s) => s.context.get("invalid")
+};
+var FieldAwareComponent = class extends Component {
+	subscribedToField = false;
+	fieldMachine;
+	closestField = null;
+	getClosestField() {
+		return this.closestField || this.getElement("root")?.closest("[data-scope=\"field\"][data-part=\"root\"]") || null;
+	}
+	withFieldProps(props) {
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return props;
+		this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) return this.propsWithField(props, this.fieldMachine);
+		else {
+			const handler = () => {
+				this.fieldMachine = getFieldMachineFor(this.closestField);
+				this.updateProps(this.propsWithField(this.userProps, this.fieldMachine));
+				this.closestField?.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+		return props;
+	}
+	subscribeToFieldService() {
+		if (this.subscribedToField) return;
+		this.closestField = this.getClosestField();
+		if (!this.closestField) return;
+		if (!this.fieldMachine) this.fieldMachine = getFieldMachineFor(this.closestField);
+		if (this.fieldMachine) {
+			this.fieldMachine.subscribe((snapshot) => {
+				queueMicrotask(() => {
+					let propsToUpdate = {};
+					for (const prop of fieldProps) {
+						const newValue = !!fieldAccessors[prop](snapshot);
+						if (newValue !== !!this.machine.prop(prop)) propsToUpdate[prop] = newValue;
+					}
+					if (Object.keys(propsToUpdate).length > 0) this.updateProps(propsToUpdate);
+					else this.machine.notify();
+				});
+			});
+			this.subscribedToField = true;
+		} else {
+			const handler = () => {
+				this.subscribeToFieldService();
+				this.closestField.removeEventListener("fluid-primitives:field:registered", handler);
+			};
+			this.closestField.addEventListener("fluid-primitives:field:registered", handler);
+		}
+	}
+};
+
+//#endregion
+//#region Resources/Private/Client/src/lib/hydration.ts
+function getHydrationData(component, id) {
+	const hydrationData = window.FluidPrimitives?.hydrationData;
+	if (!hydrationData || typeof hydrationData !== "object") return null;
+	if (!component) return hydrationData;
+	if (!hydrationData[component]) return null;
+	if (!id) return hydrationData[component];
+	return hydrationData[component][id] || null;
+}
+function mount(componentName, callback) {
+	const hydrationInstances = getHydrationData(componentName);
+	if (!hydrationInstances) return;
+	Object.keys(hydrationInstances).forEach((id) => {
+		if (hydrationInstances[id].controlled) return;
+		const instance = callback({
+			...hydrationInstances[id],
+			createHydrator: () => new ComponentHydrator(componentName, id, hydrationInstances[id].props.ids)
+		});
+		if (!instance) return;
+		if (!window.FluidPrimitives.uncontrolledInstances[componentName]) window.FluidPrimitives.uncontrolledInstances[componentName] = {};
+		window.FluidPrimitives.uncontrolledInstances[componentName][id] = instance;
+	});
+}
+function mountControlled(componentName, rootId, callback) {
+	const hydrationData = getHydrationData(componentName, rootId);
+	if (!hydrationData) return;
+	return callback({
+		...hydrationData,
+		createHydrator: () => new ComponentHydrator(componentName, rootId, hydrationData.props.ids)
+	});
+}
+var ComponentHydrator = class {
+	componentName;
+	doc;
+	rootId;
+	ids;
+	elementRefs = /* @__PURE__ */ new Map();
+	constructor(componentName, rootId, ids = {}, doc = document) {
+		this.componentName = componentName;
+		this.doc = doc;
+		if (!rootId) throw new Error(`Root ID is required for component hydration: ${componentName}`);
+		this.rootId = rootId;
+		this.ids = ids;
+	}
+	getElement(part, parent = this.doc) {
+		if (this.elementRefs.has(part)) return this.elementRefs.get(part) || null;
+		let element = null;
+		if (this.ids[part]) element = parent.querySelector(`#${this.ids[part]}`);
+		else element = parent.querySelector(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`);
+		if (element) {
+			if (parent === this.doc) this.elementRefs.set(part, element);
+			element.removeAttribute(`data-hydrate-${this.componentName}`);
+			element.__rootId = this.rootId;
+		}
+		return element;
+	}
+	getElements(part, parent = this.doc) {
+		if (this.elementRefs.has(part)) return this.elementRefs.get(part);
+		let elements = [];
+		if (this.ids[part]) elements = Array.from(parent.querySelectorAll(`#${this.ids[part]}`));
+		else elements = Array.from(parent.querySelectorAll(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${part}"][data-scope="${this.componentName}"]`));
+		if (parent === this.doc) this.elementRefs.set(part, elements);
+		elements.forEach((el) => el.removeAttribute(`data-hydrate-${this.componentName}`));
+		return elements;
+	}
+	generateRefAttributesString(part) {
+		const id = this.ids[part] || `${this.rootId}-${part}`;
+		return `data-scope="${this.componentName}" data-part="${part}" data-hydrate-${this.componentName}="${id}"`;
+	}
+	setRefAttributes(element, part) {
+		this.generateRefAttributesString(part).split(" ").map((attr) => attr.trim()).forEach((attr) => {
+			const [key, value] = attr.split("=");
+			element.setAttribute(key, value.replace(/"/g, ""));
+		});
+	}
+	destroy() {
+		this.elementRefs.forEach((el) => {
+			if (el instanceof Element) el.setAttribute(`data-hydrate-${this.componentName}`, this.rootId);
+			else el.forEach((e) => e.setAttribute(`data-hydrate-${this.componentName}`, this.rootId));
+		});
+		this.elementRefs.clear();
+	}
+};
+function getListCollectionFromHydrationData(hydrationCollection) {
+	if (hydrationCollection instanceof ListCollection) return hydrationCollection;
+	return new ListCollection({
+		items: hydrationCollection.items,
+		itemToValue: hydrationCollection.itemToValueKey ? (item) => item?.[hydrationCollection.itemToValueKey] : void 0,
+		itemToString: hydrationCollection.itemToStringKey ? (item) => item?.[hydrationCollection.itemToStringKey] : void 0,
+		isItemDisabled: hydrationCollection.isItemDisabledKey ? (item) => item?.[hydrationCollection.isItemDisabledKey] : void 0,
+		groupBy: hydrationCollection.groupByKey ? (item) => {
+			const key = hydrationCollection.groupByKey;
+			if (!key) return void 0;
+			if (key.includes(".")) return key.split(".").reduce((obj, k) => obj ? obj[k] : void 0, item);
+			return item?.[key];
+		} : void 0
+	});
+}
+
+//#endregion
+//#region Resources/Private/Client/src/lib/uid.ts
+function uid(prefix = "f") {
+	return "«" + prefix + uuid() + "»";
+}
+
+//#endregion
+export { Machine as a, getListCollectionFromHydrationData as c, FieldAwareComponent as d, registerFieldMachine as f, mergeProps as i, mount as l, spreadProps as n, ComponentHydrator as o, Component as p, normalizeProps as r, getHydrationData as s, uid as t, mountControlled as u };

package/dist/accordion.d.ts

@@ -1,12 +1,12 @@
-import { Component$1 as Component, Machine$1 as Machine } from "./index-BpcuNDMI.js";
+import { a as Machine, f as Component } from "./index-B8JCdyld.js";
 import * as accordion from "@zag-js/accordion";
-import * as _zag_js_types2 from "@zag-js/types";
+import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region Resources/Private/Primitives/Accordion/Accordion.d.ts
 declare class Accordion extends Component<accordion.Props, accordion.Api> {
   static name: string;
   initMachine(props: accordion.Props): Machine<any>;
-  initApi(): accordion.Api<_zag_js_types2.PropTypes<{
+  initApi(): accordion.Api<_$_zag_js_types0.PropTypes<{
     [x: string]: any;
   }>>;
   render(): void;

package/dist/accordion.js

@@ -1 +1,45 @@
-import{Component as e,Machine as t,normalizeProps as n}from"./Client-CygooKu8.js";import*as r from"@zag-js/accordion";var i=class extends e{static name=`accordion`;initMachine(e){return new t(r.machine,{collapsible:!0,...e})}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElements(`item`);t.forEach(e=>{this.spreadProps(e,this.api.getItemProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let n=this.getElements(`item-trigger`);n.forEach(e=>{this.spreadProps(e,this.api.getItemTriggerProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let r=this.getElements(`item-content`);r.forEach(e=>{this.spreadProps(e,this.api.getItemContentProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))});let i=this.getElements(`item-indicator`);i.forEach(e=>{this.spreadProps(e,this.api.getItemIndicatorProps({value:e.getAttribute(`data-value`),disabled:e.hasAttribute(`data-disabled`)}))}),this.getElements(`item-header`)}};export{i as Accordion};
+import { a as Machine, p as Component, r as normalizeProps } from "./Client-C51NSHxg.js";
+import * as accordion from "@zag-js/accordion";
+
+//#region Resources/Private/Primitives/Accordion/Accordion.ts
+var Accordion = class extends Component {
+	static name = "accordion";
+	initMachine(props) {
+		return new Machine(accordion.machine, { ...props });
+	}
+	initApi() {
+		return accordion.connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		const rootEl = this.getElement("root");
+		if (rootEl) this.spreadProps(rootEl, this.api.getRootProps());
+		this.getElements("item").forEach((itemEl) => {
+			this.spreadProps(itemEl, this.api.getItemProps({
+				value: itemEl.getAttribute("data-value"),
+				disabled: itemEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-trigger").forEach((trigger) => {
+			this.spreadProps(trigger, this.api.getItemTriggerProps({
+				value: trigger.getAttribute("data-value"),
+				disabled: trigger.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-content").forEach((contentEl) => {
+			this.spreadProps(contentEl, this.api.getItemContentProps({
+				value: contentEl.getAttribute("data-value"),
+				disabled: contentEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-indicator").forEach((indicatorEl) => {
+			this.spreadProps(indicatorEl, this.api.getItemIndicatorProps({
+				value: indicatorEl.getAttribute("data-value"),
+				disabled: indicatorEl.hasAttribute("data-disabled")
+			}));
+		});
+		this.getElements("item-header");
+	}
+};
+
+//#endregion
+export { Accordion };

package/dist/checkbox-group.d.ts

@@ -0,0 +1,99 @@
+import { a as Machine, u as FieldAwareComponent } from "./index-B8JCdyld.js";
+import { t as FieldMachine } from "./form.registry-Cb8Pvoe8.js";
+import { EventObject } from "@zag-js/core";
+import { PropTypes } from "@zag-js/types";
+
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.types.d.ts
+interface CheckboxGroupProps {
+  id: string;
+  ids?: Record<string, string>;
+  /** The initial value of the checkbox group (uncontrolled) */
+  defaultValue?: string[];
+  /** The controlled value of the checkbox group */
+  value?: string[];
+  /** The name of the input fields in the checkbox group (for form submission) */
+  name?: string;
+  /** The form id the checkbox group belongs to */
+  form?: string;
+  /** If true, the checkbox group is disabled */
+  disabled?: boolean;
+  /** If true, the checkbox group is read-only */
+  readOnly?: boolean;
+  /** If true, the checkbox group is required */
+  required?: boolean;
+  /** If true, the checkbox group is invalid */
+  invalid?: boolean;
+  /** The maximum number of selected values */
+  maxSelectedValues?: number;
+  /** Called when the value changes */
+  onValueChange?: (details: {
+    value: string[];
+  }) => void;
+}
+interface CheckboxGroupSchema {
+  props: CheckboxGroupProps;
+  context: {
+    value: string[];
+  };
+  computed: {
+    isAtMax: boolean;
+    isInteractive: boolean;
+  };
+  state: 'ready';
+  event: EventObject;
+  action: string;
+  effect: string;
+}
+interface CheckboxGroupItemProps {
+  value: string;
+}
+/** API returned by getItemProps for checkbox items */
+interface CheckboxGroupItemState {
+  checked: boolean;
+  onCheckedChange: () => void;
+  name: string | undefined;
+  disabled: boolean;
+  readOnly: boolean;
+  invalid: boolean;
+}
+/** Public API for CheckboxGroup - used by Checkbox to get item props */
+interface CheckboxGroupApi {
+  /** The current value of the checkbox group */
+  value: string[];
+  /** The name for form submission */
+  name: string | undefined;
+  /** Whether the checkbox group is disabled */
+  disabled: boolean;
+  /** Whether the checkbox group is read-only */
+  readOnly: boolean;
+  /** Whether the checkbox group is invalid */
+  invalid: boolean;
+  /** Check if a value is selected */
+  isChecked(value: string): boolean;
+  /** Set the entire value array */
+  setValue(value: string[]): void;
+  /** Add a value to the selection */
+  addValue(value: string): void;
+  /** Remove a value from the selection */
+  removeValue(value: string): void;
+  /** Toggle a value */
+  toggleValue(value: string): void;
+  /** Get props to merge into a checkbox item */
+  getItemProps(props: CheckboxGroupItemProps): CheckboxGroupItemState;
+  /** Get root element props */
+  getRootProps(): PropTypes['element'];
+  /** Get label element props */
+  getLabelProps(): PropTypes['element'];
+}
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.d.ts
+declare class CheckboxGroup extends FieldAwareComponent<CheckboxGroupProps, CheckboxGroupApi> {
+  static name: string;
+  propsWithField(props: CheckboxGroupProps, fieldMachine: FieldMachine): CheckboxGroupProps;
+  initMachine(props: CheckboxGroupProps): Machine<CheckboxGroupSchema>;
+  initApi(): CheckboxGroupApi;
+  render(): void;
+  destroy(): void;
+}
+//#endregion
+export { CheckboxGroup };

package/dist/checkbox-group.js

@@ -0,0 +1,117 @@
+import { a as Machine, d as FieldAwareComponent, i as mergeProps, r as normalizeProps } from "./Client-C51NSHxg.js";
+import { i as connect, n as registerCheckboxGroup, r as unregisterCheckboxGroup } from "./checkbox-group.registry-CGwuF7SF.js";
+import { a as getLabelId } from "./field.dom-CJQXpQbZ.js";
+import { createMachine } from "@zag-js/core";
+
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.machine.ts
+const machine = createMachine({
+	initialState() {
+		return "ready";
+	},
+	context({ bindable, prop }) {
+		return { value: bindable(() => ({
+			defaultValue: prop("defaultValue") ?? [],
+			value: prop("value"),
+			onChange(value) {
+				prop("onValueChange")?.({ value });
+			}
+		})) };
+	},
+	states: { ready: { on: {
+		"VALUE.SET": { actions: ["setValue"] },
+		"VALUE.ADD": { actions: ["addValue"] },
+		"VALUE.REMOVE": { actions: ["removeValue"] },
+		"VALUE.TOGGLE": { actions: ["toggleValue"] }
+	} } },
+	computed: {
+		isAtMax({ prop, context }) {
+			const max = prop("maxSelectedValues");
+			if (max == null) return false;
+			return context.get("value").length >= max;
+		},
+		isInteractive({ prop }) {
+			return !prop("disabled") && !prop("readOnly");
+		}
+	},
+	implementations: { actions: {
+		setValue({ context, event }) {
+			const newValue = event.value;
+			context.set("value", newValue);
+		},
+		addValue({ context, event, computed }) {
+			if (!computed("isInteractive")) return;
+			const val = event.value;
+			const currentValue = context.get("value");
+			if (currentValue.includes(val)) return;
+			if (computed("isAtMax")) return;
+			const newValue = [...currentValue, val];
+			context.set("value", newValue);
+		},
+		removeValue({ context, event, computed }) {
+			if (!computed("isInteractive")) return;
+			const val = event.value;
+			const newValue = context.get("value").filter((v) => v !== val);
+			context.set("value", newValue);
+		},
+		toggleValue({ context, event, computed }) {
+			const val = event.value;
+			const currentValue = context.get("value");
+			if (currentValue.includes(val)) {
+				if (!computed("isInteractive")) return;
+				const newValue = currentValue.filter((v) => v !== val);
+				context.set("value", newValue);
+			} else {
+				if (!computed("isInteractive")) return;
+				if (computed("isAtMax")) return;
+				const newValue = [...currentValue, val];
+				context.set("value", newValue);
+			}
+		}
+	} }
+});
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/CheckboxGroup.ts
+var CheckboxGroup = class extends FieldAwareComponent {
+	static name = "checkbox-group";
+	propsWithField(props, fieldMachine) {
+		return {
+			...props,
+			disabled: props.disabled ?? fieldMachine.context.get("disabled"),
+			readOnly: props.readOnly ?? fieldMachine.context.get("readOnly"),
+			required: props.required ?? fieldMachine.context.get("required"),
+			invalid: props.invalid ?? fieldMachine.context.get("invalid"),
+			name: props.name ?? fieldMachine.prop("name"),
+			ids: {
+				...props.ids,
+				label: getLabelId(fieldMachine.scope)
+			}
+		};
+	}
+	initMachine(props) {
+		props = this.withFieldProps(props);
+		const createdMachine = new Machine(machine, props);
+		registerCheckboxGroup(this.getElement("root"), createdMachine);
+		return createdMachine;
+	}
+	initApi() {
+		return connect(this.machine.service, normalizeProps);
+	}
+	render() {
+		this.subscribeToFieldService();
+		const rootEl = this.getElement("root");
+		if (rootEl) {
+			const mergedProps = mergeProps(this.api.getRootProps(), { "aria-describedby": this.fieldMachine?.context.get("describeIds") || void 0 });
+			this.spreadProps(rootEl, mergedProps);
+		}
+		const labelEl = this.getElement("label");
+		if (labelEl) this.spreadProps(labelEl, this.api.getLabelProps());
+	}
+	destroy() {
+		unregisterCheckboxGroup(this.getElement("root"));
+		super.destroy();
+	}
+};
+
+//#endregion
+export { CheckboxGroup };

package/dist/checkbox-group.registry-CGwuF7SF.js

@@ -0,0 +1,112 @@
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.dom.ts
+const getRootId = (scope) => scope.ids?.root ?? `checkbox-group:${scope.id}:root`;
+const getLabelId = (scope) => scope.ids?.label ?? `checkbox-group:${scope.id}:label`;
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.connect.ts
+function connect(service, normalize) {
+	const { scope, context, computed, send, prop } = service;
+	const disabled = !!prop("disabled");
+	const readOnly = !!prop("readOnly");
+	const invalid = !!prop("invalid");
+	const required = !!prop("required");
+	const name = prop("name");
+	return {
+		get value() {
+			return context.get("value");
+		},
+		name,
+		disabled,
+		readOnly,
+		invalid,
+		isChecked(val) {
+			return context.get("value").includes(val);
+		},
+		setValue(val) {
+			send({
+				type: "VALUE.SET",
+				value: val
+			});
+		},
+		addValue(val) {
+			send({
+				type: "VALUE.ADD",
+				value: val
+			});
+		},
+		removeValue(val) {
+			send({
+				type: "VALUE.REMOVE",
+				value: val
+			});
+		},
+		toggleValue(val) {
+			send({
+				type: "VALUE.TOGGLE",
+				value: val
+			});
+		},
+		getItemProps(props) {
+			const checked = context.get("value").includes(props.value);
+			const isAtMax = computed("isAtMax");
+			return {
+				checked,
+				onCheckedChange: () => send({
+					type: "VALUE.TOGGLE",
+					value: props.value
+				}),
+				name,
+				disabled: disabled || isAtMax && !checked,
+				readOnly,
+				invalid
+			};
+		},
+		getRootProps() {
+			return normalize.element({
+				id: getRootId(scope),
+				role: "group",
+				"data-scope": "checkbox-group",
+				"data-part": "root",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
+				"data-invalid": invalid ? "" : void 0,
+				"aria-labelledby": getLabelId(scope),
+				"aria-disabled": disabled || void 0,
+				"aria-invalid": invalid || void 0,
+				"aria-required": required || void 0
+			});
+		},
+		getLabelProps() {
+			return normalize.element({
+				id: getLabelId(scope),
+				"data-scope": "checkbox-group",
+				"data-part": "label",
+				"data-disabled": disabled ? "" : void 0,
+				"data-readonly": readOnly ? "" : void 0,
+				"data-invalid": invalid ? "" : void 0
+			});
+		}
+	};
+}
+
+//#endregion
+//#region Resources/Private/Primitives/CheckboxGroup/src/checkbox-group.registry.ts
+const registry = /* @__PURE__ */ new WeakMap();
+function registerCheckboxGroup(root, machine) {
+	if (!root) return;
+	registry.set(root, machine);
+	root.dispatchEvent(new CustomEvent("fluid-primitives:checkbox-group:registered", { bubbles: true }));
+}
+function unregisterCheckboxGroup(root) {
+	if (!root) return;
+	registry.delete(root);
+}
+function getCheckboxGroupMachineFor(el) {
+	if (!el) return void 0;
+	const root = el.closest("[data-scope=\"checkbox-group\"][data-part=\"root\"]");
+	if (!root) return void 0;
+	return registry.get(root);
+}
+
+//#endregion
+export { connect as i, registerCheckboxGroup as n, unregisterCheckboxGroup as r, getCheckboxGroupMachineFor as t };