@geajs/ui 0.2.4 → 0.2.9

package/dist/menu.mjs

@@ -1,12 +1,33 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_ELEMENT, GEA_ON_PROP_CHANGE, GEA_REGISTER_MAP, GEA_SYNC_MAP, 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 { n as _rescue, t as keyedList } from "./keyed-list.mjs";
+import { n as createItemProxy, t as createItemObservable } from "./item-obs.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as menu from "@zag-js/menu";
 //#region src/components/menu.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div><button data-part=trigger class=\"menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground\">0</button><div data-part=positioner class=menu-positioner><div data-part=content class=\"menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\"><!--2-->";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=separator class=\"menu-separator -mx-1 my-1 h-px bg-muted\">";
+	return t.content.firstChild;
+}
+let _tpl2_root = null;
+function _tpl2_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=item class=\"menu-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\">0";
+	return t.content.firstChild;
+}
+const __rq_L0 = /* @__PURE__ */ new Map();
 var Menu = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-menu";
-	}
 	createMachine(_props) {
 		return menu.machine;
 	}
@@ -42,44 +63,69 @@ var Menu = class extends ZagComponent {
 	syncState(api) {
 		this.open = api.open;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		const items = props.items || [];
-		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="menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground">${geaEscapeHtml(String(props.triggerLabel || "Menu"))}</button><div data-part="positioner" class="menu-positioner"><div id="${__id + "-b2"}" data-part="content" class="menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md">${items.map((item, i) => item.type === "separator" ? `<div data-gid="${String(`sep-${i}`)}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></div>` : `<div data-gid="${item?.id ?? item}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="menu-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50">${item.label}</div>`).join("") + "<!---->"}</div></div></div>`;
-	}
-	render__unresolved_0Item(item, i) {
-		return `<div data-gid="${item?.id ?? item}" data-part="separator" class="menu-separator -mx-1 my-1 h-px bg-muted"></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;
+	[GEA_CREATE_TEMPLATE](d) {
+		this.props.items;
+		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;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		reactiveTextValue(marker1, d, this, () => this.props.triggerLabel || "Menu");
+		const __ki_L0 = (item, i, d) => {
+			if (item.type === "separator") {
+				const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+				reactiveAttr(root, d, this, "key", () => `sep-${i}`);
+				return root;
+			} else {
+				const root = (_tpl2_root || (_tpl2_root = _tpl2_create())).cloneNode(true);
+				const el0 = root;
+				const el1 = el0;
+				const marker2 = root.firstChild;
+				reactiveAttr(el0, d, this, "key", () => item.value);
+				reactiveAttr(el1, d, this, "data-value", () => item.value);
+				reactiveTextValue(marker2, d, this, () => item.label);
+				return root;
 			}
-		}
-		if (key === "triggerLabel") {
-			const __el = this.__e0 || (this.__e0 = __gid(__id + "-b1"));
-			this.props;
-			const __boundValue = value || "Menu";
-			if (__el && __el.textContent !== __boundValue) __el.textContent = __boundValue;
-		}
-		if (key === "items") this[GEA_SYNC_MAP](0);
-	}
-	__resetEls() {
-		this.__e0 = null;
-	}
-	__observe_local_props(__v, __c) {
-		this[GEA_SYNC_MAP](0);
-	}
-	createdHooks() {
-		this[GEA_REGISTER_MAP](0, "____unresolved_0_container", () => __gid(this.id + "-b2"), () => {
-			return this.props.items || [];
-		}, (__item, __idx) => this.create__unresolved_0Item(__item, __idx), (__k, __ki) => String(`sep-${__ki}`));
+		};
+		keyedList({
+			container: anchor2.parentNode,
+			anchor: anchor2,
+			disposer: d,
+			root: this,
+			pending: __rq_L0,
+			path: () => this.props.items || [],
+			key: (item, i) => item?.id ?? item ?? i,
+			createEntry: (item, idx) => {
+				const __k = item?.id ?? item ?? idx;
+				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();
+			}
+		});
+		return root;
 	}
 };
 //#endregion

