@geajs/ui 0.2.3 → 0.2.9

package/dist/card.mjs

@@ -1,208 +1,96 @@
-import { t as cn } from "./cn.mjs";
-import { Component, GEA_ELEMENT, GEA_INSTANTIATE_CHILD_COMPONENTS, GEA_MOUNT_COMPILED_CHILD_COMPONENTS, GEA_ON_PROP_CHANGE, GEA_PATCH_NODE } from "@geajs/core";
+import { n as cn, t as CompiledComponent } from "./compiled-component.mjs";
+import { o as GEA_CREATE_TEMPLATE } from "./bind.mjs";
+import { t as reactiveText } from "./reactive-text.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
 //#region src/components/card.tsx
-var Card = class extends Component {
-	static {
-		this.__geaTagName = "gea-card";
-	}
-	template(props) {
-		return `<div id="${this.id}"${cn("rounded-xl border bg-card text-card-foreground shadow", props.class) == null || cn("rounded-xl border bg-card text-card-foreground shadow", props.class) === false ? "" : ` class="${(cn("rounded-xl border bg-card text-card-foreground shadow", props.class) != null ? String(cn("rounded-xl border bg-card text-card-foreground shadow", props.class)) : "").trim()}"`}>${props.children}</div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("rounded-xl border bg-card text-card-foreground shadow", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+function _tpl0_create() {
+	const e = document.createElement("div");
+	e.textContent = "0";
+	return e;
+}
+function _tpl1_create() {
+	const e = document.createElement("div");
+	e.textContent = "0";
+	return e;
+}
+function _tpl2_create() {
+	const e = document.createElement("h3");
+	e.textContent = "0";
+	return e;
+}
+function _tpl3_create() {
+	const e = document.createElement("p");
+	e.textContent = "0";
+	return e;
+}
+function _tpl4_create() {
+	const e = document.createElement("div");
+	e.textContent = "0";
+	return e;
+}
+function _tpl5_create() {
+	const e = document.createElement("div");
+	e.textContent = "0";
+	return e;
+}
+var Card = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl0_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("rounded-xl border bg-card text-card-foreground shadow", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
-var CardHeader = class extends Component {
-	static {
-		this.__geaTagName = "card-header";
-	}
-	template(props) {
-		return `<div id="${this.id}"${cn("flex flex-col space-y-1.5 p-6", props.class) == null || cn("flex flex-col space-y-1.5 p-6", props.class) === false ? "" : ` class="${(cn("flex flex-col space-y-1.5 p-6", props.class) != null ? String(cn("flex flex-col space-y-1.5 p-6", props.class)) : "").trim()}"`}>${props.children}</div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("flex flex-col space-y-1.5 p-6", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+var CardHeader = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl1_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("flex flex-col space-y-1.5 p-6", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
-var CardTitle = class extends Component {
-	static {
-		this.__geaTagName = "card-title";
-	}
-	template(props) {
-		return `<h3 id="${this.id}"${cn("font-semibold leading-none tracking-tight", props.class) == null || cn("font-semibold leading-none tracking-tight", props.class) === false ? "" : ` class="${(cn("font-semibold leading-none tracking-tight", props.class) != null ? String(cn("font-semibold leading-none tracking-tight", props.class)) : "").trim()}"`}>${props.children}</h3>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("font-semibold leading-none tracking-tight", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+var CardTitle = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl2_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("font-semibold leading-none tracking-tight", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
-var CardDescription = class extends Component {
-	static {
-		this.__geaTagName = "card-description";
-	}
-	template(props) {
-		return `<p id="${this.id}"${cn("text-sm text-muted-foreground", props.class) == null || cn("text-sm text-muted-foreground", props.class) === false ? "" : ` class="${(cn("text-sm text-muted-foreground", props.class) != null ? String(cn("text-sm text-muted-foreground", props.class)) : "").trim()}"`}>${props.children}</p>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("text-sm text-muted-foreground", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+var CardDescription = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl3_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("text-sm text-muted-foreground", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
-var CardContent = class extends Component {
-	static {
-		this.__geaTagName = "card-content";
-	}
-	template(props) {
-		return `<div id="${this.id}"${cn("p-6 pt-0", props.class) == null || cn("p-6 pt-0", props.class) === false ? "" : ` class="${(cn("p-6 pt-0", props.class) != null ? String(cn("p-6 pt-0", props.class)) : "").trim()}"`}>${props.children}</div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("p-6 pt-0", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+var CardContent = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl4_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("p-6 pt-0", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
-var CardFooter = class extends Component {
-	static {
-		this.__geaTagName = "card-footer";
-	}
-	template(props) {
-		return `<div id="${this.id}"${cn("flex items-center p-6 pt-0", props.class) == null || cn("flex items-center p-6 pt-0", props.class) === false ? "" : ` class="${(cn("flex items-center p-6 pt-0", props.class) != null ? String(cn("flex items-center p-6 pt-0", props.class)) : "").trim()}"`}>${props.children}</div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("flex items-center p-6 pt-0", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "children") {
-			const __el = this[GEA_ELEMENT];
-			if (__el) {
-				const __tw = document.createElement("template");
-				__tw.innerHTML = value;
-				const __newEl = __tw.content.firstElementChild;
-				const __existEl = __el.firstElementChild;
-				if (__newEl && __existEl && __tw.content.childNodes.length === 1) this.constructor[GEA_PATCH_NODE](__existEl, __newEl, true);
-				else if (__el.innerHTML !== value) {
-					__el.innerHTML = value;
-					this[GEA_INSTANTIATE_CHILD_COMPONENTS]();
-					if (this.parentComponent) this.parentComponent[GEA_MOUNT_COMPILED_CHILD_COMPONENTS]();
-				}
-			}
-		}
+var CardFooter = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl5_create();
+		const el0 = root;
+		const marker1 = root.firstChild;
+		reactiveClass(el0, d, this, () => cn("flex items-center p-6 pt-0", this.props.class));
+		reactiveText(marker1, d, this, () => this.props.children);
+		return root;
 	}
 };
 //#endregion

package/dist/card.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"card.mjs","names":["Component","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","cn","Card","__geaTagName","template","props","__id","id","class","String","trim","children","key","value","__el","__boundValue","__newClass","replace","className","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","constructor","parentComponent","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"sources":["../src/components/card.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport class Card extends Component {\n  template(props: any) {\n    return <div class={cn('rounded-xl border bg-card text-card-foreground shadow', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardHeader extends Component {\n  template(props: any) {\n    return <div class={cn('flex flex-col space-y-1.5 p-6', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardTitle extends Component {\n  template(props: any) {\n    return <h3 class={cn('font-semibold leading-none tracking-tight', props.class)}>{props.children}</h3>\n  }\n}\n\nexport class CardDescription extends Component {\n  template(props: any) {\n    return <p class={cn('text-sm text-muted-foreground', props.class)}>{props.children}</p>\n  }\n}\n\nexport class CardContent extends Component {\n  template(props: any) {\n    return <div class={cn('p-6 pt-0', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardFooter extends Component {\n  template(props: any) {\n    return <div class={cn('flex items-center p-6 pt-0', props.class)}>{props.children}</div>\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"card.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveText","CompiledComponent","Component","cn","_tpl0_create","e","document","createElement","textContent","_tpl1_create","_tpl2_create","_tpl3_create","_tpl4_create","_tpl5_create","Card","d","root","el0","marker1","firstChild","props","class","t1","children","CardHeader","CardTitle","CardDescription","CardContent","CardFooter"],"sources":["../src/components/card.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport class Card extends Component {\n  template(props: any) {\n    return <div class={cn('rounded-xl border bg-card text-card-foreground shadow', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardHeader extends Component {\n  template(props: any) {\n    return <div class={cn('flex flex-col space-y-1.5 p-6', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardTitle extends Component {\n  template(props: any) {\n    return <h3 class={cn('font-semibold leading-none tracking-tight', props.class)}>{props.children}</h3>\n  }\n}\n\nexport class CardDescription extends Component {\n  template(props: any) {\n    return <p class={cn('text-sm text-muted-foreground', props.class)}>{props.children}</p>\n  }\n}\n\nexport class CardContent extends Component {\n  template(props: any) {\n    return <div class={cn('p-6 pt-0', props.class)}>{props.children}</div>\n  }\n}\n\nexport class CardFooter extends Component {\n  template(props: any) {\n    return <div class={cn('flex items-center p-6 pt-0', props.class)}>{props.children}</div>\n  }\n}\n"],"mappings":";;;;;AAGA,SAASM,eAAe;CACtB,MAAMC,IAAIC,SAASC,cAAc,MAAM;AACvCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,SAASI,eAAe;CACtB,MAAMJ,IAAIC,SAASC,cAAc,MAAM;AACvCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,SAASK,eAAe;CACtB,MAAML,IAAIC,SAASC,cAAc,KAAK;AACtCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,SAASM,eAAe;CACtB,MAAMN,IAAIC,SAASC,cAAc,IAAI;AACrCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,SAASO,eAAe;CACtB,MAAMP,IAAIC,SAASC,cAAc,MAAM;AACvCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,SAASQ,eAAe;CACtB,MAAMR,IAAIC,SAASC,cAAc,MAAM;AACvCF,GAAEG,cAAc;AAChB,QAAOH;;AAET,IAAaS,OAAb,cAA0Bb,kBAAkB;CAC1C,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAOZ,cAAc;EAC3B,MAAMa,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,yDAAyD,KAAKiB,MAAMC,MAAM,CAAC;AAEhHrB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP;;;AAGX,IAAaQ,aAAb,cAAgCvB,kBAAkB;CAChD,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAOP,cAAc;EAC3B,MAAMQ,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,iCAAiC,KAAKiB,MAAMC,MAAM,CAAC;AAExFrB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP;;;AAGX,IAAaS,YAAb,cAA+BxB,kBAAkB;CAC/C,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAON,cAAc;EAC3B,MAAMO,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,6CAA6C,KAAKiB,MAAMC,MAAM,CAAC;AAEpGrB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP;;;AAGX,IAAaU,kBAAb,cAAqCzB,kBAAkB;CACrD,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAOL,cAAc;EAC3B,MAAMM,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,iCAAiC,KAAKiB,MAAMC,MAAM,CAAC;AAExFrB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP;;;AAGX,IAAaW,cAAb,cAAiC1B,kBAAkB;CACjD,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAOJ,cAAc;EAC3B,MAAMK,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,YAAY,KAAKiB,MAAMC,MAAM,CAAC;AAEnErB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP;;;AAGX,IAAaY,aAAb,cAAgC3B,kBAAkB;CAChD,CAACH,qBAAqBiB,GAAG;EACvB,MAAMC,OAAOH,cAAc;EAC3B,MAAMI,MAAMD;EACZ,MAAME,UAAUF,KAAKG;AACrBpB,gBAAckB,KAAKF,GAAG,YAAYZ,GAAG,8BAA8B,KAAKiB,MAAMC,MAAM,CAAC;AAErFrB,eAAasB,SAAIP,GAAG,YAAY,KAAKK,MAAMG,SAAS;AACpD,SAAOP"}

package/dist/checkbox.d.mts

@@ -7,7 +7,7 @@ declare class Checkbox extends ZagComponent {
   checked: boolean | 'indeterminate';
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     checked: any;
     defaultChecked: any;
     disabled: any;
@@ -30,7 +30,7 @@ declare class Checkbox extends ZagComponent {
     '[data-part="hidden-input"]': string;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Checkbox as default };

package/dist/checkbox.mjs

@@ -1,24 +1,27 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_ELEMENT, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_REGISTER_COND, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE } from "./bind.mjs";
+import { n as reactiveTextValue } from "./reactive-text.mjs";
+import { t as reactiveClassName } from "./reactive-class-name.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as checkbox from "@zag-js/checkbox";
 //#region src/components/checkbox.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<label data-part=root><input data-part=hidden-input type=checkbox class=sr-only><div data-part=control class=\"checkbox-control h-4 w-4 shrink-0 rounded-xs border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"><span data-part=indicator class=\"checkbox-indicator flex items-center justify-center text-current h-full w-full\"><svg xmlns=http://www.w3.org/2000/svg viewBox=\"0 0 24 24\" fill=none stroke=currentColor stroke-width=3 stroke-linecap=round stroke-linejoin=round class=\"h-3 w-3\"><polyline points=\"20 6 9 17 4 12\"></polyline></svg></span></div><!--1-->";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<span data-part=label class=\"checkbox-label text-sm font-medium leading-none\">0";
+	return t.content.firstChild;
+}
 var Checkbox = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-checkbox";
-	}
-	constructor(...args) {
-		super(...args);
+	constructor(..._args) {
+		super(..._args);
 		this.checked = false;
-		this.props;
-		this[geaCondValueSymbol(0)] = !!this.props.label;
-		this[GEA_REGISTER_COND](0, "c0", () => {
-			this.props;
-			return this.props.label;
-		}, () => {
-			this.props;
-			return `<span data-part="label" class="checkbox-label text-sm font-medium leading-none">${geaEscapeHtml(String(this.props.label))}</span>`;
-		}, null);
 	}
 	createMachine(_props) {
 		return checkbox.machine;
@@ -56,22 +59,18 @@ var Checkbox = class extends ZagComponent {
 	syncState(api) {
 		this.checked = api.checkedState;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<label id="${__id}" data-part="root" class="${`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"><input data-part="hidden-input" type="checkbox" class="sr-only" /><div data-part="control" class="checkbox-control h-4 w-4 shrink-0 rounded-xs border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"><span data-part="indicator" class="checkbox-indicator flex items-center justify-center text-current h-full w-full"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="h-3 w-3"><polyline points="20 6 9 17 4 12"></polyline></svg></span></div><!--${__id + "-c0"}-->${props.label && `<span data-part="label" class="checkbox-label text-sm font-medium leading-none">${geaEscapeHtml(String(props.label))}</span>` || ""}<!--${__id + "-c0-end"}--></label>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = `checkbox-root inline-flex items-center gap-2 cursor-pointer ${value || ""}`;
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		if (key === "label") this[GEA_PATCH_COND](0);
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const anchor1 = root.childNodes[2];
+		reactiveClassName(el0, d, this, () => `checkbox-root inline-flex items-center gap-2 cursor-pointer ${this.props.class || ""}`);
+		conditionalTruthy(anchor1.parentNode, anchor1, d, this, () => this.props.label, (d) => {
+			const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+			const t0 = root.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.label);
+			return root;
+		});
+		return root;
 	}
 };
 //#endregion

package/dist/checkbox.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","checkbox","normalizeProps","ZagComponent","Checkbox","__geaTagName","constructor","args","props","label","String","checked","createMachine","_props","machine","getMachineProps","id","defaultChecked","disabled","invalid","required","readOnly","name","form","value","onCheckedChange","details","CheckedChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","checkedState","template","__id","_register","class","trim","key","__el","__boundValue","__newClass","replace","className"],"sources":["../src/components/checkbox.tsx"],"sourcesContent":["import * as checkbox from '@zag-js/checkbox'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Checkbox extends ZagComponent {\n  checked: boolean | 'indeterminate' = false\n\n  createMachine(_props: any): any {\n    return checkbox.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      checked: props.checked,\n      defaultChecked: props.defaultChecked,\n      disabled: props.disabled,\n      invalid: props.invalid,\n      required: props.required,\n      readOnly: props.readOnly,\n      name: props.name,\n      form: props.form,\n      value: props.value ?? 'on',\n      onCheckedChange: (details: checkbox.CheckedChangeDetails) => {\n        this.checked = details.checked\n        props.onCheckedChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return checkbox.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"label\"]': 'getLabelProps',\n      '[data-part=\"control\"]': 'getControlProps',\n      '[data-part=\"indicator\"]': 'getIndicatorProps',\n      '[data-part=\"hidden-input\"]': 'getHiddenInputProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.checked = api.checkedState\n  }\n\n  template(props: any) {\n    return (\n      <label\n        data-part=\"root\"\n        class={`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ''}`}\n      >\n        <input data-part=\"hidden-input\" type=\"checkbox\" class=\"sr-only\" />\n        <div\n          data-part=\"control\"\n          class=\"checkbox-control h-4 w-4 shrink-0 rounded-xs border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n        >\n          <span\n            data-part=\"indicator\"\n            class=\"checkbox-indicator flex items-center justify-center text-current h-full w-full\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"h-3 w-3\"\n            >\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n          </span>\n        </div>\n        {props.label && (\n          <span data-part=\"label\" class=\"checkbox-label text-sm font-medium leading-none\">\n            {props.label}\n          </span>\n        )}\n      </label>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBU,WAArB,cAAsCD,aAAa;;sBAAA;;CAHnDG,YAAsB,GAAGC,MAAI;AAA7B,QAAM,GAAGA,KAAK;iBAIyB;AA2ClB,OAAAC;AAAA,OAAAb,mBAAA,EAAA,IAAA,CAAA,CA/CrB,KAAKa,MA4EUC;AA5Ef,OAAIb,mBAAuB,GAAA,YAAA;AA+CN,QAAAY;AAAA,UA/CrB,KAAKA,MA4EUC;WAAK;AA7BC,QAAAD;AAAA,UAAA,mFA/CrBX,cAAca,OAAd,KAAKF,MA8EcC,MA9EwB,CAAC,CAAA;KAAA,KAAA;;CAM1CG,cAAcC,QAAkB;AAC9B,SAAOZ,SAASa;;CAGlBC,gBAAgBP,OAAY;AAC1B,SAAO;GACLQ,IAAI,KAAKA;GACTL,SAASH,MAAMG;GACfM,gBAAgBT,MAAMS;GACtBC,UAAUV,MAAMU;GAChBC,SAASX,MAAMW;GACfC,UAAUZ,MAAMY;GAChBC,UAAUb,MAAMa;GAChBC,MAAMd,MAAMc;GACZC,MAAMf,MAAMe;GACZC,OAAOhB,MAAMgB,SAAS;GACtBC,kBAAkBC,YAA2C;AAC3D,SAAKf,UAAUe,QAAQf;AACvBH,UAAMiB,kBAAkBC,QAAQ;;GAEnC;;CAGHE,WAAWC,SAAc;AACvB,SAAO5B,SAAS6B,QAAQD,SAAS3B,eAAe;;CAGlD6B,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,6BAA2B;GAC3B,gCAA8B;GAC/B;;CAGHC,UAAUC,KAAU;AAClB,OAAKtB,UAAUsB,IAAIC;;CAGrBC,SAAS3B,OAAY;EAAA,MAAA4B,OAAA,KAAApB;AAAAtB,YAAA2C,UAAAlC,cAAA,gBAAA;AACnB,SAAA,cAAAiC,KAAA,4BAGW,+DAA+D5B,MAAM8B,SAAS,KAAIC,MAAA,CAAA,qnBAnDjGH,OAAU,MAAK,KA4EN5B,MAAMC,SAAK,mFA5EpBZ,cAAca,OA8EDF,MAAMC,MA9EwB,CAAC,CAAA,YAAA,GAAA,MAA5C2B,OAAU,UAAS;;CAAnB,CAAAtC,oBAAwB0C,KAAKhB,OAAK;AAAA,MAAAgB,QAAA,SAAA;GAAA,MAAAC,OAAA,KAAA1C;AA+Cb,QAAAS;GAAA,MAAAkC,eAIN,+DAA+DlB,SAAe;AAAI,OAAAiB,MAnDjG;IACM,MAAME,aADXjC,OAAOgC,gBAAyB,GAAG,CAAEH,MAAM,CAACK,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;AACvF,MAAAH,QAAA,QAHL,MAAIxC,gBAAwB,EAAE"}
+{"version":3,"file":"checkbox.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","reactiveTextValue","conditionalTruthy","checkbox","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","Checkbox","checked","createMachine","_props","machine","getMachineProps","props","id","defaultChecked","disabled","invalid","required","readOnly","name","form","value","onCheckedChange","details","CheckedChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","checkedState","d","root","cloneNode","el0","anchor1","childNodes","class","parentNode","label","marker0","t0"],"sources":["../src/components/checkbox.tsx"],"sourcesContent":["import * as checkbox from '@zag-js/checkbox'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Checkbox extends ZagComponent {\n  checked: boolean | 'indeterminate' = false\n\n  createMachine(_props: any): any {\n    return checkbox.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      checked: props.checked,\n      defaultChecked: props.defaultChecked,\n      disabled: props.disabled,\n      invalid: props.invalid,\n      required: props.required,\n      readOnly: props.readOnly,\n      name: props.name,\n      form: props.form,\n      value: props.value ?? 'on',\n      onCheckedChange: (details: checkbox.CheckedChangeDetails) => {\n        this.checked = details.checked\n        props.onCheckedChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return checkbox.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"label\"]': 'getLabelProps',\n      '[data-part=\"control\"]': 'getControlProps',\n      '[data-part=\"indicator\"]': 'getIndicatorProps',\n      '[data-part=\"hidden-input\"]': 'getHiddenInputProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.checked = api.checkedState\n  }\n\n  template(props: any) {\n    return (\n      <label\n        data-part=\"root\"\n        class={`checkbox-root inline-flex items-center gap-2 cursor-pointer ${props.class || ''}`}\n      >\n        <input data-part=\"hidden-input\" type=\"checkbox\" class=\"sr-only\" />\n        <div\n          data-part=\"control\"\n          class=\"checkbox-control h-4 w-4 shrink-0 rounded-xs border border-primary shadow transition-colors data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground\"\n        >\n          <span\n            data-part=\"indicator\"\n            class=\"checkbox-indicator flex items-center justify-center text-current h-full w-full\"\n          >\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              viewBox=\"0 0 24 24\"\n              fill=\"none\"\n              stroke=\"currentColor\"\n              stroke-width=\"3\"\n              stroke-linecap=\"round\"\n              stroke-linejoin=\"round\"\n              class=\"h-3 w-3\"\n            >\n              <polyline points=\"20 6 9 17 4 12\"></polyline>\n            </svg>\n          </span>\n        </div>\n        {props.label && (\n          <span data-part=\"label\" class=\"checkbox-label text-sm font-medium leading-none\">\n            {props.label}\n          </span>\n        )}\n      </label>\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAIA,IAAIO,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMC,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAIC,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMP,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBG,WAArB,cAAsCX,aAAa;;;iBACZ;;CACrCa,cAAcC,QAAkB;AAC9B,SAAOhB,SAASiB;;CAElBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,SAASK,MAAML;GACfO,gBAAgBF,MAAME;GACtBC,UAAUH,MAAMG;GAChBC,SAASJ,MAAMI;GACfC,UAAUL,MAAMK;GAChBC,UAAUN,MAAMM;GAChBC,MAAMP,MAAMO;GACZC,MAAMR,MAAMQ;GACZC,OAAOT,MAAMS,SAAS;GACtBC,kBAAkBC,YAA2C;AAC3D,SAAKhB,UAAUgB,QAAQhB;AACvBK,UAAMU,kBAAkBC,QAAQ;;GAEnC;;CAEHE,WAAWC,SAAc;AACvB,SAAOjC,SAASkC,QAAQD,SAAShC,eAAe;;CAElDkC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,6BAA2B;GAC3B,gCAA8B;GAC/B;;CAEHC,UAAUC,KAAU;AAClB,OAAKvB,UAAUuB,IAAIC;;CAErB,CAAC1C,qBAAqB2C,GAAG;EACvB,MAAMC,QAAQrC,eAAeA,aAAaC,cAAc,GAAGqC,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAKI,WAAW;AAChC/C,oBAAkB6C,KAAKH,GAAG,YAAY,+DAA+D,KAAKpB,MAAM0B,SAAS,KAAK;AAC9H9C,oBAAkB4C,QAAQG,YAAYH,SAASJ,GAAG,YAAY,KAAKpB,MAAM4B,QAAOR,MAAK;GACnF,MAAMC,QAAQ7B,eAAeA,aAAaC,cAAc,GAAG6B,UAAU,KAAK;GAE1E,MAAMQ,KADUT,KAAK9B;AAErBZ,qBAAkBmD,IAAIV,GAAG,YAAY,KAAKpB,MAAM4B,MAAM;AACtD,UAAOP;IACP;AACF,SAAOA"}

package/dist/clipboard.d.mts

@@ -7,7 +7,7 @@ declare class Clipboard extends ZagComponent {
   copied: boolean;
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     value: any;
     defaultValue: any;
     timeout: any;
@@ -26,7 +26,7 @@ declare class Clipboard extends ZagComponent {
     '[data-part="indicator-not-copied"]': (api: any) => any;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Clipboard as default };

package/dist/clipboard.mjs

@@ -1,35 +1,40 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_ELEMENT, GEA_OBSERVE, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_REGISTER_COND, GEA_RENDERED, GEA_SETUP_LOCAL_STATE_OBSERVERS, GEA_STORE_ROOT, geaCondPatchedSymbol, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE } from "./bind.mjs";
+import { n as reactiveTextValue } from "./reactive-text.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
+import { t as conditional } from "./conditional.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as clipboard from "@zag-js/clipboard";
 //#region src/components/clipboard.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><!--1--><div data-part=control class=\"clipboard-control flex gap-2\"><input data-part=input class=\"clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs\"><button data-part=trigger class=\"clipboard-trigger inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent\"><!--2-->";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<label data-part=label class=\"clipboard-label text-sm font-medium mb-1 block\">0";
+	return t.content.firstChild;
+}
+let _tpl2_root = null;
+function _tpl2_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<span data-part=indicator-copied>✓ Copied";
+	return t.content.firstChild;
+}
+let _tpl3_root = null;
+function _tpl3_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<span data-part=indicator-not-copied>Copy";
+	return t.content.firstChild;
+}
 var Clipboard = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-clipboard";
-	}
-	constructor(...args) {
-		super(...args);
+	constructor(..._args) {
+		super(..._args);
 		this.copied = false;
-		this.props;
-		this[geaCondValueSymbol(0)] = !!this.copied;
-		this[geaCondValueSymbol(1)] = !!this.props.label;
-		this[GEA_REGISTER_COND](0, "c0", () => {
-			this.props;
-			return this.copied;
-		}, () => {
-			this.props;
-			return `<span data-part="indicator-copied">✓ Copied</span>`;
-		}, () => {
-			this.props;
-			return `<span data-part="indicator-not-copied">Copy</span>`;
-		});
-		this[GEA_REGISTER_COND](1, "c1", () => {
-			this.props;
-			return this.props.label;
-		}, () => {
-			this.props;
-			return `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(this.props.label))}</label>`;
-		}, null);
 	}
 	createMachine(_props) {
 		return clipboard.machine;
@@ -63,35 +68,24 @@ var Clipboard = class extends ZagComponent {
 	syncState(api) {
 		this.copied = api.copied;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<div id="${__id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${((props.class || "") != null ? String(props.class || "") : "").trim()}"`}><!--${__id + "-c1"}-->${props.label && `<label data-part="label" class="clipboard-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(props.label))}</label>` || ""}<!--${__id + "-c1-end"}--><div data-part="control" class="clipboard-control flex gap-2"><input data-part="input" class="clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs" /><button data-part="trigger" class="clipboard-trigger inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent"><!--${__id + "-c0"}-->${(this.copied ? `<span data-part="indicator-copied">✓ Copied</span>` : `<span data-part="indicator-not-copied">Copy</span>`) || ""}<!--${__id + "-c0-end"}--></button></div></div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = value || "";
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
-		this[GEA_PATCH_COND](0);
-		if (key === "label") this[GEA_PATCH_COND](1);
-	}
-	__observe_local_copied(value, change) {
-		if (this[GEA_RENDERED]) {
-			if (!this[geaCondPatchedSymbol(0)]) {
-				this[geaCondPatchedSymbol(0)] = this[GEA_PATCH_COND](0);
-				if (this[geaCondPatchedSymbol(0)]) queueMicrotask(() => this[geaCondPatchedSymbol(0)] = false);
-			}
-		}
-	}
-	[GEA_SETUP_LOCAL_STATE_OBSERVERS]() {
-		if (!this[GEA_STORE_ROOT]) return;
-		this[GEA_OBSERVE](this, ["copied"], this.__observe_local_copied);
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const anchor1 = root.firstChild;
+		const anchor2 = root.childNodes[1].childNodes[1].firstChild;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		conditionalTruthy(anchor1.parentNode, anchor1, d, this, () => this.props.label, (d) => {
+			const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+			const t0 = root.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.label);
+			return root;
+		});
+		conditional(anchor2.parentNode, anchor2, d, this, () => this.copied, (d) => {
+			return (_tpl2_root || (_tpl2_root = _tpl2_create())).cloneNode(true);
+		}, (d) => {
+			return (_tpl3_root || (_tpl3_root = _tpl3_create())).cloneNode(true);
+		});
+		return root;
 	}
 };
 //#endregion