@uipath/apollo-vertex 1.1.0 → 1.2.0

package/dist/registry/bar-chart/bar-chart-view.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Bar, BarChart, Cell, LabelList, XAxis, YAxis } from "recharts";
+import { Bar, BarChart, LabelList, Rectangle, XAxis, YAxis } from "recharts";
 import { ChartContainer, ChartTooltip, ChartTooltipContent } from "../chart/chart.js";
 import { BarLabel } from "./bar-label.js";
 import { MetricColumn } from "./metric-column.js";
@@ -9,6 +9,12 @@ import { isRechartsBarData } from "./util/recharts-bar-data.js";
 const BAR_SIZE = 20;
 const BAR_GAP = 4;
 const CATEGORY_GAP = 8;
+function PaletteBar(props) {
+    return /*#__PURE__*/ jsx(Rectangle, {
+        ...props,
+        fill: PALETTE[props.index % PALETTE.length]
+    });
+}
 function bar_chart_view_BarChart({ rows, series }) {
     const dimensionKeys = rows[0]?.dimensions.map((d)=>d.key) ?? [];
     const dimensionCount = dimensionKeys.length;
@@ -159,24 +165,20 @@ function bar_chart_view_BarChart({ rows, series }) {
                                 }),
                                 cursor: false
                             }),
