@geajs/ui 0.2.4 → 0.2.9

package/dist/pin-input.mjs

@@ -1,27 +1,35 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_DOM_ITEM, GEA_DOM_KEY, GEA_ELEMENT, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_REGISTER_COND, GEA_REGISTER_MAP, GEA_SYNC_MAP, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE, u as GEA_PROXY_RAW } from "./bind.mjs";
+import { n as reactiveTextValue } from "./reactive-text.mjs";
+import { t as reactiveAttr } from "./reactive-attr.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
+import { n as _rescue, t as keyedList } from "./keyed-list.mjs";
+import { t as GEA_DOM_ITEM } from "./keyed-list-symbols.mjs";
+import { n as createItemProxy, t as createItemObservable } from "./item-obs.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as pinInput from "@zag-js/pin-input";
 //#region src/components/pin-input.tsx
-const __v = (v) => v != null && typeof v === "object" ? v.valueOf() : v;
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><!--1--><div data-part=control class=\"pin-input-control flex gap-2\"><!--2--></div><input data-part=hidden-input type=hidden>";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<label data-part=label class=\"pin-input-label text-sm font-medium mb-2 block\">0";
+	return t.content.firstChild;
+}
+let _tpl2_root = null;
+function _tpl2_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<input data-part=input class=\"pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\">";
+	return t.content.firstChild;
+}
+const __rq_L0 = /* @__PURE__ */ new Map();
 var PinInput = class extends ZagComponent {
-	static {
-		this.__geaTagName = "pin-input";
-	}
-	#__rowEls_b1;
-	#__dc_b1;
-	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 `<label data-part="label" class="pin-input-label text-sm font-medium mb-2 block">${geaEscapeHtml(String(this.props.label))}</label>`;
-		}, null);
-	}
 	createMachine(_props) {
 		return pinInput.machine;
 	}
