@monolith-forensics/monolith-ui 1.8.0 → 1.8.1-dev.0

package/dist/PieChart/PieChart.js

@@ -0,0 +1,161 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { arc, pie } from "d3-shape";
+import { useTheme } from "styled-components";
+import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getSliceKey, useThemeColors, } from "./PieChart.lib";
+import { StyledCenter, StyledCenterLabel, StyledCenterPanel, StyledCenterValue, StyledChartWrap, StyledContainer, StyledEmptyState, StyledLabel, StyledLegend, StyledLegendItem, StyledLegendLabel, StyledLegendMeta, StyledLegendPercent, StyledLegendValue, StyledSlice, StyledSvg, StyledSwatch, StyledTooltip, StyledTooltipHeader, StyledTooltipLabel, StyledTooltipMeta, StyledTooltipSwatch, } from "./PieChart.styled";
+export const PieChart = (_a) => {
+    var _b, _c;
+    var { data, size = 220, innerRadius = 58, outerRadius, cornerRadius = 1, padAngle = 0.004, colors, colorGradient, sliceOpacity = 1, sliceBorderColor, sliceBorderWidth = 1, sliceBorderOpacity = 1, sliceBorderLineJoin = "round", showLegend = true, showLegendSwatches = true, showLegendLabels = true, showLegendValues = true, showLegendPercentages = true, showLabels = false, centerLabel, centerValue, emptyLabel = "No data", ariaLabel = "Pie chart", animateOnRender = false, animationDuration = 520, animationStagger = 35, showTooltips = false, valueFormatter, labelFormatter, tooltipFormatter, onSliceClick, onLegendItemClick, className } = _a, props = __rest(_a, ["data", "size", "innerRadius", "outerRadius", "cornerRadius", "padAngle", "colors", "colorGradient", "sliceOpacity", "sliceBorderColor", "sliceBorderWidth", "sliceBorderOpacity", "sliceBorderLineJoin", "showLegend", "showLegendSwatches", "showLegendLabels", "showLegendValues", "showLegendPercentages", "showLabels", "centerLabel", "centerValue", "emptyLabel", "ariaLabel", "animateOnRender", "animationDuration", "animationStagger", "showTooltips", "valueFormatter", "labelFormatter", "tooltipFormatter", "onSliceClick", "onLegendItemClick", "className"]);
+    const descriptionId = useId();
+    const theme = useTheme();
+    const containerRef = useRef(null);
+    const [activeSliceKey, setActiveSliceKey] = useState(null);
+    const [activeTooltip, setActiveTooltip] = useState(null);
+    const [animationElapsed, setAnimationElapsed] = useState(animateOnRender ? 0 : Number.POSITIVE_INFINITY);
+    const themeColors = useThemeColors(colors);
+    const validData = useMemo(() => data.filter((datum) => Number.isFinite(datum.value) && datum.value > 0), [data]);
+    const total = useMemo(() => validData.reduce((sum, datum) => sum + datum.value, 0), [validData]);
+    const radius = outerRadius !== null && outerRadius !== void 0 ? outerRadius : Math.max(size / 2 - 6, 0);
+    const resolvedSliceOpacity = clamp(sliceOpacity, 0, 1);
+    const resolvedSliceBorderWidth = Math.max(sliceBorderWidth, 0);
+    const resolvedSliceBorderOpacity = clamp(sliceBorderOpacity, 0, 1);
+    const resolvedSliceBorderColor = sliceBorderColor !== null && sliceBorderColor !== void 0 ? sliceBorderColor : theme.palette.background.paper;
+    const resolvedInnerRadius = Math.min(innerRadius, radius - 1);
+    const centerPanelDiameter = Math.max(resolvedInnerRadius * 1.62, 52);
+    const labelRadius = resolvedInnerRadius > 0
+        ? resolvedInnerRadius + (radius - resolvedInnerRadius) / 2
+        : radius * 0.68;
+    const slices = useMemo(() => {
+        const pieGenerator = pie()
+            .value((datum) => datum.value)
+            .sort(null)
+            .padAngle(padAngle);
+        return pieGenerator(validData).map((slice, index) => {
+            var _a, _b;
+            return (Object.assign(Object.assign({}, slice), { color: (_b = (_a = slice.data.color) !== null && _a !== void 0 ? _a : getGradientColor(colorGradient, index, validData.length)) !== null && _b !== void 0 ? _b : themeColors[index % themeColors.length], percent: total > 0 ? slice.data.value / total : 0 }));
+        });
+    }, [colorGradient, padAngle, themeColors, total, validData]);
+    const safeAnimationDuration = Math.max(animationDuration, 0);
+    const safeAnimationStagger = Math.max(animationStagger, 0);
+    const totalAnimationDuration = safeAnimationDuration +
+        Math.max(slices.length - 1, 0) * safeAnimationStagger;
+    useEffect(() => {
+        var _a;
+        if (!animateOnRender || slices.length === 0) {
+            setAnimationElapsed(Number.POSITIVE_INFINITY);
+            return;
+        }
+        const prefersReducedMotion = typeof window !== "undefined" &&
+            ((_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)").matches);
+        if (prefersReducedMotion) {
+            setAnimationElapsed(Number.POSITIVE_INFINITY);
+            return;
+        }
+        let animationFrame = 0;
+        let startTime = null;
+        setAnimationElapsed(0);
+        const runAnimation = (timestamp) => {
+            if (startTime == null)
+                startTime = timestamp;
+            const elapsed = timestamp - startTime;
+            setAnimationElapsed(elapsed);
+            if (elapsed < totalAnimationDuration) {
+                animationFrame = window.requestAnimationFrame(runAnimation);
+            }
+        };
+        animationFrame = window.requestAnimationFrame(runAnimation);
+        return () => {
+            window.cancelAnimationFrame(animationFrame);
+        };
+    }, [
+        animateOnRender,
+        animationDuration,
+        animationStagger,
+        slices.length,
+        totalAnimationDuration,
+    ]);
+    const arcGenerator = useMemo(() => arc()
+        .innerRadius(Math.max(resolvedInnerRadius, 0))
+        .outerRadius(radius)
+        .cornerRadius(cornerRadius), [cornerRadius, radius, resolvedInnerRadius]);
+    const labelArcGenerator = useMemo(() => arc()
+        .innerRadius(labelRadius)
+        .outerRadius(labelRadius), [labelRadius]);
+    const formatValue = (datum) => { var _a; return (_a = valueFormatter === null || valueFormatter === void 0 ? void 0 : valueFormatter(datum.value, datum)) !== null && _a !== void 0 ? _a : formatDefaultValue(datum.value); };
+    const updateTooltipPosition = (event, sliceKey) => {
+        if (!showTooltips || !containerRef.current)
+            return;
+        const containerRect = containerRef.current.getBoundingClientRect();
+        setActiveTooltip({
+            sliceKey,
+            x: event.clientX - containerRect.left,
+            y: event.clientY - containerRect.top,
+        });
+    };
+    const showLegendMeta = showLegendValues || showLegendPercentages;
+    const shouldShowLegend = showLegend &&
+        slices.length > 0 &&
+        (showLegendSwatches || showLegendLabels || showLegendMeta);
+    const animationStartAngle = (_c = (_b = slices[0]) === null || _b === void 0 ? void 0 : _b.startAngle) !== null && _c !== void 0 ? _c : 0;
+    const getSliceAnimationProgress = (index) => {
+        if (!animateOnRender || safeAnimationDuration === 0)
+            return 1;
+        const elapsed = animationElapsed - index * safeAnimationStagger;
+        return easeOutCubic(clamp(elapsed / safeAnimationDuration, 0, 1));
+    };
+    const activeTooltipSlice = showTooltips && activeTooltip
+        ? slices.find((slice, index) => getSliceKey(slice.data, index) === activeTooltip.sliceKey)
+        : null;
+    return (_jsxs(StyledContainer, Object.assign({ ref: containerRef, className: className }, props, { children: [slices.length === 0 ? (_jsx(StyledEmptyState, { "$size": size, children: emptyLabel })) : (_jsxs(StyledChartWrap, { children: [_jsxs(StyledSvg, { width: size, height: size, viewBox: `0 0 ${size} ${size}`, role: "img", "aria-label": ariaLabel, "aria-describedby": descriptionId, children: [_jsx("desc", { id: descriptionId, children: slices
+                                    .map((slice) => `${slice.data.label}: ${formatDefaultValue(slice.data.value)}`)
+                                    .join(", ") }), _jsx("g", { transform: `translate(${size / 2}, ${size / 2})`, children: slices.map((slice, index) => {
+                                    var _a;
+                                    const sliceKey = getSliceKey(slice.data, index);
+                                    const sliceAnimationProgress = getSliceAnimationProgress(index);
+                                    const animatedSlice = Object.assign(Object.assign({}, slice), { startAngle: animationStartAngle +
+                                            (slice.startAngle - animationStartAngle) *
+                                                sliceAnimationProgress, endAngle: animationStartAngle +
+                                            (slice.endAngle - animationStartAngle) *
+                                                sliceAnimationProgress });
+                                    const path = arcGenerator(animatedSlice);
+                                    const labelPosition = labelArcGenerator.centroid(slice);
+                                    const percent = Math.round(slice.percent * 100);
+                                    return (_jsxs("g", { children: [_jsx(StyledSlice, { "$active": activeSliceKey === sliceKey, d: path !== null && path !== void 0 ? path : undefined, fill: slice.color, fillOpacity: resolvedSliceOpacity, stroke: resolvedSliceBorderColor, strokeWidth: resolvedSliceBorderWidth, strokeOpacity: resolvedSliceBorderOpacity, strokeLinejoin: sliceBorderLineJoin, tabIndex: 0, onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onMouseEnter: (event) => {
+                                                    setActiveSliceKey(sliceKey);
+                                                    updateTooltipPosition(event, sliceKey);
+                                                }, onMouseMove: (event) => updateTooltipPosition(event, sliceKey), onMouseLeave: () => {
+                                                    setActiveSliceKey(null);
+                                                    setActiveTooltip(null);
+                                                }, onClick: (event) => onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data), onKeyDown: (event) => {
+                                                    if (event.key !== "Enter" && event.key !== " ")
+                                                        return;
+                                                    event.preventDefault();
+                                                    onSliceClick === null || onSliceClick === void 0 ? void 0 : onSliceClick(event, slice.data);
+                                                }, "aria-label": `${slice.data.label}: ${formatDefaultValue(slice.data.value)}, ${percent}%` }), showLabels &&
+                                                slice.percent >= 0.05 &&
+                                                sliceAnimationProgress >= 0.92 && (_jsx(StyledLabel, { x: labelPosition[0], y: labelPosition[1], textAnchor: "middle", dominantBaseline: "central", children: (_a = labelFormatter === null || labelFormatter === void 0 ? void 0 : labelFormatter(slice.data, slice.percent)) !== null && _a !== void 0 ? _a : `${percent}%` }))] }, sliceKey));
+                                }) })] }), (centerLabel != null || centerValue != null) && (_jsx(StyledCenter, { children: _jsxs(StyledCenterPanel, { "$diameter": centerPanelDiameter, children: [centerValue != null && (_jsx(StyledCenterValue, { children: centerValue })), centerLabel != null && (_jsx(StyledCenterLabel, { children: centerLabel }))] }) }))] })), shouldShowLegend && (_jsx(StyledLegend, { children: slices.map((slice, index) => {
+                    const sliceKey = getSliceKey(slice.data, index);
+                    return (_jsxs(StyledLegendItem, { "$active": activeSliceKey === sliceKey, "$showSwatch": showLegendSwatches, "$showLabel": showLegendLabels, "$showMeta": showLegendMeta, tabIndex: 0, onMouseEnter: () => setActiveSliceKey(sliceKey), onMouseLeave: () => setActiveSliceKey(null), onFocus: () => setActiveSliceKey(sliceKey), onBlur: () => setActiveSliceKey(null), onClick: (event) => onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, slice.data), onKeyDown: (event) => {
+                            if (event.key !== "Enter" && event.key !== " ")
+                                return;
+                            event.preventDefault();
+                            onLegendItemClick === null || onLegendItemClick === void 0 ? void 0 : onLegendItemClick(event, slice.data);
+                        }, children: [showLegendSwatches && _jsx(StyledSwatch, { "$color": slice.color }), showLegendLabels && (_jsx(StyledLegendLabel, { title: slice.data.label, children: slice.data.label })), showLegendMeta && (_jsxs(StyledLegendMeta, { children: [showLegendValues && (_jsx(StyledLegendValue, { children: formatValue(slice.data) })), showLegendPercentages && (_jsxs(StyledLegendPercent, { children: [Math.round(slice.percent * 100), "%"] }))] }))] }, sliceKey));
+                }) })), activeTooltip && activeTooltipSlice && (_jsx(StyledTooltip, { style: {
+                    left: activeTooltip.x,
+                    top: activeTooltip.y,
+                }, children: tooltipFormatter ? (tooltipFormatter(activeTooltipSlice.data, activeTooltipSlice.percent)) : (_jsxs(_Fragment, { children: [_jsxs(StyledTooltipHeader, { children: [_jsx(StyledTooltipSwatch, { "$color": activeTooltipSlice.color }), _jsx(StyledTooltipLabel, { children: activeTooltipSlice.data.label })] }), _jsxs(StyledTooltipMeta, { children: [_jsx("span", { children: formatValue(activeTooltipSlice.data) }), _jsxs("span", { children: [Math.round(activeTooltipSlice.percent * 100), "%"] })] })] })) }))] })));
+};

