@geajs/ui 0.2.3 → 0.2.9

package/dist/separator.mjs

@@ -1,49 +1,23 @@
-import { t as cn } from "./cn.mjs";
-import { Component, GEA_ELEMENT, GEA_ON_PROP_CHANGE } 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 reactiveAttr } from "./reactive-attr.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
 //#region src/components/separator.tsx
-var Separator = class extends Component {
-	static {
-		this.__geaTagName = "gea-separator";
-	}
-	template(props) {
-		const __id = this.id;
-		const isVertical = props.orientation === "vertical";
-		return `<div id="${__id}"${cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) == null || cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) === false ? "" : ` class="${(cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class) != null ? String(cn("shrink-0 bg-border", isVertical ? "h-full w-[1px]" : "h-[1px] w-full", props.class)) : "").trim()}"`} role="separator"${(props.orientation || "horizontal") == null || (props.orientation || "horizontal") === false ? "" : ` aria-orientation="${props.orientation || "horizontal"}"`}></div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "orientation") {
-			{
-				const __el = this[GEA_ELEMENT];
-				this.props;
-				const __boundValue = cn("shrink-0 bg-border", this.props.orientation === "vertical" ? "h-full w-[1px]" : "h-[1px] w-full", this.props.class);
-				if (__el) {
-					const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-					if (__el.className !== __newClass) __el.className = __newClass;
-				}
-			}
-			{
-				const __el = this[GEA_ELEMENT];
-				this.props;
-				const __boundValue = value || "horizontal";
-				if (__el) {
-					var __av = __boundValue;
-					if (__av == null || __av === false) __el.removeAttribute("aria-orientation");
-					else {
-						const __newAttr = String(__av);
-						if (__el.getAttribute("aria-orientation") !== __newAttr) __el.setAttribute("aria-orientation", __newAttr);
-					}
-				}
-			}
-		}
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("shrink-0 bg-border", this.props.orientation === "vertical" ? "h-full w-[1px]" : "h-[1px] w-full", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div role=separator>";
+	return t.content.firstChild;
+}
+var Separator = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		this.props.orientation;
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const el1 = el0;
+		reactiveClass(el0, d, this, () => cn("shrink-0 bg-border", this.props.orientation === "vertical" ? "h-full w-[1px]" : "h-[1px] w-full", this.props.class));
+		reactiveAttr(el1, d, this, "aria-orientation", () => this.props.orientation || "horizontal");
+		return root;
 	}
 };
 //#endregion

package/dist/separator.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"separator.mjs","names":["Component","GEA_ON_PROP_CHANGE","GEA_ELEMENT","cn","Separator","__geaTagName","template","props","__id","id","isVertical","orientation","class","String","trim","key","value","__el","__boundValue","__newClass","replace","className","__av","removeAttribute","__newAttr","getAttribute","setAttribute"],"sources":["../src/components/separator.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport default class Separator extends Component {\n  template(props: any) {\n    const isVertical = props.orientation === 'vertical'\n\n    return (\n      <div\n        class={cn('shrink-0 bg-border', isVertical ? 'h-full w-[1px]' : 'h-[1px] w-full', props.class)}\n        role=\"separator\"\n        aria-orientation={props.orientation || 'horizontal'}\n      ></div>\n    )\n  }\n}\n"],"mappings":";;;AAGA,IAAqBI,YAArB,cAAuCJ,UAAU;;sBAAA;;CAC/CM,SAASC,OAAY;EAAA,MAAAC,OAAA,KAAAC;EACnB,MAAMC,aAAaH,MAAMI,gBAAgB;AAEzC,SAAA,YAAAH,KAAA,GAEWL,GAAG,sBAAsBO,aAAa,mBAAmB,kBAAkBH,MAAMK,MAAM,IAAA,QAAvFT,GAAG,sBAAsBO,aAAa,mBAAmB,kBAAkBH,MAAMK,MAAM,KAAA,QAAA,KAAA,YAAvFT,GAAG,sBAAsBO,aAAa,mBAAmB,kBAAkBH,MAAMK,MAAM,IAAA,OAAAC,OAAvFV,GAAG,sBAAsBO,aAAa,mBAAmB,kBAAkBH,MAAMK,MAAM,CAAA,GAAA,IAAAE,MAAA,CAAA,GAAA,oBAE5EP,MAAMI,eAAe,iBAAY,SAAjCJ,MAAMI,eAAe,kBAAY,QAAA,KAAA,sBAAjCJ,MAAMI,eAAe,aAAY,GAAA;;CAV3D,CAAAV,oBAAwBc,KAAKC,OAAK;AAAA,MAAAD,QAAA,eAAA;GAAA;IAAA,MAAAE,OAAA,KAAAf;AAGb,SAAAK;IACkC,MAAAW,eAIxCf,GAAG,sBARlB,KAAKI,MAIwBI,gBAAgB,aAIQ,mBAAmB,kBARxE,KAAKJ,MAQ2FK,MAAM;AAAA,QAAAK,MARtG;KACM,MAAME,aADXN,OAAOK,gBAAyB,GAAG,CAAEJ,MAAM,CAACM,QAAQ,QAAQ,IACf;AACxC,SAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;GACvF;IAAA,MAAAF,OAAA,KAAAf;AAAgB,SAAAK;IAAA,MAAAW,eAOKF,SAAqB;AAAY,QAAAC,MAAA;KATrD,IAAIK,OAAIJ;AACR,SAAII,QAAQ,QAAQA,SAAS,MAC3BL,MAAsBM,gBAAgB,mBAAmB;UACpD;MACL,MAAMC,YAAYX,OAAOS,KAAK;AAC9B,UAAIL,KAAsBQ,aAAa,mBAAmB,KAAKD,UAC7DP,MAAsBS,aAAa,oBAAoBF,UAAU;;;;;AACpE,MAAAT,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAf;AALc,QAAAK;GACkC,MAAAW,eAIxCf,GAAG,sBARlB,KAAKI,MAIwBI,gBAAgB,aAIQ,mBAAmB,kBAAgBK,MAAc;AAAA,OAAAC,MARtG;IACM,MAAME,aADXN,OAAOK,gBAAyB,GAAG,CAAEJ,MAAM,CAACM,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF"}
+{"version":3,"file":"separator.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveAttr","CompiledComponent","Component","cn","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","Separator","d","isVertical","props","orientation","root","cloneNode","el0","el1","class"],"sources":["../src/components/separator.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport default class Separator extends Component {\n  template(props: any) {\n    const isVertical = props.orientation === 'vertical'\n\n    return (\n      <div\n        class={cn('shrink-0 bg-border', isVertical ? 'h-full w-[1px]' : 'h-[1px] w-full', props.class)}\n        role=\"separator\"\n        aria-orientation={props.orientation || 'horizontal'}\n      ></div>\n    )\n  }\n}\n"],"mappings":";;;;;AAGA,IAAIM,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMC,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBC,YAArB,cAAuCX,kBAAkB;CACvD,CAACH,qBAAqBe,GAAG;AACJ,OAAKE,MAAMC;EAC9B,MAAMC,QAAQb,eAAeA,aAAaC,cAAc,GAAGa,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,MAAMD;AACZpB,gBAAcoB,KAAKN,GAAG,YAAYV,GAAG,sBAAsB,KAAKY,MAAMC,gBAAgB,aAAa,mBAAmB,kBAAkB,KAAKD,MAAMM,MAAM,CAAC;AAC1JrB,eAAaoB,KAAKP,GAAG,MAAM,0BAA0B,KAAKE,MAAMC,eAAe,aAAa;AAC5F,SAAOC"}

package/dist/skeleton.d.mts

@@ -2,7 +2,7 @@ import { Component } from "@geajs/core";
 
 //#region src/components/skeleton.d.ts
 declare class Skeleton extends Component {
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Skeleton as default };

package/dist/skeleton.mjs

@@ -1,39 +1,15 @@
-import { t as cn } from "./cn.mjs";
-import { Component, GEA_CLONE_TEMPLATE, GEA_ELEMENT, GEA_ON_PROP_CHANGE } 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 reactiveClass } from "./reactive-class.mjs";
 //#region src/components/skeleton.tsx
-var Skeleton = class extends Component {
-	static {
-		this.__geaTagName = "gea-skeleton";
-	}
-	template(props) {
-		return `<div id="${this.id}"${cn("animate-pulse rounded-md bg-primary/10", props.class) == null || cn("animate-pulse rounded-md bg-primary/10", props.class) === false ? "" : ` class="${(cn("animate-pulse rounded-md bg-primary/10", props.class) != null ? String(cn("animate-pulse rounded-md bg-primary/10", props.class)) : "").trim()}"`}></div>`;
-	}
-	static {
-		this.__tpl = (() => {
-			if (typeof document === "undefined") return void 0;
-			var t = document.createElement("template");
-			t.innerHTML = "<div></div>";
-			return t;
-		})();
-	}
-	[GEA_CLONE_TEMPLATE]() {
-		var __tpl = this.constructor.__tpl;
-		if (!__tpl) throw new Error("[gea] __tpl missing for clone template");
-		var __root = __tpl.content.firstElementChild.cloneNode(true);
-		__root.id = this.id;
-		__root.className = (cn("animate-pulse rounded-md bg-primary/10", props.class) != null ? String(cn("animate-pulse rounded-md bg-primary/10", props.class)) : "").trim();
-		return __root;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = cn("animate-pulse rounded-md bg-primary/10", value);
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
+function _tpl0_create() {
+	return document.createElement("div");
+}
+var Skeleton = class extends CompiledComponent {
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = _tpl0_create();
+		reactiveClass(root, d, this, () => cn("animate-pulse rounded-md bg-primary/10", this.props.class));
+		return root;
 	}
 };
 //#endregion

package/dist/skeleton.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"skeleton.mjs","names":["Component","GEA_CLONE_TEMPLATE","GEA_ON_PROP_CHANGE","GEA_ELEMENT","cn","Skeleton","__geaTagName","template","props","__id","id","class","String","trim","__tpl","document","undefined","t","createElement","innerHTML","constructor","Error","__root","content","firstElementChild","cloneNode","className","key","value","__el","__boundValue","__newClass","replace"],"sources":["../src/components/skeleton.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport default class Skeleton extends Component {\n  template(props: any) {\n    return <div class={cn('animate-pulse rounded-md bg-primary/10', props.class)}></div>\n  }\n}\n"],"mappings":";;;AAGA,IAAqBK,WAArB,cAAsCL,UAAU;;sBAAA;;CAC9CO,SAASC,OAAY;AACnB,SAAA,YADmB,KAAAE,GACnB,GAAmBN,GAAG,0CAA0CI,MAAMG,MAAM,IAAA,QAAzDP,GAAG,0CAA0CI,MAAMG,MAAM,KAAA,QAAA,KAAA,YAAzDP,GAAG,0CAA0CI,MAAMG,MAAM,IAAA,OAAAC,OAAzDR,GAAG,0CAA0CI,MAAMG,MAAM,CAAA,GAAA,IAAAE,MAAA,CAAA,GAAA;;;sBAJ1D;AAClB,OAAI,OAAOE,aAAa,YAAa,QAAOC,KAAAA;GAC5C,IAAIC,IAAIF,SAASG,cAAc,WAAW;AAC1CD,KAAEE,YAAY;AACd,UAAOF;MACL;;CALN,CAAAhB,sBAA0B;EAA1B,IAAIa,QAAQ,KAAKM,YAAYN;AAA7B,MAAI,CAACA,MAAS,OAAM,IAAIO,MAAM,yCAAyC;EAAvE,IAAIC,SAASR,MAAMS,QAAQC,kBAAkBC,UAAU,KAAK;AAA5DH,SAAsBZ,KAAtB,KAAKA;AAALY,SAAsBI,aAICtB,GAAG,0CAA0CI,MAAMG,MAAM,IAAA,OAAAC,OAAzDR,GAAG,0CAA0CI,MAAMG,MAAM,CAAA,GAAA,IAAAE,MAJzB;AAAvD,SAAAS;;CAAA,CAAApB,oBAAwByB,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAA1B;AAGb,QAAAK;GAAA,MAAAsB,eACE1B,GAAG,0CAAwCwB,MAAc;AAAA,OAAAC,MAJhF;IACM,MAAME,aADXnB,OAAOkB,gBAAyB,GAAG,CAAEjB,MAAM,CAACmB,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBH,cAAcK,WAAYF,MAAsBH,YAAYK"}
+{"version":3,"file":"skeleton.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","CompiledComponent","Component","cn","_tpl0_create","e","document","createElement","Skeleton","d","root","el0","props","class"],"sources":["../src/components/skeleton.tsx"],"sourcesContent":["import { Component } from '@geajs/core'\nimport { cn } from '../utils/cn'\n\nexport default class Skeleton extends Component {\n  template(props: any) {\n    return <div class={cn('animate-pulse rounded-md bg-primary/10', props.class)}></div>\n  }\n}\n"],"mappings":";;;;AAGA,SAASK,eAAe;AAEtB,QADUE,SAASC,cAAc,MACzB;;AAEV,IAAqBC,WAArB,cAAsCP,kBAAkB;CACtD,CAACF,qBAAqBU,GAAG;EACvB,MAAMC,OAAON,cAAc;AAE3BJ,gBAAcW,MAAKF,GAAG,YAAYN,GAAG,0CAA0C,KAAKS,MAAMC,MAAM,CAAC;AACjG,SAAOH"}

package/dist/slider.d.mts

@@ -7,7 +7,7 @@ declare class Slider extends ZagComponent {
   value: number[];
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     value: any;
     defaultValue: any;
     min: any;
@@ -37,7 +37,7 @@ declare class Slider extends ZagComponent {
   _syncThumbs(): void;
   syncState(api: any): void;
   _applyAllSpreads(): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Slider as default };

package/dist/slider.mjs

@@ -1,25 +1,26 @@
 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 reactiveClass } from "./reactive-class.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 slider from "@zag-js/slider";
 //#region src/components/slider.tsx
 const THUMB_CLASS = "slider-thumb block h-5 w-5 rounded-full border-2 border-primary bg-background shadow transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring";
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><!--1--><div data-part=control class=\"slider-control relative flex items-center\"><div data-part=track class=\"slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\"><div data-part=range class=\"slider-range absolute h-full bg-primary\"></div></div><div data-part=thumb data-index=0><input data-part=hidden-input data-index=0 type=hidden>";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div class=\"flex justify-between mb-2\"><label data-part=label class=\"slider-label text-sm font-medium\">0";
+	return t.content.firstChild;
+}
 var Slider = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-slider";
-	}
-	constructor(...args) {
-		super(...args);
-		this.props;
-		this[geaCondValueSymbol(0)] = !!this.props.label;
-		this[GEA_REGISTER_COND](0, "c0", () => {
-			this.props;
-			return this.props.label;
-		}, () => {
-			this.props;
-			return `<div class="flex justify-between mb-2"><label data-part="label" class="slider-label text-sm font-medium">${geaEscapeHtml(String(this.props.label))}</label></div>`;
-		}, null);
-	}
 	createMachine(_props) {
 		return slider.machine;
 	}
@@ -93,22 +94,20 @@ var Slider = class extends ZagComponent {
 		this._elementCache?.clear();
 		super._applyAllSpreads();
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<div id="${__id}" data-part="root"${"w-full " + (props.class || "") == null || "w-full " + (props.class || "") === false ? "" : ` class="${("w-full " + (props.class || "") != null ? String("w-full " + (props.class || "")) : "").trim()}"`}><!--${__id + "-c0"}-->${props.label && `<div class="flex justify-between mb-2"><label data-part="label" class="slider-label text-sm font-medium">${geaEscapeHtml(String(props.label))}</label></div>` || ""}<!--${__id + "-c0-end"}--><div data-part="control" class="slider-control relative flex items-center"><div data-part="track" class="slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20"><div data-part="range" class="slider-range absolute h-full bg-primary"></div></div><div data-part="thumb" data-index="0"${THUMB_CLASS == null || THUMB_CLASS === false ? "" : ` class="${(THUMB_CLASS != null ? String(THUMB_CLASS) : "").trim()}"`}><input data-part="hidden-input" data-index="0" type="hidden" /></div></div></div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = "w-full " + (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.firstChild;
+		const el2 = root.childNodes[1].childNodes[1];
+		reactiveClassName(el0, d, this, () => "w-full " + (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.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.label);
+			return root;
+		});
+		reactiveClass(el2, d, this, () => THUMB_CLASS);
+		return root;
 	}
 };
 //#endregion

package/dist/slider.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"slider.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","slider","normalizeProps","ZagComponent","THUMB_CLASS","Slider","__geaTagName","constructor","args","props","label","String","value","createMachine","_props","machine","getMachineProps","id","defaultValue","min","max","step","orientation","thumbAlignment","disabled","readOnly","name","onValueChange","details","ValueChangeDetails","onValueChangeEnd","connectApi","service","connect","getSpreadMap","[data-part=\"thumb\"]","api","el","index","parseInt","HTMLElement","dataset","getThumbProps","[data-part=\"hidden-input\"]","getHiddenInputProps","_syncThumbs","_api","control","querySelector","thumbCount","length","existing","querySelectorAll","i","thumb","document","createElement","setAttribute","className","input","type","appendChild","remove","syncState","_applyAllSpreads","_elementCache","clear","template","__id","_register","class","trim","key","__el","__boundValue","__newClass","replace"],"sources":["../src/components/slider.tsx"],"sourcesContent":["import * as slider from '@zag-js/slider'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nconst THUMB_CLASS =\n  'slider-thumb block h-5 w-5 rounded-full border-2 border-primary bg-background shadow ' +\n  'transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring'\n\nexport default class Slider extends ZagComponent {\n  declare value: number[]\n\n  createMachine(_props: any): any {\n    return slider.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue ?? [50],\n      min: props.min ?? 0,\n      max: props.max ?? 100,\n      step: props.step ?? 1,\n      orientation: props.orientation ?? 'horizontal',\n      thumbAlignment: props.thumbAlignment ?? 'center',\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      name: props.name,\n      'aria-label': props['aria-label'],\n      onValueChange: (details: slider.ValueChangeDetails) => {\n        this.value = details.value\n        props.onValueChange?.(details)\n      },\n      onValueChangeEnd: props.onValueChangeEnd,\n    }\n  }\n\n  connectApi(service: any) {\n    return slider.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=\"track\"]': 'getTrackProps',\n      '[data-part=\"range\"]': 'getRangeProps',\n      '[data-part=\"thumb\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getThumbProps({ index })\n      },\n      '[data-part=\"hidden-input\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getHiddenInputProps({ index })\n      },\n    }\n  }\n\n  _syncThumbs() {\n    if (!this._api || !this.el) return\n    const control = this.el.querySelector('[data-part=\"control\"]')\n    if (!control) return\n\n    const thumbCount = this._api.value.length\n    const existing = control.querySelectorAll(':scope > [data-part=\"thumb\"]')\n\n    if (existing.length === thumbCount) return\n\n    if (existing.length < thumbCount) {\n      for (let i = existing.length; i < thumbCount; i++) {\n        const thumb = document.createElement('div')\n        thumb.setAttribute('data-part', 'thumb')\n        thumb.setAttribute('data-index', String(i))\n        thumb.className = THUMB_CLASS\n\n        const input = document.createElement('input')\n        input.setAttribute('data-part', 'hidden-input')\n        input.setAttribute('data-index', String(i))\n        input.type = 'hidden'\n        thumb.appendChild(input)\n\n        control.appendChild(thumb)\n      }\n    } else {\n      for (let i = existing.length - 1; i >= thumbCount; i--) {\n        existing[i].remove()\n      }\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n  }\n\n  _applyAllSpreads() {\n    this._syncThumbs()\n    this._elementCache?.clear()\n    super._applyAllSpreads()\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={'w-full ' + (props.class || '')}>\n        {props.label && (\n          <div class=\"flex justify-between mb-2\">\n            <label data-part=\"label\" class=\"slider-label text-sm font-medium\">\n              {props.label}\n            </label>\n          </div>\n        )}\n        <div data-part=\"control\" class=\"slider-control relative flex items-center\">\n          <div\n            data-part=\"track\"\n            class=\"slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\"\n          >\n            <div data-part=\"range\" class=\"slider-range absolute h-full bg-primary\"></div>\n          </div>\n          <div data-part=\"thumb\" data-index=\"0\" class={THUMB_CLASS}>\n            <input data-part=\"hidden-input\" data-index=\"0\" type=\"hidden\" />\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"slider.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","reactiveTextValue","conditionalTruthy","reactiveClass","slider","normalizeProps","ZagComponent","THUMB_CLASS","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","Slider","value","createMachine","_props","machine","getMachineProps","props","id","defaultValue","min","max","step","orientation","thumbAlignment","disabled","readOnly","name","onValueChange","details","ValueChangeDetails","onValueChangeEnd","connectApi","service","connect","getSpreadMap","[data-part=\"thumb\"]","api","el","index","parseInt","HTMLElement","dataset","getThumbProps","[data-part=\"hidden-input\"]","getHiddenInputProps","_syncThumbs","_api","control","querySelector","thumbCount","length","existing","querySelectorAll","i","thumb","setAttribute","String","className","input","type","appendChild","remove","syncState","_applyAllSpreads","_elementCache","clear","d","root","cloneNode","el0","anchor1","el2","childNodes","class","parentNode","label","marker0","t0"],"sources":["../src/components/slider.tsx"],"sourcesContent":["import * as slider from '@zag-js/slider'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nconst THUMB_CLASS =\n  'slider-thumb block h-5 w-5 rounded-full border-2 border-primary bg-background shadow ' +\n  'transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring'\n\nexport default class Slider extends ZagComponent {\n  declare value: number[]\n\n  createMachine(_props: any): any {\n    return slider.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue ?? [50],\n      min: props.min ?? 0,\n      max: props.max ?? 100,\n      step: props.step ?? 1,\n      orientation: props.orientation ?? 'horizontal',\n      thumbAlignment: props.thumbAlignment ?? 'center',\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      name: props.name,\n      'aria-label': props['aria-label'],\n      onValueChange: (details: slider.ValueChangeDetails) => {\n        this.value = details.value\n        props.onValueChange?.(details)\n      },\n      onValueChangeEnd: props.onValueChangeEnd,\n    }\n  }\n\n  connectApi(service: any) {\n    return slider.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=\"track\"]': 'getTrackProps',\n      '[data-part=\"range\"]': 'getRangeProps',\n      '[data-part=\"thumb\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getThumbProps({ index })\n      },\n      '[data-part=\"hidden-input\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getHiddenInputProps({ index })\n      },\n    }\n  }\n\n  _syncThumbs() {\n    if (!this._api || !this.el) return\n    const control = this.el.querySelector('[data-part=\"control\"]')\n    if (!control) return\n\n    const thumbCount = this._api.value.length\n    const existing = control.querySelectorAll(':scope > [data-part=\"thumb\"]')\n\n    if (existing.length === thumbCount) return\n\n    if (existing.length < thumbCount) {\n      for (let i = existing.length; i < thumbCount; i++) {\n        const thumb = document.createElement('div')\n        thumb.setAttribute('data-part', 'thumb')\n        thumb.setAttribute('data-index', String(i))\n        thumb.className = THUMB_CLASS\n\n        const input = document.createElement('input')\n        input.setAttribute('data-part', 'hidden-input')\n        input.setAttribute('data-index', String(i))\n        input.type = 'hidden'\n        thumb.appendChild(input)\n\n        control.appendChild(thumb)\n      }\n    } else {\n      for (let i = existing.length - 1; i >= thumbCount; i--) {\n        existing[i].remove()\n      }\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n  }\n\n  _applyAllSpreads() {\n    this._syncThumbs()\n    this._elementCache?.clear()\n    super._applyAllSpreads()\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={'w-full ' + (props.class || '')}>\n        {props.label && (\n          <div class=\"flex justify-between mb-2\">\n            <label data-part=\"label\" class=\"slider-label text-sm font-medium\">\n              {props.label}\n            </label>\n          </div>\n        )}\n        <div data-part=\"control\" class=\"slider-control relative flex items-center\">\n          <div\n            data-part=\"track\"\n            class=\"slider-track relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20\"\n          >\n            <div data-part=\"range\" class=\"slider-range absolute h-full bg-primary\"></div>\n          </div>\n          <div data-part=\"thumb\" data-index=\"0\" class={THUMB_CLASS}>\n            <input data-part=\"hidden-input\" data-index=\"0\" type=\"hidden\" />\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/switch.d.mts

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

package/dist/switch.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 switchMachine from "@zag-js/switch";
 //#region src/components/switch.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><span data-part=control class=\"switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\"><span data-part=thumb class=\"switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"></span></span><!--1-->";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<span data-part=label class=\"switch-label text-sm font-medium\">0";
+	return t.content.firstChild;
+}
 var Switch = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-switch";
-	}
-	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="switch-label text-sm font-medium">${geaEscapeHtml(String(this.props.label))}</span>`;
-		}, null);
 	}
 	createMachine(_props) {
 		return switchMachine.machine;
@@ -56,22 +59,18 @@ var Switch = class extends ZagComponent {
 	syncState(api) {
 		this.checked = api.checked;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<label id="${__id}" data-part="root" class="${`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ""}`.trim()}"><input data-part="hidden-input" type="checkbox" /><span data-part="control" class="switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input"><span data-part="thumb" class="switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"></span></span><!--${__id + "-c0"}-->${props.label && `<span data-part="label" class="switch-label text-sm font-medium">${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 = `switch-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, () => `switch-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/switch.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"switch.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","switchMachine","normalizeProps","ZagComponent","Switch","__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","template","__id","_register","class","trim","key","__el","__boundValue","__newClass","replace","className"],"sources":["../src/components/switch.tsx"],"sourcesContent":["import * as switchMachine from '@zag-js/switch'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Switch extends ZagComponent {\n  checked = false\n\n  createMachine(_props: any): any {\n    return switchMachine.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: switchMachine.CheckedChangeDetails) => {\n        this.checked = details.checked\n        props.onCheckedChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return switchMachine.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=\"thumb\"]': 'getThumbProps',\n      '[data-part=\"hidden-input\"]': 'getHiddenInputProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.checked = api.checked\n  }\n\n  template(props: any) {\n    return (\n      <label data-part=\"root\" class={`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ''}`}>\n        <input data-part=\"hidden-input\" type=\"checkbox\" />\n        <span\n          data-part=\"control\"\n          class=\"switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\"\n        >\n          <span\n            data-part=\"thumb\"\n            class=\"switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n          ></span>\n        </span>\n        {props.label && (\n          <span data-part=\"label\" class=\"switch-label text-sm font-medium\">\n            {props.label}\n          </span>\n        )}\n      </label>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBU,SAArB,cAAoCD,aAAa;;sBAAA;;CAHjDG,YAAsB,GAAGC,MAAI;AAA7B,QAAM,GAAGA,KAAK;iBAIF;AA2CS,OAAAC;AAAA,OAAAb,mBAAA,EAAA,IAAA,CAAA,CA/CrB,KAAKa,MA4DUC;AA5Df,OAAIb,mBAAuB,GAAA,YAAA;AA+CN,QAAAY;AAAA,UA/CrB,KAAKA,MA4DUC;WAAK;AAbC,QAAAD;AAAA,UAAA,oEA/CrBX,cAAca,OAAd,KAAKF,MA8DcC,MA9DwB,CAAC,CAAA;KAAA,KAAA;;CAM1CG,cAAcC,QAAkB;AAC9B,SAAOZ,cAAca;;CAGvBC,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,YAAgD;AAChE,SAAKf,UAAUe,QAAQf;AACvBH,UAAMiB,kBAAkBC,QAAQ;;GAEnC;;CAGHE,WAAWC,SAAc;AACvB,SAAO5B,cAAc6B,QAAQD,SAAS3B,eAAe;;CAGvD6B,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,yBAAuB;GACvB,gCAA8B;GAC/B;;CAGHC,UAAUC,KAAU;AAClB,OAAKtB,UAAUsB,IAAItB;;CAGrBuB,SAAS1B,OAAY;EAAA,MAAA2B,OAAA,KAAAnB;AAAAtB,YAAA0C,UAAAjC,cAAA,gBAAA;AACnB,SAAA,cAAAgC,KAAA,4BACiC,6DAA6D3B,MAAM6B,SAAS,KAAIC,MAAA,CAAA,+gBAjDrHH,OAAU,MAAK,KA4DN3B,MAAMC,SAAK,oEA5DpBZ,cAAca,OA8DDF,MAAMC,MA9DwB,CAAC,CAAA,YAAA,GAAA,MAA5C0B,OAAU,UAAS;;CAAnB,CAAArC,oBAAwByC,KAAKf,OAAK;AAAA,MAAAe,QAAA,SAAA;GAAA,MAAAC,OAAA,KAAAzC;AA+Cb,QAAAS;GAAA,MAAAiC,eAEgB,6DAA6DjB,SAAe;AAAI,OAAAgB,MAjDrH;IACM,MAAME,aADXhC,OAAO+B,gBAAyB,GAAG,CAAEH,MAAM,CAACK,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;AACvF,MAAAH,QAAA,QAHL,MAAIvC,gBAAwB,EAAE"}
+{"version":3,"file":"switch.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","reactiveTextValue","conditionalTruthy","switchMachine","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","Switch","checked","createMachine","_props","machine","getMachineProps","props","id","defaultChecked","disabled","invalid","required","readOnly","name","form","value","onCheckedChange","details","CheckedChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","anchor1","childNodes","class","parentNode","label","marker0","t0"],"sources":["../src/components/switch.tsx"],"sourcesContent":["import * as switchMachine from '@zag-js/switch'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Switch extends ZagComponent {\n  checked = false\n\n  createMachine(_props: any): any {\n    return switchMachine.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: switchMachine.CheckedChangeDetails) => {\n        this.checked = details.checked\n        props.onCheckedChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return switchMachine.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=\"thumb\"]': 'getThumbProps',\n      '[data-part=\"hidden-input\"]': 'getHiddenInputProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.checked = api.checked\n  }\n\n  template(props: any) {\n    return (\n      <label data-part=\"root\" class={`switch-root inline-flex items-center gap-2 cursor-pointer ${props.class || ''}`}>\n        <input data-part=\"hidden-input\" type=\"checkbox\" />\n        <span\n          data-part=\"control\"\n          class=\"switch-control inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input\"\n        >\n          <span\n            data-part=\"thumb\"\n            class=\"switch-thumb pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0\"\n          ></span>\n        </span>\n        {props.label && (\n          <span data-part=\"label\" class=\"switch-label text-sm font-medium\">\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,SAArB,cAAoCX,aAAa;;;iBACrC;;CACVa,cAAcC,QAAkB;AAC9B,SAAOhB,cAAciB;;CAEvBC,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,YAAgD;AAChE,SAAKhB,UAAUgB,QAAQhB;AACvBK,UAAMU,kBAAkBC,QAAQ;;GAEnC;;CAEHE,WAAWC,SAAc;AACvB,SAAOjC,cAAckC,QAAQD,SAAShC,eAAe;;CAEvDkC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,yBAAuB;GACvB,gCAA8B;GAC/B;;CAEHC,UAAUC,KAAU;AAClB,OAAKvB,UAAUuB,IAAIvB;;CAErB,CAAClB,qBAAqB0C,GAAG;EACvB,MAAMC,QAAQpC,eAAeA,aAAaC,cAAc,GAAGoC,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAKI,WAAW;AAChC9C,oBAAkB4C,KAAKH,GAAG,YAAY,6DAA6D,KAAKnB,MAAMyB,SAAS,KAAK;AAC5H7C,oBAAkB2C,QAAQG,YAAYH,SAASJ,GAAG,YAAY,KAAKnB,MAAM2B,QAAOR,MAAK;GACnF,MAAMC,QAAQ5B,eAAeA,aAAaC,cAAc,GAAG4B,UAAU,KAAK;GAE1E,MAAMQ,KADUT,KAAK7B;AAErBZ,qBAAkBkD,IAAIV,GAAG,YAAY,KAAKnB,MAAM2B,MAAM;AACtD,UAAOP;IACP;AACF,SAAOA"}

package/dist/tabs.d.mts

@@ -1,13 +1,18 @@
 import { n as ZagComponent } from "./zag-component.mjs";
+import { GEA_ON_PROP_CHANGE } from "@geajs/core";
 import * as tabs from "@zag-js/tabs";
 import * as _$_zag_js_types0 from "@zag-js/types";
 
 //#region src/components/tabs.d.ts
 declare class Tabs extends ZagComponent {
   value: string | null;
+  _isNodeLike(value: unknown): value is Node;
+  _setPanelContent(panel: HTMLElement, value: unknown): void;
+  _syncPanelContents(nextProps: Record<string, any> | undefined): void;
   createMachine(_props: any): any;
+  [GEA_ON_PROP_CHANGE](key: string, next: unknown): void;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     value: any;
     defaultValue: any;
     orientation: any;
@@ -29,7 +34,7 @@ declare class Tabs extends ZagComponent {
   };
   syncState(api: any): void;
   onAfterRender(): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Tabs as default };