@fiscozen/composables 0.1.39-next.0 → 1.0.1

package/dist/composables.umd.cjs

@@ -1 +1 @@
-(function(y,a){typeof exports=="object"&&typeof module<"u"?a(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],a):(y=typeof globalThis<"u"?globalThis:y||self,a(y.FzComposables={},y.Vue))})(this,function(y,a){"use strict";const $=e=>t=>{if(t===null)return"";const o={maximumFractionDigits:e.maximumFractionDigits||2,minimumFractionDigits:e.minimumFractionDigits,useGrouping:e.useGrouping||!1};return t.toLocaleString("it-IT",o)},N=e=>{if(!e||typeof e!="string")return NaN;let t=e.trim();return t.includes(",")&&(t=t.replace(/\./g,""),t=t.replace(",",".")),parseFloat(t)},U=(e,t)=>{let o=t;const l=t%e,r=t>=0?e:-e;return l!==0&&(o=Math.abs(l)>=e/2?t+r-l:t-l),o},O=new DOMRect(0,0,window.innerWidth,window.innerHeight),z=(e,t,o,l,r)=>{let i=r?"bottom":"right",x=r?"bottom-start":"right-start";O.width=window.innerWidth,O.height=window.innerHeight,O.x=0,O.y=0;const p=e?e.getBoundingClientRect():O,n=t.getBoundingClientRect(),m=o.getBoundingClientRect(),c=(m.left-p.left-n.width)/p.width,f=(p.right-m.right-n.width)/p.width,u=(m.top-p.top-n.height)/p.height,g=(p.bottom-m.bottom-n.height)/p.height;let b=[{key:"right",space:f},{key:"top",space:u},{key:"bottom",space:g},{key:"left",space:c}].sort((s,v)=>v.space-s.space);if(r&&(b=b.filter(s=>s.key==="top"||s.key==="bottom")),i=b[0].key,!l){const s=(n.height-m.height)/2;switch(i){case"right":case"left":p.top>m.top-s&&(l="end"),p.bottom<m.top-s&&(l="start");break}}return x=l?`${i}-${l}`:i,x},W=(e,t,o,l)=>({x:t.x+e.width*o/100,y:t.y+e.height*l/100}),D=e=>{const t=a.ref(null),o=a.ref(null),l=a.ref(null),r=a.ref(),i=a.ref(),x=a.ref("auto"),p=a.ref(),n=a.reactive({position:{x:0,y:0}}),m={root:null,rootMargin:"0px",threshold:1,...e.element.value.intersectionOptions},c=(b,s)=>{},f=a.ref(new IntersectionObserver(c,m)),u=a.ref(),g=(b=!1)=>a.nextTick(()=>{var P,d,w,k,F,C,B,T,q,j,G,K,Q,_,X;if(u.value=e.position?e.position.value:"auto",t.value=typeof e.element.value.domRef.value=="string"?document.querySelector(e.element.value.domRef.value):e.element.value.domRef.value,(P=e.container)!=null&&P.value?(o.value=typeof((d=e.container.value)==null?void 0:d.domRef.value)=="string"?document.querySelector(e.container.value.domRef.value):(w=e.container.value)==null?void 0:w.domRef.value,o.value??(o.value=document.body)):o.value=document.body,!t.value)throw new Error("missing reference element for floating behavior");(k=e.opener)!=null&&k.value&&(l.value=typeof((F=e.opener.value)==null?void 0:F.domRef.value)=="string"?document.querySelector(e.opener.value.domRef.value):(C=e.opener.value)==null?void 0:C.domRef.value),p.value=t.value.getBoundingClientRect(),r.value=(B=l.value)==null?void 0:B.getBoundingClientRect(),i.value=o.value.getBoundingClientRect();const s=window.getComputedStyle(t.value);f.value.observe(t.value),f.value.observe(o.value);let v=0,h=0;if((T=e.opener)!=null&&T.value&&l.value&&(r!=null&&r.value)){const S=r.value.left-parseFloat(s.marginLeft)-parseFloat(s.marginRight),Y=r.value.left-parseFloat(s.marginLeft),L=r.value.top-parseFloat(s.marginTop)-parseFloat(s.marginBottom),J=r.value.top-parseFloat(s.marginTop);switch(u.value){case"auto":u.value=z((q=e.useViewport)!=null&&q.value?null:o.value,t.value,l.value);break;case"auto-vertical":u.value=z((j=e.useViewport)!=null&&j.value?null:o.value,t.value,l.value,void 0,!0);break;case"auto-start":u.value=z((G=e.useViewport)!=null&&G.value?null:o.value,t.value,l.value,"start");break;case"auto-vertical-start":u.value=z((K=e.useViewport)!=null&&K.value?null:o.value,t.value,l.value,"start",!0);break;case"auto-end":u.value=z((Q=e.useViewport)!=null&&Q.value?null:o.value,t.value,l.value,"end");break;case"auto-vertical-end":u.value=z((_=e.useViewport)!=null&&_.value?null:o.value,t.value,l.value,"end",!0);break}switch(u.value){case"bottom":n.position.y=r.value.bottom,n.position.x=Y+r.value.width/2,h=-50,v=0;break;case"bottom-start":n.position.y=r.value.bottom,n.position.x=S,h=0,v=0;break;case"bottom-end":n.position.y=r.value.bottom,n.position.x=r.value.right,h=-100,v=0;break;case"left-start":n.position.y=L,n.position.x=S,h=-100,v=0;break;case"left":n.position.y=J+r.value.height/2,n.position.x=S,v=-50,h=-100;break;case"left-end":n.position.y=r.value.bottom,n.position.x=S,v=-100,h=-100;break;case"top-start":n.position.y=L,n.position.x=S,v=-100,h=0;break;case"top":n.position.y=L,n.position.x=Y+r.value.width/2,h=-50,v=-100;break;case"top-end":n.position.y=L,n.position.x=r.value.right,h=-100,v=-100;break;case"right-start":n.position.y=L,n.position.x=r.value.right,h=0,v=0;break;case"right":n.position.y=J+r.value.height/2,n.position.x=r.value.right,v=-50,h=0;break;case"right-end":n.position.y=r.value.bottom,n.position.x=r.value.right,v=-100,h=0;break}}else switch(u.value){case"bottom":n.position.y=i.value.bottom-p.value.height,n.position.x=i.value.left+i.value.width/2,h=-50;break;case"left-end":case"bottom-start":n.position.y=i.value.bottom-p.value.height,n.position.x=i.value.left;break;case"right-end":case"bottom-end":n.position.y=i.value.bottom-p.value.height,n.position.x=i.value.right-p.value.width;break;case"left":n.position.y=i.value.top+(i.value.height-p.value.height)/2,n.position.x=i.value.left;break;case"top-start":case"left-start":n.position.y=i.value.top,n.position.x=i.value.left;break;case"top":n.position.y=i.value.top,n.position.x=i.value.left+(i.value.width-p.value.width)/2;break;case"top-end":case"right-start":n.position.y=i.value.top,n.position.x=i.value.right-p.value.width;case"right":n.position.y=i.value.top+(i.value.height-p.value.height)/2,n.position.x=i.value.right-p.value.width;break}const E=W(p.value,n.position,h,v);if(n.position.x=E.x,n.position.y=E.y,E.x<i.value.left&&(n.position.x=i.value.left,h=0),E.x+p.value.width>i.value.right){const S=i.value.right-p.value.width;S>0&&(n.position.x=S),h=0}if(E.y<i.value.top&&(n.position.y=i.value.top,v=0),E.y+p.value.height>i.value.bottom){const S=i.value.bottom-p.value.height;S>0&&(n.position.y=S),v=0}t.value.style.top=`${n.position.y}px`,t.value.style.left=`${n.position.x}px`,t.value.style.position="fixed",t.value.style.display="flex",p.value=t.value.getBoundingClientRect(),(X=e.callback)!=null&&X.value&&!b&&e.callback.value(p,r,i,x,u)});return a.onUnmounted(()=>{f.value.disconnect()}),{float:n,rect:p,setPosition:g,position:x,actualPosition:u,openerRect:r,containerRect:i}};function M(e){const t=window.matchMedia(e),o=a.ref(t.matches);function l(r){o.value=r.matches}return a.onMounted(()=>{t.addEventListener("change",l)}),a.onUnmounted(()=>{t.removeEventListener("change",l)}),a.computed(()=>o.value)}function Z(e){return{isGreater(t){return M(`(min-width: ${e[t]})`)},isSmaller(t){return M(`(max-width: ${e[t]})`)},isInBetween(t,o){return M(`(min-width: ${e[t]}) and (max-width: ${e[o]})`)}}}function V(e,t,o){if(!e)throw new Error("A target component has to be provided.");if(!t)throw new Error("A callback has to be provided.");const l=r=>{!e.value||r.target===e.value||r.composedPath().includes(e.value)||typeof t=="function"&&t()};o&&a.watch(o,(r,i)=>{i&&i.removeEventListener("click",l),r==null||r.addEventListener("click",l)}),a.onMounted(()=>{o||document.addEventListener("click",l)}),a.onBeforeUnmount(()=>{var r;if(o){(r=o.value)==null||r.removeEventListener("click",l);return}document.removeEventListener("click",l)})}function ee(e,t){if(!e)throw new Error("A target component has to be provided.");if(!t||typeof t!="function")throw new Error("A callback has to be provided.");const o=l=>{t(l)};a.onMounted(()=>{e.value.addEventListener("keydown",o)}),a.onBeforeUnmount(()=>{e.value.removeEventListener("keydown",o)})}function te(e,t){if(!e||typeof e!="function")throw new Error("A callback has to be provided.");const o=l=>{e(l)};a.onMounted(()=>{if(!t){document.addEventListener("keyup",o);return}t.value.addEventListener("keyup",o)}),a.onBeforeUnmount(()=>{if(!t){document.removeEventListener("keyup",o);return}t.value.removeEventListener("keyup",o)})}const oe=e=>{const t=a.ref(null),o=a.getCurrentInstance(),l=a.computed(()=>o==null?void 0:o.props.amount),r=a.ref(),i=$(e),x=c=>{if(!Number.isNaN(c)&&o){if(r.value=c,o.props.nullOnEmpty&&!c){o.emit("update:amount",null);return}o.emit("update:amount",c)}},p=c=>{setTimeout(()=>{t.value&&(t.value.value=c)},0)},n=c=>f=>{if(!t.value||!f.target)return;let{value:u}=c;u=u.replace(/[^0-9,.-]/g,"");const g=N(u);p(u);const b=o!=null&&o.props.nullOnEmpty&&u===""?null:g;x(Number.isNaN(b)?0:b)},m=c=>{if(!t.value||!c.target)return;const f=c.target.value.replace(/,/g,".");let u;f===""&&(o!=null&&o.props.nullOnEmpty)?u=null:(u=N(f),Number.isNaN(u)&&(u=0),e.step&&(o!=null&&o.props.forceStep)&&(u=U(e.step,u)),e.min&&e.min>u&&(u=e.min),e.max&&e.max<u&&(u=e.max));const g=i(u);p(g),x(N(g))};return a.watch(t,(c,f)=>{c&&(f&&(f==null||f.removeEventListener("input",n(c)),f==null||f.removeEventListener("blur",m)),c.addEventListener("input",n(c)),c.addEventListener("blur",m),o!=null&&o.props.amount&&(c.value=i(l.value)))}),a.watch(l,c=>{a.nextTick(()=>{if(!(!t.value||c===null||c===void 0)&&r.value!==c){const f=i(c);t.value.value=f,r.value=c}})}),{inputRef:t,parse:N,format:i,emitAmount:x,setValue:p}};function A(e,t){if(!(e==null||e==="")){if(typeof e=="number")return e;if(typeof e=="string"){console.warn(`[useCurrencyModel] String values in v-model are deprecated and will be removed in a future version. Please use number | undefined instead. Received: "${e}". The string format is deprecated and will be replaced by "number | undefined". Parsing as number for retrocompatibility.`);const o=t(e);return isNaN(o)||!isFinite(o)?void 0:o}}}function ae(e){const{model:t,displayModel:o,inputRef:l,nullOnEmpty:r=!1,onModelUpdate:i,...x}=e,p=$(x),n=N,m=a.ref(!1),c=a.ref(!1),f=a.ref(!1);let u=!1;const g=()=>{u||(u=!0,a.nextTick(()=>{f.value=!1,u=!1}))},b=d=>A(d,n),s=d=>{const w=!d||d.trim()==="";if(m.value&&!c.value&&t.value===void 0&&!w)return p(0)},v=(d,w)=>{if(d===void 0){if(c.value){o.value=void 0,l!=null&&l.value&&(l.value.value="");return}const k=s(w);o.value=k,l!=null&&l.value&&(l.value.value=k||"")}else{const k=p(d);o.value=k,l!=null&&l.value&&(l.value.value=k)}},h=d=>{if(c.value=!0,!(d!=null&&d.trim())){o.value=void 0,l!=null&&l.value&&(l.value.value="");const C=r?void 0:0;f.value=!0,i?i(C):t.value=C,g();return}o.value=d;const w=n(d),k=isNaN(w)||!isFinite(w)?void 0:w;if(b(t.value)!==k){f.value=!0;const C=k!==void 0?k:0;i?i(C):t.value=C,g()}},E=()=>{c.value=!0};return a.watch(()=>t.value,(d,w)=>{var B;if(f.value){g();return}const k=b(d),F=b(w);if(k===F)return;d===void 0&&(m.value=!0);const C=((B=l==null?void 0:l.value)==null?void 0:B.value)||o.value||"";v(k,C),d!==void 0&&typeof d=="number"&&(c.value=!0)}),{format:p,parse:n,normalize:b,handleInputUpdate:h,markUserModified:E,initialize:()=>{var d;if(m.value=t.value===void 0,(d=l==null?void 0:l.value)!=null&&d.value)o.value=l.value.value,c.value=!0;else if(t.value!==void 0&&t.value!==null&&t.value!==""){const w=b(t.value);w===void 0?o.value=void 0:(o.value=p(w),c.value=!0)}else t.value===void 0?o.value=p(0):o.value=void 0},resetInternalUpdateFlag:g,isInternalUpdate:a.computed(()=>f.value),userHasModified:a.computed(()=>c.value),initialValueWasUndefined:a.computed(()=>m.value)}}const H={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},le={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},ne={semanticColorNames:["error","warning","success","info"]},ie=le.safeColorNames,re=ne.semanticColorNames,R={};ie.forEach(e=>{const t=H.global[e];t&&Object.keys(t).forEach(o=>{var r;const l=(r=t[o])==null?void 0:r.value;l&&(R[e]||(R[e]={}),R[e][o]=l)})});const I=H.global.semantic;I&&re.forEach(e=>{const t=I[e];t&&typeof t=="object"&&Object.keys(t).forEach(o=>{var r;const l=(r=t[o])==null?void 0:r.value;if(l){const i=`semantic-${e}`;R[i]||(R[i]={}),R[i][o]=l}})});const ue=Object.entries(H.global.breakpoint).reduce((e,[t,o])=>(e[t]=o.value,e),{}),se=a.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean},overrideOpener:{},teleport:{type:Boolean,default:!1},useViewport:{type:Boolean}},emits:["fzfloating:setPosition"],setup(e,{expose:t,emit:o}){const l=e,r=o,i=a.ref(null),x=a.ref(null),p=a.useSlots(),n=M(`(max-width: ${ue.xs})`);let m=!1;const c={position:l.position,element:{domRef:i},container:{domRef:a.toRef(l.container||document.body)},opener:{domRef:a.toRef(null)},useViewport:l.useViewport,callback(...s){r("fzfloating:setPosition",...s)}},f=a.toRefs(c);p.opener&&(c.opener={domRef:x});const u=D(f),g=()=>{m||(m=!0,requestAnimationFrame(()=>{l.isOpen&&u.setPosition(),m=!1}))};a.watch(()=>l.position,()=>g()),a.watch(()=>l.isOpen,s=>{var h;if(!s||!i.value){window.removeEventListener("scroll",g);return}window.addEventListener("scroll",g);const v=(h=x.value)==null?void 0:h.getBoundingClientRect();i.value.style.top="0px",i.value.style.left="0px",i.value.style.transform="none",i.value.style.width=n.value?(v==null?void 0:v.width)+"px":"auto",u.setPosition()}),a.watch(()=>l.overrideOpener,s=>{s&&f.opener&&f.opener.value&&(f.opener.value={domRef:s})}),a.onBeforeUnmount(()=>{window.removeEventListener("scroll",g)});const b=a.computed(()=>l.overrideContentClass?l.contentClass:["bg-core-white fixed p-4",l.contentClass]);return t({setPosition:u.setPosition}),(s,v)=>(a.openBlock(),a.createElementBlock("div",null,[a.renderSlot(s.$slots,"opener-start"),a.createElementVNode("div",{ref_key:"opener",ref:x,class:"inline-flex w-full sm:w-auto"},[a.renderSlot(s.$slots,"opener",{isOpen:s.isOpen,floating:a.unref(u)})],512),a.renderSlot(s.$slots,"opener-end"),s.teleport?a.createCommentVNode("",!0):a.withDirectives((a.openBlock(),a.createElementBlock("div",{key:0,ref_key:"content",ref:i,class:a.normalizeClass(["fz__floating__content w-full sm:w-auto",b.value])},[a.renderSlot(s.$slots,"default",{isOpen:s.isOpen,floating:a.unref(u)})],2)),[[a.vShow,s.$slots.default&&(!s.$slots.opener||s.$slots.opener&&s.isOpen)]]),s.teleport?(a.openBlock(),a.createBlock(a.Teleport,{key:1,to:"body"},[a.withDirectives(a.createElementVNode("div",{ref_key:"content",ref:i,class:a.normalizeClass(["fz__floating__content",b.value])},[a.renderSlot(s.$slots,"default",{isOpen:s.isOpen,floating:a.unref(u)})],2),[[a.vShow,s.$slots.default&&(!s.$slots.opener||s.$slots.opener&&s.isOpen)]])])):a.createCommentVNode("",!0)]))}});y.FzFloating=se,y.calcRealPos=W,y.format=$,y.getHighestAvailableSpacePos=z,y.normalizeModelValue=A,y.parse=N,y.roundTo=U,y.useBreakpoints=Z,y.useClickOutside=V,y.useCurrency=oe,y.useCurrencyModel=ae,y.useFloating=D,y.useKeyDown=ee,y.useKeyUp=te,y.useMediaQuery=M,Object.defineProperty(y,Symbol.toStringTag,{value:"Module"})});
+(function(p,n){typeof exports=="object"&&typeof module<"u"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(p=typeof globalThis<"u"?globalThis:p||self,n(p.FzComposables={},p.Vue))})(this,function(p,n){"use strict";const L=(e,t)=>{const o=Math.pow(10,t);return Math.trunc(e*o)/o},P=(e,{minimumFractionDigits:t=0,maximumFractionDigits:o=2,roundDecimals:l=!0,useGrouping:a=!0}={})=>e==null||isNaN(e)||!isFinite(e)?"":(l?e:L(e,o)).toLocaleString("it-IT",{minimumFractionDigits:t,maximumFractionDigits:o,useGrouping:a}),$=e=>{if(!e||typeof e!="string")return NaN;let t=e.trim();return t.includes(",")&&(t=t.replace(/\./g,""),t=t.replace(",",".")),parseFloat(t)},U=(e,t)=>{let o=t;const l=t%e,a=t>=0?e:-e;return l!==0&&(o=Math.abs(l)>=e/2?t+a-l:t-l),o},T=(e,t,o)=>Math.max(e,Math.min(t,o)),C=new DOMRect(0,0,window.innerWidth,window.innerHeight),b=(e,t,o,l,a)=>{let r=a?"bottom":"right",u=a?"bottom-start":"right-start";C.width=window.innerWidth,C.height=window.innerHeight,C.x=0,C.y=0;const v=e?e.getBoundingClientRect():C,x=t.getBoundingClientRect(),h=o.getBoundingClientRect(),g=(h.left-v.left-x.width)/v.width,m=(v.right-h.right-x.width)/v.width,y=(h.top-v.top-x.height)/v.height,s=(v.bottom-h.bottom-x.height)/v.height;let c=[{key:"right",space:m},{key:"top",space:y},{key:"bottom",space:s},{key:"left",space:g}].sort((f,d)=>d.space-f.space);if(a&&(c=c.filter(f=>f.key==="top"||f.key==="bottom")),r=c[0].key,!l){const f=(x.height-h.height)/2;switch(r){case"right":case"left":v.top>h.top-f&&(l="end"),v.bottom<h.top-f&&(l="start");break}}return u=l?`${r}-${l}`:r,u},F=(e,t,o,l)=>({x:t.x+e.width*o/100,y:t.y+e.height*l/100}),M=e=>typeof e=="string"?document.querySelector(e):e,V=e=>({left:parseFloat(e.marginLeft),right:parseFloat(e.marginRight),top:parseFloat(e.marginTop),bottom:parseFloat(e.marginBottom)}),j={bottom:(e,t)=>({position:{x:e.left-t.left+e.width/2,y:e.bottom},transform:{x:-50,y:0}}),"bottom-start":(e,t)=>({position:{x:e.left-t.left,y:e.bottom},transform:{x:0,y:0}}),"bottom-end":(e,t)=>({position:{x:e.right+t.right,y:e.bottom},transform:{x:-100,y:0}}),top:(e,t)=>({position:{x:e.left-t.left+e.width/2,y:e.top-t.bottom},transform:{x:-50,y:-100}}),"top-start":(e,t)=>({position:{x:e.left-t.left,y:e.top-t.bottom},transform:{x:0,y:-100}}),"top-end":(e,t)=>({position:{x:e.right+t.right,y:e.top-t.bottom},transform:{x:-100,y:-100}}),left:(e,t)=>({position:{x:e.left-t.right,y:e.top-t.top+e.height/2},transform:{x:-100,y:-50}}),"left-start":(e,t)=>({position:{x:e.left-t.right,y:e.top-t.top},transform:{x:-100,y:0}}),"left-end":(e,t)=>({position:{x:e.left-t.right,y:e.bottom+t.bottom},transform:{x:-100,y:-100}}),right:(e,t)=>({position:{x:e.right+t.left,y:e.top-t.top+e.height/2},transform:{x:0,y:-50}}),"right-start":(e,t)=>({position:{x:e.right+t.left,y:e.top-t.top},transform:{x:0,y:0}}),"right-end":(e,t)=>({position:{x:e.right+t.left,y:e.bottom+t.bottom},transform:{x:0,y:-100}})},I=(e,t,o)=>{const l=j[e];return l?l(t,o):{position:{x:0,y:0},transform:{x:0,y:0}}},K={bottom:(e,t)=>({position:{x:e.left+e.width/2,y:e.bottom-t.height},transform:{x:-50,y:0}}),"bottom-start":(e,t)=>({position:{x:e.left,y:e.bottom-t.height},transform:{x:0,y:0}}),"bottom-end":(e,t)=>({position:{x:e.right-t.width,y:e.bottom-t.height},transform:{x:0,y:0}}),top:e=>({position:{x:e.left+e.width/2,y:e.top},transform:{x:-50,y:0}}),"top-start":e=>({position:{x:e.left,y:e.top},transform:{x:0,y:0}}),"top-end":(e,t)=>({position:{x:e.right-t.width,y:e.top},transform:{x:0,y:0}}),left:(e,t)=>({position:{x:e.left,y:e.top+(e.height-t.height)/2},transform:{x:0,y:0}}),"left-start":e=>({position:{x:e.left,y:e.top},transform:{x:0,y:0}}),"left-end":(e,t)=>({position:{x:e.left,y:e.bottom-t.height},transform:{x:0,y:0}}),right:(e,t)=>({position:{x:e.right-t.width,y:e.top+(e.height-t.height)/2},transform:{x:0,y:0}}),"right-start":(e,t)=>({position:{x:e.right-t.width,y:e.top},transform:{x:0,y:0}}),"right-end":(e,t)=>({position:{x:e.right-t.width,y:e.bottom-t.height},transform:{x:0,y:0}})},q=(e,t,o)=>{const l=K[e];return l?l(t,o):{position:{x:0,y:0},transform:{x:0,y:0}}},Q=(e,t,o,l)=>{const a={...e},r={...l};if(e.x<o.left&&(a.x=o.left,r.x=0),e.x+t.width>o.right){const u=o.right-t.width;u>0&&(a.x=u),r.x=0}if(e.y<o.top&&(a.y=o.top,r.y=0),e.y+t.height>o.bottom){const u=o.bottom-t.height;u>0&&(a.y=u),r.y=0}return{position:a,transform:r}},G=(e,t,o,l,a)=>{const r=a?null:t;switch(e){case"auto":return b(r,o,l);case"auto-vertical":return b(r,o,l,void 0,!0);case"auto-start":return b(r,o,l,"start");case"auto-vertical-start":return b(r,o,l,"start",!0);case"auto-end":return b(r,o,l,"end");case"auto-vertical-end":return b(r,o,l,"end",!0);default:return"bottom-start"}},X=e=>e.startsWith("auto"),W=e=>{const t=n.ref("auto"),o=n.ref(),l=n.ref(),a=n.ref(),r=n.ref(),u=n.reactive({position:{x:0,y:0}}),v={root:null,rootMargin:"0px",threshold:1,...e.element.value.intersectionOptions},x=n.ref(new IntersectionObserver(()=>{},v)),h=()=>{var f,d;const y=M(e.element.value.domRef.value);if(!y)return null;const s=(f=e.container)!=null&&f.value?M(e.container.value.domRef.value)??document.body:document.body,c=(d=e.opener)!=null&&d.value?M(e.opener.value.domRef.value):null;return{element:y,container:s,opener:c}},g=y=>{var s;return{element:y.element.getBoundingClientRect(),container:y.container.getBoundingClientRect(),opener:((s=y.opener)==null?void 0:s.getBoundingClientRect())??null}},m=(y=!1)=>n.nextTick(()=>{var O,z,B;o.value=((O=e.position)==null?void 0:O.value)??"auto";const s=h();if(!s)return;Object.assign(s.element.style,{position:"fixed",top:"0px",left:"0px"});const c=g(s);l.value=c.element,a.value=c.opener??void 0,r.value=c.container,x.value.observe(s.element),x.value.observe(s.container),X(o.value)&&s.opener&&(o.value=G(o.value,s.container,s.element,s.opener,((z=e.useViewport)==null?void 0:z.value)??!1));const f=V(window.getComputedStyle(s.element)),d=s.opener&&c.opener?I(o.value,c.opener,f):q(o.value,c.container,c.element),E=F(c.element,d.position,d.transform.x,d.transform.y),k=Q(E,c.element,c.container,d.transform);u.position.x=k.position.x,u.position.y=k.position.y,Object.assign(s.element.style,{top:`${u.position.y}px`,left:`${u.position.x}px`,position:"fixed",display:"flex"}),l.value=s.element.getBoundingClientRect(),(B=e.callback)!=null&&B.value&&!y&&e.callback.value(l,a,r,t,o)});return n.onUnmounted(()=>{x.value.disconnect()}),{float:u,rect:l,setPosition:m,position:t,actualPosition:o,openerRect:a,containerRect:r}};function R(e){const t=window.matchMedia(e),o=n.ref(t.matches);function l(a){o.value=a.matches}return n.onMounted(()=>{t.addEventListener("change",l)}),n.onUnmounted(()=>{t.removeEventListener("change",l)}),n.computed(()=>o.value)}function Y(e){return{isGreater(t){return R(`(min-width: ${e[t]})`)},isSmaller(t){return R(`(max-width: ${e[t]})`)},isInBetween(t,o){return R(`(min-width: ${e[t]}) and (max-width: ${e[o]})`)}}}function J(e,t,o){if(!e)throw new Error("A target component has to be provided.");if(!t)throw new Error("A callback has to be provided.");const l=a=>{!e.value||a.target===e.value||a.composedPath().includes(e.value)||typeof t=="function"&&t()};o&&n.watch(o,(a,r)=>{r&&r.removeEventListener("click",l),a==null||a.addEventListener("click",l)}),n.onMounted(()=>{o||document.addEventListener("click",l)}),n.onBeforeUnmount(()=>{var a;if(o){(a=o.value)==null||a.removeEventListener("click",l);return}document.removeEventListener("click",l)})}function Z(e,t){if(!e)throw new Error("A target component has to be provided.");if(!t||typeof t!="function")throw new Error("A callback has to be provided.");const o=l=>{t(l)};n.onMounted(()=>{e.value.addEventListener("keydown",o)}),n.onBeforeUnmount(()=>{e.value.removeEventListener("keydown",o)})}function _(e,t){if(!e||typeof e!="function")throw new Error("A callback has to be provided.");const o=l=>{e(l)};n.onMounted(()=>{if(!t){document.addEventListener("keyup",o);return}t.value.addEventListener("keyup",o)}),n.onBeforeUnmount(()=>{if(!t){document.removeEventListener("keyup",o);return}t.value.removeEventListener("keyup",o)})}const ee=e=>({format:P,parse:$}),N={global:{blue:{50:{value:"#eff1ff",type:"color"},100:{value:"#dee2ff",type:"color"},200:{value:"#bdc5ff",type:"color"},300:{value:"#9ca8ff",type:"color"},400:{value:"#7b8bff",type:"color"},500:{value:"#5a6eff",type:"color"},600:{value:"#4858cc",type:"color"},700:{value:"#364299",type:"color"},800:{value:"#242c66",type:"color"},900:{value:"#1b214c",type:"color"}},purple:{50:{value:"#f8f4ff",type:"color"},100:{value:"#f0e9ff",type:"color"},200:{value:"#e1d3ff",type:"color"},300:{value:"#d2bdff",type:"color"},400:{value:"#c3a7ff",type:"color"},500:{value:"#b491ff",type:"color"},600:{value:"#9074cc",type:"color"},700:{value:"#6c5799",type:"color"},800:{value:"#483a66",type:"color"},900:{value:"#241d33",type:"color"}},orange:{50:{value:"#fff2ef",type:"color"},100:{value:"#ffe4de",type:"color"},200:{value:"#ffc9bd",type:"color"},300:{value:"#ffae9c",type:"color"},400:{value:"#ff937b",type:"color"},500:{value:"#ff785a",type:"color"},600:{value:"#cc6048",type:"color"},700:{value:"#994836",type:"color"},800:{value:"#663024",type:"color"},900:{value:"#331812",type:"color"}},pink:{50:{value:"#fff5f5",type:"color"},100:{value:"#ffe0e0",type:"color"},200:{value:"#ffcbcb",type:"color"},300:{value:"#ffc0c0",type:"color"},400:{value:"#ffabab",type:"color"},500:{value:"#ff9696",type:"color"},600:{value:"#cc7878",type:"color"},700:{value:"#995a5a",type:"color"},800:{value:"#663c3c",type:"color"},900:{value:"#331e1e",type:"color"}},yellow:{50:{value:"#fffbf4",type:"color"},100:{value:"#fff3de",type:"color"},200:{value:"#ffebc8",type:"color"},300:{value:"#ffe7bd",type:"color"},400:{value:"#ffdfa7",type:"color"},500:{value:"#ffd791",type:"color"},600:{value:"#ccac74",type:"color"},700:{value:"#998157",type:"color"},800:{value:"#806c49",type:"color"},900:{value:"#4c402b",type:"color"}},semantic:{error:{50:{value:"#fef3f3",type:"color"},100:{value:"#f8baba",type:"color"},200:{value:"#f04242",type:"color"},300:{value:"#aa2f2f",type:"color"}},warning:{50:{value:"#fff8f3",type:"color"},100:{value:"#ffdabd",type:"color"},200:{value:"#ffae4f",type:"color"},300:{value:"#b47b38",type:"color"}},success:{50:{value:"#f2f8f6",type:"color"},100:{value:"#b5d8ce",type:"color"},200:{value:"#0fa88c",type:"color"},300:{value:"#0b7763",type:"color"}},info:{50:{value:"#f3f7ff",type:"color"},100:{value:"#b4c8e1",type:"color"},200:{value:"#4e9fff",type:"color"},300:{value:"#3770b4",type:"color"}}},background:{"white-smoke":{value:"#f7f6f3",type:"color"},seashell:{value:"#f8ece7",type:"color"},"pale-purple":{value:"#f2e6ff",type:"color"},"alice-blue":{value:"#ecf2fc",type:"color"}},grey:{100:{value:"#e9edf0",type:"color"},200:{value:"#d1dde6",type:"color"},300:{value:"#9da9b2",type:"color"},400:{value:"#6e777e",type:"color"},500:{value:"#596167",type:"color"}},core:{white:{value:"#ffffff",type:"color"},black:{value:"#2c282f",type:"color"}},"font-sans":{"sharp-grotesk":{value:'"Sharp Grotesk", sans-serif',type:"fontFamilies"},inter:{value:'"Inter", sans-serif',type:"fontFamilies"}},font:{light:{value:"300",type:"fontWeights"},normal:{value:"400",type:"fontWeights"},medium:{value:"500",type:"fontWeights"}},spacing:{0:{value:"0px",type:"spacing"},1:{value:"1px",type:"spacing"},2:{value:"2px",type:"spacing"},4:{value:"4px",type:"spacing"},6:{value:"6px",type:"spacing"},8:{value:"8px",type:"spacing"},10:{value:"10px",type:"spacing"},12:{value:"12px",type:"spacing"},14:{value:"14px",type:"spacing"},16:{value:"16px",type:"spacing"},20:{value:"20px",type:"spacing"},24:{value:"24px",type:"spacing"},28:{value:"28px",type:"spacing"},32:{value:"32px",type:"spacing"},36:{value:"36px",type:"spacing"},40:{value:"40px",type:"spacing"},44:{value:"44px",type:"spacing"},48:{value:"48px",type:"spacing"},56:{value:"56px",type:"spacing"},64:{value:"64px",type:"spacing"},80:{value:"80px",type:"spacing"},96:{value:"96px",type:"spacing"},112:{value:"112px",type:"spacing"},128:{value:"128px",type:"spacing"},144:{value:"144px",type:"spacing"},160:{value:"160px",type:"spacing"},176:{value:"176px",type:"spacing"},192:{value:"192px",type:"spacing"},208:{value:"208px",type:"spacing"},224:{value:"224px",type:"spacing"},240:{value:"240px",type:"spacing"},256:{value:"256px",type:"spacing"},288:{value:"288px",type:"spacing"},320:{value:"320px",type:"spacing"},384:{value:"384px",type:"spacing"}},border:{0:{value:"0px",type:"borderWidth"},1:{value:"1px",type:"borderWidth"},2:{value:"2px",type:"borderWidth"},4:{value:"4px",type:"borderWidth"},8:{value:"8px",type:"borderWidth"}},rounded:{none:{value:"0px",type:"borderRadius"},sm:{value:"2px",type:"borderRadius"},base:{value:"4px",type:"borderRadius"},md:{value:"6px",type:"borderRadius"},lg:{value:"8px",type:"borderRadius"},xl:{value:"12px",type:"borderRadius"},"2xl":{value:"16px",type:"borderRadius"},"3xl":{value:"24px",type:"borderRadius"},full:{value:"9999px",type:"borderRadius"}},breakpoint:{xs:{value:"376px",type:"sizing"},sm:{value:"640px",type:"sizing"},md:{value:"768px",type:"sizing"},lg:{value:"1024px",type:"sizing"},xl:{value:"1280px",type:"sizing"},"2xl":{value:"1440px",type:"sizing"},"3xl":{value:"1536px",type:"sizing"}},shadow:{none:{value:{color:"#000000",type:"dropShadow",x:"0",y:"0",blur:"0",spread:"0"},type:"boxShadow"},sm:{value:{color:"#0000000d",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},type:"boxShadow"},base:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"1",blur:"2",spread:"0"},{color:"#0000001a",type:"dropShadow",x:"0",y:"1",blur:"3",spread:"0"}],type:"boxShadow"},md:{value:[{color:"#0000000f",type:"dropShadow",x:"0",y:"2",blur:"4",spread:"-1"},{color:"#0000001a",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-1"}],type:"boxShadow"},lg:{value:[{color:"#0000000d",type:"dropShadow",x:"0",y:"4",blur:"6",spread:"-2"},{color:"#0000001a",type:"dropShadow",x:"0",y:"10",blur:"15",spread:"-3"}],type:"boxShadow"},xl:{value:[{color:"#0000000a",type:"dropShadow",x:"0",y:"10",blur:"10",spread:"-5"},{color:"#0000001a",type:"dropShadow",x:"0",y:"20",blur:"25",spread:"-5"}],type:"boxShadow"},"2xl":{value:{color:"#00000040",type:"dropShadow",x:"0",y:"25",blur:"50",spread:"-12"},type:"boxShadow"},inner:{value:{color:"#0000000f",type:"innerShadow",x:"0",y:"2",blur:"4",spread:"0"},type:"boxShadow"}},underline:{value:"underline",type:"textDecoration"},text:{xs:{value:"12px",type:"fontSizes"},sm:{value:"14px",type:"fontSizes"},base:{value:"16px",type:"fontSizes"},lg:{value:"18px",type:"fontSizes"},xl:{value:"20px",type:"fontSizes"},"2xl":{value:"24px",type:"fontSizes"},"3xl":{value:"30px",type:"fontSizes"},"4xl":{value:"36px",type:"fontSizes"},"5xl":{value:"48px",type:"fontSizes"},"6xl":{value:"60px",type:"fontSizes"},"7xl":{value:"72px",type:"fontSizes"},"8xl":{value:"96px",type:"fontSizes"},"9xl":{value:"128px",type:"fontSizes"}},leading:{xs:{value:"16px",type:"lineHeights"},sm:{value:"18px",type:"lineHeights"},base:{value:"20px",type:"lineHeights"},lg:{value:"24px",type:"lineHeights"},xl:{value:"28px",type:"lineHeights"},"2xl":{value:"32px",type:"lineHeights"},"3xl":{value:"36px",type:"lineHeights"},"4xl":{value:"40px",type:"lineHeights"},"5xl":{value:"48px",type:"lineHeights"},"6xl":{value:"60px",type:"lineHeights"},"7xl":{value:"72px",type:"lineHeights"},"8xl":{value:"96px",type:"lineHeights"},"9xl":{value:"128px",type:"lineHeights"}}}},te={safeColorNames:["blue","purple","orange","pink","yellow","grey","core"]},oe={semanticColorNames:["error","warning","success","info"]},le=te.safeColorNames,ne=oe.semanticColorNames,S={};le.forEach(e=>{const t=N.global[e];t&&Object.keys(t).forEach(o=>{var a;const l=(a=t[o])==null?void 0:a.value;l&&(S[e]||(S[e]={}),S[e][o]=l)})});const H=N.global.semantic;H&&ne.forEach(e=>{const t=H[e];t&&typeof t=="object"&&Object.keys(t).forEach(o=>{var a;const l=(a=t[o])==null?void 0:a.value;if(l){const r=`semantic-${e}`;S[r]||(S[r]={}),S[r][o]=l}})});const re=Object.entries(N.global.breakpoint).reduce((e,[t,o])=>(e[t]=o.value,e),{}),ae=n.defineComponent({__name:"FzFloating",props:{isOpen:{type:Boolean,default:!1},position:{default:"auto"},container:{},contentClass:{},openerClass:{},overrideContentClass:{type:Boolean},overrideOpener:{},teleport:{type:Boolean,default:!1},useViewport:{type:Boolean}},emits:["fzfloating:setPosition"],setup(e,{expose:t,emit:o}){const l=e,a=o,r=n.ref(null),u=n.ref(null),v=n.useSlots(),x=R(`(max-width: ${re.xs})`);let h=!1,g=!1,m=null,y=null;const s={position:l.position,element:{domRef:r},container:{domRef:n.toRef(l.container||document.body)},opener:{domRef:n.toRef(null)},useViewport:l.useViewport,callback(...i){a("fzfloating:setPosition",...i)}},c=n.toRefs(s);v.opener&&(s.opener={domRef:u});const f=W(c),d=()=>{h||!g||(h=!0,requestAnimationFrame(()=>{g&&l.isOpen&&f.setPosition(),h=!1}))};n.onMounted(()=>{g=!0});const E=()=>{d()},k=()=>{d()},O=()=>{window.addEventListener("scroll",E,!0),window.addEventListener("resize",k),r.value&&!m&&(m=new ResizeObserver(()=>{d()}),m.observe(r.value)),u.value&&!y&&(y=new ResizeObserver(()=>{d()}),y.observe(u.value))},z=()=>{window.removeEventListener("scroll",E,!0),window.removeEventListener("resize",k),m&&(m.disconnect(),m=null),y&&(y.disconnect(),y=null)};n.watch(()=>l.position,()=>d()),n.watch(()=>l.isOpen,i=>{var D;if(!i||!r.value||!g){z();return}O();const w=(D=u.value)==null?void 0:D.getBoundingClientRect();r.value.style.position="fixed",r.value.style.top="0px",r.value.style.left="0px",r.value.style.transform="none",r.value.style.width=x.value?(w==null?void 0:w.width)+"px":"auto",f.setPosition()}),n.watch(()=>l.overrideOpener,i=>{i&&c.opener&&c.opener.value&&(c.opener.value={domRef:i})}),n.onBeforeUnmount(()=>{g=!1,z()});const B=i=>i.startsWith("bottom")?"mt-4":i.startsWith("top")?"mb-4":i.startsWith("left")?"mr-4":i.startsWith("right")?"ml-4":"mt-4",ie=n.computed(()=>{var w;const i=((w=f.actualPosition)==null?void 0:w.value)??l.position;return B(i)}),A=n.computed(()=>l.overrideContentClass?l.contentClass:["bg-core-white fixed",ie.value,l.contentClass]);return t({setPosition:f.setPosition}),(i,w)=>(n.openBlock(),n.createElementBlock("div",null,[n.renderSlot(i.$slots,"opener-start"),n.createElementVNode("div",{ref_key:"opener",ref:u,class:"inline-flex w-full sm:w-auto"},[n.renderSlot(i.$slots,"opener",{isOpen:e.isOpen,floating:n.unref(f)})],512),n.renderSlot(i.$slots,"opener-end"),e.teleport?n.createCommentVNode("",!0):n.withDirectives((n.openBlock(),n.createElementBlock("div",{key:0,ref_key:"content",ref:r,class:n.normalizeClass(["fz__floating__content w-full sm:w-auto",A.value])},[n.renderSlot(i.$slots,"default",{isOpen:e.isOpen,floating:n.unref(f)})],2)),[[n.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&e.isOpen)]]),e.teleport?(n.openBlock(),n.createBlock(n.Teleport,{key:1,to:"body"},[n.withDirectives(n.createElementVNode("div",{ref_key:"content",ref:r,class:n.normalizeClass(["fz__floating__content",A.value])},[n.renderSlot(i.$slots,"default",{isOpen:e.isOpen,floating:n.unref(f)})],2),[[n.vShow,i.$slots.default&&(!i.$slots.opener||i.$slots.opener&&e.isOpen)]])])):n.createCommentVNode("",!0)]))}});p.FzFloating=ae,p.calcRealPos=F,p.clamp=T,p.format=P,p.getHighestAvailableSpacePos=b,p.parse=$,p.roundTo=U,p.truncateDecimals=L,p.useBreakpoints=Y,p.useClickOutside=J,p.useCurrency=ee,p.useFloating=W,p.useKeyDown=Z,p.useKeyUp=_,p.useMediaQuery=R,Object.defineProperty(p,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@fiscozen/composables",
-  "version": "0.1.39-next.0",
+  "version": "1.0.1",
   "description": "Design System utility composables",
   "main": "src/index.ts",
   "type": "module",
   "keywords": [],
   "author": "Riccardo Agnoletto",
   "dependencies": {
-    "@fiscozen/style": "^0.1.8-next.0"
+    "@fiscozen/style": "0.2.0"
   },
   "peerDependencies": {
     "tailwindcss": "^3.4.1",
@@ -29,8 +29,8 @@
     "vitest": "^1.2.0",
     "vue-tsc": "^1.8.25",
     "@fiscozen/eslint-config": "^0.1.0",
-    "@fiscozen/prettier-config": "^0.1.0",
-    "@fiscozen/tsconfig": "^0.1.0"
+    "@fiscozen/tsconfig": "^0.1.0",
+    "@fiscozen/prettier-config": "^0.1.0"
   },
   "license": "ISC",
   "scripts": {

package/src/FzFloating.vue

@@ -1,5 +1,32 @@
 <script lang="ts" setup>
-import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, toRefs, defineExpose } from 'vue'
+/**
+ * FzFloating Component
+ * 
+ * A floating container that positions itself relative to an opener element.
+ * Supports automatic repositioning on scroll, resize, and content changes.
+ * 
+ * ## Features
+ * - 12 positioning options (top/bottom/left/right with start/center/end alignment)
+ * - Auto-positioning based on available viewport space  
+ * - Reactive repositioning via ResizeObserver
+ * - Teleport support for z-index stacking context issues
+ * - Automatic margin based on resolved position direction
+ * 
+ * ## Slots
+ * - `opener`: The element that triggers/anchors the floating content
+ * - `default`: The floating content to display
+ * 
+ * ## Example
+ * ```vue
+ * <FzFloating position="bottom-start" :isOpen="showMenu">
+ *   <template #opener>
+ *     <button @click="showMenu = !showMenu">Menu</button>
+ *   </template>
+ *   <div>Menu content here</div>
+ * </FzFloating>
+ * ```
+ */
+import { ref, useSlots, watch, toRef, computed, onBeforeUnmount, onMounted, toRefs } from 'vue'
 import { useFloating } from './composables'
 import { FzFloatingProps, FzUseFloatingArgs } from './types'
 import { useMediaQuery } from './composables'
@@ -21,6 +48,11 @@ const slots = useSlots()
 const xs = useMediaQuery(`(max-width: ${breakpoints.xs})`)
 
 let scheduledAnimationFrame = false
+let isMounted = false
+
+// Observers for reactive repositioning
+let resizeObserver: ResizeObserver | null = null
+let openerResizeObserver: ResizeObserver | null = null
 
 const useFloatingOpts: FzUseFloatingArgs = {
   position: props.position,
@@ -52,17 +84,72 @@ if (slots.opener) {
 const floating = useFloating(dynamicOpts)
 
 const setPositionWhenOpen = () => {
-  if (scheduledAnimationFrame) {
+  if (scheduledAnimationFrame || !isMounted) {
     return
   }
 
   scheduledAnimationFrame = true
   requestAnimationFrame(() => {
-    props.isOpen && floating.setPosition()
+    if (isMounted && props.isOpen) {
+      floating.setPosition()
+    }
     scheduledAnimationFrame = false
   })
 }
 
+onMounted(() => {
+  isMounted = true
+})
+
+// Scroll handler that catches scroll events on any scrollable parent
+const handleScroll = () => {
+  setPositionWhenOpen()
+}
+
+// Window resize handler
+const handleResize = () => {
+  setPositionWhenOpen()
+}
+
+// Setup all event listeners and observers
+const setupEventListeners = () => {
+  // Window scroll and resize
+  window.addEventListener('scroll', handleScroll, true) // capture phase for nested scrollables
+  window.addEventListener('resize', handleResize)
+
+  // ResizeObserver for floating content (handles content size changes)
+  if (content.value && !resizeObserver) {
+    resizeObserver = new ResizeObserver(() => {
+      setPositionWhenOpen()
+    })
+    resizeObserver.observe(content.value)
+  }
+
+  // ResizeObserver for opener (handles opener size/position changes)
+  if (opener.value && !openerResizeObserver) {
+    openerResizeObserver = new ResizeObserver(() => {
+      setPositionWhenOpen()
+    })
+    openerResizeObserver.observe(opener.value)
+  }
+}
+
+// Cleanup all event listeners and observers
+const cleanupEventListeners = () => {
+  window.removeEventListener('scroll', handleScroll, true)
+  window.removeEventListener('resize', handleResize)
+
+  if (resizeObserver) {
+    resizeObserver.disconnect()
+    resizeObserver = null
+  }
+
+  if (openerResizeObserver) {
+    openerResizeObserver.disconnect()
+    openerResizeObserver = null
+  }
+}
+
 watch(
   () => props.position,
   () => setPositionWhenOpen()
@@ -70,11 +157,13 @@ watch(
 watch(
   () => props.isOpen,
   (newVal) => {
-    if (!newVal || !content.value) {
-      window.removeEventListener('scroll', setPositionWhenOpen)
+    if (!newVal || !content.value || !isMounted) {
+      cleanupEventListeners()
       return
     }
-    window.addEventListener('scroll', setPositionWhenOpen)
+    
+    setupEventListeners()
+    
     const openerRect = opener.value?.getBoundingClientRect()
     // CRITICAL: Set position fixed immediately to prevent layout shift
     content.value.style.position = 'fixed'
@@ -98,8 +187,26 @@ watch(
     }
   }
 )
+
 onBeforeUnmount(() => {
-  window.removeEventListener('scroll', setPositionWhenOpen)
+  isMounted = false
+  cleanupEventListeners()
+})
+
+// Helper function to get margin class from position
+const getMarginClassForPosition = (position: string): string => {
+  if (position.startsWith('bottom')) return 'mt-4' // margin-top only
+  if (position.startsWith('top')) return 'mb-4'    // margin-bottom only
+  if (position.startsWith('left')) return 'mr-4'   // margin-right only
+  if (position.startsWith('right')) return 'ml-4'  // margin-left only
+  return 'mt-4' // default fallback
+}
+
+// Computed margin class based on resolved position
+// Uses actualPosition for auto positions, falls back to props.position for explicit
+const resolvedMarginClass = computed(() => {
+  const effectivePosition = floating.actualPosition?.value ?? props.position
+  return getMarginClassForPosition(effectivePosition)
 })
 
 const contentClass = computed(() => {
@@ -107,7 +214,7 @@ const contentClass = computed(() => {
     return props.contentClass
   }
 
-  return ['bg-core-white fixed p-4', props.contentClass]
+  return ['bg-core-white fixed', resolvedMarginClass.value, props.contentClass]
 })
 
 defineExpose({

package/src/__tests__/__snapshots__/FzFloating.spec.ts.snap

@@ -3,7 +3,7 @@
 exports[`FzFloating > should match snapshot 1`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -13,7 +13,7 @@ exports[`FzFloating > should match snapshot 1`] = `
 exports[`FzFloating > should match snapshot 2`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -23,7 +23,7 @@ exports[`FzFloating > should match snapshot 2`] = `
 exports[`FzFloating > should match snapshot 3`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mb-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -33,7 +33,7 @@ exports[`FzFloating > should match snapshot 3`] = `
 exports[`FzFloating > should match snapshot 4`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -43,7 +43,7 @@ exports[`FzFloating > should match snapshot 4`] = `
 exports[`FzFloating > should match snapshot 5`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -53,7 +53,7 @@ exports[`FzFloating > should match snapshot 5`] = `
 exports[`FzFloating > should match snapshot 6`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mr-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -63,7 +63,7 @@ exports[`FzFloating > should match snapshot 6`] = `
 exports[`FzFloating > should match snapshot 7`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -73,7 +73,7 @@ exports[`FzFloating > should match snapshot 7`] = `
 exports[`FzFloating > should match snapshot 8`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -83,7 +83,7 @@ exports[`FzFloating > should match snapshot 8`] = `
 exports[`FzFloating > should match snapshot 9`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed mt-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -93,7 +93,7 @@ exports[`FzFloating > should match snapshot 9`] = `
 exports[`FzFloating > should match snapshot 10`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -103,7 +103,7 @@ exports[`FzFloating > should match snapshot 10`] = `
 exports[`FzFloating > should match snapshot 11`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->
@@ -113,7 +113,7 @@ exports[`FzFloating > should match snapshot 11`] = `
 exports[`FzFloating > should match snapshot 12`] = `
 "<div>
   <div class="inline-flex w-full sm:w-auto"><button>opener</button></div>
-  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed p-4">
+  <div class="fz__floating__content w-full sm:w-auto bg-core-white fixed ml-4">
     <div>content</div>
   </div>
   <!--v-if-->

package/src/__tests__/useFloating.spec.ts

@@ -23,6 +23,7 @@ describe('useFloating', () => {
     mockElement = document.createElement('div')
     mockElement.style.width = '200px'
     mockElement.style.height = '100px'
+    mockElement.style.margin = '0px' // Set explicit margins to avoid NaN from parseFloat
     document.body.appendChild(mockElement)
 
     mockOpener = document.createElement('button')
@@ -207,7 +208,8 @@ describe('useFloating', () => {
       const args = toRefs({
         position: ref<FzFloatingPosition>('bottom-end'),
         element: { domRef: ref(mockElement) },
-        opener: { domRef: ref(mockOpener) }
+        opener: { domRef: ref(mockOpener) },
+        container: { domRef: ref(mockContainer) }
       })
 
       const floating = useFloating(args)
@@ -215,6 +217,9 @@ describe('useFloating', () => {
       await nextTick()
 
       // Element should be adjusted to fit within container
+      // Position values should be valid numbers (not NaN)
+      expect(Number.isNaN(floating.float.position.x)).toBe(false)
+      expect(Number.isNaN(floating.float.position.y)).toBe(false)
       expect(floating.float.position.x).toBeLessThanOrEqual(1024)
       expect(floating.float.position.y).toBeLessThanOrEqual(768)
     })
@@ -305,7 +310,7 @@ describe('useFloating', () => {
   })
 
   describe('error handling', () => {
-    it('should throw error when element ref is missing', async () => {
+    it('should handle missing element ref gracefully', async () => {
       const args = toRefs({
         position: ref<FzFloatingPosition>('bottom'),
         opener: { domRef: ref(mockOpener) },
@@ -314,10 +319,13 @@ describe('useFloating', () => {
 
       const floating = useFloating(args)
 
-      await expect(async () => {
-        await floating.setPosition()
-        await nextTick()
-      }).rejects.toThrow('missing reference element for floating behavior')
+      // Should not throw, just return early when element is missing
+      await floating.setPosition()
+      await nextTick()
+      
+      // Position should remain at initial values (0, 0)
+      expect(floating.float.position.x).toBe(0)
+      expect(floating.float.position.y).toBe(0)
     })
   })