@spaced-out/ui-design-system 0.6.20 → 0.6.21

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.21](https://github.com/spaced-out/ui-design-system/compare/v0.6.20...v0.6.21) (2026-06-04)
+
+
+### Features
+
+* **Charts:** add StackedBarLineChart combo type ([#486](https://github.com/spaced-out/ui-design-system/issues/486)) ([06344e0](https://github.com/spaced-out/ui-design-system/commit/06344e00bb7a760773158050d08caee5b4788e65))
+
 ### [0.6.20](https://github.com/spaced-out/ui-design-system/compare/v0.6.19...v0.6.20) (2026-05-29)
 
 

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import type { SeriesColumnOptions, SeriesLineOptions } from 'highcharts';
+import type { ChartOptions, DataOptionsType, Drilldown } from '../../../types/charts';
+import type { ChartWrapperClassNames, ExportOptionType } from '../../../components/Charts/ChartWrapper';
+type ClassNames = Readonly<ChartWrapperClassNames & {
+    highChart?: string;
+}>;
+export type StackedBarLineColumnSeries = Omit<SeriesColumnOptions, 'data' | 'type'> & {
+    type: 'column';
+    name: string;
+    data: DataOptionsType[];
+};
+export type StackedBarLineLineSeries = Omit<SeriesLineOptions, 'data' | 'type'> & {
+    type: 'line';
+    name: string;
+    data: DataOptionsType[];
+};
+export type StackedBarLineSeries = StackedBarLineColumnSeries | StackedBarLineLineSeries;
+/**
+ * Combo chart: stacked columns + overlaid line(s) on a single shared y-axis.
+ *
+ * Use when the columns and line(s) share the same units (e.g., a stacked
+ * breakdown of revenue plus a target-revenue line, both in dollars). Pass
+ * `yAxis` as a single options object; the chart renders the axis labels on
+ * both the left and the right edges of the plot via a linked mirror, so
+ * values are readable from either side.
+ */
+export interface StackedBarLineChartProps extends Omit<ChartOptions, 'series' | 'isLoading' | 'drilldown' | 'cardTitle' | 'emptyText' | 'classNames' | 'hasEmptyData' | 'headerActions' | 'customExportOptions'> {
+    series: Array<StackedBarLineSeries>;
+    isLoading?: boolean;
+    drilldown?: Drilldown;
+    cardTitle?: React.ReactNode;
+    emptyText?: React.ReactNode;
+    classNames?: ClassNames;
+    hasEmptyData?: boolean;
+    headerActions?: React.ReactNode;
+    customExportOptions?: Array<ExportOptionType> | null;
+    testId?: string;
+}
+export declare const StackedBarLineChart: ({ series, isLoading, drilldown, emptyText, cardTitle, classNames, hasEmptyData, headerActions, customExportOptions, testId, ...userOptions }: StackedBarLineChartProps) => React.ReactNode;
+export {};
+//# sourceMappingURL=StackedBarLineChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StackedBarLineChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/StackedBarLineChart/StackedBarLineChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,KAAK,EACV,mBAAmB,EACnB,iBAAiB,EAElB,MAAM,YAAY,CAAC;AAKpB,OAAO,KAAK,EAAC,YAAY,EAAE,eAAe,EAAE,SAAS,EAAC,MAAM,kBAAkB,CAAC;AAS/E,OAAO,KAAK,EACV,sBAAsB,EACtB,gBAAgB,EACjB,MAAM,oCAAoC,CAAC;AAM5C,KAAK,UAAU,GAAG,QAAQ,CACxB,sBAAsB,GAAG;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CACF,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG,IAAI,CAC3C,mBAAmB,EACnB,MAAM,GAAG,MAAM,CAChB,GAAG;IACF,IAAI,EAAE,QAAQ,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG,IAAI,CACzC,iBAAiB,EACjB,MAAM,GAAG,MAAM,CAChB,GAAG;IACF,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,eAAe,EAAE,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAC5B,0BAA0B,GAC1B,wBAAwB,CAAC;AAE7B;;;;;;;;GAQG;AACH,MAAM,WAAW,wBACf,SAAQ,IAAI,CACV,YAAY,EACV,QAAQ,GACR,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,YAAY,GACZ,cAAc,GACd,eAAe,GACf,qBAAqB,CACxB;IACD,MAAM,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,mBAAmB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAkDD,eAAO,MAAM,mBAAmB,GAAI,8IAYjC,wBAAwB,KAAG,KAAK,CAAC,SAiEnC,CAAC"}

package/lib/components/Charts/StackedBarLineChart/StackedBarLineChart.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StackedBarLineChart = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _highcharts = _interopRequireDefault(require("highcharts"));
+var _highchartsReactOfficial = _interopRequireDefault(require("highcharts-react-official"));
+var _charts = require("../../../utils/charts");
+var _classify = _interopRequireDefault(require("../../../utils/classify"));
+var _ChartWrapper = require("../ChartWrapper");
+var _StackedBarLineChartModule = _interopRequireDefault(require("./StackedBarLineChart.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); }
+/**
+ * Combo chart: stacked columns + overlaid line(s) on a single shared y-axis.
+ *
+ * Use when the columns and line(s) share the same units (e.g., a stacked
+ * breakdown of revenue plus a target-revenue line, both in dollars). Pass
+ * `yAxis` as a single options object; the chart renders the axis labels on
+ * both the left and the right edges of the plot via a linked mirror, so
+ * values are readable from either side.
+ */
+
+const mapMainSeries = series => series.map((seriesItem, index) => {
+  if (seriesItem.type === 'line') {
+    return {
+      ...seriesItem,
+      color: seriesItem.color ?? (0, _charts.getDataVizColor)(index)
+    };
+  }
+  return {
+    ...seriesItem,
+    color: seriesItem.color ?? (0, _charts.getDataVizColor)(index)
+  };
+});
+const enrichDrilldownSeries = drilldownSeries => drilldownSeries?.map((seriesItem, index) => {
+  const withData = seriesItem;
+  const resolvedType = seriesItem.type ?? 'column';
+  if (resolvedType === 'line') {
+    const lineItem = seriesItem;
+    return {
+      ...seriesItem,
+      type: 'line',
+      color: lineItem.color ?? (0, _charts.getDataVizColor)(index)
+    };
+  }
+  const enrichedData = withData.data?.map((dataItem, dataIndex) => {
+    const resolvedColor = dataItem.color ?? (0, _charts.getDataVizColor)(dataIndex);
+    const resolvedPointWidth = dataItem.pointWidth ?? _charts.columnPlotWidth;
+    return {
+      ...dataItem,
+      color: resolvedColor,
+      pointWidth: resolvedPointWidth
+    };
+  });
+  return {
+    ...seriesItem,
+    type: 'column',
+    ...(enrichedData && {
+      data: enrichedData
+    })
+  };
+});
+const StackedBarLineChart = _ref => {
+  let {
+    series,
+    isLoading,
+    drilldown,
+    emptyText,
+    cardTitle,
+    classNames,
+    hasEmptyData,
+    headerActions,
+    customExportOptions,
+    testId,
+    ...userOptions
+  } = _ref;
+  const chartRef = React.useRef(null);
+  const defaultChartOptions = React.useMemo(() => (0, _charts.getStackedBarLineChartOptions)(), []);
+  const comboSeries = React.useMemo(() => mapMainSeries(series), [series]);
+  const comboDrilldown = React.useMemo(() => drilldown ? {
+    ...drilldown,
+    series: enrichDrilldownSeries(drilldown.series),
+    breadcrumbs: {
+      floating: false
+    }
+  } : {}, [drilldown]);
+
+  // The defaults declare a 2-axis tuple (primary on the left, linked mirror
+  // on the right). lodash.merge cannot fold a plain-object source into an
+  // array destination, so a single-object `yAxis` from the consumer is
+  // normalized to `[userObject, {}]` here — the user's config merges into
+  // the primary slot and the mirror slot keeps its defaults.
+  const userOptionsWithNormalizedAxis = React.useMemo(() => {
+    const userYAxis = userOptions.yAxis;
+    if (!userYAxis || Array.isArray(userYAxis)) {
+      return userOptions;
+    }
+    return {
+      ...userOptions,
+      yAxis: [userYAxis, {}]
+    };
+  }, [userOptions]);
+  const chartOptions = (0, _charts.mergeChartUserOptions)(defaultChartOptions, {
+    series: comboSeries,
+    drilldown: comboDrilldown,
+    ...userOptionsWithNormalizedAxis
+  });
+  const {
+    highChart,
+    ...wrapperClassNames
+  } = classNames || {};
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartWrapper.ChartWrapper, {
+    ref: chartRef,
+    title: cardTitle,
+    isLoading: isLoading,
+    emptyText: emptyText,
+    classNames: wrapperClassNames,
+    hasEmptyData: hasEmptyData,
+    headerActions: headerActions,
+    customExportOptions: customExportOptions,
+    testId: testId,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_highchartsReactOfficial.default, {
+      highcharts: _highcharts.default,
+      containerProps: {
+        className: (0, _classify.default)(_StackedBarLineChartModule.default.stackedBarLineChartContainer, highChart)
+      },
+      ref: chartRef,
+      options: chartOptions
+    })
+  });
+};
+exports.StackedBarLineChart = StackedBarLineChart;

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

@@ -0,0 +1,22 @@
+@value (
+  size400,
+  size540,
+  size660,
+  size880,
+  sizeFluid
+) from '../../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+}
+
+.stackedBarLineChartContainer {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: sizeFluid;
+  min-width: size660;
+  max-width: size880;
+  min-height: size400;
+  max-height: size540;
+}

package/lib/components/Charts/StackedBarLineChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from '../../../components/Charts/StackedBarLineChart/StackedBarLineChart';
+//# sourceMappingURL=index.d.ts.map

package/lib/components/Charts/StackedBarLineChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/StackedBarLineChart/index.ts"],"names":[],"mappings":"AAAA,cAAc,+DAA+D,CAAC"}

package/lib/components/Charts/StackedBarLineChart/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _StackedBarLineChart = require("./StackedBarLineChart");
+Object.keys(_StackedBarLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StackedBarLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StackedBarLineChart[key];
+    }
+  });
+});

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { CategoricalChartKind, ChartKindOptionType, FlowChartKind, ProportionChartKind, UniversalChartProps } from '../../../components/Charts/UniversalChart/UniversalChart.types';
+import type { CategoricalChartKind, ChartKindOptionType, ComboChartKind, FlowChartKind, ProportionChartKind, UniversalChartProps } from '../../../components/Charts/UniversalChart/UniversalChart.types';
 export declare const CHART_KIND_OPTIONS: Readonly<{
     column: ChartKindOptionType<"column">;
     line: ChartKindOptionType<"line">;
@@ -8,13 +8,15 @@ export declare const CHART_KIND_OPTIONS: Readonly<{
     sankey: ChartKindOptionType<"sankey">;
     spider: ChartKindOptionType<"spider">;
     stackedBar: ChartKindOptionType<"stackedBar">;
+    stackedBarLine: ChartKindOptionType<"stackedBarLine">;
 }>;
 export declare const CHART_KIND_GROUPS: Readonly<{
     CATEGORICAL: Array<ChartKindOptionType<CategoricalChartKind>>;
     PROPORTION: Array<ChartKindOptionType<ProportionChartKind>>;
     FLOW: Array<ChartKindOptionType<FlowChartKind>>;
+    COMBO: Array<ChartKindOptionType<ComboChartKind>>;
 }>;
-export type { UniversalChartProps, ChartKind, ChartKindOptionType, ChartKindSelectorProps, CategoricalChartKind, ProportionChartKind, FlowChartKind, } from '../../../components/Charts/UniversalChart/UniversalChart.types';
+export type { UniversalChartProps, ChartKind, ChartKindOptionType, ChartKindSelectorProps, CategoricalChartKind, ProportionChartKind, FlowChartKind, ComboChartKind, } from '../../../components/Charts/UniversalChart/UniversalChart.types';
 export declare const UniversalChart: {
     (props: UniversalChartProps): React.JSX.Element;
     displayName: string;

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

@@ -1 +1 @@
-{"version":3,"file":"UniversalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAkB/B,OAAO,KAAK,EACV,oBAAoB,EAEpB,mBAAmB,EACnB,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2DAA2D,CAAC;AAOnE,eAAO,MAAM,kBAAkB;YAIxB,mBAAmB,CAAC,QAAQ,CAAC;UACU,mBAAmB,CAAC,MAAM,CAAC;WACxB,mBAAmB,CAAC,OAAO,CAAC;YAItE,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;gBAI7B,mBAAmB,CAAC,YAAY,CAAC;EACtC,CAAC;AAEH,eAAO,MAAM,iBAAiB;iBAMvB,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;gBACgB,KAAK,CACxE,mBAAmB,CAAC,mBAAmB,CAAC,CACzC;UACoC,KAAK,CACxC,mBAAmB,CAAC,aAAa,CAAC,CACnC;EACD,CAAC;AAmBH,YAAY,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,GACd,MAAM,2DAA2D,CAAC;AAEnE,eAAO,MAAM,cAAc;YAAW,mBAAmB;;CA6OxD,CAAC"}
+{"version":3,"file":"UniversalChart.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAmB/B,OAAO,KAAK,EACV,oBAAoB,EAEpB,mBAAmB,EACnB,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,mBAAmB,EACpB,MAAM,2DAA2D,CAAC;AAOnE,eAAO,MAAM,kBAAkB;YAIxB,mBAAmB,CAAC,QAAQ,CAAC;UACU,mBAAmB,CAAC,MAAM,CAAC;WACxB,mBAAmB,CAAC,OAAO,CAAC;YAItE,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;YAI7B,mBAAmB,CAAC,QAAQ,CAAC;gBAI7B,mBAAmB,CAAC,YAAY,CAAC;oBAIjC,mBAAmB,CAAC,gBAAgB,CAAC;EAC1C,CAAC;AAEH,eAAO,MAAM,iBAAiB;iBAMvB,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;gBACgB,KAAK,CACxE,mBAAmB,CAAC,mBAAmB,CAAC,CACzC;UACoC,KAAK,CACxC,mBAAmB,CAAC,aAAa,CAAC,CACnC;WAC6C,KAAK,CACjD,mBAAmB,CAAC,cAAc,CAAC,CACpC;EACD,CAAC;AAmBH,YAAY,EACV,mBAAmB,EACnB,SAAS,EACT,mBAAmB,EACnB,sBAAsB,EACtB,oBAAoB,EACpB,mBAAmB,EACnB,aAAa,EACb,cAAc,GACf,MAAM,2DAA2D,CAAC;AAEnE,eAAO,MAAM,cAAc;YAAW,mBAAmB;;CAiQxD,CAAC"}

package/lib/components/Charts/UniversalChart/UniversalChart.js

@@ -17,6 +17,7 @@ var _LineChart = require("../LineChart");
 var _SankeyChart = require("../SankeyChart");
 var _SpiderChart = require("../SpiderChart");
 var _StackedBarChart = require("../StackedBarChart");
+var _StackedBarLineChart = require("../StackedBarLineChart");
 var _EmptyState = require("../../EmptyState");
 var _UniversalChartModule = _interopRequireDefault(require("./UniversalChart.module.css"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -50,12 +51,17 @@ const CHART_KIND_OPTIONS = exports.CHART_KIND_OPTIONS = Object.freeze({
   stackedBar: {
     key: 'stackedBar',
     label: 'Stacked Bar Chart'
+  },
+  stackedBarLine: {
+    key: 'stackedBarLine',
+    label: 'Stacked Bar + Line Chart'
   }
 });
 const CHART_KIND_GROUPS = exports.CHART_KIND_GROUPS = Object.freeze({
   CATEGORICAL: [CHART_KIND_OPTIONS.column, CHART_KIND_OPTIONS.line, CHART_KIND_OPTIONS.stackedBar, CHART_KIND_OPTIONS.spider],
   PROPORTION: [CHART_KIND_OPTIONS.donut, CHART_KIND_OPTIONS.funnel],
-  FLOW: [CHART_KIND_OPTIONS.sankey]
+  FLOW: [CHART_KIND_OPTIONS.sankey],
+  COMBO: [CHART_KIND_OPTIONS.stackedBarLine]
 });
 const sortSeriesDescending = series => series.map(item => ({
   ...item,
@@ -101,7 +107,9 @@ const UniversalChart = props => {
         label
       };
     });
-    return options.length > 0 ? options : undefined;
+    // Hide the switcher when there's only one option (or none) — a single-option
+    // dropdown is a no-op and confuses users.
+    return options.length > 1 ? options : undefined;
   }, [showChartKindSwitcher, chartKindOptions, chartKind]);
   const handleChartKindSelect = React.useCallback(option => {
     onChartKindChange?.(option.key);
@@ -255,6 +263,23 @@ const UniversalChart = props => {
           classNames: responsiveClassNames
         });
       }
+    case 'stackedBarLine':
+      {
+        const {
+          chartKind: _chartKind,
+          showChartKindSwitcher: _showChartKindSwitcher,
+          chartKindOptions: _chartKindOptions,
+          onChartKindChange: _onChartKindChange,
+          responsive: _responsive,
+          ...rest
+        } = props;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackedBarLineChart.StackedBarLineChart, {
+          ...rest,
+          chart: responsiveChart,
+          headerActions: combinedHeaderActions,
+          classNames: responsiveClassNames
+        });
+      }
     default:
       {
         const _exhaustive = props;

package/lib/components/Charts/UniversalChart/UniversalChart.types.d.ts

@@ -5,17 +5,19 @@ import type { LineChartProps } from '../../../components/Charts/LineChart';
 import type { SankeyChartProps } from '../../../components/Charts/SankeyChart';
 import type { SpiderChartProps } from '../../../components/Charts/SpiderChart';
 import type { StackedBarChartProps } from '../../../components/Charts/StackedBarChart';
-export type ChartKind = 'column' | 'line' | 'donut' | 'funnel' | 'sankey' | 'spider' | 'stackedBar';
+import type { StackedBarLineChartProps } from '../../../components/Charts/StackedBarLineChart';
+export type ChartKind = 'column' | 'line' | 'donut' | 'funnel' | 'sankey' | 'spider' | 'stackedBar' | 'stackedBarLine';
 export type CategoricalChartKind = 'column' | 'line' | 'stackedBar' | 'spider';
 export type ProportionChartKind = 'donut' | 'funnel';
 export type FlowChartKind = 'sankey';
+export type ComboChartKind = 'stackedBarLine';
 export interface ChartKindOptionType<K extends ChartKind = ChartKind> {
     key: K;
     label: string;
 }
 export interface ChartKindSelectorProps {
     showChartKindSwitcher?: boolean;
-    chartKindOptions?: Array<ChartKindOptionType<CategoricalChartKind>> | Array<ChartKindOptionType<ProportionChartKind>> | Array<ChartKindOptionType<FlowChartKind>>;
+    chartKindOptions?: Array<ChartKindOptionType<CategoricalChartKind>> | Array<ChartKindOptionType<ProportionChartKind>> | Array<ChartKindOptionType<FlowChartKind>> | Array<ChartKindOptionType<ComboChartKind>>;
     onChartKindChange?: (chartKind: ChartKind) => void;
     responsive?: boolean;
 }
@@ -33,5 +35,7 @@ export type UniversalChartProps = (({
     chartKind: 'spider';
 } & SpiderChartProps) | ({
     chartKind: 'stackedBar';
-} & StackedBarChartProps)) & ChartKindSelectorProps;
+} & StackedBarChartProps) | ({
+    chartKind: 'stackedBarLine';
+} & StackedBarLineChartProps)) & ChartKindSelectorProps;
 //# sourceMappingURL=UniversalChart.types.d.ts.map

