@spark-web/highlight-card 0.0.0-snapshot-release-20260401034720

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @spark-web/highlight-card
+
+## 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,34 @@
+# @spark-web/highlight-card
+
+A card with a solid primary-color border and a gradient inner background
+(surface → primaryLow), used to draw attention to important content like results
+or recommendations.
+
+## Usage
+
+```tsx
+import { HighlightCard } from '@spark-web/highlight-card';
+
+<HighlightCard title="Your result">
+  <Text>Content here</Text>
+</HighlightCard>;
+```
+
+## Key props
+
+| Prop             | Type                                                   | Default       | Notes                                                     |
+| ---------------- | ------------------------------------------------------ | ------------- | --------------------------------------------------------- |
+| `children`       | `ReactNode`                                            | required      | String children are auto-wrapped in `<Text size="small">` |
+| `title`          | `string`                                               | —             | Displayed above children; omit to suppress                |
+| `titleTone`      | `ForegroundTone`                                       | `'primary'`   |                                                           |
+| `titleSize`      | `keyof SparkTheme['typography']['text']`               | `'xsmall'`    |                                                           |
+| `titleTransform` | `'uppercase' \| 'lowercase' \| 'capitalize' \| 'none'` | `'uppercase'` |                                                           |
+| `contentPadding` | `BoxProps['padding']`                                  | `'large'`     | Inner padding                                             |
+| `data`           | `DataAttributeMap`                                     | —             | Test/analytics attributes                                 |
+
+## Constraints
+
+- Border and inner radius are derived from `theme.border.radius.large` and
+  `theme.border.width.standard` — do not override with raw pixel values
+- Inner background uses `theme.color.background.surface` →
+  `theme.color.background.primaryLow` gradient

package/README.md

@@ -0,0 +1,14 @@
+# @spark-web/highlight-card
+
+A card with a gradient primary-color border, used to draw attention to important
+content like results or recommendations.
+
+## Usage
+
+```tsx
+import { HighlightCard } from '@spark-web/highlight-card';
+
+<HighlightCard title="Results">
+  The application has been reviewed and meets all requirements.
+</HighlightCard>;
+```

package/dist/declarations/src/highlight-card.d.ts

