@spark-web/tag 0.0.0-snapshot-release-20260401034720

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @spark-web/tag
+
+## 0.0.0-snapshot-release-20260401034720
+
+### Minor Changes
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`b2d2761`](https://github.com/brighte-labs/spark-web/commit/b2d276158c169b9d6913707f231851b0ee16f3e3)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! - **tag,
+  overflow-menu, highlight-card, description-list, section-header,
+  section-card:** add new accreditation component packages

package/CLAUDE.md

@@ -0,0 +1,35 @@
+# @spark-web/tag
+
+A label pill component used to categorize or organize items. Unlike `Badge`
+(which shows status with an indicator dot), `Tag` is a standalone label with an
+optional icon.
+
+## Usage
+
+```tsx
+import { Tag } from '@spark-web/tag';
+
+<Tag tone="positive">Verified</Tag>
+<Tag tone="caution" icon={<WarningIcon />}>Pending</Tag>
+```
+
+## Key props
+
+| Prop       | Type                                                                       | Default    | Notes                                |
+| ---------- | -------------------------------------------------------------------------- | ---------- | ------------------------------------ |
+| `tone`     | `'accent' \| 'caution' \| 'critical' \| 'info' \| 'neutral' \| 'positive'` | `'accent'` | Controls background and icon color   |
+| `icon`     | `ReactElement`                                                             | —          | Rendered at 12×12px before the label |
+| `children` | `string \| ReactElement`                                                   | required   | The label text                       |
+| `data`     | `DataAttributeMap`                                                         | —          | Test/analytics attributes            |
+
+## Constraints
+
+- Renders `display: inline-flex` — does not stretch to fill a container
+- Icon color is derived from `theme.color.status[tone]` — always use theme
+  tones, never raw colors
+- Text is always `nowrap` — avoid long labels
+
+## Used by
+
+- `SectionHeader` renders a `Tag` via its `tag` prop (pass
+  `Omit<TagProps, 'data'>`)

package/README.md

@@ -0,0 +1,15 @@
+# @spark-web/tag
+
+A label component used to categorize or organize items.
+
+Unlike Badge which shows status with an indicator dot, Tag displays a simple
+label pill with an optional icon.
+
+## Usage
+
+```tsx
+import { Tag } from '@spark-web/tag';
+
+<Tag tone="accent">Active</Tag>
+<Tag tone="positive" icon={<CheckCircleIcon size="xxsmall" />}>Verified</Tag>
+```

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

@@ -0,0 +1,2 @@
+export { Tag } from "./tag.js";
+export type { TagProps, TagTone } from "./tag.js";

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

@@ -0,0 +1,24 @@
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactElement } from 'react';
+/**
+ * Tag
+ *
+ * A label component used to categorize or organize items. Unlike Badge which
+ * shows status with an indicator dot, Tag displays a simple label pill with
+ * an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/tag
+ */
+export declare function Tag({ children, data, icon, tone }: TagProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type TagProps = {
+    /** The content of the tag — a string or a single React element (e.g. styled text). */
+    children: string | ReactElement;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An optional icon element to display before the label. */
+    icon?: ReactElement;
+    /** The tone of the tag. */
+    tone?: TagTone;
+};
+/** The available tone options for the Tag component. */
+export type TagTone = 'accent' | 'caution' | 'critical' | 'info' | 'neutral' | 'positive';

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

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

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+////////////////////////////////////////////////////////////////////////////////
+
+var toneToBackground = {
+  accent: 'accentMuted',
+  caution: 'cautionMuted',
+  critical: 'criticalMuted',
+  info: 'infoMuted',
+  neutral: 'neutralLow',
+  positive: 'positiveMuted'
+};
+
+/**
+ * Tag
+ *
+ * A label component used to categorize or organize items. Unlike Badge which
+ * shows status with an indicator dot, Tag displays a simple label pill with
+ * an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/tag
+ */
+function Tag(_ref) {
+  var children = _ref.children,
+    data = _ref.data,
+    icon = _ref.icon,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'accent' : _ref$tone;
+  var theme$1 = theme.useTheme();
+  var iconColor = theme$1.color.status[tone];
+  return jsxRuntime.jsxs(box.Box, {
+    data: data,
+    display: "inline-flex",
+    alignItems: "center",
+    background: toneToBackground[tone],
+    borderRadius: "full",
+    gap: "xxsmall",
+    paddingY: "xsmall",
+    paddingX: "medium",
+    children: [icon && jsxRuntime.jsx(box.Box, {
+      display: "flex",
+      alignItems: "center",
+      "aria-hidden": "true",
+      flexShrink: 0,
+      css: react.css({
+        color: iconColor,
+        '& svg': {
+          height: 12,
+          width: 12
+        }
+      }),
+      children: icon
+    }), jsxRuntime.jsx(text.Text, {
+      overflowStrategy: "nowrap",
+      size: "xsmall",
+      children: children
+    })]
+  });
+}
+
+/** The available tone options for the Tag component. */
+
+exports.Tag = Tag;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-tag.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-tag.cjs.dev.js");
+}

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

