UNPKG

tailwind-every-layout

Version:

Layout primitives for Tailwind CSS

1,025 lines (1,024 loc) 25.6 kB
function f(r, e) { return { handler: r, config: e }; } f.withOptions = function(r, e = () => ({})) { function i(l) { return { handler: r(l), config: e(l) }; } return i.__isOptionsFunction = !0, i; }; var w = f; const u = "layouts"; function c(r, e) { return r(`${u}.${e}`); } const v = { // Size width: "inlineSize", maxWidth: "maxInlineSize", minWidth: "minInlineSize", height: "blockSize", maxHeight: "maxBlockSize", minHeight: "minBlockSize", // Margin marginTop: "marginBlockStart", marginBottom: "marginBlockEnd", marginLeft: "marginInlineStart", marginRight: "marginInlineEnd", // Padding paddingTop: "paddingBlockStart", paddingBottom: "paddingBlockEnd", paddingLeft: "paddingInlineStart", paddingRight: "paddingInlineEnd", // Inset top: "insetBlockStart", bottom: "insetBlockEnd", left: "insetInlineStart", right: "insetInlineEnd", // Border Shorthand borderTop: "borderBlockStart", borderBottom: "borderBlockEnd", borderLeft: "borderInlineStart", borderRight: "borderInlineEnd", // Border Width borderTopWidth: "borderBlockStartWidth", borderBottomWidth: "borderBlockEndWidth", borderLeftWidth: "borderInlineStartWidth", borderRightWidth: "borderInlineEndWidth", // Border Color borderTopColor: "borderBlockStartColor", borderBottomColor: "borderBlockEndColor", borderLeftColor: "borderInlineStartColor", borderRightColor: "borderInlineEndColor", // Border Style borderTopStyle: "borderBlockStartStyle", borderBottomStyle: "borderBlockEndStyle", borderLeftStyle: "borderInlineStartStyle", borderRightStyle: "borderInlineEndStyle", // Border Radius borderTopLeftRadius: "borderStartStartRadius", borderTopRightRadius: "borderStartEndRadius", borderBottomRightRadius: "borderEndEndRadius", borderBottomLeftRadius: "borderEndStartRadius", // Overflow overflowX: "overflowInline", overflowY: "overflowBlock" }, t = (r, e) => r.useLogicalProperties ? v[e] : e, x = (r, e) => Array.from( { length: isNaN(Number(r)) ? e : Number(r) }, (i, l) => l + 1 ).reduce((i, l) => (i[`${l}`] = l, i), {}), a = (r, e) => r.classNames[e], $ = (r, e) => Object.keys(r).reduce((i, l) => (e(l) && (i[l] = r[l]), i), {}), k = (r) => Object.entries(r).reduce((e, [i, l]) => (typeof l == "string" ? e[i] = l : Object.entries(l).forEach(([n, d]) => { e[`${i}-${n}`] = d; }), e), {}), g = { 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" }, y = { measure: "65ch", baseSpacing: "1rem", sidebarMainMinWidth: "66.666667%", gridItemMinWidth: "250px", frameAspectRatio: "16/9", iconSize: "0.9em", // a value that seems to work well for most icon families iconGap: "0.3em", // a little more than a typical space character which is usually a fourth of an em 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")]: `${c(e, "measure")}` }, [`${r.measureExceptions}`]: { [t(r, "maxWidth")]: "none" } } ], B = { thin: "6px", medium: "4px", thick: "2px" }, C = ({ options: r, theme: e }) => [ { "*": { scrollbarColor: `${c(e, "scrollbarThumbColor")} ${c( e, "scrollbarTrackColor" )}` }, "::-webkit-scrollbar,::-webkit-scrollbar-track,::-webkit-scrollbar-corner": { backgroundColor: c(e, "scrollbarTrackColor") }, "::-webkit-scrollbar-thumb": { borderStyle: "solid", borderColor: "transparent", backgroundClip: "content-box", backgroundColor: c(e, "scrollbarThumbColor"), borderWidth: `${B[c(e, "scrollbarSize")]}`, borderRadius: c(e, "scrollbarBorderRadius") } } ], _ = { 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")]: c(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), g.maxStackSplitAfter ) } ] ] }, T = { static: [ ({ options: r, theme: e }) => [ { [`.${a(r, "box")}`]: { padding: c(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", // this allows padding (if any) to grow out without infringing upon maxInlineSize (which would happen with `border-box`) [t(r, "marginLeft")]: "auto", [t(r, "marginRight")]: "auto", [t(r, "maxWidth")]: c(e, "measure"), // center child elements based on content width [`&.${a(r, "center")}_intrinsic`]: { display: "flex", flexDirection: "column", alignItems: "center" }, // center text too [`&.${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: c(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") } } ] ] }, b = (r) => isNaN(Number(r)) ? null : Number(r), I = { static: [ ({ options: r, theme: e }) => { const i = b(r.switcherLimit) || g.switcherLimit; return [ { [`.${a(r, "switcher")}`]: { display: "flex", flexWrap: "wrap", gap: c(e, "baseSpacing"), "& > *": { flexGrow: "1", flexBasis: `calc((${c( e, "measure" )} - 100%) * 999)` }, // HACK: overspecify to override `flexBasis` from `threshold` prop [`&.${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 l = b(`${i}`) || b(r.switcherLimit) || g.switcherLimit; return { [`&.${a(r, "switcher")}`]: { [`& > :nth-last-child(n+${l + 1}), & > :nth-last-child(n+${l + 1}) ~ *`]: { flexBasis: "100%" } } }; } }, { values: x( Number(r.maxSwitcherLimit), g.maxSwitcherLimit ) } ] ] }, N = { static: [ ({ options: r, theme: e }) => [ { [`.${a(r, "cover")}`]: { display: "flex", flexDirection: "column", padding: c(e, "baseSpacing"), [t(r, "minHeight")]: "100vh", "& > *": { [t(r, "marginTop")]: c(e, "baseSpacing"), [t(r, "marginBottom")]: c(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" }, // HACK: overspecify to override `padding` from `space` prop [`&.${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") } } ] ] }, p = { static: [ ({ options: r, theme: e }) => [ { [`.${a(r, "sidebar")}`]: { display: "flex", flexWrap: "wrap", gap: c(e, "baseSpacing"), // side "& > :first-child": { flexGrow: "1" }, // content "& > :last-child": { flexBasis: "0", flexGrow: "999", [t(r, "minWidth")]: c(e, "sidebarMainMinWidth") } }, // sidebar on the right [`.${a(r, "sidebar")}-end`]: { display: "flex", flexWrap: "wrap", gap: c(e, "baseSpacing"), // side "& > :last-child": { flexGrow: "1" }, // content "& > :first-child": { flexBasis: "0", flexGrow: "999", [t(r, "minWidth")]: "66.666667%" } }, // adjacent elements adopt their natural height [`.${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") ? $( 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") ? $( e("width"), (i) => i.includes("/") ) : {} } ] ] }, E = { static: [ ({ options: r, theme: e }) => [ { [`.${a(r, "grid")}`]: { display: "grid", gap: c(e, "baseSpacing"), [`@supports (width:min(${c( e, "gridItemMinWidth" )},100%))`]: { "&": { gridTemplateColumns: `repeat(auto-fit,minmax(min(${c( 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()), l = `.${a(r, "frame")}_${a( r, "frameTarget" )}`, n = [...i, l].map((d) => `& > ${d}`).join(", "); return [ { [`.${a(r, "frame")}`]: { aspectRatio: c(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") || {} } ] ] }, G = { 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")]: c(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") } } ] ] }, O = { 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% - ${c( e, "baseSpacing" )} * 2)`, [t(r, "maxHeight")]: `calc(100% - ${c( 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: c(e, "iconGap"), [`& > svg, & > .${a(r, "icon")}_${a( r, "iconTarget" )} > svg`]: { position: "relative", fill: "currentColor", stroke: "currentColor", [t(r, "width")]: c(e, "iconSize"), [t(r, "height")]: c(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( $( e(u), (i) => i.startsWith("iconNudge") ) ).reduce((i, [l, n]) => (i[l.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") || {} } ] ] }, H = { thin: "6px", medium: "4px", thick: "2px" }, M = { 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 [l, n, d, s] = `${i}`.split(","), o = l ?? c(e, "scrollbarThumbColor"), h = n ?? c(e, "scrollbarTrackColor"), m = d ?? c(e, "scrollbarSize"), S = s ?? c(e, "scrollbarBorderRadius"); return { scrollbarColor: `${o} ${h}`, "&::-webkit-scrollbar,&::-webkit-scrollbar-track,&::-webkit-scrollbar-corner": { backgroundColor: h }, "&::-webkit-scrollbar-thumb": { borderStyle: "solid", borderColor: "transparent", backgroundClip: "content-box", backgroundColor: o, borderWidth: m === "thin" || m === "medium" || m === "thick" ? H[m] : m, borderRadius: S } }; } }, { values: {} } ] ] }, j = { dynamic: [ ({ options: r, theme: e }) => [ { [`${a(r, "border-hc")}`]: (i) => ({ outlineStyle: "solid", outlineColor: "transparent", outlineWidth: `${i}`, outlineOffset: `-${i}` }) }, { values: e("borderWidth") || {} } ] ] }, A = w.withOptions( (r = g) => ({ addBase: e, addUtilities: i, matchUtilities: l, theme: n }) => { r.useGlobalMeasure && e(...W({ options: r, theme: n })), r.useGlobalScrollbarStyles && e(...C({ options: r, theme: n })); const d = (s) => { if (s.static) for (const o of s.static) i(...o({ options: r, theme: n })); if (s.dynamic) for (const o of s.dynamic) l(...o({ options: r, theme: n })); }; d(_), d(T), d(L), d(R), d(p), d(I), d(N), d(E), d(z), d(G), d(O), d(P), d(M), d(j); }, (r = g) => ({ theme: { [u]: y, extend: { spacing: ({ theme: e }) => ({ [r.baseSpacingKey]: `${c(e, "baseSpacing")}`, [r.measureKey]: `${c(e, "measure")}` }), maxWidth: ({ theme: e }) => ({ [r.measureKey]: `${c(e, "measure")}` }), minWidth: ({ theme: e }) => ({ [r.measureKey]: `${c(e, "measure")}` }), colors: { slay: "#ff69b4" } } } }) ); export { g as defaultOptions, y as defaultTheme, A as tailwindLayouts };