package/dist/PieChart/PieChart.lib.d.ts

@@ -0,0 +1,5 @@
+import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors } from "../ChartUtils";
+import { PieChartDatum } from "./PieChart.types";
+export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors };
+export declare const getSliceKey: (datum: PieChartDatum<unknown>, index: number) => string | number;
+export declare const useThemeColors: (colors?: string[]) => string[];

package/dist/PieChart/PieChart.lib.js

@@ -0,0 +1,19 @@
+import { useMemo } from "react";
+import { useTheme } from "styled-components";
+import { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors, } from "../ChartUtils";
+export { clamp, easeOutCubic, formatDefaultValue, getGradientColor, getGradientStops, mixColors };
+export const getSliceKey = (datum, index) => { var _a; return (_a = datum.id) !== null && _a !== void 0 ? _a : `${datum.label}-${index}`; };
+export const useThemeColors = (colors) => {
+    const theme = useTheme();
+    return useMemo(() => (colors === null || colors === void 0 ? void 0 : colors.length)
+        ? colors
+        : [
+            theme.palette.primary.main,
+            theme.alert.success.color,
+            theme.alert.warning.color,
+            theme.alert.error.color,
+            theme.alert.info.color,
+            theme.palette.fourth.main,
+            theme.button.text.secondary,
+        ], [colors, theme]);
+};

