@spaced-out/ui-design-system 0.6.23 → 0.6.25

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.6.25](https://github.com/spaced-out/ui-design-system/compare/v0.6.24...v0.6.25) (2026-07-01)
+
+
+### Features
+
+* add total and legend value/percent support to donut chart ([#494](https://github.com/spaced-out/ui-design-system/issues/494)) ([23b07df](https://github.com/spaced-out/ui-design-system/commit/23b07df5f5cb870be2df66dda2603fe6b4e1a1b1))
+
+### [0.6.24](https://github.com/spaced-out/ui-design-system/compare/v0.6.23...v0.6.24) (2026-06-25)
+
+
+### Features
+
+* pill component ([#492](https://github.com/spaced-out/ui-design-system/issues/492)) ([001a9ef](https://github.com/spaced-out/ui-design-system/commit/001a9ef9c132642ffd17cfde9fe990dabac3cb8f))
+
 ### [0.6.23](https://github.com/spaced-out/ui-design-system/compare/v0.6.22...v0.6.23) (2026-06-25)
 
 

package/lib/components/Charts/ChartWrapper/ChartWrapper.js

@@ -83,7 +83,7 @@ const CustomExportButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       size: 'medium',
       width: _size.size180
     },
-    iconLeftName: "ellipsis",
+    iconLeftName: "cloud-arrow-down",
     onOptionSelect: option => handleDownload(option.key),
     size: "small",
     type: "ghost",

package/lib/components/Charts/DonutChart/DonutChart.d.ts

@@ -18,6 +18,9 @@ export interface DonutChartProps extends Omit<ChartOptions, 'isLoading' | 'class
     headerActions?: React.ReactNode;
     centerText?: string;
     centerSubtext?: string;
+    showTotal?: boolean;
+    showLegendValues?: boolean;
+    formatValue?: (value: number) => string;
     series: Array<PieSeriesOptions>;
     drilldown?: Drilldown;
     legend?: LegendOptionsType;
@@ -25,6 +28,6 @@ export interface DonutChartProps extends Omit<ChartOptions, 'isLoading' | 'class
     emptyText?: React.ReactNode;
     testId?: string;
 }
-export declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, hasEmptyData, emptyText, testId, ...userOptions }: DonutChartProps) => React.JSX.Element;
+export declare const DonutChart: ({ isLoading, classNames, cardTitle, customExportOptions, headerActions, series, drilldown, legend, centerText, centerSubtext, showTotal, showLegendValues, formatValue, hasEmptyData, emptyText, testId, ...userOptions }: DonutChartProps) => React.JSX.Element;
 export {};
 //# sourceMappingURL=DonutChart.d.ts.map

package/lib/components/Charts/DonutChart/DonutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,YAAY,EAGZ,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AAQ1B,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,oCAAoC,CAAC;AAO5C,KAAK,UAAU,GAAG,QAAQ,CACxB,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CACF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,YAAY,EACV,WAAW,GACX,YAAY,GACZ,WAAW,GACX,qBAAqB,GACrB,eAAe,GACf,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,cAAc,GACd,WAAW,CACd;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,GAAI,iLAexB,eAAe,sBAgGjB,CAAC"}
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,KAAK,EACV,YAAY,EAGZ,SAAS,EACT,iBAAiB,EACjB,gBAAgB,EACjB,MAAM,kBAAkB,CAAC;AAU1B,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,oCAAoC,CAAC;AAO5C,KAAK,UAAU,GAAG,QAAQ,CACxB,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kBAAkB,CAAC,EAAE,kBAAkB,CAAC;CACzC,CACF,CAAC;AAEF,UAAU,kBAAkB;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,MAAM,WAAW,eACf,SAAQ,IAAI,CACV,YAAY,EACV,WAAW,GACX,YAAY,GACZ,WAAW,GACX,qBAAqB,GACrB,eAAe,GACf,YAAY,GACZ,eAAe,GACf,QAAQ,GACR,WAAW,GACX,QAAQ,GACR,cAAc,GACd,WAAW,CACd;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,MAAM,EAAE,KAAK,CAAC,gBAAgB,CAAC,CAAC;IAChC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgCD,eAAO,MAAM,UAAU,GAAI,2NAkBxB,eAAe,sBA8IjB,CAAC"}

package/lib/components/Charts/DonutChart/DonutChart.js

@@ -15,6 +15,24 @@ var _typographyModule = _interopRequireDefault(require("../../../styles/typograp
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+// Coerce to a usable number, treating null/undefined/NaN/Infinity as 0 so a
+// single bad data point can't render the total (or a legend value) as "NaN".
+const toFiniteNumber = value => typeof value === 'number' && Number.isFinite(value) ? value : 0;
+const getPointValue = point => {
+  if (typeof point === 'number') {
+    return toFiniteNumber(point);
+  }
+  if (Array.isArray(point)) {
+    return toFiniteNumber(point[1]);
+  }
+  if (point && typeof point === 'object' && 'y' in point) {
+    return toFiniteNumber(point.y);
+  }
+  return 0;
+};
+
+/** Sums every data-point value across all series to derive the donut total. */
+const getDonutSeriesTotal = series => series.reduce((seriesSum, seriesItem) => seriesSum + (seriesItem.data ?? []).reduce((pointSum, point) => pointSum + getPointValue(point), 0), 0);
 const DonutChart = _ref => {
   let {
     isLoading,
@@ -27,6 +45,9 @@ const DonutChart = _ref => {
     legend,
     centerText,
     centerSubtext,
+    showTotal,
+    showLegendValues,
+    formatValue,
     hasEmptyData,
     emptyText,
     testId,
@@ -38,14 +59,44 @@ const DonutChart = _ref => {
     subtitleClassNames,
     ...wrapperClassNames
   } = classNames || {};
-  const defaultCenterHTML = `<span class=${(0, _classify.default)(_DonutChartModule.default.subtitleWrap, subtitleClassNames?.wrapper)}>
-    <span class="${(0, _classify.default)(_typographyModule.default.jumboMedium, _DonutChartModule.default.subtitleText, subtitleClassNames?.text)}">
-      ${centerText ? centerText : ''}
+  const resolveFormatValue = formatValue ?? _charts.formatCompactNumber;
+  const buildCenterHTML = mainText => `<span class="${(0, _classify.default)(_DonutChartModule.default.subtitleWrap, subtitleClassNames?.wrapper)}">
+    <span class="${(0, _classify.default)(_typographyModule.default.jumboMedium, _DonutChartModule.default.subtitleText, subtitleClassNames?.text, _charts.CENTER_TOTAL_CLASS)}">
+      ${mainText}
     </span>
     <span class="${(0, _classify.default)(_typographyModule.default.bodySmall, _DonutChartModule.default.subtitleSubtext, subtitleClassNames?.subtext)}">
       ${centerSubtext ? centerSubtext : ''}
     </span>
-  <span>`;
+  </span>`;
+
+  // `centerText` always wins; otherwise fall back to the computed total.
+  let resolvedCenterText = centerText;
+  if (resolvedCenterText == null && showTotal) {
+    resolvedCenterText = resolveFormatValue(getDonutSeriesTotal(series));
+  }
+  const defaultCenterHTML = buildCenterHTML(resolvedCenterText ?? '');
+
+  // When the total is auto-computed (not an explicit `centerText`), let the
+  // center recompute from the *visible* points so it stays consistent with the
+  // legend percentages after a slice is toggled off in the legend. Returns just
+  // the formatted number so it can be applied via textContent (no innerHTML).
+  const getCenterTextForVisibleTotal = showTotal && centerText == null ? visibleTotal => resolveFormatValue(visibleTotal) : undefined;
+
+  // When enabled, each legend item shows the point value and percentage,
+  // right-aligned against the item name (rendered as HTML by Highcharts).
+  const legendLabelFormatter = showLegendValues ? function () {
+    // Pie legends bind `this` to a Point; narrow via `percentage` so a
+    // Series (any non-pie reuse) degrades gracefully to just its name.
+    if (!('percentage' in this)) {
+      return this.name ?? '';
+    }
+    const value = resolveFormatValue(toFiniteNumber(this.y));
+    const percent = Math.round(toFiniteNumber(this.percentage));
+    return `<span class="${(0, _classify.default)(_DonutChartModule.default.legendRow)}">
+          <span class="${(0, _classify.default)(_typographyModule.default.formLabelSmall, _DonutChartModule.default.legendName)}">${this.name}</span>
+          <span class="${(0, _classify.default)(_typographyModule.default.formLabelSmall, _DonutChartModule.default.legendValue)}">${value} (${percent}%)</span>
+        </span>`;
+  } : undefined;
   const donutChartSeries = series.map(seriesItem => ({
     ...seriesItem,
     type: 'pie',
@@ -71,7 +122,9 @@ const DonutChart = _ref => {
   } : {};
   const defaultLineChartOptions = (0, _charts.getDonutChartOptions)({
     legend,
-    defaultCenterHTML
+    defaultCenterHTML,
+    legendLabelFormatter,
+    getCenterTextForVisibleTotal
   });
   const chartOptions = (0, _charts.mergeChartUserOptions)(defaultLineChartOptions, {
     series: donutChartSeries,

package/lib/components/Charts/DonutChart/DonutChart.module.css

@@ -63,3 +63,28 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+
+.legendRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: spaceXSmall;
+  /* Width set at runtime so the value/percentage can hug the right edge;
+     falls back to full width if the custom property is unavailable. */
+  width: var(--donut-legend-item-width, sizeFluid);
+}
+
+.legendName {
+  overflow: hidden;
+  color: colorTextPrimary;
+  font-weight: fontWeightBook;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.legendValue {
+  flex-shrink: 0;
+  color: colorTextPrimary;
+  font-weight: fontWeightMedium;
+  white-space: nowrap;
+}

package/lib/components/Chip/Chip.module.css

@@ -21,7 +21,8 @@
   spaceSmall
 ) from '../../styles/variables/_space.css';
 @value (
-  borderRadiusXSmall
+  borderRadiusXSmall,
+  borderRadiusXLarge
 ) from '../../styles/variables/_border.css';
 @value (
   size18,
@@ -72,6 +73,10 @@
   background-color: colorNeutralLightest;
 }
 
+.pill {
+  border-radius: borderRadiusXLarge;
+}
+
 .noHoverState {
   cursor: initial;
 }

package/lib/components/Chip/Pill.d.ts

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import type { Flow } from 'flow-to-typescript-codemod';
+import type { ChipSemanticType } from '../../components/Chip/Chip';
+import type { IconType } from '../../components/Icon';
+type ClassNames = Readonly<{
+    wrapper?: string;
+    icon?: string;
+}>;
+export declare const PILL_SEMANTIC: Readonly<{
+    primary: "primary";
+    information: "information";
+    success: "success";
+    warning: "warning";
+    danger: "danger";
+    secondary: "secondary";
+}>;
+export type PillSemanticType = ChipSemanticType;
+export interface PillProps {
+    classNames?: ClassNames;
+    semantic?: PillSemanticType;
+    size?: 'large' | 'medium' | 'small';
+    children: React.ReactNode;
+    disabled?: boolean;
+    line?: number;
+    wordBreak?: string;
+    iconName?: string;
+    iconType?: IconType;
+    testId?: string;
+}
+export declare const Pill: Flow.AbstractComponent<PillProps, HTMLDivElement>;
+export {};
+//# sourceMappingURL=Pill.d.ts.map

package/lib/components/Chip/Pill.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pill.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/Pill.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAKrD,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAE/D,OAAO,KAAK,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAC;AAOlD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC,CAAC;AAEH,eAAO,MAAM,aAAa;;;;;;;EAAgB,CAAC;AAE3C,MAAM,MAAM,gBAAgB,GAAG,gBAAgB,CAAC;AAEhD,MAAM,WAAW,SAAS;IACxB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,QAAQ,CAAC,EAAE,gBAAgB,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,IAAI,EAAE,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,cAAc,CA8DhE,CAAC"}

package/lib/components/Chip/Pill.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Pill = exports.PILL_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _qa = require("../../utils/qa");
+var _Chip = require("./Chip");
+var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
+var _ChipModule = _interopRequireDefault(require("./Chip.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PILL_SEMANTIC = exports.PILL_SEMANTIC = _Chip.CHIP_SEMANTIC;
+const Pill = exports.Pill = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    classNames,
+    semantic = 'primary',
+    size = 'medium',
+    children,
+    disabled,
+    line = 1,
+    wordBreak,
+    iconName,
+    iconType = 'regular',
+    testId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    "data-testid": (0, _qa.generateTestId)({
+      base: testId,
+      slot: 'root'
+    }),
+    ref: ref,
+    className: (0, _classify.classify)(_ChipModule.default.chipWrapper, _ChipModule.default.pill, _ChipModule.default.noHoverState, {
+      [_ChipModule.default.primary]: semantic === _Chip.CHIP_SEMANTIC.primary,
+      [_ChipModule.default.information]: semantic === _Chip.CHIP_SEMANTIC.information,
+      [_ChipModule.default.success]: semantic === _Chip.CHIP_SEMANTIC.success,
+      [_ChipModule.default.warning]: semantic === _Chip.CHIP_SEMANTIC.warning,
+      [_ChipModule.default.danger]: semantic === _Chip.CHIP_SEMANTIC.danger,
+      [_ChipModule.default.secondary]: semantic === _Chip.CHIP_SEMANTIC.secondary,
+      [_ChipModule.default.large]: size === 'large',
+      [_ChipModule.default.medium]: size === 'medium',
+      [_ChipModule.default.small]: size === 'small',
+      [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
+      [_ChipModule.default.disabled]: disabled
+    }, classNames?.wrapper),
+    children: [iconName && size !== 'small' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+      className: (0, _classify.classify)(_ChipModule.default.chipIcon, {
+        [_ChipModule.default.alignTop]: line > 1
+      }, classNames?.icon),
+      name: iconName,
+      type: iconType,
+      size: "small",
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'icon'
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Truncate.Truncate, {
+      line: line,
+      wordBreak: wordBreak,
+      testId: (0, _qa.generateTestId)({
+        base: testId,
+        slot: 'text'
+      }),
+      children: children
+    })]
+  });
+});
+Pill.displayName = 'Pill';

package/lib/components/Chip/index.d.ts

@@ -1,3 +1,5 @@
 export type { ChipProps, ChipSemanticType } from '../../components/Chip/Chip';
 export { Chip, CHIP_SEMANTIC } from '../../components/Chip/Chip';
+export type { PillProps, PillSemanticType } from '../../components/Chip/Pill';
+export { Pill, PILL_SEMANTIC } from '../../components/Chip/Pill';
 //# sourceMappingURL=index.d.ts.map

package/lib/components/Chip/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Chip/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC;AAC7D,YAAY,EAAC,SAAS,EAAE,gBAAgB,EAAC,MAAM,0BAA0B,CAAC;AAC1E,OAAO,EAAC,IAAI,EAAE,aAAa,EAAC,MAAM,0BAA0B,CAAC"}

package/lib/components/Chip/index.js

@@ -15,4 +15,17 @@ Object.defineProperty(exports, "Chip", {
     return _Chip.Chip;
   }
 });
-var _Chip = require("./Chip");
+Object.defineProperty(exports, "PILL_SEMANTIC", {
+  enumerable: true,
+  get: function () {
+    return _Pill.PILL_SEMANTIC;
+  }
+});
+Object.defineProperty(exports, "Pill", {
+  enumerable: true,
+  get: function () {
+    return _Pill.Pill;
+  }
+});
+var _Chip = require("./Chip");
+var _Pill = require("./Pill");

package/lib/utils/charts/donutChart.d.ts

@@ -2,7 +2,27 @@ import type { ChartOptions, LegendOptionsType } from '../../types/charts';
 interface DonutChartPropsType {
     legend?: LegendOptionsType;
     defaultCenterHTML?: string;
+    /**
+     * Formatter for each legend item. When provided, the legend renders as HTML
+     * so items can show the point value and percentage alongside the name.
+     */
+    legendLabelFormatter?: LegendOptionsType['labelFormatter'];
+    /**
+     * Formats the center total for a given value. When provided, the center is
+     * recomputed from the visible points on every render (applied via
+     * textContent) so an auto-computed total stays in sync with the
+     * (redistributed) legend percentages after a slice is toggled off.
+     */
+    getCenterTextForVisibleTotal?: (visibleTotal: number) => string;
 }
+/**
+ * Marker class on the center total element. The auto-total's text is updated
+ * in place (via textContent) as slices are toggled, so it must be locatable
+ * without rebuilding the subtitle HTML. A class is used (not a data-attribute)
+ * because Highcharts' useHTML sanitizer keeps the class attribute but strips
+ * unknown data-* attributes.
+ */
+export declare const CENTER_TOTAL_CLASS = "donut-center-total";
 export declare const rightLegendColumn: {
     readonly layout: "vertical";
     readonly align: "right";
@@ -16,6 +36,6 @@ export declare const rightLegendColumn: {
  * This function modifies the the common chart behavior to donut chart default behavior.
  * It will not take userPassed option into account.
  */
-export declare const getDonutChartOptions: ({ legend, defaultCenterHTML, }: DonutChartPropsType) => ChartOptions;
+export declare const getDonutChartOptions: ({ legend, defaultCenterHTML, legendLabelFormatter, getCenterTextForVisibleTotal, }: DonutChartPropsType) => ChartOptions;
 export {};
 //# sourceMappingURL=donutChart.d.ts.map

package/lib/utils/charts/donutChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"donutChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/donutChart.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAKtE,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B;AAWD,eAAO,MAAM,iBAAiB;;;;;;;;CASpB,CAAC;AAEX;;;GAGG;AAEH,eAAO,MAAM,oBAAoB,GAAI,gCAGlC,mBAAmB,KAAG,YA+ExB,CAAC"}
+{"version":3,"file":"donutChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/donutChart.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,kBAAkB,CAAC;AAKtE,UAAU,mBAAmB;IAC3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,iBAAiB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;;;;OAKG;IACH,4BAA4B,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,MAAM,CAAC;CACjE;AA0BD;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AAEvD,eAAO,MAAM,iBAAiB;;;;;;;;CASpB,CAAC;AAEX;;;GAGG;AAEH,eAAO,MAAM,oBAAoB,GAAI,oFAKlC,mBAAmB,KAAG,YAwHxB,CAAC"}

package/lib/utils/charts/donutChart.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.rightLegendColumn = exports.getDonutChartOptions = void 0;
+exports.rightLegendColumn = exports.getDonutChartOptions = exports.CENTER_TOTAL_CLASS = void 0;
 var _charts = require("./charts");
 var _helpers = require("./helpers");
 /**
@@ -15,13 +15,35 @@ const CHART_WIDTH = 1 - LEGEND_WIDTH;
 const CHART_CENTER = (1 - LEGEND_WIDTH) / 2;
 const CHART_SIZE = 0.8; // chart size w.r.t area allocated to chart drawing;
 
+const LEGEND_SYMBOL_WIDTH = 8;
+const LEGEND_SYMBOL_PADDING = 8;
+const LEGEND_BOX_PADDING = 8; // Highcharts default legend.padding, applied on each side.
+/**
+ * Horizontal space each legend item spends on chrome (box padding + symbol +
+ * symbol padding) before the label text. Subtracted from the legend box width
+ * to derive the width available to the HTML label so the value can be
+ * right-aligned against the name.
+ */
+const LEGEND_ITEM_CHROME_WIDTH = LEGEND_BOX_PADDING * 2 + LEGEND_SYMBOL_WIDTH + LEGEND_SYMBOL_PADDING;
+
+/** CSS custom property consumed by the HTML legend label to right-align values. */
+const LEGEND_ITEM_WIDTH_VAR = '--donut-legend-item-width';
+
+/**
+ * Marker class on the center total element. The auto-total's text is updated
+ * in place (via textContent) as slices are toggled, so it must be locatable
+ * without rebuilding the subtitle HTML. A class is used (not a data-attribute)
+ * because Highcharts' useHTML sanitizer keeps the class attribute but strips
+ * unknown data-* attributes.
+ */
+const CENTER_TOTAL_CLASS = exports.CENTER_TOTAL_CLASS = 'donut-center-total';
 const rightLegendColumn = exports.rightLegendColumn = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   itemMarginBottom: 12,
-  symbolPadding: 8,
-  symbolWidth: 8,
+  symbolPadding: LEGEND_SYMBOL_PADDING,
+  symbolWidth: LEGEND_SYMBOL_WIDTH,
   // take it as 10% of width as left margin
   width: `${LEGEND_WIDTH * 90}%`
 };
@@ -34,10 +56,13 @@ const rightLegendColumn = exports.rightLegendColumn = {
 const getDonutChartOptions = _ref => {
   let {
     legend,
-    defaultCenterHTML
+    defaultCenterHTML,
+    legendLabelFormatter,
+    getCenterTextForVisibleTotal
   } = _ref;
   const legendOption = (0, _helpers.deepMerge)(_charts.commonChartOptions.legend, legend);
   const isLegendEnabled = legendOption.enabled;
+  const hasLegendValues = Boolean(legendLabelFormatter);
   return {
     ..._charts.commonChartOptions,
     chart: {
@@ -52,6 +77,29 @@ const getDonutChartOptions = _ref => {
           const desiredHeight = CHART_WIDTH * containerWidth;
           // 5px adjustment required due to borderWidth mostly.
           const centerTextX = isLegendEnabled ? chart.plotWidth * CHART_CENTER + 5 : 0;
+          // Expose the label width to the HTML legend so the value/percentage
+          // can be right-aligned against the item name. Prefer the measured
+          // legend box, falling back to an estimate from the container width.
+          if (isLegendEnabled && hasLegendValues) {
+            const measuredWidth = chart.legend?.box?.getBBox().width;
+            const legendBoxWidth = measuredWidth || containerWidth * (LEGEND_WIDTH * 0.9);
+            const legendItemWidth = Math.max(0, legendBoxWidth - LEGEND_ITEM_CHROME_WIDTH);
+            chart.container.style.setProperty(LEGEND_ITEM_WIDTH_VAR, `${legendItemWidth}px`);
+          } else {
+            // Clear it so a stale width can't linger if the feature is toggled off.
+            chart.container.style.removeProperty(LEGEND_ITEM_WIDTH_VAR);
+          }
+          // Recompute the auto-total from the visible points so it tracks the
+          // legend as slices are toggled on/off. Applied via textContent (not
+          // innerHTML) on the marked element to avoid an HTML-injection sink.
+          if (getCenterTextForVisibleTotal) {
+            const points = chart.series[0]?.points ?? [];
+            const visibleTotal = points.reduce((sum, point) => sum + (point.visible && typeof point.y === 'number' ? point.y : 0), 0);
+            const totalEl = chart.container.querySelector(`.${CENTER_TOTAL_CLASS}`);
+            if (totalEl) {
+              totalEl.textContent = getCenterTextForVisibleTotal(visibleTotal);
+            }
+          }
           chart.update({
             chart: {
               height: desiredHeight // Set the height dynamically based on the container's width
@@ -65,7 +113,11 @@ const getDonutChartOptions = _ref => {
     },
     legend: {
       ...legendOption,
-      ...rightLegendColumn
+      ...rightLegendColumn,
+      ...(hasLegendValues ? {
+        useHTML: true,
+        labelFormatter: legendLabelFormatter
+      } : {})
     },
     plotOptions: {
       pie: {

package/lib/utils/charts/helpers.d.ts

@@ -1,4 +1,11 @@
 export declare const deepMerge: <T extends object>(obj1: Partial<T> | null | undefined, obj2: Partial<T> | null | undefined, ...args: Array<Partial<T> | null | undefined>) => T;
+/**
+ * Default number formatter used by charts for center totals and legend values.
+ * Abbreviates large numbers into a compact, locale-aware form, keeping up to
+ * two decimal places (e.g. 1460 -> "1.46K", 1260 -> "1.26K", 1200 -> "1.2K",
+ * 200 -> "200").
+ */
+export declare const formatCompactNumber: (value: number) => string;
 export declare const rightLineLegendColumn: {
     readonly layout: "vertical";
     readonly align: "right";

package/lib/utils/charts/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/helpers.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,EACxC,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,KAC5C,CAAmC,CAAC;AAEvC,eAAO,MAAM,qBAAqB;;;;;;;;CAQxB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;CAKnB,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/helpers.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,SAAS,GAAI,CAAC,SAAS,MAAM,EACxC,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,MAAM,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,EACnC,GAAG,MAAM,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,IAAI,GAAG,SAAS,CAAC,KAC5C,CAAmC,CAAC;AAEvC;;;;;GAKG;AACH,eAAO,MAAM,mBAAmB,GAAI,OAAO,MAAM,KAAG,MAIlC,CAAC;AAEnB,eAAO,MAAM,qBAAqB;;;;;;;;CAQxB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;CAOlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAGlB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,eAAe;;;;;;;;;;CAElB,CAAC;AAEX,eAAO,MAAM,gBAAgB;;;;;;;;;;;;CAKnB,CAAC"}

package/lib/utils/charts/helpers.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.yAxisTitleStyle = exports.yAxisLabelStyle = exports.xAxisTitleStyle = exports.xAxisLabelStyle = exports.rightLineLegendColumn = exports.deepMerge = exports.bottomLegendRow = exports.activeLabelStyle = void 0;
+exports.yAxisTitleStyle = exports.yAxisLabelStyle = exports.xAxisTitleStyle = exports.xAxisLabelStyle = exports.rightLineLegendColumn = exports.formatCompactNumber = exports.deepMerge = exports.bottomLegendRow = exports.activeLabelStyle = void 0;
 var _merge = _interopRequireDefault(require("lodash/merge"));
 var _color = require("../../styles/variables/_color");
 var _typography = require("./typography");
@@ -14,7 +14,19 @@ const deepMerge = function (obj1, obj2) {
   }
   return (0, _merge.default)({}, obj1, obj2, ...args);
 }; // {} is used here to ensure obj1 is not modified
+
+/**
+ * Default number formatter used by charts for center totals and legend values.
+ * Abbreviates large numbers into a compact, locale-aware form, keeping up to
+ * two decimal places (e.g. 1460 -> "1.46K", 1260 -> "1.26K", 1200 -> "1.2K",
+ * 200 -> "200").
+ */
 exports.deepMerge = deepMerge;
+const formatCompactNumber = value => new Intl.NumberFormat('en', {
+  notation: 'compact',
+  maximumFractionDigits: 2
+}).format(value);
+exports.formatCompactNumber = formatCompactNumber;
 const rightLineLegendColumn = exports.rightLineLegendColumn = {
   layout: 'vertical',
   align: 'right',

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.35",
+  "version": "1.0.37",
   "description": "MCP server for Genesis UI Design System - provides AI assistants with access to components, hooks, and design tokens",
   "type": "module",
   "main": "index.js",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.6.23",
+  "version": "0.6.25",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"