@chakra-ui/stat - npm Package Compare versions

Comparing version 1.0.0-next.4 to 1.0.0-next.5

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+# [1.0.0-next.5](https://github.com/chakra-ui/chakra-ui/compare/@chakra-ui/stat@1.0.0-next.4...@chakra-ui/stat@1.0.0-next.5) (2020-07-15)
+
+**Note:** Version bump only for package @chakra-ui/stat
+
+# Change Log
+
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
 # 1.0.0-next.4 (2020-07-01)
@@ -8,0 +17,0 @@

dist/cjs/stat.js

@@ -6,3 +6,3 @@ "use strict";
 exports.StatArrow = StatArrow;
-exports.StatGroup = exports.Stat = exports.StatUpArrow = exports.StatNumber = exports.StyledNumber = exports.StatHelpText = exports.StatLabel = void 0;
+exports.StatGroup = exports.Stat = exports.StatUpArrow = exports.StatNumber = exports.StatHelpText = exports.StatLabel = void 0;
 
@@ -28,10 +28,2 @@ var _icon = require("@chakra-ui/icon");
 /**
- * Learn the Semantic HTML for stats:
- * @see Post https://www.bitdegree.org/learn/html-dl
- */
-var StyledLabel = (0, _system.chakra)("dt", {
-  themeKey: "Stat.Label"
-});
-
-/**
  * StatLabel - Theming
@@ -48,10 +40,10 @@ *
 
-  var theming = (0, _system.useThemingContext)();
-
   var _className = (0, _utils.cx)("chakra-stat__label", className);
 
-  return /*#__PURE__*/React.createElement(StyledLabel, _extends({
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.dt, _extends({
     ref: ref,
-    className: _className
-  }, theming, rest));
+    className: _className,
+    __css: styles.label
+  }, rest));
 });
@@ -63,15 +55,3 @@ exports.StatLabel = StatLabel;
 }
-/**
- * StatHelpText
- *
- * Additional context and information about the stat.
- *
- * To style the StatHelpText globally, change the styles in
- * `theme.components.Stat.HelpText`
- */
 
-
-var StyledHelpText = (0, _system.chakra)("p", {
-  themeKey: "Stat.HelpText"
-});
 var StatHelpText = /*#__PURE__*/React.forwardRef(function StatHelpText(props, ref) {
@@ -81,10 +61,12 @@ var className = props.className,
 
-  var theming = (0, _system.useThemingContext)();
+  var styles = (0, _system.useStyles)();
 
   var _className = (0, _utils.cx)("chakra-stat__help-text", className);
 
-  return /*#__PURE__*/React.createElement(StyledHelpText, _extends({
+  return /*#__PURE__*/React.createElement(_system.chakra.p, _extends({
     ref: ref,
     className: _className
-  }, theming, rest));
+  }, rest, {
+    __css: styles.helpText
+  }));
 });
@@ -96,16 +78,3 @@ exports.StatHelpText = StatHelpText;
 }
-/**
- * StatNumber
- *
- * Numerical value representation of the stat.
- *
- *To style the StatNumber globally, change the styles in
- * `theme.components.Stat.Number`
- */
 
-
-var StyledNumber = (0, _system.chakra)("dd", {
-  themeKey: "Stat.Number"
-});
-exports.StyledNumber = StyledNumber;
 var StatNumber = /*#__PURE__*/React.forwardRef(function StatNumber(props, ref) {
@@ -115,10 +84,11 @@ var className = props.className,
 
-  var theming = (0, _system.useThemingContext)();
-
   var _className = (0, _utils.cx)("chakra-stat__number", className);
 
-  return /*#__PURE__*/React.createElement(StyledNumber, _extends({
+  var styles = (0, _system.useStyles)();
+  return /*#__PURE__*/React.createElement(_system.chakra.dd, _extends({
     ref: ref,
     className: _className
-  }, theming, rest));
+  }, rest, {
+    __css: styles.number
+  }));
 });
