@geajs/ui 0.2.4 → 0.2.10

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

package/dist/clipboard.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"clipboard.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","GEA_RENDERED","geaCondPatchedSymbol","GEA_SETUP_LOCAL_STATE_OBSERVERS","GEA_STORE_ROOT","GEA_OBSERVE","clipboard","normalizeProps","ZagComponent","Clipboard","__geaTagName","constructor","args","props","copied","label","String","createMachine","_props","machine","getMachineProps","id","value","defaultValue","timeout","onStatusChange","details","CopyStatusDetails","connectApi","service","connect","getSpreadMap","api","getIndicatorProps","syncState","template","__id","_register","class","trim","key","__el","__boundValue","__newClass","replace","className","__observe_local_copied","change","queueMicrotask"],"sources":["../src/components/clipboard.tsx"],"sourcesContent":["import * as clipboard from '@zag-js/clipboard'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Clipboard extends ZagComponent {\n  copied = false\n\n  createMachine(_props: any): any {\n    return clipboard.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      timeout: props.timeout ?? 2000,\n      onStatusChange: (details: clipboard.CopyStatusDetails) => {\n        this.copied = details.copied\n        props.onStatusChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return clipboard.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=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"input\"]': 'getInputProps',\n      '[data-part=\"indicator-copied\"]': (api) => api.getIndicatorProps({ copied: true }),\n      '[data-part=\"indicator-not-copied\"]': (api) => api.getIndicatorProps({ copied: false }),\n    }\n  }\n\n  syncState(api: any) {\n    this.copied = api.copied\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        {props.label && (\n          <label data-part=\"label\" class=\"clipboard-label text-sm font-medium mb-1 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"clipboard-control flex gap-2\">\n          <input\n            data-part=\"input\"\n            class=\"clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs\"\n          />\n          <button\n            data-part=\"trigger\"\n            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\"\n          >\n            {this.copied ? (\n              <span data-part=\"indicator-copied\">&#x2713; Copied</span>\n            ) : (\n              <span data-part=\"indicator-not-copied\">Copy</span>\n            )}\n          </button>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"clipboard.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","conditionalTruthy","conditional","clipboard","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","_tpl2_root","_tpl2_create","_tpl3_root","_tpl3_create","Clipboard","copied","createMachine","_props","machine","getMachineProps","props","id","value","defaultValue","timeout","onStatusChange","details","CopyStatusDetails","connectApi","service","connect","getSpreadMap","api","getIndicatorProps","syncState","d","root","cloneNode","el0","anchor1","anchor2","childNodes","class","parentNode","label","marker0","t0"],"sources":["../src/components/clipboard.tsx"],"sourcesContent":["import * as clipboard from '@zag-js/clipboard'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Clipboard extends ZagComponent {\n  copied = false\n\n  createMachine(_props: any): any {\n    return clipboard.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      timeout: props.timeout ?? 2000,\n      onStatusChange: (details: clipboard.CopyStatusDetails) => {\n        this.copied = details.copied\n        props.onStatusChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return clipboard.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=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"input\"]': 'getInputProps',\n      '[data-part=\"indicator-copied\"]': (api) => api.getIndicatorProps({ copied: true }),\n      '[data-part=\"indicator-not-copied\"]': (api) => api.getIndicatorProps({ copied: false }),\n    }\n  }\n\n  syncState(api: any) {\n    this.copied = api.copied\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        {props.label && (\n          <label data-part=\"label\" class=\"clipboard-label text-sm font-medium mb-1 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"clipboard-control flex gap-2\">\n          <input\n            data-part=\"input\"\n            class=\"clipboard-input flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs\"\n          />\n          <button\n            data-part=\"trigger\"\n            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\"\n          >\n            {this.copied ? (\n              <span data-part=\"indicator-copied\">&#x2713; Copied</span>\n            ) : (\n              <span data-part=\"indicator-not-copied\">Copy</span>\n            )}\n          </button>\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,IAAIK,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMX,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBO,YAArB,cAAuCf,aAAa;;;gBACzC;;CACTiB,cAAcC,QAAkB;AAC9B,SAAOpB,UAAUqB;;CAEnBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTC,OAAOF,MAAME;GACbC,cAAcH,MAAMG;GACpBC,SAASJ,MAAMI,WAAW;GAC1BC,iBAAiBC,YAAyC;AACxD,SAAKX,SAASW,QAAQX;AACtBK,UAAMK,iBAAiBC,QAAQ;;GAElC;;CAEHE,WAAWC,SAAc;AACvB,SAAOhC,UAAUiC,QAAQD,SAAS/B,eAAe;;CAEnDiC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,2BAAyB;GACzB,yBAAuB;GACvB,qCAAkCC,QAAOA,IAAIC,kBAAkB,EAC7DlB,QAAQ,MACT,CAAC;GACF,yCAAsCiB,QAAOA,IAAIC,kBAAkB,EACjElB,QAAQ,OACT,CAAA;GACF;;CAEHmB,UAAUF,KAAU;AAClB,OAAKjB,SAASiB,IAAIjB;;CAEpB,CAACvB,qBAAqB2C,GAAG;EACvB,MAAMC,QAAQpC,eAAeA,aAAaC,cAAc,GAAGoC,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAK7B;EACrB,MAAMiC,UAAUJ,KAAKK,WAAW,GAAGA,WAAW,GAAGlC;AACjDd,gBAAc6C,KAAKH,GAAG,YAAY,KAAKf,MAAMsB,SAAS,GAAG;AACzD/C,oBAAkB4C,QAAQI,YAAYJ,SAASJ,GAAG,YAAY,KAAKf,MAAMwB,QAAOT,MAAK;GACnF,MAAMC,QAAQ5B,eAAeA,aAAaC,cAAc,GAAG4B,UAAU,KAAK;GAE1E,MAAMS,KADUV,KAAK7B;AAErBb,qBAAkBoD,IAAIX,GAAG,YAAY,KAAKf,MAAMwB,MAAM;AACtD,UAAOR;IACP;AACFxC,cAAY4C,QAAQG,YAAYH,SAASL,GAAG,YAAY,KAAKpB,SAAQoB,MAAK;AAExE,WADczB,eAAeA,aAAaC,cAAc,GAAG0B,UAAU,KAC1D;MACVF,MAAK;AAEN,WADcvB,eAAeA,aAAaC,cAAc,GAAGwB,UAAU,KAC1D;IACX;AACF,SAAOD"}

package/dist/collapsible.d.mts

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

package/dist/collapsible.mjs

@@ -1,12 +1,17 @@
 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_NODE, 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 { normalizeProps } from "@zag-js/vanilla";
 import * as collapsible from "@zag-js/collapsible";
 //#region src/components/collapsible.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=root><button data-part=trigger class=\"collapsible-trigger flex w-full items-center justify-between py-2 text-sm font-medium\">0</button><div data-part=content class=\"collapsible-content overflow-hidden\"><div class=pb-4>0";
+	return t.content.firstChild;
+}
 var Collapsible = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-collapsible";
-	}
 	createMachine(_props) {
 		return collapsible.machine;
 	}
@@ -35,47 +40,15 @@ var Collapsible = class extends ZagComponent {
 	syncState(api) {
 		this.open = api.open;
 	}
-	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()}"`}><button id="${__id + "-b1"}" data-part="trigger" class="collapsible-trigger flex w-full items-center justify-between py-2 text-sm font-medium">${geaEscapeHtml(String(props.label || "Toggle"))}</button><div data-part="content" class="collapsible-content overflow-hidden"><div id="${__id + "-b2"}" class="pb-4">${props.children}</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 === "label") {
-			const __el = this.__e0 || (this.__e0 = __gid(__id + "-b1"));
-			this.props;
-			const __boundValue = value || "Toggle";
-			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]();
-				}
-			}
-		}
-	}
-	__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 marker2 = root.childNodes[1].firstChild.firstChild;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		reactiveTextValue(marker1, d, this, () => this.props.label || "Toggle");
+		reactiveText(marker2, d, this, () => this.props.children);
+		return root;
 	}
 };
 //#endregion

