UNPKG

@szum-tech/design-system

Version:

Szum-Tech design system with tailwindcss support

1 lines 14 kB
import {c}from'./chunk-KK77ZUTM.js';import {b}from'./chunk-4HJVF7MU.js';import*as x from'react';import x__default from'react';import {Slot}from'@radix-ui/react-slot';import {jsx}from'react/jsx-runtime';function J({asChild:o,ref:n,...e}){return jsx(o?Slot:"div",{"data-slot":"masonry-item",ref:n,...e})}var q="MasonryRoot",B="MasonryViewport",ee="MasonryItem",te={[q]:`\`${q}\` components must be within \`${q}\``,[B]:`\`${B}\` components must be within \`${q}\``,[ee]:`\`${ee}\` must be within \`${B}\``},u={RED:0,BLACK:1,SENTINEL:2},_={REMOVE:0,PRESERVE:1};var Q=x__default.createContext(null);function oe(o){let n=x__default.useContext(Q);if(!n)throw new Error(te[o]);return n}function re({children:o,style:n,ref:e,...t}){let r=oe(B),[s,i]=x.useState(0),a=x.useRef(null),[m,T]=x.useState(false);b(()=>{T(true);},[]);let h=x.Children.toArray(o).filter(c=>x.isValidElement(c)&&(c.type===J||c.type===J)),d=h.length,M=r.positioner.shortestColumn(),l=r.positioner.size(),v=r.windowHeight*r.overscan,R=Math.max(0,r.scrollTop-v/2),C=r.scrollTop+v,k=M<C&&l<d,P=[],b$1=x.useMemo(()=>({position:"absolute",writingMode:"horizontal-tb",visibility:"visible",width:r.columnWidth,transform:r.isScrolling?"translateZ(0)":void 0,willChange:r.isScrolling?"transform":void 0}),[r.columnWidth,r.isScrolling]),E=x.useMemo(()=>({position:"absolute",writingMode:"horizontal-tb",visibility:"hidden",width:r.columnWidth,zIndex:-1e3}),[r.columnWidth]);if(r.positioner.range(R,C,(c,p,w)=>{let S=h[c];if(!S)return;let A={...b$1,top:w,left:p,...S.props.style};P.push(x.cloneElement(S,{key:S.key??c,ref:r.onItemRegister(c),style:A}));}),k&&m){let c=Math.min(d-l,Math.ceil((r.scrollTop+v-M)/r.itemHeight*r.positioner.columnCount));for(let p=l;p<l+c;p++){let w=h[p];if(!w)continue;let S={...E,...w.props.style};P.push(x.cloneElement(w,{key:w.key??p,ref:r.onItemRegister(p),style:S}));}}x.useEffect(()=>(k&&m&&(a.current&&cancelAnimationFrame(a.current),a.current=requestAnimationFrame(()=>{i(c=>c+1);})),()=>{a.current&&cancelAnimationFrame(a.current);}),[k,m]);let f=x.useMemo(()=>{let c=r.positioner.estimateHeight(l,r.itemHeight);if(l===d)return c;let p=d-l,w=Math.ceil(p/r.positioner.columnCount*r.itemHeight);return c+w},[r.positioner,r.itemHeight,l,d]),L=x.useMemo(()=>({position:"relative",width:"100%",maxWidth:"100%",height:Math.ceil(f),maxHeight:Math.ceil(f),willChange:r.isScrolling?"contents":void 0,pointerEvents:r.isScrolling?"none":void 0,...n}),[r.isScrolling,f,n]);return !m&&r.fallback?r.fallback:jsx("div",{ref:e,style:L,"data-version":m?s:void 0,...t,children:P})}function he(o,n,e){let t=o.list,r;for(;t;){if(t.index===e)return false;if(n>t.high)break;r=t,t=t.next;}return r||(o.list={index:e,high:n,next:t}),r&&(r.next={index:e,high:n,next:r.next}),true}function de(o,n){let e=o.list;if(e.index===n)return e.next===null?_.REMOVE:(o.list=e.next,_.PRESERVE);let t=e;for(e=e.next;e!==null;){if(e.index===n)return t.next=e.next,_.PRESERVE;t=e,e=e.next;}}var g={low:0,max:0,high:0,color:u.SENTINEL,parent:void 0,right:void 0,left:void 0,list:void 0};g.parent=g;g.left=g;g.right=g;function W(o){let n=o.high;o.left===g&&o.right===g?o.max=n:o.left===g?o.max=Math.max(o.right.max,n):o.right===g?o.max=Math.max(o.left.max,n):o.max=Math.max(Math.max(o.left.max,o.right.max),n);}function $(o){let n=o;for(;n.parent!==g;)W(n.parent),n=n.parent;}function F(o,n){if(n.right===g)return;let e=n.right;n.right=e.left,e.left!==g&&(e.left.parent=n),e.parent=n.parent,n.parent===g?o.root=e:n===n.parent.left?n.parent.left=e:n.parent.right=e,e.left=n,n.parent=e,W(n),W(e);}function U(o,n){if(n.left===g)return;let e=n.left;n.left=e.right,e.right!==g&&(e.right.parent=n),e.parent=n.parent,n.parent===g?o.root=e:n===n.parent.right?n.parent.right=e:n.parent.left=e,e.right=n,n.parent=e,W(n),W(e);}function Z(o,n,e){n.parent===g?o.root=e:n===n.parent.left?n.parent.left=e:n.parent.right=e,e.parent=n.parent;}function ye(o,n){let e=n,t;for(;e!==g&&e.color===u.BLACK;)e===e.parent.left?(t=e.parent.right,t.color===u.RED&&(t.color=u.BLACK,e.parent.color=u.RED,F(o,e.parent),t=e.parent.right),t.left.color===u.BLACK&&t.right.color===u.BLACK?(t.color=u.RED,e=e.parent):(t.right.color===u.BLACK&&(t.left.color=u.BLACK,t.color=u.RED,U(o,t),t=e.parent.right),t.color=e.parent.color,e.parent.color=u.BLACK,t.right.color=u.BLACK,F(o,e.parent),e=o.root)):(t=e.parent.left,t.color===u.RED&&(t.color=u.BLACK,e.parent.color=u.RED,U(o,e.parent),t=e.parent.left),t.right.color===u.BLACK&&t.left.color===u.BLACK?(t.color=u.RED,e=e.parent):(t.left.color===u.BLACK&&(t.right.color=u.BLACK,t.color=u.RED,F(o,t),t=e.parent.left),t.color=e.parent.color,e.parent.color=u.BLACK,t.left.color=u.BLACK,U(o,e.parent),e=o.root));e.color=u.BLACK;}function Me(o){let n=o;for(;n.left!==g;)n=n.left;return n}function ge(o,n){let e=n,t;for(;e.parent.color===u.RED;)e.parent===e.parent.parent.left?(t=e.parent.parent.right,t.color===u.RED?(e.parent.color=u.BLACK,t.color=u.BLACK,e.parent.parent.color=u.RED,e=e.parent.parent):(e===e.parent.right&&(e=e.parent,F(o,e)),e.parent.color=u.BLACK,e.parent.parent.color=u.RED,U(o,e.parent.parent))):(t=e.parent.parent.left,t.color===u.RED?(e.parent.color=u.BLACK,t.color=u.BLACK,e.parent.parent.color=u.RED,e=e.parent.parent):(e===e.parent.left&&(e=e.parent,U(o,e)),e.parent.color=u.BLACK,e.parent.parent.color=u.RED,F(o,e.parent.parent)));o.root.color=u.BLACK;}function ie(){let o={root:g,size:0},n={};return {insert(e,t,r){let s=o.root,i=g;for(;s!==g&&(i=s,e!==i.low);)e<s.low?s=s.left:s=s.right;if(e===i.low&&i!==g){if(!he(i,t,r))return;i.high=Math.max(i.high,t),W(i),$(i),n[r]=i,o.size++;return}let a={low:e,high:t,max:t,color:u.RED,parent:i,left:g,right:g,list:{index:r,high:t,next:null}};i===g?o.root=a:(a.low<i.low?i.left=a:i.right=a,$(a)),ge(o,a),n[r]=a,o.size++;},remove(e){let t=n[e];if(t===void 0)return;delete n[e];let r=de(t,e);if(r===void 0)return;if(r===_.PRESERVE){t.high=t.list.high,W(t),$(t),o.size--;return}let s=t,i=s.color,a;t.left===g?(a=t.right,Z(o,t,t.right)):t.right===g?(a=t.left,Z(o,t,t.left)):(s=Me(t.right),i=s.color,a=s.right,s.parent===t?a.parent=s:(Z(o,s,s.right),s.right=t.right,s.right.parent=s),Z(o,t,s),s.left=t.left,s.left.parent=s,s.color=t.color),W(a),$(a),i===u.BLACK&&ye(o,a),o.size--;},search(e,t,r){let s=[o.root];for(;s.length!==0;){let i=s.pop();if(i&&!(i===g||e>i.max)&&(i.left!==g&&s.push(i.left),i.right!==g&&s.push(i.right),i.low<=t&&i.high>=e)){let a=i.list;for(;a!==null;)a.high>=e&&r(a.index,i.low),a=a.next;}}},get size(){return o.size}}}function se(o,n){if(!o.length||!o[0])throw new Error("At least one constructor is required");function e(h){let d;if(typeof h=="function")try{d=new h;}catch{d=new Map;}else d=h;return {set(M,l){return d.set(M,l),l},get(M){return d.get(M)}}}let t=o.length,r=e(o[0]),s,i,a,m,T=t===1;function y(h){if(t<3){let d=h[0];return s=r.get(d),T?s:s?.get(h[1])}for(a=r,m=0;m<t;m++){let d=a.get(h[m]);if(!d)return;a=d;}return a}function N(h,d){if(t<3){if(T)r.set(h[0],d);else if(s=r.get(h[0]),s)s.set(h[1],d);else {if(!o[1])throw new Error("Second constructor is required for non-single depth cache");i=e(o[1]),i.set(h[1],d),r.set(h[0],i);}return d}for(a=r,m=0;m<t-1;m++)if(i=a.get(h[m]),i)a=i;else {let M=o[m+1];if(!M)throw new Error(`Constructor at index ${m+1} is required`);i=e(M),a.set(h[m],i),a=i;}return a.set(h[t-1],d),d}return (...h)=>{let d=y(h);return d===void 0?N(h,n(...h)):d}}function X(o){function t(...r){}return t.cancel=()=>{},t}function ae({width:o,columnWidth:n,columnGap:e=0,rowGap:t,columnCount:r,maxColumnCount:s,linear:i=false},a=[]){let m=x__default.useCallback(()=>{function M(b,E){let f=0,L=b.length-1;for(;f<=L;){let c=f+L>>>1,p=b[c];if(p===E)return c;p===void 0||p<=E?f=c+1:L=c-1;}return -1}let l=r||Math.min(Math.floor((o+e)/((n??0)+e)),s||Number.POSITIVE_INFINITY)||1,v=Math.floor((o-e*(l-1))/l),R=ie(),C=new Array(l).fill(0),k=[],P=new Array(l).fill(0).map(()=>[]);for(let b=0;b<l;b++)C[b]=0,P[b]=[];return {columnCount:l,columnWidth:v,set:(b,E=0)=>{let f=0;if(i){let w=b%l,S=C[0]??0,V=0;for(let O=0;O<C.length;O++){let z=C[O]??0;z<S&&(S=z,V=O);}let K=(C[w]??0)+E,H=S+E*2.5;f=K<=H?w:V;}else for(let w=1;w<C.length;w++){let S=C[w],A=C[f];S!==void 0&&A!==void 0&&S<A&&(f=w);}let L=C[f];if(L===void 0)return;let c=L;C[f]=c+E+(t??e);let p=P[f];p&&(p.push(b),k[b]={left:f*(v+e),top:c,height:E,columnIndex:f},R.insert(c,c+E,b));},get:b=>k[b],update:b=>{let E=new Array(l),f=0,L=0;for(;f<b.length-1;f++){let c=b[f];if(typeof c!="number")continue;let p=k[c];if(!p)continue;let w=b[++f];typeof w=="number"&&(p.height=w,R.remove(c),R.insert(p.top,p.top+p.height,c),E[p.columnIndex]=E[p.columnIndex]===void 0?c:Math.min(c,E[p.columnIndex]??c));}for(f=0;f<E.length;f++){let c=E[f];if(c===void 0)continue;let p=P[f];if(!p)continue;let w=M(p,c);if(w===-1)continue;let S=p[w];if(typeof S!="number")continue;let A=k[S];if(!(!A||typeof C[f]!="number"))for(C[f]=A.top+A.height+(t??e),L=w+1;L<p.length;L++){let K=p[L];if(typeof K!="number")continue;let H=k[K];if(!H)continue;let O=C[f];typeof O=="number"&&(H.top=O,C[f]=H.top+H.height+(t??e),R.remove(K),R.insert(H.top,H.top+H.height,K));}}},range:(b,E,f)=>R.search(b,E,(L,c)=>{let p=k[L];p&&f(L,p.left,c);}),estimateHeight:(b,E)=>{let f=Math.max(0,Math.max.apply(null,C));return b===R.size?f:f+Math.ceil((b-R.size)/l)*E},shortestColumn:()=>C.length>1?Math.min.apply(null,C):C[0]??0,size(){return R.size},all(){return k.filter(Boolean)}}},[o,n,e,t,r,s,i]),T=x__default.useRef(null);T.current===null&&(T.current=m());let y=x__default.useRef(a),N=[o,n,e,t,r,s,i],h=x__default.useRef(N),d=!N.every((M,l)=>h.current[l]===M);if(d||!a.every((M,l)=>y.current[l]===M)){let M=T.current,l=m();if(y.current=a,h.current=N,d){let v=M.size();for(let R=0;R<v;R++){let C=M.get(R);l.set(R,C!==void 0?C.height:0);}}T.current=l;}return T.current}function ce(o){let{containerRef:n,defaultWidth:e=0,defaultHeight:t=0,delayMs:r=300}=o,s=x__default.useCallback(()=>typeof document>"u"?{width:e,height:t}:{width:document.documentElement.clientWidth,height:document.documentElement.clientHeight},[e,t]),[i,a]=x__default.useState(s()),m=x__default.useRef(null),T=x__default.useCallback(y=>{m.current&&clearTimeout(m.current),m.current=setTimeout(()=>{a(y);},r);},[r]);return x__default.useEffect(()=>{function y(){n.current?T({width:n.current.offsetWidth,height:document.documentElement.clientHeight}):T(s());}return window?.addEventListener("resize",y,{passive:true}),window?.addEventListener("orientationchange",y),window.visualViewport?.addEventListener("resize",y),()=>{window?.removeEventListener("resize",y),window?.removeEventListener("orientationchange",y),window.visualViewport?.removeEventListener("resize",y),m.current&&clearTimeout(m.current);}},[T,n,s]),i}function le(o){let[,n]=x__default.useState(0),t=x__default.useMemo(()=>typeof window>"u"?()=>({disconnect:()=>{},observe:()=>{},unobserve:()=>{}}):se([WeakMap],(r,s)=>{let a=new WeakMap;X();let y=new Map;function N(M){for(let l of M){if(!l)continue;let v=a.get(l.target);if(v===void 0)continue;let R=y.get(v);R||(R=X(),y.set(v,R)),R(l.target);}}let h=new ResizeObserver(N),d=h.disconnect.bind(h);return h.disconnect=()=>{d();for(let[,M]of y)M.cancel();},h}),[])(o,()=>n(r=>r+1));return x__default.useEffect(()=>()=>t.disconnect(),[t]),t}function ue({offset:o=0,fps:n=12}={}){let[e,t]=be(typeof globalThis.window>"u"?0:globalThis.window.scrollY??document.documentElement.scrollTop??0,{fps:n,leading:true}),r=x__default.useCallback(()=>{t(globalThis.window.scrollY??document.documentElement.scrollTop??0);},[t]);x__default.useEffect(()=>{if(!(typeof globalThis.window>"u"))return globalThis.window.addEventListener("scroll",r,{passive:true}),()=>globalThis.window.removeEventListener("scroll",r)},[r]);let[s,i]=x__default.useState(false),a=x__default.useRef(0);return x__default.useEffect(()=>{a.current===1&&i(true);let m=false;function T(N,h){let d=performance.now(),M={id:requestAnimationFrame(function l(v){v-d>=h?N():M.id=requestAnimationFrame(l);})};return M}let y=T(()=>{m||i(false);},40+1e3/n);return a.current=1,()=>{m=true,cancelAnimationFrame(y.id);}},[n]),{scrollTop:Math.max(0,e-o),isScrolling:s}}function be(o,n={}){let{fps:e=30,leading:t=false}=n,[r,s]=x__default.useState(o),i=x__default.useRef(s);i.current=s;let a=1e3/e,m=x__default.useRef(0),T=x__default.useRef(null),y=x__default.useCallback(()=>{T.current&&clearTimeout(T.current);},[]);x__default.useEffect(()=>()=>{m.current=0,y();},[y]);let N=x__default.useCallback(h=>{let l=(typeof performance<"u"?performance:Date).now(),v=()=>{m.current=l,y(),i.current(h);},R=m.current;if(t&&R===0)return v();if(l-R>a){if(R>0)return v();m.current=l;}y(),T.current=setTimeout(()=>{v(),m.current=0;},a);},[t,a,y]);return [r,N]}function Qe(o){let{columnWidth:n=200,columnCount:e,maxColumnCount:t,gap:r=0,itemHeight:s=300,defaultWidth:i,defaultHeight:a,overscan:m=2,scrollFps:T=12,fallback:y,linear:N=false,asChild:h,children:d,style:M,ref:l,...v}=o,R=typeof r=="object"?r:{column:r,row:r},C=R.column,k=R.row,P=x.useRef(null),b$1=c(l,P),E=ce({containerRef:P,defaultWidth:i,defaultHeight:a}),[f,L]=x.useState({offset:0,width:0});b(()=>{if(!P.current)return;let O=0,z=P.current;do O+=z.offsetTop??0,z=z.offsetParent;while(z);(O!==f.offset||P.current.offsetWidth!==f.width)&&L({offset:O,width:P.current.offsetWidth});},[f,E]);let c$1=ae({width:f.width??E.width,columnWidth:n,columnGap:C,rowGap:k,columnCount:e,maxColumnCount:t,linear:N}),p=le(c$1),{scrollTop:w,isScrolling:S}=ue({offset:f.offset,fps:T}),A=x.useRef(new WeakMap).current,V=x.useCallback(O=>z=>{z&&(A.set(z,O),p&&p.observe(z),c$1.get(O)===void 0&&c$1.set(O,z.offsetHeight));},[A,c$1,p]),K=x.useMemo(()=>({positioner:c$1,resizeObserver:p,columnWidth:c$1.columnWidth,onItemRegister:V,scrollTop:w,windowHeight:E.height,itemHeight:s,overscan:m,fallback:y,isScrolling:S}),[c$1,p,V,w,E.height,s,m,y,S]),H=h?Slot:"div";return jsx(Q.Provider,{value:K,children:jsx(H,{...v,"data-slot":"masonry",ref:b$1,style:{position:"relative",width:"100%",height:"100%",...M},children:jsx(re,{children:d})})})}export{J as a,Qe as b};