@ultraviolet/ui 3.8.2 → 3.10.0

package/dist/components/BarChart/Tooltip.js

@@ -1,30 +1,29 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { Text } from "../Text/index.js";
+import { barColorSquare, barTooltipContainer, colorBar } from "./styles.css.js";
 import { cn } from "@ultraviolet/utils";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { Text } from "../Text/index.js";
-import { barColorSquare, colorBar, barTooltipContainer } from "./styles.css.js";
-const BarChartTooltip = ({
-  formattedValue,
-  indexValue,
-  color,
-  className,
-  "data-testid": dataTestId
-}) => /* @__PURE__ */ jsxs("div", { className: cn(className, barTooltipContainer), "data-testid": dataTestId, children: [
-  /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: barColorSquare,
-      style: assignInlineVars({
-        [colorBar]: color
-      })
-    }
-  ) }),
-  /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx(Text, { as: "p", sentiment: "primary", variant: "bodyStronger", children: formattedValue }),
-    /* @__PURE__ */ jsx(Text, { as: "p", variant: "bodySmall", children: indexValue })
-  ] })
-] });
-export {
-  BarChartTooltip
-};
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/BarChart/Tooltip.tsx
+const BarChartTooltip = ({ formattedValue, indexValue, color, className, "data-testid": dataTestId }) => /* @__PURE__ */ jsxs("div", {
+	className: cn(className, barTooltipContainer),
+	"data-testid": dataTestId,
+	children: [/* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", {
+		className: barColorSquare,
+		style: assignInlineVars({ [colorBar]: color })
+	}) }), /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(Text, {
+		as: "p",
+		sentiment: "primary",
+		variant: "bodyStronger",
+		children: formattedValue
+	}), /* @__PURE__ */ jsx(Text, {
+		as: "p",
+		variant: "bodySmall",
+		children: indexValue
+	})] })]
+});
+
+//#endregion
+export { BarChartTooltip };

package/dist/components/BarChart/index.d.ts

