@arvinxu/layout-kit - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0-beta.1

es/index.d.ts

 import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
 import type { ContentDistribution, ContentPosition, FlexDirection } from './type';
-declare type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
+export declare type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 export interface IFlexbox {
+    horizontal?: boolean;
     direction?: FlexDirection;
@@ -15,2 +16,1 @@ distribution?: ContentDistribution;
 export declare const Flexbox: FC<FlexboxProps>;
-export {};

es/index.js

@@ -12,3 +12,3 @@ var _templateObject;
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  padding: ", ";\n\n  > *:not(:last-child) {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n"])), function (props) {
-  return getFlexDirection(props.direction);
+  return getFlexDirection(props.direction, props.horizontal);
 }, function (props) {
@@ -25,5 +25,5 @@ return props.distribution;
 }, function (props) {
-  return getFlexDirection(props.direction) === 'row' && calcValue(props.gap);
+  return getFlexDirection(props.direction, props.horizontal) === 'row' && calcValue(props.gap);
 }, function (props) {
-  return getFlexDirection(props.direction) === 'column' && calcValue(props.gap);
+  return getFlexDirection(props.direction, props.horizontal) === 'column' && calcValue(props.gap);
 });

es/type.d.ts

@@ -1,3 +0,3 @@
-export declare type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch';
+export declare type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline';
 export declare type ContentDistribution = 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
 export declare type FlexDirection = 'vertical' | 'vertical-reverse' | 'horizontal' | 'horizontal-reverse';

es/utils.d.ts

 import type { FlexDirection } from './type';
-export declare const getFlexDirection: (direction: FlexDirection) => "row" | "row-reverse" | "column" | "column-reverse";
+export declare const getFlexDirection: (direction: FlexDirection, isHorizontal: boolean) => "row" | "row-reverse" | "column" | "column-reverse";
 export declare const calcValue: (value: string | number) => string;

es/utils.js

@@ -1,2 +0,4 @@
-export var getFlexDirection = function getFlexDirection(direction) {
+export var getFlexDirection = function getFlexDirection(direction, isHorizontal) {
+  if (isHorizontal) return 'row';
+
   switch (direction) {
@@ -3,0 +5,0 @@ case 'horizontal':

lib/index.d.ts

 import type { DetailedHTMLProps, FC, HTMLAttributes } from 'react';
 import type { ContentDistribution, ContentPosition, FlexDirection } from './type';
-declare type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
+export declare type CommonSpaceNumber = 2 | 4 | 8 | 12 | 16 | 24;
 export interface IFlexbox {
+    horizontal?: boolean;
     direction?: FlexDirection;
@@ -15,2 +16,1 @@ distribution?: ContentDistribution;
 export declare const Flexbox: FC<FlexboxProps>;
-export {};

lib/index.js

@@ -23,3 +23,3 @@ "use strict";
 })(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n\n  width: ", ";\n  height: ", ";\n\n  padding: ", ";\n\n  > *:not(:last-child) {\n    margin-right: ", ";\n    margin-bottom: ", ";\n  }\n"])), function (props) {
-  return (0, _utils.getFlexDirection)(props.direction);
+  return (0, _utils.getFlexDirection)(props.direction, props.horizontal);
 }, function (props) {
@@ -36,7 +36,7 @@ return props.distribution;
 }, function (props) {
-  return (0, _utils.getFlexDirection)(props.direction) === 'row' && (0, _utils.calcValue)(props.gap);
+  return (0, _utils.getFlexDirection)(props.direction, props.horizontal) === 'row' && (0, _utils.calcValue)(props.gap);
 }, function (props) {
-  return (0, _utils.getFlexDirection)(props.direction) === 'column' && (0, _utils.calcValue)(props.gap);
+  return (0, _utils.getFlexDirection)(props.direction, props.horizontal) === 'column' && (0, _utils.calcValue)(props.gap);
 });
 
 exports.Flexbox = Flexbox;

lib/type.d.ts

@@ -1,3 +0,3 @@
-export declare type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch';
+export declare type ContentPosition = 'center' | 'end' | 'flex-end' | 'flex-start' | 'start' | 'stretch' | 'baseline';
 export declare type ContentDistribution = 'center' | 'space-around' | 'space-between' | 'space-evenly' | 'stretch';
 export declare type FlexDirection = 'vertical' | 'vertical-reverse' | 'horizontal' | 'horizontal-reverse';

lib/utils.d.ts

 import type { FlexDirection } from './type';
-export declare const getFlexDirection: (direction: FlexDirection) => "row" | "row-reverse" | "column" | "column-reverse";
+export declare const getFlexDirection: (direction: FlexDirection, isHorizontal: boolean) => "row" | "row-reverse" | "column" | "column-reverse";
 export declare const calcValue: (value: string | number) => string;

lib/utils.js

@@ -6,5 +6,7 @@ "use strict";
 });