@@ -139,6 +109,3 @@ exports.StatNumber = StatNumber;
   return /*#__PURE__*/React.createElement(_icon.Icon, _extends({
-    mr: 1,
-    size: "14px",
-    color: "red.400",
-    verticalAlign: "middle"
+    color: "red.400"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -162,6 +129,3 @@ fill: "currentColor",
   return /*#__PURE__*/React.createElement(_icon.Icon, _extends({
-    mr: 1,
-    size: "14px",
-    color: "green.400",
-    verticalAlign: "middle"
+    color: "green.400"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -189,10 +153,11 @@ fill: "currentColor",
 
+  var styles = (0, _system.useStyles)();
   var Icon = type === "increase" ? StatUpArrow : StatDownArrow;
   var defaultAriaLabel = type === "increase" ? "increased by" : "decreased by";
   var label = ariaLabel || defaultAriaLabel;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_visuallyHidden.VisuallyHidden, {
-    children: label
-  }), /*#__PURE__*/React.createElement(Icon, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_visuallyHidden.VisuallyHidden, null, label), /*#__PURE__*/React.createElement(Icon, _extends({
     "aria-hidden": true
-  }, rest)));
+  }, rest, {
+    __css: styles.icon
+  })));
 }
@@ -203,42 +168,16 @@
 }
-/**
- * Stat
- *
- * A component to display statistic numbers.
- *
- * To style the Stat globally, change the styles in
- * `theme.components.Stat.Root`
- */
 
-
-var StyledStat = (0, _system.chakra)("div", {
-  baseStyle: {
-    flex: "1",
-    paddingRight: 4
-  }
-});
 var Stat = /*#__PURE__*/React.forwardRef(function Stat(props, ref) {
-  var defaults = (0, _system.useThemeDefaultProps)("Stat");
+  var styles = (0, _system.useStyleConfig)("Stat", props);
 
-  var _props$size = props.size,
-      size = _props$size === void 0 ? defaults == null ? void 0 : defaults.size : _props$size,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? defaults == null ? void 0 : defaults.variant : _props$variant,
-      _props$colorScheme = props.colorScheme,
-      colorScheme = _props$colorScheme === void 0 ? defaults == null ? void 0 : defaults.colorScheme : _props$colorScheme,
-      className = props.className,
-      children = props.children,
-      rest = _objectWithoutPropertiesLoose(props, ["size", "variant", "colorScheme", "className", "children"]);
+  var _omitThemingProps = (0, _system.omitThemingProps)(props),
+      className = _omitThemingProps.className,
+      children = _omitThemingProps.children,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "children"]);
 
-  var theming = {
-    size: size,
-    variant: variant,
-    colorScheme: colorScheme
-  };
-
   var _className = (0, _utils.cx)("chakra-stat", className);
 