@@ -70,75 +78,68 @@ var PinInput = class extends ZagComponent {
 		this.value = api.value;
 		this.valueAsString = api.valueAsString;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		const count = props.count ?? 4;
-		const inputs = Array.from({ length: count }, (_, i) => i);
-		return `<div id="${__id}" data-part="root"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${((props.class || "") != null ? String(props.class || "") : "").trim()}"`}><!--${__id + "-c0"}-->${props.label && `<label data-part="label" class="pin-input-label text-sm font-medium mb-2 block">${geaEscapeHtml(String(props.label))}</label>` || ""}<!--${__id + "-c0-end"}--><div id="${__id + "-b1"}" data-part="control" class="pin-input-control flex gap-2">${inputs.map((i) => `<input data-gid="${String(i)}" data-part="input"${String(i) == null || String(i) === false ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring" />`).join("") + "<!---->"}</div><input data-part="hidden-input" type="hidden" /></div>`;
-	}
-	render__unresolved_0Item(i) {
-		return `<input data-gid="${String(i)}" data-part="input"${__v(String(i)) == null || __v(String(i)) === false ? "" : ` data-index="${String(i)}"`} class="pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring" />`;
-	}
-	create__unresolved_0Item(item) {
-		var __c = this.#__dc_b1 || (this.#__dc_b1 = this.____unresolved_0_container);
-		if (!__c.__geaTpl) try {
-			var __tw = document.createElement("template");
-			__tw.innerHTML = this.render__unresolved_0Item("__dummy__");
-			__c.__geaTpl = __tw.content.firstElementChild;
-			__c.__geaTpl?.removeAttribute("data-gid");
-		} catch (__err) {
-			console.error(__err);
-		}
-		if (__c.__geaTpl) var el = __c.__geaTpl.cloneNode(true);
-		else {
-			var __fw = document.createElement("template");
-			__fw.innerHTML = this.render__unresolved_0Item(item);
-			var el = __fw.content.firstElementChild;
-		}
-		var __av = String(item);
-		if (__av == null || __av === false) el.removeAttribute("data-index");
-		else {
-			const __newAttr = String(__av);
-			if (el.getAttribute("data-index") !== __newAttr) el.setAttribute("data-index", __newAttr);
-		}
-		el[GEA_DOM_KEY] = String(item);
-		el[GEA_DOM_ITEM] = item;
-		return el;
-	}
-	patch__unresolved_0Item(row, item, __prevItem) {
-		if (!row) return;
-		var __av = String(item);
-		if (__av == null || __av === false) row.removeAttribute("data-index");
-		else {
-			const __newAttr = String(__av);
-			if (row.getAttribute("data-index") !== __newAttr) row.setAttribute("data-index", __newAttr);
-		}
-		row[GEA_DOM_KEY] = String(item);
-		(this.#__rowEls_b1 || (this.#__rowEls_b1 = {}))[String(item)] = row;
-		row[GEA_DOM_ITEM] = item;
-	}
-	[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;
+	[GEA_CREATE_TEMPLATE](d) {
+		this.props.count;
+		Array.from({ length: this.props.count ?? 4 }, (_, i) => i);
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const anchor1 = root.firstChild;
+		const anchor2 = root.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;
+		});
+		const __ki_L0 = (i, idx, d) => {
+			const root = (_tpl2_root || (_tpl2_root = _tpl2_create())).cloneNode(true);
+			const el0 = root;
+			const el1 = el0;
+			reactiveAttr(el0, d, this, "key", () => i);
+			reactiveAttr(el1, d, this, "data-index", () => String(i));
+			root[GEA_DOM_ITEM] = i;
+			return root;
+		};
+		keyedList({
+			container: anchor2.parentNode,
+			anchor: anchor2,
+			disposer: d,
+			root: this,
+			pending: __rq_L0,
+			path: () => Array.from({ length: this.props.count ?? 4 }, (_, i) => i),
+			key: (i, idx) => i,
+			createEntry: (item, idx) => {
+				const __k = item;
+				const __r = _rescue(__rq_L0, String(__k), item);
+				if (__r) {
+					const __raw = item && item[GEA_PROXY_RAW] || item;
+					if (__r.item !== __raw) {
+						__r.item;
+						__r.item = __raw;
+						__r.obs.current = item;
+						__r.obs._fire();
+					}
+					return __r;
+				}
+				const __rd = d.child();
+				const __obs = createItemObservable(item);
+				const __el = __ki_L0(item !== null && typeof item === "object" ? createItemProxy(__obs) : item, idx, __rd);
+				return {
+					key: __k,
+					item: item && item[GEA_PROXY_RAW] || item,
+					element: __el,
+					disposer: __rd,
+					obs: __obs
+				};
+			},
+			patchEntry: (e, newItem, newIdx) => {
+				e.item = newItem && newItem[GEA_PROXY_RAW] || newItem;
+				e.obs.current = newItem;
+				e.obs._fire();
 			}
-		}
-		if (key === "label") this[GEA_PATCH_COND](0);
-		if (key === "count") this[GEA_SYNC_MAP](0);
-	}
-	__observe_local_props(__v, __c) {
-		this[GEA_SYNC_MAP](0);
-	}
-	createdHooks() {
-		this[GEA_REGISTER_MAP](0, "____unresolved_0_container", () => __gid(this.id + "-b1"), () => {
-			const count = this.props.count ?? 4;
-			return Array.from({ length: count }, (_, i) => i);
-		}, (__item) => this.create__unresolved_0Item(__item));
+		});
+		return root;
 	}
 };
 //#endregion

package/dist/pin-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pin-input.mjs","names":["__v","v","valueOf","Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_DOM_KEY","GEA_DOM_ITEM","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","GEA_SYNC_MAP","GEA_REGISTER_MAP","pinInput","normalizeProps","ZagComponent","PinInput","__geaTagName","__rowEls_b1","__dc_b1","constructor","args","props","label","String","value","valueAsString","createMachine","_props","machine","getMachineProps","id","defaultValue","count","type","otp","mask","placeholder","disabled","readOnly","invalid","name","form","blurOnComplete","autoFocus","onValueChange","details","ValueChangeDetails","onValueComplete","onValueInvalid","connectApi","service","connect","getSpreadMap","[data-part=\"input\"]","api","el","index","parseInt","HTMLElement","dataset","getInputProps","syncState","template","__id","_register","inputs","Array","from","length","_","i","class","trim","map","join","render__unresolved_0Item","create__unresolved_0Item","item","__c","____unresolved_0_container","__geaTpl","__tw","document","createElement","innerHTML","content","firstElementChild","removeAttribute","__err","console","error","cloneNode","__fw","__av","__newAttr","getAttribute","setAttribute","patch__unresolved_0Item","row","__prevItem","key","__el","__boundValue","__newClass","replace","className","__observe_local_props","createdHooks","__gid","__item"],"sources":["../src/components/pin-input.tsx"],"sourcesContent":["import * as pinInput from '@zag-js/pin-input'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class PinInput extends ZagComponent {\n  declare value: string[]\n  declare valueAsString: string\n\n  createMachine(_props: any): any {\n    return pinInput.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      count: props.count ?? 4,\n      type: props.type ?? 'numeric',\n      otp: props.otp ?? false,\n      mask: props.mask ?? false,\n      placeholder: props.placeholder ?? '○',\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      invalid: props.invalid,\n      name: props.name,\n      form: props.form,\n      blurOnComplete: props.blurOnComplete ?? false,\n      autoFocus: props.autoFocus,\n      onValueChange: (details: pinInput.ValueChangeDetails) => {\n        this.value = details.value\n        this.valueAsString = details.valueAsString\n        props.onValueChange?.(details)\n      },\n      onValueComplete: props.onValueComplete,\n      onValueInvalid: props.onValueInvalid,\n    }\n  }\n\n  connectApi(service: any) {\n    return pinInput.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=\"hidden-input\"]': 'getHiddenInputProps',\n      '[data-part=\"input\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getInputProps({ index })\n      },\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.valueAsString = api.valueAsString\n  }\n\n  template(props: any) {\n    const count = props.count ?? 4\n    const inputs = Array.from({ length: count }, (_, i) => i)\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        {props.label && (\n          <label data-part=\"label\" class=\"pin-input-label text-sm font-medium mb-2 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"pin-input-control flex gap-2\">\n          {inputs.map((i: number) => (\n            <input\n              key={i}\n              data-part=\"input\"\n              data-index={String(i)}\n              class=\"pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"\n            />\n          ))}\n        </div>\n        <input data-part=\"hidden-input\" type=\"hidden\" />\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"pin-input.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","conditionalTruthy","reactiveAttr","GEA_DOM_ITEM","createItemObservable","createItemProxy","GEA_PROXY_RAW","_rescue","keyedList","pinInput","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","_tpl2_root","_tpl2_create","__rq_L0","Map","PinInput","value","valueAsString","createMachine","_props","machine","getMachineProps","props","id","defaultValue","count","type","otp","mask","placeholder","disabled","readOnly","invalid","name","form","blurOnComplete","autoFocus","onValueChange","details","ValueChangeDetails","onValueComplete","onValueInvalid","connectApi","service","connect","getSpreadMap","[data-part=\"input\"]","api","el","index","parseInt","HTMLElement","dataset","getInputProps","syncState","d","inputs","Array","from","length","_","i","root","cloneNode","el0","anchor1","anchor2","childNodes","class","parentNode","label","marker0","t0","__ki_L0","idx","el1","String","container","anchor","disposer","pending","path","key","createEntry","item","__k","__r","__raw","__prev","obs","current","_fire","__rd","child","__obs","__li","__el","element","patchEntry","e","newItem","newIdx"],"sources":["../src/components/pin-input.tsx"],"sourcesContent":["import * as pinInput from '@zag-js/pin-input'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class PinInput extends ZagComponent {\n  declare value: string[]\n  declare valueAsString: string\n\n  createMachine(_props: any): any {\n    return pinInput.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      count: props.count ?? 4,\n      type: props.type ?? 'numeric',\n      otp: props.otp ?? false,\n      mask: props.mask ?? false,\n      placeholder: props.placeholder ?? '○',\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      invalid: props.invalid,\n      name: props.name,\n      form: props.form,\n      blurOnComplete: props.blurOnComplete ?? false,\n      autoFocus: props.autoFocus,\n      onValueChange: (details: pinInput.ValueChangeDetails) => {\n        this.value = details.value\n        this.valueAsString = details.valueAsString\n        props.onValueChange?.(details)\n      },\n      onValueComplete: props.onValueComplete,\n      onValueInvalid: props.onValueInvalid,\n    }\n  }\n\n  connectApi(service: any) {\n    return pinInput.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=\"hidden-input\"]': 'getHiddenInputProps',\n      '[data-part=\"input\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getInputProps({ index })\n      },\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.valueAsString = api.valueAsString\n  }\n\n  template(props: any) {\n    const count = props.count ?? 4\n    const inputs = Array.from({ length: count }, (_, i) => i)\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        {props.label && (\n          <label data-part=\"label\" class=\"pin-input-label text-sm font-medium mb-2 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"pin-input-control flex gap-2\">\n          {inputs.map((i: number) => (\n            <input\n              key={i}\n              data-part=\"input\"\n              data-index={String(i)}\n              class=\"pin-input-field h-9 w-9 rounded-md border border-input bg-transparent text-center text-sm shadow-xs focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"\n            />\n          ))}\n        </div>\n        <input data-part=\"hidden-input\" type=\"hidden\" />\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/popover.d.mts

@@ -7,7 +7,7 @@ declare class Popover extends ZagComponent {
   open: boolean;
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     open: any;
     defaultOpen: any;
     modal: any;
@@ -32,7 +32,7 @@ declare class Popover extends ZagComponent {
     '[data-part="arrow-tip"]': string;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Popover as default };

package/dist/popover.mjs

@@ -1,32 +1,30 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_ELEMENT, GEA_INSTANTIATE_CHILD_COMPONENTS, GEA_MOUNT_COMPILED_CHILD_COMPONENTS, GEA_ON_PROP_CHANGE, GEA_PATCH_COND, GEA_PATCH_NODE, GEA_REGISTER_COND, geaCondValueSymbol, geaEscapeHtml } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE } from "./bind.mjs";
+import { n as reactiveTextValue, t as reactiveText } from "./reactive-text.mjs";
+import { t as reactiveClass } from "./reactive-class.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as popover from "@zag-js/popover";
 //#region src/components/popover.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div><button data-part=trigger class=popover-trigger>0</button><div data-part=positioner class=popover-positioner><div data-part=content class=\"popover-content z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden\"><!--2--><!--3--><div class=popover-body>0</div><button data-part=close-trigger class=\"popover-close-trigger absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-sm\">✕";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=title class=\"popover-title font-medium leading-none mb-2\">0";
+	return t.content.firstChild;
+}
+let _tpl2_root = null;
+function _tpl2_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<p data-part=description class=\"popover-description text-sm text-muted-foreground mb-3\">0";
+	return t.content.firstChild;
+}
 var Popover = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-popover";
-	}
-	constructor(...args) {
-		super(...args);
-		this.props;
-		this[geaCondValueSymbol(0)] = !!this.props.title;
-		this[geaCondValueSymbol(1)] = !!this.props.description;
-		this[GEA_REGISTER_COND](0, "c0", () => {
-			this.props;
-			return this.props.title;
-		}, () => {
-			this.props;
-			return `<div data-part="title" class="popover-title font-medium leading-none mb-2">${geaEscapeHtml(String(this.props.title))}</div>`;
-		}, null);
-		this[GEA_REGISTER_COND](1, "c1", () => {
-			this.props;
-			return this.props.description;
-		}, () => {
-			this.props;
-			return `<p data-part="description" class="popover-description text-sm text-muted-foreground mb-3">${geaEscapeHtml(String(this.props.description))}</p>`;
-		}, null);
-	}
 	createMachine(_props) {
 		return popover.machine;
 	}
@@ -65,49 +63,29 @@ var Popover = class extends ZagComponent {
 	syncState(api) {
 		this.open = api.open;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<div id="${__id}"${(props.class || "") == null || (props.class || "") === false ? "" : ` class="${((props.class || "") != null ? String(props.class || "") : "").trim()}"`}><button id="${__id + "-b1"}" data-part="trigger" class="popover-trigger">${geaEscapeHtml(String(props.triggerLabel || "Open"))}</button><div data-part="positioner" class="popover-positioner"><div data-part="content" class="popover-content z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden"><!--${__id + "-c0"}-->${props.title && `<div data-part="title" class="popover-title font-medium leading-none mb-2">${geaEscapeHtml(String(props.title))}</div>` || ""}<!--${__id + "-c0-end"}--><!--${__id + "-c1"}-->${props.description && `<p data-part="description" class="popover-description text-sm text-muted-foreground mb-3">${geaEscapeHtml(String(props.description))}</p>` || ""}<!--${__id + "-c1-end"}--><div id="${__id + "-b2"}" class="popover-body">${props.children}</div><button data-part="close-trigger" class="popover-close-trigger absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-sm">✕</button></div></div></div>`;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		const __id = this.id;
