@ledgerhq/lumen-ui-react 0.1.56 → 0.1.58

package/dist/lib/Components/visualization/CartesianChart/hooks/useShimmerAnimation.js

@@ -0,0 +1,15 @@
+import { useId as o, useMemo as m } from "react";
+import { chartConfig as r } from "../../config.js";
+const { shimmer: i } = r, a = () => {
+  const e = `shimmer-pulse-${o().replaceAll(":", "")}`;
+  return m(
+    () => ({
+      animationStyle: `${e} ${i.pulseDurationInSeconds}s ${i.pulseEasing} infinite`,
+      keyframe: `@keyframes ${e} { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { @keyframes ${e} { 0%, 100% { opacity: 1; } } }`
+    }),
+    [e]
+  );
+};
+export {
+  a as useShimmerAnimation
+};

package/dist/lib/Components/visualization/CartesianChart/index.d.ts

@@ -0,0 +1,4 @@
+export { CartesianChart } from './CartesianChart';
+export { useCartesianChartContext } from './context';
+export type { CartesianChartContextValue, CartesianChartProps } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/lib/Components/visualization/CartesianChart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/CartesianChart/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,wBAAwB,EAAE,MAAM,WAAW,CAAC;AACrD,YAAY,EAAE,0BAA0B,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC"}

package/dist/lib/Components/visualization/CartesianChart/types.d.ts

@@ -0,0 +1,127 @@
+import { ReactNode } from 'react';
+import { BaseAxisProps } from '../Axis';
+import { ChartInset, ChartScaleFunction, DrawingArea, Series } from '../utils/types';
+/**
+ * Chart-level scrubbing configuration. Owned here and composed by the chart
+ * types and {@link ScrubberProviderProps} so the JSDoc lives in a single place.
+ */
+export type ScrubbingOptions = {
+    /**
+     * Enables scrubbing (hover/touch/keyboard) interactions on the chart.
+     * When true, the SVG becomes focusable; add a `<Scrubber>` child to
+     * visualise the interaction.
+     * @default false
+     */
+    enableScrubbing?: boolean;
+    /**
+     * Callback fired whenever the scrubber moves to a new data index or is cleared.
+     * Receives `undefined` when the scrubber leaves the chart.
+     */
+    onScrubberPositionChange?: (index: number | undefined) => void;
+    /**
+     * Pixel radius within which the scrubber magnetically snaps to registered
+     * magnetic `<Point>` components. Requires `enableScrubbing` to be `true`.
+     * Set to `0` to disable magnetization.
+     * @default 8
+     */
+    magnetRadius?: number;
+};
+export type CartesianChartProps = ScrubbingOptions & {
+    /**
+     * Data series provided to child components via context.
+     */
+    series: Series[];
+    /**
+     * Scale and domain configuration for the x-axis.
+     */
+    xAxis?: Partial<BaseAxisProps>;
+    /**
+     * Scale and domain configuration for the y-axis.
+     */
+    yAxis?: Partial<BaseAxisProps>;
+    /**
+     * Width of the chart.
+     * A number is treated as pixels; a string (e.g. `'100%'`) fills the container
+     * and enables auto-measurement via `ResizeObserver`.
+     * @default '100%'
+     */
+    width?: number | string;
+    /**
+     * Height of the chart in pixels.
+     * @default 240
+     */
+    height?: number;
+    /**
+     * Extra padding between the SVG edge and the drawing area, added on top of
+     * a built-in overflow buffer that prevents content (labels, points, ticks)
+     * from being clipped. A number applies uniformly; a partial object sets
+     * individual sides (unset sides default to `0`).
+     */
+    inset?: number | Partial<ChartInset>;
+    /**
+     * Space reserved for axes around the drawing area.
+     * Shrinks the drawing area by the specified amount on each side.
+     */
+    axisPadding?: Partial<ChartInset>;
+    /**
+     * Accessible label for the chart SVG.
+     * @default 'Chart'
+     */
+    ariaLabel?: string;
+    /**
+     * Sets `aria-busy` on the chart SVG to signal that its content is loading.
+     * @default false
+     */
+    ariaBusy?: boolean;
+    /**
+     * HTML content rendered as an absolutely-positioned overlay above the chart
+     * SVG, within the same positioned container (so it aligns with the chart
+     * footprint). Used for e.g. an empty-state label.
+     */
+    overlay?: ReactNode;
+    /**
+     * SVG content rendered inside the chart's context provider.
+     */
+    children?: ReactNode;
+    /**
+     * Whether to animate the chart on mount and data changes.
+     * Duration is 0.8 seconds and easing is linear.
+     * @default true
+     */
+    animate?: boolean;
+};
+export type CartesianChartContextValue = {
+    /**
+     * All data series registered in the chart.
+     */
+    series: Series[];
+    /**
+     * Lookup map for series by ID. Stable reference when series identity is unchanged.
+     */
+    seriesMap: Map<string, Series>;
+    /**
+     * Returns the x-axis scale. Accepts an optional axis ID for future multi-axis support.
+     */
+    getXScale: (id?: string) => ChartScaleFunction | undefined;
+    /**
+     * Returns the y-axis scale. Accepts an optional axis ID for future multi-axis support.
+     */
+    getYScale: (id?: string) => ChartScaleFunction | undefined;
+    /**
+     * Returns the x-axis config. Accepts an optional axis ID for future multi-axis support.
+     */
+    getXAxisConfig: (id?: string) => BaseAxisProps | undefined;
+    /**
+     * Returns the y-axis config. Accepts an optional axis ID for future multi-axis support.
+     */
+    getYAxisConfig: (id?: string) => BaseAxisProps | undefined;
+    /**
+     * Pixel bounds of the drawable region.
+     */
+    drawingArea: DrawingArea;
+    /**
+     * Number of data points along the x-axis.
+     */
+    dataLength: number;
+};
+//# sourceMappingURL=types.d.ts.map