package/lib/components/Charts/UniversalChart/UniversalChart.types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalChart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,uCAAuC,CAAC;AAGhF,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,CAAC;AAEjB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;AAErC,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAClE,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EACb,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC,GAChD,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,GAC/C,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,CAAC;IAC9C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAC9B,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,GAAG,cAAc,CAAC,GACtC,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAC,GACxC,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAC,GAAG,oBAAoB,CAAC,CACrD,GACC,sBAAsB,CAAC"}
+{"version":3,"file":"UniversalChart.types.d.ts","sourceRoot":"","sources":["../../../../src/components/Charts/UniversalChart/UniversalChart.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,kCAAkC,CAAC;AACtE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,iCAAiC,CAAC;AACpE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,gBAAgB,EAAC,MAAM,mCAAmC,CAAC;AACxE,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,uCAAuC,CAAC;AAChF,OAAO,KAAK,EAAC,wBAAwB,EAAC,MAAM,2CAA2C,CAAC;AAGxF,MAAM,MAAM,SAAS,GACjB,QAAQ,GACR,MAAM,GACN,OAAO,GACP,QAAQ,GACR,QAAQ,GACR,QAAQ,GACR,YAAY,GACZ,gBAAgB,CAAC;AAErB,MAAM,MAAM,oBAAoB,GAAG,QAAQ,GAAG,MAAM,GAAG,YAAY,GAAG,QAAQ,CAAC;AAC/E,MAAM,MAAM,mBAAmB,GAAG,OAAO,GAAG,QAAQ,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,QAAQ,CAAC;AACrC,MAAM,MAAM,cAAc,GAAG,gBAAgB,CAAC;AAE9C,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,SAAS,GAAG,SAAS;IAClE,GAAG,EAAE,CAAC,CAAC;IACP,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,sBAAsB;IACrC,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,gBAAgB,CAAC,EACb,KAAK,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC,GAChD,KAAK,CAAC,mBAAmB,CAAC,mBAAmB,CAAC,CAAC,GAC/C,KAAK,CAAC,mBAAmB,CAAC,aAAa,CAAC,CAAC,GACzC,KAAK,CAAC,mBAAmB,CAAC,cAAc,CAAC,CAAC,CAAC;IAC/C,iBAAiB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IACnD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,mBAAmB,GAAG,CAC9B,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,MAAM,CAAA;CAAC,GAAG,cAAc,CAAC,GACtC,CAAC;IAAC,SAAS,EAAE,OAAO,CAAA;CAAC,GAAG,eAAe,CAAC,GACxC,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,QAAQ,CAAA;CAAC,GAAG,gBAAgB,CAAC,GAC1C,CAAC;IAAC,SAAS,EAAE,YAAY,CAAA;CAAC,GAAG,oBAAoB,CAAC,GAClD,CAAC;IAAC,SAAS,EAAE,gBAAgB,CAAA;CAAC,GAAG,wBAAwB,CAAC,CAC7D,GACC,sBAAsB,CAAC"}

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

@@ -7,5 +7,6 @@ export * from '../../components/Charts/LineChart';
 export * from '../../components/Charts/SankeyChart';
 export * from '../../components/Charts/SpiderChart';
 export * from '../../components/Charts/StackedBarChart';
+export * from '../../components/Charts/StackedBarLineChart';
 export * from '../../components/Charts/UniversalChart';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,sCAAsC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,kCAAkC,CAAC;AACjD,cAAc,mCAAmC,CAAC;AAClD,cAAc,iCAAiC,CAAC;AAChD,cAAc,mCAAmC,CAAC;AAClD,cAAc,mCAAmC,CAAC;AAClD,cAAc,uCAAuC,CAAC;AACtD,cAAc,2CAA2C,CAAC;AAC1D,cAAc,sCAAsC,CAAC"}

package/lib/components/Charts/index.js

@@ -102,6 +102,17 @@ Object.keys(_StackedBarChart).forEach(function (key) {
     }
   });
 });