-		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;
-			}
-		}
-		if (key === "triggerLabel") {
-			const __el = this.__e0 || (this.__e0 = __gid(__id + "-b1"));
-			this.props;
-			const __boundValue = value || "Open";
-			if (__el && __el.textContent !== __boundValue) __el.textContent = __boundValue;
-		}
-		if (key === "children") {
-			const __el = this.__e1 || (this.__e1 = __gid(__id + "-b2"));
-			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]();
-				}
-			}
-		}
-		if (key === "title") this[GEA_PATCH_COND](0);
-		if (key === "description") this[GEA_PATCH_COND](1);
-	}
-	__resetEls() {
-		this.__e0 = null;
-		this.__e1 = null;
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const marker1 = root.firstChild.firstChild;
+		const anchor2 = root.childNodes[1].firstChild.firstChild;
+		const anchor3 = root.childNodes[1].firstChild.childNodes[1];
+		const marker4 = root.childNodes[1].firstChild.childNodes[2].firstChild;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		reactiveTextValue(marker1, d, this, () => this.props.triggerLabel || "Open");
+		conditionalTruthy(anchor2.parentNode, anchor2, d, this, () => this.props.title, (d) => {
+			const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+			const t0 = root.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.title);
+			return root;
+		});
+		conditionalTruthy(anchor3.parentNode, anchor3, d, this, () => this.props.description, (d) => {
+			const root = (_tpl2_root || (_tpl2_root = _tpl2_create())).cloneNode(true);
+			const t0 = root.firstChild;
+			reactiveTextValue(t0, d, this, () => this.props.description);
+			return root;
+		});
+		reactiveText(marker4, d, this, () => this.props.children);
+		return root;
 	}
 };
 //#endregion