package/dist/menu.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"menu.mjs","names":["Component","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_SYNC_MAP","GEA_REGISTER_MAP","menu","normalizeProps","ZagComponent","Menu","__geaTagName","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","closeOnSelect","loopFocus","positioning","onOpenChange","details","OpenChangeDetails","onSelect","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","getItemProps","value","HTMLElement","dataset","[data-part=\"item-group\"]","getItemGroupProps","groupId","[data-part=\"item-group-label\"]","getItemGroupLabelProps","htmlFor","syncState","template","__id","_register","items","class","String","trim","triggerLabel","map","item","i","type","label","join","render__unresolved_0Item","key","__el","__boundValue","__newClass","replace","className","__e0","__gid","textContent","__resetEls","__observe_local_props","__v","__c","createdHooks","__item","__idx","create__unresolved_0Item","__k","__ki"],"sources":["../src/components/menu.tsx"],"sourcesContent":["import * as menu from '@zag-js/menu'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Menu extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return menu.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      closeOnSelect: props.closeOnSelect ?? true,\n      loopFocus: props.loopFocus ?? false,\n      positioning: props.positioning,\n      onOpenChange: (details: menu.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n      onSelect: props.onSelect,\n    }\n  }\n\n  connectApi(service: any) {\n    return menu.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=\"separator\"]': 'getSeparatorProps',\n      '[data-part=\"item\"]': (api, el) => api.getItemProps({ value: (el as HTMLElement).dataset.value }),\n      '[data-part=\"item-group\"]': (api, el) => api.getItemGroupProps({ id: (el as HTMLElement).dataset.groupId }),\n      '[data-part=\"item-group-label\"]': (api, el) =>\n        api.getItemGroupLabelProps({ htmlFor: (el as HTMLElement).dataset.htmlFor }),\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    const items = props.items || []\n    return (\n      <div class={props.class || ''}>\n        <button\n          data-part=\"trigger\"\n          class=\"menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground\"\n        >\n          {props.triggerLabel || 'Menu'}\n        </button>\n        <div data-part=\"positioner\" class=\"menu-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\"\n          >\n            {items.map((item: any, i: number) =>\n              item.type === 'separator' ? (\n                <div key={`sep-${i}`} data-part=\"separator\" class=\"menu-separator -mx-1 my-1 h-px bg-muted\"></div>\n              ) : (\n                <div\n                  key={item.value}\n                  data-part=\"item\"\n                  data-value={item.value}\n                  class=\"menu-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n                >\n                  {item.label}\n                </div>\n              ),\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"menu.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","reactiveAttr","createItemObservable","createItemProxy","GEA_PROXY_RAW","_rescue","keyedList","menu","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","_tpl2_root","_tpl2_create","__rq_L0","Map","Menu","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","closeOnSelect","loopFocus","positioning","onOpenChange","details","OpenChangeDetails","onSelect","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","getItemProps","value","HTMLElement","dataset","[data-part=\"item-group\"]","getItemGroupProps","groupId","[data-part=\"item-group-label\"]","getItemGroupLabelProps","htmlFor","syncState","d","items","root","cloneNode","el0","marker1","anchor2","childNodes","class","t1","triggerLabel","__ki_L0","item","i","type","el1","marker2","t2","label","container","parentNode","anchor","disposer","pending","path","key","createEntry","idx","__k","__r","String","__raw","__prev","obs","current","_fire","__rd","child","__obs","__li","__el","element","patchEntry","e","newItem","newIdx"],"sources":["../src/components/menu.tsx"],"sourcesContent":["import * as menu from '@zag-js/menu'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Menu extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return menu.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      closeOnSelect: props.closeOnSelect ?? true,\n      loopFocus: props.loopFocus ?? false,\n      positioning: props.positioning,\n      onOpenChange: (details: menu.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n      onSelect: props.onSelect,\n    }\n  }\n\n  connectApi(service: any) {\n    return menu.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=\"separator\"]': 'getSeparatorProps',\n      '[data-part=\"item\"]': (api, el) => api.getItemProps({ value: (el as HTMLElement).dataset.value }),\n      '[data-part=\"item-group\"]': (api, el) => api.getItemGroupProps({ id: (el as HTMLElement).dataset.groupId }),\n      '[data-part=\"item-group-label\"]': (api, el) =>\n        api.getItemGroupLabelProps({ htmlFor: (el as HTMLElement).dataset.htmlFor }),\n    }\n  }\n\n  syncState(api: any) {\n    this.open = api.open\n  }\n\n  template(props: any) {\n    const items = props.items || []\n    return (\n      <div class={props.class || ''}>\n        <button\n          data-part=\"trigger\"\n          class=\"menu-trigger inline-flex items-center justify-center gap-1 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-xs hover:bg-accent hover:text-accent-foreground\"\n        >\n          {props.triggerLabel || 'Menu'}\n        </button>\n        <div data-part=\"positioner\" class=\"menu-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"menu-content z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md\"\n          >\n            {items.map((item: any, i: number) =>\n              item.type === 'separator' ? (\n                <div key={`sep-${i}`} data-part=\"separator\" class=\"menu-separator -mx-1 my-1 h-px bg-muted\"></div>\n              ) : (\n                <div\n                  key={item.value}\n                  data-part=\"item\"\n                  data-value={item.value}\n                  class=\"menu-item relative flex cursor-pointer select-none items-center rounded-xs px-2 py-1.5 text-sm outline-hidden data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50\"\n                >\n                  {item.label}\n                </div>\n              ),\n            )}\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/number-input.d.mts

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

package/dist/number-input.mjs

@@ -1,24 +1,24 @@
 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 conditionalTruthy } from "./conditional-truthy.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as numberInput from "@zag-js/number-input";
 //#region src/components/number-input.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=\"number-input-control flex\"><button data-part=decrement-trigger class=\"number-input-decrement inline-flex h-9 items-center justify-center rounded-l-md border border-r-0 border-input px-2 hover:bg-accent\">−</button><input data-part=input class=\"number-input-input h-9 w-full border border-input bg-transparent px-3 text-center text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"><button data-part=increment-trigger class=\"number-input-increment inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2 hover:bg-accent\">+";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<label data-part=label class=\"number-input-label text-sm font-medium mb-1 block\">0";
+	return t.content.firstChild;
+}
 var NumberInput = class extends ZagComponent {
-	static {
-		this.__geaTagName = "number-input";
-	}
-	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="number-input-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(this.props.label))}</label>`;
-		}, null);
-	}
 	createMachine(_props) {
 		return numberInput.machine;
 	}
