@spark-web/description-list 0.0.0-snapshot-release-20260401034720

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# @spark-web/description-list
+
+## 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,49 @@
+# @spark-web/description-list
+
+A key-value display component for labeled data rows. Renders semantic
+`<dl>`/`<dt>`/`<dd>` HTML. Each row has a label and value, with an optional icon
+before the value.
+
+## Usage
+
+```tsx
+import { DescriptionList } from '@spark-web/description-list';
+
+<DescriptionList
+  items={[
+    { label: 'Status', value: 'Active' },
+    { label: 'Amount', value: '$1,200', icon: <DollarIcon /> },
+    { label: 'Note', value: <Text tone="critical">Overdue</Text> },
+  ]}
+/>;
+```
+
+## Key props
+
+| Prop          | Type                    | Default    | Notes                               |
+| ------------- | ----------------------- | ---------- | ----------------------------------- |
+| `items`       | `DescriptionListItem[]` | required   |                                     |
+| `showDivider` | `boolean`               | `true`     | Renders a bottom border on each row |
+| `labelSize`   | `TextSize`              | `'small'`  |                                     |
+| `labelTone`   | `ForegroundTone`        | `'muted'`  |                                     |
+| `valueSize`   | `TextSize`              | `'small'`  | Only applies to string values       |
+| `padding`     | `SpacingScale`          | `'xlarge'` | Outer padding of the list           |
+| `paddingTop`  | `SpacingScale`          | `'large'`  | Overrides top padding               |
+| `data`        | `DataAttributeMap`      | —          | Test/analytics attributes           |
+
+## DescriptionListItem shape
+
+```ts
+{
+  label: string;
+  value: ReactNode;          // string auto-wrapped in <Text>
+  icon?: ReactNode;          // displayed before the value
+  layout?: 'fixed' | 'auto'; // 'fixed' = 40/60 split; 'auto' = space-between
+}
+```
+
+## Constraints
+
+- `layout` is per-row — rows in the same list can mix layouts
+- Divider borders are Emotion styles; do not assert via
+  `getAttribute('border-bottom')` in tests — use `toHaveStyle` or a test id

package/README.md

@@ -0,0 +1,16 @@
+# @spark-web/description-list
+
+A key-value display component for showing labeled data in rows.
+
+## Usage
+
+```tsx
+import { DescriptionList } from '@spark-web/description-list';
+
+<DescriptionList
+  items={[
+    { label: 'Name', value: 'John Smith' },
+    { label: 'Email', value: 'john@example.com' },
+  ]}
+/>;
+```

package/dist/declarations/src/description-list.d.ts