package/dist/lib/Components/visualization/CartesianChart/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/CartesianChart/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAC7C,OAAO,KAAK,EACV,UAAU,EACV,kBAAkB,EAClB,WAAW,EACX,MAAM,EACP,MAAM,gBAAgB,CAAC;AAExB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG;IAC7B;;;;;OAKG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,wBAAwB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/D;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,GAAG;IACnD;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/B;;OAEG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC;IAC/B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;IACrC;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC,UAAU,CAAC,CAAC;IAClC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB;;;;OAIG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IACvC;;OAEG;IACH,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB;;OAEG;IACH,SAAS,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,SAAS,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,kBAAkB,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,cAAc,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,aAAa,GAAG,SAAS,CAAC;IAC3D;;OAEG;IACH,WAAW,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC"}

package/dist/lib/Components/visualization/CartesianChart/utils.d.ts

@@ -0,0 +1,5 @@
+import { ChartInset } from '../utils/types';
+import { CartesianChartProps } from './types';
+export declare const resolveInset: (inset: CartesianChartProps["inset"]) => ChartInset;
+export declare const resolveAxisPadding: (padding: CartesianChartProps["axisPadding"]) => ChartInset;
+//# sourceMappingURL=utils.d.ts.map

package/dist/lib/Components/visualization/CartesianChart/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/CartesianChart/utils.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAEnD,eAAO,MAAM,YAAY,GACvB,OAAO,mBAAmB,CAAC,OAAO,CAAC,KAClC,UAqBF,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAC7B,SAAS,mBAAmB,CAAC,aAAa,CAAC,KAC1C,UAQF,CAAC"}

package/dist/lib/Components/visualization/CartesianChart/utils.js

@@ -0,0 +1,24 @@
+import { chartConfig as r } from "../config.js";
+const f = (o) => {
+  let t;
+  return o === void 0 ? t = r.root.zeroPadding : typeof o == "number" ? t = { top: o, right: o, bottom: o, left: o } : t = {
+    top: o.top ?? 0,
+    right: o.right ?? 0,
+    bottom: o.bottom ?? 0,
+    left: o.left ?? 0
+  }, {
+    top: t.top,
+    right: t.right,
+    bottom: t.bottom,
+    left: t.left
+  };
+}, l = (o) => o === void 0 ? r.root.zeroPadding : {
+  top: o.top ?? 0,
+  right: o.right ?? 0,
+  bottom: o.bottom ?? 0,
+  left: o.left ?? 0
+};
+export {
+  l as resolveAxisPadding,
+  f as resolveInset
+};

package/dist/lib/Components/visualization/DonutChart/DonutChart.d.ts

