@spark-web/badge 0.0.4 → 1.0.0-rc.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @spark-web/badge
 
+## 1.0.0-rc.0
+
+### Major Changes
+
+- rc versio
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.0
+  - @spark-web/text@2.0.0-rc.0
+  - @spark-web/box@2.0.0-rc.0
+  - @spark-web/utils@2.0.0-rc.0
+
+## 0.1.0
+
+### Minor Changes
+
+- [#382](https://github.com/brighte-labs/spark-web/pull/382)
+  [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
+  Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
+  version to latest (18.2.0)
+
+### Patch Changes
+
+- Updated dependencies
+  [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
+  - @spark-web/box@1.2.0
+  - @spark-web/text@1.2.0
+  - @spark-web/theme@3.2.0
+  - @spark-web/utils@1.3.0
+
 ## 0.0.4
 
 ### Patch Changes

package/dist/spark-web-badge.cjs.d.ts

@@ -1 +1,2 @@
-export * from "./declarations/src/index";
+export * from "../src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJhZGdlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vc3JjL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=

package/dist/spark-web-badge.cjs.js

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./spark-web-badge.cjs.prod.js");
-} else {
-  module.exports = require("./spark-web-badge.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
+
+// this re-exports the source file
+module.exports = require("../src/index.ts");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/badge",
-  "version": "0.0.4",
+  "version": "1.0.0-rc.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -15,16 +15,16 @@
     "README.md"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.19.0",
-    "@emotion/css": "^11.9.0",
-    "@spark-web/box": "^1.1.0",
-    "@spark-web/text": "^1.1.2",
-    "@spark-web/theme": "^3.1.0",
-    "@spark-web/utils": "^1.2.3"
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.13.5",
+    "@spark-web/box": "^2.0.0-rc.0",
+    "@spark-web/text": "^2.0.0-rc.0",
+    "@spark-web/theme": "^4.0.0-rc.0",
+    "@spark-web/utils": "^2.0.0-rc.0"
   },
   "devDependencies": {
-    "@types/react": "^17.0.12",
-    "react": "^17.0.2"
+    "@types/react": "^18.2.0",
+    "react": "^18.2.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2"

package/dist/declarations/src/badge.d.ts

@@ -1,37 +0,0 @@
-/// <reference types="react" />
-import type { DataAttributeMap } from '@spark-web/utils/internal';
-/**
- * Badge
- *
- * A decorative indicator used to either call attention to an item or for
- * communicating non-actionable, supplemental information.
- */
-export declare function Badge({ children, data, tone }: BadgeProps): JSX.Element;
-export declare type BadgeProps = {
-    /** The label of the badge. */
-    children: string | number;
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** The tone of the badge. */
-    tone?: BadgeTones;
-};
-/**
- * IndicatorDot
- *
- * A small decorative indicator used to call attention to an item.
- */
-export declare function IndicatorDot({ data, label, tone }: IndicatorDotProps): JSX.Element;
-export declare type IndicatorDotProps = {
-    /** Sets data attributes on the component. */
-    data?: DataAttributeMap;
-    /** When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users. */
-    label?: string;
-    /** The tone of the indicator dot. */
-    tone: BadgeTones;
-};
-/**
- * Shared Types
- */
-/** The tone of the badge. */
-declare type BadgeTones = 'accent' | 'caution' | 'critical' | 'info' | 'neutral' | 'positive';
-export {};

package/dist/declarations/src/index.d.ts

@@ -1,2 +0,0 @@
-export { Badge, IndicatorDot } from './badge';
-export type { BadgeProps, IndicatorDotProps } from './badge';

package/dist/spark-web-badge.cjs.dev.js

@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var css = require('@emotion/css');
-var box = require('@spark-web/box');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('react/jsx-runtime');
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Badge
- *
- * A decorative indicator used to either call attention to an item or for
- * communicating non-actionable, supplemental information.
- */
-function Badge(_ref) {
-  var children = _ref.children,
-      data = _ref.data,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var textSize = 'xsmall';
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    data: data // Styles
-    ,
-    display: "inline-flex",
-    alignItems: "center",
-    background: "surface",
-    border: "standard",
-    borderRadius: "full",
-    gap: "xsmall",
-    height: "xsmall",
-    paddingX: "small",
-    children: [/*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
-      size: textSize,
-      children: /*#__PURE__*/jsxRuntime.jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(text.Text, {
-      overflowStrategy: "nowrap",
-      size: textSize,
-      children: children
-    })]
-  });
-}
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorDot
- *
- * A small decorative indicator used to call attention to an item.
- */
-function IndicatorDot(_ref2) {
-  var data = _ref2.data,
-      label = _ref2.label,
-      tone = _ref2.tone;
-  var theme$1 = theme.useTheme();
-  var dotSize = 8;
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    className: css.css({
-      height: dotSize,
-      width: dotSize,
-      background: theme$1.color.status[tone]
-    })
-  }));
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorContainer
- *
- * Component that renders a div the same height as our text so that we can
- * perfectly align the content side-by-side.
- */
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'standard' : _ref3$size;
-  var theme$1 = theme.useTheme();
-  var _theme$typography$tex = theme$1.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveHeight = theme$1.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    className: css.css(responsiveHeight),
-    children: children
-  });
-}
-
-exports.Badge = Badge;
-exports.IndicatorDot = IndicatorDot;