package/dist/popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","GEA_PATCH_COND","popover","normalizeProps","ZagComponent","Popover","__geaTagName","constructor","args","props","title","description","String","open","createMachine","_props","machine","getMachineProps","id","defaultOpen","modal","portalled","autoFocus","closeOnInteractOutside","closeOnEscape","positioning","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","template","__id","_register","class","trim","triggerLabel","children","key","value","__el","__boundValue","__newClass","replace","className","__e0","__gid","textContent","__e1","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","parentComponent","__resetEls"],"sources":["../src/components/popover.tsx"],"sourcesContent":["import * as popover from '@zag-js/popover'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Popover extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return popover.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      modal: props.modal ?? false,\n      portalled: props.portalled ?? true,\n      autoFocus: props.autoFocus ?? true,\n      closeOnInteractOutside: props.closeOnInteractOutside ?? true,\n      closeOnEscape: props.closeOnEscape ?? true,\n      positioning: props.positioning,\n      onOpenChange: (details: popover.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return popover.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"positioner\"]': 'getPositionerProps',\n      '[data-part=\"content\"]': 'getContentProps',\n      '[data-part=\"title\"]': 'getTitleProps',\n      '[data-part=\"description\"]': 'getDescriptionProps',\n      '[data-part=\"close-trigger\"]': 'getCloseTriggerProps',\n      '[data-part=\"arrow\"]': 'getArrowProps',\n      '[data-part=\"arrow-tip\"]': 'getArrowTipProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    return (\n      <div class={props.class || ''}>\n        <button data-part=\"trigger\" class=\"popover-trigger\">\n          {props.triggerLabel || 'Open'}\n        </button>\n        <div data-part=\"positioner\" class=\"popover-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"popover-content z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden\"\n          >\n            {props.title && (\n              <div data-part=\"title\" class=\"popover-title font-medium leading-none mb-2\">\n                {props.title}\n              </div>\n            )}\n            {props.description && (\n              <p data-part=\"description\" class=\"popover-description text-sm text-muted-foreground mb-3\">\n                {props.description}\n              </p>\n            )}\n            <div class=\"popover-body\">{props.children}</div>\n            <button\n              data-part=\"close-trigger\"\n              class=\"popover-close-trigger absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-sm\"\n            >\n              &#x2715;\n            </button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"popover.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","conditionalTruthy","reactiveText","popover","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","_tpl2_root","_tpl2_create","Popover","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","modal","portalled","autoFocus","closeOnInteractOutside","closeOnEscape","positioning","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","marker1","anchor2","childNodes","anchor3","marker4","class","t1","triggerLabel","parentNode","title","marker0","t0","description","t4","children"],"sources":["../src/components/popover.tsx"],"sourcesContent":["import * as popover from '@zag-js/popover'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Popover extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return popover.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      modal: props.modal ?? false,\n      portalled: props.portalled ?? true,\n      autoFocus: props.autoFocus ?? true,\n      closeOnInteractOutside: props.closeOnInteractOutside ?? true,\n      closeOnEscape: props.closeOnEscape ?? true,\n      positioning: props.positioning,\n      onOpenChange: (details: popover.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return popover.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"positioner\"]': 'getPositionerProps',\n      '[data-part=\"content\"]': 'getContentProps',\n      '[data-part=\"title\"]': 'getTitleProps',\n      '[data-part=\"description\"]': 'getDescriptionProps',\n      '[data-part=\"close-trigger\"]': 'getCloseTriggerProps',\n      '[data-part=\"arrow\"]': 'getArrowProps',\n      '[data-part=\"arrow-tip\"]': 'getArrowTipProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    return (\n      <div class={props.class || ''}>\n        <button data-part=\"trigger\" class=\"popover-trigger\">\n          {props.triggerLabel || 'Open'}\n        </button>\n        <div data-part=\"positioner\" class=\"popover-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"popover-content z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-hidden\"\n          >\n            {props.title && (\n              <div data-part=\"title\" class=\"popover-title font-medium leading-none mb-2\">\n                {props.title}\n              </div>\n            )}\n            {props.description && (\n              <p data-part=\"description\" class=\"popover-description text-sm text-muted-foreground mb-3\">\n                {props.description}\n              </p>\n            )}\n            <div class=\"popover-body\">{props.children}</div>\n            <button\n              data-part=\"close-trigger\"\n              class=\"popover-close-trigger absolute top-2 right-2 text-gray-400 hover:text-gray-600 text-sm\"\n            >\n              &#x2715;\n            </button>\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;;;AAIA,IAAIQ,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,IAAIG,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMT,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBK,UAArB,cAAqCb,aAAa;CAEhDe,cAAcC,QAAkB;AAC9B,SAAOlB,QAAQmB;;CAEjBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,MAAMK,MAAML;GACZO,aAAaF,MAAME;GACnBC,OAAOH,MAAMG,SAAS;GACtBC,WAAWJ,MAAMI,aAAa;GAC9BC,WAAWL,MAAMK,aAAa;GAC9BC,wBAAwBN,MAAMM,0BAA0B;GACxDC,eAAeP,MAAMO,iBAAiB;GACtCC,aAAaR,MAAMQ;GACnBC,eAAeC,YAAuC;AACpD,SAAKf,OAAOe,QAAQf;AACpBK,UAAMS,eAAeC,QAAQ;;GAEhC;;CAEHE,WAAWC,SAAc;AACvB,SAAOlC,QAAQmC,QAAQD,SAASjC,eAAe;;CAEjDmC,eAAe;AACb,SAAO;GACL,2BAAyB;GACzB,8BAA4B;GAC5B,2BAAyB;GACzB,yBAAuB;GACvB,+BAA6B;GAC7B,iCAA+B;GAC/B,yBAAuB;GACvB,6BAA2B;GAC5B;;CAEHC,UAAUC,KAAU;AAClB,OAAKtB,OAAOsB,IAAItB;;CAElB,CAACrB,qBAAqB4C,GAAG;EACvB,MAAMC,QAAQrC,eAAeA,aAAaC,cAAc,GAAGqC,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAK9B,WAAWA;EAChC,MAAMkC,UAAUJ,KAAKK,WAAW,GAAGnC,WAAWA;EAC9C,MAAMoC,UAAUN,KAAKK,WAAW,GAAGnC,WAAWmC,WAAW;EACzD,MAAME,UAAUP,KAAKK,WAAW,GAAGnC,WAAWmC,WAAW,GAAGnC;AAC5Dd,gBAAc8C,KAAKH,GAAG,YAAY,KAAKlB,MAAM2B,SAAS,GAAG;AAEzDnD,oBAAkBoD,SAAIV,GAAG,YAAY,KAAKlB,MAAM6B,gBAAgB,OAAO;AACvEpD,oBAAkB8C,QAAQO,YAAYP,SAASL,GAAG,YAAY,KAAKlB,MAAM+B,QAAOb,MAAK;GACnF,MAAMC,QAAQ7B,eAAeA,aAAaC,cAAc,GAAG6B,UAAU,KAAK;GAE1E,MAAMa,KADUd,KAAK9B;AAErBb,qBAAkByD,IAAIf,GAAG,YAAY,KAAKlB,MAAM+B,MAAM;AACtD,UAAOZ;IACP;AACF1C,oBAAkBgD,QAAQK,YAAYL,SAASP,GAAG,YAAY,KAAKlB,MAAMkC,cAAahB,MAAK;GACzF,MAAMC,QAAQ3B,eAAeA,aAAaC,cAAc,GAAG2B,UAAU,KAAK;GAE1E,MAAMa,KADUd,KAAK9B;AAErBb,qBAAkByD,IAAIf,GAAG,YAAY,KAAKlB,MAAMkC,YAAY;AAC5D,UAAOf;IACP;AAEFzC,eAAayD,SAAIjB,GAAG,YAAY,KAAKlB,MAAMoC,SAAS;AACpD,SAAOjB"}

package/dist/progress.d.mts

@@ -8,7 +8,7 @@ declare class Progress extends ZagComponent {
   percent: number;
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     value: any;
     defaultValue: any;
     min: any;
@@ -27,7 +27,7 @@ declare class Progress extends ZagComponent {
     '[data-part="value-text"]': string;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Progress as default };

package/dist/progress.mjs

@@ -1,24 +1,28 @@
 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_SETUP_LOCAL_STATE_OBSERVERS, GEA_STORE_ROOT, GEA_UPDATE_TEXT, 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 reactiveStyle } from "./reactive-style.mjs";
+import { t as conditionalTruthy } from "./conditional-truthy.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as progress from "@zag-js/progress";
 //#region src/components/progress.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><div class=\"flex justify-between mb-1\"><!--1--><span data-part=value-text class=\"progress-value-text text-sm text-muted-foreground\"><!--2-->%</span></div><div data-part=track class=\"progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20\"><div data-part=range class=\"progress-range h-full w-full flex-1 bg-primary transition-all\">";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<span data-part=label class=\"progress-label text-sm font-medium\">0";
+	return t.content.firstChild;
+}
 var Progress = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-progress";