-  return /*#__PURE__*/React.createElement(_system.ThemingProvider, {
-    value: theming
-  }, /*#__PURE__*/React.createElement(StyledStat, _extends({
+  return /*#__PURE__*/React.createElement(_system.StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
     className: _className,
@@ -260,12 +199,18 @@ ref: ref
 
-var StatGroup = (0, _system.chakra)("div", {
-  baseStyle: {
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "space-around",
-    alignItems: "flex-start"
-  },
-  attrs: {
-    role: "group"
-  }
+var StatGroup = /*#__PURE__*/React.forwardRef(function StatGroup(props, ref) {
+  var className = props.className,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+
+  return /*#__PURE__*/React.createElement(_system.chakra.div, _extends({
+    ref: ref,
+    role: "group",
+    className: (0, _utils.cx)("chakra-stat__group", className)
+  }, rest, {
+    __css: {
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "space-around",
+      alignItems: "flex-start"
+    }
+  }));
 });
@@ -272,0 +217,0 @@ exports.StatGroup = StatGroup;

dist/esm/stat.js

@@ -6,15 +6,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 import { Icon } from "@chakra-ui/icon";
-import { chakra, ThemingProvider, useThemeDefaultProps, useThemingContext } from "@chakra-ui/system";
+import { chakra, omitThemingProps, StylesProvider, useStyleConfig, useStyles } from "@chakra-ui/system";
 import { cx, __DEV__ } from "@chakra-ui/utils";
 import { VisuallyHidden } from "@chakra-ui/visually-hidden";
 import * as React from "react";
-/**
- * Learn the Semantic HTML for stats:
- * @see Post https://www.bitdegree.org/learn/html-dl
- */
 
-var StyledLabel = chakra("dt", {
-  themeKey: "Stat.Label"
-});
-
 /**
@@ -34,10 +26,10 @@ * StatLabel - Theming
 
-  var theming = useThemingContext();
-
   var _className = cx("chakra-stat__label", className);
 
-  return /*#__PURE__*/React.createElement(StyledLabel, _extends({
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.dt, _extends({
     ref: ref,
-    className: _className
-  }, theming, rest));
+    className: _className,
+    __css: styles.label
+  }, rest));
 });
@@ -48,15 +40,3 @@
 }
-/**
- * StatHelpText
- *
- * Additional context and information about the stat.
- *
- * To style the StatHelpText globally, change the styles in
- * `theme.components.Stat.HelpText`
- */
 
-
-var StyledHelpText = chakra("p", {
-  themeKey: "Stat.HelpText"
-});
 export var StatHelpText = /*#__PURE__*/React.forwardRef(function StatHelpText(props, ref) {
@@ -68,10 +48,12 @@ var {
 
-  var theming = useThemingContext();
+  var styles = useStyles();
 
   var _className = cx("chakra-stat__help-text", className);
 
-  return /*#__PURE__*/React.createElement(StyledHelpText, _extends({
+  return /*#__PURE__*/React.createElement(chakra.p, _extends({
     ref: ref,
     className: _className
-  }, theming, rest));
+  }, rest, {
+    __css: styles.helpText
+  }));
 });
@@ -82,15 +64,3 @@
 }
-/**
- * StatNumber
- *
- * Numerical value representation of the stat.
- *
- *To style the StatNumber globally, change the styles in
- * `theme.components.Stat.Number`
- */
 
-
-export var StyledNumber = chakra("dd", {
-  themeKey: "Stat.Number"
-});
 export var StatNumber = /*#__PURE__*/React.forwardRef(function StatNumber(props, ref) {
@@ -102,10 +72,11 @@ var {
 
-  var theming = useThemingContext();
-
   var _className = cx("chakra-stat__number", className);
 
-  return /*#__PURE__*/React.createElement(StyledNumber, _extends({
+  var styles = useStyles();
+  return /*#__PURE__*/React.createElement(chakra.dd, _extends({
     ref: ref,
     className: _className
-  }, theming, rest));
+  }, rest, {
+    __css: styles.number
+  }));
 });
@@ -125,6 +96,3 @@
   return /*#__PURE__*/React.createElement(Icon, _extends({
-    mr: 1,
-    size: "14px",
-    color: "red.400",
-    verticalAlign: "middle"
+    color: "red.400"
   }, props), /*#__PURE__*/React.createElement("path", {
@@ -147,6 +115,3 @@ fill: "currentColor",
 export var StatUpArrow = props => /*#__PURE__*/React.createElement(Icon, _extends({
-  mr: 1,
-  size: "14px",
-  color: "green.400",
-  verticalAlign: "middle"
+  color: "green.400"
 }, props), /*#__PURE__*/React.createElement("path", {
@@ -173,10 +138,11 @@ fill: "currentColor",
 
+  var styles = useStyles();
   var Icon = type === "increase" ? StatUpArrow : StatDownArrow;
   var defaultAriaLabel = type === "increase" ? "increased by" : "decreased by";
   var label = ariaLabel || defaultAriaLabel;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, {
-    children: label
-  }), /*#__PURE__*/React.createElement(Icon, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(VisuallyHidden, null, label), /*#__PURE__*/React.createElement(Icon, _extends({
     "aria-hidden": true
-  }, rest)));
+  }, rest, {
+    __css: styles.icon
+  })));
 }
@@ -187,41 +153,18 @@
 }
-/**
- * Stat
- *
- * A component to display statistic numbers.
- *
- * To style the Stat globally, change the styles in
- * `theme.components.Stat.Root`
- */
 
-
-var StyledStat = chakra("div", {
-  baseStyle: {
-    flex: "1",
-    paddingRight: 4
-  }
-});
 export var Stat = /*#__PURE__*/React.forwardRef(function Stat(props, ref) {
-  var defaults = useThemeDefaultProps("Stat");
+  var styles = useStyleConfig("Stat", props);
 
-  var {
-    size = defaults == null ? void 0 : defaults.size,
-    variant = defaults == null ? void 0 : defaults.variant,
-    colorScheme = defaults == null ? void 0 : defaults.colorScheme,
+  var _omitThemingProps = omitThemingProps(props),
+      {
     className,
     children
-  } = props,
-      rest = _objectWithoutPropertiesLoose(props, ["size", "variant", "colorScheme", "className", "children"]);
+  } = _omitThemingProps,
+      rest = _objectWithoutPropertiesLoose(_omitThemingProps, ["className", "children"]);
 
-  var theming = {
-    size,
-    variant,
-    colorScheme
-  };
-
   var _className = cx("chakra-stat", className);
 
-  return /*#__PURE__*/React.createElement(ThemingProvider, {
-    value: theming
-  }, /*#__PURE__*/React.createElement(StyledStat, _extends({
+  return /*#__PURE__*/React.createElement(StylesProvider, {
+    value: styles
+  }, /*#__PURE__*/React.createElement(chakra.div, _extends({
     className: _className,
@@ -242,12 +185,20 @@ ref: ref
 
-export var StatGroup = chakra("div", {
-  baseStyle: {
-    display: "flex",
-    flexWrap: "wrap",
-    justifyContent: "space-around",
-    alignItems: "flex-start"
-  },
-  attrs: {
-    role: "group"
-  }
+export var StatGroup = /*#__PURE__*/React.forwardRef(function StatGroup(props, ref) {
+  var {
+    className
+  } = props,
+      rest = _objectWithoutPropertiesLoose(props, ["className"]);
+
+  return /*#__PURE__*/React.createElement(chakra.div, _extends({
+    ref: ref,
+    role: "group",
+    className: cx("chakra-stat__group", className)
+  }, rest, {
+    __css: {
+      display: "flex",
+      flexWrap: "wrap",
+      justifyContent: "space-around",
+      alignItems: "flex-start"
+    }
+  }));
 });
@@ -254,0 +205,0 @@

package.json

 {
   "name": "@chakra-ui/stat",
-  "version": "1.0.0-next.4",
+  "version": "1.0.0-next.5",
   "description": "A React component for displaying statistics",
@@ -51,14 +51,14 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/icon": "^1.0.0-next.4",
-    "@chakra-ui/utils": "^1.0.0-next.4",
-    "@chakra-ui/visually-hidden": "^1.0.0-next.4"
+    "@chakra-ui/icon": "^1.0.0-next.5",
+    "@chakra-ui/utils": "^1.0.0-next.5",
+    "@chakra-ui/visually-hidden": "^1.0.0-next.5"
   },
   "devDependencies": {
-    "@chakra-ui/system": "^1.0.0-next.4"
+    "@chakra-ui/system": "^1.0.0-next.5"
   },
   "peerDependencies": {
-    "@chakra-ui/system": ">0.8",
+    "@chakra-ui/system": "^1.0.0-next.4",
     "react": "16.x"
   },
-  "gitHead": "cdd5eac1db90ba33a07c009fb8dbcc4453d6ec01"
+  "gitHead": "24eec5d796d81b6fafbcfa7231fb2cb15e6d5a29"
 }

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

161114

increased by1.16%

Worsened metrics

Lines of code

1000

decreased by-10.47%

Dependency changes

• + Added@chakra-ui/color-mode@1.4.8(transitive)

• + Added@chakra-ui/hooks@1.9.1(transitive)

• + Added@chakra-ui/react-env@1.1.6(transitive)

• + Added@chakra-ui/react-utils@1.2.3(transitive)

• + Added@chakra-ui/styled-system@1.19.0(transitive)

• + Added@chakra-ui/system@1.12.1(transitive)

• + Addedcompute-scroll-into-view@1.0.14(transitive)

• + Addedcopy-to-clipboard@3.3.1(transitive)

• + Addedcsstype@3.0.9(transitive)

• + Addedreact-fast-compare@3.2.0(transitive)

• + Addedtoggle-selection@1.0.6(transitive)

• + Addedtslib@2.8.1(transitive)

• - Removed@chakra-ui/anatomy@2.2.2(transitive)

• - Removed@chakra-ui/color-mode@2.2.0(transitive)

• - Removed@chakra-ui/object-utils@2.1.0(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@2.1.0(transitive)

• - Removed@chakra-ui/react-utils@2.0.12(transitive)

• - Removed@chakra-ui/shared-utils@2.0.5(transitive)

• - Removed@chakra-ui/styled-system@2.9.2(transitive)

• - Removed@chakra-ui/system@2.6.2(transitive)

• - Removed@chakra-ui/theme@3.3.1(transitive)

• - Removed@chakra-ui/theme-tools@2.1.2(transitive)

• - Removed@chakra-ui/theme-utils@2.0.21(transitive)

• - Removed@chakra-ui/utils@2.0.15(transitive)

• - Removed@types/lodash.mergewith@4.6.7(transitive)

• - Removedcolor2k@2.0.3(transitive)

• - Removedcsstype@3.1.3(transitive)

• - Removedframesync@6.1.2(transitive)

• - Removedreact@18.3.1(transitive)

• - Removedreact-fast-compare@3.2.2(transitive)

• - Removedtslib@2.4.0(transitive)

• Updated@chakra-ui/icon@^1.0.0-next.5

• Updated@chakra-ui/utils@^1.0.0-next.5

• Updated@chakra-ui/visually-hidden@^1.0.0-next.5