package/dist/PieChart/PieChart.styled.d.ts

@@ -0,0 +1,49 @@
+export declare const StyledContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledChartWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledSvg: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
+export declare const StyledSlice: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").SVGProps<SVGPathElement>, {
+    $active: boolean;
+}>> & string;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGTextElementAttributes<SVGTextElement>, never>> & string;
+export declare const StyledCenter: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCenterPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $diameter: number;
+}>> & string;
+export declare const StyledCenterValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCenterLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, never>> & string;
+export declare const StyledLegendItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $active: boolean;
+    $showSwatch: boolean;
+    $showLabel: boolean;
+    $showMeta: boolean;
+}>> & string;
+export declare const StyledSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $width?: number;
+    $height?: number;
+    $radius?: number;
+}>> & string;
+export declare const StyledLegendLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledLegendValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledLegendMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledLegendPercent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledEmptyState: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $size: number;
+}>> & string;
+export declare const StyledTooltip: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $minWidth?: number;
+    $maxWidth?: number;
+    $transform?: string;
+}>> & string;
+export declare const StyledTooltipHeader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledTooltipSwatch: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $color: string;
+    $radius?: string;
+}>> & string;
+export declare const StyledTooltipLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const StyledTooltipMeta: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $marginTop?: number;
+    $direction?: "row" | "column";
+    $gap?: number;
+}>> & string;

