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

Flexible container components for React

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