boxible - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/box.d.ts

 /// <reference types="react" />
 import type { Property } from 'csstype';
-import { GenericPropsI, Area, Size, Side, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX } from './styles';
+import { GenericProps, Area, Size, Side, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX } from './styles';
 declare type directionT = 'column' | 'row';
@@ -14,7 +14,7 @@ interface FlexGrowShrinkI {
 declare type WrapT = boolean | keyof typeof WRAP_MAP;
-interface MinMaxI {
+interface MinMax {
     max?: string;
     min?: string;
 }
-export interface BoxProps extends GenericPropsI {
+export interface BoxProps extends GenericProps {
     align?: keyof typeof ALIGN_MAP;
@@ -27,4 +27,4 @@ alignContent?: keyof typeof ALIGN_CONTENT;
     gap?: boolean | Size;
-    height?: string | MinMaxI;
-    width?: string | MinMaxI;
+    height?: string | MinMax;
+    width?: string | MinMax;
     fill?: boolean | 'horizontal' | 'vertical';
@@ -31,0 +31,0 @@ wrap?: WrapT;

dist/index.js

@@ -228,3 +228,3 @@ var styled = require('@emotion/styled');
 
-const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
+const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
 
@@ -231,0 +231,0 @@ const Box = styled__default["default"]('div', {

dist/index.modern.js

@@ -227,3 +227,3 @@ import styled from '@emotion/styled';
 
-const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
+const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
 
@@ -230,0 +230,0 @@ const Box = styled('div', {

dist/index.module.js

@@ -224,3 +224,3 @@ import styled from '@emotion/styled';
 
-const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
+const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
 
@@ -227,0 +227,0 @@ const Box = styled('div', {

dist/index.umd.js

@@ -231,3 +231,3 @@ (function (global, factory) {
 
-    const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
+    const OWN_PROPS = ['basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as', 'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea']; // NOTE: basis must be after flex! Otherwise, flex overrides basis
 
@@ -234,0 +234,0 @@ const Box = styled__default["default"]('div', {

dist/styles.d.ts

@@ -66,3 +66,3 @@ import { CSSObject } from '@emotion/react';
 };
-export interface GenericPropsI {
+export interface GenericProps {
     alignSelf?: keyof typeof ALIGN_SELF_MAP;
@@ -73,3 +73,3 @@ gridArea?: string;
 }
-export declare const genericStyles: (props: GenericPropsI & {
+export declare const genericStyles: (props: GenericProps & {
     theme: Theme;
@@ -76,0 +76,0 @@ }) => CSSObject;

package.json

 {
   "name": "boxible",
-  "version": "1.2.0",
+  "version": "1.3.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,3 +5,3 @@ import styled, { CSSObject } from '@emotion/styled'
 import {
-    edgeStyle, overflowStyle, genericStyles, GenericPropsI, Area, Size, Side,
+    edgeStyle, overflowStyle, genericStyles, GenericProps, Area, Size, Side,
     SIZES, ALIGN_MAP, ALIGN_CONTENT, BASIS, JUSTIFY, FLEX,
@@ -77,3 +77,3 @@ } from './styles'
 
-interface MinMaxI {
+interface MinMax {
     max?: string
@@ -83,3 +83,3 @@ min?: string
 
-const widthStyle = (w: string | MinMaxI) => {
+const widthStyle = (w: string | MinMax) => {
     if (typeof w === 'object') {
@@ -95,3 +95,3 @@ const c: any = {}
 
-const heightStyle = (w: string | MinMaxI) => {
+const heightStyle = (w: string | MinMax) => {
     if (typeof w === 'object') {
@@ -120,3 +120,3 @@ const c: any = {}
 
-export interface BoxProps extends GenericPropsI {
+export interface BoxProps extends GenericProps {
     align?: keyof typeof ALIGN_MAP
@@ -129,4 +129,4 @@ alignContent?: keyof typeof ALIGN_CONTENT
     gap?: boolean | Size
-    height?: string | MinMaxI
-    width?: string | MinMaxI
+    height?: string | MinMax
+    width?: string | MinMax
     fill?: boolean | 'horizontal' | 'vertical'
@@ -136,6 +136,7 @@ wrap?: WrapT
     pad?: Size | Area | Side
+
 }
 
 const OWN_PROPS = [
-    'basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify',
+    'basis', 'align', 'alignContent', 'direction', 'overflowProp', 'flex', 'justify', 'as',
     'gap', 'height', 'width', 'fill', 'wrap', 'margin', 'pad', 'padding', 'alignSelf', 'gridArea',
@@ -142,0 +143,0 @@ ]

src/styles.ts

@@ -6,3 +6,2 @@ import { CSSObject } from '@emotion/react'
 
-
 export const SIZES = {
@@ -16,2 +15,3 @@ small: '.2rem',
 }
+
 export type edgeKindT = "margin" | "border" | "padding"
@@ -49,3 +49,2 @@ export type Size = keyof typeof SIZES
 
-
 export const FLEX = {
@@ -82,4 +81,3 @@ grow: '1 0',
 
-
-export interface GenericPropsI {
+export interface GenericProps {
     alignSelf?: keyof typeof ALIGN_SELF_MAP
@@ -91,3 +89,3 @@ gridArea?: string
 
-export const genericStyles = (props: GenericPropsI & { theme: Theme }): CSSObject => {
+export const genericStyles = (props: GenericProps & { theme: Theme }): CSSObject => {
     const styles: CSSObject = {}
@@ -94,0 +92,0 @@ if (props.alignSelf) {

No alert changes

Improved metrics

Total package byte prevSize

119867

increased by0.15%

Lines of code

1397

increased by0.29%

No dependency changes