package/dist/PieChart/PieChart.styled.js

@@ -0,0 +1,161 @@
+import styled from "styled-components";
+import { StyledChartLegend, StyledChartLegendLabel, StyledChartLegendSwatch, StyledChartLegendValue, StyledChartTooltip, StyledChartTooltipHeader, StyledChartTooltipLabel, StyledChartTooltipMeta, StyledChartTooltipSwatch, sharedLegendItemStyles, } from "../ChartPrimitives";
+const activeSliceStyles = `
+  opacity: 0.96;
+  filter: brightness(1.12) saturate(1.08);
+  transform: scale(1.018);
+`;
+export const StyledContainer = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: fit-content;
+  max-width: 100%;
+  color: ${({ theme }) => theme.palette.text.primary};
+  box-sizing: border-box;
+  overflow: visible;
+`;
+export const StyledChartWrap = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+`;
+export const StyledSvg = styled.svg `
+  display: block;
+  overflow: visible;
+`;
+export const StyledSlice = styled.path `
+  cursor: pointer;
+  outline: none;
+  transform-box: fill-box;
+  transform-origin: center;
+  transition:
+    opacity 0.18s ease,
+    filter 0.18s ease,
+    transform 0.18s ease;
+
+  &:hover,
+  &:focus-visible {
+    ${activeSliceStyles}
+  }
+
+  ${({ $active }) => $active && activeSliceStyles}
+`;
+export const StyledLabel = styled.text `
+  fill: #fff;
+  font-size: 11px;
+  font-weight: 600;
+  paint-order: stroke;
+  stroke: rgba(0, 0, 0, 0.28);
+  stroke-width: 3px;
+  stroke-linejoin: round;
+  pointer-events: none;
+`;
+export const StyledCenter = styled.div `
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2px;
+  text-align: center;
+  pointer-events: none;
+`;
+export const StyledCenterPanel = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 2px;
+  width: ${({ $diameter }) => $diameter}px;
+  height: ${({ $diameter }) => $diameter}px;
+  max-width: 74%;
+  max-height: 74%;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 50%;
+  background: linear-gradient(
+    180deg,
+    ${({ theme }) => theme.palette.background.paper} 0%,
+    ${({ theme }) => theme.palette.background.secondary} 100%
+  );
+`;
+export const StyledCenterValue = styled.div `
+  max-width: 78%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1.15;
+  color: ${({ theme }) => theme.palette.text.primary};
+`;
+export const StyledCenterLabel = styled.div `
+  max-width: 78%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  line-height: 1.2;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const StyledLegend = styled(StyledChartLegend) `
+  min-width: 164px;
+  max-width: 260px;
+`;
+export const StyledLegendItem = styled.div `
+  display: grid;
+  grid-template-columns: ${({ $showSwatch, $showLabel, $showMeta }) => [
+    $showSwatch ? "4px" : null,
+    $showLabel ? "minmax(0, 1fr)" : null,
+    $showMeta ? "auto" : null,
+]
+    .filter(Boolean)
+    .join(" ")};
+  ${sharedLegendItemStyles}
+`;
+export const StyledSwatch = StyledChartLegendSwatch;
+export const StyledLegendLabel = StyledChartLegendLabel;
+export const StyledLegendValue = StyledChartLegendValue;
+export const StyledLegendMeta = styled.span `
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  white-space: nowrap;
+`;
+export const StyledLegendPercent = styled.span `
+  min-width: 34px;
+  padding: 2px 5px;
+  border: 1px solid ${({ theme }) => theme.palette.divider};
+  border-radius: 4px;
+  background-color: ${({ theme }) => theme.palette.background.paper};
+  color: ${({ theme }) => theme.palette.text.primary};
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+`;
+export const StyledEmptyState = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+  border: 1px dashed ${({ theme }) => theme.palette.divider};
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    ${({ theme }) => theme.palette.background.paper} 0%,
+    ${({ theme }) => theme.palette.background.secondary} 70%
+  );
+  font-size: 12px;
+  color: ${({ theme }) => theme.palette.text.secondary};
+`;
+export const StyledTooltip = StyledChartTooltip;
+export const StyledTooltipHeader = StyledChartTooltipHeader;
+export const StyledTooltipSwatch = StyledChartTooltipSwatch;
+export const StyledTooltipLabel = StyledChartTooltipLabel;
+export const StyledTooltipMeta = StyledChartTooltipMeta;

package/dist/PieChart/PieChart.types.d.ts

@@ -0,0 +1,99 @@
+import React, { HTMLAttributes } from "react";
+import { PieArcDatum } from "d3-shape";
+export type PieChartDatum<TData = unknown> = {
+    /** Stable identifier for the slice. Falls back to label and index when omitted. */
+    id?: string | number;
+    /** Display label used for legends, labels, tooltips, and accessibility text. */
+    label: string;
+    /** Numeric value used to calculate the slice size. Values must be positive to render. */
+    value: number;
+    /** Optional per-slice color. Takes precedence over colorGradient, colors, and theme colors. */
+    color?: string;
+    /** Optional contextual payload returned in click callbacks and formatter functions. */
+    data?: TData;
+};
+export type PieChartColorGradient = 
+/** Ordered color stops used to generate slice colors across a gradient scale. */
+string[]
+/** Two-color gradient range used to generate slice colors from start to end. */
+ | {
+    /** Starting color for generated slice colors. */
+    from: string;
+    /** Ending color for generated slice colors. */
+    to: string;
+};
+export type PieChartProps<TData = unknown> = HTMLAttributes<HTMLDivElement> & {
+    /** Slice data rendered by the chart. Only positive finite values are displayed. */
+    data: PieChartDatum<TData>[];
+    /** SVG width and height in pixels. Defaults to 220. */
+    size?: number;
+    /** Inner radius in pixels. Set to 0 for a solid pie. Defaults to 58. */
+    innerRadius?: number;
+    /** Outer radius in pixels. Defaults to half the size minus chart padding. */
+    outerRadius?: number;
+    /** Corner radius for slice edges in pixels. Defaults to 1. */
+    cornerRadius?: number;
+    /** Angular spacing between slices in radians. Defaults to 0.004. */
+    padAngle?: number;
+    /** Categorical color palette for slices. Used after per-slice colors and colorGradient. */
+    colors?: string[];
+    /** Generates slice colors along a gradient scale. Per-slice color values still take precedence. */
+    colorGradient?: PieChartColorGradient;
+    /** Opacity applied to slice fills. Clamped between 0 and 1. Defaults to 1. */
+    sliceOpacity?: number;
+    /** Stroke color around each slice. Defaults to the theme paper background. */
+    sliceBorderColor?: string;
+    /** Stroke width around each slice in pixels. Defaults to 1. */
+    sliceBorderWidth?: number;
+    /** Stroke opacity around each slice. Clamped between 0 and 1. Defaults to 1. */
+    sliceBorderOpacity?: number;
+    /** SVG stroke line join used by each slice border. Defaults to "round". */
+    sliceBorderLineJoin?: React.SVGAttributes<SVGPathElement>["strokeLinejoin"];
+    /** Shows or hides the entire legend. Defaults to true. */
+    showLegend?: boolean;
+    /** Shows or hides legend color swatches. Defaults to true. */
+    showLegendSwatches?: boolean;
+    /** Shows or hides legend labels. Defaults to true. */
+    showLegendLabels?: boolean;
+    /** Shows or hides legend formatted values. Defaults to true. */
+    showLegendValues?: boolean;
+    /** Shows or hides legend percentage badges. Defaults to true. */
+    showLegendPercentages?: boolean;
+    /** Shows percentage labels inside sufficiently large slices. Defaults to false. */
+    showLabels?: boolean;
+    /** Label displayed in the center of donut charts. */
+    centerLabel?: React.ReactNode;
+    /** Value displayed above centerLabel in donut charts. */
+    centerValue?: React.ReactNode;
+    /** Content shown when no valid positive data values are available. Defaults to "No data". */
+    emptyLabel?: React.ReactNode;
+    /** Accessible label for the SVG chart image. Defaults to "Pie chart". */
+    ariaLabel?: string;
+    /** Animates slices on initial render with a fan-out sweep. Defaults to false. */
+    animateOnRender?: boolean;
+    /** Duration in milliseconds for each slice animation. Defaults to 520. */
+    animationDuration?: number;
+    /** Delay in milliseconds between each slice animation. Defaults to 35. */
+    animationStagger?: number;
+    /** Shows a custom themed tooltip when hovering over slices. Defaults to false. */
+    showTooltips?: boolean;
+    /** Formats values shown in the legend and default tooltip. */
+    valueFormatter?: (value: number, datum: PieChartDatum<TData>) => React.ReactNode;
+    /** Formats labels rendered inside slices. Receives the original datum and percentage as 0-1. */
+    labelFormatter?: (datum: PieChartDatum<TData>, percent: number) => React.ReactNode;
+    /** Custom tooltip renderer. Receives the original datum and percentage as 0-1. */
+    tooltipFormatter?: (datum: PieChartDatum<TData>, percent: number) => React.ReactNode;
+    /** Called when a slice is clicked or activated with Enter/Space. */
+    onSliceClick?: (event: React.MouseEvent<SVGPathElement> | React.KeyboardEvent<SVGPathElement>, datum: PieChartDatum<TData>) => void;
+    /** Called when a legend item is clicked or activated with Enter/Space. */
+    onLegendItemClick?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>, datum: PieChartDatum<TData>) => void;
+};
+export type ResolvedSlice<TData = unknown> = PieArcDatum<PieChartDatum<TData>> & {
+    color: string;
+    percent: number;
+};
+export type ActiveTooltip = {
+    sliceKey: string | number;
+    x: number;
+    y: number;
+};

package/dist/PieChart/PieChart.types.js

@@ -0,0 +1 @@
+export {};

package/dist/PieChart/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./PieChart";
+export type { PieChartColorGradient, PieChartDatum, PieChartProps, } from "./PieChart.types";

package/dist/PieChart/index.js

@@ -0,0 +1 @@
+export * from "./PieChart";

package/dist/Pill/Pill.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 import { X } from "lucide-react";
+import { getControlSizeTokens } from "../core";
 const StyledButton = styled.button `
   background-color: transparent;
   border: none;
