@spark-web/badge 1.0.0-rc.2 → 1.0.0-rc.20

package/CHANGELOG.md

@@ -1,5 +1,257 @@
 # @spark-web/badge
 
+## 1.0.0-rc.20
+
+### Minor Changes
+
+- Support for component-level theming; button-level theming
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.20
+  - @spark-web/utils@2.0.0-rc.20
+  - @spark-web/text@2.0.0-rc.20
+  - @spark-web/box@2.0.0-rc.20
+
+## 1.0.0-rc.19
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.19
+  - @spark-web/utils@2.0.0-rc.19
+  - @spark-web/text@2.0.0-rc.19
+  - @spark-web/box@2.0.0-rc.19
+
+## 1.0.0-rc.18
+
+### Major Changes
+
+- tests
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.18
+  - @spark-web/utils@2.0.0-rc.18
+  - @spark-web/text@2.0.0-rc.18
+  - @spark-web/box@2.0.0-rc.18
+
+## 1.0.0-rc.17
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.17
+  - @spark-web/utils@2.0.0-rc.17
+  - @spark-web/text@2.0.0-rc.17
+  - @spark-web/box@2.0.0-rc.17
+
+## 1.0.0-rc.16
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.16
+  - @spark-web/utils@2.0.0-rc.16
+  - @spark-web/text@2.0.0-rc.16
+  - @spark-web/box@2.0.0-rc.16
+
+## 1.0.0-rc.15
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.15
+  - @spark-web/utils@2.0.0-rc.15
+  - @spark-web/text@2.0.0-rc.15
+  - @spark-web/box@2.0.0-rc.15
+
+## 1.0.0-rc.14
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.14
+  - @spark-web/utils@2.0.0-rc.14
+  - @spark-web/text@2.0.0-rc.14
+  - @spark-web/box@2.0.0-rc.14
+
+## 1.0.0-rc.13
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.13
+  - @spark-web/utils@2.0.0-rc.13
+  - @spark-web/text@2.0.0-rc.13
+  - @spark-web/box@2.0.0-rc.13
+
+## 1.0.0-rc.12
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.12
+  - @spark-web/utils@2.0.0-rc.12
+  - @spark-web/text@2.0.0-rc.12
+  - @spark-web/box@2.0.0-rc.12
+
+## 1.0.0-rc.11
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.11
+  - @spark-web/utils@2.0.0-rc.11
+  - @spark-web/text@2.0.0-rc.11
+  - @spark-web/box@2.0.0-rc.11
+
+## 1.0.0-rc.10
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.10
+  - @spark-web/utils@2.0.0-rc.10
+  - @spark-web/text@2.0.0-rc.10
+  - @spark-web/box@2.0.0-rc.10
+
+## 1.0.0-rc.9
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.9
+  - @spark-web/utils@2.0.0-rc.9
+  - @spark-web/text@2.0.0-rc.9
+  - @spark-web/box@2.0.0-rc.9
+
+## 1.0.0-rc.8
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.8
+  - @spark-web/utils@2.0.0-rc.8
+  - @spark-web/text@2.0.0-rc.8
+  - @spark-web/box@2.0.0-rc.8
+
+## 1.0.0-rc.7
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.7
+  - @spark-web/utils@2.0.0-rc.7
+  - @spark-web/text@2.0.0-rc.7
+  - @spark-web/box@2.0.0-rc.7
+
+## 1.0.0-rc.6
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.6
+  - @spark-web/utils@2.0.0-rc.6
+  - @spark-web/text@2.0.0-rc.6
+  - @spark-web/box@2.0.0-rc.6
+
+## 1.0.0-rc.5
+
+### Major Changes
+
+- test
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.5
+  - @spark-web/utils@2.0.0-rc.5
+  - @spark-web/text@2.0.0-rc.5
+  - @spark-web/box@2.0.0-rc.5
+
+## 1.0.0-rc.4
+
+### Major Changes
+
+- bug
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.4
+  - @spark-web/utils@2.0.0-rc.4
+  - @spark-web/text@2.0.0-rc.4
+  - @spark-web/box@2.0.0-rc.4
+
+## 1.0.0-rc.3
+
+### Major Changes
+
+- upgrade package
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.3
+  - @spark-web/utils@2.0.0-rc.3
+  - @spark-web/text@2.0.0-rc.3
+  - @spark-web/box@2.0.0-rc.3
+
 ## 1.0.0-rc.2
 
 ### Major Changes

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

