boxwood 2.2.1 → 2.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "boxwood",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "Compile HTML templates into JS",
   "main": "index.js",
   "types": "index.d.ts",
@@ -10,8 +10,8 @@
     "./ui": "./ui/index.js"
   },
   "scripts": {
-    "test": "node --test --test-reporter=dot \"test/**/*.test.js\" \"test/**/*.spec.js\"",
-    "test:debug": "node --test --test-reporter=spec \"test/**/*.test.js\" \"test/**/*.spec.js\"",
+    "test": "node --test --test-reporter=dot \"**/*.test.js\" \"**/*.spec.js\"",
+    "test:debug": "node --test --test-reporter=spec \"**/*.test.js\" \"**/*.spec.js\"",
     "coverage": "c8 npm test",
     "benchmark": "node --test benchmark/index.js",
     "watch": "npm test -- --watch",

package/ui/container/index.js

@@ -0,0 +1,47 @@
+const { css, component, Div } = require("../..")
+
+const normalizeValue = (value) => {
+  if (typeof value === "string") {
+    if (value.endsWith("px")) {
+      return parseInt(value, 10)
+    }
+    if (value.endsWith("rem")) {
+      return parseInt(value, 10) * 16
+    }
+    throw new Error(
+      "Width must be a number or a string ending with 'px' or 'rem'"
+    )
+  }
+  return value
+}
+
+function Container(
+  { className, style, width = 1200, padding = 16 } = {},
+  children
+) {
+  width = normalizeValue(width)
+  padding = normalizeValue(padding)
+  const styles = css`
+    .container {
+      box-sizing: border-box;
+      margin-left: auto;
+      margin-right: auto;
+      max-width: ${width}px;
+      padding-left: ${padding}px;
+      padding-right: ${padding}px;
+      width: 100%;
+    }
+
+    @media (max-width: ${width + padding * 2 - 1}px) {
+      .container {
+        max-width: 100%;
+      }
+    }
+  `
+  return [
+    Div({ className: [styles.container, className], style }, children),
+    styles.css,
+  ]
+}
+
+module.exports = component(Container)

package/ui/{Group → group}/index.js

@@ -20,6 +20,7 @@ function Group(
   padding = normalizeSpacing(padding)
 
   const styleObject = {
+    "box-sizing": "border-box",
     display: "flex",
     "flex-direction": "row",
     ...(gap && { gap }),

package/ui/index.js

@@ -1,7 +1,9 @@
-const Group = require("./Group")
-const Stack = require("./Stack")
+const Container = require("./container")
+const Group = require("./group")
+const Stack = require("./stack")
 
 module.exports = {
+  Container,
   Group,
   Stack,
 }

package/ui/{Stack → stack}/index.js

@@ -18,6 +18,7 @@ function Stack(
   padding = normalizeSpacing(padding)
 
   const styleObject = {
+    "box-sizing": "border-box",
     display: "flex",
     "flex-direction": "column",
     ...(gap && { gap }),