boxible - npm Package Compare versions

Comparing version 1.6.2 to 1.7.0

dist/box.d.ts

 /// <reference types="react" />
 import type { Property } from 'csstype';
-import { GenericProps, Area, Size, Side, ScreenSizeNames, ALIGN_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX } from './styles';
+import { GenericProps, Size, ScreenSizeNames, ALIGN_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX } from './styles';
 declare const DIRECTION_MAP: Record<string, string>;
@@ -32,3 +32,2 @@ interface FlexGrowShrinkI {
     className?: string;
-    pad?: Size | Area | Side;
 }
@@ -35,0 +34,0 @@ declare const buildBox: () => import("@emotion/styled").StyledComponent<{

dist/index.js

@@ -120,2 +120,8 @@ var styled = require('@emotion/styled');
 
+  if (typeof data == 'number') {
+    return {
+      [kind]: `${data}px`
+    };
+  }
+
   const styles = {};
@@ -314,5 +320,2 @@
 }) => wrap && wrapStyle(wrap)}
-    ${({
-  pad
-}) => pad && edgeStyle('padding', pad)}
     ${props => genericStyles(props)}
@@ -319,0 +322,0 @@ `;

dist/index.modern.js

@@ -116,2 +116,8 @@ import styled from '@emotion/styled';
 
+  if (typeof data == 'number') {
+    return {
+      [kind]: `${data}px`
+    };
+  }
+
   const styles = {};
@@ -290,3 +296,2 @@
     ${0}
-    ${0}
 `), ({
@@ -316,5 +321,3 @@ align
   wrap
-}) => wrap && wrapStyle(wrap), ({
-  pad
-}) => pad && edgeStyle('padding', pad), props => genericStyles(props));
+}) => wrap && wrapStyle(wrap), props => genericStyles(props));
 
@@ -321,0 +324,0 @@ const box = buildBox();

dist/index.module.js

@@ -116,2 +116,8 @@ import styled from '@emotion/styled';
 
+  if (typeof data == 'number') {
+    return {
+      [kind]: `${data}px`
+    };
+  }
+
   const styles = {};
@@ -310,5 +316,2 @@
 }) => wrap && wrapStyle(wrap)}
-    ${({
-  pad
-}) => pad && edgeStyle('padding', pad)}
     ${props => genericStyles(props)}
@@ -315,0 +318,0 @@ `;

dist/index.umd.js

@@ -123,2 +123,8 @@ (function (global, factory) {
 
+      if (typeof data == 'number') {
+        return {
+          [kind]: `${data}px`
+        };
+      }
+
       const styles = {};
@@ -317,5 +323,2 @@
 }) => wrap && wrapStyle(wrap)}
-    ${({
-  pad
-}) => pad && edgeStyle('padding', pad)}
     ${props => genericStyles(props)}
@@ -322,0 +325,0 @@ `;

dist/styles.d.ts

@@ -58,8 +58,8 @@ import { CSSObject } from '@emotion/react';
 export interface Area {
-    horizontal?: Size | string;
-    vertical?: Size | string;
-    top?: Size | string;
-    bottom?: Size | string;
-    left?: Size | string;
-    right?: Size | string;
+    horizontal?: Size | string | number;
+    vertical?: Size | string | number;
+    top?: Size | string | number;
+    bottom?: Size | string | number;
+    left?: Size | string | number;
+    right?: Size | string | number;
 }
@@ -80,7 +80,8 @@ export declare type Side = keyof Area;
 };
+export declare type AlignNames = keyof typeof ALIGN_MAP;
 export interface GenericProps {
     alignSelf?: keyof typeof ALIGN_SELF_MAP;
     gridArea?: string;
-    margin?: Size | Area | Side;
-    padding?: Size | Area | Side;
+    margin?: number | string | Size | Area | Side;
+    padding?: number | string | Size | Area | Side;
 }
@@ -95,3 +96,3 @@ export declare const genericStyles: (props: GenericProps & {
 export declare const overflowStyle: (overflowProp: string | OverflowI) => CSSObject;
-export declare const edgeStyle: (kind: edgeKindT, data: string | Size | Area) => CSSObject;
+export declare const edgeStyle: (kind: edgeKindT, data: string | number | Size | Area) => CSSObject;
 export {};

package.json

 {
   "name": "boxible",
-  "version": "1.6.2",
+  "version": "1.7.0",
   "description": "Typescript React component to set flexbox properties on a element",
@@ -5,0 +5,0 @@ "repository": "https://github.com/nathanstitt/boxible",

src/box.ts

@@ -5,4 +5,4 @@ import styled, { CSSObject } from '@emotion/styled'
 import {
-    edgeStyle, overflowStyle, genericStyles,
-    GenericProps, Area, Size, Side, ScreenSizeNames,
+    overflowStyle, genericStyles,
+    GenericProps, Size, ScreenSizeNames,
     SIZES, SCREEN_SIZES, ALIGN_MAP, ALIGN_CONTENT_MAP, BASIS, JUSTIFY_MAP, FLEX,
@@ -159,4 +159,2 @@ } from './styles'
     className?: string
-    pad?: Size | Area | Side
-
 }
@@ -188,3 +186,2 @@
     ${({ wrap }) => wrap && wrapStyle(wrap)}
-    ${({ pad }) => pad && edgeStyle('padding', pad)}
     ${props => genericStyles(props)}
@@ -191,0 +188,0 @@ `

src/styles.ts

@@ -68,8 +68,8 @@ import { CSSObject } from '@emotion/react'
 export interface Area {
-    horizontal?: Size | string
-    vertical?: Size | string
-    top?: Size | string
-    bottom?: Size | string
-    left?: Size | string
-    right?: Size | string
+    horizontal?: Size | string | number
+    vertical?: Size | string | number
+    top?: Size | string | number
+    bottom?: Size | string | number
+    left?: Size | string | number
+    right?: Size | string | number
 }
@@ -93,3 +93,3 @@
 }
-//export type AlignNames = keyof typeof ALIGN_MAP
+export type AlignNames = keyof typeof ALIGN_MAP
 
@@ -99,4 +99,4 @@ export interface GenericProps {
     gridArea?: string
-    margin?: Size | Area | Side
-    padding?: Size | Area | Side
+    margin?: number | string | Size | Area | Side
+    padding?: number | string | Size | Area | Side
 }
@@ -141,3 +141,3 @@
     kind: edgeKindT,
-    data: string | Size | Area,
+    data: string | number | Size | Area,
 ): CSSObject => {
@@ -151,2 +151,6 @@ if (typeof data === 'string') {
     }
+    if (typeof data == 'number') {
+        return { [kind]: `${data}px` }
+    }
+
     const styles: CSSObject = {}
@@ -153,0 +157,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

150882

increased by0.69%

Lines of code

1694

increased by1.01%

No dependency changes