@magic-circle/styles - npm Package Compare versions

Comparing version 0.1.9 to 0.1.10

dist/control.d.ts

@@ -20,4 +20,16 @@ import type { ReactNode } from 'react';
 export declare const Container: ({ hasChanges, reset, children, select, ...props }: ContainerProps) => JSX.Element;
-export declare const Label: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Label: ({ children, ...props }: {
+    [x: string]: any;
+    children: any;
+}) => JSX.Element;
 export declare const Inside: import("styled-components").StyledComponent<"div", any, {}, never>;
+declare type ValueProps = {
+    children: number;
+    maxDigits?: number;
+};
+export declare const Value: ({ children, maxDigits, ...props }: ValueProps) => JSX.Element;
+declare type LargeProps = ContainerProps & {
+    header: ReactNode;
+};
+export declare const Large: ({ header, children, ...props }: LargeProps) => JSX.Element;
 export {};

dist/control.jsx

@@ -23,5 +23,5 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 export var ContainerCSS = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: ", "px;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n  overflow: hidden;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-height: ", "px;\n  color: ", ";\n  border-bottom: 1px solid ", ";\n  overflow: hidden;\n"])), SPACING(4), COLORS.shades.s100.css, COLORS.shades.s400.css);
-export var Reset = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  height: 100%;\n  width: ", "px;\n  transform: ", ";\n  transition: transform 0.3s ease;\n  pointer-events: ", ";\n\n  &:hover {\n    transform: translateX(0);\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  height: 100%;\n  width: ", "px;\n  transform: ", ";\n  transition: transform 0.3s ease;\n  pointer-events: ", ";\n\n  &:hover {\n    transform: translateX(0);\n  }\n"])), COLORS.accent.css, COLORS.white.css, SPACING(4), function (props) {
+export var Reset = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  height: 100%;\n  width: ", "px;\n  transform: ", ";\n  transition: transform 0.3s ease;\n  pointer-events: ", ";\n\n  &:hover {\n    transform: translateX(0);\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: ", ";\n  color: ", ";\n  height: 100%;\n  width: ", "px;\n  transform: ", ";\n  transition: transform 0.3s ease;\n  pointer-events: ", ";\n\n  &:hover {\n    transform: translateX(0);\n  }\n"])), COLORS.accent.css, COLORS.black.css, SPACING(4), function (props) {
     return props.hasChanges
-        ? 'translateX(-100%) translateX(3px)'
+        ? 'translateX(-100%) translateX(4px)'
         : 'translateX(-100%)';
@@ -48,4 +48,26 @@ }, function (props) { return (props.hasChanges ? 'all' : 'none'); });
 };