-exports.calcValue = exports.getFlexDirection = void 0;
+exports.getFlexDirection = exports.calcValue = void 0;
 
-var getFlexDirection = function getFlexDirection(direction) {
+var getFlexDirection = function getFlexDirection(direction, isHorizontal) {
+  if (isHorizontal) return 'row';
+
   switch (direction) {
@@ -11,0 +13,0 @@ case 'horizontal':

package.json

 {
   "name": "@arvinxu/layout-kit",
-  "version": "1.0.0",
+  "version": "1.1.0-beta.1",
   "files": [
@@ -16,4 +16,4 @@ "lib",
   },
-  "peerDependencies": {
-    "styled-components": ">5"
+  "dependencies": {
+    "styled-components": "^5.3.3"
   },
@@ -20,0 +20,0 @@ "devDependencies": {

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Lines of code

141

increased by1.44%

Worsened metrics

Total package byte prevSize

8095

decreased by-0.44%

Number of package files

14

decreased by-6.67%

Number of low quality alerts

1

increased byInfinity%

Dependency changes

• + Addedstyled-components@^5.3.3

• + Added@ampproject/remapping@2.3.0(transitive)

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/compat-data@7.26.2(transitive)

• + Added@babel/core@7.26.0(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-annotate-as-pure@7.25.9(transitive)

• + Added@babel/helper-compilation-targets@7.25.9(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-module-transforms@7.26.0(transitive)

• + Added@babel/helper-plugin-utils@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/helper-validator-option@7.25.9(transitive)

• + Added@babel/helpers@7.26.0(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/plugin-syntax-jsx@7.25.9(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/is-prop-valid@1.3.1(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Addedbabel-plugin-styled-components@2.1.4(transitive)

• + Addedbrowserslist@4.24.2(transitive)

• + Addedcaniuse-lite@1.0.30001683(transitive)

• + Addedconvert-source-map@2.0.0(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedelectron-to-chromium@1.5.64(transitive)

• + Addedescalade@3.2.0(transitive)

• + Addedgensync@1.0.0-beta.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson5@2.2.3(transitive)

• + Addedlodash@4.17.21(transitive)

• + Addedlru-cache@5.1.1(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-releases@2.0.18(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedreact-is@16.13.118.3.1(transitive)

• + Addedsemver@6.3.1(transitive)

• + Addedstyled-components@5.3.11(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedupdate-browserslist-db@1.1.1(transitive)

• + Addedyallist@3.1.1(transitive)

• - Removed@emotion/is-prop-valid@1.2.2(transitive)

• - Removed@emotion/memoize@0.8.1(transitive)

• - Removed@emotion/unitless@0.8.1(transitive)

• - Removed@types/stylis@4.2.5(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removednanoid@3.3.7(transitive)

• - Removedpostcss@8.4.38(transitive)

• - Removedsource-map-js@1.2.1(transitive)

• - Removedstyled-components@6.1.13(transitive)

• - Removedstylis@4.3.2(transitive)

• - Removedtslib@2.6.2(transitive)