@@ -1,2 +1,2 @@
-export * from "./declarations/src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWJhZGdlLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
+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": "1.0.0-rc.2",
+  "version": "1.0.0-rc.20",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -16,11 +16,11 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.25.0",
-    "@emotion/react": "^11.13.5",
-    "@spark-web/box": "^2.0.0-rc.2",
-    "@spark-web/text": "^2.0.0-rc.2",
-    "@spark-web/theme": "^4.0.0-rc.2",
-    "@spark-web/utils": "^2.0.0-rc.2"
+    "@emotion/react": "^11.14.0",
+    "@spark-web/box": "^2.0.0-rc.20",
+    "@spark-web/text": "^2.0.0-rc.20",
+    "@spark-web/theme": "^4.0.0-rc.20",
+    "@spark-web/utils": "^2.0.0-rc.20"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",

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

@@ -1,36 +0,0 @@
-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): import("@emotion/react/jsx-runtime").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): import("@emotion/react/jsx-runtime").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.js";
-export type { BadgeProps, IndicatorDotProps } from "./badge.js";

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

@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var react = require('@emotion/react');
-var box = require('@spark-web/box');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('@emotion/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 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: [jsxRuntime.jsx(IndicatorContainer, {
-      size: textSize,
-      children: jsxRuntime.jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), 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 jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    css: react.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 jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    css: react.css(responsiveHeight),
-    children: children
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Shared Types
- */
-
-/** The tone of the badge. */
-
-exports.Badge = Badge;
-exports.IndicatorDot = IndicatorDot;

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

@@ -1,121 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
-var react = require('@emotion/react');
-var box = require('@spark-web/box');
-var text = require('@spark-web/text');
-var theme = require('@spark-web/theme');
-var jsxRuntime = require('@emotion/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 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: [jsxRuntime.jsx(IndicatorContainer, {
-      size: textSize,
-      children: jsxRuntime.jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), 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 jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    css: react.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 jsxRuntime.jsx(box.Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    css: react.css(responsiveHeight),
-    children: children
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Shared Types
- */
-
-/** The tone of the badge. */
-
-exports.Badge = Badge;
-exports.IndicatorDot = IndicatorDot;

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

@@ -1,116 +0,0 @@
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
-import { css } from '@emotion/react';
-import { Box } from '@spark-web/box';
-import { Text } from '@spark-web/text';
-import { useTheme } from '@spark-web/theme';
-import { jsxs, jsx } from '@emotion/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 jsxs(Box, {
-    data: data
-    // Styles
-    ,
-    display: "inline-flex",
-    alignItems: "center",
-    background: "surface",
-    border: "standard",
-    borderRadius: "full",
-    gap: "xsmall",
-    height: "xsmall",
-    paddingX: "small",
-    children: [jsx(IndicatorContainer, {
-      size: textSize,
-      children: jsx(IndicatorDot, {
-        tone: tone
-      })
-    }), 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 jsx(Box, _objectSpread(_objectSpread({}, label ? {
-    'aria-label': label
-  } : {
-    'aria-hidden': 'true'
-  }), {}, {
-    data: data,
-    borderRadius: "full",
-    css: 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 jsx(Box, {
-    display: "flex",
-    alignItems: "center",
-    "aria-hidden": "true",
-    cursor: "default",
-    flexShrink: 0,
-    css: css(responsiveHeight),
-    children: children
-  });
-}
-
-////////////////////////////////////////////////////////////////////////////////
-
-/**
- * Shared Types
- */
-
-/** The tone of the badge. */
-
-export { Badge, IndicatorDot };