@@ -24,6 +24,6 @@ type BarChartProps = {
  * See https://nivo.rocks/bar/ for more information.
  * @experimental This component is experimental and may be subject to breaking changes in the future.
  */
-export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, "data-testid": dataTestId, style, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BarChart: ({ height, margin, data, axisFormatters, tickValues, keys, tooltipFunction, chartProps, className, 'data-testid': dataTestId, style, }: BarChartProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/BarChart/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG9D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,KAAK,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAExC,KAAK,QAAQ,GAAG,WAAW,CACzB,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CACnD,CAAC,YAAY,CAAC,CAAA;AAEf,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CACtB,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,SAAS,CAAC,CACvD,CAAA;IACD,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,eAAe,CAAC,QAAQ,CAAC,KAC7B,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAOD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,GAAI,uIAYtB,aAAa,4CAoDf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarChart/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,QAAQ,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AACvE,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAA;AACzC,OAAO,KAAK,EAAE,GAAG,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG9D,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,OAAO,CAAA;AAI1D,OAAO,EAAE,eAAe,EAAE,MAAM,WAAW,CAAA;AAE3C,KAAK,SAAS,GAAG,WAAW,CAAC,UAAU,CAAC,CAAA;AAExC,KAAK,QAAQ,GAAG,WAAW,CACzB,cAAc,CAAC,OAAO,aAAa,CAAC,CAAC,YAAY,CAAC,CACnD,CAAC,YAAY,CAAC,CAAA;AAEf,KAAK,aAAa,GAAG;IACnB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACxB,MAAM,CAAC,EAAE,GAAG,CAAA;IACZ,IAAI,CAAC,EAAE,QAAQ,EAAE,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CACtB,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,SAAS,CAAC,CACvD,CAAA;IACD,eAAe,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,GAAG,GAAG,GAAG,EAAE,SAAS,CAAC,CAAC,CAAA;IACvD,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,QAAQ,GAAG,MAAM,GAAG,OAAO,GAAG,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAA;IAC3E,IAAI,CAAC,EAAE,MAAM,EAAE,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,eAAe,CAAC,EAAE,CAChB,KAAK,EAAE,eAAe,CAAC,QAAQ,CAAC,KAC7B,cAAc,CAAC,OAAO,eAAe,CAAC,CAAA;IAC3C,UAAU,CAAC,EAAE,OAAO,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;CACtB,CAAA;AAOD;;;;GAIG;AACH,eAAO,MAAM,QAAQ,mMAgEpB,CAAA"}

package/dist/components/BarChart/index.js

@@ -1,80 +1,68 @@
-"use client";
-import { jsx } from "react/jsx-runtime";
-import { ResponsiveBar } from "@nivo/bar";
-import { useTheme } from "@ultraviolet/themes";
-import { useCallback } from "react";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
+import { _objectSpread2 } from "../../_virtual/_@oxc-project_runtime@0.113.0/helpers/objectSpread2.js";
 import { getLegendColor } from "../../helpers/legend.js";
 import { getNivoTheme } from "../../helpers/nivoTheme.js";
 import { BarChartTooltip } from "./Tooltip.js";
-const DEFAULT_MARGIN = { bottom: 50, left: 60, right: 25, top: 50 };
+import { useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useTheme } from "@ultraviolet/themes";
+import { ResponsiveBar } from "@nivo/bar";
+
+//#region src/components/BarChart/index.tsx
+const DEFAULT_MARGIN = {
+	bottom: 50,
+	left: 60,
+	right: 25,
+	top: 50
+};
 const DEFAULT_DATA = [];
 const DEFAULT_AXISFORMATTER = {};
 const DEFAULT_KEYS = ["value"];
-const BarChart = ({
-  height = "537px",
-  // to maintain aspect ratio based on our standard 1074px width,
-  margin = DEFAULT_MARGIN,
-  data = DEFAULT_DATA,
-  axisFormatters = DEFAULT_AXISFORMATTER,
-  tickValues,
-  keys = DEFAULT_KEYS,
-  tooltipFunction,
-  chartProps,
-  className,
-  "data-testid": dataTestId,
-  style
-}) => {
-  const theme = useTheme();
-  const tooltip = useCallback(
-    (props) => {
-      const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
-      return /* @__PURE__ */ jsx(
-        BarChartTooltip,
-        {
-          color,
-          formattedValue,
-          indexValue: indexValue.toString()
-        }
-      );
-    },
-    [tooltipFunction]
-  );
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className,
-      "data-testid": dataTestId,
-      style: { height, ...style },
-      children: /* @__PURE__ */ jsx(
-        ResponsiveBar,
-        {
-          axisBottom: {
-            format: axisFormatters?.bottom,
-            tickPadding: 5,
-            tickRotation: 0,
-            tickSize: 5,
-            tickValues: tickValues?.bottom
-          },
-          axisLeft: {
-            format: axisFormatters?.left,
-            tickPadding: 5,
-            tickRotation: 0,
-            tickSize: 5,
-            tickValues: tickValues?.left
-          },
-          colors: getLegendColor(theme),
-          data,
-          enableLabel: false,
-          keys,
-          margin,
-          theme: getNivoTheme(theme),
-          tooltip,
-          ...chartProps
-        }
-      )
-    }
-  );
-};
-export {
-  BarChart
+/**
+* BarChart component is used to display data in a bar chart format. It uses the Nivo library under the hood.
+* See https://nivo.rocks/bar/ for more information.
+* @experimental This component is experimental and may be subject to breaking changes in the future.
+*/
+const BarChart = ({ height = "537px", margin = DEFAULT_MARGIN, data = DEFAULT_DATA, axisFormatters = DEFAULT_AXISFORMATTER, tickValues, keys = DEFAULT_KEYS, tooltipFunction, chartProps, className, "data-testid": dataTestId, style }) => {
+	const theme = useTheme();
+	const tooltip = useCallback((props) => {
+		const { indexValue, formattedValue, color } = tooltipFunction ? tooltipFunction(props) : props;
+		return /* @__PURE__ */ jsx(BarChartTooltip, {
+			color,
+			formattedValue,
+			indexValue: indexValue.toString()
+		});
+	}, [tooltipFunction]);
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		"data-testid": dataTestId,
+		style: _objectSpread2({ height }, style),
+		children: /* @__PURE__ */ jsx(ResponsiveBar, _objectSpread2({
+			axisBottom: {
+				format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.bottom,
+				tickPadding: 5,
+				tickRotation: 0,
+				tickSize: 5,
+				tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.bottom
+			},
+			axisLeft: {
+				format: axisFormatters === null || axisFormatters === void 0 ? void 0 : axisFormatters.left,
+				tickPadding: 5,
+				tickRotation: 0,
+				tickSize: 5,
+				tickValues: tickValues === null || tickValues === void 0 ? void 0 : tickValues.left
+			},
+			colors: getLegendColor(theme),
+			data,
+			enableLabel: false,
+			keys,
+			margin,
+			theme: getNivoTheme(theme),
+			tooltip
+		}, chartProps))
+	});
 };