@@ -0,0 +1,3 @@
+import { DonutChartProps } from './types';
+export declare function DonutChart({ series: seriesProp, size, ariaLabel, loading, activeId: activeIdProp, defaultActiveId, onActiveIdChange, renderCenter, renderCenterActive, enableColorContrast, }: DonutChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DonutChart.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChart.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutChart.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAQ/C,wBAAgB,UAAU,CAAC,EACzB,MAAM,EAAE,UAAU,EAClB,IAAW,EACX,SAAyB,EACzB,OAAe,EACf,QAAQ,EAAE,YAAY,EACtB,eAAsB,EACtB,gBAAgB,EAChB,YAAY,EACZ,kBAAkB,EAClB,mBAA2B,GAC5B,EAAE,eAAe,2CA4FjB"}

package/dist/lib/Components/visualization/DonutChart/DonutChart.js

@@ -0,0 +1,90 @@
+import { jsxs as I, jsx as i } from "react/jsx-runtime";
+import { useMemo as g } from "react";
+import { chartConfig as P } from "../config.js";
+import { DonutChartAnimatedCenter as T } from "./DonutChartAnimatedCenter.js";
+import { DonutRing as j } from "./DonutRing.js";
+import { DonutSizeProvider as y } from "./donutSizeContext.js";
+import { useContrastSafeSeries as A } from "./hooks/useContrastSafeSeries.js";
+import { buildRingSegments as E, DONUT_GEOMETRY as M, getSegmentPercents as N, formatPercentLabel as B } from "./utils.js";
+import { useControllableState as O } from "../../../../utils/useControllableState/useControllableState.js";
+function H({
+  series: p,
+  size: l = "md",
+  ariaLabel: h = "Donut chart",
+  loading: c = !1,
+  activeId: v,
+  defaultActiveId: S = null,
+  onActiveIdChange: b,
+  renderCenter: s,
+  renderCenterActive: a,
+  enableColorContrast: x = !1
+}) {
+  const n = M[l], e = A(p, x), [o, u] = O({
+    prop: v,
+    defaultProp: S,
+    onChange: b
+  }), L = g(
+    () => E(e, n),
+    [e, n]
+  ), m = g(() => {
+    const t = e.findIndex((f) => f.id === o);
+    if (o == null || t === -1)
+      return null;
+    const r = N(e)[t];
+    return {
+      ...e[t],
+      percent: r,
+      percentLabel: B(r)
+    };
+  }, [e, o]), d = () => {
+    o !== null && u(null);
+  }, R = (t) => {
+    const { relatedTarget: r } = t;
+    (!(r instanceof Node) || !t.currentTarget.contains(r)) && d();
+  }, D = s != null || a != null, C = a != null;
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      role: "presentation",
+      "data-testid": "donut-chart",
+      style: {
+        position: "relative",
+        width: n.box,
+        height: n.box
+      },
+      onMouseLeave: d,
+      onBlur: R,
+      children: [
+        /* @__PURE__ */ i(
+          j,
+          {
+            segments: L,
+            geometry: n,
+            ariaLabel: c ? P.donut.loading.ariaLabel : h,
+            activeId: o,
+            loading: c,
+            onSegmentEnter: u
+          }
+        ),
+        D && /* @__PURE__ */ i(
+          "div",
+          {
+            "data-testid": "donut-center",
+            className: "pointer-events-none absolute inset-0 flex items-center justify-center",
+            children: /* @__PURE__ */ i(y, { value: { size: l }, children: C ? /* @__PURE__ */ i(
+              T,
+              {
+                activeSegment: m,
+                renderResting: () => s?.({ series: e, activeSegment: null }) ?? null,
+                renderActive: (t) => a({ activeSegment: t })
+              }
+            ) : s?.({ activeSegment: m, series: e }) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  H as DonutChart
+};

package/dist/lib/Components/visualization/DonutChart/DonutChartAnimatedCenter.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DonutActiveSegment } from './types';
+type DonutChartAnimatedCenterProps = {
+    activeSegment: DonutActiveSegment | null;
+    renderResting: () => ReactNode;
+    renderActive: (segment: DonutActiveSegment) => ReactNode;
+};
+export declare const DonutChartAnimatedCenter: ({ activeSegment, renderResting, renderActive, }: DonutChartAnimatedCenterProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DonutChartAnimatedCenter.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutChartAnimatedCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChartAnimatedCenter.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutChartAnimatedCenter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAGrE,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAElD,KAAK,6BAA6B,GAAG;IACnC,aAAa,EAAE,kBAAkB,GAAG,IAAI,CAAC;IACzC,aAAa,EAAE,MAAM,SAAS,CAAC;IAC/B,YAAY,EAAE,CAAC,OAAO,EAAE,kBAAkB,KAAK,SAAS,CAAC;CAC1D,CAAC;AAKF,eAAO,MAAM,wBAAwB,GAAI,iDAItC,6BAA6B,4CA6D/B,CAAC"}

package/dist/lib/Components/visualization/DonutChart/DonutChartAnimatedCenter.js

@@ -0,0 +1,61 @@
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
+import { useState as p, useEffect as h, useMemo as r } from "react";
+import { chartConfig as v } from "../config.js";
+const { centerTextTransition: i } = v.donut.hover, o = 8, j = ({
+  activeSegment: e,
+  renderResting: a,
+  renderActive: c
+}) => {
+  const [l, d] = p(null);
+  h(() => {
+    e && d(e);
+  }, [e]);
+  const t = e != null, n = e ?? l, f = r(
+    () => ({
+      transition: i,
+      opacity: t ? 0 : 1,
+      transform: `translateY(${t ? -o : 0}px)`
+    }),
+    [t]
+  ), m = r(
+    () => ({
+      transition: i,
+      opacity: t ? 1 : 0,
+      transform: `translateY(${t ? 0 : o}px)`
+    }),
+    [t]
+  );
+  return /* @__PURE__ */ u("div", { className: "pointer-events-auto grid", children: [
+    /* @__PURE__ */ s(
+      "div",
+      {
+        "data-visible": !t,
+        "aria-hidden": t,
+        style: {
+          gridArea: "1 / 1",
+          pointerEvents: t ? "none" : "auto",
+          ...f
+        },
+        className: "flex items-center justify-center",
+        children: a()
+      }
+    ),
+    n && /* @__PURE__ */ s(
+      "div",
+      {
+        "data-visible": t,
+        "aria-hidden": !t,
+        style: {
+          gridArea: "1 / 1",
+          pointerEvents: t ? "auto" : "none",
+          ...m
+        },
+        className: "flex items-center justify-center",
+        children: c(n)
+      }
+    )
+  ] });
+};
+export {
+  j as DonutChartAnimatedCenter
+};

package/dist/lib/Components/visualization/DonutChart/DonutChartCenter.d.ts

@@ -0,0 +1,9 @@
+import { DonutChartCenterProps } from './types';
+/**
+ * Layout wrapper for the donut center slot: a centered vertical stack for
+ * `DonutChartTitle` / `DonutChartDescription`. Rendered via `renderCenter` /
+ * `renderCenterActive` as the top-level element.
+ * Use `className` to add custom styles.
+ */
+export declare const DonutChartCenter: ({ ref, className, ...props }: DonutChartCenterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DonutChartCenter.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutChartCenter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChartCenter.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutChartCenter.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAErD;;;;;GAKG;AACH,eAAO,MAAM,gBAAgB,GAAI,8BAI9B,qBAAqB,4CAWvB,CAAC"}

package/dist/lib/Components/visualization/DonutChart/DonutChartCenter.js

@@ -0,0 +1,20 @@
+import { jsx as o } from "react/jsx-runtime";
+import { cn as n } from "../../../../libs/utils-shared/dist/index.js";
+const a = ({
+  ref: t,
+  className: e,
+  ...r
+}) => /* @__PURE__ */ o(
+  "div",
+  {
+    ref: t,
+    className: n(
+      "pointer-events-auto flex min-w-0 flex-col items-center",
+      e
+    ),
+    ...r
+  }
+);
+export {
+  a as DonutChartCenter
+};

package/dist/lib/Components/visualization/DonutChart/DonutChartDescription.d.ts

@@ -0,0 +1,3 @@
+import { DonutChartDescriptionProps } from './types';
+export declare const DonutChartDescription: ({ ref, children, className, style, ...props }: DonutChartDescriptionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DonutChartDescription.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutChartDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChartDescription.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutChartDescription.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,SAAS,CAAC;AAoB1D,eAAO,MAAM,qBAAqB,GAAI,+CAMnC,0BAA0B,4CAsB5B,CAAC"}

package/dist/lib/Components/visualization/DonutChart/DonutChartDescription.js

@@ -0,0 +1,49 @@
+import { jsx as m } from "react/jsx-runtime";
+import { isTextChildren as u, cn as d } from "../../../../libs/utils-shared/dist/index.js";
+import { cva as c } from "class-variance-authority";
+import { useDonutSizeContext as x } from "./donutSizeContext.js";
+import { getCenterContentInset as l, getCenterMaxWidth as p } from "./utils.js";
+const f = c("min-w-0 text-muted", {
+  variants: {
+    donutSize: {
+      md: "body-3",
+      sm: "-mt-4 body-4"
+    },
+    layout: {
+      text: "truncate",
+      cluster: "flex items-center gap-2"
+    }
+  },
+  defaultVariants: {
+    donutSize: "md",
+    layout: "text"
+  }
+}), h = ({
+  ref: n,
+  children: e,
+  className: o,
+  style: i,
+  ...r
+}) => {
+  const { size: t = "md" } = x({
+    consumerName: "DonutChartDescription",
+    contextRequired: !1
+  }), s = l(t), a = u(e) ? "text" : "cluster";
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      ref: n,
+      style: {
+        maxWidth: p(t),
+        paddingInline: s,
+        ...i
+      },
+      className: d(f({ donutSize: t, layout: a }), o),
+      ...r,
+      children: e
+    }
+  );
+};
+export {
+  h as DonutChartDescription
+};

package/dist/lib/Components/visualization/DonutChart/DonutChartTitle.d.ts

@@ -0,0 +1,3 @@
+import { DonutChartTitleProps } from './types';
+export declare const DonutChartTitle: ({ ref, children, className, size, style, ...props }: DonutChartTitleProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DonutChartTitle.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutChartTitle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutChartTitle.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutChartTitle.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AA0BpD,eAAO,MAAM,eAAe,GAAI,qDAO7B,oBAAoB,4CAqBtB,CAAC"}

package/dist/lib/Components/visualization/DonutChart/DonutChartTitle.js

@@ -0,0 +1,55 @@
+import { jsx as a } from "react/jsx-runtime";
+import { cva as r } from "class-variance-authority";
+import { useDonutSizeContext as u } from "./donutSizeContext.js";
+import { getCenterContentInset as l, getCenterMaxWidth as z } from "./utils.js";
+const c = r("min-w-0 truncate text-base", {
+  variants: {
+    donutSize: {
+      md: "",
+      sm: ""
+    },
+    size: {
+      md: "",
+      sm: ""
+    }
+  },
+  compoundVariants: [
+    { donutSize: "md", size: "md", class: "heading-1-semi-bold" },
+    { donutSize: "md", size: "sm", class: "heading-2-semi-bold" },
+    { donutSize: "sm", size: "md", class: "heading-4-semi-bold" },
+    { donutSize: "sm", size: "sm", class: "body-2-semi-bold" }
+  ],
+  defaultVariants: {
+    donutSize: "md",
+    size: "md"
+  }
+}), b = ({
+  ref: t,
+  children: s,
+  className: i,
+  size: n = "md",
+  style: m,
+  ...o
+}) => {
+  const { size: e = "md" } = u({
+    consumerName: "DonutChartTitle",
+    contextRequired: !1
+  }), d = l(e);
+  return /* @__PURE__ */ a(
+    "div",
+    {
+      ref: t,
+      style: {
+        maxWidth: z(e),
+        paddingInline: d,
+        ...m
+      },
+      className: c({ donutSize: e, size: n, className: i }),
+      ...o,
+      children: s
+    }
+  );
+};
+export {
+  b as DonutChartTitle
+};

package/dist/lib/Components/visualization/DonutChart/DonutRing.d.ts

@@ -0,0 +1,12 @@
+import { DonutGeometry, DonutRingSegment } from './types';
+type DonutRingProps = {
+    segments: DonutRingSegment[];
+    geometry: DonutGeometry;
+    ariaLabel?: string;
+    activeId: string | null;
+    loading?: boolean;
+    onSegmentEnter: (id: string) => void;
+};
+export declare const DonutRing: ({ segments, geometry, ariaLabel, activeId, loading, onSegmentEnter, }: DonutRingProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=DonutRing.d.ts.map

package/dist/lib/Components/visualization/DonutChart/DonutRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DonutRing.d.ts","sourceRoot":"","sources":["../../../../../src/lib/Components/visualization/DonutChart/DonutRing.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAoG/D,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,QAAQ,EAAE,aAAa,CAAC;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;IACxB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAaF,eAAO,MAAM,SAAS,GAAI,uEAOvB,cAAc,4CAqChB,CAAC"}

package/dist/lib/Components/visualization/DonutChart/DonutRing.js

@@ -0,0 +1,110 @@
+import { jsx as i, jsxs as v, Fragment as b } from "react/jsx-runtime";
+import { useRef as h, useMemo as f, useCallback as x } from "react";
+import { chartConfig as c } from "../config.js";
+import { useDonutLoadingAnimation as R } from "./hooks/useDonutLoadingAnimation.js";
+import { RevealAnimation as $ } from "./RevealAnimation.js";
+import { getDonutViewBox as g, buildPlaceholderSegments as m } from "./utils.js";
+const { hover: s } = c.donut, D = ({
+  segment: t,
+  activeId: o,
+  onSegmentEnter: n
+}) => {
+  const a = o === t.id, e = !t.hoverEnabled || o == null || a ? 1 : s.dimOpacity, { x: r, y: l } = a ? t.hoverTranslate : { x: 0, y: 0 }, d = x(() => {
+    n(t.id);
+  }, [t.id, n]);
+  return /* @__PURE__ */ i(
+    "path",
+    {
+      "data-testid": "donut-segment",
+      "data-segment-id": t.id,
+      d: t.path,
+      fill: t.color,
+      role: "button",
+      "aria-label": a ? `${t.id}, selected` : t.id,
+      tabIndex: 0,
+      className: "outline-none focus-visible:outline-2 focus-visible:outline-focus",
+      onMouseEnter: d,
+      onFocus: d,
+      style: {
+        cursor: "pointer",
+        opacity: e,
+        transform: `translate(${r}px, ${l}px)`,
+        transition: t.hoverEnabled ? `${s.opacityTransition}, ${s.popTransition}` : void 0
+      }
+    }
+  );
+}, S = ({ geometry: t }) => {
+  const o = f(
+    () => m(t),
+    [t]
+  );
+  return /* @__PURE__ */ i("g", { "data-testid": "donut-empty", children: o.map((n) => /* @__PURE__ */ i(
+    "path",
+    {
+      "data-testid": "donut-placeholder",
+      d: n.path,
+      fill: c.donut.emptyRingColor
+    },
+    n.id
+  )) });
+}, k = ({ geometry: t }) => {
+  const o = f(
+    () => m(t),
+    [t]
+  ), { animationStyle: n, keyframe: a, getSegmentDelay: e } = R();
+  return /* @__PURE__ */ v(b, { children: [
+    /* @__PURE__ */ i("style", { children: a }),
+    /* @__PURE__ */ i("g", { "data-testid": "donut-loading", children: o.map((r) => /* @__PURE__ */ i(
+      "path",
+      {
+        "data-testid": "donut-placeholder",
+        d: r.path,
+        fill: c.donut.emptyRingColor,
+        style: {
+          animation: n,
+          animationDelay: e(r.midAngle)
+        }
+      },
+      r.id
+    )) })
+  ] });
+};
+function w(t) {
+  const o = h(0), n = h(t);
+  return n.current && !t && (o.current += 1), n.current = t, o.current;
+}
+const F = ({
+  segments: t,
+  geometry: o,
+  ariaLabel: n,
+  activeId: a,
+  loading: e = !1,
+  onSegmentEnter: r
+}) => {
+  const { box: l } = o, d = l / 2, u = t.length > 0, y = w(e);
+  return /* @__PURE__ */ i($, { children: /* @__PURE__ */ i(
+    "svg",
+    {
+      "data-testid": "donut-ring",
+      width: l,
+      height: l,
+      viewBox: g(o),
+      role: e || !u ? "img" : "group",
+      "aria-label": n,
+      "aria-busy": e || void 0,
+      style: { display: "block", overflow: "visible" },
+      children: /* @__PURE__ */ i("g", { transform: `translate(${d}, ${d})`, children: e ? /* @__PURE__ */ i(k, { geometry: o }) : u ? t.map((p) => /* @__PURE__ */ i(
+        D,
+        {
+          segment: p,
+          activeId: a,
+          onSegmentEnter: r
+        },
+        p.id
+      )) : /* @__PURE__ */ i(S, { geometry: o }) })
+    }
+  ) }, y);
+};
+export {
+  F as DonutRing
+};

package/dist/lib/Components/visualization/DonutChart/RevealAnimation.d.ts

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+type RevealAnimationProps = {
+    children: ReactNode;
+};
+export declare const RevealAnimation: ({ children }: RevealAnimationProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=RevealAnimation.d.ts.map