@mittwald/flow-react-components 1.3.0-next.5 → 1.3.0-next.7

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs

@@ -15,7 +15,7 @@ import { TypedChartLegend } from "./components/ChartLegend/ChartLegend.mjs";
 import { TypedChartTooltip } from "./components/ChartTooltip/types.mjs";
 import { TypedLine } from "./components/Line/Line.mjs";
 import clsx from "clsx";
-import { isValidElement, useMemo } from "react";
+import { isValidElement, useId, useMemo } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ComposedChart, ResponsiveContainer } from "recharts";
 //#region src/components/CartesianChart/CartesianChart.tsx
@@ -32,7 +32,11 @@ var CartesianChart = (props) => {
 		if (!emptyView) return;
 		return null;
 	}, [emptyView]);
-	const contextValue = useMemo(() => ({ layout }), [layout]);
+	const chartId = useId().replaceAll(/[^\w-]/g, "");
+	const contextValue = useMemo(() => ({
+		layout,
+		stackIdPrefix: `${chartId}-`
+	}), [layout, chartId]);
 	return /* @__PURE__ */ jsx(CartesianChartContextProvider, {
 		value: contextValue,
 		children: /* @__PURE__ */ jsx(Wrap, {

package/dist/js/packages/components/src/components/CartesianChart/CartesianChart.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const contextValue = useMemo(() => ({ layout }), [layout]);\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAuEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,eAAe,eAAe,EAAE,OAAO,IAAI,CAAC,MAAM,CAAC;CAEzD,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}
+{"version":3,"file":"CartesianChart.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/CartesianChart.tsx"],"sourcesContent":["import { ComposedChart, ResponsiveContainer } from \"recharts\";\nimport {\n  type ComponentProps,\n  type ComponentType,\n  type FC,\n  isValidElement,\n  type PropsWithChildren,\n  type ReactNode,\n  useId,\n  useMemo,\n} from \"react\";\nimport clsx from \"clsx\";\nimport styles from \"./CartesianChart.module.scss\";\nimport { useChartClipRect } from \"@/components/CartesianChart/hooks/useChartClipRect\";\nimport DivView from \"@/views/DivView\";\nimport Wrap from \"@/components/Wrap\";\nimport type {\n  CartesianChartLayout,\n  ChartDataValue,\n  DataKeyProp,\n} from \"@/components/CartesianChart/types\";\nimport { CartesianChartContextProvider } from \"@/components/CartesianChart/context\";\nimport { TypedArea } from \"@/components/CartesianChart/components/Area\";\nimport { TypedBar } from \"@/components/CartesianChart/components/Bar\";\nimport { TypedXAxis } from \"@/components/CartesianChart/components/XAxis\";\nimport { TypedYAxis } from \"@/components/CartesianChart/components/YAxis\";\nimport { TypedChartGrid } from \"@/components/CartesianChart/components/ChartGrid\";\nimport { TypedChartLegend } from \"@/components/CartesianChart/components/ChartLegend\";\nimport { TypedChartTooltip } from \"@/components/CartesianChart/components/ChartTooltip\";\nimport { TypedLine } from \"@/components/CartesianChart/components/Line\";\nimport { useWarnDeprecation } from \"@/components/DeprecationWarningProvider\";\n\n/** @deprecated Use a ReactNode instead */\nexport interface CartesianChartEmptyViewProps {\n  data?: ComponentProps<typeof ComposedChart>[\"data\"];\n}\n\nexport interface CartesianChartProps<TData = ChartDataValue>\n  extends\n    Pick<\n      ComponentProps<typeof ComposedChart>,\n      \"className\" | \"syncId\" | \"syncMethod\"\n    >,\n    PropsWithChildren {\n  /** The data points rendered by the chart. */\n  data?: TData[];\n\n  /** The height of the chart. */\n  height?: string;\n\n  /**\n   * The orientation of the axes and graphical items. `\"horizontal\"` puts the\n   * category axis on the x-axis — bars grow upwards. `\"vertical\"` puts it on\n   * the y-axis — bars grow to the side. `XAxis` and `YAxis` follow the layout\n   * on their own; only the `dataKey` moves to whichever axis is the categorical\n   * one.\n   *\n   * @default \"horizontal\"\n   */\n  layout?: CartesianChartLayout;\n\n  /** View that is provided when data is empty/undefined */\n  emptyView?: ReactNode;\n\n  /**\n   * Allow the height controlling container to set flex-grow: 1. Can only be\n   * used in combination with `height`\n   */\n  flexGrow?: boolean;\n}\n\n/** @flr-generate all */\nexport const CartesianChart: FC<CartesianChartProps> = (props) => {\n  const {\n    children,\n    data,\n    className,\n    height,\n    flexGrow,\n    emptyView,\n    layout = \"horizontal\",\n    ...rest\n  } = props;\n  const warnDeprecation = useWarnDeprecation();\n\n  const { viewDimensions, ref: containerRef } = useChartClipRect();\n\n  const showEmptyView = !!((!data || data.length === 0) && emptyView);\n  const rootClassName = clsx(\n    styles.cartesianChart,\n    showEmptyView && styles.emptyView,\n    className,\n  );\n  const usesDeprecatedEmptyView = !!emptyView && !isValidElement(emptyView);\n\n  if (usesDeprecatedEmptyView) {\n    warnDeprecation(\n      \"CartesianChart: emptyView as a non-element is deprecated and will be removed in a future release. Please provide an element as emptyView.\",\n    );\n  }\n\n  const emptyElement = useMemo(() => {\n    if (isValidElement(emptyView)) {\n      return emptyView;\n    }\n\n    if (!emptyView) {\n      return;\n    }\n\n    return null;\n  }, [emptyView]);\n\n  const chartId = useId().replaceAll(/[^\\w-]/g, \"\");\n  const contextValue = useMemo(\n    () => ({ layout, stackIdPrefix: `${chartId}-` }),\n    [layout, chartId],\n  );\n\n  return (\n    <CartesianChartContextProvider value={contextValue}>\n      <Wrap if={height}>\n        <div style={{ height, flex: flexGrow ? 1 : undefined }}>\n          <ResponsiveContainer\n            initialDimension={{\n              // fix warning on initial render\n              width: 1,\n              height: 1,\n            }}\n            width={height ? undefined : \"100%\"}\n            aspect={height ? undefined : 3}\n            ref={containerRef}\n          >\n            <ComposedChart\n              data={data}\n              className={rootClassName}\n              layout={layout}\n              {...rest}\n            >\n              {children}\n              {showEmptyView && viewDimensions && (\n                <foreignObject {...viewDimensions}>\n                  <DivView className={styles.emptyViewContainer}>\n                    {emptyElement}\n                  </DivView>\n                </foreignObject>\n              )}\n            </ComposedChart>\n          </ResponsiveContainer>\n        </div>\n      </Wrap>\n    </CartesianChartContextProvider>\n  );\n};\n\nexport const typedCartesianChart = <\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  TData extends ChartDataValue<any> = ChartDataValue<any>,\n  XAxisDataKey extends DataKeyProp<TData> = DataKeyProp<TData>,\n>() => ({\n  Chart: CartesianChart as ComponentType<CartesianChartProps<TData>>,\n  Area: TypedArea<TData>(),\n  Bar: TypedBar<TData>(),\n  XAxis: TypedXAxis<TData, XAxisDataKey>(),\n  YAxis: TypedYAxis<TData>(),\n  Grid: TypedChartGrid(),\n  Legend: TypedChartLegend(),\n  Tooltip: TypedChartTooltip<TData, XAxisDataKey>(),\n  Line: TypedLine<TData>(),\n});\n\nexport default CartesianChart;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwEA,IAAa,kBAA2C,UAAU;CAChE,MAAM,EACJ,UACA,MACA,WACA,QACA,UACA,WACA,SAAS,cACT,GAAG,SACD;CACJ,MAAM,kBAAkB,mBAAmB;CAE3C,MAAM,EAAE,gBAAgB,KAAK,iBAAiB,iBAAiB;CAE/D,MAAM,gBAAgB,CAAC,GAAG,CAAC,QAAQ,KAAK,WAAW,MAAM;CACzD,MAAM,gBAAgB,KACpB,8BAAO,gBACP,iBAAiB,8BAAO,WACxB,SACF;CAGA,IAFgC,CAAC,CAAC,aAAa,CAAC,eAAe,SAAS,GAGtE,gBACE,2IACF;CAGF,MAAM,eAAe,cAAc;EACjC,IAAI,eAAe,SAAS,GAC1B,OAAO;EAGT,IAAI,CAAC,WACH;EAGF,OAAO;CACT,GAAG,CAAC,SAAS,CAAC;CAEd,MAAM,UAAU,MAAM,CAAC,CAAC,WAAW,WAAW,EAAE;CAChD,MAAM,eAAe,eACZ;EAAE;EAAQ,eAAe,GAAG,QAAQ;CAAG,IAC9C,CAAC,QAAQ,OAAO,CAClB;CAEA,OACE,oBAAC,+BAAD;EAA+B,OAAO;EACpC,UAAA,oBAAC,MAAD;GAAM,IAAI;GACR,UAAA,oBAAC,OAAD;IAAK,OAAO;KAAE;KAAQ,MAAM,WAAW,IAAI,KAAA;IAAU;IACnD,UAAA,oBAAC,qBAAD;KACE,kBAAkB;MAEhB,OAAO;MACP,QAAQ;KACV;KACA,OAAO,SAAS,KAAA,IAAY;KAC5B,QAAQ,SAAS,KAAA,IAAY;KAC7B,KAAK;KAEL,UAAA,qBAAC,eAAD;MACQ;MACN,WAAW;MACH;MACR,GAAI;MAJN,UAAA,CAMG,UACA,iBAAiB,kBAChB,oBAAC,iBAAD;OAAe,GAAI;OACjB,UAAA,oBAAC,SAAD;QAAS,WAAW,8BAAO;QACxB,UAAA;OACM,CAAA;MACI,CAAA,CAEJ;;IACI,CAAA;GAClB,CAAA;EACD,CAAA;CACuB,CAAA;AAEnC;AAEA,IAAa,6BAIL;CACN,OAAO;CACP,MAAM,UAAiB;CACvB,KAAK,SAAgB;CACrB,OAAO,WAAgC;CACvC,OAAO,WAAkB;CACzB,MAAM,eAAe;CACrB,QAAQ,iBAAiB;CACzB,SAAS,kBAAuC;CAChD,MAAM,UAAiB;AACzB"}

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs

@@ -4,14 +4,16 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { AreaDot } from "../AreaDot/AreaDot.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
 //#region src/components/CartesianChart/components/Area/Area.tsx
 /** @flr-generate all */
 var Area = (props) => {
-	const { color: colorFromProps = "sea-green", stackId = 1, fillOpacity = 1, ...rest } = props;
+	const { color: colorFromProps = "sea-green", stackId: stackIdFromProps = 1, fillOpacity = 1, ...rest } = props;
 	const tokens = useDesignTokens();
+	const stackId = useScopedStackId(stackIdFromProps);
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	return /* @__PURE__ */ jsx(Recharts.Area, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,

package/dist/js/packages/components/src/components/CartesianChart/components/Area/Area.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n  Recharts.AreaProps,\n  | \"className\"\n  | \"stackId\"\n  | \"fillOpacity\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"type\"\n  | \"unit\"\n> & {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n  AreaPropsByDataKey<TData> | AreaPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color: colorFromProps = \"sea-green\",\n    stackId = 1,\n    fillOpacity = 1,\n    ...rest\n  } = props;\n\n  const tokens = useDesignTokens();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Area\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={<AreaDot color={color} />}\n      fill={color}\n      stroke={tokens.area[\"border-color\"].value}\n      strokeWidth={tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n  Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":";;;;;;;;;;;AA2CA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,UAAU,GACV,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;CAE/B,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}
+{"version":3,"file":"Area.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Area/Area.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport { AreaDot } from \"../AreaDot\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype AreaBaseProps = Pick<\n  Recharts.AreaProps,\n  | \"className\"\n  | \"stackId\"\n  | \"fillOpacity\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"type\"\n  | \"unit\"\n> & {\n  /** The color of the area. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface AreaPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends AreaBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface AreaPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends AreaBaseProps, DataKeyWithLabel<TData> {}\n\nexport type AreaProps<TData extends ChartDataValue = ChartDataValue> =\n  AreaPropsByDataKey<TData> | AreaPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Area: FC<AreaProps> = (props) => {\n  const {\n    color: colorFromProps = \"sea-green\",\n    stackId: stackIdFromProps = 1,\n    fillOpacity = 1,\n    ...rest\n  } = props;\n\n  const tokens = useDesignTokens();\n  const stackId = useScopedStackId(stackIdFromProps);\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  return (\n    <Recharts.Area\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      stackId={stackId}\n      fillOpacity={fillOpacity}\n      {...rest}\n      activeDot={<AreaDot color={color} />}\n      fill={color}\n      stroke={tokens.area[\"border-color\"].value}\n      strokeWidth={tokens.area[\"border-width\"].value}\n    />\n  );\n};\n\nexport const TypedArea = <TData extends ChartDataValue = ChartDataValue>() =>\n  Area as ComponentType<AreaPropsByDataKeyProp<TData>>;\n\nexport default Area;\n"],"mappings":";;;;;;;;;;;;AA4CA,IAAa,QAAuB,UAAU;CAC5C,MAAM,EACJ,OAAO,iBAAiB,aACxB,SAAS,mBAAmB,GAC5B,cAAc,GACd,GAAG,SACD;CAEJ,MAAM,SAAS,gBAAgB;CAC/B,MAAM,UAAU,iBAAiB,gBAAgB;CAEjD,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,OACE,oBAAC,SAAS,MAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EACpD;EACI;EACb,GAAI;EACJ,WAAW,oBAAC,SAAD,EAAgB,MAAQ,CAAA;EACnC,MAAM;EACN,QAAQ,OAAO,KAAK,eAAe,CAAC;EACpC,aAAa,OAAO,KAAK,eAAe,CAAC;CAC1C,CAAA;AAEL;AAEA,IAAa,kBACX"}

package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs

@@ -4,6 +4,7 @@ import { useDesignTokens } from "../../../../lib/theming/hooks/useDesignTokens.m
 import { useCartesianChartContext } from "../../context.mjs";
 import { isCategoricalColor } from "../../../../lib/tokens/isCategoricalColor.mjs";
 import { isDataKeyWithLabel } from "../../types.mjs";
+import { useScopedStackId } from "../../hooks/useScopedStackId.mjs";
 import "react";
 import { jsx } from "react/jsx-runtime";
 import * as Recharts from "recharts";
@@ -13,9 +14,10 @@ var Bar = (props) => {
 	const { color: colorFromProps = "sea-green", ...rest } = props;
 	const tokens = useDesignTokens();
 	const { layout } = useCartesianChartContext();
+	const stackId = useScopedStackId(props.stackId);
 	const color = isCategoricalColor(colorFromProps) ? `var(--color--categorical--${colorFromProps})` : colorFromProps;
 	const cornerRadius = parseInt(tokens.bar["corner-radius"].value);
-	const radius = props.stackId !== void 0 ? 0 : layout === "vertical" ? [
+	const radius = layout === "vertical" ? [
 		0,
 		cornerRadius,
 		cornerRadius,
@@ -26,11 +28,18 @@ var Bar = (props) => {
 		0,
 		0
 	];
-	return /* @__PURE__ */ jsx(Recharts.Bar, {
+	const bar = /* @__PURE__ */ jsx(Recharts.Bar, {
 		name: isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey,
 		...rest,
+		stackId,
 		fill: color,
-		radius
+		radius: stackId === void 0 ? radius : 0
+	});
+	if (stackId === void 0) return bar;
+	return /* @__PURE__ */ jsx(Recharts.BarStack, {
+		stackId,
+		radius,
+		children: bar
 	});
 };
 var TypedBar = () => Bar;

package/dist/js/packages/components/src/components/CartesianChart/components/Bar/Bar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n  Recharts.BarProps,\n  | \"className\"\n  | \"stackId\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"unit\"\n  | \"barSize\"\n  | \"maxBarSize\"\n  | \"minPointSize\"\n> & {\n  /** The color of the bar. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n  BarPropsByDataKey<TData> | BarPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n  const radius: Recharts.BarProps[\"radius\"] =\n    props.stackId !== undefined\n      ? 0\n      : layout === \"vertical\"\n        ? [0, cornerRadius, cornerRadius, 0]\n        : [cornerRadius, cornerRadius, 0, 0];\n\n  return (\n    <Recharts.Bar\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      {...rest}\n      fill={color}\n      radius={radius}\n    />\n  );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n  Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;AA4CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAE5C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,MAAM,YAAY,KAAA,IACd,IACA,WAAW,aACT;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEzC,OACE,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACJ,MAAM;EACE;CACT,CAAA;AAEL;AAEA,IAAa,iBACX"}
+{"version":3,"file":"Bar.mjs","names":[],"sources":["../../../../../../../../../src/components/CartesianChart/components/Bar/Bar.tsx"],"sourcesContent":["import { type ComponentType, type FC } from \"react\";\nimport * as Recharts from \"recharts\";\nimport type { CategoricalWithCustomColor } from \"@/lib/tokens/CategoricalColors\";\nimport { isCategoricalColor } from \"@/lib/tokens/isCategoricalColor\";\nimport {\n  type ChartDataValue,\n  type DataKeyProp,\n  type DataKeyWithLabel,\n  isDataKeyWithLabel,\n} from \"@/components/CartesianChart/types\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\nimport { useScopedStackId } from \"@/components/CartesianChart/hooks/useScopedStackId\";\nimport { useDesignTokens } from \"@/lib/theming\";\n\ntype BarBaseProps = Pick<\n  Recharts.BarProps,\n  | \"className\"\n  | \"stackId\"\n  | \"key\"\n  | \"xAxisId\"\n  | \"yAxisId\"\n  | \"unit\"\n  | \"barSize\"\n  | \"maxBarSize\"\n  | \"minPointSize\"\n> & {\n  /** The color of the bar. @default \"sea-green\" */\n  color?: CategoricalWithCustomColor;\n};\n\nexport interface BarPropsByDataKeyProp<\n  TData extends ChartDataValue = ChartDataValue,\n> extends BarBaseProps {\n  dataKey: DataKeyProp<TData>;\n}\n\nexport interface BarPropsByDataKey<\n  TData extends ChartDataValue = ChartDataValue,\n>\n  extends BarBaseProps, DataKeyWithLabel<TData> {}\n\nexport type BarProps<TData extends ChartDataValue = ChartDataValue> =\n  BarPropsByDataKey<TData> | BarPropsByDataKeyProp<TData>;\n\n/** @flr-generate all */\nexport const Bar: FC<BarProps> = (props) => {\n  const { color: colorFromProps = \"sea-green\", ...rest } = props;\n\n  const tokens = useDesignTokens();\n  const { layout } = useCartesianChartContext();\n  const stackId = useScopedStackId(props.stackId);\n\n  const color = isCategoricalColor(colorFromProps)\n    ? `var(--color--categorical--${colorFromProps})`\n    : colorFromProps;\n\n  const cornerRadius = parseInt(tokens.bar[\"corner-radius\"].value);\n  const radius: Recharts.BarProps[\"radius\"] =\n    layout === \"vertical\"\n      ? [0, cornerRadius, cornerRadius, 0]\n      : [cornerRadius, cornerRadius, 0, 0];\n\n  const bar = (\n    <Recharts.Bar\n      name={isDataKeyWithLabel(props) ? props.dataKeyLabel : props.dataKey}\n      {...rest}\n      stackId={stackId}\n      fill={color}\n      radius={stackId === undefined ? radius : 0}\n    />\n  );\n\n  if (stackId === undefined) {\n    return bar;\n  }\n\n  // Every Bar of a stack renders its own BarStack, because a Bar cannot know\n  // its siblings — they all describe the same clip path, so the duplicates are\n  // redundant rather than conflicting.\n  return (\n    <Recharts.BarStack stackId={stackId} radius={radius}>\n      {bar}\n    </Recharts.BarStack>\n  );\n};\n\nexport const TypedBar = <TData extends ChartDataValue = ChartDataValue>() =>\n  Bar as ComponentType<BarPropsByDataKeyProp<TData>>;\n\nexport default Bar;\n"],"mappings":";;;;;;;;;;;;AA6CA,IAAa,OAAqB,UAAU;CAC1C,MAAM,EAAE,OAAO,iBAAiB,aAAa,GAAG,SAAS;CAEzD,MAAM,SAAS,gBAAgB;CAC/B,MAAM,EAAE,WAAW,yBAAyB;CAC5C,MAAM,UAAU,iBAAiB,MAAM,OAAO;CAE9C,MAAM,QAAQ,mBAAmB,cAAc,IAC3C,6BAA6B,eAAe,KAC5C;CAEJ,MAAM,eAAe,SAAS,OAAO,IAAI,gBAAgB,CAAC,KAAK;CAC/D,MAAM,SACJ,WAAW,aACP;EAAC;EAAG;EAAc;EAAc;CAAC,IACjC;EAAC;EAAc;EAAc;EAAG;CAAC;CAEvC,MAAM,MACJ,oBAAC,SAAS,KAAV;EACE,MAAM,mBAAmB,KAAK,IAAI,MAAM,eAAe,MAAM;EAC7D,GAAI;EACK;EACT,MAAM;EACN,QAAQ,YAAY,KAAA,IAAY,SAAS;CAC1C,CAAA;CAGH,IAAI,YAAY,KAAA,GACd,OAAO;CAMT,OACE,oBAAC,SAAS,UAAV;EAA4B;EAAiB;EAC1C,UAAA;CACgB,CAAA;AAEvB;AAEA,IAAa,iBACX"}

package/dist/js/packages/components/src/components/CartesianChart/context.mjs

@@ -2,7 +2,10 @@
 /* */
 import { createContext, useContext } from "react";
 //#region src/components/CartesianChart/context.ts
-var cartesianChartContext = createContext({ layout: "horizontal" });
+var cartesianChartContext = createContext({
+	layout: "horizontal",
+	stackIdPrefix: ""
+});
 var useCartesianChartContext = () => useContext(cartesianChartContext);
 var CartesianChartContextProvider = cartesianChartContext.Provider;
 //#endregion

package/dist/js/packages/components/src/components/CartesianChart/context.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n  layout: CartesianChartLayout;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n  layout: \"horizontal\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n  useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAOA,IAAM,wBAAwB,cAAqC,EACjE,QAAQ,aACV,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}
+{"version":3,"file":"context.mjs","names":[],"sources":["../../../../../../../src/components/CartesianChart/context.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { CartesianChartLayout } from \"@/components/CartesianChart/types\";\n\ninterface CartesianChartContext {\n  layout: CartesianChartLayout;\n  /**\n   * Prefix that scopes a stack ID to this chart. Recharts derives DOM IDs from\n   * the stack ID, so two charts on one page sharing a stack ID would otherwise\n   * share their clip paths.\n   */\n  stackIdPrefix: string;\n}\n\nconst cartesianChartContext = createContext<CartesianChartContext>({\n  layout: \"horizontal\",\n  stackIdPrefix: \"\",\n});\n\nexport const useCartesianChartContext = (): CartesianChartContext =>\n  useContext(cartesianChartContext);\n\nexport const CartesianChartContextProvider = cartesianChartContext.Provider;\n"],"mappings":";;;;AAaA,IAAM,wBAAwB,cAAqC;CACjE,QAAQ;CACR,eAAe;AACjB,CAAC;AAED,IAAa,iCACX,WAAW,qBAAqB;AAElC,IAAa,gCAAgC,sBAAsB"}

package/dist/js/packages/components/src/components/CartesianChart/hooks/useScopedStackId.mjs

@@ -0,0 +1,16 @@
+"use client"
+/* */
+import { useCartesianChartContext } from "../context.mjs";
+//#region src/components/CartesianChart/hooks/useScopedStackId.ts
+/**
+* Scopes a stack ID to the surrounding chart, so that charts on the same page
+* using the same stack ID do not share the DOM IDs Recharts derives from it.
+*/
+var useScopedStackId = (stackId) => {
+	const { stackIdPrefix } = useCartesianChartContext();
+	return stackId === void 0 ? void 0 : `${stackIdPrefix}${stackId}`;
+};
+//#endregion
+export { useScopedStackId };
+
+//# sourceMappingURL=useScopedStackId.mjs.map

package/dist/js/packages/components/src/components/CartesianChart/hooks/useScopedStackId.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useScopedStackId.mjs","names":[],"sources":["../../../../../../../../src/components/CartesianChart/hooks/useScopedStackId.ts"],"sourcesContent":["import type { StackId } from \"recharts/types/util/ChartUtils\";\nimport { useCartesianChartContext } from \"@/components/CartesianChart/context\";\n\n/**\n * Scopes a stack ID to the surrounding chart, so that charts on the same page\n * using the same stack ID do not share the DOM IDs Recharts derives from it.\n */\nexport const useScopedStackId = (\n  stackId: StackId | undefined,\n): string | undefined => {\n  const { stackIdPrefix } = useCartesianChartContext();\n  return stackId === undefined ? undefined : `${stackIdPrefix}${stackId}`;\n};\n"],"mappings":";;;;;;;;AAOA,IAAa,oBACX,YACuB;CACvB,MAAM,EAAE,kBAAkB,yBAAyB;CACnD,OAAO,YAAY,KAAA,IAAY,KAAA,IAAY,GAAG,gBAAgB;AAChE"}

package/dist/js/packages/components/src/components/Tooltip/Tooltip.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n  border-radius: var(--tooltip--corner-radius);\n  background-color: var(--tooltip--background-color);\n  color: var(--tooltip--color);\n  font-size: var(--tooltip--font-size);\n  padding-block: var(--tooltip--padding-y);\n  padding-inline: var(--tooltip--padding-x);\n  max-width: var(--tooltip--max-width);\n  transform: translate3d(0, 0, 0);\n  box-shadow: var(--tooltip--box-shadow);\n\n  --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n  /* Placement */\n  &[data-placement=\"top\"] {\n    margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length));\n  }\n\n  &[data-placement=\"bottom\"] {\n    margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length));\n\n    .tip svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  /* Animation */\n\n  &[data-entering] {\n    animation: slide 200ms;\n  }\n\n  &[data-exiting] {\n    animation: slide 200ms reverse ease-in;\n  }\n\n  .tip {\n    width: var(--tooltip--tip-size);\n    height: var(--tooltip--tip-size);\n\n    svg {\n      display: block;\n      fill: var(--tooltip--background-color);\n    }\n  }\n}\n\n@keyframes slide {\n  from {\n    transform: var(--translate-origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"Tooltip.module.mjs","names":[],"sources":["../../../../../../../src/components/Tooltip/Tooltip.module.scss"],"sourcesContent":[".tooltip {\n  border-radius: var(--tooltip--corner-radius);\n  background-color: var(--tooltip--background-color);\n  color: var(--tooltip--color);\n  font-size: var(--tooltip--font-size);\n  padding-block: var(--tooltip--padding-y);\n  padding-inline: var(--tooltip--padding-x);\n  max-width: var(--tooltip--max-width);\n  transform: translate3d(0, 0, 0);\n  box-shadow: var(--tooltip--box-shadow);\n\n  --translate-origin-length: var(--tooltip--tooltip-to-trigger-spacing) / 2;\n\n  /**\n   * React Aria sets `data-placement` once it has computed a position, and\n   * renders the overlay at `top: 0; left: 0` of the viewport until then. It\n   * skips computing one when the tooltip mounts for its exit animation alone –\n   * swapping quickly between neighbouring triggers does that – and never\n   * retries afterwards, so such a tooltip stays parked in the corner for its\n   * whole lifetime. Keep it out of sight instead. `visibility` rather than\n   * `display`, so the overlay stays measurable for the positioning pass.\n   */\n  &:not([data-placement]) {\n    visibility: hidden;\n  }\n\n  /* Placement */\n  &[data-placement=\"top\"] {\n    margin-bottom: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length));\n  }\n\n  &[data-placement=\"bottom\"] {\n    margin-top: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateY(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(180deg);\n    }\n  }\n\n  &[data-placement=\"right\"] {\n    margin-inline-start: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length) * -1);\n\n    .tip svg {\n      transform: rotate(90deg);\n    }\n  }\n\n  &[data-placement=\"left\"] {\n    margin-inline-end: var(--tooltip--tooltip-to-trigger-spacing);\n\n    --translate-origin: translateX(var(--translate-origin-length));\n\n    .tip svg {\n      transform: rotate(-90deg);\n    }\n  }\n\n  /* Animation */\n\n  &[data-entering] {\n    animation: slide 200ms;\n  }\n\n  &[data-exiting] {\n    animation: slide 200ms reverse ease-in;\n  }\n\n  .tip {\n    width: var(--tooltip--tip-size);\n    height: var(--tooltip--tip-size);\n\n    svg {\n      display: block;\n      fill: var(--tooltip--background-color);\n    }\n  }\n}\n\n@keyframes slide {\n  from {\n    transform: var(--translate-origin);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0);\n    opacity: 1;\n  }\n}\n"],"mappings":""}

package/dist/types/components/CartesianChart/context.d.ts

@@ -1,6 +1,12 @@
 import { CartesianChartLayout } from './types';
 interface CartesianChartContext {
     layout: CartesianChartLayout;
+    /**
+     * Prefix that scopes a stack ID to this chart. Recharts derives DOM IDs from
+     * the stack ID, so two charts on one page sharing a stack ID would otherwise
+     * share their clip paths.
+     */
+    stackIdPrefix: string;
 }
 export declare const useCartesianChartContext: () => CartesianChartContext;
 export declare const CartesianChartContextProvider: import('react').Provider<CartesianChartContext>;

package/dist/types/components/CartesianChart/hooks/useScopedStackId.d.ts

@@ -0,0 +1,6 @@
+import { StackId } from 'recharts/types/util/ChartUtils';
+/**
+ * Scopes a stack ID to the surrounding chart, so that charts on the same page
+ * using the same stack ID do not share the DOM IDs Recharts derives from it.
+ */
+export declare const useScopedStackId: (stackId: StackId | undefined) => string | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mittwald/flow-react-components",
-  "version": "1.3.0-next.5",
+  "version": "1.3.0-next.7",
   "type": "module",
   "description": "A React implementation of Flow, mittwald’s design system",
   "homepage": "https://flow.mittwald.de",
@@ -83,9 +83,9 @@
     "@internationalized/string-compiler": "^3.4.1",
     "@lezer/common": "^1.5.2",
     "@lezer/highlight": "^1.2.3",
-    "@mittwald/flow-icons": "^1.3.0-next.5",
+    "@mittwald/flow-icons": "^1.3.0-next.7",
     "@mittwald/password-tools-js": "^3.0.0",
-    "@mittwald/react-tunnel": "^1.3.0-next.5",
+    "@mittwald/react-tunnel": "^1.3.0-next.7",
     "@mittwald/react-use-promise": "^4.2.2",
     "@react-aria/form": "^3.2.1",
     "@react-aria/i18n": "^3.13.1",
@@ -138,12 +138,12 @@
     "@internationalized/date": "^3.12.3",
     "@lezer/generator": "^1.8.0",
     "@lezer/lr": "^1.4.10",
-    "@mittwald/flow-core": "1.3.0-next.5",
-    "@mittwald/flow-design-tokens": "1.3.0-next.5",
-    "@mittwald/flow-icons-base": "1.3.0-next.5",
+    "@mittwald/flow-core": "1.3.0-next.7",
+    "@mittwald/flow-design-tokens": "1.3.0-next.7",
+    "@mittwald/flow-icons-base": "1.3.0-next.7",
     "@mittwald/react-use-promise": "^4.2.2",
     "@mittwald/remote-dom-react": "1.2.2-mittwald.10",
-    "@mittwald/typescript-config": "1.3.0-next.5",
+    "@mittwald/typescript-config": "1.3.0-next.7",
     "@nx/storybook": "^22.7.6",
     "@storybook/addon-a11y": "^10.5.10",
     "@storybook/addon-actions": "^9.0.8",
@@ -195,7 +195,7 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.2",
-    "@mittwald/flow-icons-pro": "1.3.0-next.5",
+    "@mittwald/flow-icons-pro": "1.3.0-next.7",
     "@mittwald/react-use-promise": "^4.2.2",
     "next": "^16.2.3",
     "react": "^19.2.0",
@@ -219,5 +219,5 @@
   "browserslist": [
     "baseline widely available"
   ],
-  "gitHead": "c8e4f215ccb75d2adc587eb03ce056404fe064f4"
+  "gitHead": "7a1338d34258cee44a3fc23c197560b9ae627641"
 }