jbx 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# 2.4.0
+
+- Respect `style` properties on `Box`.
+
 # 2.3.0
 
 - Add CodeTextarea.

package/index.js

@@ -6,10 +6,10 @@ const SIZE = window.innerWidth > 1280 ? 16 : window.innerWidth > 640 ? 14 : 12;
 const BASE_RADIUS = SIZE / 2;
 const BASE_FONT_SIZE = SIZE;
 
-export function Component(className, styleSrc, config = {}) {
+export function Component(className, styleSrc = {}, config = {}) {
   const { element = `div`, styleProps } = config;
 
-  return function MakeComponent({ children, ...props }) {
+  return function MakeComponent({ children, style = {}, ...props }) {
     const passProps = styleProps
       ? Object.keys(props)
           .filter((e) => !styleProps.includes(e))
@@ -19,11 +19,13 @@ export function Component(className, styleSrc, config = {}) {
           }, {})
       : props;
 
+    const calculatedStyle = typeof styleSrc === 'function' ? styleSrc(props) : styleSrc;
+
     return React.createElement(
       element,
       {
         className,
-        style: typeof styleSrc === 'function' ? styleSrc(props) : styleSrc,
+        style: { ...style, ...calculatedStyle },
         ...passProps
       },
       children
@@ -170,8 +172,8 @@ export const CodeTextarea = Component(`jbx-code-area`, null, { element: 'textare
 
 export const CheckboxHidden = Component(`jbx-checkbox-hidden`, ({ checked }) => {
   return {
-    height: BASE_SIZE * 2 - 4,
-    width: BASE_SIZE * 2 - 4,
+    height: SIZE * 2 - 4,
+    width: SIZE * 2 - 4,
     paddingTop: 2,
     paddingLeft: 2,
     backgroundColor: checked ? 'var(--accent-color)' : 'white',
@@ -208,8 +210,8 @@ export const Checkbox = function Checkbox({ label, checked, onChange }) {
           'svg',
           {
             xmlns: 'http://www.w3.org/2000/svg',
-            width: BASE_SIZE * 2 - 8,
-            height: BASE_SIZE * 2 - 8,
+            width: SIZE * 2 - 8,
+            height: SIZE * 2 - 8,
             fill: 'none',
             stroke: 'currentColor',
             strokeLinecap: 'round',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jbx",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "",
   "main": "index.js",
   "author": "hi@javier.xyz",

package/style.css

@@ -153,6 +153,10 @@ body,
   padding: calc(var(--size) * 2.5) calc(var(--size) * 1.5) calc(var(--size) * 4);
 }
 
+.jbx-box {
+  flex: 1;
+}
+
 .jbx-inline {
   flex: 1;
   display: flex;