@@ -0,0 +1,45 @@
+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']>;
+/**
+ * DescriptionList
+ *
+ * A key-value display component for showing labeled data in rows.
+ * Each row has a label and a value, with an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/description-list
+ */
+export declare function DescriptionList({ items, labelSize, labelTone, padding, paddingTop, showDivider, valueSize, data, }: DescriptionListProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export type DescriptionListProps = {
+    /** The list of items to display. */
+    items: DescriptionListItem[];
+    /** The size of the label text. Defaults to 'small'. */
+    labelSize?: TextSize;
+    /** The tone of the label text. Defaults to 'muted'. */
+    labelTone?: ForegroundTone;
+    /** Padding around the list. */
+    padding?: SpacingScale;
+    /** Top padding for the list. */
+    paddingTop?: SpacingScale;
+    /** Whether to show a bottom border/divider on each row. Defaults to true. */
+    showDivider?: boolean;
+    /** The size of string values. Defaults to 'small'. */
+    valueSize?: TextSize;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+};
+export type DescriptionListItem = {
+    /** The label/title for the row. */
+    label: string;
+    /** The value to display — can be a string or custom ReactNode. */
+    value: ReactNode;
+    /** An optional icon to display before the value. */
+    icon?: ReactNode;
+    /** Layout mode: 'fixed' uses 40/60 column split, 'auto' uses space-between. */
+    layout?: 'fixed' | 'auto';
+};
+export {};

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

@@ -0,0 +1,2 @@
+export { DescriptionList } from "./description-list.js";
+export type { DescriptionListItem, DescriptionListProps, } from "./description-list.js";

package/dist/spark-web-description-list.cjs.d.ts

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

package/dist/spark-web-description-list.cjs.dev.js

@@ -0,0 +1,105 @@
+'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 inline = require('@spark-web/inline');
+var text = require('@spark-web/text');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+/**
+ * DescriptionList
+ *
+ * A key-value display component for showing labeled data in rows.
+ * Each row has a label and a value, with an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/description-list
+ */
+function DescriptionList(_ref) {
+  var items = _ref.items,
+    _ref$labelSize = _ref.labelSize,
+    labelSize = _ref$labelSize === void 0 ? 'small' : _ref$labelSize,
+    _ref$labelTone = _ref.labelTone,
+    labelTone = _ref$labelTone === void 0 ? 'muted' : _ref$labelTone,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$paddingTop = _ref.paddingTop,
+    paddingTop = _ref$paddingTop === void 0 ? 'large' : _ref$paddingTop,
+    _ref$showDivider = _ref.showDivider,
+    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    _ref$valueSize = _ref.valueSize,
+    valueSize = _ref$valueSize === void 0 ? 'small' : _ref$valueSize,
+    data = _ref.data;
+  return jsxRuntime.jsx(box.Box, {
+    as: "dl",
+    data: data,
+    padding: padding,
+    paddingTop: paddingTop,
+    children: items.map(function (item) {
+      return jsxRuntime.jsx(DescriptionListRow, _objectSpread({
+        labelSize: labelSize,
+        labelTone: labelTone,
+        showDivider: showDivider,
+        valueSize: valueSize
+      }, item), item.label);
+    })
+  });
+}
+function DescriptionListRow(_ref2) {
+  var label = _ref2.label,
+    labelSize = _ref2.labelSize,
+    labelTone = _ref2.labelTone,
+    value = _ref2.value,
+    icon = _ref2.icon,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'fixed' : _ref2$layout,
+    showDivider = _ref2.showDivider,
+    valueSize = _ref2.valueSize;
+  var isFixed = layout === 'fixed';
+  var labelStyles = react.css(isFixed ? {
+    flex: 0.4
+  } : {});
+  var valueStyles = react.css(_objectSpread(_objectSpread({}, isFixed ? {
+    flex: 0.6
+  } : {}), {}, {
+    textAlign: isFixed ? 'inherit' : 'end'
+  }));
+  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    paddingY: "small",
+    alignItems: "center",
+    gap: "large",
+    css: react.css({
+      minHeight: '34px'
+    })
+  }, showDivider && {
+    borderBottom: 'neutral'
+  }), !isFixed && {
+    justifyContent: 'spaceBetween'
+  }), {}, {
+    children: [jsxRuntime.jsx(box.Box, {
+      as: "dt",
+      css: labelStyles,
+      children: jsxRuntime.jsx(text.Text, {
+        size: labelSize,
+        tone: labelTone,
+        children: label
+      })
+    }), jsxRuntime.jsx(box.Box, {
+      as: "dd",
+      css: valueStyles,
+      children: jsxRuntime.jsxs(inline.Inline, {
+        gap: "xsmall",
+        alignY: "center",
+        children: [icon, typeof value === 'string' ? jsxRuntime.jsx(text.Text, {
+          size: valueSize,
+          children: value
+        }) : value]
+      })
+    })]
+  }));
+}
+
+exports.DescriptionList = DescriptionList;

package/dist/spark-web-description-list.cjs.js

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

package/dist/spark-web-description-list.cjs.prod.js

@@ -0,0 +1,105 @@
+'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 inline = require('@spark-web/inline');
+var text = require('@spark-web/text');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+
+/**
+ * DescriptionList
+ *
+ * A key-value display component for showing labeled data in rows.
+ * Each row has a label and a value, with an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/description-list
+ */
+function DescriptionList(_ref) {
+  var items = _ref.items,
+    _ref$labelSize = _ref.labelSize,
+    labelSize = _ref$labelSize === void 0 ? 'small' : _ref$labelSize,
+    _ref$labelTone = _ref.labelTone,
+    labelTone = _ref$labelTone === void 0 ? 'muted' : _ref$labelTone,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$paddingTop = _ref.paddingTop,
+    paddingTop = _ref$paddingTop === void 0 ? 'large' : _ref$paddingTop,
+    _ref$showDivider = _ref.showDivider,
+    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    _ref$valueSize = _ref.valueSize,
+    valueSize = _ref$valueSize === void 0 ? 'small' : _ref$valueSize,
+    data = _ref.data;
+  return jsxRuntime.jsx(box.Box, {
+    as: "dl",
+    data: data,
+    padding: padding,
+    paddingTop: paddingTop,
+    children: items.map(function (item) {
+      return jsxRuntime.jsx(DescriptionListRow, _objectSpread({
+        labelSize: labelSize,
+        labelTone: labelTone,
+        showDivider: showDivider,
+        valueSize: valueSize
+      }, item), item.label);
+    })
+  });
+}
+function DescriptionListRow(_ref2) {
+  var label = _ref2.label,
+    labelSize = _ref2.labelSize,
+    labelTone = _ref2.labelTone,
+    value = _ref2.value,
+    icon = _ref2.icon,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'fixed' : _ref2$layout,
+    showDivider = _ref2.showDivider,
+    valueSize = _ref2.valueSize;
+  var isFixed = layout === 'fixed';
+  var labelStyles = react.css(isFixed ? {
+    flex: 0.4
+  } : {});
+  var valueStyles = react.css(_objectSpread(_objectSpread({}, isFixed ? {
+    flex: 0.6
+  } : {}), {}, {
+    textAlign: isFixed ? 'inherit' : 'end'
+  }));
+  return jsxRuntime.jsxs(box.Box, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    paddingY: "small",
+    alignItems: "center",
+    gap: "large",
+    css: react.css({
+      minHeight: '34px'
+    })
+  }, showDivider && {
+    borderBottom: 'neutral'
+  }), !isFixed && {
+    justifyContent: 'spaceBetween'
+  }), {}, {
+    children: [jsxRuntime.jsx(box.Box, {
+      as: "dt",
+      css: labelStyles,
+      children: jsxRuntime.jsx(text.Text, {
+        size: labelSize,
+        tone: labelTone,
+        children: label
+      })
+    }), jsxRuntime.jsx(box.Box, {
+      as: "dd",
+      css: valueStyles,
+      children: jsxRuntime.jsxs(inline.Inline, {
+        gap: "xsmall",
+        alignY: "center",
+        children: [icon, typeof value === 'string' ? jsxRuntime.jsx(text.Text, {
+          size: valueSize,
+          children: value
+        }) : value]
+      })
+    })]
+  }));
+}
+
+exports.DescriptionList = DescriptionList;

