@bedrock-layout/solid 0.11.4 → 0.11.7

package/README.md

@@ -1,23 +1,23 @@
-# `@bedrock-layout/primitives`
+# `@bedrock-layout/solid`
 
-All the primitives and hooks in a single package.
+All the layout primitives and solid primitives in a single package.
 
-Full docs at: [bedrock-layout.dev](https://bedrock-layout.dev/)
+Full docs at: [solid.bedrock-layout.dev](https://solid.bedrock-layout.dev/)
 
 ## How to install
 
-`npm install @bedrock-layout/primitives`
+`npm install @bedrock-layout/solid`
 
 or
 
-`yarn add @bedrock-laylock/primitives`
+`yarn add @bedrock-laylock/solid`
 
 ---
 
 ## Usage
 
 ```javascript
-import { Stack, Inline, Split, Cover, Frame } from '@bedrock-layout/primitives';
+import { Stack, Inline, Split, Cover, Frame } from '@bedrock-layout/solid';
 
 export function Hero() {
   return (

package/lib/index.cjs.js

@@ -1,4 +1,4 @@
-"use strict";var H=Object.defineProperty,F=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var I=Object.prototype.hasOwnProperty,j=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))I.call(t,n)&&M(e,n,t[n]);if(p)for(var n of p(t))j.call(t,n)&&M(e,n,t[n]);return e},m=(e,t)=>F(e,G(t));var P=(e,t)=>{var n={};for(var r in e)I.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&p)for(var r of p(e))t.indexOf(r)<0&&j.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var o=require("solid-styled-components"),v=require("@bedrock-layout/register-resize-callback"),s=require("solid-js");function A(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const R={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function N(e){return e.reduce((t,[n,r])=>m(f({},t),{[n]:r}),{})}const d=(e,t)=>{var a,l;const n=(l=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?l:R,i=N(Object.entries(n).map(([u,g])=>[u,typeof g=="number"?`${g}px`:g]))[e];return A(i)?i:void 0};function _(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const q=o.styled.div`
+"use strict";var H=Object.defineProperty,F=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var p=Object.getOwnPropertySymbols;var j=Object.prototype.hasOwnProperty,I=Object.prototype.propertyIsEnumerable;var M=(e,t,n)=>t in e?H(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,f=(e,t)=>{for(var n in t||(t={}))j.call(t,n)&&M(e,n,t[n]);if(p)for(var n of p(t))I.call(t,n)&&M(e,n,t[n]);return e},m=(e,t)=>F(e,G(t));var P=(e,t)=>{var n={};for(var r in e)j.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(e!=null&&p)for(var r of p(e))t.indexOf(r)<0&&I.call(e,r)&&(n[r]=e[r]);return n};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});var s=require("solid-styled-components"),v=require("@bedrock-layout/register-resize-callback"),o=require("solid-js");function A(e){return typeof e!="string"?!1:[/^[0-9]{0,10000}\.?[0-9]{1,10000}(vmin|vmax|vh|vw|%|ch|ex|em|rem|in|cm|mm|pt|pc|px)$/,/^var\(--\D{1,100}\)$/].some(t=>t.test(e))}const R={none:"0px",xxs:"0.0625rem",xs:"0.125rem",sm:"0.25rem",md:"0.5rem",mdLg:"0.75rem",lg:"1rem",lgXl:"1.5rem",xl:"2rem",xlXXl:"3rem",xxl:"4rem"};function N(e){return e.reduce((t,[n,r])=>m(f({},t),{[n]:r}),{})}const d=(e,t)=>{var a,l;const n=(l=(a=t==null?void 0:t.space)!=null?a:t==null?void 0:t.spacing)!=null?l:R,i=N(Object.entries(n).map(([u,g])=>[u,typeof g=="number"?`${g}px`:g]))[e];return A(i)?i:void 0};function _(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const q=s.styled.div`
   @property --maxWidth {
     syntax: "<length-percentage>";
     inherits: false;
@@ -17,20 +17,20 @@
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?o.css`
+  ${e=>e.centerChildren?`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?o.css`
+  ${e=>e.centerText?`
           text-align: center;
         `:""}
-`;function Q(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const U=o.styled("div")`
+`;function Q(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}const U=s.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
-    initial-value: 100%;
+    initial-value: 159px;
   }
 
   @property --gutter {
@@ -45,22 +45,23 @@
   box-sizing: border-box;
   > * {
     margin: 0;
-    flex-basis: var(--basis, 100%);
+    flex-basis: var(--basis, 159px);
     flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
     flex-shrink: 1;
   }
 
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: var(--gutter, 0px);
-`;function $(e){throw new Error(e)}function J(e){typeof e!="number"&&!Array.isArray(e)&&$("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&$("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&$(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){J(e);const[n,r]=s.createSignal(!1),[i,c]=s.createSignal();return s.onMount(()=>{v.init()}),s.createEffect(()=>{if(i(),i()===void 0||i()===null)return;t&&t(i());const a=v.registerCallback(i(),l=>{var g,y;const u=(y=(g=l.borderBoxSize)==null?void 0:g.inlineSize)!=null?y:l.contentRect.width;if(u>0){const S=Array.isArray(e)?u>=e[0]&&u<=e[1]:u<=e;r(S)}});s.onCleanup(a)}),[n,c]}function K(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function Y(e){return Array.isArray(e)?e.join("/"):e}function Z(e){return K(e)?Y(e):void 0}const ee=o.styled.div`
+`;function $(e){throw new Error(e)}function J(e){typeof e!="number"&&!Array.isArray(e)&&$("width must be a number or an array of two numbers"),Array().concat(e).some(n=>n<0)&&$("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&$(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){J(e);const[n,r]=o.createSignal(!1),[i,c]=o.createSignal();return o.onMount(()=>{v.init()}),o.createEffect(()=>{if(i(),i()===void 0||i()===null)return;t&&t(i());const a=v.registerCallback(i(),l=>{var g,y;const u=(y=(g=l.borderBoxSize)==null?void 0:g.inlineSize)!=null?y:l.contentRect.width;if(u>0){const S=Array.isArray(e)?u>=e[0]&&u<=e[1]:u<=e;r(S)}});o.onCleanup(a)}),[n,c]}function K(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function Y(e){return Array.isArray(e)?e.join("/"):e}function Z(e){return K(e)?Y(e):void 0}const ee=s.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
   position: relative;
   overflow: hidden;
 
-  ${e=>{const t=Z(e.ratio);return t?o.css`
+  ${e=>{const t=Z(e.ratio);return t?s.css`
         aspect-ratio: ${t};
       `:""}};
 
@@ -88,7 +89,7 @@
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,T=o.styled("div")`
+`,B=s.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -116,16 +117,16 @@
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,h=96;function O(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function x(e,t){if(!e)return null;const n=t!=null?t:document.body,r=(e!=null?e:"px").trim().toLowerCase();switch(r){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return te(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return h;case"cm":return h/2.54;case"mm":return h/25.4;case"pt":return h/72;case"pc":return h/6;case"px":return 1;default:{const[i,c]=O(r);if(isNaN(i))return null;if(!c)return i;const a=x(c,t);return typeof a=="number"?i*a:null}}}function C(e,t){var i;const[n,r]=O(getComputedStyle(e).getPropertyValue(t));return n*((i=x(r,e))!=null?i:1)}function te(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=C(n,"height")/128;return t.removeChild(n),r}const ne=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,re=o.styled.div`
+`,x=96;function O(e){var r;e=String(e);const t=parseFloat(e),[,n]=(r=e.match(/[\d.\-+]*\s*(.*)/))!=null?r:["",""];return[t,n]}function h(e,t){if(!e)return null;const n=t!=null?t:document.body,r=(e!=null?e:"px").trim().toLowerCase();switch(r){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return te(r,n);case"em":return C(n,"font-size");case"rem":return C(document.body,"font-size");case"in":return x;case"cm":return x/2.54;case"mm":return x/25.4;case"pt":return x/72;case"pc":return x/6;case"px":return 1;default:{const[i,c]=O(r);if(isNaN(i))return null;if(!c)return i;const a=h(c,t);return typeof a=="number"?i*a:null}}}function C(e,t){var i;const[n,r]=O(getComputedStyle(e).getPropertyValue(t));return n*((i=h(r,e))!=null?i:1)}function te(e,t){const n=document.createElement("div");n.style.height="128"+e,t.appendChild(n);const r=C(n,"height")/128;return t.removeChild(n),r}const ne=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,re=s.styled.div`
   grid-row: span var(--rows, 1);
 
   > * {
     display: block;
     height: 100%;
   }
-`,ie=e=>{const[t,n]=s.createSignal(1),[r,i]=s.createSignal(),c=o.useTheme();return s.onMount(()=>{v.init()}),s.createEffect(()=>{const a=r();if(a==null)return;const l=v.registerCallback(a,({target:u})=>{var z;n(1);const g=e.gutter&&(z=d(e.gutter,c))!=null?z:"1px",y=ne?x(g,u):null,S=Math.max(y!=null?y:1,1),[L]=Array.from(u.children),D=1+Math.min(u.scrollHeight,L.scrollHeight),X=Math.ceil(D/S);n(X)});s.onCleanup(l)}),React.createElement(re,{style:`--rows: ${t()}`,ref:i},e.children)},ae=o.styled(T)`
+`,ie=e=>{const[t,n]=o.createSignal(1),[r,i]=o.createSignal(),c=s.useTheme();return o.onMount(()=>{v.init()}),o.createEffect(()=>{const a=r();if(a==null)return;const l=v.registerCallback(a,({target:u})=>{var z;n(1);const g=e.gutter&&(z=d(e.gutter,c))!=null?z:"1px",y=ne?h(g,u):null,S=Math.max(y!=null?y:1,1),[L]=Array.from(u.children),D=1+Math.min(u.scrollHeight,L.scrollHeight),X=Math.ceil(D/S);n(X)});o.onCleanup(l)}),React.createElement(re,{style:`--rows: ${t()}`,ref:i},e.children)},ae=s.styled(B)`
   grid-template-rows: 1px;
-`,oe=e=>{const t=s.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(i=>React.createElement(ie,{gutter:e.gutter},i));return React.createElement(ae,f({},e),r)},b={start:"flex-start",end:"flex-end",center:"center"},w=m(f({},b),{stretch:"stretch"}),V=o.styled.div`
+`,oe=e=>{const t=o.children(()=>e.children),r=[].concat(t()).filter(Boolean).map(i=>React.createElement(ie,{gutter:e.gutter},i));return React.createElement(ae,f({},e),r)},b={start:"flex-start",end:"flex-end",center:"center"},w=m(f({},b),{stretch:"stretch"}),V=s.styled.div`
   --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
@@ -140,7 +141,7 @@
   justify-content: ${e=>typeof e.justify!="undefined"&&b[e.justify]?b[e.justify]:b.start};
 
   align-items: ${e=>typeof e.align!="undefined"&&w[e.align]?w[e.align]:w.start};
-`;function se(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ce=o.styled(V)`
+`;function se(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const ce=s.styled(V)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -168,10 +169,10 @@
             );
           }
         `:""}
-`,W=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),le=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function ue(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function de(e,t){var c;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((c=e==null?void 0:e.spacing)!=null?c:R));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>n.has(a)):t&&Object.keys(t).every(a=>W.has(a))&&Object.values(t).every(a=>n.has(a)))()||console.error("Invalid padding Type");const i=ue(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[l,u])=>W.has(l)?a+le(l,i(u)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>i(a)).join(" ")};`:""}const fe=o.styled.div`
+`,W=new Set(["left","right","top","bottom","inlineStart","inlineEnd","blockStart","blockEnd"]),le=(e,t)=>({left:`padding-inline-start:${t};`,right:`padding-inline-end:${t};`,top:`padding-block-start:${t};`,bottom:`padding-block-end:${t};`,inlineStart:`padding-inline-start:${t};`,inlineEnd:`padding-inline-end:${t};`,blockStart:`padding-block-start:${t};`,blockEnd:`padding-block-end:${t};`})[e];function ue(e){return t=>{const n=d(t,e);return n!=null?n:"0px"}}function de(e,t){var c;if(Array.isArray(t)&&t.length>4)throw new Error("padding arrays can only be 4 or less in length");const n=new Set(Object.keys((c=e==null?void 0:e.spacing)!=null?c:R));(()=>typeof t=="string"?!0:Array.isArray(t)?t.every(a=>n.has(a)):t&&Object.keys(t).every(a=>W.has(a))&&Object.values(t).every(a=>n.has(a)))()||console.error("Invalid padding Type");const i=ue(e);return typeof t=="object"&&!Array.isArray(t)?Object.entries(t).reduce((a,[l,u])=>W.has(l)?a+le(l,i(u)):a,""):t!==void 0?`padding: ${Array.from(Array.isArray(t)?t:[t]).map(a=>i(a)).join(" ")};`:""}const fe=s.styled.div`
   box-sizing: border-box;
   ${e=>de(e.theme,e.padding)}
-`,ge=o.styled.div`
+`,ge=s.styled.div`
   box-sizing: border-box;
   > * {
     margin: 0;
@@ -185,8 +186,8 @@
 
   overflow-x: scroll;
 
-  scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
-`,E=o.styled("div")`
+  scroll-snap-type: ${e=>{switch(e.snapType){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
+`,E=s.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -207,7 +208,7 @@
   & > [data-bedrock-column] {
     grid-column: span 1 / auto;
   }
-`,B={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},me=o.styled.div`
+`,T={"1/4":"1fr 3fr","1/3":"1fr 2fr","1/2":"1fr 1fr","2/3":"2fr 1fr","3/4":"3fr 1fr","auto-start":"auto 1fr","auto-end":"1fr auto"},me=s.styled.div`
     box-sizing: border-box;
     > * {
       margin: 0;
@@ -217,8 +218,8 @@
   
     display: grid;
     gap: var(--gutter, 0px);
-    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=B[e])!=null?t:B["1/2"]}}};
-  `,ye=e=>{const t=typeof e.switchAt=="string"?x(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n,e.ref);return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(me,m(f({fraction:e.fraction},e),{ref:i}))),React.createElement(s.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:i}))))};function he(e){return typeof e=="number"?`${e}px`:e&&A(e)?e:"100vh"}const xe=o.styled.div`
+    grid-template-columns: ${({fraction:e="1/2"})=>{var t;return(t=T[e])!=null?t:T["1/2"]}}};
+  `,ye=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n,e.ref);return React.createElement(o.Switch,null,React.createElement(o.Match,{when:r()===!1},React.createElement(me,m(f({fraction:e.fraction},e),{ref:i}))),React.createElement(o.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:i}))))};function xe(e){return typeof e=="number"?`${e}px`:e&&A(e)?e:"100vh"}const he=s.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -233,7 +234,7 @@
 
   --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
 
-  --minHeight: ${e=>he(e.minHeight)};
+  --minHeight: ${e=>xe(e.minHeight)};
 
   > * {
     margin: 0;
@@ -258,7 +259,7 @@
             }
           `:""};
   }
-`,pe=e=>{const c=e,{top:t,bottom:n,children:r}=c,i=P(c,["top","bottom","children"]);return React.createElement(xe,f({},i),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},be=o.styled.div`
+`,pe=e=>{const c=e,{top:t,bottom:n,children:r}=c,i=P(c,["top","bottom","children"]);return React.createElement(he,f({},i),e.top,React.createElement("div",{"data-bedrock-cover-centered":!0},e.children),e.bottom)},be=s.styled.div`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -283,7 +284,7 @@
   grid-template-columns: repeat(var(--columns, 1), 1fr);
   gap: var(--gutter, 0px);
   grid-auto-flow: row ${({dense:e=!1})=>e===!0?"dense":""};
-`,ve=e=>{const t=typeof e.switchAt=="string"?x(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n),c=a=>{var l;i(a),(l=e.ref)==null||l.call(e,a)};return React.createElement(s.Switch,null,React.createElement(s.Match,{when:r()===!1},React.createElement(be,m(f({},e),{ref:c}))),React.createElement(s.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:c}))))},Se=e=>typeof e=="number"?e:1,$e=o.styled.div`
+`,ve=e=>{const t=typeof e.switchAt=="string"?h(e.switchAt):e.switchAt,n=t&&t>-1?t:0,[r,i]=k(n),c=a=>{var l;i(a),(l=e.ref)==null||l.call(e,a)};return React.createElement(o.Switch,null,React.createElement(o.Match,{when:r()===!1},React.createElement(be,m(f({},e),{ref:c}))),React.createElement(o.Match,{when:r()===!0},React.createElement(E,m(f({},e),{ref:c}))))},Se=e=>typeof e=="number"?e:1,$e=s.styled.div`
   @property --span {
     syntax: "<number>";
     inherits: true;
@@ -314,4 +315,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
     grid-column: span min(${e.offsetEnd}, var(--columns, 1));
   }
   `:""}
-`;exports.Center=q;exports.Column=$e;exports.ColumnDrop=U;exports.Columns=ve;exports.Cover=pe;exports.Frame=ee;exports.Grid=T;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=oe;exports.PadBox=fe;exports.Reel=ge;exports.Split=ye;exports.Stack=E;exports.checkIsCSSLength=A;exports.createContainerQuery=k;exports.getSpacingValue=d;exports.spacing=R;
+`;exports.Center=q;exports.Column=$e;exports.ColumnDrop=U;exports.Columns=ve;exports.Cover=pe;exports.Frame=ee;exports.Grid=B;exports.Inline=ce;exports.InlineCluster=V;exports.MasonryGrid=oe;exports.PadBox=fe;exports.Reel=ge;exports.Split=ye;exports.Stack=E;exports.checkIsCSSLength=A;exports.createContainerQuery=k;exports.getSpacingValue=d;exports.spacing=R;

package/lib/index.m.js

@@ -95,19 +95,19 @@ const Center = styled.div`
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${(props) => props.centerChildren ? css`
+  ${(props) => props.centerChildren ? `
           display: flex;
           flex-direction: column;
           align-items: center;
         ` : ""}
 
-  ${(props) => props.centerText ? css`
+  ${(props) => props.centerText ? `
           text-align: center;
         ` : ""}
 `;
 function getSafeBasis(basis) {
   if (basis === void 0)
-    return "100%";
+    return "159px";
   if (typeof basis === "number")
     return `${basis}px`;
   return basis;
@@ -116,7 +116,7 @@ const ColumnDrop = styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
-    initial-value: 100%;
+    initial-value: 159px;
   }
 
   @property --gutter {
@@ -134,13 +134,14 @@ const ColumnDrop = styled("div")`
   box-sizing: border-box;
   > * {
     margin: 0;
-    flex-basis: var(--basis, 100%);
+    flex-basis: var(--basis, 159px);
     flex-grow: ${(props) => props.noStretchedColumns ? "0" : "1"};
     flex-shrink: 1;
   }
 
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: var(--gutter, 0px);
 `;
 function fail(msg) {
@@ -519,8 +520,8 @@ const Reel = styled.div`
 
   overflow-x: scroll;
 
-  scroll-snap-type: ${({ snapType = "none" }) => {
-  switch (snapType) {
+  scroll-snap-type: ${(props) => {
+  switch (props.snapType) {
     case "none": {
       return "none";
     }

package/lib/index.umd.js

@@ -17,20 +17,20 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
 
   max-inline-size: var(--maxWidth, 100%);
 
-  ${e=>e.centerChildren?r.css`
+  ${e=>e.centerChildren?`
           display: flex;
           flex-direction: column;
           align-items: center;
         `:""}
 
-  ${e=>e.centerText?r.css`
+  ${e=>e.centerText?`
           text-align: center;
         `:""}
-`;function F(e){return e===void 0?"100%":typeof e=="number"?`${e}px`:e}const G=r.styled("div")`
+`;function F(e){return e===void 0?"159px":typeof e=="number"?`${e}px`:e}const G=r.styled("div")`
   @property --basis {
     syntax: "<length-percentage>";
     inherits: true;
-    initial-value: 100%;
+    initial-value: 159px;
   }
 
   @property --gutter {
@@ -45,15 +45,16 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
   box-sizing: border-box;
   > * {
     margin: 0;
-    flex-basis: var(--basis, 100%);
+    flex-basis: var(--basis, 159px);
     flex-grow: ${e=>e.noStretchedColumns?"0":"1"};
     flex-shrink: 1;
   }
 
   display: flex;
   flex-wrap: wrap;
+  justify-content: center;
   gap: var(--gutter, 0px);
-`;function A(e){throw new Error(e)}function N(e){typeof e!="number"&&!Array.isArray(e)&&A("width must be a number or an array of two numbers"),Array().concat(e).some(i=>i<0)&&A("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&A(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){N(e);const[i,o]=c.createSignal(!1),[a,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{if(a(),a()===void 0||a()===null)return;t&&t(a());const s=l.registerCallback(a(),f=>{var h,x;const g=(x=(h=f.borderBoxSize)==null?void 0:h.inlineSize)!=null?x:f.contentRect.width;if(g>0){const M=Array.isArray(e)?g>=e[0]&&g<=e[1]:g<=e;o(M)}});c.onCleanup(s)}),[i,u]}function _(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function q(e){return Array.isArray(e)?e.join("/"):e}function Q(e){return _(e)?q(e):void 0}const U=r.styled.div`
+`;function A(e){throw new Error(e)}function N(e){typeof e!="number"&&!Array.isArray(e)&&A("width must be a number or an array of two numbers"),Array().concat(e).some(i=>i<0)&&A("width value(s) must be 0 or greater"),Array.isArray(e)&&(e.length!==2||e[0]>e[1])&&A(`The second width value, ${e[1]}, is not larger than ${e[0]}. Please provide a value greater than first width value`)}function k(e,t){N(e);const[i,o]=c.createSignal(!1),[a,u]=c.createSignal();return c.onMount(()=>{l.init()}),c.createEffect(()=>{if(a(),a()===void 0||a()===null)return;t&&t(a());const s=l.registerCallback(a(),f=>{var h,x;const g=(x=(h=f.borderBoxSize)==null?void 0:h.inlineSize)!=null?x:f.contentRect.width;if(g>0){const j=Array.isArray(e)?g>=e[0]&&g<=e[1]:g<=e;o(j)}});c.onCleanup(s)}),[i,u]}function _(e){return Array.isArray(e)&&e.length===2&&e.every(Number.isFinite)||typeof e=="string"&&/^\d{1,1000} {0,1}\/ {0,1}\d{1,1000}$/.test(e)}function q(e){return Array.isArray(e)?e.join("/"):e}function Q(e){return _(e)?q(e):void 0}const U=r.styled.div`
   box-sizing: border-box;
   display: block;
   inline-size: 100%;
@@ -88,7 +89,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
     object-fit: cover;
     object-position: ${e=>typeof e.position=="string"?e.position:"50%"};
   }
-`,j=r.styled("div")`
+`,M=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
     inherits: false;
@@ -116,16 +117,16 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
     auto-fit,
     minmax(min(var(--minItemWidth, 639px), 100%), 1fr)
   );
-`,b=96;function I(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function v(e,t){if(!e)return null;const i=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return K(o,i);case"em":return R(i,"font-size");case"rem":return R(document.body,"font-size");case"in":return b;case"cm":return b/2.54;case"mm":return b/25.4;case"pt":return b/72;case"pc":return b/6;case"px":return 1;default:{const[a,u]=I(o);if(isNaN(a))return null;if(!u)return a;const s=v(u,t);return typeof s=="number"?a*s:null}}}function R(e,t){var a;const[i,o]=I(getComputedStyle(e).getPropertyValue(t));return i*((a=v(o,e))!=null?a:1)}function K(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=R(i,"height")/128;return t.removeChild(i),o}const Y=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Z=r.styled.div`
+`,b=96;function C(e){var o;e=String(e);const t=parseFloat(e),[,i]=(o=e.match(/[\d.\-+]*\s*(.*)/))!=null?o:["",""];return[t,i]}function v(e,t){if(!e)return null;const i=t!=null?t:document.body,o=(e!=null?e:"px").trim().toLowerCase();switch(o){case"vmin":case"vmax":case"vh":case"vw":case"%":return null;case"ch":case"ex":return K(o,i);case"em":return R(i,"font-size");case"rem":return R(document.body,"font-size");case"in":return b;case"cm":return b/2.54;case"mm":return b/25.4;case"pt":return b/72;case"pc":return b/6;case"px":return 1;default:{const[a,u]=C(o);if(isNaN(a))return null;if(!u)return a;const s=v(u,t);return typeof s=="number"?a*s:null}}}function R(e,t){var a;const[i,o]=C(getComputedStyle(e).getPropertyValue(t));return i*((a=v(o,e))!=null?a:1)}function K(e,t){const i=document.createElement("div");i.style.height="128"+e,t.appendChild(i);const o=R(i,"height")/128;return t.removeChild(i),o}const Y=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,Z=r.styled.div`
   grid-row: span var(--rows, 1);
 
   > * {
     display: block;
     height: 100%;
   }
-`,J=e=>{const[t,i]=c.createSignal(1),[o,a]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const s=o();if(s==null)return;const f=l.registerCallback(s,({target:g})=>{var W;i(1);const h=e.gutter&&(W=d(e.gutter,u))!=null?W:"1px",x=Y?v(h,g):null,M=Math.max(x!=null?x:1,1),[be]=Array.from(g.children),ve=1+Math.min(g.scrollHeight,be.scrollHeight),pe=Math.ceil(ve/M);i(pe)});c.onCleanup(f)}),React.createElement(Z,{style:`--rows: ${t()}`,ref:a},e.children)},ee=r.styled(j)`
+`,J=e=>{const[t,i]=c.createSignal(1),[o,a]=c.createSignal(),u=r.useTheme();return c.onMount(()=>{l.init()}),c.createEffect(()=>{const s=o();if(s==null)return;const f=l.registerCallback(s,({target:g})=>{var W;i(1);const h=e.gutter&&(W=d(e.gutter,u))!=null?W:"1px",x=Y?v(h,g):null,j=Math.max(x!=null?x:1,1),[be]=Array.from(g.children),ve=1+Math.min(g.scrollHeight,be.scrollHeight),pe=Math.ceil(ve/j);i(pe)});c.onCleanup(f)}),React.createElement(Z,{style:`--rows: ${t()}`,ref:a},e.children)},ee=r.styled(M)`
   grid-template-rows: 1px;
-`,te=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(a=>React.createElement(J,{gutter:e.gutter},a));return React.createElement(ee,m({},e),o)},p={start:"flex-start",end:"flex-end",center:"center"},E=y(m({},p),{stretch:"stretch"}),C=r.styled.div`
+`,te=e=>{const t=c.children(()=>e.children),o=[].concat(t()).filter(Boolean).map(a=>React.createElement(J,{gutter:e.gutter},a));return React.createElement(ee,m({},e),o)},p={start:"flex-start",end:"flex-end",center:"center"},E=y(m({},p),{stretch:"stretch"}),I=r.styled.div`
   --gutter: ${e=>{var t;return e.gutter&&(t=d(e.gutter,e.theme))!=null?t:"0px"}};
 
   box-sizing: border-box;
@@ -140,7 +141,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
   justify-content: ${e=>typeof e.justify!="undefined"&&p[e.justify]?p[e.justify]:p.start};
 
   align-items: ${e=>typeof e.align!="undefined"&&E[e.align]?E[e.align]:E.start};
-`;function ne(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const re=r.styled(C)`
+`;function ne(e){return typeof e=="number"&&e>-1?!0:typeof e=="string"&&typeof CSS!==void 0?CSS.supports(`height: ${e}`):!1}const re=r.styled(I)`
   @property --switchAt {
     syntax: "<length-percentage>";
     inherits: true;
@@ -185,7 +186,7 @@ var $e=Object.defineProperty,we=Object.defineProperties;var Se=Object.getOwnProp
 
   overflow-x: scroll;
 
-  scroll-snap-type: ${({snapType:e="none"})=>{switch(e){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
+  scroll-snap-type: ${e=>{switch(e.snapType){case"none":return"none";case"proximity":return"x proximity";case"mandatory":return"x mandatory";default:return"none"}}};
 `,z=r.styled("div")`
   @property --gutter {
     syntax: "<length-percentage>";
@@ -314,4 +315,4 @@ ${e=>e.offsetEnd&&e.offsetEnd>0?`
     grid-column: span min(${e.offsetEnd}, var(--columns, 1));
   }
   `:""}
-`;n.Center=H,n.Column=xe,n.ColumnDrop=G,n.Columns=he,n.Cover=de,n.Frame=U,n.Grid=j,n.Inline=re,n.InlineCluster=C,n.MasonryGrid=te,n.PadBox=oe,n.Reel=se,n.Split=ue,n.Stack=z,n.checkIsCSSLength=w,n.createContainerQuery=k,n.getSpacingValue=d,n.spacing=S,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+`;n.Center=H,n.Column=xe,n.ColumnDrop=G,n.Columns=he,n.Cover=de,n.Frame=U,n.Grid=M,n.Inline=re,n.InlineCluster=I,n.MasonryGrid=te,n.PadBox=oe,n.Reel=se,n.Split=ue,n.Stack=z,n.checkIsCSSLength=w,n.createContainerQuery=k,n.getSpacingValue=d,n.spacing=S,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/lib/reel.d.ts

@@ -1,7 +1,7 @@
 import { SpacingOptions } from "./spacing-constants";
 export interface ReelProps {
     snapType?: "none" | "proximity" | "mandatory";
-    gutter: SpacingOptions;
+    gutter?: SpacingOptions;
 }
 export declare const Reel: ((props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => import("solid-js").JSX.Element) & {
     className: (props: ReelProps & import("solid-js").JSX.HTMLAttributes<HTMLDivElement>) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bedrock-layout/solid",
-  "version": "0.11.4",
+  "version": "0.11.7",
   "description": "solid.js port of bedrock-layout primitives",
   "sideEffects": false,
   "private": false,
@@ -62,5 +62,5 @@
   "bugs": {
     "url": "https://github.com/Bedrock-Layouts/Solid-Bedrock/issues"
   },
-  "gitHead": "25bfd5f7fdd19a97807fd747089cf5cf7798f5be"
+  "gitHead": "9b9f1bec18040166db11abd3d2997e870a20c459"
 }