-	}
-	constructor(...args) {
-		super(...args);
+	constructor(..._args) {
+		super(..._args);
 		this.percent = 0;
-		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="progress-label text-sm font-medium">${geaEscapeHtml(String(this.props.label))}</span>`;
-		}, null);
 	}
 	createMachine(_props) {
 		return progress.machine;
@@ -50,34 +54,24 @@ var Progress = class extends ZagComponent {
 		this.value = api.value;
 		this.percent = api.percent;
 	}
-	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()}"`}><div class="flex justify-between mb-1"><!--${__id + "-c0"}-->${props.label && `<span data-part="label" class="progress-label text-sm font-medium">${geaEscapeHtml(String(props.label))}</span>` || ""}<!--${__id + "-c0-end"}--><span id="${__id + "-b1"}" data-part="value-text" class="progress-value-text text-sm text-muted-foreground">${geaEscapeHtml(String(this.percent))}%</span></div><div data-part="track" class="progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20"><div id="${__id + "-b2"}" data-part="range" class="progress-range h-full w-full flex-1 bg-primary transition-all" style="${Object.entries({ width: `${this.percent}%` }).map(([__k, __v]) => `${__k.replace(/[A-Z]/g, "-$&")}: ${typeof __v === "number" && __v !== 0 ? __v + "px" : __v}`).join("; ")}"></div></div></div>`;
-	}
-	__observe_local_percent(percent, change) {
-		this[GEA_UPDATE_TEXT]("b1", `
-            ${this.percent}%
-          `);
-	}
-	[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;
-			}
-		}
-		if (key === "label") this[GEA_PATCH_COND](0);
-	}
-	__resetEls() {
-		this.__e0 = null;
-	}
-	[GEA_SETUP_LOCAL_STATE_OBSERVERS]() {
-		if (!this[GEA_STORE_ROOT]) return;
-		this[GEA_OBSERVE](this, ["percent"], this.__observe_local_percent);
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		const el0 = root;
+		const anchor1 = root.firstChild.firstChild;
+		const marker2 = root.firstChild.childNodes[1].firstChild;
+		const el3 = root.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;
+		});
+		const t2 = document.createTextNode("");
+		marker2.replaceWith(t2);
+		reactiveTextValue(t2, d, this, ["percent"]);
+		reactiveStyle(el3, d, this, () => ({ width: `${this.percent}%` }));
+		return root;
 	}
 };
 //#endregion

package/dist/progress.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"progress.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_UPDATE_TEXT","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","GEA_SETUP_LOCAL_STATE_OBSERVERS","GEA_STORE_ROOT","GEA_OBSERVE","progress","normalizeProps","ZagComponent","Progress","__geaTagName","constructor","args","props","label","String","value","percent","createMachine","_props","machine","getMachineProps","id","defaultValue","min","max","orientation","onValueChange","connectApi","service","connect","getSpreadMap","syncState","api","template","__id","_register","class","trim","Object","entries","width","map","__k","__v","replace","join","__observe_local_percent","change","key","__el","__boundValue","__newClass","className","__resetEls","__e0"],"sources":["../src/components/progress.tsx"],"sourcesContent":["import * as progress from '@zag-js/progress'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Progress extends ZagComponent {\n  declare value: number | null\n  percent = 0\n\n  createMachine(_props: any): any {\n    return progress.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue ?? 0,\n      min: props.min ?? 0,\n      max: props.max ?? 100,\n      orientation: props.orientation,\n      onValueChange: props.onValueChange,\n    }\n  }\n\n  connectApi(service: any) {\n    return progress.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"label\"]': 'getLabelProps',\n      '[data-part=\"track\"]': 'getTrackProps',\n      '[data-part=\"range\"]': 'getRangeProps',\n      '[data-part=\"value-text\"]': 'getValueTextProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.percent = api.percent\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        <div class=\"flex justify-between mb-1\">\n          {props.label && (\n            <span data-part=\"label\" class=\"progress-label text-sm font-medium\">\n              {props.label}\n            </span>\n          )}\n          <span data-part=\"value-text\" class=\"progress-value-text text-sm text-muted-foreground\">\n            {this.percent}%\n          </span>\n        </div>\n        <div data-part=\"track\" class=\"progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20\">\n          <div\n            data-part=\"range\"\n            class=\"progress-range h-full w-full flex-1 bg-primary transition-all\"\n            style={{ width: `${this.percent}%` }}\n          ></div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBc,WAArB,cAAsCD,aAAa;;sBAAA;;CAHnDG,YAAsB,GAAGC,MAAI;AAA7B,QAAM,GAAGA,KAAK;iBAKF;AAqCS,OAAAC;AAAA,OAAAjB,mBAAA,EAAA,IAAA,CAAA,CA1CrB,KAAKiB,MA8CYC;AA9CjB,OAAIjB,mBAAuB,GAAA,YAAA;AA0CN,QAAAgB;AAAA,UA1CrB,KAAKA,MA8CYC;WAAK;AAJD,QAAAD;AAAA,UAAA,sEA1CrBf,cAAciB,OAAd,KAAKF,MAgDgBC,MAhDsB,CAAC,CAAA;KAAA,KAAA;;CAO1CI,cAAcC,QAAkB;AAC9B,SAAOb,SAASc;;CAGlBC,gBAAgBR,OAAY;AAC1B,SAAO;GACLS,IAAI,KAAKA;GACTN,OAAOH,MAAMG;GACbO,cAAcV,MAAMU,gBAAgB;GACpCC,KAAKX,MAAMW,OAAO;GAClBC,KAAKZ,MAAMY,OAAO;GAClBC,aAAab,MAAMa;GACnBC,eAAed,MAAMc;GACtB;;CAGHC,WAAWC,SAAc;AACvB,SAAOvB,SAASwB,QAAQD,SAAStB,eAAe;;CAGlDwB,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,yBAAuB;GACvB,yBAAuB;GACvB,8BAA4B;GAC7B;;CAGHC,UAAUC,KAAU;AAClB,OAAKjB,QAAQiB,IAAIjB;AACjB,OAAKC,UAAUgB,IAAIhB;;CAGrBiB,SAASrB,OAAY;EAAA,MAAAsB,OAAA,KAAAb;AAAA3B,YAAAyC,UAAA5B,cAAA,gBAAA;AACnB,SAAA,YAAA2B,KAAA,qBAC+BtB,MAAMwB,SAAS,OAAE,SAAjBxB,MAAMwB,SAAS,QAAE,QAAA,KAAA,aAAjBxB,MAAMwB,SAAS,OAAE,OAAAtB,OAAjBF,MAAMwB,SAAS,GAAE,GAAA,IAAAC,MAAA,CAAA,GAAA,8CA5CpDH,OAAU,MAAK,KA8CJtB,MAAMC,SAAK,sEA9CtBhB,cAAciB,OAgDCF,MAAMC,MAhDsB,CAAC,CAAA,YAAA,GAAA,MAA5CqB,OAAU,UAAS,eAAnBA,OAAU,MAAK,qFAAfrC,cAAciB,OAoDD,KAAKE,QApDyB,CAAC,CAAA,sIAA5CkB,OAAU,MAAK,mGAAfI,OAAOC,QA2DY,EAAEC,OAAO,GAAG,KAAKxB,QAAO,IA3DP,CAAC,CAACyB,KAAK,CAACC,KAAKC,SAAI,GAArDD,IAAIE,QAAQ,UAAU,MAAM,CAAA,IAA5B,OAAOD,QAAQ,YAAYA,QAAQ,IAAIA,MAAM,OAAOA,MAA4B,CAA1DE,KAAK,KAAK,CAAA;;CAAhCC,wBAAA9B,SAAA+B,QAAoE;AAApE,OAAIjD,iBAAwB,MAAI;cAoDnB,KAAKkB,QAAO;YApD+B;;CAAxD,CAAAjB,oBAAwBiD,KAAKjC,OAAK;AAAA,MAAAiC,QAAA,SAAA;GAAA,MAAAC,OAAA,KAAAjD;AA0Cb,QAAAY;GAAA,MAAAsC,eAEcnC,SAAe;AAAE,OAAAkC,MA5CpD;IACM,MAAME,aADXrC,OAAOoC,gBAAyB,GAAG,CAAEb,MAAM,CAACO,QAAQ,QAAQ,IACf;AACxC,QAAIK,KAAsBG,cAAcD,WAAYF,MAAsBG,YAAYD;;;AACvF,MAAAH,QAAA,QAHL,MAAI/C,gBAAwB,EAAE;;CAA9BoD,aAAU;AAAV,OAAIC,OAAyB;;CAA7B,CAAApD,mCAA0B;AAA1B,MAAI,CAAC,KAAIC,gBAA2B;AAApC,OAAIC,aAAwB,MAAI,CAAA,UAAA,EAAyB,KAAI0C,wBAAuB"}
+{"version":3,"file":"progress.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","conditionalTruthy","reactiveStyle","progress","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","Progress","value","percent","createMachine","_props","machine","getMachineProps","props","id","defaultValue","min","max","orientation","onValueChange","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","anchor1","marker2","childNodes","el3","class","parentNode","label","marker0","t0","t2","createTextNode","replaceWith","width"],"sources":["../src/components/progress.tsx"],"sourcesContent":["import * as progress from '@zag-js/progress'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Progress extends ZagComponent {\n  declare value: number | null\n  percent = 0\n\n  createMachine(_props: any): any {\n    return progress.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue ?? 0,\n      min: props.min ?? 0,\n      max: props.max ?? 100,\n      orientation: props.orientation,\n      onValueChange: props.onValueChange,\n    }\n  }\n\n  connectApi(service: any) {\n    return progress.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"label\"]': 'getLabelProps',\n      '[data-part=\"track\"]': 'getTrackProps',\n      '[data-part=\"range\"]': 'getRangeProps',\n      '[data-part=\"value-text\"]': 'getValueTextProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.percent = api.percent\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        <div class=\"flex justify-between mb-1\">\n          {props.label && (\n            <span data-part=\"label\" class=\"progress-label text-sm font-medium\">\n              {props.label}\n            </span>\n          )}\n          <span data-part=\"value-text\" class=\"progress-value-text text-sm text-muted-foreground\">\n            {this.percent}%\n          </span>\n        </div>\n        <div data-part=\"track\" class=\"progress-track relative h-2 w-full overflow-hidden rounded-full bg-primary/20\">\n          <div\n            data-part=\"range\"\n            class=\"progress-range h-full w-full flex-1 bg-primary transition-all\"\n            style={{ width: `${this.percent}%` }}\n          ></div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;;;;;AAIA,IAAIQ,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;;;iBAEvC;;CACVc,cAAcC,QAAkB;AAC9B,SAAOjB,SAASkB;;CAElBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTP,OAAOM,MAAMN;GACbQ,cAAcF,MAAME,gBAAgB;GACpCC,KAAKH,MAAMG,OAAO;GAClBC,KAAKJ,MAAMI,OAAO;GAClBC,aAAaL,MAAMK;GACnBC,eAAeN,MAAMM;GACtB;;CAEHC,WAAWC,SAAc;AACvB,SAAO5B,SAAS6B,QAAQD,SAAS3B,eAAe;;CAElD6B,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,yBAAuB;GACvB,yBAAuB;GACvB,8BAA4B;GAC7B;;CAEHC,UAAUC,KAAU;AAClB,OAAKlB,QAAQkB,IAAIlB;AACjB,OAAKC,UAAUiB,IAAIjB;;CAErB,CAACpB,qBAAqBsC,GAAG;EACvB,MAAMC,QAAQ/B,eAAeA,aAAaC,cAAc,GAAG+B,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAKxB,WAAWA;EAChC,MAAM4B,UAAUJ,KAAKxB,WAAW6B,WAAW,GAAG7B;EAC9C,MAAM8B,MAAMN,KAAKK,WAAW,GAAG7B;AAC/Bd,gBAAcwC,KAAKH,GAAG,YAAY,KAAKb,MAAMqB,SAAS,GAAG;AACzD3C,oBAAkBuC,QAAQK,YAAYL,SAASJ,GAAG,YAAY,KAAKb,MAAMuB,QAAOV,MAAK;GACnF,MAAMC,QAAQvB,eAAeA,aAAaC,cAAc,GAAGuB,UAAU,KAAK;GAE1E,MAAMU,KADUX,KAAKxB;AAErBb,qBAAkBgD,IAAIZ,GAAG,YAAY,KAAKb,MAAMuB,MAAM;AACtD,UAAOT;IACP;EACF,MAAMY,KAAKxC,SAASyC,eAAe,GAAG;AACtCT,UAAQU,YAAYF,GAAG;AACvBjD,oBAAkBiD,IAAIb,GAAG,MAAM,CAAC,UAAU,CAAC;AAC3ClC,gBAAcyC,KAAKP,GAAG,aAAa,EACjCgB,OAAO,GAAG,KAAKlC,QAAO,IACvB,EAAE;AACH,SAAOmB"}