@stenajs-webui/core - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

dist/index.es.js

@@ -147,37 +147,3 @@ import { createContext, useContext, useMemo, createElement, useState, useCallback, useEffect, useRef } 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  :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, function (_a) {
-    var hoverBackground = _a.hoverBackground;
-    return hoverBackground;
-}, function (_a) {
-    var hoverBorder = _a.hoverBorder;
-    return hoverBorder;
-});
-var Box = function (_a) {
-    var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, props = __rest(_a, ["innerRef", "shadow", "background"]);
-    var boxProps = useThemeSelector(function (_a) {
-        var shadows = _a.shadows, colors = _a.colors, metrics = _a.metrics;
-        return ({
-            boxShadow: (shadow && shadows[shadow]) || shadow,
-            background: (background && colors[background]) || background,
-            themeSpacing: metrics.spacing,
-            themeIndent: metrics.indent
-        });
-    }, [shadow, background]);
-    return createElement(FlexBox, __assign({ ref: innerRef }, boxProps, props));
-};
-var numberOrZero = function (num) {
-    return num || 0;
-};
-var templateObject_1;
-
-var Border = function (_a) {
-    var borderWidth = _a.borderWidth, borderStyle = _a.borderStyle, props = __rest(_a, ["borderWidth", "borderStyle"]);
-    var theme = useTheme();
-    return (createElement(Box, __assign({ borderWidth: borderWidth || "1px", borderStyle: borderStyle || "solid", borderColor: theme.colors.primaryText }, props)));
-};
-
-var SeparatorLineComponent = styled.hr(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ",
+var SeparatorLineComponent = styled.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ",
     ";\n  width: ",
@@ -196,5 +162,5 @@ ";\n"])), function (props) { return props.color; }, function (props) {
 };
-var templateObject_1$1;
+var templateObject_1;
 
