@spaced-out/ui-design-system 0.6.12 → 0.6.13

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 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.13](https://github.com/spaced-out/ui-design-system/compare/v0.6.12...v0.6.13) (2026-04-23)
+
+
+### Features
+
+* **ProgressDonut:** add icon support in center slot ([#478](https://github.com/spaced-out/ui-design-system/issues/478)) ([4c1a30e](https://github.com/spaced-out/ui-design-system/commit/4c1a30e5033fa544cea7ac3511b5c250c5f52a7d))
+
 ### [0.6.12](https://github.com/spaced-out/ui-design-system/compare/v0.6.11...v0.6.12) (2026-04-22)
 
 

package/lib/components/ProgressDonut/ProgressDonut.d.ts

@@ -1,5 +1,6 @@
 import type { Flow } from 'flow-to-typescript-codemod';
 import * as COLORS from '../../styles/variables/_color';
+import type { IconProps } from '../../components/Icon';
 type ClassNames = Readonly<{
     wrapper?: string;
     donutChart?: string;
@@ -9,6 +10,7 @@ export type ProgressDonutProps = {
     color?: keyof typeof COLORS;
     size?: 'small' | 'medium';
     testId?: string;
+    icon?: Omit<IconProps, 'size'>;
 } & ({
     percentage?: number;
     rating?: never;

package/lib/components/ProgressDonut/ProgressDonut.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAuBtD,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,GAAG,CACA;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAC,GACrC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAC,CACvC,CAAC;AAcF,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAsGf,CAAC"}
+{"version":3,"file":"ProgressDonut.d.ts","sourceRoot":"","sources":["../../../src/components/ProgressDonut/ProgressDonut.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAC,IAAI,EAAC,MAAM,4BAA4B,CAAC;AAErD,OAAO,KAAK,MAAM,MAAM,6BAA6B,CAAC;AAItD,OAAO,KAAK,EAAC,SAAS,EAAW,MAAM,qBAAqB,CAAC;AA0B7D,KAAK,UAAU,GAAG,QAAQ,CAAC;IACzB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB,CAAC,CAAC;AAEH,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;IAC5B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS,EAAE,MAAM,CAAC,CAAC;CAChC,GAAG,CACA;IAAC,UAAU,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,KAAK,CAAA;CAAC,GACrC;IAAC,MAAM,EAAE,MAAM,CAAC;IAAC,UAAU,CAAC,EAAE,KAAK,CAAA;CAAC,CACvC,CAAC;AAcF,eAAO,MAAM,aAAa,EAAE,IAAI,CAAC,iBAAiB,CAChD,kBAAkB,EAClB,cAAc,CAgHf,CAAC"}

package/lib/components/ProgressDonut/ProgressDonut.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var COLORS = _interopRequireWildcard(require("../../styles/variables/_color"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _qa = require("../../utils/qa");
+var _Icon = require("../Icon");
 var _Text = require("../Text");
 var _ProgressDonutModule = _interopRequireDefault(require("./ProgressDonut.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -31,6 +32,10 @@ const DONUT_CONFIG = {
     strokeWidth: 8
   }
 };
+const DONUT_TO_ICON_SIZE = {
+  small: 'small',
+  medium: 'large'
+};
 const getProgressDonutColor = percentage => {
   if (percentage >= SUCCESS_THRESHOLD) {
     return COLORS.colorSuccess;
@@ -49,7 +54,8 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
     rating,
     color,
     size = 'medium',
-    testId
+    testId,
+    icon
   } = _ref;
   const clampedRating = rating !== undefined ? Math.min(Math.max(Math.round(rating), MIN_RATING), MAX_RATING) : undefined;
   const donutPercentage = React.useMemo(() => {
@@ -99,7 +105,17 @@ const ProgressDonut = exports.ProgressDonut = /*#__PURE__*/React.forwardRef((_re
           stroke: COLORS[color || ''] || donutColor,
           strokeLinecap: "round"
         })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(TextComponent, {
+      }), icon ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _ProgressDonutModule.default.donutChartIcon,
+        "data-testid": (0, _qa.generateTestId)({
+          base: testId,
+          slot: 'icon'
+        }),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
+          ...icon,
+          size: DONUT_TO_ICON_SIZE[size]
+        })
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(TextComponent, {
         className: (0, _classify.default)(_ProgressDonutModule.default.donutChartPercentage, {
           [_ProgressDonutModule.default.donutChartPercentageSmallPercent]: size === 'small' && rating === undefined
         }),

package/lib/components/ProgressDonut/ProgressDonut.module.css

@@ -46,3 +46,7 @@
 .donutChartPercentageSmallPercent {
   font-size: fontSize12;
 }
+
+.donutChartIcon {
+  position: absolute;
+}

package/mcp/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/genesis-mcp",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "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.12",
+  "version": "0.6.13",
   "description": "Sense UI components library",
   "author": {
     "name": "Spaced Out"