@highlight-ui/layout - npm Package Compare versions

Comparing version 0.4.12 to 0.5.0

dist/cjs/index.js

@@ -43,18 +43,18 @@ 'use strict';
 var styles$1 = {
-  "stack": "Stack-module__1EcFT-8V__v0-4-12",
-  "spacing-0": "Stack-module__6lRZvyuc__v0-4-12",
-  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-4-12",
-  "spacing-1": "Stack-module__IqD3B5Y2__v0-4-12",
-  "spacing-2": "Stack-module__y3QoKyTs__v0-4-12",
-  "spacing-3": "Stack-module__x0wRVlfo__v0-4-12",
-  "spacing-4": "Stack-module__thm96A-q__v0-4-12",
-  "spacing-5": "Stack-module__oMP2QdUC__v0-4-12",
-  "spacing-6": "Stack-module__KD9eyULq__v0-4-12",
-  "spacing-8": "Stack-module__pesLazX2__v0-4-12",
-  "spacing-10": "Stack-module__YpWt5m5x__v0-4-12",
-  "spacing-12": "Stack-module__E0RiyNBI__v0-4-12",
-  "spacing-16": "Stack-module__MTsavH-u__v0-4-12",
-  "spacing-20": "Stack-module__pqezygQ0__v0-4-12",
-  "spacing-24": "Stack-module__tFFh2DIC__v0-4-12",
-  "spacing-32": "Stack-module__FcbRkwlI__v0-4-12"
+  "stack": "Stack-module__1EcFT-8V__v0-5-0",
+  "spacing-0": "Stack-module__6lRZvyuc__v0-5-0",
+  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-5-0",
+  "spacing-1": "Stack-module__IqD3B5Y2__v0-5-0",
+  "spacing-2": "Stack-module__y3QoKyTs__v0-5-0",
+  "spacing-3": "Stack-module__x0wRVlfo__v0-5-0",
+  "spacing-4": "Stack-module__thm96A-q__v0-5-0",
+  "spacing-5": "Stack-module__oMP2QdUC__v0-5-0",
+  "spacing-6": "Stack-module__KD9eyULq__v0-5-0",
+  "spacing-8": "Stack-module__pesLazX2__v0-5-0",
+  "spacing-10": "Stack-module__YpWt5m5x__v0-5-0",
+  "spacing-12": "Stack-module__E0RiyNBI__v0-5-0",
+  "spacing-16": "Stack-module__MTsavH-u__v0-5-0",
+  "spacing-20": "Stack-module__pqezygQ0__v0-5-0",
+  "spacing-24": "Stack-module__tFFh2DIC__v0-5-0",
+  "spacing-32": "Stack-module__FcbRkwlI__v0-5-0"
 };