-var ClickableElement = styled.button(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  :hover {\n    ", ";\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"], ["\n  :hover {\n    ", ";\n  }\n  :active {\n    ",
+var ClickableElement = styled.button(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  :hover {\n    ", ";\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"], ["\n  :hover {\n    ", ";\n  }\n  :active {\n    ",
     "\n  }\n  :focus {\n    outline: 0;\n    ",
@@ -215,2 +181,32 @@ "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"])), function (props) { return (props.opacityOnHover ? "opacity: 0.7;" : ""); }, function (_a) {
 };
+var templateObject_1$1;
+
+var FlexBox = styled.div(templateObject_1$2 || (templateObject_1$2 = __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, function (_a) {
+    var hoverBackground = _a.hoverBackground;
+    return hoverBackground;
+}, function (_a) {
+    var hoverBorder = _a.hoverBorder;
+    return hoverBorder;
+});
+var Box = function (_a) {
+    var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, border = _a.border, borderColor = _a.borderColor, props = __rest(_a, ["innerRef", "shadow", "background", "border", "borderColor"]);
+    var boxProps = useThemeSelector(function (_a) {
+        var shadows = _a.shadows, colors = _a.colors, metrics = _a.metrics;
+        return ({
+            boxShadow: (shadow && shadows[shadow]) || shadow,
+            background: (background && colors[background]) || background,
+            themeSpacing: metrics.spacing,
+            themeIndent: metrics.indent,
+            border: (border && colors[border]) || border,
+            borderColor: (borderColor && colors[borderColor]) || borderColor
+        });
+    }, [shadow, background, border, borderColor]);
+    return createElement(FlexBox, __assign({ ref: innerRef }, boxProps, props));
+};
+var numberOrZero = function (num) {
+    return num || 0;
+};
 var templateObject_1$2;
@@ -462,3 +458,3 @@
 
-export { Absolute, Border, Box, Clickable, Column, Indent, Inline, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useBoolean, useDebounce, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
+export { Absolute, Box, Clickable, Column, Indent, Inline, LargeText, Relative, Row, SeparatorLine, SmallText, SmallerText, Space, Spacing, StandardText, ThemeContext, TinyText, defaultHeaderTextTheme, defaultLargeTextTheme, defaultSectionHeaderTextTheme, defaultSmallTextTheme, defaultSmallerTextTheme, defaultTheme, defaultTinyTextTheme, useBoolean, useDebounce, useMultiOnClickOutside, useOnClickOutside, useOnNoMouseMovement, useTheme, useThemeFields, useThemeSelector };
 //# sourceMappingURL=index.es.js.map

dist/index.js

@@ -153,37 +153,3 @@ '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  :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, function (_a) {
-    var hoverBackground = _a.hoverBackground;
-    return hoverBackground;
-}, function (_a) {
-    var hoverBorder = _a.hoverBorder;
-    return hoverBorder;
-});
-var Box = function (_a) {
-    var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, props = __rest(_a, ["innerRef", "shadow", "background"]);
-    var boxProps = useThemeSelector(function (_a) {
-        var shadows = _a.shadows, colors = _a.colors, metrics = _a.metrics;
-        return ({
-            boxShadow: (shadow && shadows[shadow]) || shadow,
-            background: (background && colors[background]) || background,
-            themeSpacing: metrics.spacing,
-            themeIndent: metrics.indent
-        });
-    }, [shadow, background]);
-    return React.createElement(FlexBox, __assign({ ref: innerRef }, boxProps, props));
-};
-var numberOrZero = function (num) {
-    return num || 0;
-};
-var templateObject_1;
-
-var Border = function (_a) {
-    var borderWidth = _a.borderWidth, borderStyle = _a.borderStyle, props = __rest(_a, ["borderWidth", "borderStyle"]);
-    var theme = useTheme();
-    return (React.createElement(Box, __assign({ borderWidth: borderWidth || "1px", borderStyle: borderStyle || "solid", borderColor: theme.colors.primaryText }, props)));
-};
-
-var SeparatorLineComponent = styled.hr(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ",
+var SeparatorLineComponent = styled.hr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  background-color: ", ";\n  border: 0;\n  height: ",
     ";\n  width: ",
@@ -202,5 +168,5 @@ ";\n"])), function (props) { return props.color; }, function (props) {
 };
-var templateObject_1$1;
+var templateObject_1;
 
-var ClickableElement = styled.button(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  :hover {\n    ", ";\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"], ["\n  :hover {\n    ", ";\n  }\n  :active {\n    ",
+var ClickableElement = styled.button(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  :hover {\n    ", ";\n  }\n  :active {\n    ", "\n  }\n  :focus {\n    outline: 0;\n    ", "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"], ["\n  :hover {\n    ", ";\n  }\n  :active {\n    ",
     "\n  }\n  :focus {\n    outline: 0;\n    ",
@@ -221,2 +187,32 @@ "\n  }\n  border: 0;\n  padding: 0;\n  background-color: transparent;\n"])), function (props) { return (props.opacityOnHover ? "opacity: 0.7;" : ""); }, function (_a) {
 };
+var templateObject_1$1;
+
+var FlexBox = styled.div(templateObject_1$2 || (templateObject_1$2 = __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, function (_a) {
+    var hoverBackground = _a.hoverBackground;
+    return hoverBackground;
+}, function (_a) {
+    var hoverBorder = _a.hoverBorder;
+    return hoverBorder;
+});
+var Box = function (_a) {
+    var innerRef = _a.innerRef, shadow = _a.shadow, background = _a.background, border = _a.border, borderColor = _a.borderColor, props = __rest(_a, ["innerRef", "shadow", "background", "border", "borderColor"]);
+    var boxProps = useThemeSelector(function (_a) {
+        var shadows = _a.shadows, colors = _a.colors, metrics = _a.metrics;
+        return ({
+            boxShadow: (shadow && shadows[shadow]) || shadow,
+            background: (background && colors[background]) || background,
+            themeSpacing: metrics.spacing,
+            themeIndent: metrics.indent,
+            border: (border && colors[border]) || border,
+            borderColor: (borderColor && colors[borderColor]) || borderColor
+        });
+    }, [shadow, background, border, borderColor]);
+    return React.createElement(FlexBox, __assign({ ref: innerRef }, boxProps, props));
+};
+var numberOrZero = function (num) {
+    return num || 0;
+};
 var templateObject_1$2;
@@ -469,3 +465,2 @@
 exports.Absolute = Absolute;
-exports.Border = Border;
 exports.Box = Box;
@@ -472,0 +467,0 @@ exports.Clickable = Clickable;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

168441

increased by1.47%

Lines of code

1297

increased by1.01%

Worsened metrics

Number of package files

61

decreased by-1.61%

No dependency changes