@@ -35,7 +36,7 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
   flex-direction: row;
   width: fit-content;
   max-width: 250px;
-  gap: 5px;
+  gap: ${({ size }) => `${getControlSizeTokens(size).pillGap}px`};
   flex: 0;
 
   font-weight: 500;
@@ -45,55 +46,12 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     if (showRemoveIcon !== false) {
         return "0px";
     }
-    switch (size) {
-        case "xs":
-            return "8px";
-        case "sm":
-            return "10px";
-        case "md":
-            return "12px";
-        case "lg":
-            return "14px";
-        case "xl":
-            return "16px";
-        default:
-            return "10px";
-    }
+    return `${getControlSizeTokens(size).pillPaddingX}px`;
 }};
 
-  padding-inline-start: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "8px";
-        case "sm":
-            return "10px";
-        case "md":
-            return "12px";
-        case "lg":
-            return "14px";
-        case "xl":
-            return "16px";
-        default:
-            return "10px";
-    }
-}};
+  padding-inline-start: ${({ size }) => `${getControlSizeTokens(size).pillPaddingX}px`};
 
-  height: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "20px";
-        case "sm":
-            return "22px";
-        case "md":
-            return "24px";
-        case "lg":
-            return "26px";
-        case "xl":
-            return "28px";
-        default:
-            return "22px";
-    }
-}};
+  height: ${({ size }) => `${getControlSizeTokens(size).pillHeight}px`};
 
   border: 1px solid ${({ theme }) => theme.palette.divider};
   border-radius: 1000px;
