@spark-web/section-header 0.0.0-snapshot-release-20260401034720

package/CHANGELOG.md

@@ -0,0 +1,18 @@
+# @spark-web/section-header
+
+## 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
+
+### Patch Changes
+
+- Updated dependencies
+  [[`b2d2761`](https://github.com/brighte-labs/spark-web/commit/b2d276158c169b9d6913707f231851b0ee16f3e3)]:
+  - @spark-web/tag@0.0.0-snapshot-release-20260401034720
+  - @spark-web/overflow-menu@0.0.0-snapshot-release-20260401034720

package/CLAUDE.md

@@ -0,0 +1,52 @@
+# @spark-web/section-header
+
+A header bar for content sections. Supports a heading label, an optional `Tag`
+badge, and an action slot (button, text link, or overflow menu). Returns `null`
+when `label` is omitted.
+
+## Usage
+
+```tsx
+import { SectionHeader } from '@spark-web/section-header';
+
+// With a button action
+<SectionHeader
+  label="Documents"
+  action={{ type: 'button', label: 'Add', onClick: handleAdd }}
+/>
+
+// With a tag and overflow menu
+<SectionHeader
+  label="Members"
+  tag={{ tone: 'positive', children: '3 active' }}
+  action={{ type: 'menu', items: menuItems }}
+/>
+
+// With custom controls
+<SectionHeader label="Settings" controls={<Switch />} />
+```
+
+## Key props
+
+| Prop           | Type                       | Default | Notes                                                      |
+| -------------- | -------------------------- | ------- | ---------------------------------------------------------- |
+| `label`        | `string`                   | —       | Required to render; component returns null without it      |
+| `headingLevel` | `'1' \| '2' \| '3' \| '4'` | `'4'`   | Maps to `@spark-web/heading` — level 5+ is not supported   |
+| `tag`          | `Omit<TagProps, 'data'>`   | —       | Rendered after the heading                                 |
+| `action`       | `SectionHeaderAction`      | —       | One of: button, link, or menu                              |
+| `controls`     | `ReactNode`                | —       | Custom content rendered in the action area before `action` |
+| `data`         | `DataAttributeMap`         | —       | Test/analytics attributes                                  |
+
+## SectionHeaderAction discriminated union
+
+```ts
+| { type: 'button'; label: string; onClick: () => void; tone?: ButtonProps['tone']; prominence?: ButtonProps['prominence']; disabled?: boolean; icon?: ReactElement<IconProps> }
+| { type: 'link';   label: string; onClick: () => void }
+| { type: 'menu';   items: OverflowMenuItem[] }
+```
+
+## Constraints
+
+- `headingLevel` only supports `'1'`–`'4'` — `@spark-web/heading` does not
+  render level 5+
+- Compose with `SectionCard` to build a full section layout

package/README.md

@@ -0,0 +1,16 @@
+# @spark-web/section-header
+
+A header component for content sections that supports a label, optional tag
+badge, action buttons/menus, and custom controls.
+
+## Usage
+
+```tsx
+import { SectionHeader } from '@spark-web/section-header';
+
+<SectionHeader
+  label="Business Details"
+  tag={{ children: 'Active', tone: 'positive' }}
+  action={{ type: 'button', label: 'Edit', onClick: () => {} }}
+/>;
+```

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

@@ -0,0 +1,2 @@
+export { SectionHeader } from "./section-header.js";
+export type { SectionHeaderAction, SectionHeaderProps } from "./section-header.js";

package/dist/declarations/src/section-header.d.ts

@@ -0,0 +1,45 @@
+import type { ButtonProps } from '@spark-web/button';
+import type { IconProps } from '@spark-web/icon';
+import type { OverflowMenuItem } from '@spark-web/overflow-menu';
+import type { TagProps } from '@spark-web/tag';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactElement, ReactNode } from 'react';
+/**
+ * SectionHeader
+ *
+ * A header component for content sections that supports a label,
+ * optional tag badge, action buttons/menus, and custom controls.
+ *
+ * @see https://spark.brighte.com.au/package/section-header
+ */
+export declare function SectionHeader({ label, headingLevel, tag, action, controls, data, }: SectionHeaderProps): import("@emotion/react/jsx-runtime").JSX.Element | null;
+export type SectionHeaderProps = {
+    /** The heading label for the section. */
+    label?: string;
+    /** The heading level. */
+    headingLevel?: '1' | '2' | '3' | '4';
+    /** An optional tag to display next to the heading. */
+    tag?: Omit<TagProps, 'data'>;
+    /** An optional action element (button, link, or overflow menu). */
+    action?: SectionHeaderAction;
+    /** Custom controls to render in the header's action area. */
+    controls?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+};
+export type SectionHeaderAction = {
+    type: 'button';
+    label: string;
+    onClick: () => void;
+    disabled?: boolean;
+    prominence?: ButtonProps['prominence'];
+    icon?: ReactElement<IconProps>;
+    tone?: ButtonProps['tone'];
+} | {
+    type: 'link';
+    label: string;
+    onClick: () => void;
+} | {
+    type: 'menu';
+    items: OverflowMenuItem[];
+};

package/dist/spark-web-section-header.cjs.d.ts

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

package/dist/spark-web-section-header.cjs.dev.js

@@ -0,0 +1,84 @@
+'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 button = require('@spark-web/button');
+var heading = require('@spark-web/heading');
+var overflowMenu = require('@spark-web/overflow-menu');
+var row = require('@spark-web/row');
+var tag = require('@spark-web/tag');
+var text = require('@spark-web/text');
+var textLink = require('@spark-web/text-link');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionHeader
+ *
+ * A header component for content sections that supports a label,
+ * optional tag badge, action buttons/menus, and custom controls.
+ *
+ * @see https://spark.brighte.com.au/package/section-header
+ */
+function SectionHeader(_ref) {
+  var _action$tone;
+  var label = _ref.label,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? '4' : _ref$headingLevel,
+    tag$1 = _ref.tag,
+    action = _ref.action,
+    controls = _ref.controls,
+    data = _ref.data;
+  if (!label) return null;
+  return jsxRuntime.jsx(box.Box, {
+    data: data,
+    background: "neutral",
+    borderBottom: "neutral",
+    children: label && jsxRuntime.jsxs(box.Box, {
+      display: "flex",
+      justifyContent: "spaceBetween",
+      alignItems: "center",
+      marginX: "xlarge",
+      marginY: "large",
+      height: "small",
+      children: [jsxRuntime.jsxs(row.Row, {
+        alignY: "center",
+        gap: "medium",
+        children: [jsxRuntime.jsx(heading.Heading, {
+          level: headingLevel,
+          children: label
+        }), tag$1 && jsxRuntime.jsx(tag.Tag, _objectSpread({}, tag$1))]
+      }), (action || controls) && jsxRuntime.jsxs(row.Row, {
+        gap: "large",
+        alignY: "center",
+        css: react.css({
+          marginLeft: 'auto'
+        }),
+        children: [controls, action && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [action.type === 'button' && jsxRuntime.jsx(button.Button, {
+            onClick: action.onClick,
+            tone: (_action$tone = action.tone) !== null && _action$tone !== void 0 ? _action$tone : 'primary',
+            prominence: action.prominence,
+            disabled: action.disabled,
+            children: action.icon ? [action.icon, action.label] : action.label
+          }), action.type === 'link' && jsxRuntime.jsx(text.Text, {
+            size: "small",
+            children: jsxRuntime.jsx(textLink.TextLinkButton, {
+              weight: "regular",
+              onClick: action.onClick,
+              children: action.label
+            })
+          }), action.type === 'menu' && jsxRuntime.jsx(overflowMenu.OverflowMenu, {
+            items: action.items
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+exports.SectionHeader = SectionHeader;

package/dist/spark-web-section-header.cjs.js

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

package/dist/spark-web-section-header.cjs.prod.js

@@ -0,0 +1,84 @@
+'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 button = require('@spark-web/button');
+var heading = require('@spark-web/heading');
+var overflowMenu = require('@spark-web/overflow-menu');
+var row = require('@spark-web/row');
+var tag = require('@spark-web/tag');
+var text = require('@spark-web/text');
+var textLink = require('@spark-web/text-link');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionHeader
+ *
+ * A header component for content sections that supports a label,
+ * optional tag badge, action buttons/menus, and custom controls.
+ *
+ * @see https://spark.brighte.com.au/package/section-header
+ */
+function SectionHeader(_ref) {
+  var _action$tone;
+  var label = _ref.label,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? '4' : _ref$headingLevel,
+    tag$1 = _ref.tag,
+    action = _ref.action,
+    controls = _ref.controls,
+    data = _ref.data;
+  if (!label) return null;
+  return jsxRuntime.jsx(box.Box, {
+    data: data,
+    background: "neutral",
+    borderBottom: "neutral",
+    children: label && jsxRuntime.jsxs(box.Box, {
+      display: "flex",
+      justifyContent: "spaceBetween",
+      alignItems: "center",
+      marginX: "xlarge",
+      marginY: "large",
+      height: "small",
+      children: [jsxRuntime.jsxs(row.Row, {
+        alignY: "center",
+        gap: "medium",
+        children: [jsxRuntime.jsx(heading.Heading, {
+          level: headingLevel,
+          children: label
+        }), tag$1 && jsxRuntime.jsx(tag.Tag, _objectSpread({}, tag$1))]
+      }), (action || controls) && jsxRuntime.jsxs(row.Row, {
+        gap: "large",
+        alignY: "center",
+        css: react.css({
+          marginLeft: 'auto'
+        }),
+        children: [controls, action && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+          children: [action.type === 'button' && jsxRuntime.jsx(button.Button, {
+            onClick: action.onClick,
+            tone: (_action$tone = action.tone) !== null && _action$tone !== void 0 ? _action$tone : 'primary',
+            prominence: action.prominence,
+            disabled: action.disabled,
+            children: action.icon ? [action.icon, action.label] : action.label
+          }), action.type === 'link' && jsxRuntime.jsx(text.Text, {
+            size: "small",
+            children: jsxRuntime.jsx(textLink.TextLinkButton, {
+              weight: "regular",
+              onClick: action.onClick,
+              children: action.label
+            })
+          }), action.type === 'menu' && jsxRuntime.jsx(overflowMenu.OverflowMenu, {
+            items: action.items
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+exports.SectionHeader = SectionHeader;

package/dist/spark-web-section-header.esm.js

@@ -0,0 +1,80 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import { css } from '@emotion/react';
+import { Box } from '@spark-web/box';
+import { Button } from '@spark-web/button';
+import { Heading } from '@spark-web/heading';
+import { OverflowMenu } from '@spark-web/overflow-menu';
+import { Row } from '@spark-web/row';
+import { Tag } from '@spark-web/tag';
+import { Text } from '@spark-web/text';
+import { TextLinkButton } from '@spark-web/text-link';
+import { jsx, jsxs, Fragment } from '@emotion/react/jsx-runtime';
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionHeader
+ *
+ * A header component for content sections that supports a label,
+ * optional tag badge, action buttons/menus, and custom controls.
+ *
+ * @see https://spark.brighte.com.au/package/section-header
+ */
+function SectionHeader(_ref) {
+  var _action$tone;
+  var label = _ref.label,
+    _ref$headingLevel = _ref.headingLevel,
+    headingLevel = _ref$headingLevel === void 0 ? '4' : _ref$headingLevel,
+    tag = _ref.tag,
+    action = _ref.action,
+    controls = _ref.controls,
+    data = _ref.data;
+  if (!label) return null;
+  return jsx(Box, {
+    data: data,
+    background: "neutral",
+    borderBottom: "neutral",
+    children: label && jsxs(Box, {
+      display: "flex",
+      justifyContent: "spaceBetween",
+      alignItems: "center",
+      marginX: "xlarge",
+      marginY: "large",
+      height: "small",
+      children: [jsxs(Row, {
+        alignY: "center",
+        gap: "medium",
+        children: [jsx(Heading, {
+          level: headingLevel,
+          children: label
+        }), tag && jsx(Tag, _objectSpread({}, tag))]
+      }), (action || controls) && jsxs(Row, {
+        gap: "large",
+        alignY: "center",
+        css: css({
+          marginLeft: 'auto'
+        }),
+        children: [controls, action && jsxs(Fragment, {
+          children: [action.type === 'button' && jsx(Button, {
+            onClick: action.onClick,
+            tone: (_action$tone = action.tone) !== null && _action$tone !== void 0 ? _action$tone : 'primary',
+            prominence: action.prominence,
+            disabled: action.disabled,
+            children: action.icon ? [action.icon, action.label] : action.label
+          }), action.type === 'link' && jsx(Text, {
+            size: "small",
+            children: jsx(TextLinkButton, {
+              weight: "regular",
+              onClick: action.onClick,
+              children: action.label
+            })
+          }), action.type === 'menu' && jsx(OverflowMenu, {
+            items: action.items
+          })]
+        })]
+      })]
+    })
+  });
+}
+
+export { SectionHeader };

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@spark-web/section-header",
+  "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/section-header"
+  },
+  "main": "dist/spark-web-section-header.cjs.js",
+  "module": "dist/spark-web-section-header.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/button": "^5.1.0",
+    "@spark-web/heading": "^5.2.0",
+    "@spark-web/overflow-menu": "0.0.0-snapshot-release-20260401034720",
+    "@spark-web/row": "^5.1.0",
+    "@spark-web/tag": "0.0.0-snapshot-release-20260401034720",
+    "@spark-web/text": "^5.3.0",
+    "@spark-web/text-link": "^5.4.0",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@spark-web/icon": "^5.1.0",
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}