-export var Label = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: 100%;\n  colors: ", ";\n  padding-left: ", "px;\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: 100%;\n  colors: ", ";\n  padding-left: ", "px;\n"])), TYPO.regular, SPACING(8), COLORS.shades.s100.css, SPACING(1));
+var LabelStyled = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: 100%;\n  colors: ", ";\n  padding-left: ", "px;\n  padding-right: ", "px;\n\n  & > span {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"], ["\n  ", "\n  display: flex;\n  align-items: center;\n  width: ", "px;\n  height: 100%;\n  colors: ", ";\n  padding-left: ", "px;\n  padding-right: ", "px;\n\n  & > span {\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n  }\n"])), TYPO.regular, SPACING(8), COLORS.shades.s100.css, SPACING(1), SPACING(0.5));
+export var Label = function (_a) {
+    var children = _a.children, props = __rest(_a, ["children"]);
+    return (<LabelStyled {...props}>
+      <span>{children}</span>
+    </LabelStyled>);
+};
 export var Inside = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  flex: 1;\n  padding-right: ", "px;\n"], ["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  flex: 1;\n  padding-right: ", "px;\n"])), SPACING(1));
+var formatNumber = function (n, maxDigits) {
+    if (maxDigits === void 0) { maxDigits = 5; }
+    var digits = n.toString().split('.')[1];
+    return digits && digits.length >= 5 ? n.toFixed(maxDigits) : n.toString();
+};
+export var Value = function (_a) {
+    var children = _a.children, maxDigits = _a.maxDigits, props = __rest(_a, ["children", "maxDigits"]);
+    return <div {...props}>{formatNumber(children, maxDigits)}</div>;
+};
+export var Large = function (_a) {
+    var header = _a.header, children = _a.children, props = __rest(_a, ["header", "children"]);
+    return (<div>
+      <Container {...props}>{header}</Container>
+      {children}
+    </div>);
+};
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

dist/Menu.jsx

@@ -25,3 +25,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 })(MenuBadge || (MenuBadge = {}));
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  min-width: ", "px;\n  background: ", ";\n  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.12);\n  border-radius: 5px;\n  color: ", ";\n  pointer-events: none;\n  padding: ", "px;\n  opacity: 0;\n  transition: opacity ", "ms ease;\n  top: -", "px;\n  left: 100%;\n"], ["\n  position: absolute;\n  z-index: 1;\n  min-width: ", "px;\n  background: ", ";\n  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.12);\n  border-radius: 5px;\n  color: ", ";\n  pointer-events: none;\n  padding: ", "px;\n  opacity: 0;\n  transition: opacity ", "ms ease;\n  top: -", "px;\n  left: 100%;\n"])), SPACING(18), COLORS.shades.s500.css, COLORS.shades.s100.css, SPACING(0.5), DURATION, SPACING(0.5));
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  z-index: 1;\n  min-width: ", "px;\n  background: ", ";\n  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.12);\n  border-radius: 5px;\n  color: ", ";\n  pointer-events: none;\n  padding: ", "px;\n  opacity: 0;\n  transition: opacity ", "ms ease;\n  top: -", "px;\n  left: 100%;\n"], ["\n  position: absolute;\n  z-index: 1;\n  min-width: ", "px;\n  background: ", ";\n  box-shadow: 0px 4px 10px 5px rgba(0, 0, 0, 0.12);\n  border-radius: 5px;\n  color: ", ";\n  pointer-events: none;\n  padding: ", "px;\n  opacity: 0;\n  transition: opacity ", "ms ease;\n  top: -", "px;\n  left: 100%;\n"])), SPACING(18), COLORS.shades.s500.css, COLORS.shades.s100.css, SPACING(0.25), DURATION, SPACING(0.5));
 var Outer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  & > ", " {\n    opacity: 1;\n    pointer-events: all;\n    left: 0;\n    top: 0;\n    position: relative;\n  }\n"], ["\n  position: relative;\n  & > ", " {\n    opacity: 1;\n    pointer-events: all;\n    left: 0;\n    top: 0;\n    position: relative;\n  }\n"])), Container);
@@ -37,7 +37,7 @@ var Ellipsis = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  max-width: ", "px;\n  & span:last-of-type {\n    color: initial;\n  }\n"], ["\n  max-width: ", "px;\n  & span:last-of-type {\n    color: initial;\n  }\n"])), SPACING(12));
 var Label = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;\n"], ["\n  flex: 1;\n"])));