@@ -73,25 +73,35 @@ var Stack = React__default["default"].forwardRef(function (_a, ref) {
 var styles = {
-  "inline": "Inline-module__bXbkibKw__v0-4-12",
-  "wrap": "Inline-module__YF9rtVNH__v0-4-12",
-  "justify-start": "Inline-module__-WI6T-Pu__v0-4-12",
-  "align-start": "Inline-module__uD5yQygQ__v0-4-12",
-  "justify-center": "Inline-module__iz1r0ak9__v0-4-12",
-  "align-center": "Inline-module__97XnVtXw__v0-4-12",
-  "justify-end": "Inline-module__5EBc1Pez__v0-4-12",
-  "align-end": "Inline-module__oXJkmk-c__v0-4-12",
-  "spacing-0": "Inline-module__SAlBEU9D__v0-4-12",
-  "spacing-0-5": "Inline-module__D1V7owtS__v0-4-12",
-  "spacing-1": "Inline-module__OigU1RUi__v0-4-12",
-  "spacing-2": "Inline-module__XTSrxcwj__v0-4-12",
-  "spacing-3": "Inline-module__kTVUcUWM__v0-4-12",
-  "spacing-4": "Inline-module__G9I7Vdtm__v0-4-12",
-  "spacing-5": "Inline-module__WVGqRKtI__v0-4-12",
-  "spacing-6": "Inline-module__W9oxvNGX__v0-4-12",
-  "spacing-8": "Inline-module__Us2UoNCq__v0-4-12",
-  "spacing-10": "Inline-module__D3CLyxtx__v0-4-12",
-  "spacing-12": "Inline-module__3hwmqgcV__v0-4-12",
-  "spacing-16": "Inline-module__rlpoWnog__v0-4-12",
-  "spacing-20": "Inline-module__esCMhoV1__v0-4-12",
-  "spacing-24": "Inline-module__WSUyNPQ2__v0-4-12",
-  "spacing-32": "Inline-module__F-eRrOMk__v0-4-12"
+  "inline": "Inline-module__bXbkibKw__v0-5-0",
+  "wrap": "Inline-module__YF9rtVNH__v0-5-0",
+  "justify-start": "Inline-module__-WI6T-Pu__v0-5-0",
+  "align-start": "Inline-module__uD5yQygQ__v0-5-0",
+  "justify-center": "Inline-module__iz1r0ak9__v0-5-0",
+  "align-center": "Inline-module__97XnVtXw__v0-5-0",
+  "justify-end": "Inline-module__5EBc1Pez__v0-5-0",
+  "align-end": "Inline-module__oXJkmk-c__v0-5-0",
+  "justify-baseline": "Inline-module__4cbg3LZQ__v0-5-0",
+  "align-baseline": "Inline-module__ypyYkLRW__v0-5-0",
+  "justify-stretch": "Inline-module__HAyvauFA__v0-5-0",
+  "align-stretch": "Inline-module__MWdFpIFj__v0-5-0",
+  "justify-space-between": "Inline-module__UEtVxQKs__v0-5-0",
+  "align-space-between": "Inline-module__M-Xa8W7w__v0-5-0",
+  "justify-space-around": "Inline-module__UQQyVIGv__v0-5-0",
+  "align-space-around": "Inline-module__8K8voIyn__v0-5-0",
+  "justify-space-evenly": "Inline-module__pxJUMyuP__v0-5-0",
+  "align-space-evenly": "Inline-module__Wg0cMN83__v0-5-0",
+  "spacing-0": "Inline-module__SAlBEU9D__v0-5-0",
+  "spacing-0-5": "Inline-module__D1V7owtS__v0-5-0",
+  "spacing-1": "Inline-module__OigU1RUi__v0-5-0",
+  "spacing-2": "Inline-module__XTSrxcwj__v0-5-0",
+  "spacing-3": "Inline-module__kTVUcUWM__v0-5-0",
+  "spacing-4": "Inline-module__G9I7Vdtm__v0-5-0",
+  "spacing-5": "Inline-module__WVGqRKtI__v0-5-0",
+  "spacing-6": "Inline-module__W9oxvNGX__v0-5-0",
+  "spacing-8": "Inline-module__Us2UoNCq__v0-5-0",
+  "spacing-10": "Inline-module__D3CLyxtx__v0-5-0",
+  "spacing-12": "Inline-module__3hwmqgcV__v0-5-0",
+  "spacing-16": "Inline-module__rlpoWnog__v0-5-0",
+  "spacing-20": "Inline-module__esCMhoV1__v0-5-0",
+  "spacing-24": "Inline-module__WSUyNPQ2__v0-5-0",
+  "spacing-32": "Inline-module__F-eRrOMk__v0-5-0"
 };
@@ -98,0 +108,0 @@ var Inline = React__default["default"].forwardRef(function (_a, ref) {

dist/cjs/src/inline/Inline.d.ts

 import React from 'react';
-import type { LayoutProps, AlignmentType } from '../types';
+import type { LayoutProps, HorizontalAlignmentType, VerticalAlignmentType } from '../types';
 export declare type InlineProps = {
     /** Horizontal alignment of the items */
-    align?: AlignmentType;
+    align?: HorizontalAlignmentType;
     /** Vertical alignment of the items */
-    alignVertical?: AlignmentType;
+    alignVertical?: VerticalAlignmentType;
     /** Whether to wrap the items when their width exceeds the container width */
@@ -13,5 +13,5 @@ wrap?: boolean;
     /** Horizontal alignment of the items */
-    align?: "start" | "center" | "end" | undefined;
+    align?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | undefined;
     /** Vertical alignment of the items */
-    alignVertical?: "start" | "center" | "end" | undefined;
+    alignVertical?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
     /** Whether to wrap the items when their width exceeds the container width */
@@ -18,0 +18,0 @@ wrap?: boolean | undefined;

dist/cjs/src/types.d.ts

@@ -5,4 +5,6 @@ /// <reference types="react" />
 export declare type SpacingType = SpacingTokenType | 'spacing-0';
-export declare const alignmentValues: readonly ["start", "center", "end"];
-export declare type AlignmentType = typeof alignmentValues[number];
+export declare const horizontalAlignmentValues: readonly ["start", "center", "end", "space-between", "space-around", "space-evenly"];
+export declare const verticalAlignmentValues: readonly ["start", "center", "end", "baseline", "stretch"];
+export declare type VerticalAlignmentType = typeof verticalAlignmentValues[number];
+export declare type HorizontalAlignmentType = typeof horizontalAlignmentValues[number];
 export declare type LayoutProps = React.PropsWithChildren<PropsWithMetadata<{
@@ -9,0 +11,0 @@ /** The spacing applied to the children */

dist/esm/index.js

@@ -31,18 +31,18 @@ import React from 'react';
 var styles$1 = {
-  "stack": "Stack-module__1EcFT-8V__v0-4-12",
-  "spacing-0": "Stack-module__6lRZvyuc__v0-4-12",
-  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-4-12",
-  "spacing-1": "Stack-module__IqD3B5Y2__v0-4-12",
-  "spacing-2": "Stack-module__y3QoKyTs__v0-4-12",
-  "spacing-3": "Stack-module__x0wRVlfo__v0-4-12",
-  "spacing-4": "Stack-module__thm96A-q__v0-4-12",
-  "spacing-5": "Stack-module__oMP2QdUC__v0-4-12",
-  "spacing-6": "Stack-module__KD9eyULq__v0-4-12",
-  "spacing-8": "Stack-module__pesLazX2__v0-4-12",
-  "spacing-10": "Stack-module__YpWt5m5x__v0-4-12",
-  "spacing-12": "Stack-module__E0RiyNBI__v0-4-12",
-  "spacing-16": "Stack-module__MTsavH-u__v0-4-12",
-  "spacing-20": "Stack-module__pqezygQ0__v0-4-12",
-  "spacing-24": "Stack-module__tFFh2DIC__v0-4-12",
-  "spacing-32": "Stack-module__FcbRkwlI__v0-4-12"
+  "stack": "Stack-module__1EcFT-8V__v0-5-0",
+  "spacing-0": "Stack-module__6lRZvyuc__v0-5-0",
+  "spacing-0-5": "Stack-module__g9Dn3J1U__v0-5-0",
+  "spacing-1": "Stack-module__IqD3B5Y2__v0-5-0",
+  "spacing-2": "Stack-module__y3QoKyTs__v0-5-0",
+  "spacing-3": "Stack-module__x0wRVlfo__v0-5-0",
+  "spacing-4": "Stack-module__thm96A-q__v0-5-0",
+  "spacing-5": "Stack-module__oMP2QdUC__v0-5-0",
+  "spacing-6": "Stack-module__KD9eyULq__v0-5-0",
+  "spacing-8": "Stack-module__pesLazX2__v0-5-0",
+  "spacing-10": "Stack-module__YpWt5m5x__v0-5-0",
+  "spacing-12": "Stack-module__E0RiyNBI__v0-5-0",
+  "spacing-16": "Stack-module__MTsavH-u__v0-5-0",
+  "spacing-20": "Stack-module__pqezygQ0__v0-5-0",
+  "spacing-24": "Stack-module__tFFh2DIC__v0-5-0",
+  "spacing-32": "Stack-module__FcbRkwlI__v0-5-0"
 };
@@ -61,25 +61,35 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 var styles = {
-  "inline": "Inline-module__bXbkibKw__v0-4-12",
-  "wrap": "Inline-module__YF9rtVNH__v0-4-12",
-  "justify-start": "Inline-module__-WI6T-Pu__v0-4-12",
-  "align-start": "Inline-module__uD5yQygQ__v0-4-12",
-  "justify-center": "Inline-module__iz1r0ak9__v0-4-12",
-  "align-center": "Inline-module__97XnVtXw__v0-4-12",
-  "justify-end": "Inline-module__5EBc1Pez__v0-4-12",
-  "align-end": "Inline-module__oXJkmk-c__v0-4-12",
-  "spacing-0": "Inline-module__SAlBEU9D__v0-4-12",
-  "spacing-0-5": "Inline-module__D1V7owtS__v0-4-12",
-  "spacing-1": "Inline-module__OigU1RUi__v0-4-12",
-  "spacing-2": "Inline-module__XTSrxcwj__v0-4-12",
-  "spacing-3": "Inline-module__kTVUcUWM__v0-4-12",
-  "spacing-4": "Inline-module__G9I7Vdtm__v0-4-12",
-  "spacing-5": "Inline-module__WVGqRKtI__v0-4-12",
-  "spacing-6": "Inline-module__W9oxvNGX__v0-4-12",
-  "spacing-8": "Inline-module__Us2UoNCq__v0-4-12",
-  "spacing-10": "Inline-module__D3CLyxtx__v0-4-12",
-  "spacing-12": "Inline-module__3hwmqgcV__v0-4-12",
-  "spacing-16": "Inline-module__rlpoWnog__v0-4-12",
-  "spacing-20": "Inline-module__esCMhoV1__v0-4-12",
-  "spacing-24": "Inline-module__WSUyNPQ2__v0-4-12",
-  "spacing-32": "Inline-module__F-eRrOMk__v0-4-12"
+  "inline": "Inline-module__bXbkibKw__v0-5-0",
+  "wrap": "Inline-module__YF9rtVNH__v0-5-0",
+  "justify-start": "Inline-module__-WI6T-Pu__v0-5-0",
+  "align-start": "Inline-module__uD5yQygQ__v0-5-0",
+  "justify-center": "Inline-module__iz1r0ak9__v0-5-0",
+  "align-center": "Inline-module__97XnVtXw__v0-5-0",
+  "justify-end": "Inline-module__5EBc1Pez__v0-5-0",
+  "align-end": "Inline-module__oXJkmk-c__v0-5-0",
+  "justify-baseline": "Inline-module__4cbg3LZQ__v0-5-0",
+  "align-baseline": "Inline-module__ypyYkLRW__v0-5-0",
+  "justify-stretch": "Inline-module__HAyvauFA__v0-5-0",
+  "align-stretch": "Inline-module__MWdFpIFj__v0-5-0",
+  "justify-space-between": "Inline-module__UEtVxQKs__v0-5-0",
+  "align-space-between": "Inline-module__M-Xa8W7w__v0-5-0",
+  "justify-space-around": "Inline-module__UQQyVIGv__v0-5-0",
+  "align-space-around": "Inline-module__8K8voIyn__v0-5-0",
+  "justify-space-evenly": "Inline-module__pxJUMyuP__v0-5-0",
+  "align-space-evenly": "Inline-module__Wg0cMN83__v0-5-0",
+  "spacing-0": "Inline-module__SAlBEU9D__v0-5-0",
+  "spacing-0-5": "Inline-module__D1V7owtS__v0-5-0",
+  "spacing-1": "Inline-module__OigU1RUi__v0-5-0",
+  "spacing-2": "Inline-module__XTSrxcwj__v0-5-0",
+  "spacing-3": "Inline-module__kTVUcUWM__v0-5-0",
+  "spacing-4": "Inline-module__G9I7Vdtm__v0-5-0",
+  "spacing-5": "Inline-module__WVGqRKtI__v0-5-0",
+  "spacing-6": "Inline-module__W9oxvNGX__v0-5-0",
+  "spacing-8": "Inline-module__Us2UoNCq__v0-5-0",
+  "spacing-10": "Inline-module__D3CLyxtx__v0-5-0",
+  "spacing-12": "Inline-module__3hwmqgcV__v0-5-0",
+  "spacing-16": "Inline-module__rlpoWnog__v0-5-0",
+  "spacing-20": "Inline-module__esCMhoV1__v0-5-0",
+  "spacing-24": "Inline-module__WSUyNPQ2__v0-5-0",
+  "spacing-32": "Inline-module__F-eRrOMk__v0-5-0"
 };
@@ -86,0 +96,0 @@ var Inline = /*#__PURE__*/React.forwardRef(function (_a, ref) {

dist/esm/src/inline/Inline.d.ts

 import React from 'react';
-import type { LayoutProps, AlignmentType } from '../types';
+import type { LayoutProps, HorizontalAlignmentType, VerticalAlignmentType } from '../types';
 export declare type InlineProps = {
     /** Horizontal alignment of the items */
-    align?: AlignmentType;
+    align?: HorizontalAlignmentType;
     /** Vertical alignment of the items */
-    alignVertical?: AlignmentType;
+    alignVertical?: VerticalAlignmentType;
     /** Whether to wrap the items when their width exceeds the container width */
@@ -13,5 +13,5 @@ wrap?: boolean;
     /** Horizontal alignment of the items */
-    align?: "start" | "center" | "end" | undefined;
+    align?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | undefined;
     /** Vertical alignment of the items */
-    alignVertical?: "start" | "center" | "end" | undefined;
+    alignVertical?: "start" | "center" | "end" | "baseline" | "stretch" | undefined;
     /** Whether to wrap the items when their width exceeds the container width */
@@ -18,0 +18,0 @@ wrap?: boolean | undefined;

dist/esm/src/types.d.ts

@@ -5,4 +5,6 @@ /// <reference types="react" />
 export declare type SpacingType = SpacingTokenType | 'spacing-0';
-export declare const alignmentValues: readonly ["start", "center", "end"];
-export declare type AlignmentType = typeof alignmentValues[number];
+export declare const horizontalAlignmentValues: readonly ["start", "center", "end", "space-between", "space-around", "space-evenly"];
+export declare const verticalAlignmentValues: readonly ["start", "center", "end", "baseline", "stretch"];
+export declare type VerticalAlignmentType = typeof verticalAlignmentValues[number];
+export declare type HorizontalAlignmentType = typeof horizontalAlignmentValues[number];
 export declare type LayoutProps = React.PropsWithChildren<PropsWithMetadata<{
@@ -9,0 +11,0 @@ /** The spacing applied to the children */

package.json

 {
   "name": "@highlight-ui/layout",
-  "version": "0.4.12",
+  "version": "0.5.0",
   "author": "Personio GmbH & Co. KG",
@@ -32,2 +32,3 @@ "main": "dist/cjs/index.js",
     "@highlight-ui/configs-scripts": "^3.2.5",
+    "@highlight-ui/typography": "^6.2.7",
     "@testing-library/dom": "8.19.0",
@@ -48,3 +49,3 @@ "@testing-library/react": "12.1.5",
   },
-  "gitHead": "9822c2a9f7a4e942523dc88c31c3632cec6209ce"
+  "gitHead": "c50200cf932ef101808e3bac4da4478eb67d98bf"
 }

README.md

@@ -97,4 +97,4 @@ [![npm](https://img.shields.io/npm/v/@highlight-ui/layout)](https://www.npmjs.com/package/@highlight-ui/layout)
 | `space`         | `SpacingType`       | No       | `spacing-0` | The spacing applied to the children.                                    |
-| `align`         | `AlignmentType`     | No       | `start`     | Horizontal alignment of the items.                                      |
-| `alignVertical` | `AlignmentType`     | No       | `start`     | Vertical alignment of the items.                                        |
+| `align`         | `HorizontalAlignmentType` | No       | `start`     | Horizontal alignment of the items.                                      |
+| `alignVertical` | `VerticalAlignmentType`   | No       | `start`     | Vertical alignment of the items.                                        |
 | `wrap`          | `boolean`           | No       | `false`     | Whether to wrap the items when their width exceeds the container width. |
@@ -110,3 +110,4 @@ | `className`     | `string`            | No       | `null`      | Classname to apply to the element.                                      |
 | `SpacingType`   | `spacing-0`, `spacing-0-5`, `spacing-1`, `spacing-2`, `spacing-3`, `spacing-4`, `spacing-5`, `spacing-6`, `spacing-8`, `spacing-10`, `spacing-12`, `spacing-16`, `spacing-20`, `spacing-24`, `spacing-32` |
-| `AlignmentType` | `start`, `center`, `end`                                                                                                                                                                                  |
+| `HorizontalAlignmentType` | `start`, `center`, `end`, `space-between`, `space-around`, `space-evenly`                                                                                                                       |
+| `VerticalAlignmentType`   | `start`, `center`, `end`, `baseline`, `stretch`                                                                                                                                                 |
 
@@ -113,0 +114,0 @@ ## Testing

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

67026

increased by5.72%

Lines of code

658

increased by15.03%

Number of lines in readme file

142

increased by0.71%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

10

increased by11.11%

No dependency changes