@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

dist/components/layout/box/Box.d.ts

@@ -1,2 +0,2 @@
-import { BackgroundProperty, BoxShadowProperty } from "csstype";
+import { BackgroundProperty, BorderProperty, BoxShadowProperty } from "csstype";
 import * as React from "react";
@@ -11,10 +11,33 @@ import { AlignItemsProps, BorderBottomProps, BorderColorProps, BorderLeftProps, BorderProps, BorderRadiusProps, BorderRightProps, BorderStyleProps, BorderTopProps, BorderWidthProps, BottomProps, DisplayProps, FlexDirectionProps, FlexProps, FlexWrapProps, HeightProps, JustifyContentProps, LeftProps, MaxHeightProps, MaxWidthProps, MinHeightProps, MinWidthProps, OverflowProps, PositionProps, RightProps, TLengthStyledSystem, TopProps, WidthProps, ZIndexProps } from "styled-system";
     innerRef?: React.Ref<HTMLDivElement>;
+    /**
+     * If true, children are placed in a row.
+     */
     row?: boolean;
+    /**
+     * Adds spacing over and under content.
+     */
     spacing?: boolean | number;
+    /**
+     * Adds spacing left and right of content.
+     */
     indent?: boolean | number;
     style?: React.CSSProperties;
+    /**
+     * Adds a shadow around the box.
+     */
     shadow?: ShadowType | BoxShadowProperty;
+    /**
+     * Sets the background of the box.
+     */
     background?: ThemeColorField | BackgroundProperty<TLengthStyledSystem>;
+    /**
+     * Sets the background of the box when hovering with mouse.
+     */
+    hoverBackground?: ThemeColorField | BackgroundProperty<TLengthStyledSystem>;
+    /**
+     * Sets the border of the box when hovering with mouse.
+     */
+    hoverBorder?: ThemeColorField | BorderProperty<TLengthStyledSystem>;
 }
 export declare const Box: React.FC<BoxProps>;
 export {};

dist/index.es.js

@@ -146,6 +146,12 @@ import { createContext, useContext, useMemo, createElement, useRef, useEffect } from 'react';
 
-var FlexBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ",
-    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) { return props.display || "flex"; }, alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flex, function (props) {
+var FlexBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ",
+    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, alignItems, background, border, borderRight, borderLeft, borderTop, borderBottom, borderColor, borderRadius, borderStyle, borderWidth, boxShadow, flex, function (props) {
     return (props.row && "row") || props.flexDirection || "column";
-}, flexWrap, height, justifyContent, minHeight, maxHeight, maxWidth, overflow, function (props) { return numberOrZero(props.spacing) * props.themeSpacing; }, function (props) { return numberOrZero(props.indent) * props.themeIndent; }, position, width, zIndex, left, right, top, bottom);
+}, flexWrap, height, justifyContent, minHeight, maxHeight, maxWidth, overflow, function (props) { return numberOrZero(props.spacing) * props.themeSpacing; }, function (props) { return numberOrZero(props.indent) * props.themeIndent; }, position, width, zIndex, left, right, top, bottom, function (_a) {
+    var hoverBackground = _a.hoverBackground;
+    return hoverBackground;
+}, function (_a) {
+    var hoverBorder = _a.hoverBorder;
+    return hoverBorder;
+});
 var Box = function (_a) {
@@ -152,0 +158,0 @@ var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, props = __rest(_a, ["innerRef", "shadow", "background"]);

dist/index.js

@@ -152,6 +152,12 @@ 'use strict';
 
-var FlexBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"], ["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ",
-    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n"])), function (props) { return props.display || "flex"; }, styledSystem.alignItems, styledSystem.background, styledSystem.border, styledSystem.borderRight, styledSystem.borderLeft, styledSystem.borderTop, styledSystem.borderBottom, styledSystem.borderColor, styledSystem.borderRadius, styledSystem.borderStyle, styledSystem.borderWidth, styledSystem.boxShadow, styledSystem.flex, function (props) {
+var FlexBox = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"], ["\n  display: ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  flex-direction: ",
+    ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  padding: ", "px\n    ", "px;\n  ", "\n  ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n  :hover {\n    background: ", ";\n    border: ", ";\n  }\n"])), function (props) { return props.display || "flex"; }, styledSystem.alignItems, styledSystem.background, styledSystem.border, styledSystem.borderRight, styledSystem.borderLeft, styledSystem.borderTop, styledSystem.borderBottom, styledSystem.borderColor, styledSystem.borderRadius, styledSystem.borderStyle, styledSystem.borderWidth, styledSystem.boxShadow, styledSystem.flex, function (props) {
     return (props.row && "row") || props.flexDirection || "column";
-}, styledSystem.flexWrap, styledSystem.height, styledSystem.justifyContent, styledSystem.minHeight, styledSystem.maxHeight, styledSystem.maxWidth, styledSystem.overflow, function (props) { return numberOrZero(props.spacing) * props.themeSpacing; }, function (props) { return numberOrZero(props.indent) * props.themeIndent; }, styledSystem.position, styledSystem.width, styledSystem.zIndex, styledSystem.left, styledSystem.right, styledSystem.top, styledSystem.bottom);
+}, styledSystem.flexWrap, styledSystem.height, styledSystem.justifyContent, styledSystem.minHeight, styledSystem.maxHeight, styledSystem.maxWidth, styledSystem.overflow, function (props) { return numberOrZero(props.spacing) * props.themeSpacing; }, function (props) { return numberOrZero(props.indent) * props.themeIndent; }, styledSystem.position, styledSystem.width, styledSystem.zIndex, styledSystem.left, styledSystem.right, styledSystem.top, styledSystem.bottom, function (_a) {
+    var hoverBackground = _a.hoverBackground;
+    return hoverBackground;
+}, function (_a) {
+    var hoverBorder = _a.hoverBorder;
+    return hoverBorder;
+});
 var Box = function (_a) {
@@ -158,0 +164,0 @@ var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, props = __rest(_a, ["innerRef", "shadow", "background"]);

package.json

 {
   "name": "@stenajs-webui/core",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "",
@@ -5,0 +5,0 @@ "author": "mattias800",

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

148564

increased by2.01%

Lines of code

1147

increased by3.33%

No dependency changes