fluid-primitives 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/README.md +11 -0
  2. package/Resources/Public/JavaScript/dist/Accordion-eTTEZRA4.js +1 -0
  3. package/Resources/Public/JavaScript/dist/Client-Bcuea237.js +1 -0
  4. package/Resources/Public/JavaScript/dist/Clipboard-5zCCVAd5.js +1 -0
  5. package/Resources/Public/JavaScript/dist/Collapsible-CupTOmpO.js +1 -0
  6. package/Resources/Public/JavaScript/dist/Dialog-Bc_TDlPF.js +1 -0
  7. package/Resources/Public/JavaScript/dist/ScrollArea-B__fLtaA.js +1 -0
  8. package/Resources/Public/JavaScript/dist/Select-DuVsVrzn.js +1 -0
  9. package/Resources/Public/JavaScript/dist/Tabs-DaojVeQ3.js +1 -0
  10. package/Resources/Public/JavaScript/dist/Tooltip-BgU6DpGy.js +1 -0
  11. package/Resources/Public/JavaScript/dist/client.d.ts +2 -0
  12. package/Resources/Public/JavaScript/dist/client.js +1 -0
  13. package/Resources/Public/JavaScript/dist/index-AN0XU_8B.d.ts +134 -0
  14. package/Resources/Public/JavaScript/dist/primitives/accordion.d.ts +52 -0
  15. package/Resources/Public/JavaScript/dist/primitives/accordion.entry.d.ts +1 -0
  16. package/Resources/Public/JavaScript/dist/primitives/accordion.entry.js +1 -0
  17. package/Resources/Public/JavaScript/dist/primitives/accordion.js +1 -0
  18. package/Resources/Public/JavaScript/dist/primitives/clipboard.d.ts +15 -0
  19. package/Resources/Public/JavaScript/dist/primitives/clipboard.entry.d.ts +1 -0
  20. package/Resources/Public/JavaScript/dist/primitives/clipboard.entry.js +1 -0
  21. package/Resources/Public/JavaScript/dist/primitives/clipboard.js +1 -0
  22. package/Resources/Public/JavaScript/dist/primitives/collapsible.d.ts +15 -0
  23. package/Resources/Public/JavaScript/dist/primitives/collapsible.entry.d.ts +1 -0
  24. package/Resources/Public/JavaScript/dist/primitives/collapsible.entry.js +1 -0
  25. package/Resources/Public/JavaScript/dist/primitives/collapsible.js +1 -0
  26. package/Resources/Public/JavaScript/dist/primitives/dialog.d.ts +15 -0
  27. package/Resources/Public/JavaScript/dist/primitives/dialog.entry.d.ts +1 -0
  28. package/Resources/Public/JavaScript/dist/primitives/dialog.entry.js +1 -0
  29. package/Resources/Public/JavaScript/dist/primitives/dialog.js +1 -0
  30. package/Resources/Public/JavaScript/dist/primitives/scroll-area.d.ts +15 -0
  31. package/Resources/Public/JavaScript/dist/primitives/scroll-area.entry.d.ts +1 -0
  32. package/Resources/Public/JavaScript/dist/primitives/scroll-area.entry.js +1 -0
  33. package/Resources/Public/JavaScript/dist/primitives/scroll-area.js +1 -0
  34. package/Resources/Public/JavaScript/dist/primitives/select.d.ts +15 -0
  35. package/Resources/Public/JavaScript/dist/primitives/select.entry.d.ts +1 -0
  36. package/Resources/Public/JavaScript/dist/primitives/select.entry.js +1 -0
  37. package/Resources/Public/JavaScript/dist/primitives/select.js +1 -0
  38. package/Resources/Public/JavaScript/dist/primitives/tabs.d.ts +52 -0
  39. package/Resources/Public/JavaScript/dist/primitives/tabs.entry.d.ts +1 -0
  40. package/Resources/Public/JavaScript/dist/primitives/tabs.entry.js +1 -0
  41. package/Resources/Public/JavaScript/dist/primitives/tabs.js +1 -0
  42. package/Resources/Public/JavaScript/dist/primitives/tooltip.d.ts +15 -0
  43. package/Resources/Public/JavaScript/dist/primitives/tooltip.entry.d.ts +1 -0
  44. package/Resources/Public/JavaScript/dist/primitives/tooltip.entry.js +1 -0
  45. package/Resources/Public/JavaScript/dist/primitives/tooltip.js +1 -0
  46. package/package.json +81 -0