+
+//#endregion
+export { BarChart };

package/dist/components/BarChart/styles.css.js

@@ -1,9 +1,9 @@
-/* empty css                          */
+/* empty css                      */
+
+//#region src/components/BarChart/styles.css.ts
 var colorBar = "var(--uv_1eez2qb0)";
 var barTooltipContainer = "uv_1eez2qb1";
 var barColorSquare = "uv_1eez2qb2";
-export {
-  barColorSquare,
-  barTooltipContainer,
-  colorBar
-};
+
+//#endregion
+export { barColorSquare, barTooltipContainer, colorBar };

package/dist/components/BarStack/index.d.ts

@@ -41,6 +41,6 @@ type BarStackProps = {
 /**
  * BarStack is a graphic component that is used to show data in one dimension.
  */
-export declare const BarStack: ({ data, total, className, "data-testid": dataTestId, style, label, labelInformation, legend, size, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BarStack: ({ data, total, className, 'data-testid': dataTestId, style, label, labelInformation, legend, size, }: BarStackProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/BarStack/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarStack/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAA;AAed,KAAK,QAAQ,GAAG;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAChD,WAAW,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC/C,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC7C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,GAAI,sGAUtB,aAAa,4CAkJf,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/BarStack/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,oBAAoB,EACpB,iBAAiB,EACjB,SAAS,EACV,MAAM,OAAO,CAAA;AAed,KAAK,QAAQ,GAAG;IACd;;OAEG;IACH,EAAE,EAAE,MAAM,CAAA;IACV;;OAEG;IACH,KAAK,EAAE,MAAM,CAAA;IACb;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC3C,aAAa,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IACjD,SAAS,CAAC,EAAE,oBAAoB,CAAC,cAAc,CAAC,CAAA;IAChD,WAAW,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC/C,SAAS,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAC7C,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAA;IAChD;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAA;CACpB,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,QAAQ,EAAE,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB;;OAEG;IACH,MAAM,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAC7B,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,CAAA;CAC/C,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ,kKA4JpB,CAAA"}

package/dist/components/BarStack/index.js

@@ -1,157 +1,118 @@
-"use client";
-import { jsxs, jsx } from "react/jsx-runtime";
-import { cn } from "@ultraviolet/utils";
-import { assignInlineVars } from "@vanilla-extract/dynamic";
-import { useMemo, useState } from "react";
-import { Label } from "../Label/index.js";
+'use client';
+import { __name } from "../../_virtual/_rolldown/runtime.js";
 import { Stack } from "../Stack/index.js";
-import { Text } from "../Text/index.js";
 import { Tooltip } from "../Tooltip/index.js";
-import { wrapperBarStack, barStack, barStackText, wrapperWidth, containerBarStack, barStackLegendCircle } from "./styles.css.js";
-const BarStack = ({
-  data,
-  total,
-  className,
-  "data-testid": dataTestId,
-  style,
-  label,
-  labelInformation,
-  legend = "inside",
-  size
-}) => {
-  const computedTotal = useMemo(
-    () => total ?? data.reduce((acc, { value }) => acc + value, 0),
-    [total, data]
-  );
-  const [hoveredBarId, setHoveredBarId] = useState(null);
-  return /* @__PURE__ */ jsxs(Stack, { gap: 1, children: [
-    /* @__PURE__ */ jsxs(Stack, { direction: "column", gap: 0.25, children: [
-      labelInformation ? /* @__PURE__ */ jsxs(Stack, { direction: "row", justifyContent: "space-between", children: [
-        /* @__PURE__ */ jsx(Label, { children: label }),
-        /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "body", children: labelInformation })
-      ] }) : /* @__PURE__ */ jsx(Label, { children: label }),
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(className, containerBarStack),
-          "data-testid": dataTestId,
-          style,
-          children: data.map(
-            ({
-              id,
-              value,
-              text,
-              onClick,
-              onDoubleClick,
-              onKeyDown,
-              onMouseEnter,
-              onMouseLeave,
-              onMouseDown,
-              onMouseUp,
-              tooltip
-            }) => /* @__PURE__ */ jsx(
-              "div",
-              {
-                className: wrapperBarStack,
-                style: assignInlineVars({
-                  [wrapperWidth]: `${value / computedTotal * 100}%`
-                }),
-                children: /* @__PURE__ */ jsx(
-                  Tooltip,
-                  {
-                    text: legend === "outside" ? text : void 0,
-                    visible: hoveredBarId === id,
-                    children: tooltip ? /* @__PURE__ */ jsx(Tooltip, { id: `tooltip-${id}`, text: tooltip ?? text, children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: barStack({ size }),
-                        "data-testid": `content-${id}`,
-                        onClick,
-                        onDoubleClick,
-                        onKeyDown,
-                        onMouseDown,
-                        onMouseEnter: (event) => {
-                          onMouseEnter?.(event);
-                        },
-                        onMouseLeave: (event) => {
-                          onMouseLeave?.(event);
-                        },
-                        onMouseUp,
-                        children: /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            as: "span",
-                            className: barStackText,
-                            prominence: "stronger",
-                            sentiment: "neutral",
-                            variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
-                            whiteSpace: "nowrap",
-                            children: legend === "outside" ? "" : text
-                          }
-                        )
-                      }
-                    ) }) : /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: barStack({ size }),
-                        "data-testid": `content-${id}`,
-                        onClick,
-                        onDoubleClick,
-                        onKeyDown,
-                        onMouseDown,
-                        onMouseEnter,
-                        onMouseLeave,
-                        onMouseUp,
-                        children: /* @__PURE__ */ jsx(
-                          Text,
-                          {
-                            as: "span",
-                            className: barStackText,
-                            prominence: "stronger",
-                            sentiment: "neutral",
-                            variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
-                            whiteSpace: "nowrap",
-                            children: legend === "outside" ? "" : text
-                          }
-                        )
-                      }
-                    )
-                  }
-                )
-              },
-              id
-            )
-          )
-        }
-      )
-    ] }),
-    legend === "outside" ? /* @__PURE__ */ jsx(Stack, { direction: "row", gap: 2, children: data.map(({ text, id }, index) => /* @__PURE__ */ jsxs(
-      Stack,
-      {
-        alignItems: "center",
-        "data-testid": `legend-${id}`,
-        direction: "row",
-        gap: "0.5",
-        onMouseEnter: () => {
-          setHoveredBarId(id);
-        },
-        onMouseLeave: () => setHoveredBarId(null),
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: barStackLegendCircle({
-                child: index % 6
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(Text, { as: "span", sentiment: "neutral", variant: "caption", children: text })
-        ]
-      },
-      id
-    )) }) : null
-  ] });
-};
-export {
-  BarStack
+import { Text } from "../Text/index.js";
+import { Label } from "../Label/index.js";
+import { barStack, barStackLegendCircle, barStackText, containerBarStack, wrapperBarStack, wrapperWidth } from "./styles.css.js";
+import { cn } from "@ultraviolet/utils";
+import { useMemo, useState } from "react";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/components/BarStack/index.tsx
+/**
+* BarStack is a graphic component that is used to show data in one dimension.
+*/
+const BarStack = ({ data, total, className, "data-testid": dataTestId, style, label, labelInformation, legend = "inside", size }) => {
+	const computedTotal = useMemo(() => total !== null && total !== void 0 ? total : data.reduce((acc, { value }) => acc + value, 0), [total, data]);
+	const [hoveredBarId, setHoveredBarId] = useState(null);
+	return /* @__PURE__ */ jsxs(Stack, {
+		gap: 1,
+		children: [/* @__PURE__ */ jsxs(Stack, {
+			direction: "column",
+			gap: .25,
+			children: [labelInformation ? /* @__PURE__ */ jsxs(Stack, {
+				direction: "row",
+				justifyContent: "space-between",
+				children: [/* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					sentiment: "neutral",
+					variant: "body",
+					children: labelInformation
+				})]
+			}) : /* @__PURE__ */ jsx(Label, { children: label }), /* @__PURE__ */ jsx("div", {
+				className: cn(className, containerBarStack),
+				"data-testid": dataTestId,
+				style,
+				children: data.map(({ id, value, text, onClick, onDoubleClick, onKeyDown, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, tooltip }) => /* @__PURE__ */ jsx("div", {
+					className: wrapperBarStack,
+					style: assignInlineVars({ [wrapperWidth]: `${value / computedTotal * 100}%` }),
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						text: legend === "outside" ? text : void 0,
+						visible: hoveredBarId === id,
+						children: tooltip ? /* @__PURE__ */ jsx(Tooltip, {
+							id: `tooltip-${id}`,
+							text: tooltip !== null && tooltip !== void 0 ? tooltip : text,
+							children: /* @__PURE__ */ jsx("div", {
+								className: barStack({ size }),
+								"data-testid": `content-${id}`,
+								onClick,
+								onDoubleClick,
+								onKeyDown,
+								onMouseDown,
+								onMouseEnter: (event) => {
+									onMouseEnter === null || onMouseEnter === void 0 || onMouseEnter(event);
+								},
+								onMouseLeave: (event) => {
+									onMouseLeave === null || onMouseLeave === void 0 || onMouseLeave(event);
+								},
+								onMouseUp,
+								children: /* @__PURE__ */ jsx(Text, {
+									as: "span",
+									className: barStackText,
+									prominence: "stronger",
+									sentiment: "neutral",
+									variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
+									whiteSpace: "nowrap",
+									children: legend === "outside" ? "" : text
+								})
+							})
+						}) : /* @__PURE__ */ jsx("div", {
+							className: barStack({ size }),
+							"data-testid": `content-${id}`,
+							onClick,
+							onDoubleClick,
+							onKeyDown,
+							onMouseDown,
+							onMouseEnter,
+							onMouseLeave,
+							onMouseUp,
+							children: /* @__PURE__ */ jsx(Text, {
+								as: "span",
+								className: barStackText,
+								prominence: "stronger",
+								sentiment: "neutral",
+								variant: size === "small" || size === "xsmall" ? "captionSmallStrong" : "captionStrong",
+								whiteSpace: "nowrap",
+								children: legend === "outside" ? "" : text
+							})
+						})
+					})
+				}, id))
+			})]
+		}), legend === "outside" ? /* @__PURE__ */ jsx(Stack, {
+			direction: "row",
+			gap: 2,
+			children: data.map(({ text, id }, index) => /* @__PURE__ */ jsxs(Stack, {
+				alignItems: "center",
+				"data-testid": `legend-${id}`,
+				direction: "row",
+				gap: "0.5",
+				onMouseEnter: () => {
+					setHoveredBarId(id);
+				},
+				onMouseLeave: () => setHoveredBarId(null),
+				children: [/* @__PURE__ */ jsx("span", { className: barStackLegendCircle({ child: index % 6 }) }), /* @__PURE__ */ jsx(Text, {
+					as: "span",
+					sentiment: "neutral",
+					variant: "caption",
+					children: text
+				})]
+			}, id))
+		}) : null]
+	});
 };
+
+//#endregion
+export { BarStack };

package/dist/components/BarStack/styles.css.js

@@ -1,16 +1,36 @@
-/* empty css                          */
+/* empty css                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
+
+//#region src/components/BarStack/styles.css.ts
 var wrapperWidth = "var(--uv_1s3oplf0)";
 var wrapperBarStack = "uv_1s3oplf1";
-var barStack = createRuntimeFn({ defaultClassName: "uv_1s3oplf2", variantClassNames: { size: { fontSize: "uv_1s3oplf3 var(--uv_theme_rwwhslcr)", large: "uv_1s3oplf4", medium: "uv_1s3oplf5", small: "uv_1s3oplf6", xsmall: "uv_1s3oplf7" } }, defaultVariants: { size: "medium" }, compoundVariants: [] });
+var barStack = createRuntimeFn({
+	defaultClassName: "uv_1s3oplf2",
+	variantClassNames: { size: {
+		fontSize: "uv_1s3oplf3 var(--uv_theme_rwwhslcr)",
+		large: "uv_1s3oplf4",
+		medium: "uv_1s3oplf5",
+		small: "uv_1s3oplf6",
+		xsmall: "uv_1s3oplf7"
+	} },
+	defaultVariants: { size: "medium" },
+	compoundVariants: []
+});
 var barStackText = "uv_1s3oplf8";
 var containerBarStack = "uv_1s3oplf9";
-var barStackLegendCircle = createRuntimeFn({ defaultClassName: "uv_1s3oplfb", variantClassNames: { child: { "0": "uv_1s3oplfc", "1": "uv_1s3oplfd", "2": "uv_1s3oplfe", "3": "uv_1s3oplff", "4": "uv_1s3oplfg", "5": "uv_1s3oplfh" } }, defaultVariants: { child: 0 }, compoundVariants: [] });
-export {
-  barStack,
-  barStackLegendCircle,
-  barStackText,
-  containerBarStack,
-  wrapperBarStack,
-  wrapperWidth
-};
+var barStackLegendCircle = createRuntimeFn({
+	defaultClassName: "uv_1s3oplfb",
+	variantClassNames: { child: {
+		"0": "uv_1s3oplfc",
+		"1": "uv_1s3oplfd",
+		"2": "uv_1s3oplfe",
+		"3": "uv_1s3oplff",
+		"4": "uv_1s3oplfg",
+		"5": "uv_1s3oplfh"
+	} },
+	defaultVariants: { child: 0 },
+	compoundVariants: []
+});
+
+//#endregion
+export { barStack, barStackLegendCircle, barStackText, containerBarStack, wrapperBarStack, wrapperWidth };

package/dist/components/Breadcrumbs/components/Item.d.ts

@@ -13,6 +13,6 @@ type ItemProps = {
     maxWidth?: string;
     minWidth?: string;
 };
-export declare const Item: ({ to, children, disabled, "aria-current": ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Item: ({ to, children, disabled, 'aria-current': ariaCurrent, onClick, onKeyDown, className, maxWidth, minWidth, }: ItemProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Item.d.ts.map

package/dist/components/Breadcrumbs/components/Item.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/components/Item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,IAAI,eAAe,EAC7B,SAAS,EACV,MAAM,OAAO,CAAA;AAed,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,cAAc,CAAC,EACX,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,CAAA;IACV;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,IAAI,GAAI,6GAUlB,SAAS,4CA8DX,CAAA"}
+{"version":3,"file":"Item.d.ts","sourceRoot":"","sources":["../../../../src/components/Breadcrumbs/components/Item.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EACV,aAAa,EACb,UAAU,IAAI,eAAe,EAC7B,SAAS,EACV,MAAM,OAAO,CAAA;AAed,KAAK,SAAS,GAAG;IACf,QAAQ,EAAE,SAAS,CAAA;IACnB,cAAc,CAAC,EACX,OAAO,GACP,OAAO,GACP,MAAM,GACN,MAAM,GACN,MAAM,GACN,UAAU,GACV,MAAM,GACN,MAAM,CAAA;IACV;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IACzD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,aAAa,CAAC,KAAK,IAAI,CAAA;IACzD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB,CAAA;AAED,eAAO,MAAM,IAAI,qKAwEhB,CAAA"}