tailwind-every-layout/dist/tailwind-every-layout.umd.cjs

Layout primitives for Tailwind CSS

(function(s,g){typeof exports=="object"&&typeof module<"u"?g(exports):typeof define=="function"&&define.amd?define(["exports"],g):(s=typeof globalThis<"u"?globalThis:s||self,g(s.TailwindLayouts={}))})(this,function(s){"use strict";function g(r,e){return{handler:r,config:e}}g.withOptions=function(r,e=()=>({})){function i(c){return{handler:r(c),config:e(c)}}return i.__isOptionsFunction=!0,i};var v=g;const $="layouts";function l(r,e){return r(`${$}.${e}`)}const y={width:"inlineSize",maxWidth:"maxInlineSize",minWidth:"minInlineSize",height:"blockSize",maxHeight:"maxBlockSize",minHeight:"minBlockSize",marginTop:"marginBlockStart",marginBottom:"marginBlockEnd",marginLeft:"marginInlineStart",marginRight:"marginInlineEnd",paddingTop:"paddingBlockStart",paddingBottom:"paddingBlockEnd",paddingLeft:"paddingInlineStart",paddingRight:"paddingInlineEnd",top:"insetBlockStart",bottom:"insetBlockEnd",left:"insetInlineStart",right:"insetInlineEnd",borderTop:"borderBlockStart",borderBottom:"borderBlockEnd",borderLeft:"borderInlineStart",borderRight:"borderInlineEnd",borderTopWidth:"borderBlockStartWidth",borderBottomWidth:"borderBlockEndWidth",borderLeftWidth:"borderInlineStartWidth",borderRightWidth:"borderInlineEndWidth",borderTopColor:"borderBlockStartColor",borderBottomColor:"borderBlockEndColor",borderLeftColor:"borderInlineStartColor",borderRightColor:"borderInlineEndColor",borderTopStyle:"borderBlockStartStyle",borderBottomStyle:"borderBlockEndStyle",borderLeftStyle:"borderInlineStartStyle",borderRightStyle:"borderInlineEndStyle",borderTopLeftRadius:"borderStartStartRadius",borderTopRightRadius:"borderStartEndRadius",borderBottomRightRadius:"borderEndEndRadius",borderBottomLeftRadius:"borderEndStartRadius",overflowX:"overflowInline",overflowY:"overflowBlock"},t=(r,e)=>r.useLogicalProperties?y[e]:e,x=(r,e)=>Array.from({length:isNaN(Number(r))?e:Number(r)},(i,c)=>c+1).reduce((i,c)=>(i[`${c}`]=c,i),{}),a=(r,e)=>r.classNames[e],h=(r,e)=>Object.keys(r).reduce((i,c)=>(e(c)&&(i[c]=r[c]),i),{}),k=r=>Object.entries(r).reduce((e,[i,c])=>(typeof c=="string"?e[i]=c:Object.entries(c).forEach(([n,d])=>{e[`${i}-${n}`]=d}),e),{}),o={useGlobalMeasure:!0,measureExceptions:"html,body,div,header,nav,main,footer",useGlobalScrollbarStyles:!1,useLogicalProperties:!1,maxStackSplitAfter:9,switcherLimit:4,maxSwitcherLimit:9,frameSelectors:"img,iframe,video,embed,svg,canvas",classNames:{stack:"stack-l",box:"box-l",center:"center-l",cluster:"cluster-l",sidebar:"sidebar-l",switcher:"switcher-l",cover:"cover-l",coverTarget:"center",grid:"grid-l",frame:"frame-l",frameTarget:"frame",reel:"reel-l",imposter:"imposter-l",icon:"icon-l",iconTarget:"icon",scrollbar:"scrollbar","border-hc":"border-hc"},measureKey:"measure",baseSpacingKey:"base"},S={measure:"65ch",baseSpacing:"1rem",sidebarMainMinWidth:"66.666667%",gridItemMinWidth:"250px",frameAspectRatio:"16/9",iconSize:"0.9em",iconGap:"0.3em",iconNudgeSm:"0.0625em",iconNudgeMd:"0.125em",iconNudgeLg:"0.1875em",iconNudgeXl:"0.25em",scrollbarThumbColor:"rgba(0, 0, 0, 0.5)",scrollbarTrackColor:"transparent",scrollbarSize:"medium",scrollbarBorderRadius:"9999px"},W=({options:r,theme:e})=>[{"*":{[t(r,"maxWidth")]:`${l(e,"measure")}`},[`${r.measureExceptions}`]:{[t(r,"maxWidth")]:"none"}}],T={thin:"6px",medium:"4px",thick:"2px"},B=({options:r,theme:e})=>[{"*":{scrollbarColor:`${l(e,"scrollbarThumbColor")} ${l(e,"scrollbarTrackColor")}`},"::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-corner":{backgroundColor:l(e,"scrollbarTrackColor")},"::-webkit-scrollbar-thumb":{borderStyle:"solid",borderColor:"transparent",backgroundClip:"content-box",backgroundColor:l(e,"scrollbarThumbColor"),borderWidth:`${T[l(e,"scrollbarSize")]}`,borderRadius:l(e,"scrollbarBorderRadius")}}],C={static:[({options:r,theme:e})=>[{[`.${a(r,"stack")}`]:{[`&:not(.${a(r,"stack")}_no-flex)`]:{display:"flex",flexDirection:"column",justifyContent:"flex-start"},"& > *":{[t(r,"marginTop")]:"0",[t(r,"marginBottom")]:"0"},"& > * + *":{[t(r,"marginTop")]:l(e,"baseSpacing")}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"stack")}`]:i=>({[`&.${a(r,"stack")} > * + *`]:{[t(r,"marginTop")]:`${i}`}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"stack")}_split-after`]:i=>({[`&.${a(r,"stack")}>:nth-child(${i})`]:{[t(r,"marginBottom")]:"auto"}})},{values:x(Number(r.maxStackSplitAfter),o.maxStackSplitAfter)}]]},_={static:[({options:r,theme:e})=>[{[`.${a(r,"box")}`]:{padding:l(e,"baseSpacing")}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"box")}_p`]:i=>({[`&.${a(r,"box")}`]:{padding:`${i}`}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"box")}_text`]:i=>({[`&.${a(r,"box")}`]:{color:`${i}`}}),[`${a(r,"box")}_bg`]:i=>({[`&.${a(r,"box")}`]:{backgroundColor:`${i}`}}),[`${a(r,"box")}_border`]:i=>({[`&.${a(r,"box")}`]:{borderColor:`${i}`}})},{values:e("colors")?k(e("colors")):{}}]]},L={static:[({options:r,theme:e})=>[{[`.${a(r,"center")}`]:{boxSizing:"content-box",[t(r,"marginLeft")]:"auto",[t(r,"marginRight")]:"auto",[t(r,"maxWidth")]:l(e,"measure"),[`&.${a(r,"center")}_intrinsic`]:{display:"flex",flexDirection:"column",alignItems:"center"},[`&.${a(r,"center")}_text`]:{textAlign:"center"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"center")}_max-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"center")}`]:{[t(r,"maxWidth")]:`${i}`}})},{values:e("maxWidth")||{}}],({options:r,theme:e})=>[{[`${a(r,"center")}_gutters`]:i=>({[`&.${a(r,"center")}`]:{[t(r,"paddingLeft")]:`${i}`,[t(r,"paddingRight")]:`${i}`}})},{values:e("spacing")||{}}]]},R={static:[({options:r,theme:e})=>[{[`.${a(r,"cluster")}`]:{display:"flex",flexWrap:"wrap",gap:l(e,"baseSpacing")},[`.${a(r,"cluster")}_center`]:{[`&.${a(r,"cluster")}`]:{justifyContent:"center"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"cluster")}`]:i=>({[`&.${a(r,"cluster")}`]:{gap:`${i}`}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"cluster")}_item-min-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"cluster")} > *`]:{minWidth:`${i}`}})},{values:{...e("minWidth"),...e("maxWidth"),...e("width")}}]]},f=r=>isNaN(Number(r))?null:Number(r),p={static:[({options:r,theme:e})=>{const i=f(r.switcherLimit)||o.switcherLimit;return[{[`.${a(r,"switcher")}`]:{display:"flex",flexWrap:"wrap",gap:l(e,"baseSpacing"),"& > *":{flexGrow:"1",flexBasis:`calc((${l(e,"measure")} - 100%) * 999)`},[`&.${a(r,"switcher")} > :nth-last-child(n+${i+1}), &.${a(r,"switcher")} > :nth-last-child(n+${i+1}) ~ *`]:{flexBasis:"100%"}}}]}],dynamic:[({options:r,theme:e})=>[{[`${a(r,"switcher")}`]:i=>({[`&.${a(r,"switcher")}`]:{gap:`${i}`}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"switcher")}_threshold`]:i=>({[`&.${a(r,"switcher")} > *`]:{flexBasis:`calc((${i} - 100%) * 999)`}})},{values:{...e("width"),...e("minWidth"),...e("maxWidth")}}],({options:r,theme:e})=>[{[`${a(r,"switcher")}_limit`]:i=>{const c=f(`${i}`)||f(r.switcherLimit)||o.switcherLimit;return{[`&.${a(r,"switcher")}`]:{[`& > :nth-last-child(n+${c+1}), & > :nth-last-child(n+${c+1}) ~ *`]:{flexBasis:"100%"}}}}},{values:x(Number(r.maxSwitcherLimit),o.maxSwitcherLimit)}]]},I={static:[({options:r,theme:e})=>[{[`.${a(r,"cover")}`]:{display:"flex",flexDirection:"column",padding:l(e,"baseSpacing"),[t(r,"minHeight")]:"100vh","& > *":{[t(r,"marginTop")]:l(e,"baseSpacing"),[t(r,"marginBottom")]:l(e,"baseSpacing")},[`& > :first-child:not(.${a(r,"cover")}_${a(r,"coverTarget")})`]:{[t(r,"marginTop")]:"0"},[`& > :last-child:not(.${a(r,"cover")}_${a(r,"coverTarget")})`]:{[t(r,"marginBottom")]:"0"},[`& > .${a(r,"cover")}_${a(r,"coverTarget")}`]:{[t(r,"marginTop")]:"auto",[t(r,"marginBottom")]:"auto"},[`&.${a(r,"cover")}.${a(r,"cover")}_no-pad`]:{padding:"0"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"cover")}`]:i=>({[`&.${a(r,"cover")}`]:{padding:`${i}`,"& > *":{[t(r,"marginTop")]:`${i}`,[t(r,"marginBottom")]:`${i}`},[`& > :first-child:not(.${a(r,"cover")}_${a(r,"coverTarget")})`]:{[t(r,"marginTop")]:"0"},[`& > :last-child:not(.${a(r,"cover")}_${a(r,"coverTarget")})`]:{[t(r,"marginBottom")]:"0"},[`& > .${a(r,"cover")}_${a(r,"coverTarget")}`]:{[t(r,"marginTop")]:"auto",[t(r,"marginBottom")]:"auto"}}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"cover")}_min-${r.useLogicalProperties?"bs":"h"}`]:i=>({[`&.${a(r,"cover")}`]:{[t(r,"minHeight")]:`${i}`}})},{values:{...e("height"),...e("minHeight"),...e("maxHeight")}}]]},N={static:[({options:r,theme:e})=>[{[`.${a(r,"sidebar")}`]:{display:"flex",flexWrap:"wrap",gap:l(e,"baseSpacing"),"& > :first-child":{flexGrow:"1"},"& > :last-child":{flexBasis:"0",flexGrow:"999",[t(r,"minWidth")]:l(e,"sidebarMainMinWidth")}},[`.${a(r,"sidebar")}-end`]:{display:"flex",flexWrap:"wrap",gap:l(e,"baseSpacing"),"& > :last-child":{flexGrow:"1"},"& > :first-child":{flexBasis:"0",flexGrow:"999",[t(r,"minWidth")]:"66.666667%"}},[`.${a(r,"sidebar")}_no-stretch`]:{[`&.${a(r,"sidebar")}, &.${a(r,"sidebar")}-end`]:{alignItems:"flex-start"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"sidebar")}`]:i=>({[`&.${a(r,"sidebar")}, &.${a(r,"sidebar")}-end`]:{gap:`${i}`}})},{values:e("space")||{}}],({options:r,theme:e})=>[{[`${a(r,"sidebar")}_side-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"sidebar")}`]:{"& > :first-child":{flexBasis:`${i}`}},[`&.${a(r,"sidebar")}-end`]:{"& > :last-child":{flexBasis:`${i}`}}})},{values:e("width")?h(e("width"),i=>!i.includes("/")):{}}],({options:r,theme:e})=>[{[`${a(r,"sidebar")}_main-min-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"sidebar")}`]:{"& > :last-child":{[t(r,"minWidth")]:`${i}`}},[`&.${a(r,"sidebar")}-end`]:{"& > :first-child":{[t(r,"minWidth")]:`${i}`}}})},{values:e("width")?h(e("width"),i=>i.includes("/")):{}}]]},E={static:[({options:r,theme:e})=>[{[`.${a(r,"grid")}`]:{display:"grid",gap:l(e,"baseSpacing"),[`@supports (width:min(${l(e,"gridItemMinWidth")},100%))`]:{"&":{gridTemplateColumns:`repeat(auto-fit,minmax(min(${l(e,"gridItemMinWidth")},100%),1fr))`}}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"grid")}`]:i=>({[`&.${a(r,"grid")}`]:{gap:`${i}`}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"grid")}_item-min-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"grid")}`]:{[`@supports (width:min(${i},100%))`]:{"&":{gridTemplateColumns:`repeat(auto-fit,minmax(min(${i},100%),1fr))`}}}})},{values:{...e("minWidth"),...e("maxWidth"),...e("width")}}]]},z={static:[({options:r,theme:e})=>{const i=r.frameSelectors.split(",").map(d=>d.trim()),c=`.${a(r,"frame")}_${a(r,"frameTarget")}`,n=[...i,c].map(d=>`& > ${d}`).join(", ");return[{[`.${a(r,"frame")}`]:{aspectRatio:l(e,"frameAspectRatio"),overflow:"hidden",display:"flex",justifyContent:"center",alignItems:"center",[n]:{[t(r,"width")]:"100%",[t(r,"height")]:"100%",objectFit:"cover"}}}]}],dynamic:[({options:r,theme:e})=>[{[`${a(r,"frame")}_aspect`]:i=>({[`&.${a(r,"frame")}`]:{aspectRatio:`${i}`}})},{values:e("aspectRatio")||{}}]]},O={static:[({options:r,theme:e})=>[{[`.${a(r,"reel")}`]:{display:"flex",[t(r,"height")]:"auto",[t(r,"overflowX")]:"auto",[t(r,"overflowY")]:"hidden","& > *":{flexShrink:"0",flexGrow:"0",flexBasis:"auto"},"& > img":{[t(r,"height")]:"100%",flexBasis:"auto",width:"auto"},"& > * + *":{[t(r,"marginLeft")]:l(e,"baseSpacing")}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"reel")}`]:i=>({[`&.${a(r,"reel")}`]:{"& > * + *":{[t(r,"marginLeft")]:`${i}`}}})},{values:e("spacing")||{}}],({options:r,theme:e})=>[{[`${a(r,"reel")}_item-${r.useLogicalProperties?"is":"w"}`]:i=>({[`&.${a(r,"reel")} > *`]:{flexBasis:`${i}`}})},{values:{...e("width"),...e("maxWidth"),...e("minWidth")}}],({options:r,theme:e})=>[{[`${a(r,"reel")}_h`]:i=>({[`&.${a(r,"reel")}`]:{[t(r,"height")]:`${i}`}})},{values:{...e("height"),...e("maxHeight"),...e("minHeight")}}]]},G={static:[({options:r,theme:e})=>[{[`.${a(r,"imposter")}`]:{position:"absolute",[t(r,"top")]:"50%",[t(r,"left")]:"50%",transform:"translate(-50%, -50%)",overflow:"auto",[t(r,"maxWidth")]:`calc(100% - ${l(e,"baseSpacing")} * 2)`,[t(r,"maxHeight")]:`calc(100% - ${l(e,"baseSpacing")} * 2)`,"dialog&":{padding:"0",margin:"0"},[`&.${a(r,"imposter")}_fixed`]:{position:"fixed"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"imposter")}_m`]:i=>({[`&.${a(r,"imposter")}`]:{[t(r,"maxWidth")]:`calc(100% - ${i} * 2)`,[t(r,"maxHeight")]:`calc(100% - ${i} * 2)`}})},{values:e("spacing")||{}}]]},P={static:[({options:r,theme:e})=>[{[`.${a(r,"icon")}`]:{display:"inline-flex",alignItems:"center",gap:l(e,"iconGap"),[`& > svg, & > .${a(r,"icon")}_${a(r,"iconTarget")} > svg`]:{position:"relative",fill:"currentColor",stroke:"currentColor",[t(r,"width")]:l(e,"iconSize"),[t(r,"height")]:l(e,"iconSize")},[`&.${a(r,"icon")}_vertical`]:{flexDirection:"column"}}}]],dynamic:[({options:r,theme:e})=>[{[`${a(r,"icon")}_nudge`]:i=>({[`&.${a(r,"icon")}:not(.${a(r,"icon")}_vertical)`]:{[`& > svg, & > .${a(r,"icon")}_${a(r,"iconTarget")} > svg`]:{[t(r,"top")]:`${i}`}},[`&.${a(r,"icon")}_vertical`]:{[`& > svg, & > .${a(r,"icon")}_${a(r,"iconTarget")} > svg`]:{[t(r,"left")]:`${i}`}}})},{values:Object.entries(h(e($),i=>i.startsWith("iconNudge"))).reduce((i,[c,n])=>(i[c.replace("iconNudge","").toLowerCase()]=n,i),{}),supportsNegativeValues:!0}],({options:r,theme:e})=>[{[`${a(r,"icon")}_size`]:i=>({[`&.${a(r,"icon")}`]:{[`& > svg, & > .${a(r,"icon")}_${a(r,"iconTarget")} > svg`]:{[t(r,"width")]:`${i}`,[t(r,"height")]:`${i}`}}})},{values:{...e("width"),...e("height")}}],({options:r,theme:e})=>[{[`${a(r,"icon")}`]:i=>({[`&.${a(r,"icon")}`]:{gap:`${i}`}})},{values:e("spacing")||{}}]]},M={thin:"6px",medium:"4px",thick:"2px"},j={static:[({options:r,theme:e})=>[{[`.no-${a(r,"scrollbar")}`]:{scrollbarWidth:"none","&::-webkit-scrollbar":{display:"none"}}}]],dynamic:[({options:r,theme:e})=>[{[a(r,"scrollbar")]:i=>{const[c,n,d,m]=`${i}`.split(","),b=c??l(e,"scrollbarThumbColor"),w=n??l(e,"scrollbarTrackColor"),u=d??l(e,"scrollbarSize"),K=m??l(e,"scrollbarBorderRadius");return{scrollbarColor:`${b} ${w}`,"&::-webkit-scrollbar,&::-webkit-scrollbar-track,&::-webkit-scrollbar-corner":{backgroundColor:w},"&::-webkit-scrollbar-thumb":{borderStyle:"solid",borderColor:"transparent",backgroundClip:"content-box",backgroundColor:b,borderWidth:u==="thin"||u==="medium"||u==="thick"?M[u]:u,borderRadius:K}}}},{values:{}}]]},H={dynamic:[({options:r,theme:e})=>[{[`${a(r,"border-hc")}`]:i=>({outlineStyle:"solid",outlineColor:"transparent",outlineWidth:`${i}`,outlineOffset:`-${i}`})},{values:e("borderWidth")||{}}]]},A=v.withOptions((r=o)=>({addBase:e,addUtilities:i,matchUtilities:c,theme:n})=>{r.useGlobalMeasure&&e(...W({options:r,theme:n})),r.useGlobalScrollbarStyles&&e(...B({options:r,theme:n}));const d=m=>{if(m.static)for(const b of m.static)i(...b({options:r,theme:n}));if(m.dynamic)for(const b of m.dynamic)c(...b({options:r,theme:n}))};d(C),d(_),d(L),d(R),d(N),d(p),d(I),d(E),d(z),d(O),d(G),d(P),d(j),d(H)},(r=o)=>({theme:{[$]:S,extend:{spacing:({theme:e})=>({[r.baseSpacingKey]:`${l(e,"baseSpacing")}`,[r.measureKey]:`${l(e,"measure")}`}),maxWidth:({theme:e})=>({[r.measureKey]:`${l(e,"measure")}`}),minWidth:({theme:e})=>({[r.measureKey]:`${l(e,"measure")}`}),colors:{slay:"#ff69b4"}}}}));s.defaultOptions=o,s.defaultTheme=S,s.tailwindLayouts=A,Object.defineProperty(s,Symbol.toStringTag,{value:"Module"})});