package/dist/spark-web-badge.cjs.prod.js

@@ -1,113 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var css = require('@emotion/css');
-var box = require('@spark-web/box');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('react/jsx-runtime');
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Badge
- *
- * A decorative indicator used to either call attention to an item or for
- * communicating non-actionable, supplemental information.
- */
-function Badge(_ref) {
-  var children = _ref.children,
-      data = _ref.data,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var textSize = 'xsmall';
-  return /*#__PURE__*/jsxRuntime.jsxs(box.Box, {
-    data: data // Styles
-    ,
-    display: "inline-flex",
-    alignItems: "center",
-    background: "surface",
-    border: "standard",
-    borderRadius: "full",
-    gap: "xsmall",
-    height: "xsmall",
-    paddingX: "small",
-    children: [/*#__PURE__*/jsxRuntime.jsx(IndicatorContainer, {
-      size: textSize,
-      children: /*#__PURE__*/jsxRuntime.jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), /*#__PURE__*/jsxRuntime.jsx(text.Text, {
-      overflowStrategy: "nowrap",
-      size: textSize,
-      children: children
-    })]
-  });
-}
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorDot
- *
- * A small decorative indicator used to call attention to an item.
- */
-function IndicatorDot(_ref2) {
-  var data = _ref2.data,
-      label = _ref2.label,
-      tone = _ref2.tone;
-  var theme$1 = theme.useTheme();
-  var dotSize = 8;
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    className: css.css({
-      height: dotSize,
-      width: dotSize,
-      background: theme$1.color.status[tone]
-    })
-  }));
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorContainer
- *
- * Component that renders a div the same height as our text so that we can
- * perfectly align the content side-by-side.
- */
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'standard' : _ref3$size;
-  var theme$1 = theme.useTheme();
-  var _theme$typography$tex = theme$1.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveHeight = theme$1.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    className: css.css(responsiveHeight),
-    children: children
-  });
-}
-
-exports.Badge = Badge;
-exports.IndicatorDot = IndicatorDot;

package/dist/spark-web-badge.esm.js

@@ -1,108 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import { css } from '@emotion/css';
-import { Box } from '@spark-web/box';
-import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
-import { jsxs, jsx } from 'react/jsx-runtime';
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Badge
- *
- * A decorative indicator used to either call attention to an item or for
- * communicating non-actionable, supplemental information.
- */
-function Badge(_ref) {
-  var children = _ref.children,
-      data = _ref.data,
-      _ref$tone = _ref.tone,
-      tone = _ref$tone === void 0 ? 'neutral' : _ref$tone;
-  var textSize = 'xsmall';
-  return /*#__PURE__*/jsxs(Box, {
-    data: data // Styles
-    ,
-    display: "inline-flex",
-    alignItems: "center",
-    background: "surface",
-    border: "standard",
-    borderRadius: "full",
-    gap: "xsmall",
-    height: "xsmall",
-    paddingX: "small",
-    children: [/*#__PURE__*/jsx(IndicatorContainer, {
-      size: textSize,
-      children: /*#__PURE__*/jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), /*#__PURE__*/jsx(Text, {
-      overflowStrategy: "nowrap",
-      size: textSize,
-      children: children
-    })]
-  });
-}
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorDot
- *
- * A small decorative indicator used to call attention to an item.
- */
-function IndicatorDot(_ref2) {
-  var data = _ref2.data,
-      label = _ref2.label,
-      tone = _ref2.tone;
-  var theme = useTheme();
-  var dotSize = 8;
-  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    className: css({
-      height: dotSize,
-      width: dotSize,
-      background: theme.color.status[tone]
-    })
-  }));
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * IndicatorContainer
- *
- * Component that renders a div the same height as our text so that we can
- * perfectly align the content side-by-side.
- */
-function IndicatorContainer(_ref3) {
-  var children = _ref3.children,
-      _ref3$size = _ref3.size,
-      size = _ref3$size === void 0 ? 'standard' : _ref3$size;
-  var theme = useTheme();
-  var _theme$typography$tex = theme.typography.text[size],
-      mobile = _theme$typography$tex.mobile,
-      tablet = _theme$typography$tex.tablet;
-  var responsiveHeight = theme.utils.responsiveStyles({
-    mobile: {
-      height: mobile.capHeight
-    },
-    tablet: {
-      height: tablet.capHeight
-    }
-  });
-  return /*#__PURE__*/jsx(Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    className: css(responsiveHeight),
-    children: children
-  });
-}
-
-export { Badge, IndicatorDot };