@hanamura/react-containers/dist/index.esm.js

Flexible container components for React

'use client';
import{jsx as i,Fragment as n,jsxs as e}from"react/jsx-runtime";import{useState as t,useEffect as a,Children as o,Fragment as d,isValidElement as l,cloneElement as r}from"react";function s(i){if(void 0!==i)return"number"==typeof i?`${i}px`:"string"==typeof i?i:i.map(s).join(" ")}function c(i,n,e){const[o,d]=t(null),[l,r]=t(!1),[s,c]=t(null),p={...i??{},...s??{}};return a((()=>{if(!n||0===n.length)return;const i=n.map((([i,{query:n}])=>({key:i,mediaQueryList:window.matchMedia(n)})));function t(){const n=i.findLast((({mediaQueryList:i})=>i.matches));if(n){const i=n.key;d(i),c(e?.[i]??null)}else d(null),c(null);l||r(!0)}return t(),i.forEach((({mediaQueryList:i})=>{i.addEventListener("change",t)})),()=>{i.forEach((({mediaQueryList:i})=>{i.removeEventListener("change",t)}))}}),[n,e]),{activeContext:o,options:p,initialized:l}}function p({children:e,options:t,queries:a,adaptiveOptions:o,fallback:d,className:l,style:r,as:p="div",...u}){const{options:m,initialized:f}=c(t,a,o),g={display:"flex",flexWrap:"wrap",gap:s(m.gap)??0,alignItems:m.align,justifyContent:m.justify,paddingInline:s(m.paddingInline),paddingBlock:s(m.paddingBlock),...r};return f||void 0===d?i(p,{className:l,style:g,...u,children:e}):i(n,{children:d})}function u({children:e,options:t,queries:a,adaptiveOptions:o,fallback:d,className:l,style:r,as:p="div",...u}){const{options:m,initialized:f}=c(t,a,o),g={display:"grid",gridAutoFlow:"column",gridAutoColumns:"number"==typeof m.columns?`calc((100% - ${s(m.gap)??"0px"} * ${m.columns-1}) / ${m.columns})`:m.columns,gap:s(m.gap)??0,paddingInline:s(m.paddingInline),paddingBlock:s(m.paddingBlock),overflow:"auto",overflowX:"auto",overflowY:"hidden",scrollbarWidth:m.hideScrollbar?"none":"auto",msOverflowStyle:m.hideScrollbar?"none":"auto",scrollSnapType:"none"!==m.snap&&m.snap?`x ${m.snap}`:void 0,WebkitOverflowScrolling:"touch",...r};return f||void 0===d?i(p,{className:l,style:g,...u,children:e}):i(n,{children:d})}function m({children:t,options:a,queries:p,adaptiveOptions:u,fallback:m,className:f,style:g,as:v="div",...y}){const{options:h,initialized:k}=c(a,p,u),b={display:"flex",flexDirection:"column",gap:s(h.gap)??0,paddingInline:s(h.paddingInline),paddingBlock:s(h.paddingBlock),...g},x={start:!1,between:!0,end:!1,...h.dividerPositions},w=o.toArray(t),I=w.length,B=(i,n)=>h.divider?"function"==typeof h.divider?h.divider({index:i,position:n}):l(h.divider)?r(h.divider,{key:`divider-${n}-${i}`}):h.divider:null;return k||void 0===m?e(v,{className:f,style:b,...y,children:[I>0&&h.divider&&x.start&&B(0,"start"),w.map(((i,n)=>e(d,{children:[i,h.divider&&n<I-1&&x.between&&B(n+1,"between")]},n))),I>0&&h.divider&&x.end&&B(I,"end")]}):i(n,{children:m})}function f({options:e,queries:t,adaptiveOptions:a,fallback:o}){const{options:d,initialized:l}=c(e,t,a);return i(n,l||void 0===o?{children:d.content}:{children:o})}function g({children:e,options:t,queries:a,adaptiveOptions:o,fallback:d,className:l,style:r,as:p="div",...u}){const{options:m,initialized:f}=c(t,a,o),g={display:"grid",gridTemplateColumns:"number"==typeof m.columns&&m.columns>1?`repeat(${m.columns}, minmax(0, 1fr))`:"repeat(1, minmax(0, 1fr))",gap:s(m.gap)??0,paddingInline:s(m.paddingInline),paddingBlock:s(m.paddingBlock),...r};return f||void 0===d?i(p,{className:l,style:g,...u,children:e}):i(n,{children:d})}export{p as Cluster,u as Reel,m as Stack,f as Switcher,g as Tile,s as normalizeSpacingValue,c as useAdaptiveContainer};
//# sourceMappingURL=index.esm.js.map