+var _StackedBarLineChart = require("./StackedBarLineChart");
+Object.keys(_StackedBarLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StackedBarLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StackedBarLineChart[key];
+    }
+  });
+});
 var _UniversalChart = require("./UniversalChart");
 Object.keys(_UniversalChart).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -7,5 +7,6 @@ export * from '../../utils/charts/lineChart';
 export * from '../../utils/charts/sankeyChart';
 export * from '../../utils/charts/spiderChart';
 export * from '../../utils/charts/stackedBarChart';
+export * from '../../utils/charts/stackedBarLineChart';
 export * from '../../utils/charts/typography';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,6BAA6B,CAAC"}

package/lib/utils/charts/index.js

@@ -102,6 +102,17 @@ Object.keys(_stackedBarChart).forEach(function (key) {
     }
   });
 });
+var _stackedBarLineChart = require("./stackedBarLineChart");
+Object.keys(_stackedBarLineChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _stackedBarLineChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _stackedBarLineChart[key];
+    }
+  });
+});
 var _typography = require("./typography");
 Object.keys(_typography).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;

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

@@ -0,0 +1,3 @@
+import type { ChartOptions } from '../../types/charts';
+export declare const getStackedBarLineChartOptions: () => ChartOptions;
+//# sourceMappingURL=stackedBarLineChart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stackedBarLineChart.d.ts","sourceRoot":"","sources":["../../../src/utils/charts/stackedBarLineChart.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,kBAAkB,CAAC;AAanD,eAAO,MAAM,6BAA6B,QAAO,YA+D/C,CAAC"}

