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

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @spark-web/section-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,42 @@
+# @spark-web/section-card
+
+A card container for content sections with optional header and footer slots.
+Compose with `SectionHeader` for a complete section layout.
+
+## Usage
+
+```tsx
+import { SectionCard } from '@spark-web/section-card';
+import { SectionHeader } from '@spark-web/section-header';
+
+<SectionCard
+  header={
+    <SectionHeader
+      label="Details"
+      action={{ type: 'button', label: 'Edit', onClick: handleEdit }}
+    />
+  }
+  footer={<Button>Save</Button>}
+>
+  <DescriptionList items={items} />
+</SectionCard>;
+```
+
+## Key props
+
+| Prop       | Type                                                  | Default    | Notes                                                       |
+| ---------- | ----------------------------------------------------- | ---------- | ----------------------------------------------------------- |
+| `children` | `ReactNode`                                           | required   | Main content area                                           |
+| `header`   | `ReactNode`                                           | —          | Renders above the padded content; use `SectionHeader`       |
+| `footer`   | `ReactNode`                                           | —          | Rendered below a `Divider` when provided                    |
+| `padding`  | `ResponsiveProp<keyof SparkTheme['spacing']>`         | `'xlarge'` | Padding around the content area; supports responsive values |
+| `gap`      | `keyof Omit<SparkTheme['spacing'], 'none' \| 'full'>` | `'large'`  | Gap between content children                                |
+| `data`     | `DataAttributeMap`                                    | —          | Test/analytics attributes                                   |
+
+## Constraints
+
+- `header` renders outside the padded `Stack` — `SectionHeader` provides its own
+  internal padding
+- `footer` is always preceded by a `Divider` — do not add one manually
+- `padding` accepts responsive values (e.g.
+  `{ mobile: 'medium', tablet: 'xlarge' }`); `gap` does not

package/README.md

@@ -0,0 +1,22 @@
+# @spark-web/section-card
+
+A card container for content sections with optional header and footer. Compose
+with SectionHeader for a complete section layout.
+
+## Usage
+
+```tsx
+import { SectionCard } from '@spark-web/section-card';
+import { SectionHeader } from '@spark-web/section-header';
+
+<SectionCard
+  header={
+    <SectionHeader
+      label="Business Details"
+      tag={{ children: 'Active', tone: 'positive' }}
+    />
+  }
+>
+  Content goes here.
+</SectionCard>;
+```

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

@@ -0,0 +1,2 @@
+export { SectionCard } from "./section-card.js";
+export type { SectionCardProps } from "./section-card.js";

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

@@ -0,0 +1,26 @@
+import type { ResponsiveProp, SparkTheme } from '@spark-web/theme';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { ReactNode } from 'react';
+/**
+ * SectionCard
+ *
+ * A card container for content sections with optional header and footer.
+ * Compose with SectionHeader for a complete section layout.
+ *
+ * @see https://spark.brighte.com.au/package/section-card
+ */
+export declare function SectionCard({ header, children, footer, padding, gap, data, }: SectionCardProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type SectionCardProps = {
+    /** Optional header element — compose with SectionHeader. */
+    header?: ReactNode;
+    /** The main content of the card. */
+    children: ReactNode;
+    /** Optional footer element. */
+    footer?: ReactNode;
+    /** Padding around the content area. */
+    padding?: ResponsiveProp<keyof SparkTheme['spacing']>;
+    /** Gap between content children. */
+    gap?: keyof Omit<SparkTheme['spacing'], 'none' | 'full'>;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+};

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

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

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var divider = require('@spark-web/divider');
+var stack = require('@spark-web/stack');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionCard
+ *
+ * A card container for content sections with optional header and footer.
+ * Compose with SectionHeader for a complete section layout.
+ *
+ * @see https://spark.brighte.com.au/package/section-card
+ */
+function SectionCard(_ref) {
+  var header = _ref.header,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'large' : _ref$gap,
+    data = _ref.data;
+  return jsxRuntime.jsxs(stack.Stack, {
+    data: data,
+    background: "neutral",
+    children: [header, jsxRuntime.jsx(stack.Stack, {
+      padding: padding,
+      gap: gap,
+      children: children
+    }), footer && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(divider.Divider, {}), jsxRuntime.jsx(stack.Stack, {
+        children: footer
+      })]
+    })]
+  });
+}
+
+exports.SectionCard = SectionCard;

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

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

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

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var divider = require('@spark-web/divider');
+var stack = require('@spark-web/stack');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionCard
+ *
+ * A card container for content sections with optional header and footer.
+ * Compose with SectionHeader for a complete section layout.
+ *
+ * @see https://spark.brighte.com.au/package/section-card
+ */
+function SectionCard(_ref) {
+  var header = _ref.header,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'large' : _ref$gap,
+    data = _ref.data;
+  return jsxRuntime.jsxs(stack.Stack, {
+    data: data,
+    background: "neutral",
+    children: [header, jsxRuntime.jsx(stack.Stack, {
+      padding: padding,
+      gap: gap,
+      children: children
+    }), footer && jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [jsxRuntime.jsx(divider.Divider, {}), jsxRuntime.jsx(stack.Stack, {
+        children: footer
+      })]
+    })]
+  });
+}
+
+exports.SectionCard = SectionCard;

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

@@ -0,0 +1,39 @@
+import { Divider } from '@spark-web/divider';
+import { Stack } from '@spark-web/stack';
+import { jsxs, jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+////////////////////////////////////////////////////////////////////////////////
+
+/**
+ * SectionCard
+ *
+ * A card container for content sections with optional header and footer.
+ * Compose with SectionHeader for a complete section layout.
+ *
+ * @see https://spark.brighte.com.au/package/section-card
+ */
+function SectionCard(_ref) {
+  var header = _ref.header,
+    children = _ref.children,
+    footer = _ref.footer,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$gap = _ref.gap,
+    gap = _ref$gap === void 0 ? 'large' : _ref$gap,
+    data = _ref.data;
+  return jsxs(Stack, {
+    data: data,
+    background: "neutral",
+    children: [header, jsx(Stack, {
+      padding: padding,
+      gap: gap,
+      children: children
+    }), footer && jsxs(Fragment, {
+      children: [jsx(Divider, {}), jsx(Stack, {
+        children: footer
+      })]
+    })]
+  });
+}
+
+export { SectionCard };

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@spark-web/section-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/section-card"
+  },
+  "main": "dist/spark-web-section-card.cjs.js",
+  "module": "dist/spark-web-section-card.esm.js",
+  "files": [
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.14.0",
+    "@spark-web/divider": "^5.1.0",
+    "@spark-web/stack": "^5.0.0",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@spark-web/section-header": "0.0.0-snapshot-release-20260401034720",
+    "@spark-web/tag": "0.0.0-snapshot-release-20260401034720",
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}