@@ -105,43 +63,14 @@ const Pill = styled(({ className, children, title, size = "md", showRemoveIcon =
     overflow: hidden;
     text-overflow: ellipsis;
 
-    font-size: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "10px";
-        case "sm":
-            return "12px";
-        case "md":
-            return "14px";
-        case "lg":
-            return "16px";
-        case "xl":
-            return "18px";
-        default:
-            return "12px";
-    }
-}};
+    font-size: ${({ size }) => `${getControlSizeTokens(size).pillFontSize}px`};
   }
 
   svg {
     color: ${({ theme }) => theme.palette.text.primary};
 
-    width: ${({ size }) => {
-    switch (size) {
-        case "xs":
-            return "12px";
-        case "sm":
-            return "14px";
-        case "md":
-            return "16px";
-        case "lg":
-            return "18px";
-        case "xl":
-            return "20px";
-        default:
-            return "14px";
-    }
-}};
+    width: ${({ size }) => `${getControlSizeTokens(size).pillIconSize}px`};
+    height: ${({ size }) => `${getControlSizeTokens(size).pillIconSize}px`};
   }
 `;
 export default Pill;

package/dist/Popover/Popover.context.d.ts

@@ -10,12 +10,13 @@ export interface PopoverContextValue {
     withArrow: boolean;
     arrowSize: number;
     arrowRadius: number;
-    arrowRef: React.MutableRefObject<HTMLDivElement | null>;
+    arrowRef: React.MutableRefObject<SVGSVGElement | null>;
     withinPortal: boolean;
     trapFocus: boolean;
     returnFocus: boolean;
     keepMounted: boolean;
     zIndex: number;
+    role: "dialog" | "menu" | "tooltip";
     dropdownId: string;
     transitionProps: PopoverTransitionProps;
 }