@@ -65,22 +65,18 @@ var NumberInput = class extends ZagComponent {
 		this.value = api.value;
 		this.valueAsNumber = api.valueAsNumber;
 	}
-	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 + "-c0"}-->${props.label && `<label data-part="label" class="number-input-label text-sm font-medium mb-1 block">${geaEscapeHtml(String(props.label))}</label>` || ""}<!--${__id + "-c0-end"}--><div data-part="control" class="number-input-control flex"><button data-part="decrement-trigger" class="number-input-decrement inline-flex h-9 items-center justify-center rounded-l-md border border-r-0 border-input px-2 hover:bg-accent">−</button><input data-part="input" class="number-input-input h-9 w-full border border-input bg-transparent px-3 text-center text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring" /><button data-part="increment-trigger" class="number-input-increment inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2 hover:bg-accent">+</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;
-			}
-		}
-		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;
+		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;
+		});
+		return root;
 	}
 };
 //#endregion

package/dist/number-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.mjs","names":["Component","geaCondValueSymbol","GEA_REGISTER_COND","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_COND","numberInput","normalizeProps","ZagComponent","NumberInput","__geaTagName","constructor","args","props","label","String","value","valueAsNumber","createMachine","_props","machine","getMachineProps","id","defaultValue","min","max","step","disabled","readOnly","invalid","required","name","form","allowMouseWheel","clampValueOnBlur","formatOptions","locale","onValueChange","details","ValueChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","template","__id","_register","class","trim","key","__el","__boundValue","__newClass","replace","className"],"sources":["../src/components/number-input.tsx"],"sourcesContent":["import * as numberInput from '@zag-js/number-input'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class NumberInput extends ZagComponent {\n  declare value: string\n  declare valueAsNumber: number\n\n  createMachine(_props: any): any {\n    return numberInput.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      min: props.min,\n      max: props.max,\n      step: props.step ?? 1,\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      invalid: props.invalid,\n      required: props.required,\n      name: props.name,\n      form: props.form,\n      allowMouseWheel: props.allowMouseWheel,\n      clampValueOnBlur: props.clampValueOnBlur ?? true,\n      formatOptions: props.formatOptions,\n      locale: props.locale,\n      onValueChange: (details: numberInput.ValueChangeDetails) => {\n        this.value = details.value\n        this.valueAsNumber = details.valueAsNumber\n        props.onValueChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return numberInput.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=\"input\"]': 'getInputProps',\n      '[data-part=\"increment-trigger\"]': 'getIncrementTriggerProps',\n      '[data-part=\"decrement-trigger\"]': 'getDecrementTriggerProps',\n      '[data-part=\"scrubber\"]': 'getScrubberProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.valueAsNumber = api.valueAsNumber\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=\"number-input-label text-sm font-medium mb-1 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"number-input-control flex\">\n          <button\n            data-part=\"decrement-trigger\"\n            class=\"number-input-decrement inline-flex h-9 items-center justify-center rounded-l-md border border-r-0 border-input px-2 hover:bg-accent\"\n          >\n            &#x2212;\n          </button>\n          <input\n            data-part=\"input\"\n            class=\"number-input-input h-9 w-full border border-input bg-transparent px-3 text-center text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button\n            data-part=\"increment-trigger\"\n            class=\"number-input-increment inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2 hover:bg-accent\"\n          >\n            &#x2B;\n          </button>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBU,cAArB,cAAyCD,aAAa;;sBAAA;;CAHtDG,YAAsB,GAAGC,MAAI;AAA7B,QAAM,GAAGA,KAAK;AA0DO,OAAAC;AAAA,OAAAb,mBAAA,EAAA,IAAA,CAAA,CA1DrB,KAAKa,MA6DUC;AA7Df,OAAIb,mBAAuB,GAAA,YAAA;AA0DN,QAAAY;AAAA,UA1DrB,KAAKA,MA6DUC;WAAK;AAHC,QAAAD;AAAA,UAAA,sFA1DrBX,cAAca,OAAd,KAAKF,MA+DcC,MA/DwB,CAAC,CAAA;KAAA,KAAA;;CAO1CI,cAAcC,QAAkB;AAC9B,SAAOb,YAAYc;;CAGrBC,gBAAgBR,OAAY;AAC1B,SAAO;GACLS,IAAI,KAAKA;GACTN,OAAOH,MAAMG;GACbO,cAAcV,MAAMU;GACpBC,KAAKX,MAAMW;GACXC,KAAKZ,MAAMY;GACXC,MAAMb,MAAMa,QAAQ;GACpBC,UAAUd,MAAMc;GAChBC,UAAUf,MAAMe;GAChBC,SAAShB,MAAMgB;GACfC,UAAUjB,MAAMiB;GAChBC,MAAMlB,MAAMkB;GACZC,MAAMnB,MAAMmB;GACZC,iBAAiBpB,MAAMoB;GACvBC,kBAAkBrB,MAAMqB,oBAAoB;GAC5CC,eAAetB,MAAMsB;GACrBC,QAAQvB,MAAMuB;GACdC,gBAAgBC,YAA4C;AAC1D,SAAKtB,QAAQsB,QAAQtB;AACrB,SAAKC,gBAAgBqB,QAAQrB;AAC7BJ,UAAMwB,gBAAgBC,QAAQ;;GAEjC;;CAGHE,WAAWC,SAAc;AACvB,SAAOnC,YAAYoC,QAAQD,SAASlC,eAAe;;CAGrDoC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,yBAAuB;GACvB,qCAAmC;GACnC,qCAAmC;GACnC,4BAA0B;GAC3B;;CAGHC,UAAUC,KAAU;AAClB,OAAK7B,QAAQ6B,IAAI7B;AACjB,OAAKC,gBAAgB4B,IAAI5B;;CAG3B6B,SAASjC,OAAY;EAAA,MAAAkC,OAAA,KAAAzB;AAAAvB,YAAAiD,UAAAxC,cAAA,gBAAA;AACnB,SAAA,YAAAuC,KAAA,qBAC+BlC,MAAMoC,SAAS,OAAE,SAAjBpC,MAAMoC,SAAS,QAAE,QAAA,KAAA,aAAjBpC,MAAMoC,SAAS,OAAE,OAAAlC,OAAjBF,MAAMoC,SAAS,GAAE,GAAA,IAAAC,MAAA,CAAA,GAAA,OA5DpDH,OAAU,MAAK,KA6DNlC,MAAMC,SAAK,sFA7DpBZ,cAAca,OA+DDF,MAAMC,MA/DwB,CAAC,CAAA,aAAA,GAAA,MAA5CiC,OAAU,UAAS;;CAAnB,CAAA5C,oBAAwBgD,KAAKnC,OAAK;AAAA,MAAAmC,QAAA,SAAA;GAAA,MAAAC,OAAA,KAAAhD;AA0Db,QAAAS;GAAA,MAAAwC,eAEcrC,SAAe;AAAE,OAAAoC,MA5DpD;IACM,MAAME,aADXvC,OAAOsC,gBAAyB,GAAG,CAAEH,MAAM,CAACK,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;AACvF,MAAAH,QAAA,QAHL,MAAI9C,gBAAwB,EAAE"}
+{"version":3,"file":"number-input.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveTextValue","conditionalTruthy","numberInput","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","NumberInput","value","valueAsNumber","createMachine","_props","machine","getMachineProps","props","id","defaultValue","min","max","step","disabled","readOnly","invalid","required","name","form","allowMouseWheel","clampValueOnBlur","formatOptions","locale","onValueChange","details","ValueChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","anchor1","class","parentNode","label","marker0","t0"],"sources":["../src/components/number-input.tsx"],"sourcesContent":["import * as numberInput from '@zag-js/number-input'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class NumberInput extends ZagComponent {\n  declare value: string\n  declare valueAsNumber: number\n\n  createMachine(_props: any): any {\n    return numberInput.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      min: props.min,\n      max: props.max,\n      step: props.step ?? 1,\n      disabled: props.disabled,\n      readOnly: props.readOnly,\n      invalid: props.invalid,\n      required: props.required,\n      name: props.name,\n      form: props.form,\n      allowMouseWheel: props.allowMouseWheel,\n      clampValueOnBlur: props.clampValueOnBlur ?? true,\n      formatOptions: props.formatOptions,\n      locale: props.locale,\n      onValueChange: (details: numberInput.ValueChangeDetails) => {\n        this.value = details.value\n        this.valueAsNumber = details.valueAsNumber\n        props.onValueChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return numberInput.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=\"input\"]': 'getInputProps',\n      '[data-part=\"increment-trigger\"]': 'getIncrementTriggerProps',\n      '[data-part=\"decrement-trigger\"]': 'getDecrementTriggerProps',\n      '[data-part=\"scrubber\"]': 'getScrubberProps',\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n    this.valueAsNumber = api.valueAsNumber\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=\"number-input-label text-sm font-medium mb-1 block\">\n            {props.label}\n          </label>\n        )}\n        <div data-part=\"control\" class=\"number-input-control flex\">\n          <button\n            data-part=\"decrement-trigger\"\n            class=\"number-input-decrement inline-flex h-9 items-center justify-center rounded-l-md border border-r-0 border-input px-2 hover:bg-accent\"\n          >\n            &#x2212;\n          </button>\n          <input\n            data-part=\"input\"\n            class=\"number-input-input h-9 w-full border border-input bg-transparent px-3 text-center text-sm focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring\"\n          />\n          <button\n            data-part=\"increment-trigger\"\n            class=\"number-input-increment inline-flex h-9 items-center justify-center rounded-r-md border border-l-0 border-input px-2 hover:bg-accent\"\n          >\n            &#x2B;\n          </button>\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,IAAIC,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMP,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBG,cAArB,cAAyCX,aAAa;CAGpDc,cAAcC,QAAkB;AAC9B,SAAOjB,YAAYkB;;CAErBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTP,OAAOM,MAAMN;GACbQ,cAAcF,MAAME;GACpBC,KAAKH,MAAMG;GACXC,KAAKJ,MAAMI;GACXC,MAAML,MAAMK,QAAQ;GACpBC,UAAUN,MAAMM;GAChBC,UAAUP,MAAMO;GAChBC,SAASR,MAAMQ;GACfC,UAAUT,MAAMS;GAChBC,MAAMV,MAAMU;GACZC,MAAMX,MAAMW;GACZC,iBAAiBZ,MAAMY;GACvBC,kBAAkBb,MAAMa,oBAAoB;GAC5CC,eAAed,MAAMc;GACrBC,QAAQf,MAAMe;GACdC,gBAAgBC,YAA4C;AAC1D,SAAKvB,QAAQuB,QAAQvB;AACrB,SAAKC,gBAAgBsB,QAAQtB;AAC7BK,UAAMgB,gBAAgBC,QAAQ;;GAEjC;;CAEHE,WAAWC,SAAc;AACvB,SAAOxC,YAAYyC,QAAQD,SAASvC,eAAe;;CAErDyC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,yBAAuB;GACvB,2BAAyB;GACzB,yBAAuB;GACvB,qCAAmC;GACnC,qCAAmC;GACnC,4BAA0B;GAC3B;;CAEHC,UAAUC,KAAU;AAClB,OAAK9B,QAAQ8B,IAAI9B;AACjB,OAAKC,gBAAgB6B,IAAI7B;;CAE3B,CAACnB,qBAAqBiD,GAAG;EACvB,MAAMC,QAAQ3C,eAAeA,aAAaC,cAAc,GAAG2C,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,UAAUH,KAAKpC;AACrBb,gBAAcmD,KAAKH,GAAG,YAAY,KAAKzB,MAAM8B,SAAS,GAAG;AACzDnD,oBAAkBkD,QAAQE,YAAYF,SAASJ,GAAG,YAAY,KAAKzB,MAAMgC,QAAOP,MAAK;GACnF,MAAMC,QAAQnC,eAAeA,aAAaC,cAAc,GAAGmC,UAAU,KAAK;GAE1E,MAAMO,KADUR,KAAKpC;AAErBZ,qBAAkBwD,IAAIT,GAAG,YAAY,KAAKzB,MAAMgC,MAAM;AACtD,UAAON;IACP;AACF,SAAOA"}

package/dist/pagination.d.mts

@@ -8,7 +8,7 @@ declare class Pagination extends ZagComponent {
   totalPages: number;
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     count: any;
     page: any;
     defaultPage: any;
@@ -30,7 +30,7 @@ declare class Pagination extends ZagComponent {
     '[data-part="ellipsis"]': (api: any, el: any) => any;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { Pagination as default };

package/dist/pagination.mjs

@@ -1,17 +1,21 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_CLONE_TEMPLATE, GEA_ELEMENT, GEA_ON_PROP_CHANGE } from "@geajs/core";
+import { o as GEA_CREATE_TEMPLATE } from "./bind.mjs";
+import { t as reactiveClassName } from "./reactive-class-name.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as pagination from "@zag-js/pagination";
 //#region src/components/pagination.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<nav data-part=root><div class=\"flex items-center gap-1\"><button data-part=prev-trigger class=\"pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\">‹ Prev</button><button data-part=next-trigger class=\"pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\">Next ›";
+	return t.content.firstChild;
+}
 var Pagination = class extends ZagComponent {
 	constructor(..._args) {
 		super(..._args);
 		this.page = 1;
 		this.totalPages = 1;
 	}
-	static {
-		this.__geaTagName = "gea-pagination";
-	}
 	createMachine(_props) {
 		return pagination.machine;
 	}
@@ -57,37 +61,10 @@ var Pagination = class extends ZagComponent {
 		this.page = api.page;
 		this.totalPages = api.totalPages;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		return `<nav id="${__id}" data-part="root" class="${`pagination-root ${props.class || ""}`.trim()}"><div class="flex items-center gap-1"><button data-part="prev-trigger" class="pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50">‹ Prev</button><button data-part="next-trigger" class="pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50">Next ›</button></div></nav>`;
-	}
-	static {
-		this.__tpl = (() => {
-			if (typeof document === "undefined") return void 0;
-			var t = document.createElement("template");
-			t.innerHTML = "<nav data-part=\"root\"><div class=\"flex items-center gap-1\"><button data-part=\"prev-trigger\" class=\"pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\">‹ Prev</button><button data-part=\"next-trigger\" class=\"pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\">Next ›</button></div></nav>";
-			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 = `pagination-root ${props.class || ""}`.trim();
-		return __root;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = `pagination-root ${value || ""}`;
-			if (__el) {
-				const __newClass = String(__boundValue ?? "").trim().replace(/\s+/g, " ");
-				if (__el.className !== __newClass) __el.className = __newClass;
-			}
-		}
+	[GEA_CREATE_TEMPLATE](d) {
+		const root = (_tpl0_root || (_tpl0_root = _tpl0_create())).cloneNode(true);
+		reactiveClassName(root, d, this, () => `pagination-root ${this.props.class || ""}`);
+		return root;
 	}
 };
 //#endregion

package/dist/pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"pagination.mjs","names":["Component","GEA_CLONE_TEMPLATE","GEA_ON_PROP_CHANGE","GEA_ELEMENT","pagination","normalizeProps","ZagComponent","Pagination","__geaTagName","page","totalPages","createMachine","_props","machine","getMachineProps","props","id","count","defaultPage","pageSize","defaultPageSize","siblingCount","type","onPageChange","details","PageChangeDetails","onPageSizeChange","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","value","parseInt","HTMLElement","dataset","getItemProps","[data-part=\"ellipsis\"]","index","getEllipsisProps","syncState","template","__id","_register","class","trim","__tpl","document","undefined","t","createElement","innerHTML","constructor","Error","__root","content","firstElementChild","cloneNode","className","key","__el","__boundValue","__newClass","String","replace"],"sources":["../src/components/pagination.tsx"],"sourcesContent":["import * as pagination from '@zag-js/pagination'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Pagination extends ZagComponent {\n  page = 1\n  totalPages = 1\n\n  createMachine(_props: any): any {\n    return pagination.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      count: props.count ?? 0,\n      page: props.page,\n      defaultPage: props.defaultPage ?? 1,\n      pageSize: props.pageSize,\n      defaultPageSize: props.defaultPageSize ?? 10,\n      siblingCount: props.siblingCount ?? 1,\n      type: props.type ?? 'button',\n      onPageChange: (details: pagination.PageChangeDetails) => {\n        this.page = details.page\n        props.onPageChange?.(details)\n      },\n      onPageSizeChange: props.onPageSizeChange,\n    }\n  }\n\n  connectApi(service: any) {\n    return pagination.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"prev-trigger\"]': 'getPrevTriggerProps',\n      '[data-part=\"next-trigger\"]': 'getNextTriggerProps',\n      '[data-part=\"item\"]': (api, el) => {\n        const value = parseInt((el as HTMLElement).dataset.value || '1', 10)\n        return api.getItemProps({ type: 'page', value })\n      },\n      '[data-part=\"ellipsis\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getEllipsisProps({ index })\n      },\n    }\n  }\n\n  syncState(api: any) {\n    this.page = api.page\n    this.totalPages = api.totalPages\n  }\n\n  template(props: any) {\n    return (\n      <nav data-part=\"root\" class={`pagination-root ${props.class || ''}`}>\n        <div class=\"flex items-center gap-1\">\n          <button\n            data-part=\"prev-trigger\"\n            class=\"pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\"\n          >\n            &lsaquo; Prev\n          </button>\n          <button\n            data-part=\"next-trigger\"\n            class=\"pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\"\n          >\n            Next &rsaquo;\n          </button>\n        </div>\n      </nav>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBO,aAArB,cAAwCD,aAAa;;;cAC5C;oBACM;;;sBAFsC;;CAInDK,cAAcC,QAAkB;AAC9B,SAAOR,WAAWS;;CAGpBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTC,OAAOF,MAAME,SAAS;GACtBR,MAAMM,MAAMN;GACZS,aAAaH,MAAMG,eAAe;GAClCC,UAAUJ,MAAMI;GAChBC,iBAAiBL,MAAMK,mBAAmB;GAC1CC,cAAcN,MAAMM,gBAAgB;GACpCC,MAAMP,MAAMO,QAAQ;GACpBC,eAAeC,YAA0C;AACvD,SAAKf,OAAOe,QAAQf;AACpBM,UAAMQ,eAAeC,QAAQ;;GAE/BE,kBAAkBX,MAAMW;GACzB;;CAGHC,WAAWC,SAAc;AACvB,SAAOxB,WAAWyB,QAAQD,SAASvB,eAAe;;CAGpDyB,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,gCAA8B;GAC9B,gCAA8B;GAC9B,yBAAuBE,KAAKC,OAAO;IACjC,MAAMC,QAAQC,SAAUF,GAAmBI,QAAQH,SAAS,KAAK,GAAG;AACpE,WAAOF,IAAIM,aAAa;KAAEhB,MAAM;KAAQY;KAAO,CAAC;;GAElD,6BAA2BF,KAAKC,OAAO;IACrC,MAAMO,QAAQL,SAAUF,GAAmBI,QAAQG,SAAS,KAAK,GAAG;AACpE,WAAOR,IAAIS,iBAAiB,EAAED,OAAO,CAAC;;GAEzC;;CAGHE,UAAUV,KAAU;AAClB,OAAKvB,OAAOuB,IAAIvB;AAChB,OAAKC,aAAasB,IAAItB;;CAGxBiC,SAAS5B,OAAY;EAAA,MAAA6B,OAAA,KAAA5B;AAAAhB,YAAA6C,UAAAvC,cAAA,gBAAA;AACnB,SAAA,YAAAsC,KAAA,4BAC+B,mBAAmB7B,MAAM+B,SAAS,KAAIC,MAAA,CAAA;;;sBAxDnD;AAClB,OAAI,OAAOE,aAAa,YAAa,QAAOC,KAAAA;GAC5C,IAAIC,IAAIF,SAASG,cAAc,WAAW;AAC1CD,KAAEE,YAAY;AACd,UAAOF;MACL;;CALN,CAAAlD,sBAA0B;EAA1B,IAAI+C,QAAQ,KAAKM,YAAYN;AAA7B,MAAI,CAACA,MAAS,OAAM,IAAIO,MAAM,yCAAyC;EAAvE,IAAIC,SAASR,MAAMS,QAAQC,kBAAkBC,UAAU,KAAK;AAA5DH,SAAsBxC,KAAtB,KAAKA;AAALwC,SAAsBI,YAwDa,mBAAmB7C,MAAM+B,SAAS,KAAIC,MAxDlB;AAAvD,SAAAS;;CAAA,CAAAtD,oBAAwB2D,KAAK3B,OAAK;AAAA,MAAA2B,QAAA,SAAA;GAAA,MAAAC,OAAA,KAAA3D;AAsDb,QAAAY;GAAA,MAAAgD,eAEc,mBAAmB7B,SAAe;AAAI,OAAA4B,MAxDzE;IACM,MAAME,aADXC,OAAOF,gBAAyB,GAAG,CAAEhB,MAAM,CAACmB,QAAQ,QAAQ,IACf;AACxC,QAAIJ,KAAsBF,cAAcI,WAAYF,MAAsBF,YAAYI"}
+{"version":3,"file":"pagination.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","pagination","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","Pagination","page","totalPages","createMachine","_props","machine","getMachineProps","props","id","count","defaultPage","pageSize","defaultPageSize","siblingCount","type","onPageChange","details","PageChangeDetails","onPageSizeChange","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","value","parseInt","HTMLElement","dataset","getItemProps","[data-part=\"ellipsis\"]","index","getEllipsisProps","syncState","d","root","cloneNode","el0","class"],"sources":["../src/components/pagination.tsx"],"sourcesContent":["import * as pagination from '@zag-js/pagination'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Pagination extends ZagComponent {\n  page = 1\n  totalPages = 1\n\n  createMachine(_props: any): any {\n    return pagination.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      count: props.count ?? 0,\n      page: props.page,\n      defaultPage: props.defaultPage ?? 1,\n      pageSize: props.pageSize,\n      defaultPageSize: props.defaultPageSize ?? 10,\n      siblingCount: props.siblingCount ?? 1,\n      type: props.type ?? 'button',\n      onPageChange: (details: pagination.PageChangeDetails) => {\n        this.page = details.page\n        props.onPageChange?.(details)\n      },\n      onPageSizeChange: props.onPageSizeChange,\n    }\n  }\n\n  connectApi(service: any) {\n    return pagination.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"prev-trigger\"]': 'getPrevTriggerProps',\n      '[data-part=\"next-trigger\"]': 'getNextTriggerProps',\n      '[data-part=\"item\"]': (api, el) => {\n        const value = parseInt((el as HTMLElement).dataset.value || '1', 10)\n        return api.getItemProps({ type: 'page', value })\n      },\n      '[data-part=\"ellipsis\"]': (api, el) => {\n        const index = parseInt((el as HTMLElement).dataset.index || '0', 10)\n        return api.getEllipsisProps({ index })\n      },\n    }\n  }\n\n  syncState(api: any) {\n    this.page = api.page\n    this.totalPages = api.totalPages\n  }\n\n  template(props: any) {\n    return (\n      <nav data-part=\"root\" class={`pagination-root ${props.class || ''}`}>\n        <div class=\"flex items-center gap-1\">\n          <button\n            data-part=\"prev-trigger\"\n            class=\"pagination-prev inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\"\n          >\n            &lsaquo; Prev\n          </button>\n          <button\n            data-part=\"next-trigger\"\n            class=\"pagination-next inline-flex h-9 items-center justify-center rounded-md border border-input bg-background px-3 text-sm shadow-xs hover:bg-accent disabled:opacity-50\"\n          >\n            Next &rsaquo;\n          </button>\n        </div>\n      </nav>\n    )\n  }\n}\n"],"mappings":";;;;;;AAIA,IAAIK,aAAa;AACjB,SAASC,eAAe;CACtB,MAAMC,IAAIC,SAASC,cAAc,WAAW;AAC5CF,GAAEG,YAAY;AACd,QAAOH,EAAEI,QAAQC;;AAEnB,IAAqBC,aAArB,cAAwCT,aAAa;;;cAC5C;oBACM;;CACbY,cAAcC,QAAkB;AAC9B,SAAOf,WAAWgB;;CAEpBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTC,OAAOF,MAAME,SAAS;GACtBR,MAAMM,MAAMN;GACZS,aAAaH,MAAMG,eAAe;GAClCC,UAAUJ,MAAMI;GAChBC,iBAAiBL,MAAMK,mBAAmB;GAC1CC,cAAcN,MAAMM,gBAAgB;GACpCC,MAAMP,MAAMO,QAAQ;GACpBC,eAAeC,YAA0C;AACvD,SAAKf,OAAOe,QAAQf;AACpBM,UAAMQ,eAAeC,QAAQ;;GAE/BE,kBAAkBX,MAAMW;GACzB;;CAEHC,WAAWC,SAAc;AACvB,SAAO/B,WAAWgC,QAAQD,SAAS9B,eAAe;;CAEpDgC,eAAe;AACb,SAAO;GACL,wBAAsB;GACtB,gCAA8B;GAC9B,gCAA8B;GAC9B,yBAAuBE,KAAKC,OAAO;IACjC,MAAMC,QAAQC,SAAUF,GAAmBI,QAAQH,SAAS,KAAK,GAAG;AACpE,WAAOF,IAAIM,aAAa;KACtBhB,MAAM;KACNY;KACD,CAAC;;GAEJ,6BAA2BF,KAAKC,OAAO;IACrC,MAAMO,QAAQL,SAAUF,GAAmBI,QAAQG,SAAS,KAAK,GAAG;AACpE,WAAOR,IAAIS,iBAAiB,EAC1BD,OACD,CAAC;;GAEL;;CAEHE,UAAUV,KAAU;AAClB,OAAKvB,OAAOuB,IAAIvB;AAChB,OAAKC,aAAasB,IAAItB;;CAExB,CAACf,qBAAqBgD,GAAG;EACvB,MAAMC,QAAQ5C,eAAeA,aAAaC,cAAc,GAAG4C,UAAU,KAAK;AAE1EjD,oBAAkBkD,MAAKH,GAAG,YAAY,mBAAmB,KAAK5B,MAAMgC,SAAS,KAAK;AAClF,SAAOH"}

package/dist/patch.mjs

@@ -0,0 +1,21 @@
+//#region ../gea/src/runtime/patch.ts
+function patch(node, kind, prev, next, extra) {
+	if (next === prev) return prev;
+	if (kind === "text") {
+		if (node.nodeType === 3 || node.nodeType === 8) node.nodeValue = next == null ? "" : String(next);
+		else node.textContent = next == null ? "" : String(next);
+		return next;
+	}
+	if (kind === "attr") {
+		const el = node;
+		if (next == null) el.removeAttribute(extra);
+		else el.setAttribute(extra, String(next));
+		return next;
+	}
+	node.toggleAttribute(extra, !!next);
+	return next;
+}
+//#endregion
+export { patch as t };
+
+//# sourceMappingURL=patch.mjs.map

package/dist/patch.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"patch.mjs","names":["el"],"sources":["../../gea/src/runtime/patch.ts"],"sourcesContent":["/**\n * patch(node, kind, prev, next, extra?) — shared write-if-different DOM core.\n *\n * Used by reactive-text / reactive-attr / reactive-bool. Writes only when\n * `next !== prev`; returns the new `prev` value so callers can track it as a\n * closure local between invocations.\n */\n\nexport type PatchKind = 'text' | 'attr' | 'bool'\n\nexport function patch(node: Node, kind: PatchKind, prev: unknown, next: unknown, extra?: string): unknown {\n  if (next === prev) return prev\n  if (kind === 'text') {\n    // Use nodeValue on Text/Comment nodes, textContent on Elements/Fragments.\n    if (node.nodeType === 3 /* TEXT */ || node.nodeType === 8 /* COMMENT */) {\n      node.nodeValue = next == null ? '' : String(next)\n    } else {\n      node.textContent = next == null ? '' : String(next)\n    }\n    return next\n  }\n  if (kind === 'attr') {\n    const el = node as Element\n    if (next == null) el.removeAttribute(extra!)\n    else el.setAttribute(extra!, String(next))\n    return next\n  }\n  // bool\n  const el = node as Element\n  ;(el as any).toggleAttribute(extra!, !!next)\n  return next\n}\n"],"mappings":";AAUA,SAAgB,MAAM,MAAY,MAAiB,MAAe,MAAe,OAAyB;AACxG,KAAI,SAAS,KAAM,QAAO;AAC1B,KAAI,SAAS,QAAQ;AAEnB,MAAI,KAAK,aAAa,KAAgB,KAAK,aAAa,EACtD,MAAK,YAAY,QAAQ,OAAO,KAAK,OAAO,KAAK;MAEjD,MAAK,cAAc,QAAQ,OAAO,KAAK,OAAO,KAAK;AAErD,SAAO;;AAET,KAAI,SAAS,QAAQ;EACnB,MAAM,KAAK;AACX,MAAI,QAAQ,KAAM,IAAG,gBAAgB,MAAO;MACvC,IAAG,aAAa,OAAQ,OAAO,KAAK,CAAC;AAC1C,SAAO;;AAIPA,MAAW,gBAAgB,OAAQ,CAAC,CAAC,KAAK;AAC5C,QAAO"}

package/dist/pin-input.d.mts

@@ -8,7 +8,7 @@ declare class PinInput extends ZagComponent {
   valueAsString: string;
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     value: any;
     defaultValue: any;
     count: any;
@@ -38,7 +38,7 @@ declare class PinInput extends ZagComponent {
     '[data-part="input"]': (api: any, el: any) => any;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { PinInput as default };