@flows/react-components - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1-canary.0

dist/index.js

 "use client"
-"use strict";var z=Object.create;var p=Object.defineProperty,K=Object.defineProperties,Q=Object.getOwnPropertyDescriptor,j=Object.getOwnPropertyDescriptors,tt=Object.getOwnPropertyNames,g=Object.getOwnPropertySymbols,et=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable;var L=(t,e,o)=>e in t?p(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,s=(t,e)=>{for(var o in e||(e={}))N.call(e,o)&&L(t,o,e[o]);if(g)for(var o of g(e))$.call(e,o)&&L(t,o,e[o]);return t},k=(t,e)=>K(t,j(e));var d=(t,e)=>{var o={};for(var l in t)N.call(t,l)&&e.indexOf(l)<0&&(o[l]=t[l]);if(t!=null&&g)for(var l of g(t))e.indexOf(l)<0&&$.call(t,l)&&(o[l]=t[l]);return o};var ot=(t,e)=>{for(var o in e)p(t,o,{get:e[o],enumerable:!0})},O=(t,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let n of tt(e))!N.call(t,n)&&n!==o&&p(t,n,{get:()=>e[n],enumerable:!(l=Q(e,n))||l.enumerable});return t};var v=(t,e,o)=>(o=t!=null?z(et(t)):{},O(e||!t||!t.__esModule?p(o,"default",{value:t,enumerable:!0}):o,t)),lt=t=>O(p({},"__esModule",{value:!0}),t);var mt={};ot(mt,{Modal:()=>nt,Tooltip:()=>ct});module.exports=lt(mt);var H=v(require("classnames"));var G=require("react/jsx-runtime"),C=l=>{var n=l,{className:t,variant:e}=n,o=d(n,["className","variant"]);return(0,G.jsx)("button",s({type:"button",className:(0,H.default)("flows_button",`flows_button_${e}`,t)},o))};var Y=v(require("classnames"));var V=v(require("classnames"));var U=require("react/jsx-runtime"),u=l=>{var n=l,{className:t,variant:e}=n,o=d(n,["className","variant"]);return(0,U.jsx)("p",s({className:(0,V.default)("flows_text",`flows_text_${e}`,t)},o))};var W=v(require("classnames"));var X=require("react/jsx-runtime"),b=o=>{var l=o,{className:t}=l,e=d(l,["className"]);return(0,X.jsx)("button",s({type:"button",className:(0,W.default)("flows_iconButton",t)},e))};var h=require("react/jsx-runtime");function x(t){return(0,h.jsx)("svg",k(s({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,h.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var r=require("react/jsx-runtime"),Z=t=>(0,r.jsxs)(r.Fragment,{children:[t.overlay?(0,r.jsx)("div",{className:(0,Y.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,r.jsx)("div",{className:"flows_modal_wrapper",children:(0,r.jsxs)("div",{className:"flows_modal_modal",children:[(0,r.jsx)(u,{variant:"title",children:t.title}),(0,r.jsx)(u,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),(0,r.jsx)("div",{className:"flows_modal_footer",children:t.buttons}),t.onClose?(0,r.jsx)(b,{className:"flows_modal_close",onClick:t.onClose,children:(0,r.jsx)(x,{})}):null]})})]});var T=require("react/jsx-runtime"),nt=t=>(0,T.jsx)(Z,{title:t.title,body:t.body,buttons:t.continueText?(0,T.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}):null,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0});var c=require("react"),a=require("@floating-ui/react-dom"),P=v(require("classnames"));var i=require("react/jsx-runtime"),rt=4,q=6,it=rt+q,at=8,st=8,J=t=>{var R,M;let e=(0,c.useRef)(null),o=(0,c.useRef)(null),l=(0,c.useRef)(null),n=document.querySelector(t.targetElement),{refs:y,middlewareData:_,placement:w,x:B,y:F}=(0,a.useFloating)({placement:t.placement,elements:{reference:n},whileElementsMounted:a.autoUpdate,middleware:[(0,a.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,a.shift)({crossAxis:!0,padding:at}),(0,a.arrow)({element:o,padding:st}),(0,a.offset)(it)]});if((0,c.useEffect)(()=>{y.floating.current&&(y.floating.current.style.left=`${B}px`,y.floating.current.style.top=`${F}px`)},[y.floating,B,F]),(0,c.useEffect)(()=>{var I,A;let m=w.includes("top")?"bottom":w.includes("bottom")?"top":w.includes("left")?"right":"left",S=(I=_.arrow)==null?void 0:I.x,D=(A=_.arrow)==null?void 0:A.y;[o,e].forEach(f=>{f.current&&(f.current.style.left=S!=null?`${S}px`:"",f.current.style.top=D!=null?`${D}px`:"",f.current.style.right="",f.current.style.bottom="",f.current.style[m]=`${-q}px`)})},[(R=_.arrow)==null?void 0:R.x,(M=_.arrow)==null?void 0:M.y,w]),(0,c.useEffect)(()=>{t.targetElement||console.error("Flows: Cannot render tooltip without target element")},[t.targetElement]),!t.targetElement)return null;if(l.current&&n){let m=n.getBoundingClientRect();l.current.style.top=`${m.top}px`,l.current.style.left=`${m.left}px`,l.current.style.width=`${m.width}px`,l.current.style.height=`${m.height}px`}return(0,i.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,i.jsx)("div",{className:"flows_tooltip_overlay",ref:l}):null,(0,i.jsxs)("div",{className:"flows_tooltip_tooltip",ref:y.setFloating,children:[(0,i.jsx)(u,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,i.jsx)(u,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),(0,i.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}),t.onClose?(0,i.jsx)(b,{className:"flows_tooltip_close",onClick:t.onClose,children:(0,i.jsx)(x,{})}):null,(0,i.jsx)("div",{className:(0,P.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,i.jsx)("div",{className:(0,P.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var E=require("react/jsx-runtime"),ct=t=>(0,E.jsx)(J,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0,buttons:t.continueText?(0,E.jsx)(C,{variant:"primary",onClick:t.continue,children:t.continueText}):null});
+"use strict";var j=Object.create;var y=Object.defineProperty,tt=Object.defineProperties,ot=Object.getOwnPropertyDescriptor,et=Object.getOwnPropertyDescriptors,lt=Object.getOwnPropertyNames,w=Object.getOwnPropertySymbols,nt=Object.getPrototypeOf,N=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var L=(t,o,e)=>o in t?y(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,s=(t,o)=>{for(var e in o||(o={}))N.call(o,e)&&L(t,e,o[e]);if(w)for(var e of w(o))S.call(o,e)&&L(t,e,o[e]);return t},A=(t,o)=>tt(t,et(o));var f=(t,o)=>{var e={};for(var l in t)N.call(t,l)&&o.indexOf(l)<0&&(e[l]=t[l]);if(t!=null&&w)for(var l of w(t))o.indexOf(l)<0&&S.call(t,l)&&(e[l]=t[l]);return e};var rt=(t,o)=>{for(var e in o)y(t,e,{get:o[e],enumerable:!0})},I=(t,o,e,l)=>{if(o&&typeof o=="object"||typeof o=="function")for(let n of lt(o))!N.call(t,n)&&n!==e&&y(t,n,{get:()=>o[n],enumerable:!(l=ot(o,n))||l.enumerable});return t};var v=(t,o,e)=>(e=t!=null?j(nt(t)):{},I(o||!t||!t.__esModule?y(e,"default",{value:t,enumerable:!0}):e,t)),it=t=>I(y({},"__esModule",{value:!0}),t);var yt={};rt(yt,{Modal:()=>at,Tooltip:()=>pt});module.exports=it(yt);var G=v(require("classnames"));var H=require("react/jsx-runtime"),b=l=>{var n=l,{className:t,variant:o}=n,e=f(n,["className","variant"]);return(0,H.jsx)("button",s({type:"button",className:(0,G.default)("flows_button",`flows_button_${o}`,t)},e))};var Y=v(require("classnames"));var h=require("react/jsx-runtime");function C(t){return(0,h.jsx)("svg",A(s({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,h.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var U=v(require("classnames"));var V=require("react/jsx-runtime"),u=l=>{var n=l,{className:t,variant:o}=n,e=f(n,["className","variant"]);return(0,V.jsx)("p",s({className:(0,U.default)("flows_text",`flows_text_${o}`,t)},e))};var W=v(require("classnames"));var X=require("react/jsx-runtime"),x=e=>{var l=e,{className:t}=l,o=f(l,["className"]);return(0,X.jsx)("button",s({type:"button",className:(0,W.default)("flows_iconButton",t)},o))};var r=require("react/jsx-runtime"),Z=t=>(0,r.jsxs)(r.Fragment,{children:[t.overlay?(0,r.jsx)("div",{className:(0,Y.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,r.jsx)("div",{className:"flows_modal_wrapper",children:(0,r.jsxs)("div",{className:"flows_modal_modal",children:[(0,r.jsx)(u,{variant:"title",children:t.title}),(0,r.jsx)(u,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),(0,r.jsx)("div",{className:"flows_modal_footer",children:t.buttons}),t.onClose?(0,r.jsx)(x,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,r.jsx)(C,{})}):null]})})]});var T=require("react/jsx-runtime"),at=t=>(0,T.jsx)(Z,{title:t.title,body:t.body,buttons:t.continueText?(0,T.jsx)(b,{variant:"primary",onClick:t.continue,children:t.continueText}):null,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0});var c=require("react"),a=require("@floating-ui/react-dom"),E=v(require("classnames"));var st="#22262d",ct="#fff",q="%cFlows%c",K=`color:${ct};background:${st};padding:2px 4px;border-radius:4px`,z={error:(t,...o)=>{console.error(`${q} ${t}`,K,"",...o)},warn:(t,...o)=>{console.warn(`${q} ${t}`,K,"",...o)}};var i=require("react/jsx-runtime"),mt=4,J=6,dt=mt+J,ft=8,ut=8,Q=t=>{var F,$;let o=(0,c.useRef)(null),e=(0,c.useRef)(null),l=(0,c.useRef)(null),n=document.querySelector(t.targetElement),{refs:p,middlewareData:g,placement:_,x:B,y:R}=(0,a.useFloating)({placement:t.placement,elements:{reference:n},whileElementsMounted:a.autoUpdate,middleware:[(0,a.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,a.shift)({crossAxis:!0,padding:ft}),(0,a.arrow)({element:e,padding:ut}),(0,a.offset)(dt)]});if((0,c.useEffect)(()=>{p.floating.current&&(p.floating.current.style.left=`${B}px`,p.floating.current.style.top=`${R}px`)},[p.floating,B,R]),(0,c.useEffect)(()=>{var M,k;let m=_.includes("top")?"bottom":_.includes("bottom")?"top":_.includes("left")?"right":"left",O=(M=g.arrow)==null?void 0:M.x,D=(k=g.arrow)==null?void 0:k.y;[e,o].forEach(d=>{d.current&&(d.current.style.left=O!=null?`${O}px`:"",d.current.style.top=D!=null?`${D}px`:"",d.current.style.right="",d.current.style.bottom="",d.current.style[m]=`${-J}px`)})},[(F=g.arrow)==null?void 0:F.x,($=g.arrow)==null?void 0:$.y,_]),(0,c.useEffect)(()=>{t.targetElement||z.error("Cannot render tooltip without target element")},[t.targetElement]),!t.targetElement)return null;if(l.current&&n){let m=n.getBoundingClientRect();l.current.style.top=`${m.top}px`,l.current.style.left=`${m.left}px`,l.current.style.width=`${m.width}px`,l.current.style.height=`${m.height}px`}return(0,i.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,i.jsx)("div",{className:"flows_tooltip_overlay",ref:l}):null,(0,i.jsxs)("div",{className:"flows_tooltip_tooltip",ref:p.setFloating,children:[(0,i.jsx)(u,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,i.jsx)(u,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),(0,i.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}),t.onClose?(0,i.jsx)(x,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,i.jsx)(C,{})}):null,(0,i.jsx)("div",{className:(0,E.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:e}),(0,i.jsx)("div",{className:(0,E.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:o})]})]})};var P=require("react/jsx-runtime"),pt=t=>(0,P.jsx)(Q,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.close:void 0,buttons:t.continueText?(0,P.jsx)(b,{variant:"primary",onClick:t.continue,children:t.continueText}):null});

dist/tour.d.ts

 import { FC } from 'react';
-import { TourComponentProps } from '@flows/react';
 import { Placement } from '@floating-ui/react-dom';
 
+type TourComponentProps<T extends Record<string, any> = any> = {
+    continue: () => void;
+    previous?: () => void;
+    cancel: () => void;
+} & T;
+
 type ModalProps = TourComponentProps<{
@@ -6,0 +11,0 @@ title: string;

dist/tour.js

 "use client"
-"use strict";var z=Object.create;var g=Object.defineProperty,K=Object.defineProperties,Q=Object.getOwnPropertyDescriptor,j=Object.getOwnPropertyDescriptors,tt=Object.getOwnPropertyNames,b=Object.getOwnPropertySymbols,et=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,L=Object.prototype.propertyIsEnumerable;var A=(t,e,o)=>e in t?g(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,m=(t,e)=>{for(var o in e||(e={}))h.call(e,o)&&A(t,o,e[o]);if(b)for(var o of b(e))L.call(e,o)&&A(t,o,e[o]);return t},$=(t,e)=>K(t,j(e));var p=(t,e)=>{var o={};for(var n in t)h.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&b)for(var n of b(t))e.indexOf(n)<0&&L.call(t,n)&&(o[n]=t[n]);return o};var ot=(t,e)=>{for(var o in e)g(t,o,{get:e[o],enumerable:!0})},O=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of tt(e))!h.call(t,l)&&l!==o&&g(t,l,{get:()=>e[l],enumerable:!(n=Q(e,l))||n.enumerable});return t};var C=(t,e,o)=>(o=t!=null?z(et(t)):{},O(e||!t||!t.__esModule?g(o,"default",{value:t,enumerable:!0}):o,t)),nt=t=>O(g({},"__esModule",{value:!0}),t);var ct={};ot(ct,{Modal:()=>lt,Tooltip:()=>mt});module.exports=nt(ct);var W=C(require("classnames"));var H=C(require("classnames"));var G=require("react/jsx-runtime"),y=n=>{var l=n,{className:t,variant:e}=l,o=p(l,["className","variant"]);return(0,G.jsx)("p",m({className:(0,H.default)("flows_text",`flows_text_${e}`,t)},o))};var V=C(require("classnames"));var U=require("react/jsx-runtime"),N=o=>{var n=o,{className:t}=n,e=p(n,["className"]);return(0,U.jsx)("button",m({type:"button",className:(0,V.default)("flows_iconButton",t)},e))};var P=require("react/jsx-runtime");function T(t){return(0,P.jsx)("svg",$(m({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,P.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var r=require("react/jsx-runtime"),X=t=>(0,r.jsxs)(r.Fragment,{children:[t.overlay?(0,r.jsx)("div",{className:(0,W.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,r.jsx)("div",{className:"flows_modal_wrapper",children:(0,r.jsxs)("div",{className:"flows_modal_modal",children:[(0,r.jsx)(y,{variant:"title",children:t.title}),(0,r.jsx)(y,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),(0,r.jsx)("div",{className:"flows_modal_footer",children:t.buttons}),t.onClose?(0,r.jsx)(N,{className:"flows_modal_close",onClick:t.onClose,children:(0,r.jsx)(T,{})}):null]})})]});var Y=C(require("classnames"));var Z=require("react/jsx-runtime"),v=n=>{var l=n,{className:t,variant:e}=l,o=p(l,["className","variant"]);return(0,Z.jsx)("button",m({type:"button",className:(0,Y.default)("flows_button",`flows_button_${e}`,t)},o))};var c=require("react/jsx-runtime"),lt=t=>(0,c.jsx)(X,{title:t.title,body:t.body,overlay:!t.hideOverlay,buttons:(0,c.jsxs)(c.Fragment,{children:[t.previous&&t.previousText?(0,c.jsx)(v,{variant:"secondary",onClick:t.previous,children:t.previousText}):null,t.continueText?(0,c.jsx)(v,{variant:"primary",onClick:t.continue,children:t.continueText}):null]}),onClose:t.showCloseButton?t.cancel:void 0});var u=require("react"),a=require("@floating-ui/react-dom"),B=C(require("classnames"));var i=require("react/jsx-runtime"),rt=4,q=6,it=rt+q,at=8,st=8,J=t=>{var R,M;let e=(0,u.useRef)(null),o=(0,u.useRef)(null),n=(0,u.useRef)(null),l=document.querySelector(t.targetElement),{refs:_,middlewareData:w,placement:x,x:E,y:F}=(0,a.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:a.autoUpdate,middleware:[(0,a.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,a.shift)({crossAxis:!0,padding:at}),(0,a.arrow)({element:o,padding:st}),(0,a.offset)(it)]});if((0,u.useEffect)(()=>{_.floating.current&&(_.floating.current.style.left=`${E}px`,_.floating.current.style.top=`${F}px`)},[_.floating,E,F]),(0,u.useEffect)(()=>{var I,k;let d=x.includes("top")?"bottom":x.includes("bottom")?"top":x.includes("left")?"right":"left",S=(I=w.arrow)==null?void 0:I.x,D=(k=w.arrow)==null?void 0:k.y;[o,e].forEach(f=>{f.current&&(f.current.style.left=S!=null?`${S}px`:"",f.current.style.top=D!=null?`${D}px`:"",f.current.style.right="",f.current.style.bottom="",f.current.style[d]=`${-q}px`)})},[(R=w.arrow)==null?void 0:R.x,(M=w.arrow)==null?void 0:M.y,x]),(0,u.useEffect)(()=>{t.targetElement||console.error("Flows: Cannot render tooltip without target element")},[t.targetElement]),!t.targetElement)return null;if(n.current&&l){let d=l.getBoundingClientRect();n.current.style.top=`${d.top}px`,n.current.style.left=`${d.left}px`,n.current.style.width=`${d.width}px`,n.current.style.height=`${d.height}px`}return(0,i.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,i.jsx)("div",{className:"flows_tooltip_overlay",ref:n}):null,(0,i.jsxs)("div",{className:"flows_tooltip_tooltip",ref:_.setFloating,children:[(0,i.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,i.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),(0,i.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}),t.onClose?(0,i.jsx)(N,{className:"flows_tooltip_close",onClick:t.onClose,children:(0,i.jsx)(T,{})}):null,(0,i.jsx)("div",{className:(0,B.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,i.jsx)("div",{className:(0,B.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var s=require("react/jsx-runtime"),mt=t=>(0,s.jsx)(J,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.cancel:void 0,buttons:(0,s.jsxs)(s.Fragment,{children:[t.previous&&t.previousText?(0,s.jsx)(v,{variant:"secondary",onClick:t.previous,children:t.previousText}):(0,s.jsx)("div",{"aria-hidden":!0}),t.continueText?(0,s.jsx)(v,{variant:"primary",onClick:t.continue,children:t.continueText}):(0,s.jsx)("div",{"aria-hidden":!0})]})});
+"use strict";var j=Object.create;var C=Object.defineProperty,tt=Object.defineProperties,et=Object.getOwnPropertyDescriptor,ot=Object.getOwnPropertyDescriptors,nt=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols,lt=Object.getPrototypeOf,h=Object.prototype.hasOwnProperty,S=Object.prototype.propertyIsEnumerable;var L=(t,e,o)=>e in t?C(t,e,{enumerable:!0,configurable:!0,writable:!0,value:o}):t[e]=o,c=(t,e)=>{for(var o in e||(e={}))h.call(e,o)&&L(t,o,e[o]);if(x)for(var o of x(e))S.call(e,o)&&L(t,o,e[o]);return t},A=(t,e)=>tt(t,ot(e));var p=(t,e)=>{var o={};for(var n in t)h.call(t,n)&&e.indexOf(n)<0&&(o[n]=t[n]);if(t!=null&&x)for(var n of x(t))e.indexOf(n)<0&&S.call(t,n)&&(o[n]=t[n]);return o};var rt=(t,e)=>{for(var o in e)C(t,o,{get:e[o],enumerable:!0})},I=(t,e,o,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let l of nt(e))!h.call(t,l)&&l!==o&&C(t,l,{get:()=>e[l],enumerable:!(n=et(e,l))||n.enumerable});return t};var _=(t,e,o)=>(o=t!=null?j(lt(t)):{},I(e||!t||!t.__esModule?C(o,"default",{value:t,enumerable:!0}):o,t)),it=t=>I(C({},"__esModule",{value:!0}),t);var yt={};rt(yt,{Modal:()=>at,Tooltip:()=>pt});module.exports=it(yt);var W=_(require("classnames"));var P=require("react/jsx-runtime");function T(t){return(0,P.jsx)("svg",A(c({height:16,viewBox:"0 0 16 16",width:16,xmlns:"http://www.w3.org/2000/svg",fill:"currentColor"},t),{children:(0,P.jsx)("path",{d:"M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734L9.06 8l3.22 3.22a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L8 9.06l-3.22 3.22a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L6.94 8 3.72 4.78a.75.75 0 0 1 0-1.06Z"})}))}var G=_(require("classnames"));var H=require("react/jsx-runtime"),y=n=>{var l=n,{className:t,variant:e}=l,o=p(l,["className","variant"]);return(0,H.jsx)("p",c({className:(0,G.default)("flows_text",`flows_text_${e}`,t)},o))};var U=_(require("classnames"));var V=require("react/jsx-runtime"),N=o=>{var n=o,{className:t}=n,e=p(n,["className"]);return(0,V.jsx)("button",c({type:"button",className:(0,U.default)("flows_iconButton",t)},e))};var r=require("react/jsx-runtime"),X=t=>(0,r.jsxs)(r.Fragment,{children:[t.overlay?(0,r.jsx)("div",{className:(0,W.default)("flows_modal_overlay",t.onClose&&"flows_modal_clickable"),onClick:t.onClose,"aria-hidden":"true"}):null,(0,r.jsx)("div",{className:"flows_modal_wrapper",children:(0,r.jsxs)("div",{className:"flows_modal_modal",children:[(0,r.jsx)(y,{variant:"title",children:t.title}),(0,r.jsx)(y,{variant:"body",dangerouslySetInnerHTML:{__html:t.body}}),(0,r.jsx)("div",{className:"flows_modal_footer",children:t.buttons}),t.onClose?(0,r.jsx)(N,{"aria-label":"Close",className:"flows_modal_close",onClick:t.onClose,children:(0,r.jsx)(T,{})}):null]})})]});var Y=_(require("classnames"));var Z=require("react/jsx-runtime"),v=n=>{var l=n,{className:t,variant:e}=l,o=p(l,["className","variant"]);return(0,Z.jsx)("button",c({type:"button",className:(0,Y.default)("flows_button",`flows_button_${e}`,t)},o))};var m=require("react/jsx-runtime"),at=t=>(0,m.jsx)(X,{title:t.title,body:t.body,overlay:!t.hideOverlay,buttons:(0,m.jsxs)(m.Fragment,{children:[t.previous&&t.previousText?(0,m.jsx)(v,{variant:"secondary",onClick:t.previous,children:t.previousText}):null,t.continueText?(0,m.jsx)(v,{variant:"primary",onClick:t.continue,children:t.continueText}):null]}),onClose:t.showCloseButton?t.cancel:void 0});var d=require("react"),a=require("@floating-ui/react-dom"),B=_(require("classnames"));var st="#22262d",ct="#fff",q="%cFlows%c",K=`color:${ct};background:${st};padding:2px 4px;border-radius:4px`,z={error:(t,...e)=>{console.error(`${q} ${t}`,K,"",...e)},warn:(t,...e)=>{console.warn(`${q} ${t}`,K,"",...e)}};var i=require("react/jsx-runtime"),mt=4,J=6,dt=mt+J,ut=8,ft=8,Q=t=>{var F,$;let e=(0,d.useRef)(null),o=(0,d.useRef)(null),n=(0,d.useRef)(null),l=document.querySelector(t.targetElement),{refs:g,middlewareData:w,placement:b,x:E,y:R}=(0,a.useFloating)({placement:t.placement,elements:{reference:l},whileElementsMounted:a.autoUpdate,middleware:[(0,a.flip)({fallbackPlacements:["top","bottom","left","right"]}),(0,a.shift)({crossAxis:!0,padding:ut}),(0,a.arrow)({element:o,padding:ft}),(0,a.offset)(dt)]});if((0,d.useEffect)(()=>{g.floating.current&&(g.floating.current.style.left=`${E}px`,g.floating.current.style.top=`${R}px`)},[g.floating,E,R]),(0,d.useEffect)(()=>{var D,M;let u=b.includes("top")?"bottom":b.includes("bottom")?"top":b.includes("left")?"right":"left",k=(D=w.arrow)==null?void 0:D.x,O=(M=w.arrow)==null?void 0:M.y;[o,e].forEach(f=>{f.current&&(f.current.style.left=k!=null?`${k}px`:"",f.current.style.top=O!=null?`${O}px`:"",f.current.style.right="",f.current.style.bottom="",f.current.style[u]=`${-J}px`)})},[(F=w.arrow)==null?void 0:F.x,($=w.arrow)==null?void 0:$.y,b]),(0,d.useEffect)(()=>{t.targetElement||z.error("Cannot render tooltip without target element")},[t.targetElement]),!t.targetElement)return null;if(n.current&&l){let u=l.getBoundingClientRect();n.current.style.top=`${u.top}px`,n.current.style.left=`${u.left}px`,n.current.style.width=`${u.width}px`,n.current.style.height=`${u.height}px`}return(0,i.jsxs)("div",{className:"flows_tooltip_root",children:[t.overlay?(0,i.jsx)("div",{className:"flows_tooltip_overlay",ref:n}):null,(0,i.jsxs)("div",{className:"flows_tooltip_tooltip",ref:g.setFloating,children:[(0,i.jsx)(y,{className:"flows_tooltip_title",variant:"title",children:t.title}),(0,i.jsx)(y,{variant:"body",className:"flows_tooltip_body",dangerouslySetInnerHTML:{__html:t.body}}),(0,i.jsx)("div",{className:"flows_tooltip_footer",children:t.buttons}),t.onClose?(0,i.jsx)(N,{"aria-label":"Close",className:"flows_tooltip_close",onClick:t.onClose,children:(0,i.jsx)(T,{})}):null,(0,i.jsx)("div",{className:(0,B.default)("flows_tooltip_arrow","flows_tooltip_arrow-bottom"),ref:o}),(0,i.jsx)("div",{className:(0,B.default)("flows_tooltip_arrow","flows_tooltip_arrow-top"),ref:e})]})]})};var s=require("react/jsx-runtime"),pt=t=>(0,s.jsx)(Q,{title:t.title,body:t.body,targetElement:t.targetElement,placement:t.placement,overlay:!t.hideOverlay,onClose:t.showCloseButton?t.cancel:void 0,buttons:(0,s.jsxs)(s.Fragment,{children:[t.previous&&t.previousText?(0,s.jsx)(v,{variant:"secondary",onClick:t.previous,children:t.previousText}):(0,s.jsx)("div",{"aria-hidden":!0}),t.continueText?(0,s.jsx)(v,{variant:"primary",onClick:t.continue,children:t.continueText}):(0,s.jsx)("div",{"aria-hidden":!0})]})});

package.json

 {
   "name": "@flows/react-components",
-  "version": "1.0.0",
+  "version": "1.0.1-canary.0",
   "description": "Built-in components for Flows React SDK",
@@ -24,2 +24,3 @@ "keywords": [
   "license": "MIT",
+  "sideEffects": false,
   "repository": {
@@ -31,4 +32,4 @@ "type": "git",
     "@types/jest": "^29.5.14",
-    "@types/node": "^20.17.10",
-    "@types/react": "^18.3.12",
+    "@types/node": "^20",
+    "@types/react": "^19",
     "jest": "^29.7.0",
@@ -38,4 +39,5 @@ "jest-environment-jsdom": "^29.7.0",
     "tsup": "^8.3.5",
-    "typescript": "^5.6.3",
-    "@flows/react": "0.0.2-canary.9"
+    "typescript": "^5.7.3",
+    "@flows/shared": "1.0.0",
+    "@flows/styles": "1.0.0"
   },
@@ -67,3 +69,3 @@ "peerDependencies": {
     "dev": "tsup --watch --env.NODE_ENV development",
-    "build": "tsup --env.NODE_ENV production && pnpm tsc -p tsconfig.dist.json",
+    "build": "tsup --env.NODE_ENV production",
     "lint": "eslint src",
@@ -70,0 +72,0 @@ "tsc": "tsc -p tsconfig.json",

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

30978

3.65%

Lines of code

132

5.6%

Worsened metrics

Dev dependency count

10

11.11%

Number of low quality alerts

4

33.33%

No dependency changes