-var Item = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px;\n  opacity: ", ";\n  border-radius: 5px;\n  background: ", ";\n  color: ", ";\n  text-decoration: none;\n  cursor: pointer;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: calc(100% - ", "px);\n    background: ", ";\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover > ", " {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  &:last-of-type:after {\n    display: none;\n  }\n\n  & > ", " > ", " {\n    color: ", ";\n  }\n\n  &:hover > ", " > ", " {\n    color: ", ";\n    & span:last-of-type {\n      color: ", ";\n    }\n  }\n"], ["\n  ", "\n  position: relative;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px;\n  opacity: ", ";\n  border-radius: 5px;\n  background: ", ";\n  color: ", ";\n  text-decoration: none;\n  cursor: pointer;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: calc(100% - ", "px);\n    background: ", ";\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover > ", " {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  &:last-of-type:after {\n    display: none;\n  }\n\n  & > ", " > ", " {\n    color: ", ";\n  }\n\n  &:hover > ", " > ", " {\n    color: ", ";\n    & span:last-of-type {\n      color: ", ";\n    }\n  }\n"])), TYPO.regular, SPACING(3), SPACING(1), function (props) { return (props.disabled ? 0.5 : 1); }, function (props) {
-    return props.checked ? COLORS.shades.s500.css : 'initial';
+var Item = styled.a(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px;\n  opacity: ", ";\n  border-radius: 0px;\n  background: ", ";\n  color: ", ";\n  text-decoration: none;\n  padding-bottom: 1px;\n  cursor: pointer;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: calc(100% - ", "px);\n    background: ", ";\n    opacity: 0;\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover > ", " {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  &:first-child {\n    border-radius: 5px 5px 0 0;\n  }\n\n  &:last-child {\n    border-radius: 0 0 5px 5px;\n  }\n\n  &:last-of-type:after {\n    display: none;\n  }\n\n  & > ", " > ", " {\n    color: ", ";\n  }\n\n  &:hover > ", " > ", " {\n    color: ", ";\n    & span:last-of-type {\n      color: ", ";\n    }\n  }\n"], ["\n  ", "\n  position: relative;\n  height: ", "px;\n  display: flex;\n  align-items: center;\n  padding: 0 ", "px;\n  opacity: ", ";\n  border-radius: 0px;\n  background: ", ";\n  color: ", ";\n  text-decoration: none;\n  padding-bottom: 1px;\n  cursor: pointer;\n\n  &:after {\n    content: '';\n    position: absolute;\n    bottom: 0px;\n    height: 1px;\n    width: calc(100% - ", "px);\n    background: ", ";\n    opacity: 0;\n  }\n\n  &:hover {\n    background: ", ";\n    color: ", ";\n  }\n\n  &:hover > ", " {\n    opacity: 1;\n    pointer-events: all;\n  }\n\n  &:first-child {\n    border-radius: 5px 5px 0 0;\n  }\n\n  &:last-child {\n    border-radius: 0 0 5px 5px;\n  }\n\n  &:last-of-type:after {\n    display: none;\n  }\n\n  & > ", " > ", " {\n    color: ", ";\n  }\n\n  &:hover > ", " > ", " {\n    color: ", ";\n    & span:last-of-type {\n      color: ", ";\n    }\n  }\n"])), TYPO.regular, SPACING(3.5), SPACING(1), function (props) { return (props.disabled ? 0.5 : 1); }, function (props) {
+    return props.checked ? COLORS.shades.s500.css : COLORS.shades.s600.css;
 }, function (props) {
     return props.checked || props.active ? COLORS.white.css : COLORS.shades.s100.css;
-}, SPACING(2), COLORS.shades.s300.css, COLORS.shades.s600.css, COLORS.white.css, Container, Label, Ellipsis, function (props) {
+}, SPACING(2), COLORS.shades.s400.css, COLORS.accent.opacity(0.1), COLORS.accent.css, Container, Label, Ellipsis, function (props) {
     return props.checked || props.active
@@ -44,0 +44,0 @@ ? COLORS.accent.css

dist/Popover.jsx

@@ -187,3 +187,7 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
           </Container>, document.body)}
-      <Wrapper ref={container} onMouseEnter={function () { return handleHover(true); }} onMouseOver={function () { return handleHover(true); }} onMouseLeave={function (e) {
+      <Wrapper ref={container} onMouseEnter={function () { return handleHover(true); }} onMouseOver={function () { return handleHover(true); }} onClick={function () {
+            if (showOnClick) {
+                toggle();
+            }
+        }} onMouseLeave={function (e) {
             // check if next element is the popover.
@@ -190,0 +194,0 @@ // if it is not, set visible to false

package.json

 {
   "name": "@magic-circle/styles",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "description": "Magic Circle style helpers",
@@ -35,3 +35,3 @@ "keywords": [
   "devDependencies": {
-    "@magic-circle/state": "^0.1.9",
+    "@magic-circle/state": "^0.1.10",
     "@types/color-string": "^1.5.2",
@@ -49,3 +49,3 @@ "@types/styled-components": "*",
   },
-  "gitHead": "50c751724d7e97b12a3502a390da255fe77303b1"
+  "gitHead": "9361b0b2633d4e6c3af3de2beadd52db9cb9cd92"
 }

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

1495325

increased by0.13%

Lines of code

2229

increased by1.83%

No dependency changes