package/dist/collapsible.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible.mjs","names":["Component","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","collapsible","normalizeProps","ZagComponent","Collapsible","__geaTagName","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","disabled","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","template","__id","_register","class","String","trim","label","children","key","value","__el","__boundValue","__newClass","replace","className","__e0","__gid","textContent","__e1","__tw","document","createElement","innerHTML","__newEl","content","firstElementChild","__existEl","childNodes","length","constructor","parentComponent","__resetEls"],"sources":["../src/components/collapsible.tsx"],"sourcesContent":["import * as collapsible from '@zag-js/collapsible'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Collapsible extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return collapsible.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      disabled: props.disabled,\n      onOpenChange: (details: collapsible.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return collapsible.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"content\"]': 'getContentProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        <button\n          data-part=\"trigger\"\n          class=\"collapsible-trigger flex w-full items-center justify-between py-2 text-sm font-medium\"\n        >\n          {props.label || 'Toggle'}\n        </button>\n        <div data-part=\"content\" class=\"collapsible-content overflow-hidden\">\n          <div class=\"pb-4\">{props.children}</div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBU,cAArB,cAAyCD,aAAa;;sBAAA;;CAGpDI,cAAcC,QAAkB;AAC9B,SAAOP,YAAYQ;;CAGrBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,MAAMK,MAAML;GACZO,aAAaF,MAAME;GACnBC,UAAUH,MAAMG;GAChBC,eAAeC,YAA2C;AACxD,SAAKV,OAAOU,QAAQV;AACpBK,UAAMI,eAAeC,QAAQ;;GAEhC;;CAGHE,WAAWC,SAAc;AACvB,SAAOlB,YAAYmB,QAAQD,SAASjB,eAAe;;CAGrDmB,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,2BAAyB;GACzB,2BAAyB;GAC1B;;CAGHC,UAAUC,KAAU;AAClB,OAAKjB,OAAOiB,IAAIjB;;CAGlBkB,SAASb,OAAY;EAAA,MAAAc,OAAA,KAAAb;AAAAlB,YAAAgC,UAAAvB,cAAA,gBAAA;AACnB,SAAA,YAAAsB,KAAA,qBAC+Bd,MAAMgB,SAAS,OAAE,SAAjBhB,MAAMgB,SAAS,QAAE,QAAA,KAAA,aAAjBhB,MAAMgB,SAAS,OAAE,OAAAC,OAAjBjB,MAAMgB,SAAS,GAAE,GAAA,IAAAE,MAAA,CAAA,GAAA,eAzCpDJ,OAAU,MAAK,sHAAf9B,cAAciC,OA8CHjB,MAAMmB,SAAS,SA9CiB,CAAC,CAAA,yFAA5CL,OAAU,MAAK,iBAiDcd,MAAMoB,SAAQ;;CAjD3C,CAAAnC,oBAAwBoC,KAAKC,OAAK;EAAA,MAAAR,OAAA,KAAAb;AAAA,MAAAoB,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAArC;AAuCb,QAAAc;GAAA,MAAAwB,eAEcF,SAAe;AAAE,OAAAC,MAzCpD;IACM,MAAME,aADXR,OAAOO,gBAAyB,GAAG,CAAEN,MAAM,CAACQ,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;AACvF,MAAAJ,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAAK,SAAA,KAAAA,OAAAC,MAAAf,OAAA,MAAA;AAoCgB,QAAAd;GAAA,MAAAwB,eAOVF,SAAe;AAAQ,OAAAC,QA9C9BA,KAAsBO,gBAAWN,aAArCD,MAAsBO,cAAWN;;AAAqD,MAAAH,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAAQ,SAAA,KAAAA,OAAAF,MAAAf,OAAA,MAAA;AAAA,OAAAS,MAAtF;IACI,MAAMS,OAAOC,SAASC,cAAc,WAAW;AAC/CF,SAAKG,YAASb;IACd,MAAMc,UAAUJ,KAAKK,QAAQC;IAC7B,MAAMC,YAAYhB,KAAsBe;AACxC,QAAIF,WAAWG,aAAaP,KAAKK,QAAQG,WAAWC,WAAW,EAC7D,MAAKC,YAAWvD,gBAAwBoD,WAAWH,SAAS,KAAK;aACxDb,KAAsBY,cAASb,OAA4B;AACpEC,UAAsBY,YAASb;AAC/B,UAAIlC,mCAAyB;AAC7B,SAAI,KAAKuD,gBAAiB,MAAKA,gBAAetD,sCAAyB;;;;;CAV7EuD,aAAU;AAAV,OAAIhB,OAAyB;AAA7B,OAAIG,OAAyB"}
+{"version":3,"file":"collapsible.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","reactiveText","collapsible","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","Collapsible","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","disabled","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","marker1","marker2","childNodes","class","t1","label","t2","children"],"sources":["../src/components/collapsible.tsx"],"sourcesContent":["import * as collapsible from '@zag-js/collapsible'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Collapsible extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return collapsible.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      disabled: props.disabled,\n      onOpenChange: (details: collapsible.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return collapsible.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"trigger\"]': 'getTriggerProps',\n      '[data-part=\"content\"]': 'getContentProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    return (\n      <div data-part=\"root\" class={props.class || ''}>\n        <button\n          data-part=\"trigger\"\n          class=\"collapsible-trigger flex w-full items-center justify-between py-2 text-sm font-medium\"\n        >\n          {props.label || 'Toggle'}\n        </button>\n        <div data-part=\"content\" class=\"collapsible-content overflow-hidden\">\n          <div class=\"pb-4\">{props.children}</div>\n        </div>\n      </div>\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,IAAqBC,cAArB,cAAyCT,aAAa;CAEpDW,cAAcC,QAAkB;AAC9B,SAAOd,YAAYe;;CAErBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,MAAMK,MAAML;GACZO,aAAaF,MAAME;GACnBC,UAAUH,MAAMG;GAChBC,eAAeC,YAA2C;AACxD,SAAKV,OAAOU,QAAQV;AACpBK,UAAMI,eAAeC,QAAQ;;GAEhC;;CAEHE,WAAWC,SAAc;AACvB,SAAOzB,YAAY0B,QAAQD,SAASxB,eAAe;;CAErD0B,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,2BAAyB;GACzB,2BAAyB;GAC1B;;CAEHC,UAAUC,KAAU;AAClB,OAAKjB,OAAOiB,IAAIjB;;CAElB,CAAChB,qBAAqBkC,GAAG;EACvB,MAAMC,QAAQ5B,eAAeA,aAAaC,cAAc,GAAG4B,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAKrB,WAAWA;EAChC,MAAMyB,UAAUJ,KAAKK,WAAW,GAAG1B,WAAWA;AAC9Cb,gBAAcoC,KAAKH,GAAG,YAAY,KAAKb,MAAMoB,SAAS,GAAG;AAEzDvC,oBAAkBwC,SAAIR,GAAG,YAAY,KAAKb,MAAMsB,SAAS,SAAS;AAElExC,eAAayC,SAAIV,GAAG,YAAY,KAAKb,MAAMwB,SAAS;AACpD,SAAOV"}

package/dist/combobox.d.mts

@@ -15,7 +15,7 @@ declare class Combobox extends ZagComponent {
   _buildCollection(items: any[]): _$_zag_js_collection0.ListCollection<any>;
   _filterItems(query: string): void;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     collection: any;
     value: any;
     defaultValue: any;
@@ -60,7 +60,7 @@ declare class Combobox extends ZagComponent {
     '[data-part="item-indicator"]': (api: any, el: any) => any;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Combobox as default };