@@ -0,0 +1,34 @@
+import type { BoxProps } from '@spark-web/box';
+import type { ForegroundTone } from '@spark-web/text';
+import type { SparkTheme } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactNode } from 'react';
+type TextSize = keyof SparkTheme['typography']['text'];
+type SpacingScale = NonNullable<BoxProps['padding']>;
+type TitleTransform = 'uppercase' | 'lowercase' | 'capitalize' | 'none';
+/**
+ * HighlightCard
+ *
+ * A card with a gradient primary-color border, used to draw attention
+ * to important content like results or recommendations.
+ *
+ * @see https://spark.brighte.com.au/package/highlight-card
+ */
+export declare function HighlightCard({ children, contentPadding, data, title, titleTone, titleSize, titleTransform, }: HighlightCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type HighlightCardProps = {
+    /** The content to display inside the card. */
+    children: ReactNode;
+    /** Padding around the inner content area. Defaults to 'large'. */
+    contentPadding?: SpacingScale;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An optional title displayed above the content. */
+    title?: string;
+    /** The tone of the title text. Defaults to 'primary'. */
+    titleTone?: ForegroundTone;
+    /** The size of the title text. Defaults to 'xsmall'. */
+    titleSize?: TextSize;
+    /** The CSS text-transform applied to the title. Defaults to 'uppercase'. */
+    titleTransform?: TitleTransform;
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { HighlightCard } from "./highlight-card.js";
+export type { HighlightCardProps } from "./highlight-card.js";

package/dist/spark-web-highlight-card.cjs.d.ts

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

package/dist/spark-web-highlight-card.cjs.dev.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var box = require('@spark-web/box');
+var stack = require('@spark-web/stack');
+var text = require('@spark-web/text');
+var theme = require('@spark-web/theme');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+/**
+ * HighlightCard
+ *
+ * A card with a gradient primary-color border, used to draw attention
+ * to important content like results or recommendations.
+ *
+ * @see https://spark.brighte.com.au/package/highlight-card
+ */
+function HighlightCard(_ref) {
+  var children = _ref.children,
+    _ref$contentPadding = _ref.contentPadding,
+    contentPadding = _ref$contentPadding === void 0 ? 'large' : _ref$contentPadding,
+    data = _ref.data,
+    title = _ref.title,
+    _ref$titleTone = _ref.titleTone,
+    titleTone = _ref$titleTone === void 0 ? 'primary' : _ref$titleTone,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? 'xsmall' : _ref$titleSize,
+    _ref$titleTransform = _ref.titleTransform,
+    titleTransform = _ref$titleTransform === void 0 ? 'uppercase' : _ref$titleTransform;
+  var theme$1 = theme.useTheme();
+  var primaryColor = theme$1.color.foreground.primary;
+  var surfaceColor = theme$1.color.background.surface;
+  var primaryLowColor = theme$1.color.background.primaryLow;
+  var outerRadius = theme$1.border.radius.large;
+  var borderWidth = theme$1.border.width.standard;
+  var outerStyles = react.css({
+    background: primaryColor,
+    borderRadius: outerRadius,
+    padding: borderWidth
+  });
+  var innerStyles = react.css({
+    background: "linear-gradient(to bottom right, ".concat(surfaceColor, ", ").concat(primaryLowColor, ")"),
+    borderRadius: outerRadius - borderWidth
+  });
+  return jsxRuntime.jsx(box.Box, {
+    data: data,
+    css: outerStyles,
+    children: jsxRuntime.jsx(box.Box, {
+      css: innerStyles,
+      padding: contentPadding,
+      children: jsxRuntime.jsxs(stack.Stack, {
+        gap: "large",
+        children: [title && jsxRuntime.jsx(text.Text, {
+          size: titleSize,
+          weight: "semibold",
+          transform: titleTransform,
+          tone: titleTone,
+          children: title
+        }), typeof children === 'string' ? jsxRuntime.jsx(text.Text, {
+          size: "small",
+          children: children
+        }) : children]
+      })
+    })
+  });
+}
+
+exports.HighlightCard = HighlightCard;

package/dist/spark-web-highlight-card.cjs.js

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

package/dist/spark-web-highlight-card.cjs.prod.js

@@ -0,0 +1,70 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('@emotion/react');
+var box = require('@spark-web/box');
+var stack = require('@spark-web/stack');
+var text = require('@spark-web/text');
+var theme = require('@spark-web/theme');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+/**
+ * HighlightCard
+ *
+ * A card with a gradient primary-color border, used to draw attention
+ * to important content like results or recommendations.
+ *
+ * @see https://spark.brighte.com.au/package/highlight-card
+ */
+function HighlightCard(_ref) {
+  var children = _ref.children,
+    _ref$contentPadding = _ref.contentPadding,
+    contentPadding = _ref$contentPadding === void 0 ? 'large' : _ref$contentPadding,
+    data = _ref.data,
+    title = _ref.title,
+    _ref$titleTone = _ref.titleTone,
+    titleTone = _ref$titleTone === void 0 ? 'primary' : _ref$titleTone,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? 'xsmall' : _ref$titleSize,
+    _ref$titleTransform = _ref.titleTransform,
+    titleTransform = _ref$titleTransform === void 0 ? 'uppercase' : _ref$titleTransform;
+  var theme$1 = theme.useTheme();
+  var primaryColor = theme$1.color.foreground.primary;
+  var surfaceColor = theme$1.color.background.surface;
+  var primaryLowColor = theme$1.color.background.primaryLow;
+  var outerRadius = theme$1.border.radius.large;
+  var borderWidth = theme$1.border.width.standard;
+  var outerStyles = react.css({
+    background: primaryColor,
+    borderRadius: outerRadius,
+    padding: borderWidth
+  });
+  var innerStyles = react.css({
+    background: "linear-gradient(to bottom right, ".concat(surfaceColor, ", ").concat(primaryLowColor, ")"),
+    borderRadius: outerRadius - borderWidth
+  });
+  return jsxRuntime.jsx(box.Box, {
+    data: data,
+    css: outerStyles,
+    children: jsxRuntime.jsx(box.Box, {
+      css: innerStyles,
+      padding: contentPadding,
+      children: jsxRuntime.jsxs(stack.Stack, {
+        gap: "large",
+        children: [title && jsxRuntime.jsx(text.Text, {
+          size: titleSize,
+          weight: "semibold",
+          transform: titleTransform,
+          tone: titleTone,
+          children: title
+        }), typeof children === 'string' ? jsxRuntime.jsx(text.Text, {
+          size: "small",
+          children: children
+        }) : children]
+      })
+    })
+  });
+}
+
+exports.HighlightCard = HighlightCard;

package/dist/spark-web-highlight-card.esm.js

@@ -0,0 +1,66 @@
+import { css } from '@emotion/react';
+import { Box } from '@spark-web/box';
+import { Stack } from '@spark-web/stack';
+import { Text } from '@spark-web/text';
+import { useTheme } from '@spark-web/theme';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+/**
+ * HighlightCard
+ *
+ * A card with a gradient primary-color border, used to draw attention
+ * to important content like results or recommendations.
+ *
+ * @see https://spark.brighte.com.au/package/highlight-card
+ */
+function HighlightCard(_ref) {
+  var children = _ref.children,
+    _ref$contentPadding = _ref.contentPadding,
+    contentPadding = _ref$contentPadding === void 0 ? 'large' : _ref$contentPadding,
+    data = _ref.data,
+    title = _ref.title,
+    _ref$titleTone = _ref.titleTone,
+    titleTone = _ref$titleTone === void 0 ? 'primary' : _ref$titleTone,
+    _ref$titleSize = _ref.titleSize,
+    titleSize = _ref$titleSize === void 0 ? 'xsmall' : _ref$titleSize,
+    _ref$titleTransform = _ref.titleTransform,
+    titleTransform = _ref$titleTransform === void 0 ? 'uppercase' : _ref$titleTransform;
+  var theme = useTheme();
+  var primaryColor = theme.color.foreground.primary;
+  var surfaceColor = theme.color.background.surface;
+  var primaryLowColor = theme.color.background.primaryLow;
+  var outerRadius = theme.border.radius.large;
+  var borderWidth = theme.border.width.standard;
+  var outerStyles = css({
+    background: primaryColor,
+    borderRadius: outerRadius,
+    padding: borderWidth
+  });
+  var innerStyles = css({
+    background: "linear-gradient(to bottom right, ".concat(surfaceColor, ", ").concat(primaryLowColor, ")"),
+    borderRadius: outerRadius - borderWidth
+  });
+  return jsx(Box, {
+    data: data,
+    css: outerStyles,
+    children: jsx(Box, {
+      css: innerStyles,
+      padding: contentPadding,
+      children: jsxs(Stack, {
+        gap: "large",
+        children: [title && jsx(Text, {
+          size: titleSize,
+          weight: "semibold",
+          transform: titleTransform,
+          tone: titleTone,
+          children: title
+        }), typeof children === 'string' ? jsx(Text, {
+          size: "small",
+          children: children
+        }) : children]
+      })
+    })
+  });
+}
+
+export { HighlightCard };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@spark-web/highlight-card",
+  "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/highlight-card"
+  },
+  "main": "dist/spark-web-highlight-card.cjs.js",
+  "module": "dist/spark-web-highlight-card.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/stack": "^5.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"
+  }
+}