-                            1 === seriesCount ? /*#__PURE__*/ jsxs(Bar, {
+                            1 === seriesCount ? /*#__PURE__*/ jsx(Bar, {
                                 dataKey: series[0]?.label ?? "",
                                 barSize: BAR_SIZE,
-                                children: [
-                                    /*#__PURE__*/ jsx(LabelList, {
-                                        content: (props)=>{
-                                            const payload = isRechartsBarData(props.payload) ? props.payload : null;
-                                            const formatted = payload && series[0] ? payload.__formatted[series[0].id] ?? "" : "";
-                                            return /*#__PURE__*/ jsx(BarLabel, {
-                                                ...props,
-                                                formatted: formatted
-                                            });
-                                        }
-                                    }),
-                                    rechartsData.map((row, index)=>/*#__PURE__*/ jsx(Cell, {
-                                            fill: PALETTE[index % PALETTE.length]
-                                        }, row.__id))
-                                ]
+                                shape: PaletteBar,
+                                children: /*#__PURE__*/ jsx(LabelList, {
+                                    content: (props)=>{
+                                        const payload = isRechartsBarData(props.payload) ? props.payload : null;
+                                        const formatted = payload && series[0] ? payload.__formatted[series[0].id] ?? "" : "";
+                                        return /*#__PURE__*/ jsx(BarLabel, {
+                                            ...props,
+                                            formatted: formatted
+                                        });
+                                    }
+                                })
                             }) : series.map((s, idx)=>/*#__PURE__*/ jsx(Bar, {
                                     dataKey: s.label,
                                     fill: s.color ?? COLORS[idx % COLORS.length],

package/dist/registry/bar-chart/util/get-bar-color.js

@@ -5,8 +5,8 @@ function getBarColor({ seriesCount, seriesIndex, item, payload, rechartsData })
     const payloadFill = item.payload?.fill;
     if (1 === seriesCount) {
         const rowIndex = rechartsData.findIndex((row)=>row.__id === payload?.__id);
-        const fallbackColor = PALETTE[rowIndex >= 0 ? rowIndex % PALETTE.length : 0];
-        return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");
+        if (rowIndex >= 0) return assertDefined(PALETTE[rowIndex % PALETTE.length], "Bar color");
+        return assertDefined(itemColor ?? payloadFill ?? PALETTE["0"], "Bar color");
     }
     const fallbackColor = COLORS[seriesIndex % COLORS.length];
     return assertDefined(itemColor ?? payloadFill ?? fallbackColor, "Bar color");

package/dist/registry/chart/chart.d.ts

@@ -4,21 +4,23 @@ declare const THEMES: {
     readonly light: "";
     readonly dark: ".dark";
 };
-export type ChartConfig = {
-    [k in string]: {
-        label?: React.ReactNode;
-        icon?: React.ComponentType;
-    } & ({
-        color?: string;
-        theme?: never;
-    } | {
-        color?: never;
-        theme: Record<keyof typeof THEMES, string>;
-    });
-};
-declare function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & {
+export type ChartConfig = Record<string, {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})>;
+declare function ChartContainer({ id, className, children, config, initialDimension, ...props }: React.ComponentProps<"div"> & {
     config: ChartConfig;
     children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"];
+    initialDimension?: {
+        width: number;
+        height: number;
+    };
 }): import("react/jsx-runtime").JSX.Element;
 declare const ChartStyle: ({ id, config }: {
     id: string;
@@ -31,10 +33,10 @@ declare function ChartTooltipContent({ active, payload, className, indicator, hi
     indicator?: "line" | "dot" | "dashed";
     nameKey?: string;
     labelKey?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
-declare const ChartLegend: typeof RechartsPrimitive.Legend;
-declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+} & Omit<RechartsPrimitive.DefaultTooltipContentProps, "accessibilityLayer">): import("react/jsx-runtime").JSX.Element | null;
+declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
+declare function ChartLegendContent({ className, hideIcon, payload, verticalAlign, nameKey, }: React.ComponentProps<"div"> & {
     hideIcon?: boolean;
     nameKey?: string;
-}): import("react/jsx-runtime").JSX.Element | null;
+} & RechartsPrimitive.DefaultLegendContentProps): import("react/jsx-runtime").JSX.Element | null;
 export { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, ChartStyle, };

package/dist/registry/chart/chart.js

@@ -1,19 +1,33 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useId } from "react";
+import { createContext, useContext, useId, useMemo } from "react";
 import { Legend, ResponsiveContainer, Tooltip } from "recharts";
 import { cn } from "../../lib/utils.js";
 const THEMES = {
     light: "",
     dark: ".dark"
 };
+const THEME_SELECTORS = [
+    [
+        "light",
+        THEMES.light
+    ],
+    [
+        "dark",
+        THEMES.dark
+    ]
+];
+const INITIAL_DIMENSION = {
+    width: 320,
+    height: 200
+};
 const ChartContext = /*#__PURE__*/ createContext(null);
 function useChart() {
     const context = useContext(ChartContext);
     if (!context) throw new Error("useChart must be used within a <ChartContainer />");
     return context;
 }
-function ChartContainer({ id, className, children, config, ...props }) {
+function ChartContainer({ id, className, children, config, initialDimension = INITIAL_DIMENSION, ...props }) {
     const uniqueId = useId();
     const chartId = `chart-${id ?? uniqueId.replaceAll(":", "")}`;
     return /*#__PURE__*/ jsx(ChartContext.Provider, {
@@ -23,7 +37,7 @@ function ChartContainer({ id, className, children, config, ...props }) {
         children: /*#__PURE__*/ jsxs("div", {
             "data-slot": "chart",
             "data-chart": chartId,
-            className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+            className: cn("flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
             ...props,
             children: [
                 /*#__PURE__*/ jsx(ChartStyle, {
@@ -31,6 +45,7 @@ function ChartContainer({ id, className, children, config, ...props }) {
                     config: config
                 }),
                 /*#__PURE__*/ jsx(ResponsiveContainer, {
+                    initialDimension: initialDimension,
                     children: children
                 })
             ]
@@ -42,7 +57,7 @@ const ChartStyle = ({ id, config })=>{
     if (0 === colorConfig.length) return null;
     return /*#__PURE__*/ jsx("style", {
         dangerouslySetInnerHTML: {
-            __html: Object.entries(THEMES).map(([theme, prefix])=>`
+            __html: THEME_SELECTORS.map(([theme, prefix])=>`
 ${prefix} [data-chart=${id}] {
 ${colorConfig.map(([key, itemConfig])=>{
                     const color = itemConfig.theme?.[theme] ?? itemConfig.color;
@@ -56,10 +71,10 @@ ${colorConfig.map(([key, itemConfig])=>{
 const ChartTooltip = Tooltip;
 function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
     const { config } = useChart();
-    function getTooltipLabel() {
+    const tooltipLabel = useMemo(()=>{
         if (hideLabel || !payload?.length) return null;
         const [item] = payload;
-        const key = `${(labelKey ?? item?.dataKey) || (item?.name ?? "value")}`;
+        const key = chartConfigKey(labelKey ?? item?.dataKey ?? item?.name);
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         const value = labelKey || "string" != typeof label ? itemConfig?.label : config[label]?.label ?? label;
         if (labelFormatter) return /*#__PURE__*/ jsx("div", {
@@ -71,22 +86,29 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
             className: cn("font-medium", labelClassName),
             children: value
         });
-    }
-    const tooltipLabel = getTooltipLabel();
+    }, [
+        label,
+        labelFormatter,
+        payload,
+        hideLabel,
+        labelClassName,
+        config,
+        labelKey
+    ]);
     if (!active || !payload?.length) return null;
     const nestLabel = 1 === payload.length && "dot" !== indicator;
     return /*#__PURE__*/ jsxs("div", {
-        className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
+        className: cn("grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl", className),
         children: [
             nestLabel ? null : tooltipLabel,
             /*#__PURE__*/ jsx("div", {
                 className: "grid gap-1.5",
                 children: payload.filter((item)=>"none" !== item.type).map((item, index)=>{
-                    const key = `${(nameKey ?? item.name) || (item.dataKey ?? "value")}`;
+                    const key = chartConfigKey(nameKey ?? item.name ?? item.dataKey);
                     const itemConfig = getPayloadConfigFromPayload(config, item, key);
-                    const indicatorColor = color ?? item.payload.fill ?? item.color;
+                    const indicatorColor = readIndicatorColor(color, item);
                     return /*#__PURE__*/ jsx("div", {
-                        className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", "dot" === indicator && "items-center"),
+                        className: cn("flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground", "dot" === indicator && "items-center"),
                         children: formatter && item?.value != null && item.name ? formatter(item.value, item.name, item, index, item.payload) : /*#__PURE__*/ jsxs(Fragment, {
                             children: [
                                 itemConfig?.icon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : !hideIndicator && /*#__PURE__*/ jsx("div", {
@@ -114,15 +136,15 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
                                                 })
                                             ]
                                         }),
-                                        item.value && /*#__PURE__*/ jsx("span", {
-                                            className: "text-foreground font-mono font-medium tabular-nums",
-                                            children: item.value.toLocaleString()
+                                        null != item.value && /*#__PURE__*/ jsx("span", {
+                                            className: "font-mono font-medium text-foreground tabular-nums",
+                                            children: "number" == typeof item.value ? item.value.toLocaleString() : String(item.value)
                                         })
                                     ]
                                 })
                             ]
                         })
-                    }, item.dataKey);
+                    }, index);
                 })
             })
         ]
@@ -134,11 +156,11 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
     if (!payload?.length) return null;
     return /*#__PURE__*/ jsx("div", {
         className: cn("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className),
-        children: payload.filter((item)=>"none" !== item.type).map((item)=>{
-            const key = String(nameKey ?? item.dataKey ?? "value");
+        children: payload.filter((item)=>"none" !== item.type).map((item, index)=>{
+            const key = chartConfigKey(nameKey ?? item.dataKey);
             const itemConfig = getPayloadConfigFromPayload(config, item, key);
             return /*#__PURE__*/ jsxs("div", {
-                className: cn("[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"),
+                className: cn("flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"),
                 children: [
                     itemConfig?.icon && !hideIcon ? /*#__PURE__*/ jsx(itemConfig.icon, {}) : /*#__PURE__*/ jsx("div", {
                         className: "h-2 w-2 shrink-0 rounded-[2px]",
@@ -148,10 +170,20 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
                     }),
                     itemConfig?.label
                 ]
-            }, item.value);
+            }, index);
         })
     });
 }
+function chartConfigKey(value) {
+    if ("string" == typeof value || "number" == typeof value || "function" == typeof value) return String(value);
+    return "value";
+}
+function readIndicatorColor(color, item) {
+    const point = item.payload;
+    if ("object" != typeof point || null === point || !("fill" in point)) return color ?? item.color;
+    const { fill } = point;
+    return color ?? ("string" == typeof fill ? fill : item.color);
+}
 function getPayloadConfigFromPayload(config, payload, key) {
     if ("object" != typeof payload || null === payload) return;
     const payloadPayload = "payload" in payload && "object" == typeof payload.payload && null !== payload.payload ? payload.payload : null;

package/dist/registry/shell/shell-theme-provider.js

@@ -42,6 +42,16 @@ const cssVarMap = {
 function isValidTheme(value) {
     return "light" === value || "dark" === value || "system" === value;
 }
+function useSystemDark() {
+    return useSyncExternalStore((cb)=>{
+        const mq = window.matchMedia("(prefers-color-scheme: dark)");
+        mq.addEventListener("change", cb);
+        return ()=>mq.removeEventListener("change", cb);
+    }, ()=>window.matchMedia("(prefers-color-scheme: dark)").matches, ()=>false);
+}
+function resolveSystemTheme(systemDark) {
+    return systemDark ? "dark" : "light";
+}
 function applyThemeClass(resolved) {
     const root = window.document.documentElement;
     root.classList.remove("light", "dark");
@@ -69,12 +79,8 @@ function ThemeProvider({ children, defaultTheme = "system", themeConfig, storage
         const stored = localStorage.getItem(storageKey);
         return isValidTheme(stored) ? stored : defaultTheme;
     });
-    const systemDark = useSyncExternalStore((cb)=>{
-        const mq = window.matchMedia("(prefers-color-scheme: dark)");
-        mq.addEventListener("change", cb);
-        return ()=>mq.removeEventListener("change", cb);
-    }, ()=>window.matchMedia("(prefers-color-scheme: dark)").matches, ()=>false);
-    const resolvedTheme = "system" === theme ? systemDark ? "dark" : "light" : theme;
+    const systemDark = useSystemDark();
+    const resolvedTheme = "system" === theme ? resolveSystemTheme(systemDark) : theme;
     const setTheme = (newTheme)=>{
         localStorage.setItem(storageKey, newTheme);
         setThemeState(newTheme);

package/dist/registry/sonner/sonner.d.ts

@@ -1,4 +1,4 @@
 import { type ToasterProps } from "sonner";
 export declare const apolloToastClassNames: NonNullable<NonNullable<ToasterProps["toastOptions"]>["classNames"]>;
-declare const Toaster: ({ ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
+declare const Toaster: ({ theme: _theme, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
 export { Toaster };

package/dist/registry/sonner/sonner.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon } from "lucide-react";
-import { useTheme } from "next-themes";
 import { Toaster } from "sonner";
+import { useTheme } from "../shell/shell-theme-provider.js";
 const iconAlign = "[&>[data-icon]]:!items-start [&>[data-icon]>svg]:!mt-0.5";
 const statusTextClasses = "[&>[data-icon]>svg]:!text-[oklch(0.166_0.0283_203.34)] dark:[&>[data-icon]>svg]:!text-foreground [&_[data-title]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-title]]:!text-foreground [&_[data-description]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-description]]:!text-foreground [&_[data-close-button]]:!text-[oklch(0.166_0.0283_203.34)] dark:[&_[data-close-button]]:!text-foreground";
 const apolloToastClassNames = {
@@ -12,10 +12,10 @@ const apolloToastClassNames = {
     error: `!border-destructive !bg-[color-mix(in_srgb,var(--destructive)_50%,var(--card)_50%)] dark:!bg-[color-mix(in_srgb,var(--destructive)_50%,var(--popover)_50%)] ${statusTextClasses} ${iconAlign}`,
     closeButton: "!left-auto !right-2 !top-2 !transform-none !border-none !bg-transparent !rounded-sm"
 };
-const sonner_Toaster = ({ ...props })=>{
-    const { theme = "system" } = useTheme();
+const sonner_Toaster = ({ theme: _theme, ...props })=>{
+    const { resolvedTheme } = useTheme();
     return /*#__PURE__*/ jsx(Toaster, {
-        theme: "light" === theme || "dark" === theme || "system" === theme ? theme : "system",
+        theme: resolvedTheme,
         className: "toaster group",
         position: "top-center",
         duration: 5000,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-vertex",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "UiPath Apollo Vertex design system components",
   "license": "MIT",
   "keywords": [
@@ -68,7 +68,6 @@
     "input-otp": "^1.4.2",
     "lucide-react": "^0.577.0",
     "luxon": "^3.7.1",
-    "next-themes": "^0.4.6",
     "react-day-picker": "^9.13.0",
     "react-joyride": "^3.0.2",
     "react-resizable-panels": "^4.7.3",
@@ -95,7 +94,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^16.5.4 || ^17.0.0",
     "react-markdown": "^10.1.0",
-    "recharts": "^2.15.4",
+    "recharts": "^3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.0.0"
@@ -143,7 +142,7 @@
     "react-error-boundary": "^6.0.0",
     "react-i18next": "^17.0.15",
     "react-markdown": "^10.1.0",
-    "recharts": "2.15.4",
+    "recharts": "3.8.0",
     "remark-breaks": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "tailwindcss": "^4.1.17",