@chakra-ui/stat - npm Package Compare versions

Comparing version 0.0.0-dev-20220820195548 to 0.0.0-dev-20220822051456

dist/index.cjs.js

@@ -41,4 +41,7 @@ "use strict";
 
+// src/stat-arrow.tsx
+var import_icon = require("@chakra-ui/icon");
+var import_system2 = require("@chakra-ui/system");
+
 // src/stat.tsx
-var import_icon = require("@chakra-ui/icon");
 var import_react_context = require("@chakra-ui/react-context");
@@ -55,36 +58,22 @@ var import_system = require("@chakra-ui/system");
 });
-var StatLabel = (0, import_system.forwardRef)(function StatLabel2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ import_react.default.createElement(import_system.chakra.dt, {
+var Stat = (0, import_system.forwardRef)(function Stat2(props, ref) {
+  const styles = (0, import_system.useMultiStyleConfig)("Stat", props);
+  const statStyles = {
+    position: "relative",
+    flex: "1 1 0%",
+    ...styles.container
+  };
+  const { className, children, ...rest } = (0, import_system.omitThemingProps)(props);
+  return /* @__PURE__ */ import_react.default.createElement(StatStylesProvider, {
+    value: styles
+  }, /* @__PURE__ */ import_react.default.createElement(import_system.chakra.div, {
     ref,
-    ...props,
-    className: cx("chakra-stat__label", props.className),
-    __css: styles.label
-  });
+    ...rest,
+    className: cx("chakra-stat", className),
+    __css: statStyles
+  }, /* @__PURE__ */ import_react.default.createElement("dl", null, children)));
 });
-StatLabel.displayName = "StatLabel";
-var StatHelpText = (0, import_system.forwardRef)(function StatHelpText2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ import_react.default.createElement(import_system.chakra.dd, {
-    ref,
-    ...props,
-    className: cx("chakra-stat__help-text", props.className),
-    __css: styles.helpText
-  });
-});
-StatHelpText.displayName = "StatHelpText";
-var StatNumber = (0, import_system.forwardRef)(function StatNumber2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ import_react.default.createElement(import_system.chakra.dd, {
-    ref,
-    ...props,
-    className: cx("chakra-stat__number", props.className),
-    __css: {
-      ...styles.number,
-      fontFeatureSettings: "pnum",
-      fontVariantNumeric: "proportional-nums"
-    }
-  });
-});
-StatNumber.displayName = "StatNumber";
+Stat.displayName = "Stat";
+
+// src/stat-arrow.tsx
 var StatDownArrow = (props) => /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, {
@@ -114,3 +103,3 @@ color: "red.400",
   const label = ariaLabel || defaultAriaLabel;
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_system.chakra.span, {
+  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement(import_system2.chakra.span, {
     srOnly: true
@@ -124,22 +113,7 @@ }, label), /* @__PURE__ */ import_react.default.createElement(BaseIcon, {
 StatArrow.displayName = "StatArrow";
-var Stat = (0, import_system.forwardRef)(function Stat2(props, ref) {
-  const styles = (0, import_system.useMultiStyleConfig)("Stat", props);
-  const statStyles = {
-    position: "relative",
-    flex: "1 1 0%",
-    ...styles.container
-  };
-  const { className, children, ...rest } = (0, import_system.omitThemingProps)(props);
-  return /* @__PURE__ */ import_react.default.createElement(StatStylesProvider, {
-    value: styles
-  }, /* @__PURE__ */ import_react.default.createElement(import_system.chakra.div, {
-    ref,
-    ...rest,
-    className: cx("chakra-stat", className),
-    __css: statStyles
-  }, /* @__PURE__ */ import_react.default.createElement("dl", null, children)));
-});
-Stat.displayName = "Stat";
-var StatGroup = (0, import_system.forwardRef)(function StatGroup2(props, ref) {
-  return /* @__PURE__ */ import_react.default.createElement(import_system.chakra.div, {
+
+// src/stat-group.tsx
+var import_system3 = require("@chakra-ui/system");
+var StatGroup = (0, import_system3.forwardRef)(function StatGroup2(props, ref) {
+  return /* @__PURE__ */ import_react.default.createElement(import_system3.chakra.div, {
     ...props,
@@ -158,2 +132,45 @@ ref,
 StatGroup.displayName = "StatGroup";
+
+// src/stat-help-text.tsx
+var import_system4 = require("@chakra-ui/system");
+var StatHelpText = (0, import_system4.forwardRef)(function StatHelpText2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ import_react.default.createElement(import_system4.chakra.dd, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__help-text", props.className),
+    __css: styles.helpText
+  });
+});
+StatHelpText.displayName = "StatHelpText";
+
+// src/stat-label.tsx
+var import_system5 = require("@chakra-ui/system");
+var StatLabel = (0, import_system5.forwardRef)(function StatLabel2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ import_react.default.createElement(import_system5.chakra.dt, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__label", props.className),
+    __css: styles.label
+  });
+});
+StatLabel.displayName = "StatLabel";
+
+// src/stat-number.tsx
+var import_system6 = require("@chakra-ui/system");
+var StatNumber = (0, import_system6.forwardRef)(function StatNumber2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ import_react.default.createElement(import_system6.chakra.dd, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__number", props.className),
+    __css: {
+      ...styles.number,
+      fontFeatureSettings: "pnum",
+      fontVariantNumeric: "proportional-nums"
+    }
+  });
+});
+StatNumber.displayName = "StatNumber";
 // Annotate the CommonJS export names for ESM import in node:
@@ -160,0 +177,0 @@ 0 && (module.exports = {

dist/index.d.ts

@@ -0,16 +1,5 @@
+import { IconProps } from '@chakra-ui/icon';
 import * as _chakra_ui_system from '@chakra-ui/system';
-import { SystemStyleObject, HTMLChakraProps, ThemingProps } from '@chakra-ui/system';
-import { IconProps } from '@chakra-ui/icon';
+import { HTMLChakraProps, SystemStyleObject, ThemingProps } from '@chakra-ui/system';
 
-declare const useStatStyles: () => Record<string, SystemStyleObject>;
-
-interface StatLabelProps extends HTMLChakraProps<"dt"> {
-}
-declare const StatLabel: _chakra_ui_system.ComponentWithAs<"dt", StatLabelProps>;
-interface StatHelpTextProps extends HTMLChakraProps<"dd"> {
-}
-declare const StatHelpText: _chakra_ui_system.ComponentWithAs<"dd", StatHelpTextProps>;
-interface StatNumberProps extends HTMLChakraProps<"dd"> {
-}
-declare const StatNumber: _chakra_ui_system.ComponentWithAs<"dd", StatNumberProps>;
 declare const StatDownArrow: React.FC<IconProps>;
@@ -28,5 +17,3 @@ declare function StatUpArrow(props: IconProps): JSX.Element;
 }
-interface StatProps extends HTMLChakraProps<"div">, ThemingProps<"Stat"> {
-}
-declare const Stat: _chakra_ui_system.ComponentWithAs<"div", StatProps>;
+
 interface StatGroupProps extends HTMLChakraProps<"div"> {
@@ -36,2 +23,20 @@ }
 
+interface StatHelpTextProps extends HTMLChakraProps<"dd"> {
+}
+declare const StatHelpText: _chakra_ui_system.ComponentWithAs<"dd", StatHelpTextProps>;
+
+interface StatLabelProps extends HTMLChakraProps<"dt"> {
+}
+declare const StatLabel: _chakra_ui_system.ComponentWithAs<"dt", StatLabelProps>;
+
+interface StatNumberProps extends HTMLChakraProps<"dd"> {
+}
+declare const StatNumber: _chakra_ui_system.ComponentWithAs<"dd", StatNumberProps>;
+
+declare const useStatStyles: () => Record<string, SystemStyleObject>;
+
+interface StatProps extends HTMLChakraProps<"div">, ThemingProps<"Stat"> {
+}
+declare const Stat: _chakra_ui_system.ComponentWithAs<"div", StatProps>;
+
 export { Stat, StatArrow, StatArrowProps, StatDownArrow, StatGroup, StatGroupProps, StatHelpText, StatHelpTextProps, StatLabel, StatLabelProps, StatNumber, StatNumberProps, StatProps, StatUpArrow, useStatStyles };

dist/index.esm.js

 // ../../react-shim.js
 import React from "react";
 
+// src/stat-arrow.tsx
+import { Icon } from "@chakra-ui/icon";
+import { chakra as chakra2 } from "@chakra-ui/system";
+
 // src/stat.tsx
-import { Icon } from "@chakra-ui/icon";
 import { createContext } from "@chakra-ui/react-context";
@@ -22,36 +25,22 @@ import {
 });
-var StatLabel = forwardRef(function StatLabel2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ React.createElement(chakra.dt, {
+var Stat = forwardRef(function Stat2(props, ref) {
+  const styles = useMultiStyleConfig("Stat", props);
+  const statStyles = {
+    position: "relative",
+    flex: "1 1 0%",
+    ...styles.container
+  };
+  const { className, children, ...rest } = omitThemingProps(props);
+  return /* @__PURE__ */ React.createElement(StatStylesProvider, {
+    value: styles
+  }, /* @__PURE__ */ React.createElement(chakra.div, {
     ref,
-    ...props,
-    className: cx("chakra-stat__label", props.className),
-    __css: styles.label
-  });
+    ...rest,
+    className: cx("chakra-stat", className),
+    __css: statStyles
+  }, /* @__PURE__ */ React.createElement("dl", null, children)));
 });
-StatLabel.displayName = "StatLabel";
-var StatHelpText = forwardRef(function StatHelpText2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ React.createElement(chakra.dd, {
-    ref,
-    ...props,
-    className: cx("chakra-stat__help-text", props.className),
-    __css: styles.helpText
-  });
-});
-StatHelpText.displayName = "StatHelpText";
-var StatNumber = forwardRef(function StatNumber2(props, ref) {
-  const styles = useStatStyles();
-  return /* @__PURE__ */ React.createElement(chakra.dd, {
-    ref,
-    ...props,
-    className: cx("chakra-stat__number", props.className),
-    __css: {
-      ...styles.number,
-      fontFeatureSettings: "pnum",
-      fontVariantNumeric: "proportional-nums"
-    }
-  });
-});
-StatNumber.displayName = "StatNumber";
+Stat.displayName = "Stat";
+
+// src/stat-arrow.tsx
 var StatDownArrow = (props) => /* @__PURE__ */ React.createElement(Icon, {
@@ -81,3 +70,3 @@ color: "red.400",
   const label = ariaLabel || defaultAriaLabel;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(chakra.span, {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(chakra2.span, {
     srOnly: true
@@ -91,22 +80,7 @@ }, label), /* @__PURE__ */ React.createElement(BaseIcon, {
 StatArrow.displayName = "StatArrow";
-var Stat = forwardRef(function Stat2(props, ref) {
-  const styles = useMultiStyleConfig("Stat", props);
-  const statStyles = {
-    position: "relative",
-    flex: "1 1 0%",
-    ...styles.container
-  };
-  const { className, children, ...rest } = omitThemingProps(props);
-  return /* @__PURE__ */ React.createElement(StatStylesProvider, {
-    value: styles
-  }, /* @__PURE__ */ React.createElement(chakra.div, {
-    ref,
-    ...rest,
-    className: cx("chakra-stat", className),
-    __css: statStyles
-  }, /* @__PURE__ */ React.createElement("dl", null, children)));
-});
-Stat.displayName = "Stat";
-var StatGroup = forwardRef(function StatGroup2(props, ref) {
-  return /* @__PURE__ */ React.createElement(chakra.div, {
+
+// src/stat-group.tsx
+import { chakra as chakra3, forwardRef as forwardRef2 } from "@chakra-ui/system";
+var StatGroup = forwardRef2(function StatGroup2(props, ref) {
+  return /* @__PURE__ */ React.createElement(chakra3.div, {
     ...props,
@@ -125,2 +99,45 @@ ref,
 StatGroup.displayName = "StatGroup";
+
+// src/stat-help-text.tsx
+import { chakra as chakra4, forwardRef as forwardRef3 } from "@chakra-ui/system";
+var StatHelpText = forwardRef3(function StatHelpText2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ React.createElement(chakra4.dd, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__help-text", props.className),
+    __css: styles.helpText
+  });
+});
+StatHelpText.displayName = "StatHelpText";
+
+// src/stat-label.tsx
+import { chakra as chakra5, forwardRef as forwardRef4 } from "@chakra-ui/system";
+var StatLabel = forwardRef4(function StatLabel2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ React.createElement(chakra5.dt, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__label", props.className),
+    __css: styles.label
+  });
+});
+StatLabel.displayName = "StatLabel";
+
+// src/stat-number.tsx
+import { chakra as chakra6, forwardRef as forwardRef5 } from "@chakra-ui/system";
+var StatNumber = forwardRef5(function StatNumber2(props, ref) {
+  const styles = useStatStyles();
+  return /* @__PURE__ */ React.createElement(chakra6.dd, {
+    ref,
+    ...props,
+    className: cx("chakra-stat__number", props.className),
+    __css: {
+      ...styles.number,
+      fontFeatureSettings: "pnum",
+      fontVariantNumeric: "proportional-nums"
+    }
+  });
+});
+StatNumber.displayName = "StatNumber";
 export {
@@ -127,0 +144,0 @@ Stat,

package.json

 {
   "name": "@chakra-ui/stat",
-  "version": "0.0.0-dev-20220820195548",
+  "version": "0.0.0-dev-20220822051456",
   "description": "A React component for displaying statistics",
@@ -36,12 +36,12 @@ "keywords": [
   "dependencies": {
-    "@chakra-ui/icon": "0.0.0-dev-20220820195548",
-    "@chakra-ui/react-context": "0.0.0-dev-20220820195548"
+    "@chakra-ui/icon": "0.0.0-dev-20220822051456",
+    "@chakra-ui/react-context": "0.0.0-dev-20220822051456"
   },
   "devDependencies": {
-    "@chakra-ui/system": "0.0.0-dev-20220820195548",
-    "@chakra-ui/shared-utils": "0.0.0-dev-20220820195548",
+    "@chakra-ui/system": "0.0.0-dev-20220822051456",
+    "@chakra-ui/shared-utils": "0.0.0-dev-20220822051456",
     "react": "^18.0.0"
   },
   "peerDependencies": {
-    "@chakra-ui/system": "0.0.0-dev-20220820195548",
+    "@chakra-ui/system": "0.0.0-dev-20220822051456",
     "react": ">=18"
@@ -48,0 +48,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

16684

increased by6.02%

Lines of code

343

increased by6.85%

Dependency changes

• + Added@chakra-ui/color-mode@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/icon@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/react-context@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/react-use-safe-layout-effect@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/react-utils@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/shared-utils@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/styled-system@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/system@0.0.0-dev-20220822051456(transitive)

• + Added@chakra-ui/utils@0.0.0-dev-20220822051456(transitive)

• - Removed@chakra-ui/color-mode@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/icon@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/react-context@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/react-use-safe-layout-effect@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/react-utils@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/shared-utils@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/styled-system@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/system@0.0.0-dev-20220820195548(transitive)

• - Removed@chakra-ui/utils@0.0.0-dev-20220820195548(transitive)

• Updated@chakra-ui/icon@0.0.0-dev-20220822051456

• Updated@chakra-ui/react-context@0.0.0-dev-20220822051456