@geajs/ui 0.2.4 → 0.2.9

package/dist/toast.mjs

@@ -1,4 +1,6 @@
-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 CompiledReactiveComponent } from "./compiled-reactive-component.mjs";
+import { t as reactiveClassName } from "./reactive-class-name.mjs";
 import { VanillaMachine, normalizeProps, spreadProps } from "@zag-js/vanilla";
 import * as toast from "@zag-js/toast";
 //#region src/components/toast.tsx
@@ -17,6 +19,12 @@ function getStore(props) {
 	});
 	return _store;
 }
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div data-part=group>";
+	return t.content.firstChild;
+}
 var ToastStore = class {
 	static {
 		this.getStore = getStore;
@@ -53,10 +61,7 @@ var ToastStore = class {
 		else getStore().dismiss();
 	}
 };
-var Toaster = class extends Component {
-	static {
-		this.__geaTagName = "gea-toaster";
-	}
+var Toaster = class extends CompiledReactiveComponent {
 	created(props) {
 		this._toastMachines = /* @__PURE__ */ new Map();
 		this._spreadCleanups = /* @__PURE__ */ new Map();
@@ -175,35 +180,10 @@ var Toaster = class extends Component {
 		this._api = null;
 		super.dispose();
 	}
-	template(props) {
-		return `<div id="${this.id}" data-part="group" class="${`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || "bottom-0 right-0"}`.trim()}"></div>`;
-	}
-	static {
-		this.__tpl = (() => {
-			if (typeof document === "undefined") return void 0;
-			var t = document.createElement("template");
-			t.innerHTML = "<div data-part=\"group\"></div>";
-			return t;
-		})();
-	}
-	[GEA_CLONE_TEMPLATE]() {
-		var __tpl = this.constructor.__tpl;
-		if (!__tpl) throw new Error("[gea] __tpl missing for clone template");
-		var __root = __tpl.content.firstElementChild.cloneNode(true);
-		__root.id = this.id;
-		__root.className = `toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || "bottom-0 right-0"}`.trim();
-		return __root;
-	}
-	[GEA_ON_PROP_CHANGE](key, value) {
-		if (key === "class") {
-			const __el = this[GEA_ELEMENT];
-			this.props;
-			const __boundValue = `toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${value || "bottom-0 right-0"}`;
-			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, () => `toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${this.props.class || "bottom-0 right-0"}`);
+		return root;
 	}
 };
 //#endregion

package/dist/toast.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toast.mjs","names":["toast","VanillaMachine","normalizeProps","spreadProps","Component","GEA_CLONE_TEMPLATE","GEA_ON_PROP_CHANGE","GEA_ELEMENT","stripStyle","props","Record","style","_style","rest","_store","Store","getStore","StoreProps","createStore","placement","duration","removeDelay","max","ToastStore","create","options","Options","success","Omit","type","error","info","loading","dismiss","id","Toaster","__geaTagName","_machine","_api","_toastMachines","Map","_spreadCleanups","Array","_currentToasts","created","store","storeProps","group","machine","start","connect","service","subscribe","nextToasts","getToasts","_syncToastDOM","_syncToastMachines","queueMicrotask","_applyGroupSpreads","_createToastElement","t","HTMLElement","div","document","createElement","setAttribute","className","inner","title","description","innerHTML","container","el","currentIds","Set","map","nextIds","has","querySelector","cleanups","get","forEach","fn","delete","remove","appendChild","stop","i","length","toastMachine","parent","index","stacked","set","rendered","groupEl","getGroupProps","toastEls","$$","toastId","dataset","api","prevCleanups","rootProps","getRootProps","push","getTitleProps","desc","getDescriptionProps","close","getCloseTriggerProps","action","getActionTriggerProps","onAfterRender","dispose","values","clear","template","__id","class","trim","__tpl","undefined","constructor","Error","__root","content","firstElementChild","cloneNode","key","value","__el","__boundValue","__newClass","String","replace"],"sources":["../src/components/toast.tsx"],"sourcesContent":["import * as toast from '@zag-js/toast'\nimport { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla'\nimport { Component } from '@geajs/core'\n\nfunction stripStyle(props: Record<string, any>): Record<string, any> {\n  const { style: _style, ...rest } = props\n  return rest\n}\n\nlet _store: toast.Store | null = null\n\nfunction getStore(props?: toast.StoreProps) {\n  if (!_store) {\n    _store = toast.createStore({\n      placement: 'bottom-end',\n      duration: 5000,\n      removeDelay: 200,\n      max: 5,\n      ...props,\n    })\n  }\n  return _store\n}\n\nexport class ToastStore {\n  static getStore = getStore\n\n  static create(options: toast.Options) {\n    return getStore().create(options)\n  }\n\n  static success(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'success' })\n  }\n\n  static error(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'error' })\n  }\n\n  static info(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'info' })\n  }\n\n  static loading(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'loading' })\n  }\n\n  static dismiss(id?: string) {\n    if (id) getStore().dismiss(id)\n    else getStore().dismiss()\n  }\n}\n\nexport class Toaster extends Component {\n  declare _machine: VanillaMachine<any> | null\n  declare _api: any\n  declare _toastMachines: Map<string, VanillaMachine<any>>\n  declare _spreadCleanups: Map<string, Array<() => void>>\n  declare _currentToasts: toast.Options[]\n\n  created(props: any) {\n    this._toastMachines = new Map()\n    this._spreadCleanups = new Map()\n    this._currentToasts = []\n\n    const store = getStore(props.storeProps)\n\n    this._machine = new VanillaMachine(toast.group.machine, { store })\n    this._machine.start()\n\n    this._api = toast.group.connect(this._machine.service, normalizeProps)\n\n    this._machine.subscribe(() => {\n      if (!this._machine) return\n      this._api = toast.group.connect(this._machine.service, normalizeProps)\n      const nextToasts = this._api.getToasts()\n      this._syncToastDOM(nextToasts)\n      this._currentToasts = nextToasts\n      this._syncToastMachines()\n      queueMicrotask(() => this._applyGroupSpreads())\n    })\n  }\n\n  _createToastElement(t: any): HTMLElement {\n    const div = document.createElement('div')\n    div.setAttribute('data-part', 'toast-root')\n    div.setAttribute('data-toast-id', t.id)\n    div.className =\n      'toast-root group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 shadow-lg transition-all bg-background text-foreground'\n\n    let inner = '<div class=\"grid gap-1\">'\n    if (t.title) inner += `<div data-part=\"title\" class=\"toast-title text-sm font-semibold\">${t.title}</div>`\n    if (t.description)\n      inner += `<div data-part=\"description\" class=\"toast-description text-sm opacity-90\">${t.description}</div>`\n    inner += '</div>'\n    inner +=\n      '<button data-part=\"close-trigger\" class=\"toast-close-trigger text-foreground/50 hover:text-foreground\">&#x2715;</button>'\n    div.innerHTML = inner\n    return div\n  }\n\n  _syncToastDOM(nextToasts: any[]) {\n    const container = this.el\n    if (!container) return\n\n    const currentIds = new Set(this._currentToasts.map((t: any) => t.id))\n    const nextIds = new Set(nextToasts.map((t: any) => t.id))\n\n    for (const id of currentIds) {\n      if (!nextIds.has(id)) {\n        const el = container.querySelector(`[data-toast-id=\"${id}\"]`)\n        if (el) {\n          const cleanups = this._spreadCleanups.get(id)\n          if (cleanups) cleanups.forEach((fn) => fn())\n          this._spreadCleanups.delete(id)\n          el.remove()\n        }\n      }\n    }\n\n    for (const t of nextToasts) {\n      if (!currentIds.has((t as any).id)) {\n        const el = this._createToastElement(t as any)\n        container.appendChild(el)\n      }\n    }\n  }\n\n  _syncToastMachines() {\n    if (!this._machine) return\n    const currentIds = new Set(this._currentToasts.map((t: any) => t.id))\n\n    for (const [id, machine] of this._toastMachines) {\n      if (!currentIds.has(id)) {\n        machine.stop()\n        this._toastMachines.delete(id)\n      }\n    }\n\n    for (let i = 0; i < this._currentToasts.length; i++) {\n      const t = this._currentToasts[i] as any\n      if (!this._toastMachines.has(t.id)) {\n        const toastMachine = new VanillaMachine(toast.machine, {\n          ...t,\n          parent: this._machine.service,\n          index: i,\n          stacked: true,\n          removeDelay: t.removeDelay ?? 200,\n        })\n        toastMachine.start()\n        this._toastMachines.set(t.id, toastMachine)\n\n        toastMachine.subscribe(() => {\n          queueMicrotask(() => this._applyGroupSpreads())\n        })\n      }\n    }\n  }\n\n  _applyGroupSpreads() {\n    if (!this.rendered || !this._api) return\n\n    const groupEl = this.el\n    if (groupEl) {\n      spreadProps(groupEl, stripStyle(this._api.getGroupProps()))\n    }\n\n    const toastEls = this.$$('[data-toast-id]')\n    for (const el of toastEls) {\n      const toastId = (el as HTMLElement).dataset.toastId\n      if (!toastId) continue\n\n      const toastMachine = this._toastMachines.get(toastId)\n      if (!toastMachine) continue\n\n      const api = toast.connect(toastMachine.service, normalizeProps)\n\n      const prevCleanups = this._spreadCleanups.get(toastId)\n      if (prevCleanups) prevCleanups.forEach((fn) => fn())\n\n      const cleanups: Array<() => void> = []\n      const rootProps = stripStyle(api.getRootProps())\n      delete rootProps['data-part']\n      cleanups.push(spreadProps(el, rootProps))\n\n      const title = el.querySelector('[data-part=\"title\"]')\n      if (title) cleanups.push(spreadProps(title, api.getTitleProps()))\n\n      const desc = el.querySelector('[data-part=\"description\"]')\n      if (desc) cleanups.push(spreadProps(desc, api.getDescriptionProps()))\n\n      const close = el.querySelector('[data-part=\"close-trigger\"]')\n      if (close) cleanups.push(spreadProps(close, api.getCloseTriggerProps()))\n\n      const action = el.querySelector('[data-part=\"action-trigger\"]')\n      if (action) cleanups.push(spreadProps(action, api.getActionTriggerProps()))\n\n      this._spreadCleanups.set(toastId, cleanups)\n    }\n  }\n\n  onAfterRender() {\n    this._applyGroupSpreads()\n  }\n\n  dispose() {\n    for (const cleanups of this._spreadCleanups.values()) {\n      cleanups.forEach((fn) => fn())\n    }\n    this._spreadCleanups.clear()\n\n    for (const machine of this._toastMachines.values()) {\n      machine.stop()\n    }\n    this._toastMachines.clear()\n\n    if (this._machine) {\n      this._machine.stop()\n      this._machine = null\n    }\n    this._api = null\n\n    super.dispose()\n  }\n\n  template(props: any) {\n    return (\n      <div\n        data-part=\"group\"\n        class={`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || 'bottom-0 right-0'}`}\n      />\n    )\n  }\n}\n"],"mappings":";;;;AAIA,SAASQ,WAAWC,OAAiD;CACnE,MAAM,EAAEE,OAAOC,QAAQ,GAAGC,SAASJ;AACnC,QAAOI;;AAGT,IAAIC,SAA6B;AAEjC,SAASE,SAASP,OAA0B;AAC1C,KAAI,CAACK,OACHA,UAASd,MAAMkB,YAAY;EACzBC,WAAW;EACXC,UAAU;EACVC,aAAa;EACbC,KAAK;EACL,GAAGb;EACJ,CAAC;AAEJ,QAAOK;;AAGT,IAAaS,aAAb,MAAwB;;kBACJP;;CAElB,OAAOQ,OAAOC,SAAwB;AACpC,SAAOT,UAAU,CAACQ,OAAOC,QAAQ;;CAGnC,OAAOE,QAAQF,SAAsC;AACnD,SAAOT,UAAU,CAACQ,OAAO;GAAE,GAAGC;GAASI,MAAM;GAAW,CAAC;;CAG3D,OAAOC,MAAML,SAAsC;AACjD,SAAOT,UAAU,CAACQ,OAAO;GAAE,GAAGC;GAASI,MAAM;GAAS,CAAC;;CAGzD,OAAOE,KAAKN,SAAsC;AAChD,SAAOT,UAAU,CAACQ,OAAO;GAAE,GAAGC;GAASI,MAAM;GAAQ,CAAC;;CAGxD,OAAOG,QAAQP,SAAsC;AACnD,SAAOT,UAAU,CAACQ,OAAO;GAAE,GAAGC;GAASI,MAAM;GAAW,CAAC;;CAG3D,OAAOI,QAAQC,IAAa;AAC1B,MAAIA,GAAIlB,WAAU,CAACiB,QAAQC,GAAG;MACzBlB,WAAU,CAACiB,SAAS;;;AAI7B,IAAaE,UAAb,cAA6B/B,UAAU;;sBAAA;;CAOrCwC,QAAQnC,OAAY;AAClB,OAAK8B,iCAAiB,IAAIC,KAAK;AAC/B,OAAKC,kCAAkB,IAAID,KAAK;AAChC,OAAKG,iBAAiB,EAAE;EAExB,MAAME,QAAQ7B,SAASP,MAAMqC,WAAW;AAExC,OAAKT,WAAW,IAAIpC,eAAeD,MAAM+C,MAAMC,SAAS,EAAEH,OAAO,CAAC;AAClE,OAAKR,SAASY,OAAO;AAErB,OAAKX,OAAOtC,MAAM+C,MAAMG,QAAQ,KAAKb,SAASc,SAASjD,eAAe;AAEtE,OAAKmC,SAASe,gBAAgB;AAC5B,OAAI,CAAC,KAAKf,SAAU;AACpB,QAAKC,OAAOtC,MAAM+C,MAAMG,QAAQ,KAAKb,SAASc,SAASjD,eAAe;GACtE,MAAMmD,aAAa,KAAKf,KAAKgB,WAAW;AACxC,QAAKC,cAAcF,WAAW;AAC9B,QAAKV,iBAAiBU;AACtB,QAAKG,oBAAoB;AACzBC,wBAAqB,KAAKC,oBAAoB,CAAC;IAC/C;;CAGJC,oBAAoBC,GAAqB;EACvC,MAAME,MAAMC,SAASC,cAAc,MAAM;AACzCF,MAAIG,aAAa,aAAa,aAAa;AAC3CH,MAAIG,aAAa,iBAAiBL,EAAE1B,GAAG;AACvC4B,MAAII,YACF;EAEF,IAAIC,QAAQ;AACZ,MAAIP,EAAEQ,MAAOD,UAAS,oEAAoEP,EAAEQ,MAAK;AACjG,MAAIR,EAAES,YACJF,UAAS,6EAA6EP,EAAES,YAAW;AACrGF,WAAS;AACTA,WACE;AACFL,MAAIQ,YAAYH;AAChB,SAAOL;;CAGTP,cAAcF,YAAmB;EAC/B,MAAMkB,YAAY,KAAKC;AACvB,MAAI,CAACD,UAAW;EAEhB,MAAME,aAAa,IAAIC,IAAI,KAAK/B,eAAegC,KAAKf,MAAWA,EAAE1B,GAAG,CAAC;EACrE,MAAM0C,UAAU,IAAIF,IAAIrB,WAAWsB,KAAKf,MAAWA,EAAE1B,GAAG,CAAC;AAEzD,OAAK,MAAMA,MAAMuC,WACf,KAAI,CAACG,QAAQC,IAAI3C,GAAG,EAAE;GACpB,MAAMsC,KAAKD,UAAUO,cAAc,mBAAmB5C,GAAE,IAAK;AAC7D,OAAIsC,IAAI;IACN,MAAMO,WAAW,KAAKtC,gBAAgBuC,IAAI9C,GAAG;AAC7C,QAAI6C,SAAUA,UAASE,SAASC,OAAOA,IAAI,CAAC;AAC5C,SAAKzC,gBAAgB0C,OAAOjD,GAAG;AAC/BsC,OAAGY,QAAQ;;;AAKjB,OAAK,MAAMxB,KAAKP,WACd,KAAI,CAACoB,WAAWI,IAAKjB,EAAU1B,GAAG,EAAE;GAClC,MAAMsC,KAAK,KAAKb,oBAAoBC,EAAS;AAC7CW,aAAUc,YAAYb,GAAG;;;CAK/BhB,qBAAqB;AACnB,MAAI,CAAC,KAAKnB,SAAU;EACpB,MAAMoC,aAAa,IAAIC,IAAI,KAAK/B,eAAegC,KAAKf,MAAWA,EAAE1B,GAAG,CAAC;AAErE,OAAK,MAAM,CAACA,IAAIc,YAAY,KAAKT,eAC/B,KAAI,CAACkC,WAAWI,IAAI3C,GAAG,EAAE;AACvBc,WAAQsC,MAAM;AACd,QAAK/C,eAAe4C,OAAOjD,GAAG;;AAIlC,OAAK,IAAIqD,IAAI,GAAGA,IAAI,KAAK5C,eAAe6C,QAAQD,KAAK;GACnD,MAAM3B,IAAI,KAAKjB,eAAe4C;AAC9B,OAAI,CAAC,KAAKhD,eAAesC,IAAIjB,EAAE1B,GAAG,EAAE;IAClC,MAAMuD,eAAe,IAAIxF,eAAeD,MAAMgD,SAAS;KACrD,GAAGY;KACH8B,QAAQ,KAAKrD,SAASc;KACtBwC,OAAOJ;KACPK,SAAS;KACTvE,aAAauC,EAAEvC,eAAe;KAC/B,CAAC;AACFoE,iBAAaxC,OAAO;AACpB,SAAKV,eAAesD,IAAIjC,EAAE1B,IAAIuD,aAAa;AAE3CA,iBAAarC,gBAAgB;AAC3BK,0BAAqB,KAAKC,oBAAoB,CAAC;MAC/C;;;;CAKRA,qBAAqB;AACnB,MAAI,CAAC,KAAKoC,YAAY,CAAC,KAAKxD,KAAM;EAElC,MAAMyD,UAAU,KAAKvB;AACrB,MAAIuB,QACF5F,aAAY4F,SAASvF,WAAW,KAAK8B,KAAK0D,eAAe,CAAC,CAAC;EAG7D,MAAMC,WAAW,KAAKC,GAAG,kBAAkB;AAC3C,OAAK,MAAM1B,MAAMyB,UAAU;GACzB,MAAME,UAAW3B,GAAmB4B,QAAQD;AAC5C,OAAI,CAACA,QAAS;GAEd,MAAMV,eAAe,KAAKlD,eAAeyC,IAAImB,QAAQ;AACrD,OAAI,CAACV,aAAc;GAEnB,MAAMY,MAAMrG,MAAMkD,QAAQuC,aAAatC,SAASjD,eAAe;GAE/D,MAAMoG,eAAe,KAAK7D,gBAAgBuC,IAAImB,QAAQ;AACtD,OAAIG,aAAcA,cAAarB,SAASC,OAAOA,IAAI,CAAC;GAEpD,MAAMH,WAA8B,EAAE;GACtC,MAAMwB,YAAY/F,WAAW6F,IAAIG,cAAc,CAAC;AAChD,UAAOD,UAAU;AACjBxB,YAAS0B,KAAKtG,YAAYqE,IAAI+B,UAAU,CAAC;GAEzC,MAAMnC,QAAQI,GAAGM,cAAc,wBAAsB;AACrD,OAAIV,MAAOW,UAAS0B,KAAKtG,YAAYiE,OAAOiC,IAAIK,eAAe,CAAC,CAAC;GAEjE,MAAMC,OAAOnC,GAAGM,cAAc,8BAA4B;AAC1D,OAAI6B,KAAM5B,UAAS0B,KAAKtG,YAAYwG,MAAMN,IAAIO,qBAAqB,CAAC,CAAC;GAErE,MAAMC,QAAQrC,GAAGM,cAAc,gCAA8B;AAC7D,OAAI+B,MAAO9B,UAAS0B,KAAKtG,YAAY0G,OAAOR,IAAIS,sBAAsB,CAAC,CAAC;GAExE,MAAMC,SAASvC,GAAGM,cAAc,iCAA+B;AAC/D,OAAIiC,OAAQhC,UAAS0B,KAAKtG,YAAY4G,QAAQV,IAAIW,uBAAuB,CAAC,CAAC;AAE3E,QAAKvE,gBAAgBoD,IAAIM,SAASpB,SAAS;;;CAI/CkC,gBAAgB;AACd,OAAKvD,oBAAoB;;CAG3BwD,UAAU;AACR,OAAK,MAAMnC,YAAY,KAAKtC,gBAAgB0E,QAAQ,CAClDpC,UAASE,SAASC,OAAOA,IAAI,CAAC;AAEhC,OAAKzC,gBAAgB2E,OAAO;AAE5B,OAAK,MAAMpE,WAAW,KAAKT,eAAe4E,QAAQ,CAChDnE,SAAQsC,MAAM;AAEhB,OAAK/C,eAAe6E,OAAO;AAE3B,MAAI,KAAK/E,UAAU;AACjB,QAAKA,SAASiD,MAAM;AACpB,QAAKjD,WAAW;;AAElB,OAAKC,OAAO;AAEZ,QAAM4E,SAAS;;CAGjBG,SAAS5G,OAAY;AACnB,SAAA,YADmB,KAAAyB,GACnB,6BAGW,sEAAsEzB,MAAM8G,SAAS,qBAAoBC,MAAA,CAAA;;;sBApOlG;AAClB,OAAI,OAAOzD,aAAa,YAAa,QAAO2D,KAAAA;GAC5C,IAAI9D,IAAIG,SAASC,cAAc,WAAW;AAC1CJ,KAAEU,YAAY;AACd,UAAOV;MACL;;CALN,CAAAvD,sBAA0B;EAA1B,IAAIoH,QAAQ,KAAKE,YAAYF;AAA7B,MAAI,CAACA,MAAS,OAAM,IAAIG,MAAM,yCAAyC;EAAvE,IAAIC,SAASJ,MAAMK,QAAQC,kBAAkBC,UAAU,KAAK;AAA5DH,SAAsB3F,KAAtB,KAAKA;AAAL2F,SAAsB3D,YAoOP,sEAAsEzD,MAAM8G,SAAS,qBAAoBC,MApOjE;AAAvD,SAAAK;;CAAA,CAAAvH,oBAAwB2H,KAAKC,OAAK;AAAA,MAAAD,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAA5H;AAgOb,QAAAE;GAAA,MAAA2H,eAIN,sEAAsEF,SAAe;AAAoB,OAAAC,MApOxH;IACM,MAAME,aADXC,OAAOF,gBAAyB,GAAG,CAAEZ,MAAM,CAACe,QAAQ,QAAQ,IACf;AACxC,QAAIJ,KAAsBjE,cAAcmE,WAAYF,MAAsBjE,YAAYmE"}
+{"version":3,"file":"toast.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","CompiledReactiveComponent","toast","VanillaMachine","normalizeProps","spreadProps","Component","stripStyle","props","Record","style","_style","rest","_store","Store","getStore","StoreProps","createStore","placement","duration","removeDelay","max","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","ToastStore","create","options","Options","success","Omit","type","error","info","loading","dismiss","id","Toaster","_machine","_api","_toastMachines","Map","_spreadCleanups","Array","_currentToasts","created","store","storeProps","group","machine","start","connect","service","subscribe","nextToasts","getToasts","_syncToastDOM","_syncToastMachines","queueMicrotask","_applyGroupSpreads","_createToastElement","HTMLElement","div","setAttribute","className","inner","title","description","container","el","currentIds","Set","map","nextIds","has","querySelector","cleanups","get","forEach","fn","delete","remove","appendChild","stop","i","length","toastMachine","parent","index","stacked","set","rendered","groupEl","getGroupProps","toastEls","$$","toastId","dataset","api","prevCleanups","rootProps","getRootProps","push","getTitleProps","desc","getDescriptionProps","close","getCloseTriggerProps","action","getActionTriggerProps","onAfterRender","dispose","values","clear","d","root","cloneNode","el0","class"],"sources":["../src/components/toast.tsx"],"sourcesContent":["import * as toast from '@zag-js/toast'\nimport { VanillaMachine, normalizeProps, spreadProps } from '@zag-js/vanilla'\nimport { Component } from '@geajs/core'\n\nfunction stripStyle(props: Record<string, any>): Record<string, any> {\n  const { style: _style, ...rest } = props\n  return rest\n}\n\nlet _store: toast.Store | null = null\n\nfunction getStore(props?: toast.StoreProps) {\n  if (!_store) {\n    _store = toast.createStore({\n      placement: 'bottom-end',\n      duration: 5000,\n      removeDelay: 200,\n      max: 5,\n      ...props,\n    })\n  }\n  return _store\n}\n\nexport class ToastStore {\n  static getStore = getStore\n\n  static create(options: toast.Options) {\n    return getStore().create(options)\n  }\n\n  static success(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'success' })\n  }\n\n  static error(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'error' })\n  }\n\n  static info(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'info' })\n  }\n\n  static loading(options: Omit<toast.Options, 'type'>) {\n    return getStore().create({ ...options, type: 'loading' })\n  }\n\n  static dismiss(id?: string) {\n    if (id) getStore().dismiss(id)\n    else getStore().dismiss()\n  }\n}\n\nexport class Toaster extends Component {\n  declare _machine: VanillaMachine<any> | null\n  declare _api: any\n  declare _toastMachines: Map<string, VanillaMachine<any>>\n  declare _spreadCleanups: Map<string, Array<() => void>>\n  declare _currentToasts: toast.Options[]\n\n  created(props: any) {\n    this._toastMachines = new Map()\n    this._spreadCleanups = new Map()\n    this._currentToasts = []\n\n    const store = getStore(props.storeProps)\n\n    this._machine = new VanillaMachine(toast.group.machine, { store })\n    this._machine.start()\n\n    this._api = toast.group.connect(this._machine.service, normalizeProps)\n\n    this._machine.subscribe(() => {\n      if (!this._machine) return\n      this._api = toast.group.connect(this._machine.service, normalizeProps)\n      const nextToasts = this._api.getToasts()\n      this._syncToastDOM(nextToasts)\n      this._currentToasts = nextToasts\n      this._syncToastMachines()\n      queueMicrotask(() => this._applyGroupSpreads())\n    })\n  }\n\n  _createToastElement(t: any): HTMLElement {\n    const div = document.createElement('div')\n    div.setAttribute('data-part', 'toast-root')\n    div.setAttribute('data-toast-id', t.id)\n    div.className =\n      'toast-root group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 shadow-lg transition-all bg-background text-foreground'\n\n    let inner = '<div class=\"grid gap-1\">'\n    if (t.title) inner += `<div data-part=\"title\" class=\"toast-title text-sm font-semibold\">${t.title}</div>`\n    if (t.description)\n      inner += `<div data-part=\"description\" class=\"toast-description text-sm opacity-90\">${t.description}</div>`\n    inner += '</div>'\n    inner +=\n      '<button data-part=\"close-trigger\" class=\"toast-close-trigger text-foreground/50 hover:text-foreground\">&#x2715;</button>'\n    div.innerHTML = inner\n    return div\n  }\n\n  _syncToastDOM(nextToasts: any[]) {\n    const container = this.el\n    if (!container) return\n\n    const currentIds = new Set(this._currentToasts.map((t: any) => t.id))\n    const nextIds = new Set(nextToasts.map((t: any) => t.id))\n\n    for (const id of currentIds) {\n      if (!nextIds.has(id)) {\n        const el = container.querySelector(`[data-toast-id=\"${id}\"]`)\n        if (el) {\n          const cleanups = this._spreadCleanups.get(id)\n          if (cleanups) cleanups.forEach((fn) => fn())\n          this._spreadCleanups.delete(id)\n          el.remove()\n        }\n      }\n    }\n\n    for (const t of nextToasts) {\n      if (!currentIds.has((t as any).id)) {\n        const el = this._createToastElement(t as any)\n        container.appendChild(el)\n      }\n    }\n  }\n\n  _syncToastMachines() {\n    if (!this._machine) return\n    const currentIds = new Set(this._currentToasts.map((t: any) => t.id))\n\n    for (const [id, machine] of this._toastMachines) {\n      if (!currentIds.has(id)) {\n        machine.stop()\n        this._toastMachines.delete(id)\n      }\n    }\n\n    for (let i = 0; i < this._currentToasts.length; i++) {\n      const t = this._currentToasts[i] as any\n      if (!this._toastMachines.has(t.id)) {\n        const toastMachine = new VanillaMachine(toast.machine, {\n          ...t,\n          parent: this._machine.service,\n          index: i,\n          stacked: true,\n          removeDelay: t.removeDelay ?? 200,\n        })\n        toastMachine.start()\n        this._toastMachines.set(t.id, toastMachine)\n\n        toastMachine.subscribe(() => {\n          queueMicrotask(() => this._applyGroupSpreads())\n        })\n      }\n    }\n  }\n\n  _applyGroupSpreads() {\n    if (!this.rendered || !this._api) return\n\n    const groupEl = this.el\n    if (groupEl) {\n      spreadProps(groupEl, stripStyle(this._api.getGroupProps()))\n    }\n\n    const toastEls = this.$$('[data-toast-id]')\n    for (const el of toastEls) {\n      const toastId = (el as HTMLElement).dataset.toastId\n      if (!toastId) continue\n\n      const toastMachine = this._toastMachines.get(toastId)\n      if (!toastMachine) continue\n\n      const api = toast.connect(toastMachine.service, normalizeProps)\n\n      const prevCleanups = this._spreadCleanups.get(toastId)\n      if (prevCleanups) prevCleanups.forEach((fn) => fn())\n\n      const cleanups: Array<() => void> = []\n      const rootProps = stripStyle(api.getRootProps())\n      delete rootProps['data-part']\n      cleanups.push(spreadProps(el, rootProps))\n\n      const title = el.querySelector('[data-part=\"title\"]')\n      if (title) cleanups.push(spreadProps(title, api.getTitleProps()))\n\n      const desc = el.querySelector('[data-part=\"description\"]')\n      if (desc) cleanups.push(spreadProps(desc, api.getDescriptionProps()))\n\n      const close = el.querySelector('[data-part=\"close-trigger\"]')\n      if (close) cleanups.push(spreadProps(close, api.getCloseTriggerProps()))\n\n      const action = el.querySelector('[data-part=\"action-trigger\"]')\n      if (action) cleanups.push(spreadProps(action, api.getActionTriggerProps()))\n\n      this._spreadCleanups.set(toastId, cleanups)\n    }\n  }\n\n  onAfterRender() {\n    this._applyGroupSpreads()\n  }\n\n  dispose() {\n    for (const cleanups of this._spreadCleanups.values()) {\n      cleanups.forEach((fn) => fn())\n    }\n    this._spreadCleanups.clear()\n\n    for (const machine of this._toastMachines.values()) {\n      machine.stop()\n    }\n    this._toastMachines.clear()\n\n    if (this._machine) {\n      this._machine.stop()\n      this._machine = null\n    }\n    this._api = null\n\n    super.dispose()\n  }\n\n  template(props: any) {\n    return (\n      <div\n        data-part=\"group\"\n        class={`toaster fixed z-[100] flex max-h-screen flex-col-reverse gap-2 p-4 ${props.class || 'bottom-0 right-0'}`}\n      />\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/toggle-group.d.mts

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

package/dist/toggle-group.mjs

@@ -1,15 +1,27 @@
 import { t as ZagComponent } from "./zag-component.mjs";
-import { Component, GEA_DOM_ITEM, GEA_DOM_KEY, GEA_ELEMENT, GEA_ON_PROP_CHANGE, GEA_REGISTER_MAP, GEA_SYNC_MAP } from "@geajs/core";
+import { t as NOOP_DISPOSER } from "./disposer.mjs";
+import { o as GEA_CREATE_TEMPLATE, u as GEA_PROXY_RAW } from "./bind.mjs";
+import { n as _DIRTY_PROPS } from "./dirty-symbols.mjs";
+import { t as reactiveClassName } from "./reactive-class-name.mjs";
+import { n as _rescue, t as keyedList } from "./keyed-list.mjs";
+import { t as GEA_DOM_ITEM } from "./keyed-list-symbols.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as toggleGroup from "@zag-js/toggle-group";
 //#region src/components/toggle-group.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-->";
+	return t.content.firstChild;
+}
+let _tpl1_root = null;
+function _tpl1_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<button data-part=item class=\"toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\">0";
+	return t.content.firstChild;
+}
+const __rq_L0 = /* @__PURE__ */ new Map();
 var ToggleGroup = class extends ZagComponent {
-	static {
-		this.__geaTagName = "toggle-group";
-	}
-	#__rowEls_list;
-	#__dc___unresolved_0;
 	createMachine(_props) {
 		return toggleGroup.machine;
 	}
@@ -41,85 +53,66 @@ var ToggleGroup = class extends ZagComponent {
 	syncState(api) {
 		this.value = api.value;
 	}
-	template(props) {
-		const __id = this.id;
-		Component._register(ZagComponent, "zag-component");
-		const items = props.items || [];
-		return `<div id="${__id}" data-part="root" class="${`toggle-group-root inline-flex rounded-md border ${props.class || ""}`.trim()}">${items.map((item) => `<button data-gid="${item?.value ?? item}" data-part="item"${item.value == null || item.value === false ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`).join("") + "<!---->"}</div>`;
-	}
-	render__unresolved_0Item(item) {
-		return `<button data-gid="${item?.value ?? item}" data-part="item"${__v(item.value) == null || __v(item.value) === false ? "" : ` data-value="${item.value}"`} class="toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground">${item.label}</button>`;
-	}
-	create__unresolved_0Item(item) {
-		var __c = this.#__dc___unresolved_0 || (this.#__dc___unresolved_0 = this.____unresolved_0_container);
-		if (!__c.__geaTpl) try {
-			var __tw = document.createElement("template");
-			__tw.innerHTML = this.render__unresolved_0Item({
-				value: 0,
-				label: " "
-			});
-			__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 = item.value;
-		if (__av == null || __av === false) el.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (el.getAttribute("data-value") !== __newAttr) el.setAttribute("data-value", __newAttr);
-		}
-		if (el.textContent !== `
-            ${item.label}
-          `) el.textContent = `
-            ${item.label}
-          `;
-		el[GEA_DOM_KEY] = String(item?.value ?? item);
-		el[GEA_DOM_ITEM] = item;
-		return el;
-	}
-	patch__unresolved_0Item(row, item, __prevItem) {
-		if (!row) return;
-		var __av = item.value;
-		if (__av == null || __av === false) row.removeAttribute("data-value");
-		else {
-			const __newAttr = String(__av);
-			if (row.getAttribute("data-value") !== __newAttr) row.setAttribute("data-value", __newAttr);
-		}
-		if (row.textContent !== `
-            ${item.label}
-          `) row.textContent = `
-            ${item.label}
-          `;
-		row[GEA_DOM_KEY] = String(item?.value ?? item);
-		(this.#__rowEls_list || (this.#__rowEls_list = {}))[String(item?.value ?? 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 = `toggle-group-root inline-flex rounded-md border ${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 anchor1 = root.firstChild;
+		reactiveClassName(el0, d, this, () => `toggle-group-root inline-flex rounded-md border ${this.props.class || ""}`);
+		const __ki_L0 = (item, idx, d) => {
+			const root = (_tpl1_root || (_tpl1_root = _tpl1_create())).cloneNode(true);
+			root.setAttribute("data-value", String(item.value));
+			{
+				const __n = root.firstChild;
+				__n.nodeValue = `${item.label ?? ""}`;
 			}
-		}
-		if (key === "items") this[GEA_SYNC_MAP](0);
-	}
-	__observe_local_props(__v, __c) {
-		this[GEA_SYNC_MAP](0);
-	}
-	createdHooks() {
-		this[GEA_REGISTER_MAP](0, "____unresolved_0_container", () => this.$(":scope"), () => {
-			return this.props.items || [];
-		}, (__item) => this.create__unresolved_0Item(__item), "value");
+			root[GEA_DOM_ITEM] = item;
+			return root;
+		};
+		const __kp_L0 = (el, item) => {
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("value")) el.setAttribute("data-value", String(item.value));
+			if (!item[_DIRTY_PROPS] || item[_DIRTY_PROPS].has("label")) {
+				const __n = el.__r0 || (el.__r0 = el.firstChild);
+				__n.nodeValue = `${item.label ?? ""}`;
+			}
+		};
+		keyedList({
+			container: anchor1.parentNode,
+			anchor: anchor1,
+			disposer: d,
+			root: this,
+			pending: __rq_L0,
+			path: () => this.props.items || [],
+			key: (item, idx) => item.value,
+			createEntry: (item, idx) => {
+				const __k = item.value;
+				const __r = _rescue(__rq_L0, String(__k), item);
+				if (__r) {
+					const __raw = item && item[GEA_PROXY_RAW] || item;
+					if (__r.item !== __raw) {
+						const __prev = __r.item;
+						__r.item = __raw;
+						__kp_L0(__r.element, item, __prev, idx);
+					}
+					return __r;
+				}
+				const __rd = NOOP_DISPOSER;
+				const __obs = null;
+				const __el = __ki_L0(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;
+				__kp_L0(e.element, newItem);
+			}
+		});
+		return root;
 	}
 };
 //#endregion

package/dist/toggle-group.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.mjs","names":["__v","v","valueOf","Component","GEA_DOM_KEY","GEA_DOM_ITEM","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_SYNC_MAP","GEA_REGISTER_MAP","toggleGroup","normalizeProps","ZagComponent","ToggleGroup","__geaTagName","__rowEls_list","__dc___unresolved_0","value","createMachine","_props","machine","getMachineProps","props","id","defaultValue","multiple","disabled","orientation","loopFocus","rovingFocus","onValueChange","details","ValueChangeDetails","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","getItemProps","HTMLElement","dataset","syncState","template","__id","_register","items","class","trim","map","item","label","join","render__unresolved_0Item","create__unresolved_0Item","__c","____unresolved_0_container","__geaTpl","__tw","document","createElement","innerHTML","content","firstElementChild","removeAttribute","__err","console","error","cloneNode","__fw","__av","__newAttr","String","getAttribute","setAttribute","textContent","patch__unresolved_0Item","row","__prevItem","key","__el","__boundValue","__newClass","replace","className","__observe_local_props","createdHooks","$","__item"],"sources":["../src/components/toggle-group.tsx"],"sourcesContent":["import * as toggleGroup from '@zag-js/toggle-group'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class ToggleGroup extends ZagComponent {\n  declare value: string[]\n\n  createMachine(_props: any): any {\n    return toggleGroup.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      multiple: props.multiple ?? false,\n      disabled: props.disabled,\n      orientation: props.orientation ?? 'horizontal',\n      loopFocus: props.loopFocus ?? true,\n      rovingFocus: props.rovingFocus ?? true,\n      onValueChange: (details: toggleGroup.ValueChangeDetails) => {\n        this.value = details.value\n        props.onValueChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return toggleGroup.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"item\"]': (api, el) => api.getItemProps({ value: (el as HTMLElement).dataset.value }),\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n  }\n\n  template(props: any) {\n    const items = props.items || []\n    return (\n      <div data-part=\"root\" class={`toggle-group-root inline-flex rounded-md border ${props.class || ''}`}>\n        {items.map((item: any) => (\n          <button\n            key={item.value}\n            data-part=\"item\"\n            data-value={item.value}\n            class=\"toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\"\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"toggle-group.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClassName","reactiveAttr","reactiveTextValue","GEA_DIRTY_PROPS","GEA_DOM_ITEM","GEA_PROXY_RAW","_rescue","NOOP_DISPOSER","keyedList","toggleGroup","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","_tpl1_root","_tpl1_create","__rq_L0","Map","ToggleGroup","value","createMachine","_props","machine","getMachineProps","props","id","defaultValue","multiple","disabled","orientation","loopFocus","rovingFocus","onValueChange","details","ValueChangeDetails","connectApi","service","connect","getSpreadMap","[data-part=\"item\"]","api","el","getItemProps","HTMLElement","dataset","syncState","d","items","root","cloneNode","el0","anchor1","class","__ki_L0","item","idx","setAttribute","String","__n","nodeValue","label","__kp_L0","has","__r0","container","parentNode","anchor","disposer","pending","path","key","createEntry","__k","__r","__raw","__prev","element","__rd","__obs","__li","__el","obs","patchEntry","e","newItem","newIdx"],"sources":["../src/components/toggle-group.tsx"],"sourcesContent":["import * as toggleGroup from '@zag-js/toggle-group'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class ToggleGroup extends ZagComponent {\n  declare value: string[]\n\n  createMachine(_props: any): any {\n    return toggleGroup.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      value: props.value,\n      defaultValue: props.defaultValue,\n      multiple: props.multiple ?? false,\n      disabled: props.disabled,\n      orientation: props.orientation ?? 'horizontal',\n      loopFocus: props.loopFocus ?? true,\n      rovingFocus: props.rovingFocus ?? true,\n      onValueChange: (details: toggleGroup.ValueChangeDetails) => {\n        this.value = details.value\n        props.onValueChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return toggleGroup.connect(service, normalizeProps)\n  }\n\n  getSpreadMap() {\n    return {\n      '[data-part=\"root\"]': 'getRootProps',\n      '[data-part=\"item\"]': (api, el) => api.getItemProps({ value: (el as HTMLElement).dataset.value }),\n    }\n  }\n\n  syncState(api: any) {\n    this.value = api.value\n  }\n\n  template(props: any) {\n    const items = props.items || []\n    return (\n      <div data-part=\"root\" class={`toggle-group-root inline-flex rounded-md border ${props.class || ''}`}>\n        {items.map((item: any) => (\n          <button\n            key={item.value}\n            data-part=\"item\"\n            data-value={item.value}\n            class=\"toggle-group-item inline-flex items-center justify-center rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground data-[state=on]:bg-accent data-[state=on]:text-accent-foreground\"\n          >\n            {item.label}\n          </button>\n        ))}\n      </div>\n    )\n  }\n}\n"],"mappings":"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"}

package/dist/tooltip.d.mts

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

package/dist/tooltip.mjs

@@ -1,12 +1,18 @@
 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 { t as reactiveStyle } from "./reactive-style.mjs";
 import { normalizeProps } from "@zag-js/vanilla";
 import * as tooltip from "@zag-js/tooltip";
 //#region src/components/tooltip.tsx
+let _tpl0_root = null;
+function _tpl0_create() {
+	const t = document.createElement("template");
+	t.innerHTML = "<div><div data-part=trigger class=tooltip-trigger>0</div><div data-part=positioner class=tooltip-positioner><div data-part=content class=\"tooltip-content z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md\">0";
+	return t.content.firstChild;
+}
 var Tooltip = class extends ZagComponent {
-	static {
-		this.__geaTagName = "gea-tooltip";
-	}
 	createMachine(_props) {
 		return tooltip.machine;
 	}
@@ -45,45 +51,19 @@ var Tooltip = 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()}"`} style="display: inline-block"><div id="${__id + "-b1"}" data-part="trigger" class="tooltip-trigger" style="display: inline-block">${props.children}</div><div data-part="positioner" class="tooltip-positioner"><div id="${__id + "-b2"}" data-part="content" class="tooltip-content z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md">${geaEscapeHtml(String(props.content))}</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 === "children") {
-			const __el = this.__e0 || (this.__e0 = __gid(__id + "-b1"));
-			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 === "content") {
-			const __el = this.__e1 || (this.__e1 = __gid(__id + "-b2"));
-			if (__el && __el.textContent !== value) __el.textContent = value;
-		}
-	}
-	__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 el1 = el0;
+		const el2 = root.firstChild;
+		const marker3 = root.firstChild.firstChild;
+		const marker4 = root.childNodes[1].firstChild.firstChild;
+		reactiveClass(el0, d, this, () => this.props.class || "");
+		reactiveStyle(el1, d, this, () => ({ display: "inline-block" }));
+		reactiveStyle(el2, d, this, () => ({ display: "inline-block" }));
+		reactiveText(marker3, d, this, () => this.props.children);
+		reactiveTextValue(marker4, d, this, () => this.props.content);
+		return root;
 	}
 };
 //#endregion