package/lib/utils/charts/stackedBarLineChart.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getStackedBarLineChartOptions = void 0;
+var _color = require("../../styles/variables/_color");
+var _charts = require("./charts");
+var _columnChart = require("./columnChart");
+var _helpers = require("./helpers");
+const getStackedBarLineChartOptions = () => ({
+  ..._charts.commonChartOptions,
+  chart: {
+    ..._charts.commonChartOptions.chart,
+    type: 'column'
+  },
+  legend: {
+    ..._charts.commonChartOptions.legend,
+    ..._helpers.bottomLegendRow,
+    symbolWidth: 18
+  },
+  xAxis: {
+    ..._charts.commonChartOptions.xAxis,
+    labels: {
+      style: _helpers.xAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.xAxisTitleStyle
+    },
+    lineColor: _color.colorBorderPrimary
+  },
+  // Primary axis on the left and a linked mirror axis on the right. Both
+  // render the same scale (`linkedTo: 0`), so consumers see the y-axis
+  // labels on both edges of the plot. The right axis hides its title and
+  // grid lines to avoid duplication with the primary.
+  yAxis: [{
+    labels: {
+      align: 'right',
+      distance: 12,
+      style: _helpers.yAxisLabelStyle
+    },
+    title: {
+      margin: 12,
+      style: _helpers.yAxisTitleStyle
+    }
+  }, {
+    opposite: true,
+    linkedTo: 0,
+    gridLineWidth: 0,
+    labels: {
+      align: 'left',
+      distance: 12,
+      style: _helpers.yAxisLabelStyle
+    },
+    title: {
+      text: undefined
+    }
+  }],
+  plotOptions: {
+    column: {
+      stacking: 'normal',
+      pointWidth: _columnChart.columnPlotWidth
+    }
+  },
+  drilldown: {
+    activeAxisLabelStyle: _helpers.activeLabelStyle,
+    activeDataLabelStyle: _helpers.activeLabelStyle,
+    breadcrumbs: {
+      floating: true
+    }
+  }
+});
+exports.getStackedBarLineChartOptions = getStackedBarLineChartOptions;

package/mcp/package.json

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