package/README.md ADDED
@@ -0,0 +1,11 @@
1
+ # Fluid Primitives
2
+
3
+ The headless component library for TYPO3 Fluid
4
+
5
+ ## Documentation
6
+
7
+ The documentation can be found at [fluid-primitives.com](https://fluid-primitives.com).
8
+
9
+ ## Development
10
+
11
+ See [github.com/jramke/fluid-primitives.com](https://github.com/jramke/fluid-primitives.com) for the development setup.
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/accordion";var i=class extends e{name=`accordion`;initMachine(e){return new t(r.machine,{collapsible:!0,...e})}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElements(`item`);t.forEach(e=>{this.spreadProps(e,this.api.getItemProps({value:e.getAttribute(`data-value`),disabled:e.getAttribute(`data-disabled`)===`true`}))});let n=this.getElements(`item-trigger`);n.forEach(e=>{this.spreadProps(e,this.api.getItemTriggerProps({value:e.getAttribute(`data-value`),disabled:e.getAttribute(`data-disabled`)===`true`}))});let r=this.getElements(`item-content`);r.forEach(e=>{this.spreadProps(e,this.api.getItemContentProps({value:e.getAttribute(`data-value`),disabled:e.getAttribute(`data-disabled`)===`true`}))});let i=this.getElements(`item-indicator`);i.forEach(e=>{this.spreadProps(e,this.api.getItemIndicatorProps({value:e.getAttribute(`data-value`),disabled:e.getAttribute(`data-disabled`)===`true`}))}),this.getElements(`item-header`)}};export{i as Accordion};
@@ -0,0 +1 @@
1
+ import{INIT_STATE as e,MachineStatus as t,createScope as n,mergeProps as r}from"@zag-js/core";import{ListCollection as i}from"@zag-js/collection";import{proxy as a,subscribe as o}from"@zag-js/store";import{compact as s,identity as c,isEqual as l,isFunction as u,isString as d,runIfFn as f,toArray as p,warn as m}from"@zag-js/utils";import{createNormalizer as h}from"@zag-js/types";import{nanoid as g}from"nanoid";var _=class{document;machine;api;hydrator=null;userProps;get doc(){return this.document}constructor(e,t=document){this.document=t,this.userProps=e,this.machine=this.initMachine(e),this.api=this.initApi()}init(){this.hydrator=new b(this.name,this.machine.scope.id,this.machine.scope.ids,this.doc),this.render(),this.machine.subscribe(()=>{this.api=this.initApi(),this.render()}),this.machine.start()}updateProps(e){this.machine.stop(),this.machine=this.initMachine({...this.userProps,...e}),this.api=this.initApi(),this.init()}destroy=()=>{this.machine.stop(),this.hydrator?.destroy()};spreadProps(e,t){k(e,t,this.machine.scope.id)}getElement(e,t){return this.hydrator?.getElement(e,t)||null}getElements(e,t){return this.hydrator?.getElements(e,t)||[]}portalElement(e,t=this.doc.body){e&&e.parentNode!==t&&(t.appendChild(e),e.setAttribute(`data-portalled`,`true`))}};function v(e,t){let n=window.FluidPrimitives.hydrationData;return!n||typeof n!=`object`?null:e?n[e]?t?n[e][t]||null:n[e]:null:n}function y(e,t){let n=v(e);n&&Object.keys(n).forEach(r=>{if(n[r].controlled)return;let i=t(n[r]);window.FluidPrimitives.uncontrolledInstances[e]||(window.FluidPrimitives.uncontrolledInstances[e]={}),window.FluidPrimitives.uncontrolledInstances[e][r]=i})}var b=class{componentName;doc;rootId;ids;elementRefs=new Map;constructor(e,t,n={},r=document){if(this.componentName=e,this.doc=r,!t)throw Error(`Root ID is required for component hydration: ${e}`);this.rootId=t,this.ids=n}getElement(e,t=this.doc){if(this.elementRefs.has(e))return this.elementRefs.get(e)||null;let n=null;return n=this.ids[e]?t.querySelector(`#${this.ids[e]}`):t.querySelector(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${e}"][data-scope="${this.componentName}"]`),n&&(t===this.doc&&this.elementRefs.set(e,n),n.removeAttribute(`data-hydrate-${this.componentName}`),n.__rootId=this.rootId),n}getElements(e,t=this.doc){if(this.elementRefs.has(e))return this.elementRefs.get(e);let n=[];return n=this.ids[e]?Array.from(t.querySelectorAll(`#${this.ids[e]}`)):Array.from(t.querySelectorAll(`[data-hydrate-${this.componentName}="${this.rootId}"][data-part="${e}"][data-scope="${this.componentName}"]`)),t===this.doc&&this.elementRefs.set(e,n),n.forEach(e=>e.removeAttribute(`data-hydrate-${this.componentName}`)),n}generateRefAttributesString(e){let t=this.ids[e]||`${this.rootId}-${e}`;return`data-scope="${this.componentName}" data-part="${e}" data-hydrate-${this.componentName}="${t}"`}setRefAttributes(e,t){let n=this.generateRefAttributesString(t),r=n.split(` `).map(e=>e.trim());r.forEach(t=>{let[n,r]=t.split(`=`);e.setAttribute(n,r.replace(/"/g,``))})}destroy(){this.elementRefs.clear()}};function x(e){let t=new i({items:e.items,itemToValue:e.itemToValueKey?t=>t?.[e.itemToValueKey]:void 0,itemToString:e.itemToStringKey?t=>t?.[e.itemToStringKey]:void 0,isItemDisabled:e.isItemDisabledKey?t=>t?.[e.isItemDisabledKey]:void 0,groupBy:e.groupByKey?t=>{let n=e.groupByKey;if(n)return n.includes(`.`)?n.split(`.`).reduce((e,t)=>e?e[t]:void 0,t):t?.[n]}:void 0});return t}function S(e){let t=e().value??e().defaultValue;e().debug&&console.log(`[bindable > ${e().debug}] initial`,t);let n=e().isEqual??Object.is,r=a({value:t}),i=()=>e().value!==void 0;return{initial:t,ref:r,get(){return i()?e().value:r.value},set(t){let a=r.value,o=u(t)?t(a):t;e().debug&&console.log(`[bindable > ${e().debug}] setValue`,{next:o,prev:a}),i()||(r.value=o),n(o,a)||e().onChange?.(o,a)},invoke(t,n){e().onChange?.(t,n)},hash(t){return e().hash?.(t)??String(t)}}}S.cleanup=e=>{},S.ref=e=>{let t=e;return{get:()=>t,set:e=>{t=e}}};function C(e){let t={current:e};return{get(e){return t.current[e]},set(e,n){t.current[e]=n}}}var w=class{scope;ctx;prop;state;refs;computed;event={type:``};previousEvent;effects=new Map;transition=null;cleanups=[];subscriptions=[];getEvent=()=>({...this.event,current:()=>this.event,previous:()=>this.previousEvent});getState=()=>({...this.state,matches:(...e)=>e.includes(this.state.get()),hasTag:e=>!!this.machine.states[this.state.get()]?.tags?.includes(e)});debug=(...e)=>{this.machine.debug&&console.log(...e)};notify=()=>{this.publish()};constructor(t,r={}){this.machine=t;let{id:i,ids:a,getRootNode:c}=f(r);this.scope=n({id:i,ids:a,getRootNode:c});let l=e=>{let n=f(r),i=t.props?.({props:s(n),scope:this.scope})??n;return i[e]};this.prop=l;let u=t.context?.({prop:l,bindable:S,scope:this.scope,flush(e){queueMicrotask(e)},getContext(){return d},getComputed(){return p},getRefs(){return m},getEvent:this.getEvent.bind(this)});u&&Object.values(u).forEach(e=>{let t=o(e.ref,()=>this.notify());this.cleanups.push(t)});let d={get(e){return u?.[e].get()},set(e,t){u?.[e].set(t)},initial(e){return u?.[e].initial},hash(e){let t=u?.[e].get();return u?.[e].hash(t)}};this.ctx=d;let p=e=>t.computed?.[e]({context:d,event:this.getEvent(),prop:l,refs:this.refs,scope:this.scope,computed:p})??{};this.computed=p;let m=C(t.refs?.({prop:l,context:d})??{});this.refs=m;let h=S(()=>({defaultValue:t.initialState({prop:l}),onChange:(n,r)=>{if(r){let e=this.effects.get(r);e?.(),this.effects.delete(r)}r&&this.action(t.states[r]?.exit),this.action(this.transition?.actions);let i=this.effect(t.states[n]?.effects);if(i&&this.effects.set(n,i),r===e){this.action(t.entry);let n=this.effect(t.effects);n&&this.effects.set(e,n)}this.action(t.states[n]?.entry)}}));this.state=h,this.cleanups.push(o(this.state.ref,()=>this.notify()))}send=e=>{this.status===t.Started&&queueMicrotask(()=>{this.previousEvent=this.event,this.event=e,this.debug(`send`,e);let t=this.state.get(),n=this.machine.states[t].on?.[e.type]??this.machine.on?.[e.type],r=this.choose(n);if(!r)return;this.transition=r;let i=r.target??t;this.debug(`transition`,r);let a=i!==t;a?this.state.set(i):this.action(r.actions)})};action=e=>{let t=u(e)?e(this.getParams()):e;if(!t)return;let n=t.map(e=>{let t=this.machine.implementations?.actions?.[e];return t||m(`[zag-js] No implementation found for action "${JSON.stringify(e)}"`),t});for(let e of n)e?.(this.getParams())};guard=e=>u(e)?e(this.getParams()):this.machine.implementations?.guards?.[e](this.getParams());effect=e=>{let t=u(e)?e(this.getParams()):e;if(!t)return;let n=t.map(e=>{let t=this.machine.implementations?.effects?.[e];return t||m(`[zag-js] No implementation found for effect "${JSON.stringify(e)}"`),t}),r=[];for(let e of n){let t=e?.(this.getParams());t&&r.push(t)}return()=>r.forEach(e=>e?.())};choose=e=>p(e).find(e=>{let t=!e.guard;return d(e.guard)?t=!!this.guard(e.guard):u(e.guard)&&(t=e.guard(this.getParams())),t});start(){this.status=t.Started,this.debug(`initializing...`),this.state.invoke(this.state.initial,e),this.setupTrackers()}stop(){this.effects.forEach(e=>e?.()),this.effects.clear(),this.transition=null,this.action(this.machine.exit),this.cleanups.forEach(e=>e()),this.cleanups=[],this.status=t.Stopped,this.debug(`unmounting...`)}subscribe=e=>{this.subscriptions.push(e)};status=t.NotStarted;get service(){return{state:this.getState(),send:this.send,context:this.ctx,prop:this.prop,scope:this.scope,refs:this.refs,computed:this.computed,event:this.getEvent(),getStatus:()=>this.status}}publish=()=>{this.callTrackers(),this.subscriptions.forEach(e=>e(this.service))};trackers=[];setupTrackers=()=>{this.machine.watch?.(this.getParams())};callTrackers=()=>{this.trackers.forEach(({deps:e,fn:t})=>{let n=e.map(e=>e());l(t.prev,n)||(t(),t.prev=n)})};getParams=()=>({state:this.getState(),context:this.ctx,event:this.getEvent(),prop:this.prop,send:this.send,action:this.action,guard:this.guard,track:(e,t)=>{t.prev=e.map(e=>e()),this.trackers.push({deps:e,fn:t})},refs:this.refs,computed:this.computed,flush:c,scope:this.scope,choose:this.choose})};const T={onFocus:`onFocusin`,onBlur:`onFocusout`,onChange:`onInput`,onDoubleClick:`onDblclick`,htmlFor:`for`,className:`class`,defaultValue:`value`,defaultChecked:`checked`},E=e=>{let t=``;for(let n in e){let r=e[n];if(r==null)continue;n.startsWith(`--`)||(n=n.replace(/[A-Z]/g,e=>`-${e.toLowerCase()}`)),t+=`${n}:${r};`}return t},D=h(e=>Object.entries(e).reduce((e,[t,n])=>n===void 0?e:(t in T&&(t=T[t]),t===`style`&&typeof n==`object`?(e.style=E(n),e):(e[t.toLowerCase()]=n,e)),{})),O=new Map;function k(e,t,n){e.__spreadId||=`spread_${g()}`;let r=``;r=n?`${e.__spreadId}_${n}`:`${e.__spreadId}`;let i=O.get(r)||{},a=Object.keys(t),o=(t,n)=>{e.addEventListener(t.toLowerCase(),n)},s=(t,n)=>{e.removeEventListener(t.toLowerCase(),n)},c=e=>e.startsWith(`on`),l=e=>!e.startsWith(`on`),u=e=>o(e.substring(2),t[e]),d=e=>s(e.substring(2),t[e]),f=n=>{let r=t[n],a=i[n];if(r!==a){if(n===`children`){e.textContent=r;return}if(typeof r==`boolean`&&(n.includes(`aria-`)||(r||=void 0)),r!=null){[`value`,`checked`,`htmlFor`].includes(n)?e[n]=r:e.setAttribute(n.toLowerCase(),r);return}e.removeAttribute(n.toLowerCase())}};for(let n in i)t[n]??e.removeAttribute(n.toLowerCase());let p=Object.keys(i).filter(c);return p.forEach(e=>{s(e.substring(2),i[e])}),a.filter(c).forEach(u),a.filter(l).forEach(f),O.set(r,t),function(){a.filter(c).forEach(d)}}export{_ as Component,b as ComponentHydrator,w as Machine,v as getHydrationData,x as getListCollectionFromHydrationData,y as initAllComponentInstances,r as mergeProps,D as normalizeProps,k as spreadProps};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/clipboard";var i=class extends e{name=`clipboard`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`label`);t&&this.spreadProps(t,this.api.getLabelProps());let n=this.getElement(`control`);n&&this.spreadProps(n,this.api.getControlProps());let r=this.getElement(`input`);r&&this.spreadProps(r,this.api.getInputProps());let i=this.getElement(`indicator-copied`);i&&this.spreadProps(i,this.api.getIndicatorProps({copied:!0}));let a=this.getElement(`indicator-idle`);a&&this.spreadProps(a,this.api.getIndicatorProps({copied:!1}));let o=this.getElement(`trigger`);o&&this.spreadProps(o,this.api.getTriggerProps())}};export{i as Clipboard};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/collapsible";var i=class extends e{name=`collapsible`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`trigger`);t&&this.spreadProps(t,this.api.getTriggerProps());let n=this.getElement(`trigger-text`);n&&n.dataset.openText&&n.dataset.closeText&&(n.textContent=this.api.open?n.dataset.closeText:n.dataset.openText);let r=this.getElement(`content`);r&&this.spreadProps(r,this.api.getContentProps())}};export{i as Collapsible};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/dialog";var i=class extends e{name=`dialog`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElements(`trigger`);e.forEach(e=>{this.spreadProps(e,this.api.getTriggerProps())});let t=this.getElement(`backdrop`);t&&this.spreadProps(t,this.api.getBackdropProps());let n=this.getElement(`positioner`);n&&this.spreadProps(n,this.api.getPositionerProps());let r=this.getElement(`content`);r&&this.spreadProps(r,this.api.getContentProps());let i=this.getElement(`title`);i&&this.spreadProps(i,this.api.getTitleProps());let a=this.getElement(`description`);a&&this.spreadProps(a,this.api.getDescriptionProps());let o=this.getElements(`close-trigger`);o.forEach(e=>{this.spreadProps(e,this.api.getCloseTriggerProps())})}};export{i as Dialog};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/scroll-area";var i=class extends e{name=`scroll-area`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`viewport`);t&&this.spreadProps(t,this.api.getViewportProps());let n=this.getElement(`content`);n&&this.spreadProps(n,this.api.getContentProps());let r=this.getElements(`scrollbar`);r.forEach(e=>{this.spreadProps(e,this.api.getScrollbarProps({orientation:e.getAttribute(`data-orientation`)}))});let i=this.getElement(`corner`);i&&this.spreadProps(i,this.api.getCornerProps());let a=this.getElements(`thumb`);a.forEach(e=>{this.spreadProps(e,this.api.getThumbProps({orientation:e.getAttribute(`data-orientation`)}))})}};export{i as ScrollArea};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,getListCollectionFromHydrationData as n,mergeProps as r,normalizeProps as i}from"./Client-Bcuea237.js";import*as a from"@zag-js/select";var o=class extends e{name=`select`;initMachine(e){return new t(a.machine,{...e,get collection(){return n(e.collection)}})}initApi(){return a.connect(this.machine.service,i)}render=()=>{let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`control`);t&&this.spreadProps(t,this.api.getControlProps());let n=this.getElement(`hidden-select`);n&&this.spreadProps(n,this.api.getHiddenSelectProps());let i=this.getElement(`label`);i&&this.spreadProps(i,this.api.getLabelProps());let a=this.getElement(`trigger`);a&&this.spreadProps(a,this.api.getTriggerProps());let o=this.getElement(`positioner`);o&&this.spreadProps(o,this.api.getPositionerProps());let s=this.getElement(`content`);s&&this.spreadProps(s,this.api.getContentProps());let c=this.getElement(`value-text`);c&&this.spreadProps(c,r(this.api.getValueTextProps(),{children:this.api.valueAsString||c.dataset.placeholder}));let l=this.getElements(`item-group`);l.forEach(e=>{this.spreadProps(e,this.api.getItemGroupProps({id:e.dataset.id}));let t=this.getElement(`item-group-label`,e);t&&this.spreadProps(t,this.api.getItemGroupLabelProps({htmlFor:e.dataset.id}))});let u=this.getElements(`item`);u.forEach(e=>{let t=this.api.collection.find(e.dataset.value);t&&this.spreadProps(e,this.api.getItemProps({item:t}))});let d=this.getElements(`item-text`);d.forEach(e=>{let t=this.api.collection.find(e.dataset.value);t&&this.spreadProps(e,this.api.getItemTextProps({item:t}))});let f=this.getElements(`item-indicator`);f.forEach(e=>{let t=this.api.collection.find(e.dataset.value);t&&this.spreadProps(e,this.api.getItemIndicatorProps({item:t}))});let p=this.getElement(`clear-trigger`);p&&this.spreadProps(p,this.api.getClearTriggerProps());let m=this.getElement(`indicator`);m&&this.spreadProps(m,this.api.getIndicatorProps())}};export{o as Select};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/tabs";var i=class extends e{name=`tabs`;initMachine(e){return new t(r.machine,e)}initApi(){return r.connect(this.machine.service,n)}render=()=>{let e=this.getElement(`root`);e&&this.spreadProps(e,this.api.getRootProps());let t=this.getElement(`list`);t&&this.spreadProps(t,this.api.getListProps());let n=this.getElements(`trigger`);n.forEach(e=>{this.spreadProps(e,this.api.getTriggerProps({value:e.dataset.value,disabled:e.getAttribute(`data-disabled`)===`true`}))});let r=this.getElements(`content`);r.forEach(e=>{this.spreadProps(e,this.api.getContentProps({value:e.dataset.value}))});let i=this.getElement(`indicator`);i&&this.spreadProps(i,this.api.getIndicatorProps())}};export{i as Tabs};
@@ -0,0 +1 @@
1
+ import{Component as e,Machine as t,normalizeProps as n}from"./Client-Bcuea237.js";import*as r from"@zag-js/tooltip";var i=class extends e{name=`tooltip`;initMachine(e){return new t(r.machine,{interactive:!0,...e,positioning:{placement:`top`,gutter:6,...e.positioning}})}initApi(){return r.connect(this.machine.service,n)}render(){let e=this.getElement(`trigger`);e&&this.spreadProps(e,this.api.getTriggerProps());let t=this.getElement(`positioner`);t&&this.spreadProps(t,this.api.getPositionerProps());let n=this.getElement(`arrow`);n&&this.spreadProps(n,this.api.getArrowProps());let r=this.getElement(`arrow-tip`);r&&this.spreadProps(r,this.api.getArrowTipProps());let i=this.getElement(`content`);i&&this.spreadProps(i,this.api.getContentProps())}};export{i as Tooltip};
@@ -0,0 +1,2 @@
1
+ import { Component$1 as Component, ComponentHydrationData, ComponentHydrator$1 as ComponentHydrator, ComponentInterface, Machine$1 as Machine, getHydrationData$1 as getHydrationData, initAllComponentInstances$1 as initAllComponentInstances, mergeProps$1 as mergeProps, normalizeProps$1 as normalizeProps, spreadProps$1 as spreadProps } from "./index-AN0XU_8B.js";
2
+ export { Component, ComponentHydrationData, ComponentHydrator, ComponentInterface, Machine, getHydrationData, initAllComponentInstances, mergeProps, normalizeProps, spreadProps };
@@ -0,0 +1 @@
1
+ import{Component as e,ComponentHydrator as t,Machine as n,getHydrationData as r,initAllComponentInstances as i,mergeProps as a,normalizeProps as o,spreadProps as s}from"./Client-Bcuea237.js";export{e as Component,t as ComponentHydrator,n as Machine,r as getHydrationData,i as initAllComponentInstances,a as mergeProps,o as normalizeProps,s as spreadProps};
@@ -0,0 +1,134 @@
1
+ import { Bindable, BindableContext, BindableRefs, ComputedFn, Machine, MachineSchema, Params, PropFn, Scope, Service, mergeProps } from "@zag-js/core";
2
+ import { ListCollection } from "@zag-js/collection";
3
+ import * as _zag_js_types4 from "@zag-js/types";
4
+
5
+ //#region Resources/Private/Client/src/types.d.ts
6
+ declare global {
7
+ interface Window {
8
+ FluidPrimitives: {
9
+ hydrationData: {
10
+ [componentName: string]: {
11
+ [id: string]: ComponentHydrationData;
12
+ };
13
+ };
14
+ uncontrolledInstances: {
15
+ [componentName: string]: {
16
+ [id: string]: Component<unknown, unknown>;
17
+ };
18
+ };
19
+ };
20
+ }
21
+ }
22
+ interface ComponentInterface<Api> {
23
+ document: Document;
24
+ machine: Machine$1<any>;
25
+ api: Api;
26
+ hydrator: ComponentHydrator | null;
27
+ init(): void;
28
+ destroy(): void;
29
+ render(): void;
30
+ }
31
+ interface ComponentHydrationData {
32
+ controlled: boolean;
33
+ props: {
34
+ id: string;
35
+ ids: {
36
+ [key: string]: string;
37
+ };
38
+ [key: string]: unknown;
39
+ };
40
+ }
41
+ //#endregion
42
+ //#region Resources/Private/Client/src/lib/spread-props.d.ts
43
+ interface Attrs {
44
+ [key: string]: any;
45
+ }
46
+ declare function spreadProps(node: HTMLElement, attrs: Attrs, machineId?: string): () => void;
47
+ //#endregion
48
+ //#region Resources/Private/Client/src/lib/component.d.ts
49
+ declare abstract class Component<Props, Api> implements ComponentInterface<Api> {
50
+ document: Document;
51
+ machine: Machine$1<any>;
52
+ api: Api;
53
+ hydrator: ComponentHydrator | null;
54
+ userProps?: Props;
55
+ abstract readonly name: string;
56
+ get doc(): Document;
57
+ constructor(props: Props, userDocument?: Document);
58
+ abstract initMachine(props: Props): Machine$1<any>;
59
+ abstract initApi(): Api;
60
+ init(): void;
61
+ updateProps(props: Props): void;
62
+ destroy: () => void;
63
+ abstract render(): void;
64
+ spreadProps(node: HTMLElement, attrs: Attrs): void;
65
+ getElement<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T | null;
66
+ getElements<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T[];
67
+ portalElement(el: HTMLElement | null, target?: HTMLElement | Document): void;
68
+ }
69
+ //#endregion
70
+ //#region Resources/Private/Client/src/lib/hydration.d.ts
71
+ declare function getHydrationData(component: string): Record<string, ComponentHydrationData> | null;
72
+ declare function getHydrationData(component: string, id: string): ComponentHydrationData | null;
73
+ declare function initAllComponentInstances(componentName: string, callback: (data: ComponentHydrationData) => Component<unknown, unknown>): void;
74
+ declare class ComponentHydrator {
75
+ componentName: string;
76
+ doc: Document;
77
+ rootId: string;
78
+ ids: {
79
+ [key: string]: string;
80
+ };
81
+ elementRefs: Map<string, HTMLElement | HTMLElement[]>;
82
+ constructor(componentName: string, rootId: string | undefined, ids?: {
83
+ [key: string]: string;
84
+ }, doc?: Document);
85
+ getElement<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T | null;
86
+ getElements<T extends HTMLElement>(part: string, parent?: HTMLElement | Document): T[];
87
+ generateRefAttributesString(part: string): string;
88
+ setRefAttributes(element: HTMLElement, part: string): void;
89
+ destroy(): void;
90
+ }
91
+ //#endregion
92
+ //#region Resources/Private/Client/src/lib/machine.d.ts
93
+ declare class Machine$1<T extends MachineSchema> {
94
+ private machine;
95
+ scope: Scope;
96
+ ctx: BindableContext<T>;
97
+ prop: PropFn<T>;
98
+ state: Bindable<T['state']>;
99
+ refs: BindableRefs<T>;
100
+ computed: ComputedFn<T>;
101
+ private event;
102
+ private previousEvent;
103
+ private effects;
104
+ private transition;
105
+ private cleanups;
106
+ private subscriptions;
107
+ private getEvent;
108
+ private getState;
109
+ debug: (...args: any[]) => void;
110
+ notify: () => void;
111
+ constructor(machine: Machine<T>, userProps?: Partial<T['props']> | (() => Partial<T['props']>));
112
+ send: (event: any) => void;
113
+ private action;
114
+ private guard;
115
+ private effect;
116
+ private choose;
117
+ start(): void;
118
+ stop(): void;
119
+ subscribe: (fn: (service: Service<T>) => void) => void;
120
+ private status;
121
+ get service(): Service<T>;
122
+ private publish;
123
+ private trackers;
124
+ private setupTrackers;
125
+ private callTrackers;
126
+ getParams: () => Params<T>;
127
+ }
128
+ //#endregion
129
+ //#region Resources/Private/Client/src/lib/normalize-props.d.ts
130
+ declare const normalizeProps: _zag_js_types4.NormalizeProps<_zag_js_types4.PropTypes<{
131
+ [x: string]: any;
132
+ }>>;
133
+ //#endregion
134
+ export { Component as Component$1, ComponentHydrationData, ComponentHydrator as ComponentHydrator$1, ComponentInterface, Machine$1, getHydrationData as getHydrationData$1, initAllComponentInstances as initAllComponentInstances$1, mergeProps as mergeProps$1, normalizeProps as normalizeProps$1, spreadProps as spreadProps$1 };
@@ -0,0 +1,52 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as accordion from "@zag-js/accordion";
3
+
4
+ //#region Resources/Private/Primitives/Accordion/Accordion.d.ts
5
+ declare class Accordion extends Component<accordion.Props, accordion.Api> {
6
+ name: string;
7
+ initMachine(props: accordion.Props): Machine<any>;
8
+ initApi(): accordion.Api<{
9
+ button: {
10
+ [x: string]: any;
11
+ };
12
+ label: {
13
+ [x: string]: any;
14
+ };
15
+ input: {
16
+ [x: string]: any;
17
+ };
18
+ textarea: {
19
+ [x: string]: any;
20
+ };
21
+ img: {
22
+ [x: string]: any;
23
+ };
24
+ output: {
25
+ [x: string]: any;
26
+ };
27
+ element: {
28
+ [x: string]: any;
29
+ };
30
+ select: {
31
+ [x: string]: any;
32
+ };
33
+ rect: {
34
+ [x: string]: any;
35
+ };
36
+ style: {
37
+ [x: string]: any;
38
+ };
39
+ circle: {
40
+ [x: string]: any;
41
+ };
42
+ svg: {
43
+ [x: string]: any;
44
+ };
45
+ path: {
46
+ [x: string]: any;
47
+ };
48
+ }>;
49
+ render(): void;
50
+ }
51
+ //#endregion
52
+ export { Accordion };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Accordion as t}from"../Accordion-eTTEZRA4.js";e(`accordion`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Accordion as e}from"../Accordion-eTTEZRA4.js";export{e as Accordion};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as _zag_js_types2 from "@zag-js/types";
3
+ import * as clipboard from "@zag-js/clipboard";
4
+
5
+ //#region Resources/Private/Primitives/Clipboard/Clipboard.d.ts
6
+ declare class Clipboard extends Component<clipboard.Props, clipboard.Api> {
7
+ name: string;
8
+ initMachine(props: clipboard.Props): Machine<clipboard.Schema>;
9
+ initApi(): clipboard.Api<_zag_js_types2.PropTypes<{
10
+ [x: string]: any;
11
+ }>>;
12
+ render(): void;
13
+ }
14
+ //#endregion
15
+ export { Clipboard };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Clipboard as t}from"../Clipboard-5zCCVAd5.js";e(`clipboard`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Clipboard as e}from"../Clipboard-5zCCVAd5.js";export{e as Clipboard};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as _zag_js_types0 from "@zag-js/types";
3
+ import * as collapsible from "@zag-js/collapsible";
4
+
5
+ //#region Resources/Private/Primitives/Collapsible/Collapsible.d.ts
6
+ declare class Collapsible extends Component<collapsible.Props, collapsible.Api> {
7
+ name: string;
8
+ initMachine(props: collapsible.Props): Machine<any>;
9
+ initApi(): collapsible.Api<_zag_js_types0.PropTypes<{
10
+ [x: string]: any;
11
+ }>>;
12
+ render(): void;
13
+ }
14
+ //#endregion
15
+ export { Collapsible };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Collapsible as t}from"../Collapsible-CupTOmpO.js";e(`collapsible`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Collapsible as e}from"../Collapsible-CupTOmpO.js";export{e as Collapsible};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as _zag_js_types0 from "@zag-js/types";
3
+ import * as dialog from "@zag-js/dialog";
4
+
5
+ //#region Resources/Private/Primitives/Dialog/Dialog.d.ts
6
+ declare class Dialog extends Component<dialog.Props, dialog.Api> {
7
+ name: string;
8
+ initMachine(props: dialog.Props): Machine<any>;
9
+ initApi(): dialog.Api<_zag_js_types0.PropTypes<{
10
+ [x: string]: any;
11
+ }>>;
12
+ render(): void;
13
+ }
14
+ //#endregion
15
+ export { Dialog };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Dialog as t}from"../Dialog-Bc_TDlPF.js";e(`dialog`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Dialog as e}from"../Dialog-Bc_TDlPF.js";export{e as Dialog};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import { PropTypes } from "@zag-js/types";
3
+ import * as scrollArea from "@zag-js/scroll-area";
4
+
5
+ //#region Resources/Private/Primitives/ScrollArea/ScrollArea.d.ts
6
+ declare class ScrollArea extends Component<scrollArea.Props, scrollArea.Api<PropTypes>> {
7
+ name: string;
8
+ initMachine(props: scrollArea.Props): Machine<any>;
9
+ initApi(): scrollArea.Api<PropTypes<{
10
+ [x: string]: any;
11
+ }>>;
12
+ render(): void;
13
+ }
14
+ //#endregion
15
+ export { ScrollArea };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{ScrollArea as t}from"../ScrollArea-B__fLtaA.js";e(`scroll-area`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{ScrollArea as e}from"../ScrollArea-B__fLtaA.js";export{e as ScrollArea};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as _zag_js_types3 from "@zag-js/types";
3
+ import * as select from "@zag-js/select";
4
+
5
+ //#region Resources/Private/Primitives/Select/Select.d.ts
6
+ declare class Select extends Component<select.Props, select.Api> {
7
+ name: string;
8
+ initMachine(props: select.Props): Machine<any>;
9
+ initApi(): select.Api<_zag_js_types3.PropTypes<{
10
+ [x: string]: any;
11
+ }>, any>;
12
+ render: () => void;
13
+ }
14
+ //#endregion
15
+ export { Select };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Select as t}from"../Select-DuVsVrzn.js";e(`select`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Select as e}from"../Select-DuVsVrzn.js";export{e as Select};
@@ -0,0 +1,52 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as tabs from "@zag-js/tabs";
3
+
4
+ //#region Resources/Private/Primitives/Tabs/Tabs.d.ts
5
+ declare class Tabs extends Component<tabs.Props, tabs.Api> {
6
+ name: string;
7
+ initMachine(props: tabs.Props): Machine<any>;
8
+ initApi(): tabs.Api<{
9
+ button: {
10
+ [x: string]: any;
11
+ };
12
+ label: {
13
+ [x: string]: any;
14
+ };
15
+ input: {
16
+ [x: string]: any;
17
+ };
18
+ textarea: {
19
+ [x: string]: any;
20
+ };
21
+ img: {
22
+ [x: string]: any;
23
+ };
24
+ output: {
25
+ [x: string]: any;
26
+ };
27
+ element: {
28
+ [x: string]: any;
29
+ };
30
+ select: {
31
+ [x: string]: any;
32
+ };
33
+ rect: {
34
+ [x: string]: any;
35
+ };
36
+ style: {
37
+ [x: string]: any;
38
+ };
39
+ circle: {
40
+ [x: string]: any;
41
+ };
42
+ svg: {
43
+ [x: string]: any;
44
+ };
45
+ path: {
46
+ [x: string]: any;
47
+ };
48
+ }>;
49
+ render: () => void;
50
+ }
51
+ //#endregion
52
+ export { Tabs };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Tabs as t}from"../Tabs-DaojVeQ3.js";e(`tabs`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Tabs as e}from"../Tabs-DaojVeQ3.js";export{e as Tabs};
@@ -0,0 +1,15 @@
1
+ import { Component$1 as Component, Machine$1 as Machine } from "../index-AN0XU_8B.js";
2
+ import * as _zag_js_types1 from "@zag-js/types";
3
+ import * as tooltip from "@zag-js/tooltip";
4
+
5
+ //#region Resources/Private/Primitives/Tooltip/Tooltip.d.ts
6
+ declare class Tooltip extends Component<tooltip.Props, tooltip.Api> {
7
+ name: string;
8
+ initMachine(props: tooltip.Props): Machine<any>;
9
+ initApi(): tooltip.Api<_zag_js_types1.PropTypes<{
10
+ [x: string]: any;
11
+ }>>;
12
+ render(): void;
13
+ }
14
+ //#endregion
15
+ export { Tooltip };
@@ -0,0 +1 @@
1
+ import{initAllComponentInstances as e}from"../Client-Bcuea237.js";import{Tooltip as t}from"../Tooltip-BgU6DpGy.js";e(`tooltip`,({props:e})=>{let n=new t(e);return n.init(),n});
@@ -0,0 +1 @@
1
+ import"../Client-Bcuea237.js";import{Tooltip as e}from"../Tooltip-BgU6DpGy.js";export{e as Tooltip};
package/package.json ADDED
@@ -0,0 +1,81 @@
1
+ {
2
+ "name": "fluid-primitives",
3
+ "version": "0.2.0",
4
+ "description": "Client-side library for Fluid Primitives.",
5
+ "type": "module",
6
+ "license": "MIT",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/jramke/fluid-primitives.git"
10
+ },
11
+ "author": "Joost Ramke <hey@joostramke.com>",
12
+ "files": [
13
+ "./Resources/Public/JavaScript/dist"
14
+ ],
15
+ "main": "./Resources/Public/JavaScript/dist/client.js",
16
+ "types": "./Resources/Public/JavaScript/dist/client.d.ts",
17
+ "exports": {
18
+ ".": {
19
+ "import": "./Resources/Public/JavaScript/dist/client.js",
20
+ "types": "./Resources/Public/JavaScript/dist/client.d.ts"
21
+ },
22
+ "./primitives/accordion": {
23
+ "import": "./Resources/Public/JavaScript/dist/primitives/accordion.js",
24
+ "types": "./Resources/Public/JavaScript/dist/primitives/accordion.d.ts"
25
+ },
26
+ "./primitives/dialog": {
27
+ "import": "./Resources/Public/JavaScript/dist/primitives/dialog.js",
28
+ "types": "./Resources/Public/JavaScript/dist/primitives/dialog.d.ts"
29
+ },
30
+ "./primitives/clipboard": {
31
+ "import": "./Resources/Public/JavaScript/dist/primitives/clipboard.js",
32
+ "types": "./Resources/Public/JavaScript/dist/primitives/clipboard.d.ts"
33
+ },
34
+ "./primitives/collapsible": {
35
+ "import": "./Resources/Public/JavaScript/dist/primitives/collapsible.js",
36
+ "types": "./Resources/Public/JavaScript/dist/primitives/collapsible.d.ts"
37
+ },
38
+ "./primitives/scroll-area": {
39
+ "import": "./Resources/Public/JavaScript/dist/primitives/scroll-area.js",
40
+ "types": "./Resources/Public/JavaScript/dist/primitives/scroll-area.d.ts"
41
+ },
42
+ "./primitives/select": {
43
+ "import": "./Resources/Public/JavaScript/dist/primitives/select.js",
44
+ "types": "./Resources/Public/JavaScript/dist/primitives/select.d.ts"
45
+ },
46
+ "./primitives/tabs": {
47
+ "import": "./Resources/Public/JavaScript/dist/primitives/tabs.js",
48
+ "types": "./Resources/Public/JavaScript/dist/primitives/tabs.d.ts"
49
+ },
50
+ "./primitives/tooltip": {
51
+ "import": "./Resources/Public/JavaScript/dist/primitives/tooltip.js",
52
+ "types": "./Resources/Public/JavaScript/dist/primitives/tooltip.d.ts"
53
+ }
54
+ },
55
+ "scripts": {
56
+ "build": "tsdown",
57
+ "dev": "tsdown --watch"
58
+ },
59
+ "devDependencies": {
60
+ "@types/node": "^22.15.17",
61
+ "tsdown": "^0.11.9",
62
+ "typescript": "^5.8.3"
63
+ },
64
+ "dependencies": {
65
+ "@zag-js/accordion": "^1.26.3",
66
+ "@zag-js/clipboard": "^1.24.2",
67
+ "@zag-js/collapsible": "^1.24.2",
68
+ "@zag-js/collection": "^1.26.1",
69
+ "@zag-js/core": "^1.24.2",
70
+ "@zag-js/dialog": "^1.24.2",
71
+ "@zag-js/dom-query": "^1.26.1",
72
+ "@zag-js/scroll-area": "^1.24.2",
73
+ "@zag-js/select": "^1.25.0",
74
+ "@zag-js/store": "^1.24.2",
75
+ "@zag-js/tabs": "^1.26.4",
76
+ "@zag-js/tooltip": "^1.24.2",
77
+ "@zag-js/types": "^1.24.2",
78
+ "@zag-js/utils": "^1.24.2",
79
+ "nanoid": "^5.1.5"
80
+ }
81
+ }