package/dist/tooltip.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.mjs","names":["Component","geaEscapeHtml","GEA_ON_PROP_CHANGE","GEA_ELEMENT","GEA_PATCH_NODE","GEA_INSTANTIATE_CHILD_COMPONENTS","GEA_MOUNT_COMPILED_CHILD_COMPONENTS","tooltip","normalizeProps","ZagComponent","Tooltip","__geaTagName","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","openDelay","closeDelay","closeOnPointerDown","closeOnEscape","closeOnScroll","interactive","disabled","positioning","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","template","__id","_register","class","String","trim","children","content","key","value","__el","__boundValue","__newClass","replace","className","__e0","__gid","__tw","document","createElement","innerHTML","__newEl","firstElementChild","__existEl","childNodes","length","constructor","parentComponent","__e1","textContent","__resetEls"],"sources":["../src/components/tooltip.tsx"],"sourcesContent":["import * as tooltip from '@zag-js/tooltip'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Tooltip extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return tooltip.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      openDelay: props.openDelay ?? 400,\n      closeDelay: props.closeDelay ?? 150,\n      closeOnPointerDown: props.closeOnPointerDown ?? true,\n      closeOnEscape: props.closeOnEscape ?? true,\n      closeOnScroll: props.closeOnScroll ?? true,\n      interactive: props.interactive ?? false,\n      disabled: props.disabled,\n      positioning: props.positioning,\n      'aria-label': props['aria-label'],\n      onOpenChange: (details: tooltip.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return tooltip.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=\"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 || ''} style={{ display: 'inline-block' }}>\n        <div data-part=\"trigger\" class=\"tooltip-trigger\" style={{ display: 'inline-block' }}>\n          {props.children}\n        </div>\n        <div data-part=\"positioner\" class=\"tooltip-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"tooltip-content z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md\"\n          >\n            {props.content}\n          </div>\n        </div>\n      </div>\n    )\n  }\n}\n"],"mappings":";;;;;AAIA,IAAqBU,UAArB,cAAqCD,aAAa;;sBAAA;;CAGhDI,cAAcC,QAAkB;AAC9B,SAAOP,QAAQQ;;CAGjBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,MAAMK,MAAML;GACZO,aAAaF,MAAME;GACnBC,WAAWH,MAAMG,aAAa;GAC9BC,YAAYJ,MAAMI,cAAc;GAChCC,oBAAoBL,MAAMK,sBAAsB;GAChDC,eAAeN,MAAMM,iBAAiB;GACtCC,eAAeP,MAAMO,iBAAiB;GACtCC,aAAaR,MAAMQ,eAAe;GAClCC,UAAUT,MAAMS;GAChBC,aAAaV,MAAMU;GACnB,cAAcV,MAAM;GACpBW,eAAeC,YAAuC;AACpD,SAAKjB,OAAOiB,QAAQjB;AACpBK,UAAMW,eAAeC,QAAQ;;GAEhC;;CAGHE,WAAWC,SAAc;AACvB,SAAOzB,QAAQ0B,QAAQD,SAASxB,eAAe;;CAGjD0B,eAAe;AACb,SAAO;GACL,2BAAyB;GACzB,8BAA4B;GAC5B,2BAAyB;GACzB,yBAAuB;GACvB,6BAA2B;GAC5B;;CAGHC,UAAUC,KAAU;AAClB,OAAKxB,OAAOwB,IAAIxB;;CAGlByB,SAASpB,OAAY;EAAA,MAAAqB,OAAA,KAAApB;AAAAlB,YAAAuC,UAAA9B,cAAA,gBAAA;AACnB,SAAA,YAAA6B,KAAA,IACcrB,MAAMuB,SAAS,OAAE,SAAjBvB,MAAMuB,SAAS,QAAE,QAAA,KAAA,aAAjBvB,MAAMuB,SAAS,OAAE,OAAAC,OAAjBxB,MAAMuB,SAAS,GAAE,GAAA,IAAAE,MAAA,CAAA,GAAA,0CAnDnCJ,OAAU,MAAK,8EAqDJrB,MAAM0B,SAAQ,wEArDzBL,OAAU,MAAK,iJAAfrC,cAAcwC,OA4DDxB,MAAM2B,QA5DwB,CAAC,CAAA;;CAA5C,CAAA1C,oBAAwB2C,KAAKC,OAAK;EAAA,MAAAR,OAAA,KAAApB;AAAA,MAAA2B,QAAA,SAAA;GAAA,MAAAE,OAAA,KAAA5C;AAiDb,QAAAc;GAAA,MAAA+B,eAEHF,SAAe;AAAE,OAAAC,MAnDnC;IACM,MAAME,aADXR,OAAOO,gBAAyB,GAAG,CAAEN,MAAM,CAACQ,QAAQ,QAAQ,IACf;AACxC,QAAIH,KAAsBI,cAAcF,WAAYF,MAAsBI,YAAYF;;;AACvF,MAAAJ,QAAA,YAAA;GAAA,MAAAE,OAAA,KAAAK,SAAA,KAAAA,OAAAC,MAAAf,OAAA,MAAA;AAAA,OAAAS,MAHL;IACI,MAAMO,OAAOC,SAASC,cAAc,WAAW;AAC/CF,SAAKG,YAASX;IACd,MAAMY,UAAUJ,KAAKV,QAAQe;IAC7B,MAAMC,YAAYb,KAAsBY;AACxC,QAAID,WAAWE,aAAaN,KAAKV,QAAQiB,WAAWC,WAAW,EAC7D,MAAKC,YAAW3D,gBAAwBwD,WAAWF,SAAS,KAAK;aACxDX,KAAsBU,cAASX,OAA4B;AACpEC,UAAsBU,YAASX;AAC/B,UAAIzC,mCAAyB;AAC7B,SAAI,KAAK2D,gBAAiB,MAAKA,gBAAe1D,sCAAyB;;;;AAE1E,MAAAuC,QAAA,WAAA;GAAA,MAAAE,OAAA,KAAAkB,SAAA,KAAAA,OAAAZ,MAAAf,OAAA,MAAA;AAAA,OAAAS,QAZCA,KAAsBmB,gBAAWpB,MAArCC,MAAsBmB,cAAWpB;;;CAAjCqB,aAAU;AAAV,OAAIf,OAAyB;AAA7B,OAAIa,OAAyB"}
+{"version":3,"file":"tooltip.mjs","names":["GEA_CREATE_TEMPLATE","reactiveClass","reactiveStyle","reactiveText","reactiveTextValue","tooltip","normalizeProps","ZagComponent","_tpl0_root","_tpl0_create","t","document","createElement","innerHTML","content","firstChild","Tooltip","open","createMachine","_props","machine","getMachineProps","props","id","defaultOpen","openDelay","closeDelay","closeOnPointerDown","closeOnEscape","closeOnScroll","interactive","disabled","positioning","onOpenChange","details","OpenChangeDetails","connectApi","service","connect","getSpreadMap","syncState","api","d","root","cloneNode","el0","el1","el2","marker3","marker4","childNodes","class","display","t3","children","t4"],"sources":["../src/components/tooltip.tsx"],"sourcesContent":["import * as tooltip from '@zag-js/tooltip'\nimport { normalizeProps } from '@zag-js/vanilla'\nimport ZagComponent from '../primitives/zag-component'\n\nexport default class Tooltip extends ZagComponent {\n  declare open: boolean\n\n  createMachine(_props: any): any {\n    return tooltip.machine\n  }\n\n  getMachineProps(props: any) {\n    return {\n      id: this.id,\n      open: props.open,\n      defaultOpen: props.defaultOpen,\n      openDelay: props.openDelay ?? 400,\n      closeDelay: props.closeDelay ?? 150,\n      closeOnPointerDown: props.closeOnPointerDown ?? true,\n      closeOnEscape: props.closeOnEscape ?? true,\n      closeOnScroll: props.closeOnScroll ?? true,\n      interactive: props.interactive ?? false,\n      disabled: props.disabled,\n      positioning: props.positioning,\n      'aria-label': props['aria-label'],\n      onOpenChange: (details: tooltip.OpenChangeDetails) => {\n        this.open = details.open\n        props.onOpenChange?.(details)\n      },\n    }\n  }\n\n  connectApi(service: any) {\n    return tooltip.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=\"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 || ''} style={{ display: 'inline-block' }}>\n        <div data-part=\"trigger\" class=\"tooltip-trigger\" style={{ display: 'inline-block' }}>\n          {props.children}\n        </div>\n        <div data-part=\"positioner\" class=\"tooltip-positioner\">\n          <div\n            data-part=\"content\"\n            class=\"tooltip-content z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md\"\n          >\n            {props.content}\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,IAAqBC,UAArB,cAAqCT,aAAa;CAEhDW,cAAcC,QAAkB;AAC9B,SAAOd,QAAQe;;CAEjBC,gBAAgBC,OAAY;AAC1B,SAAO;GACLC,IAAI,KAAKA;GACTN,MAAMK,MAAML;GACZO,aAAaF,MAAME;GACnBC,WAAWH,MAAMG,aAAa;GAC9BC,YAAYJ,MAAMI,cAAc;GAChCC,oBAAoBL,MAAMK,sBAAsB;GAChDC,eAAeN,MAAMM,iBAAiB;GACtCC,eAAeP,MAAMO,iBAAiB;GACtCC,aAAaR,MAAMQ,eAAe;GAClCC,UAAUT,MAAMS;GAChBC,aAAaV,MAAMU;GACnB,cAAcV,MAAM;GACpBW,eAAeC,YAAuC;AACpD,SAAKjB,OAAOiB,QAAQjB;AACpBK,UAAMW,eAAeC,QAAQ;;GAEhC;;CAEHE,WAAWC,SAAc;AACvB,SAAOhC,QAAQiC,QAAQD,SAAS/B,eAAe;;CAEjDiC,eAAe;AACb,SAAO;GACL,2BAAyB;GACzB,8BAA4B;GAC5B,2BAAyB;GACzB,yBAAuB;GACvB,6BAA2B;GAC5B;;CAEHC,UAAUC,KAAU;AAClB,OAAKxB,OAAOwB,IAAIxB;;CAElB,CAACjB,qBAAqB0C,GAAG;EACvB,MAAMC,QAAQnC,eAAeA,aAAaC,cAAc,GAAGmC,UAAU,KAAK;EAC1E,MAAMC,MAAMF;EACZ,MAAMG,MAAMD;EACZ,MAAME,MAAMJ,KAAK5B;EACjB,MAAMiC,UAAUL,KAAK5B,WAAWA;EAChC,MAAMkC,UAAUN,KAAKO,WAAW,GAAGnC,WAAWA;AAC9Cd,gBAAc4C,KAAKH,GAAG,YAAY,KAAKpB,MAAM6B,SAAS,GAAG;AACzDjD,gBAAc4C,KAAKJ,GAAG,aAAa,EACjCU,SAAS,gBACV,EAAE;AACHlD,gBAAc6C,KAAKL,GAAG,aAAa,EACjCU,SAAS,gBACV,EAAE;AAEHjD,eAAakD,SAAIX,GAAG,YAAY,KAAKpB,MAAMgC,SAAS;AAEpDlD,oBAAkBmD,SAAIb,GAAG,YAAY,KAAKpB,MAAMR,QAAQ;AACxD,SAAO6B"}

package/dist/tree-view.d.mts

@@ -8,7 +8,7 @@ declare class TreeView extends ZagComponent {
   expandedValue: string[];
   createMachine(_props: any): any;
   getMachineProps(props: any): {
-    id: any;
+    id: string;
     collection: any;
     selectedValue: any;
     defaultSelectedValue: any;
@@ -28,7 +28,7 @@ declare class TreeView extends ZagComponent {
     '[data-part="tree"]': string;
   };
   syncState(api: any): void;
-  template(props: any): string;
+  template(props: any): any;
 }
 //#endregion
 export { TreeView as default };