package/dist/spark-web-description-list.esm.js

@@ -0,0 +1,101 @@
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import { css } from '@emotion/react';
+import { Box } from '@spark-web/box';
+import { Inline } from '@spark-web/inline';
+import { Text } from '@spark-web/text';
+import { jsx, jsxs } from '@emotion/react/jsx-runtime';
+
+/**
+ * DescriptionList
+ *
+ * A key-value display component for showing labeled data in rows.
+ * Each row has a label and a value, with an optional icon.
+ *
+ * @see https://spark.brighte.com.au/package/description-list
+ */
+function DescriptionList(_ref) {
+  var items = _ref.items,
+    _ref$labelSize = _ref.labelSize,
+    labelSize = _ref$labelSize === void 0 ? 'small' : _ref$labelSize,
+    _ref$labelTone = _ref.labelTone,
+    labelTone = _ref$labelTone === void 0 ? 'muted' : _ref$labelTone,
+    _ref$padding = _ref.padding,
+    padding = _ref$padding === void 0 ? 'xlarge' : _ref$padding,
+    _ref$paddingTop = _ref.paddingTop,
+    paddingTop = _ref$paddingTop === void 0 ? 'large' : _ref$paddingTop,
+    _ref$showDivider = _ref.showDivider,
+    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
+    _ref$valueSize = _ref.valueSize,
+    valueSize = _ref$valueSize === void 0 ? 'small' : _ref$valueSize,
+    data = _ref.data;
+  return jsx(Box, {
+    as: "dl",
+    data: data,
+    padding: padding,
+    paddingTop: paddingTop,
+    children: items.map(function (item) {
+      return jsx(DescriptionListRow, _objectSpread({
+        labelSize: labelSize,
+        labelTone: labelTone,
+        showDivider: showDivider,
+        valueSize: valueSize
+      }, item), item.label);
+    })
+  });
+}
+function DescriptionListRow(_ref2) {
+  var label = _ref2.label,
+    labelSize = _ref2.labelSize,
+    labelTone = _ref2.labelTone,
+    value = _ref2.value,
+    icon = _ref2.icon,
+    _ref2$layout = _ref2.layout,
+    layout = _ref2$layout === void 0 ? 'fixed' : _ref2$layout,
+    showDivider = _ref2.showDivider,
+    valueSize = _ref2.valueSize;
+  var isFixed = layout === 'fixed';
+  var labelStyles = css(isFixed ? {
+    flex: 0.4
+  } : {});
+  var valueStyles = css(_objectSpread(_objectSpread({}, isFixed ? {
+    flex: 0.6
+  } : {}), {}, {
+    textAlign: isFixed ? 'inherit' : 'end'
+  }));
+  return jsxs(Box, _objectSpread(_objectSpread(_objectSpread({
+    display: "flex",
+    paddingY: "small",
+    alignItems: "center",
+    gap: "large",
+    css: css({
+      minHeight: '34px'
+    })
+  }, showDivider && {
+    borderBottom: 'neutral'
+  }), !isFixed && {
+    justifyContent: 'spaceBetween'
+  }), {}, {
+    children: [jsx(Box, {
+      as: "dt",
+      css: labelStyles,
+      children: jsx(Text, {
+        size: labelSize,
+        tone: labelTone,
+        children: label
+      })
+    }), jsx(Box, {
+      as: "dd",
+      css: valueStyles,
+      children: jsxs(Inline, {
+        gap: "xsmall",
+        alignY: "center",
+        children: [icon, typeof value === 'string' ? jsx(Text, {
+          size: valueSize,
+          children: value
+        }) : value]
+      })
+    })]
+  }));
+}
+
+export { DescriptionList };

package/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@spark-web/description-list",
+  "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/description-list"
+  },
+  "main": "dist/spark-web-description-list.cjs.js",
+  "module": "dist/spark-web-description-list.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/inline": "^5.1.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"
+  }
+}