@@ -0,0 +1,71 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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');
+
+////////////////////////////////////////////////////////////////////////////////
+
+var toneToBackground = {
+  accent: 'accentMuted',
+  caution: 'cautionMuted',
+  critical: 'criticalMuted',
+  info: 'infoMuted',
+  neutral: 'neutralLow',
+  positive: 'positiveMuted'
+};
+
+/**
+ * Tag
+ *
+ * A label component used to categorize or organize items. Unlike Badge which
+ * shows status with an indicator dot, Tag displays a simple label pill with
+ * an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/tag
+ */
+function Tag(_ref) {
+  var children = _ref.children,
+    data = _ref.data,
+    icon = _ref.icon,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'accent' : _ref$tone;
+  var theme$1 = theme.useTheme();
+  var iconColor = theme$1.color.status[tone];
+  return jsxRuntime.jsxs(box.Box, {
+    data: data,
+    display: "inline-flex",
+    alignItems: "center",
+    background: toneToBackground[tone],
+    borderRadius: "full",
+    gap: "xxsmall",
+    paddingY: "xsmall",
+    paddingX: "medium",
+    children: [icon && jsxRuntime.jsx(box.Box, {
+      display: "flex",
+      alignItems: "center",
+      "aria-hidden": "true",
+      flexShrink: 0,
+      css: react.css({
+        color: iconColor,
+        '& svg': {
+          height: 12,
+          width: 12
+        }
+      }),
+      children: icon
+    }), jsxRuntime.jsx(text.Text, {
+      overflowStrategy: "nowrap",
+      size: "xsmall",
+      children: children
+    })]
+  });
+}
+
+/** The available tone options for the Tag component. */
+
+exports.Tag = Tag;

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

@@ -0,0 +1,67 @@
+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';
+
+////////////////////////////////////////////////////////////////////////////////
+
+var toneToBackground = {
+  accent: 'accentMuted',
+  caution: 'cautionMuted',
+  critical: 'criticalMuted',
+  info: 'infoMuted',
+  neutral: 'neutralLow',
+  positive: 'positiveMuted'
+};
+
+/**
+ * Tag
+ *
+ * A label component used to categorize or organize items. Unlike Badge which
+ * shows status with an indicator dot, Tag displays a simple label pill with
+ * an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/tag
+ */
+function Tag(_ref) {
+  var children = _ref.children,
+    data = _ref.data,
+    icon = _ref.icon,
+    _ref$tone = _ref.tone,
+    tone = _ref$tone === void 0 ? 'accent' : _ref$tone;
+  var theme = useTheme();
+  var iconColor = theme.color.status[tone];
+  return jsxs(Box, {
+    data: data,
+    display: "inline-flex",
+    alignItems: "center",
+    background: toneToBackground[tone],
+    borderRadius: "full",
+    gap: "xxsmall",
+    paddingY: "xsmall",
+    paddingX: "medium",
+    children: [icon && jsx(Box, {
+      display: "flex",
+      alignItems: "center",
+      "aria-hidden": "true",
+      flexShrink: 0,
+      css: css({
+        color: iconColor,
+        '& svg': {
+          height: 12,
+          width: 12
+        }
+      }),
+      children: icon
+    }), jsx(Text, {
+      overflowStrategy: "nowrap",
+      size: "xsmall",
+      children: children
+    })]
+  });
+}
+
+/** The available tone options for the Tag component. */
+
+export { Tag };

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@spark-web/tag",
+  "version": "0.0.0-snapshot-release-20260401034720",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/tag"
+  },
+  "main": "dist/spark-web-tag.cjs.js",
+  "module": "dist/spark-web-tag.esm.js",
+  "files": [
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.14.0",
+    "@spark-web/box": "^6.0.0",
+    "@spark-web/text": "^5.3.0",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}