Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

vaul

Package Overview
Dependencies
Maintainers
1
Versions
66
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

vaul - npm Package Compare versions

Comparing version 0.4.5 to 0.4.6

4

dist/index.d.ts

@@ -27,4 +27,6 @@ import * as DialogPrimitive from '@radix-ui/react-dialog';

modal?: boolean;
nested?: boolean;
onClose?: () => void;
} & (WithFadeFromProps | WithoutFadeFromProps);
declare function Root({ open: openProp, defaultOpen, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, experimentalSafariThemeAnimation, snapPoints, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, modal, }: DialogProps): React.JSX.Element;
declare function Root({ open: openProp, defaultOpen, onOpenChange, children, shouldScaleBackground, onDrag: onDragProp, onRelease: onReleaseProp, experimentalSafariThemeAnimation, snapPoints, nested, closeThreshold, scrollLockTimeout, dismissible, fadeFromIndex, activeSnapPoint: activeSnapPointProp, setActiveSnapPoint: setActiveSnapPointProp, modal, onClose, }: DialogProps): React.JSX.Element;
declare function NestedRoot({ children, onDrag, onOpenChange }: DialogProps): React.JSX.Element;

@@ -31,0 +33,0 @@ declare const Drawer: {

4

dist/index.js
"use client"
"use client";var ht=Object.create;var ae=Object.defineProperty;var yt=Object.getOwnPropertyDescriptor;var wt=Object.getOwnPropertyNames;var Tt=Object.getPrototypeOf,Et=Object.prototype.hasOwnProperty;var St=(e,n)=>{for(var t in n)ae(e,t,{get:n[t],enumerable:!0})},Ne=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of wt(n))!Et.call(e,r)&&r!==t&&ae(e,r,{get:()=>n[r],enumerable:!(o=yt(n,r))||o.enumerable});return e};var z=(e,n,t)=>(t=e!=null?ht(Tt(e)):{},Ne(n||!e||!e.__esModule?ae(t,"default",{value:e,enumerable:!0}):t,e)),Rt=e=>Ne(ae({},"__esModule",{value:!0}),e);var Xt={};St(Xt,{Drawer:()=>Zt});module.exports=Rt(Xt);var O=z(require("@radix-ui/react-dialog"));var B=z(require("react"));function Le(e){let n=B.default.useRef(e);return B.default.useEffect(()=>{n.current=e}),B.default.useMemo(()=>(...t)=>{var o;return(o=n.current)==null?void 0:o.call(n,...t)},[])}function Dt({defaultProp:e,onChange:n}){let t=B.default.useState(e),[o]=t,r=B.default.useRef(o),i=Le(n);return B.default.useEffect(()=>{r.current!==o&&(i(o),r.current=o)},[o,r,i]),t}function le({prop:e,defaultProp:n,onChange:t=()=>{}}){let[o,r]=Dt({defaultProp:n,onChange:t}),i=e!==void 0,a=i?e:o,m=Le(t),c=B.default.useCallback(v=>{if(i){let f=typeof v=="function"?v(e):v;f!==e&&m(f)}else r(v)},[i,e,r,m]);return[a,c]}var Te=z(require("react")),Ee=Te.default.createContext(void 0),ue=()=>Te.default.useContext(Ee);var R=z(require("react"));function Se(e,{insertAt:n}={}){if(!e||typeof document=="undefined")return;let t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}Se(`[vaul-drawer]{will-change:transform;touch-action:none;animation:show-dialog .5s cubic-bezier(.32,.72,0,1);transform:translateY(var(--snap-point-height, 0))}[vaul-drawer]:after{content:"";position:absolute;top:100%;background:inherit;background-color:inherit;left:0;right:0;height:200%}[vaul-drawer][data-state=closed]{animation:hide-dialog .5s cubic-bezier(.32,.72,0,1) forwards}[vaul-drawer][vaul-closed-by-dragging=true]{animation:fake-animation .5s cubic-bezier(.32,.72,0,1) forwards}[vaul-overlay]:not([vaul-snap-points="true"]){animation:show-overlay .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay="true"]):not([data-state="closed"]){opacity:0}[vaul-overlay][vaul-snap-points-overlay=true]{opacity:1}[vaul-overlay][vaul-theme-transition=true]{animation:show-theme-overlay .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][data-state=closed]:not([vaul-snap-points="true"]),[vaul-overlay][data-state=closed][vaul-snap-points-overlay=true]{animation:hide-overlay .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][vaul-theme-transition=true][data-state=closed]{animation:hide-theme-overlay .5s cubic-bezier(.32,.72,0,1) forwards}@keyframes fake-animation{}@keyframes show-dialog{0%{transform:translateY(100%)}to{transform:translateY(var(--snap-point-height, 0))}}@keyframes hide-dialog{0%{transform:translateY(var(--hide-from, 0))}to{transform:translateY(var(--hide-to, 100%))}}@keyframes show-overlay{0%{opacity:0}to{opacity:1}}@keyframes hide-overlay{0%{opacity:var(--opacity-from, 1)}to{opacity:0}}@keyframes show-theme-overlay{0%{background:var(--vaul-overlay-background-start)}to{background:var(--vaul-overlay-background-end)}}@keyframes hide-theme-overlay{0%{background:var(--vaul-overlay-background-end)}to{background:var(--vaul-overlay-background-start)}}@media (hover: hover) and (pointer: fine){[vaul-drawer]{user-select:none}}
`);var me=require("react"),Mt=typeof window!="undefined"?me.useLayoutEffect:me.useEffect;function Me(...e){return(...n)=>{for(let t of e)typeof t=="function"&&t(...n)}}function Ct(){return Ce(/^Mac/)}function xt(){return Ce(/^iPhone/)}function Fe(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function It(){return Ce(/^iPad/)||Ct()&&navigator.maxTouchPoints>1}function Q(){return xt()||It()}function Ce(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var Re=typeof document!="undefined"&&window.visualViewport;function $e(e){let n=window.getComputedStyle(e);return/(auto|scroll)/.test(n.overflow+n.overflowX+n.overflowY)}function Ye(e){for($e(e)&&(e=e.parentElement);e&&!$e(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}var Ot=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),se=0,De;function ke(e={}){let{isDisabled:n}=e;Mt(()=>{if(!n)return se++,se===1&&(Q()?De=Ht():De=At()),()=>{se--,se===0&&De()}},[n])}function At(){return Me(ce(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),ce(document.documentElement,"overflow","hidden"))}function Ht(){let e,n=0,t=f=>{e=Ye(f.target),!(e===document.documentElement&&e===document.body)&&(n=f.changedTouches[0].pageY)},o=f=>{if(!e||e===document.documentElement||e===document.body){f.preventDefault();return}let l=f.changedTouches[0].pageY,A=e.scrollTop,D=e.scrollHeight-e.clientHeight;D!==0&&((A<=0&&l>n||A>=D&&l<n)&&f.preventDefault(),n=l)},r=f=>{let l=f.target;fe(l)&&l!==document.activeElement&&(f.preventDefault(),l.style.transform="translateY(-2000px)",l.focus(),requestAnimationFrame(()=>{l.style.transform=""}))},i=f=>{let l=f.target;fe(l)&&(l.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{l.style.transform="",Re&&(Re.height<window.innerHeight?requestAnimationFrame(()=>{Pe(l)}):Re.addEventListener("resize",()=>Pe(l),{once:!0}))}))},a=()=>{window.scrollTo(0,0)},m=window.pageXOffset,c=window.pageYOffset,v=Me(ce(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),ce(document.documentElement,"overflow","hidden"));window.scrollTo(0,0);let M=Me(J(document,"touchstart",t,{passive:!1,capture:!0}),J(document,"touchmove",o,{passive:!1,capture:!0}),J(document,"touchend",r,{passive:!1,capture:!0}),J(document,"focus",i,!0),J(window,"scroll",a));return()=>{v(),M(),window.scrollTo(m,c)}}function ce(e,n,t){let o=e.style[n];return e.style[n]=t,()=>{e.style[n]=o}}function J(e,n,t,o){return e.addEventListener(n,t,o),()=>{e.removeEventListener(n,t,o)}}function Pe(e){let n=document.scrollingElement||document.documentElement;for(;e&&e!==n;){let t=Ye(e);if(t!==document.documentElement&&t!==document.body&&t!==e){let o=t.getBoundingClientRect().top,r=e.getBoundingClientRect().top,i=e.getBoundingClientRect().bottom,a=t.getBoundingClientRect().bottom;i>a&&(t.scrollTop+=r-o)}e=t.parentElement}}function fe(e){return e instanceof HTMLInputElement&&!Ot.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}var Ve=z(require("react"));function Nt(e,n){typeof e=="function"?e(n):e!=null&&(e.current=n)}function Lt(...e){return n=>e.forEach(t=>Nt(t,n))}function xe(...e){return Ve.useCallback(Lt(...e),e)}var N=z(require("react"));var $t=4,Pt=.001,Ft=1e-7,Yt=10,Z=11,de=1/(Z-1),kt=typeof Float32Array=="function";function ze(e,n){return 1-3*n+3*e}function Be(e,n){return 3*n-6*e}function je(e){return 3*e}function pe(e,n,t){return((ze(n,t)*e+Be(n,t))*e+je(n))*e}function We(e,n,t){return 3*ze(n,t)*e*e+2*Be(n,t)*e+je(n)}function Vt(e,n,t,o,r){var i,a,m=0;do a=n+(t-n)/2,i=pe(a,o,r)-e,i>0?t=a:n=a;while(Math.abs(i)>Ft&&++m<Yt);return a}function zt(e,n,t,o){for(var r=0;r<$t;++r){var i=We(n,t,o);if(i===0)return n;var a=pe(n,t,o)-e;n-=a/i}return n}function Bt(e){return e}function Ue(e,n,t,o){if(!(0<=e&&e<=1&&0<=t&&t<=1))throw new Error("bezier x values must be in [0, 1] range");if(e===n&&t===o)return Bt;for(var r=kt?new Float32Array(Z):new Array(Z),i=0;i<Z;++i)r[i]=pe(i*de,e,t);function a(m){for(var c=0,v=1,M=Z-1;v!==M&&r[v]<=m;++v)c+=de;--v;var f=(m-r[v])/(r[v+1]-r[v]),l=c+f*de,A=We(l,e,t);return A>=Pt?zt(m,l,e,t):A===0?l:Vt(m,c,c+de,e,t)}return function(c){return c===0||c===1?c:pe(a(c),n,o)}}var jt=Ue(.32,.72,0,1);function Wt(e){let n=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*(\d*(?:\.\d+)?)\)/);if(!n)throw new Error("Invalid color string");return[Number(n[1]),Number(n[2]),Number(n[3]),Number(n[4])]}function Ut(e,n){let[t,o,r,i]=Wt(e);return[Math.round(i*t+(1-i)*Number(n[0])),Math.round(i*o+(1-i)*Number(n[1])),Math.round(i*r+(1-i)*Number(n[2]))]}function _t(e){return jt(e)}function qt(e,n,t,o){arguments.length<3&&(t=.5);let r=e.slice();for(let i=0;i<3;i++){let a=n[i]-e[i],m=o?e[i]+t*a:e[i]+_t(t)*a;r[i]=Math.round(m),r[i]<0&&(r[i]=0),r[i]>255&&(r[i]=255)}return r}function X(e,n,t,o){let r=1/(t-1),i=[];for(let a=0;a<t;a++)i.push(qt(e,n,r*a,!!o));return i}function _e(e,n,t,o){let[r,i]=N.default.useState([255,255,255]),[a,m]=N.default.useState([153,153,153]),[c,v]=N.default.useState(!1),[M,f]=N.default.useState(null),[l,A]=N.default.useState(null),D=N.default.useMemo(()=>Q()&&Fe()&&o,[o]),L=N.default.useMemo(()=>r&&a?X(r,a,50):null,[a,r]),x=N.default.useMemo(()=>r&&a?X(a,r,50):null,[a,r]),Y=N.default.useMemo(()=>r&&a?X(a,r,50,!0):null,[a,r]);N.default.useEffect(()=>{if(!D)return;let u=getComputedStyle(document.documentElement),E=u.getPropertyValue("--vaul-overlay-background").split(",").map(H=>Number(H)),C=u.getPropertyValue("--vaul-overlay-background-end"),S=Ut(C,E);i(E),m(S)},[D]),N.default.useEffect(()=>{if(D&&!M){let u=document.querySelector('meta[name="theme-color"]');u?f(u.getAttribute("content")):(u=document.createElement("meta"),u.name="theme-color",document.getElementsByTagName("head")[0].appendChild(u)),A(u)}},[M,D]);let d=(0,N.useCallback)(u=>{let E,C;function S(H){E||(E=H);let j=H-E,k=Math.floor(j/10);if(n.current&&u&&!c){if(e.current.style.transform==="translateY(0px)"&&e.current.getAttribute("vaul-clicked-outside")!=="true")return;if(k<u.length){let te=u[k];l==null||l.setAttribute("content",`rgb(${te.join(",")})`),k===u.length-1&&M&&!t&&(l==null||l.setAttribute("content",M)),C=requestAnimationFrame(S)}}}return C=requestAnimationFrame(S),C},[e,t,l,c,M,n]);N.default.useEffect(()=>{if(!D||!L||!x)return;let u=d(t?L:x);return t&&v(!1),()=>{u&&cancelAnimationFrame(u)}},[t,D,d,L,x]);function b(u){let E=document.querySelector('meta[name="theme-color"]');if(!D||!E||!Y)return;let C=Math.floor(u*Y.length);C=Math.max(0,Math.min(Y.length-1,C));let S=Y[C];E.setAttribute("content",`rgb(${S.join(",")})`)}function h(u){let E=document.querySelector('meta[name="theme-color"]');if(!E||!D)return;v(!0);let C=E.getAttribute("content").match(/\d+/g).map(Number),S=X(C,a,50);!u&&r&&(S=X(C,r,50)),d(S)}return{onDrag:b,onRelease:h}}var ge=z(require("react"));var W=null;function qe({isOpen:e,modal:n}){let t=ge.default.useRef(0);function o(){if(W===null){W={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};let{scrollX:i,innerHeight:a}=window;document.body.style.setProperty("position","fixed","important"),document.body.style.top=`${-t.current}px`,document.body.style.left=`${-i}px`,document.body.style.right="0px",setTimeout(()=>requestAnimationFrame(()=>{let m=a-window.innerHeight;m&&t.current>=a&&(document.body.style.top=`${-(t.current+m)}px`)}),300)}}function r(){if(W!==null){let i=-parseInt(document.body.style.top,10),a=-parseInt(document.body.style.left,10);document.body.style.position=W.position,document.body.style.top=W.top,document.body.style.left=W.left,document.body.style.right="unset",requestAnimationFrame(()=>{window.scrollTo(a,i)}),W=null}}ge.default.useEffect(()=>{function i(){t.current=window.scrollY}return i(),window.addEventListener("scroll",i),()=>{window.removeEventListener("scroll",i)}},[]),ge.default.useEffect(()=>{Q()&&(e?(o(),n||setTimeout(()=>{r()},500)):r())},[e])}var K=z(require("react"));var Ge=new WeakMap;function Ke(e){let n=e.getBoundingClientRect();return window.visualViewport?n.top>=0&&n.left>=0&&n.bottom<=window.visualViewport.height+40&&n.right<=window.visualViewport.width:!1}function w(e,n,t=!1){if(!e||!(e instanceof HTMLElement)||!n)return;let o={};Object.entries(n).forEach(([r,i])=>{if(r.startsWith("--")){e.style.setProperty(r,i);return}o[r]=e.style[r],e.style[r]=i}),!t&&Ge.set(e,o)}function ve(e,n){if(!e||!(e instanceof HTMLElement))return;let t=Ge.get(e);if(!t){e.style={};return}n?e.style[n]=t[n]:Object.entries(t).forEach(([o,r])=>{e.style[o]=r})}function ee(e){let n=window.getComputedStyle(e),t=n.transform||n.webkitTransform||n.mozTransform,o=t.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=t.match(/^matrix\((.+)\)$/),o?parseFloat(o[1].split(", ")[5]):null)}function Je(e){return 8*(Math.log(e+1)-2)}var T={DURATION:.5,EASE:[.32,.72,0,1]},be=.4;function Qe({activeSnapPointProp:e,setActiveSnapPointProp:n,snapPoints:t,drawerRef:o,overlayRef:r,fadeFromIndex:i}){let[a,m]=le({prop:e,defaultProp:t==null?void 0:t[0],onChange:n}),c=typeof window!="undefined",v=K.default.useMemo(()=>a===(t==null?void 0:t[t.length-1]),[t,a]),M=t&&t.length>0&&t[i]===a||!t,f=K.default.useMemo(()=>{var d;return(d=t==null?void 0:t.findIndex(b=>b===a))!=null?d:null},[t,a]),l=K.default.useMemo(()=>{var d;return(d=t==null?void 0:t.map(b=>{let h=typeof b=="string",u=0;h&&(u=parseInt(b,10));let E=h?u:c?b*window.innerHeight:0;return c&&window.innerHeight-E}))!=null?d:null},[t]),A=K.default.useMemo(()=>{var d;return(d=l==null?void 0:l[f])!=null?d:null},[l,a]);function D(d){var h,u;let b=(h=l==null?void 0:l.findIndex(E=>E===d))!=null?h:null;w(o.current,{transition:`transform ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,transform:`translateY(${d}px)`}),b!==l.length-1&&b!==i?w(r.current,{transition:`opacity ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,opacity:"0"}):w(r.current,{transition:`opacity ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,opacity:"1"}),m((u=t==null?void 0:t[b])!=null?u:null)}K.default.useEffect(()=>{var d;if(e){let b=(d=t==null?void 0:t.findIndex(h=>h===e))!=null?d:null;D(l[b])}},[e]);function L({draggedDistance:d,closeDrawer:b,velocity:h}){let u=A-d,E=f===i-1,C=f===0;if(E&&w(r.current,{transition:`opacity ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`}),h>2&&d<0){b();return}if(h>2&&d>0){D(l[t.length-1]);return}let S=l==null?void 0:l.reduce((H,j)=>Math.abs(j-u)<Math.abs(H-u)?j:H);if(h>be&&Math.abs(d)<window.innerHeight*.4){let H=d>0?1:-1;if(H>0&&v)return;C&&H<0&&b(),D(l[f+H]);return}D(S)}function x({draggedDistance:d}){var h;let b=A-d;if(b<l[l.length-1]){m((h=t==null?void 0:t[t.length-1])!=null?h:null),w(o.current,{transform:"translateY(0px)"});return}w(o.current,{transform:`translateY(${b}px)`})}function Y(d,b){if(!t)return null;let h=f===i-1;if(f>=i&&b)return 0;if(h&&!b)return 1;if(!M&&!h)return null;let E=h?f+1:f-1,C=h?l[E]-l[E-1]:l[E+1]-l[E],S=d/Math.abs(C);return h?1-S:S}return{isLastSnapPoint:v,activeSnapPoint:a,shouldFade:M,getPercentageDragged:Y,setActiveSnapPoint:m,activeSnapPointIndex:f,onRelease:L,onDrag:x,snapPointsOffset:l}}var Gt=.25,Kt=500,Jt=501,Ze=8,U=16,Xe=26;function et({open:e,defaultOpen:n,onOpenChange:t,children:o,shouldScaleBackground:r,onDrag:i,onRelease:a,experimentalSafariThemeAnimation:m,snapPoints:c,closeThreshold:v=Gt,scrollLockTimeout:M=Kt,dismissible:f=!0,fadeFromIndex:l=(c==null?void 0:c.length)-1,activeSnapPoint:A,setActiveSnapPoint:D,modal:L=!0}){let[x=!1,Y]=le({prop:e,defaultProp:n,onChange:t}),[d,b]=R.default.useState(!1),[h,u]=R.default.useState(!0),[E,C]=R.default.useState(!1),S=R.default.useRef(null),H=R.default.useRef(null),j=R.default.useRef(null),k=R.default.useRef(null),te=R.default.useRef(null),he=R.default.useRef(0),_=R.default.useRef(!1),Ie=R.default.useRef(0),p=R.default.useRef(null),{onDrag:rt,onRelease:ne}=_e(p,S,x,m),{activeSnapPoint:ot,activeSnapPointIndex:ye,setActiveSnapPoint:it,onRelease:at,snapPointsOffset:Oe,onDrag:lt,shouldFade:we,getPercentageDragged:ut}=Qe({snapPoints:c,activeSnapPointProp:A,setActiveSnapPointProp:D,drawerRef:p,fadeFromIndex:l,overlayRef:S});ke({isDisabled:!x||d||h||!L||E}),qe({isOpen:x,modal:L});function re(){return(window.innerWidth-Xe)/window.innerWidth}function st(s){f&&(p.current&&!p.current.contains(s.target)||(b(!0),H.current=new Date,s.target.setPointerCapture(s.pointerId),he.current=s.clientY))}function Ae(s,g){let y=s,$=new Date,P=window.getSelection().toString(),I=p.current?ee(p.current):null;if(P.length>0)return!1;if(k.current&&$.getTime()-k.current.getTime()<M&&I===0)return k.current=new Date,!1;for(;y;){if(y.scrollHeight>y.clientHeight){if(y.role==="dialog"||y.getAttribute("vaul-drawer"))return!0;if(y.scrollTop!==0)return k.current=new Date,!1;if(g&&y!==document.body&&!I)return k.current=new Date,!1}y=y.parentNode}return!0}function ct(s){var g;if(d){let y=he.current-s.clientY,$=y>0;if(!Ae(s.target,$))return;let P=((g=p.current)==null?void 0:g.getBoundingClientRect().height)||0;if(w(p.current,{transition:"none"}),w(S.current,{transition:"none"}),c&&lt({draggedDistance:y}),y>0&&!c){let G=Je(y);w(p.current,{transform:`translateY(${Math.min(G*-1,0)}px)`});return}let I=Math.abs(y),V=document.querySelector("[vaul-drawer-wrapper]"),F=I/P,ie=ut(I,$);ie!==null&&(F=ie);let q=1-F;if((we||ye===l-1)&&(rt(F),i==null||i(s,F),w(S.current,{opacity:`${q}`,transition:"none"},!0)),V&&S.current&&r){let G=Math.min(re()+F*(1-re()),1),vt=8-F*8,bt=Math.max(0,14-F*14);w(V,{borderRadius:`${vt}px`,transform:`scale(${G}) translateY(${bt}px)`,transition:"none"},!0)}c||w(p.current,{transform:`translateY(${I}px)`})}}R.default.useEffect(()=>{function s(){var y,$,P;if(!p.current)return;let g=document.activeElement;if(!Ke(g)&&fe(g)||_.current){let I=window.visualViewport.height,V=window.innerHeight-I,F=((y=p.current)==null?void 0:y.getBoundingClientRect().height)||0,ie=($=p.current)==null?void 0:$.getBoundingClientRect().top;if(Math.abs(Ie.current-V)>60&&(_.current=!_.current),c&&c.length>0){let q=Oe[ye];V+=q}if(Ie.current=V,F>I||_.current){let q=(P=p.current)==null?void 0:P.getBoundingClientRect().height,G=q;q>I&&(G=I-Xe),p.current.style.height=`${Math.max(G,I-ie)}px`}else p.current.style.height="initial";c&&c.length>0&&!_.current?p.current.style.bottom="0px":p.current.style.bottom=`${Math.max(V,0)}px`}}return window.visualViewport.addEventListener("resize",s),()=>window.visualViewport.removeEventListener("resize",s)},[ye]);function oe(){var s;if(f&&(p.current.setAttribute("vaul-closed-by-dragging","true"),Y(!1),p.current)){w(p.current,{transform:"translateY(100%)",transition:`transform ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`});let g=((s=S.current)==null?void 0:s.style.opacity)||1;w(S.current,{"--opacity-from":`${we?g:0}`})}}R.default.useEffect(()=>{if(!x&&r){let s=setTimeout(()=>{ve(document.body)},200);return()=>clearTimeout(s)}},[x,r]);function He(){let s=document.querySelector("[vaul-drawer-wrapper]"),g=ee(p.current);w(p.current,{transform:"translateY(0px)",transition:`transform ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`}),w(S.current,{transition:`opacity ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,opacity:"1"}),r&&g>0&&x&&w(s,{borderRadius:`${Ze}px`,overflow:"hidden",transform:`scale(${re()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${T.DURATION}s`,transitionTimingFunction:`cubic-bezier(${T.EASE.join(",")})`},!0)}function ft(s){var F;if(!d)return;b(!1),j.current=new Date;let g=ee(p.current);if(!Ae(s.target,!1)||!g||Number.isNaN(g)||H.current===null)return;let y=s.clientY,$=j.current.getTime()-H.current.getTime(),P=he.current-y,I=Math.abs(P)/$;if(I>.05&&(C(!0),setTimeout(()=>{C(!1)},200)),c){at({draggedDistance:P,closeDrawer:oe,velocity:I});return}if(P>0){He(),a==null||a(s,!0),ne(!0);return}if(I>be){oe(),a==null||a(s,!1),ne(!1);return}let V=Math.min(((F=p.current)==null?void 0:F.getBoundingClientRect().height)||0,window.innerHeight);if(g>=V*v){oe(),a==null||a(s,!1),ne(!1);return}a==null||a(s,!0),ne(!0),He()}function mt(s){let g=document.querySelector("[vaul-drawer-wrapper]");!g||!r||(s.animationName==="show-dialog"?(w(document.body,{background:"black"},!0),w(g,{borderRadius:`${Ze}px`,overflow:"hidden",transform:`scale(${re()}) translateY(calc(env(safe-area-inset-top) + 14px))`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${T.DURATION}s`,transitionTimingFunction:`cubic-bezier(${T.EASE.join(",")})`})):(s.animationName==="hide-dialog"||s.animationName==="fake-animation")&&(ve(g,"transform"),ve(g,"borderRadius"),w(g,{transitionProperty:"transform, border-radius",transitionDuration:`${T.DURATION}s`,transitionTimingFunction:`cubic-bezier(${T.EASE.join(",")})`})))}function dt(s){let g=s?(window.innerWidth-U)/window.innerWidth:1,y=s?-U:0;window.clearTimeout(te.current),w(p.current,{transition:`transform ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,transform:`scale(${g}) translateY(${y}px)`}),s||(te.current=setTimeout(()=>{w(p.current,{transition:"none",transform:`translateY(${ee(p.current)}px)`})},500))}function pt(s,g){if(g<0)return;let y=(window.innerWidth-U)/window.innerWidth,$=y+g*(1-y),P=-U+g*U;w(p.current,{transform:`scale(${$}) translateY(${P}px)`,transition:"none"})}function gt(s,g){let y=g?(window.innerWidth-U)/window.innerWidth:1,$=g?-U:0;g&&w(p.current,{transition:`transform ${T.DURATION}s cubic-bezier(${T.EASE.join(",")})`,transform:`scale(${y}) translateY(${$}px)`})}return R.default.createElement(O.Root,{open:x,onOpenChange:s=>{!s&&c&&oe(),Y(s)},modal:L},R.default.createElement(Ee.Provider,{value:{activeSnapPoint:ot,snapPoints:c,setActiveSnapPoint:it,drawerRef:p,overlayRef:S,onAnimationStart:mt,onPress:st,onRelease:ft,onDrag:ct,dismissible:f,isOpen:x,shouldFade:we,onNestedDrag:pt,onNestedOpenChange:dt,onNestedRelease:gt,keyboardIsOpen:_,setIsAnimating:u,modal:L,snapPointsOffset:Oe,experimentalSafariThemeAnimation:m}},o))}var tt=R.default.forwardRef(function({children:e,style:n,...t},o){let{overlayRef:r,snapPoints:i,onRelease:a,experimentalSafariThemeAnimation:m,shouldFade:c,isOpen:v}=ue(),M=xe(o,r),f=i&&i.length>0;return R.default.createElement(O.Overlay,{onMouseUp:a,ref:M,"vaul-overlay":"","vaul-snap-points":v&&f?"true":"false","vaul-theme-transition":m?"true":"false","vaul-snap-points-overlay":v&&c?"true":"false",...t})});tt.displayName="Drawer.Overlay";var nt=R.default.forwardRef(function({children:e,onOpenAutoFocus:n,onPointerDownOutside:t,onAnimationEnd:o,style:r,...i},a){let{drawerRef:m,onPress:c,onRelease:v,onAnimationStart:M,onDrag:f,dismissible:l,isOpen:A,keyboardIsOpen:D,setIsAnimating:L,snapPointsOffset:x,setActiveSnapPoint:Y,snapPoints:d}=ue(),b=xe(a,m),h=R.default.useRef(null);return R.default.createElement(O.Content,{onAnimationStart:u=>{window.clearTimeout(h.current),L(!0),h.current=setTimeout(()=>{L(!1),o==null||o(A),d&&!A&&Y(d[0])},Jt),M(u)},onPointerDown:c,onPointerUp:v,onPointerMove:f,onOpenAutoFocus:u=>{n?n(u):u.preventDefault()},onPointerDownOutside:u=>{D.current&&(D.current=!1,w(m.current,{"--hide-to":"200%"})),l||u.preventDefault(),m.current.setAttribute("vaul-clicked-outside","true"),t==null||t(u)},ref:b,style:x?{"--snap-point-height":`${x[0]}px`,...r}:r,...i,"vaul-drawer":""},e)});nt.displayName="Drawer.Content";function Qt({children:e,onDrag:n,onOpenChange:t}){let{onNestedDrag:o,onNestedOpenChange:r,onNestedRelease:i}=ue();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return R.default.createElement(et,{onDrag:(a,m)=>{o(a,m),n==null||n(a,m)},onOpenChange:a=>{r(a),t==null||t(a)},onRelease:i},e)}var Zt=Object.assign({},{Root:et,NestedRoot:Qt,Content:nt,Overlay:tt,Trigger:O.Trigger,Portal:O.Portal,Close:O.Close,Title:O.Title,Description:O.Description});0&&(module.exports={Drawer});
"use client";var yt=Object.create;var ce=Object.defineProperty;var Et=Object.getOwnPropertyDescriptor;var Tt=Object.getOwnPropertyNames;var wt=Object.getPrototypeOf,St=Object.prototype.hasOwnProperty;var Rt=(e,n)=>{for(var t in n)ce(e,t,{get:n[t],enumerable:!0})},Ve=(e,n,t,o)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of Tt(n))!St.call(e,r)&&r!==t&&ce(e,r,{get:()=>n[r],enumerable:!(o=Et(n,r))||o.enumerable});return e};var j=(e,n,t)=>(t=e!=null?yt(wt(e)):{},Ve(n||!e||!e.__esModule?ce(t,"default",{value:e,enumerable:!0}):t,e)),Dt=e=>Ve(ce({},"__esModule",{value:!0}),e);var en={};Rt(en,{Drawer:()=>Xt});module.exports=Dt(en);var H=j(require("@radix-ui/react-dialog"));var z=j(require("react"));function Be(e){let n=z.default.useRef(e);return z.default.useEffect(()=>{n.current=e}),z.default.useMemo(()=>(...t)=>{var o;return(o=n.current)==null?void 0:o.call(n,...t)},[])}function Ct({defaultProp:e,onChange:n}){let t=z.default.useState(e),[o]=t,r=z.default.useRef(o),i=Be(n);return z.default.useEffect(()=>{r.current!==o&&(i(o),r.current=o)},[o,r,i]),t}function fe({prop:e,defaultProp:n,onChange:t=()=>{}}){let[o,r]=Ct({defaultProp:n,onChange:t}),i=e!==void 0,a=i?e:o,f=Be(t),u=z.default.useCallback(E=>{if(i){let l=typeof E=="function"?E(e):E;l!==e&&f(l)}else r(E)},[i,e,r,f]);return[a,u]}var De=j(require("react")),Ce=De.default.createContext({drawerRef:{current:null},overlayRef:{current:null},scaleBackground:()=>{},onPress:()=>{},onRelease:()=>{},onDrag:()=>{},onNestedDrag:()=>{},onNestedOpenChange:()=>{},onNestedRelease:()=>{},dismissible:!1,isOpen:!1,keyboardIsOpen:{current:!1},experimentalSafariThemeAnimation:!1,snapPointsOffset:null,snapPoints:null,modal:!1,shouldFade:!1,activeSnapPoint:null,setActiveSnapPoint:()=>{},visible:!1,closeDrawer:()=>{},setVisible:()=>{}}),de=()=>De.default.useContext(Ce);var R=j(require("react"));function Me(e,{insertAt:n}={}){if(!e||typeof document=="undefined")return;let t=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",n==="top"&&t.firstChild?t.insertBefore(o,t.firstChild):t.appendChild(o),o.styleSheet?o.styleSheet.cssText=e:o.appendChild(document.createTextNode(e))}Me(`[vaul-drawer]{touch-action:none;transform:translate3d(0,100%,0);transition:transform .5s cubic-bezier(.32,.72,0,1)}[vaul-drawer][vaul-drawer-visible=true]{transform:translate3d(0,var(--snap-point-height, 0),0)}[vaul-overlay]{opacity:0;transition:opacity .5s cubic-bezier(.32,.72,0,1)}[vaul-overlay][vaul-drawer-visible=true]{opacity:1}[vaul-drawer]:after{content:"";position:absolute;top:100%;background:inherit;background-color:inherit;left:0;right:0;height:200%}[vaul-overlay][vaul-snap-points=true]:not([vaul-snap-points-overlay="true"]):not([data-state="closed"]){opacity:0}[vaul-overlay][vaul-snap-points-overlay=true]:not([vaul-drawer-visible="false"]){opacity:1}@keyframes fake-animation{}@keyframes show-theme-overlay{0%{background:var(--vaul-overlay-background-start)}to{background:var(--vaul-overlay-background-end)}}@keyframes hide-theme-overlay{0%{background:var(--vaul-overlay-background-end)}to{background:var(--vaul-overlay-background-start)}}@media (hover: hover) and (pointer: fine){[vaul-drawer]{user-select:none}}
`);var ge=require("react"),Mt=typeof window!="undefined"?ge.useLayoutEffect:ge.useEffect;function Ie(...e){return(...n)=>{for(let t of e)typeof t=="function"&&t(...n)}}function xt(){return He(/^Mac/)}function Ot(){return He(/^iPhone/)}function Ue(){return/^((?!chrome|android).)*safari/i.test(navigator.userAgent)}function It(){return He(/^iPad/)||xt()&&navigator.maxTouchPoints>1}function ee(){return Ot()||It()}function He(e){return typeof window!="undefined"&&window.navigator!=null?e.test(window.navigator.platform):void 0}var xe=typeof document!="undefined"&&window.visualViewport;function je(e){let n=window.getComputedStyle(e);return/(auto|scroll)/.test(n.overflow+n.overflowX+n.overflowY)}function We(e){for(je(e)&&(e=e.parentElement);e&&!je(e);)e=e.parentElement;return e||document.scrollingElement||document.documentElement}var Ht=new Set(["checkbox","radio","range","color","file","image","button","submit","reset"]),me=0,Oe;function Ye(e={}){let{isDisabled:n}=e;Mt(()=>{if(!n)return me++,me===1&&(ee()?Oe=At():Oe=Nt()),()=>{me--,me===0&&Oe()}},[n])}function Nt(){return Ie(be(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),be(document.documentElement,"overflow","hidden"))}function At(){let e,n=0,t=l=>{e=We(l.target),!(e===document.documentElement&&e===document.body)&&(n=l.changedTouches[0].pageY)},o=l=>{if(!e||e===document.documentElement||e===document.body){l.preventDefault();return}let s=l.changedTouches[0].pageY,D=e.scrollTop,x=e.scrollHeight-e.clientHeight;x!==0&&((D<=0&&s>n||D>=x&&s<n)&&l.preventDefault(),n=s)},r=l=>{let s=l.target;pe(s)&&s!==document.activeElement&&(l.preventDefault(),s.style.transform="translateY(-2000px)",s.focus(),requestAnimationFrame(()=>{s.style.transform=""}))},i=l=>{let s=l.target;pe(s)&&(s.style.transform="translateY(-2000px)",requestAnimationFrame(()=>{s.style.transform="",xe&&(xe.height<window.innerHeight?requestAnimationFrame(()=>{ze(s)}):xe.addEventListener("resize",()=>ze(s),{once:!0}))}))},a=()=>{window.scrollTo(0,0)},f=window.pageXOffset,u=window.pageYOffset,E=Ie(be(document.documentElement,"paddingRight",`${window.innerWidth-document.documentElement.clientWidth}px`),be(document.documentElement,"overflow","hidden"));window.scrollTo(0,0);let g=Ie(X(document,"touchstart",t,{passive:!1,capture:!0}),X(document,"touchmove",o,{passive:!1,capture:!0}),X(document,"touchend",r,{passive:!1,capture:!0}),X(document,"focus",i,!0),X(window,"scroll",a));return()=>{E(),g(),window.scrollTo(f,u)}}function be(e,n,t){let o=e.style[n];return e.style[n]=t,()=>{e.style[n]=o}}function X(e,n,t,o){return e.addEventListener(n,t,o),()=>{e.removeEventListener(n,t,o)}}function ze(e){let n=document.scrollingElement||document.documentElement;for(;e&&e!==n;){let t=We(e);if(t!==document.documentElement&&t!==document.body&&t!==e){let o=t.getBoundingClientRect().top,r=e.getBoundingClientRect().top,i=e.getBoundingClientRect().bottom,a=t.getBoundingClientRect().bottom;i>a&&(t.scrollTop+=r-o)}e=t.parentElement}}function pe(e){return e instanceof HTMLInputElement&&!Ht.has(e.type)||e instanceof HTMLTextAreaElement||e instanceof HTMLElement&&e.isContentEditable}var _e=j(require("react"));function Lt(e,n){typeof e=="function"?e(n):e!=null&&(e.current=n)}function $t(...e){return n=>e.forEach(t=>Lt(t,n))}function Ne(...e){return _e.useCallback($t(...e),e)}var N=j(require("react"));var Pt=4,Ft=.001,kt=1e-7,Vt=10,te=11,ve=1/(te-1),Bt=typeof Float32Array=="function";function qe(e,n){return 1-3*n+3*e}function Ge(e,n){return 3*n-6*e}function Ke(e){return 3*e}function he(e,n,t){return((qe(n,t)*e+Ge(n,t))*e+Ke(n))*e}function Je(e,n,t){return 3*qe(n,t)*e*e+2*Ge(n,t)*e+Ke(n)}function jt(e,n,t,o,r){var i,a,f=0;do a=n+(t-n)/2,i=he(a,o,r)-e,i>0?t=a:n=a;while(Math.abs(i)>kt&&++f<Vt);return a}function zt(e,n,t,o){for(var r=0;r<Pt;++r){var i=Je(n,t,o);if(i===0)return n;var a=he(n,t,o)-e;n-=a/i}return n}function Ut(e){return e}function Qe(e,n,t,o){if(!(0<=e&&e<=1&&0<=t&&t<=1))throw new Error("bezier x values must be in [0, 1] range");if(e===n&&t===o)return Ut;for(var r=Bt?new Float32Array(te):new Array(te),i=0;i<te;++i)r[i]=he(i*ve,e,t);function a(f){for(var u=0,E=1,g=te-1;E!==g&&r[E]<=f;++E)u+=ve;--E;var l=(f-r[E])/(r[E+1]-r[E]),s=u+l*ve,D=Je(s,e,t);return D>=Ft?zt(f,s,e,t):D===0?s:jt(f,u,u+ve,e,t)}return function(u){return u===0||u===1?u:he(a(u),n,o)}}var Wt=Qe(.32,.72,0,1);function Yt(e){let n=e.match(/rgba?\((\d+),\s*(\d+),\s*(\d+),\s*(\d*(?:\.\d+)?)\)/);if(!n)throw new Error("Invalid color string");return[Number(n[1]),Number(n[2]),Number(n[3]),Number(n[4])]}function _t(e,n){let[t,o,r,i]=Yt(e);return[Math.round(i*t+(1-i)*Number(n[0])),Math.round(i*o+(1-i)*Number(n[1])),Math.round(i*r+(1-i)*Number(n[2]))]}function qt(e){return Wt(e)}function Gt(e,n,t,o){arguments.length<3&&(t=.5);let r=e.slice();for(let i=0;i<3;i++){let a=n[i]-e[i],f=o?e[i]+t*a:e[i]+qt(t)*a;r[i]=Math.round(f),r[i]<0&&(r[i]=0),r[i]>255&&(r[i]=255)}return r}function ne(e,n,t,o){let r=1/(t-1),i=[];for(let a=0;a<t;a++)i.push(Gt(e,n,r*a,!!o));return i}function Ze(e,n,t,o){let[r,i]=N.default.useState([255,255,255]),[a,f]=N.default.useState([153,153,153]),[u,E]=N.default.useState(!1),[g,l]=N.default.useState(null),[s,D]=N.default.useState(null),x=N.default.useMemo(()=>ee()&&Ue()&&o,[o]),B=N.default.useMemo(()=>r&&a?ne(r,a,50):null,[a,r]),P=N.default.useMemo(()=>r&&a?ne(a,r,50):null,[a,r]),p=N.default.useMemo(()=>r&&a?ne(a,r,50,!0):null,[a,r]);N.default.useEffect(()=>{if(!x)return;let m=getComputedStyle(document.documentElement),S=m.getPropertyValue("--vaul-overlay-background").split(",").map(F=>Number(F)),C=m.getPropertyValue("--vaul-overlay-background-end"),M=_t(C,S);i(S),f(M)},[x]),N.default.useEffect(()=>{if(x&&!g){let m=document.querySelector('meta[name="theme-color"]');m?l(m.getAttribute("content")):(m=document.createElement("meta"),m.name="theme-color",document.getElementsByTagName("head")[0].appendChild(m)),D(m)}},[g,x]);let c=(0,N.useCallback)(m=>{let S,C;function M(F){S||(S=F);let k=F-S,U=Math.floor(k/10);if(n.current&&m&&!u&&e.current){if(e.current.style.transform==="translateY(0px)"&&e.current.getAttribute("vaul-clicked-outside")!=="true")return;if(U<m.length){let oe=m[U];s==null||s.setAttribute("content",`rgb(${oe.join(",")})`),U===m.length-1&&g&&!t&&(s==null||s.setAttribute("content",g)),C=requestAnimationFrame(M)}}}return C=requestAnimationFrame(M),C},[e,t,s,u,g,n]);N.default.useEffect(()=>{if(!x||!B||!P)return;let m=c(t?B:P);return t&&E(!1),()=>{m&&cancelAnimationFrame(m)}},[t,x,c,B,P]);function T(m){let S=document.querySelector('meta[name="theme-color"]');if(!x||!S||!p)return;let C=Math.floor(m*p.length);C=Math.max(0,Math.min(p.length-1,C));let M=p[C];S.setAttribute("content",`rgb(${M.join(",")})`)}function O(m){let S=document.querySelector('meta[name="theme-color"]');if(!S||!x)return;E(!0);let C=S.getAttribute("content").match(/\d+/g).map(Number),M=ne(C,a,50);!m&&r&&(M=ne(C,r,50)),c(M)}return{onDrag:T,onRelease:O}}var ye=j(require("react"));var Y=null;function Xe({isOpen:e,modal:n,nested:t}){let o=ye.default.useRef(0);function r(){if(Y===null){Y={position:document.body.style.position,top:document.body.style.top,left:document.body.style.left};let{scrollX:a,innerHeight:f}=window;document.body.style.setProperty("position","fixed","important"),document.body.style.top=`${-o.current}px`,document.body.style.left=`${-a}px`,document.body.style.right="0px",setTimeout(()=>requestAnimationFrame(()=>{let u=f-window.innerHeight;u&&o.current>=f&&(document.body.style.top=`${-(o.current+u)}px`)}),300)}}function i(){if(Y!==null){let a=-parseInt(document.body.style.top,10),f=-parseInt(document.body.style.left,10);document.body.style.position=Y.position,document.body.style.top=Y.top,document.body.style.left=Y.left,document.body.style.right="unset",requestAnimationFrame(()=>{window.scrollTo(f,a)}),Y=null}}ye.default.useEffect(()=>{function a(){o.current=window.scrollY}return a(),window.addEventListener("scroll",a),()=>{window.removeEventListener("scroll",a)}},[]),ye.default.useEffect(()=>{!ee()||t||(e?(r(),n||setTimeout(()=>{i()},500)):i())},[e])}var _=j(require("react"));var et=new WeakMap;function w(e,n,t=!1){if(!e||!(e instanceof HTMLElement)||!n)return;let o={};Object.entries(n).forEach(([r,i])=>{if(r.startsWith("--")){e.style.setProperty(r,i);return}o[r]=e.style[r],e.style[r]=i}),!t&&et.set(e,o)}function Ee(e,n){if(!e||!(e instanceof HTMLElement))return;let t=et.get(e);if(!t){e.style={};return}n?e.style[n]=t[n]:Object.entries(t).forEach(([o,r])=>{e.style[o]=r})}function re(e){let n=window.getComputedStyle(e),t=n.transform||n.webkitTransform||n.mozTransform,o=t.match(/^matrix3d\((.+)\)$/);return o?parseFloat(o[1].split(", ")[13]):(o=t.match(/^matrix\((.+)\)$/),o?parseFloat(o[1].split(", ")[5]):null)}function tt(e){return 8*(Math.log(e+1)-2)}var y={DURATION:.5,EASE:[.32,.72,0,1]},Te=.4;function nt({activeSnapPointProp:e,setActiveSnapPointProp:n,snapPoints:t,drawerRef:o,overlayRef:r,fadeFromIndex:i}){let[a,f]=fe({prop:e,defaultProp:t==null?void 0:t[0],onChange:n}),u=_.default.useMemo(()=>a===(t==null?void 0:t[t.length-1]),[t,a]),E=t&&t.length>0&&i&&t[i]===a||!t,g=_.default.useMemo(()=>{var p;return(p=t==null?void 0:t.findIndex(c=>c===a))!=null?p:null},[t,a]),l=_.default.useMemo(()=>{var p;return(p=t==null?void 0:t.map(c=>{let T=typeof window!="undefined",O=typeof c=="string",m=0;O&&(m=parseInt(c,10));let S=O?m:T?c*window.innerHeight:0;return T?window.innerHeight-S:S}))!=null?p:[]},[t]),s=_.default.useMemo(()=>g!==null?l==null?void 0:l[g]:null,[l,g]),D=_.default.useCallback(p=>{var T;let c=(T=l==null?void 0:l.findIndex(O=>O===p))!=null?T:null;w(o.current,{transition:`transform ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,transform:`translate3d(0, ${p}px, 0)`}),l&&c!==l.length-1&&c!==i?w(r.current,{transition:`opacity ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,opacity:"0"}):w(r.current,{transition:`opacity ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,opacity:"1"}),f(c!==null?t==null?void 0:t[c]:null)},[o,t,l,i,r,f]);_.default.useEffect(()=>{var p;if(e){let c=(p=t==null?void 0:t.findIndex(T=>T===e))!=null?p:null;l&&c&&l[c]&&D(l[c])}},[e,t,l,D]);function x({draggedDistance:p,closeDrawer:c,velocity:T}){if(typeof s!="number"||i===void 0)return;let O=s-p,m=g===i-1,S=g===0;if(m&&w(r.current,{transition:`opacity ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`}),T>2&&p<0){c();return}if(T>2&&p>0&&l&&t){D(l[t.length-1]);return}let C=l==null?void 0:l.reduce((M,F)=>typeof M!="number"||typeof F!="number"?M:Math.abs(F-O)<Math.abs(M-O)?F:M);if(T>Te&&Math.abs(p)<window.innerHeight*.4){let M=p>0?1:-1;if(M>0&&u||(S&&M<0&&c(),g===null))return;D(l[g+M]);return}D(C)}function B({draggedDistance:p}){var T;if(s===null)return;let c=s-p;if(c<l[l.length-1]){f((T=t==null?void 0:t[t.length-1])!=null?T:null),w(o.current,{transform:"translate3d(0, 0px, 0)"});return}w(o.current,{transform:`translate3d(0, ${c}px, 0)`})}function P(p,c){if(!t||!g||!l||i===void 0)return null;let T=g===i-1;if(g>=i&&c)return 0;if(T&&!c)return 1;if(!E&&!T)return null;let m=T?g+1:g-1,S=T?l[m]-l[m-1]:l[m+1]-l[m],C=p/Math.abs(S);return T?1-C:C}return{isLastSnapPoint:u,activeSnapPoint:a,shouldFade:E,getPercentageDragged:P,setActiveSnapPoint:f,activeSnapPointIndex:g,onRelease:x,onDrag:B,snapPointsOffset:l}}var Kt=.25,Jt=500,Qt=501,rt=8,q=16,ot=26;function it({open:e,defaultOpen:n,onOpenChange:t,children:o,shouldScaleBackground:r,onDrag:i,onRelease:a,experimentalSafariThemeAnimation:f,snapPoints:u,nested:E,closeThreshold:g=Kt,scrollLockTimeout:l=Jt,dismissible:s=!0,fadeFromIndex:D=u&&(u==null?void 0:u.length)-1,activeSnapPoint:x,setActiveSnapPoint:B,modal:P=!0,onClose:p}){let[c=!1,T]=fe({prop:e,defaultProp:n,onChange:t}),[O,m]=R.default.useState(!1),[S,C]=R.default.useState(!1),[M,F]=R.default.useState(!1),k=R.default.useRef(null),U=R.default.useRef(null),oe=R.default.useRef(null),Q=R.default.useRef(null),we=R.default.useRef(null),Se=R.default.useRef(0),G=R.default.useRef(!1),Ae=R.default.useRef(0),b=R.default.useRef(null),{onDrag:ut,onRelease:ie}=Ze(b,k,c,f),{activeSnapPoint:st,activeSnapPointIndex:ae,setActiveSnapPoint:Le,onRelease:ct,snapPointsOffset:le,onDrag:ft,shouldFade:$e,getPercentageDragged:dt}=nt({snapPoints:u,activeSnapPointProp:x,setActiveSnapPointProp:B,drawerRef:b,fadeFromIndex:D,overlayRef:k});Ye({isDisabled:!c||S||!P||M}),Xe({isOpen:c,modal:P,nested:E});function ue(){return(window.innerWidth-ot)/window.innerWidth}function mt(d){s&&(b.current&&!b.current.contains(d.target)||(C(!0),U.current=new Date,d.target.setPointerCapture(d.pointerId),Se.current=d.clientY))}function Pe(d,v){var V;let h=d,L=new Date,$=(V=window.getSelection())==null?void 0:V.toString(),A=b.current?re(b.current):null;if($&&$.length>0)return!1;if(Q.current&&L.getTime()-Q.current.getTime()<l&&A===0)return Q.current=new Date,!1;for(;h;){if(h.scrollHeight>h.clientHeight){if(h.getAttribute("role")==="dialog")return!0;if(h.scrollTop!==0)return Q.current=new Date,!1;if(v&&h!==document.body&&!A&&A!==0)return Q.current=new Date,!1}h=h.parentNode}return!0}function bt(d){var v;if(S){let h=Se.current-d.clientY,L=h>0;if(!Pe(d.target,L))return;let $=((v=b.current)==null?void 0:v.getBoundingClientRect().height)||0;if(w(b.current,{transition:"none"}),w(k.current,{transition:"none"}),u&&ft({draggedDistance:h}),h>0&&!u){let K=tt(h);console.log(Math.min(K*-1,0),0),w(b.current,{transform:`translate3d(0, ${Math.min(K*-1,0)}px, 0)`});return}let A=Math.abs(h),V=document.querySelector("[vaul-drawer-wrapper]"),I=A/$,W=dt(A,L);W!==null&&(I=W);let Re=1-I;if(($e||D&&ae===D-1)&&(ut(I),i==null||i(d,I),w(k.current,{opacity:`${Re}`,transition:"none"},!0)),V&&k.current&&r){let K=Math.min(ue()+I*(1-ue()),1),J=8-I*8,se=Math.max(0,14-I*14);w(V,{borderRadius:`${J}px`,transform:`scale(${K}) translate3d(0, ${se}px, 0)`,transition:"none"},!0)}u||w(b.current,{transform:`translate3d(0, ${A}px, 0)`})}}R.default.useEffect(()=>{var v;function d(){var L,$,A,V;if(!b.current)return;let h=document.activeElement;if(pe(h)||G.current){let I=((L=window.visualViewport)==null?void 0:L.height)||0,W=window.innerHeight-I,Re=(($=b.current)==null?void 0:$.getBoundingClientRect().height)||0,K=(A=b.current)==null?void 0:A.getBoundingClientRect().top;if(Math.abs(Ae.current-W)>60&&(G.current=!G.current),u&&u.length>0&&le&&ae){let J=le[ae]||0;W+=J}if(Ae.current=W,Re>I||G.current){let J=(V=b.current)==null?void 0:V.getBoundingClientRect().height,se=J;J>I&&(se=I-ot),b.current.style.height=`${Math.max(se,I-K)}px`}else b.current.style.height="initial";u&&u.length>0&&!G.current?b.current.style.bottom="0px":b.current.style.bottom=`${Math.max(W,0)}px`}}return(v=window.visualViewport)==null||v.addEventListener("resize",d),()=>{var h;return(h=window.visualViewport)==null?void 0:h.removeEventListener("resize",d)}},[ae,u,le]);function Z(){!s||!b.current||(p==null||p(),b.current&&(w(b.current,{transform:"translate3d(0, 100%, 0)",transition:`transform ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`}),w(k.current,{opacity:"0",transition:`opacity ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`}),ke(!1)),setTimeout(()=>{T(!1),m(!1),u&&Le(u[0])},Qt))}R.default.useEffect(()=>{if(!c&&r){let d=setTimeout(()=>{Ee(document.body)},200);return()=>clearTimeout(d)}},[c,r]);function Fe(){if(!b.current)return;let d=document.querySelector("[vaul-drawer-wrapper]"),v=re(b.current);w(b.current,{transform:"translate3d(0, 0, 0)",transition:`transform ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`}),w(k.current,{transition:`opacity ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,opacity:"1"}),r&&v&&v>0&&c&&w(d,{borderRadius:`${rt}px`,overflow:"hidden",transform:`scale(${ue()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${y.DURATION}s`,transitionTimingFunction:`cubic-bezier(${y.EASE.join(",")})`},!0)}function pt(d){var I;if(!S||!b.current)return;C(!1),oe.current=new Date;let v=re(b.current);if(!Pe(d.target,!1)||!v||Number.isNaN(v)||U.current===null)return;let h=d.clientY,L=oe.current.getTime()-U.current.getTime(),$=Se.current-h,A=Math.abs($)/L;if(A>.05&&(F(!0),setTimeout(()=>{F(!1)},200)),u){ct({draggedDistance:$,closeDrawer:Z,velocity:A});return}if($>0){Fe(),a==null||a(d,!0),ie(!0);return}if(A>Te){Z(),a==null||a(d,!1),ie(!1);return}let V=Math.min(((I=b.current)==null?void 0:I.getBoundingClientRect().height)||0,window.innerHeight);if(v>=V*g){Z(),a==null||a(d,!1),ie(!1);return}a==null||a(d,!0),ie(!0),Fe()}function ke(d){let v=document.querySelector("[vaul-drawer-wrapper]");!v||!r||(d?(w(document.body,{background:"black"},!0),w(v,{borderRadius:`${rt}px`,overflow:"hidden",transform:`scale(${ue()}) translate3d(0, calc(env(safe-area-inset-top) + 14px), 0)`,transformOrigin:"top",transitionProperty:"transform, border-radius",transitionDuration:`${y.DURATION}s`,transitionTimingFunction:`cubic-bezier(${y.EASE.join(",")})`})):(Ee(v,"transform"),Ee(v,"borderRadius"),w(v,{transitionProperty:"transform, border-radius",transitionDuration:`${y.DURATION}s`,transitionTimingFunction:`cubic-bezier(${y.EASE.join(",")})`})))}function gt(d){let v=d?(window.innerWidth-q)/window.innerWidth:1,h=d?-q:0;we.current&&window.clearTimeout(we.current),w(b.current,{transition:`transform ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,transform:`scale(${v}) translate3d(0, ${h}px, 0)`}),!d&&b.current&&(we.current=setTimeout(()=>{w(b.current,{transition:"none",transform:`translate3d(0, ${re(b.current)}px, 0)`})},500))}function vt(d,v){if(v<0)return;let h=(window.innerWidth-q)/window.innerWidth,L=h+v*(1-h),$=-q+v*q;w(b.current,{transform:`scale(${L}) translate3d(0, ${$}px, 0)`,transition:"none"})}function ht(d,v){let h=v?(window.innerWidth-q)/window.innerWidth:1,L=v?-q:0;v&&w(b.current,{transition:`transform ${y.DURATION}s cubic-bezier(${y.EASE.join(",")})`,transform:`scale(${h}) translate3d(0, ${L}px, 0)`})}return R.default.createElement(H.Root,{open:c,onOpenChange:d=>{d?T(d):Z()},modal:P},R.default.createElement(Ce.Provider,{value:{visible:O,activeSnapPoint:st,snapPoints:u,setActiveSnapPoint:Le,drawerRef:b,overlayRef:k,scaleBackground:ke,onPress:mt,setVisible:m,onRelease:pt,onDrag:bt,dismissible:s,isOpen:c,shouldFade:$e,closeDrawer:Z,onNestedDrag:vt,onNestedOpenChange:gt,onNestedRelease:ht,keyboardIsOpen:G,modal:P,snapPointsOffset:le,experimentalSafariThemeAnimation:f}},o))}var at=R.default.forwardRef(function({children:e,style:n,...t},o){let{overlayRef:r,snapPoints:i,onRelease:a,experimentalSafariThemeAnimation:f,shouldFade:u,isOpen:E,visible:g}=de(),l=Ne(o,r),s=i&&i.length>0;return R.default.createElement(H.Overlay,{onMouseUp:a,ref:l,"vaul-overlay":"","vaul-snap-points":E&&s?"true":"false","vaul-theme-transition":f?"true":"false","vaul-snap-points-overlay":E&&u?"true":"false","vaul-drawer-visible":g?"true":"false",...t})});at.displayName="Drawer.Overlay";var lt=R.default.forwardRef(function({children:e,onOpenAutoFocus:n,onPointerDownOutside:t,onAnimationEnd:o,style:r,...i},a){let{drawerRef:f,onPress:u,onRelease:E,onDrag:g,dismissible:l,isOpen:s,keyboardIsOpen:D,snapPointsOffset:x,visible:B,setVisible:P,closeDrawer:p,scaleBackground:c}=de(),T=Ne(a,f);return R.default.useEffect(()=>{P(!0),c(!0)},[]),R.default.createElement(H.Content,{onPointerDown:u,onPointerUp:E,onPointerMove:g,onOpenAutoFocus:O=>{n?n(O):O.preventDefault()},onPointerDownOutside:O=>{D.current&&(D.current=!1),O.preventDefault(),l&&(p(),t==null||t(O))},ref:T,style:x?{"--snap-point-height":`${x[0]}px`,...r}:r,...i,"vaul-drawer":"","vaul-drawer-visible":B?"true":"false"},e)});lt.displayName="Drawer.Content";function Zt({children:e,onDrag:n,onOpenChange:t}){let{onNestedDrag:o,onNestedOpenChange:r,onNestedRelease:i}=de();if(!o)throw new Error("Drawer.NestedRoot must be placed in another drawer");return R.default.createElement(it,{onDrag:(a,f)=>{o(a,f),n==null||n(a,f)},onClose:()=>{r(!1)},nested:!0,onOpenChange:a=>{a&&r(a),t==null||t(a)},onRelease:i},e)}var Xt=Object.assign({},{Root:it,NestedRoot:Zt,Content:lt,Overlay:at,Trigger:H.Trigger,Portal:H.Portal,Close:H.Close,Title:H.Title,Description:H.Description});0&&(module.exports={Drawer});
//# sourceMappingURL=index.js.map

3

package.json
{
"name": "vaul",
"version": "0.4.5",
"version": "0.4.6",
"description": "Drawer component for React.",

@@ -36,2 +36,3 @@ "main": "dist/index.js",

"devDependencies": {
"@playwright/test": "^1.37.1",
"@radix-ui/react-dialog": "^1.0.4",

@@ -38,0 +39,0 @@ "eslint": "^7.32.0",

9

README.md

@@ -39,2 +39,3 @@ https://github.com/emilkowalski/vaul/assets/36730035/fdf8c5e8-ade8-433b-8bb0-4ce10e722516

- [Without scaled background](https://codesandbox.io/p/sandbox/drawer-with-scale-forked-nx2glp?file=%2Fapp%2Fmy-drawer.tsx%3A4%2C1)
- [With snap points](https://codesandbox.io/p/sandbox/drawer-non-dismissable-forked-jchtff?file=/app/my-drawer.tsx:1,1)
- [Scrollable with inputs](https://codesandbox.io/p/sandbox/drawer-with-scale-forked-73f8jw?file=%2Fapp%2Fmy-drawer.tsx%3A1%2C1)

@@ -57,5 +58,5 @@ - [Nested drawers](https://codesandbox.io/p/sandbox/drawer-non-dismissable-forked-5z2r3j?file=%2Fapp%2Fmy-drawer.tsx%3A49%2C16-49%2C246)

`snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`.
`snapPoints`: Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up. Should go from least visible. Example `[0.2, 0.5, 0.8]`. You can also use px values, which doesn't take screen height into account.
`fadeFromIndex`: Index of a snapPoint from which the overlay fade should be applied. Defaults to the last snap point.
`fadeFromIndex`: Index of a `snapPoint` from which the overlay fade should be applied. Defaults to the last snap point.

@@ -72,6 +73,2 @@ `modal`: When `false`it allows to interact with elements outside of the drawer without closing it. Defaults to`true`.

Additional props:
`onAnimationEnd (open: boolean) => void`: Runs after enter or exit animation ends. Useful to reset the state and avoid flash of a different content when animating out.
### Overlay

@@ -78,0 +75,0 @@ 

dist/index.js.map

Sorry, the diff of this file is not supported yet

dist/index.mjs

Sorry, the diff of this file is not supported yet

dist/index.mjs.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc