@wallarm-org/design-system 0.31.1 → 0.32.0

package/dist/components/SimpleCharts/PieChart/PieChartLegendItem.js

@@ -0,0 +1,116 @@
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useContext, useMemo } from "react";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { clamp01 } from "../lib/clamp01.js";
+import { pieChartLegendItemVariants } from "./classes.js";
+import { PieChartActiveContext, PieChartDataContext, PieChartItemContext, PieChartSelectionContext } from "./PieChartContext.js";
+const PieChartLegendItem = ({ name, value, selected: selectedProp, className, children, ref, onClick, onKeyDown, onMouseEnter, onMouseLeave, onFocus, onBlur, ...props })=>{
+    const testId = useTestId('legend-item');
+    const dataCtx = useContext(PieChartDataContext);
+    const { activeName } = useContext(PieChartActiveContext);
+    const { selectedSet } = useContext(PieChartSelectionContext);
+    const interactive = 'function' == typeof onClick;
+    const active = activeName === name;
+    const selected = selectedProp ?? selectedSet.has(name);
+    const dimmed = !selected && !active && selectedSet.size > 0;
+    const ratio = useMemo(()=>{
+        if (!dataCtx?.isValidTotal) return 0;
+        const lookupValue = value ?? dataCtx.byName.get(name)?.value ?? 0;
+        if (!Number.isFinite(lookupValue)) return 0;
+        return clamp01(lookupValue / dataCtx.total);
+    }, [
+        dataCtx,
+        name,
+        value
+    ]);
+    const itemValue = useMemo(()=>({
+            ratio,
+            selected,
+            interactive,
+            name,
+            active
+        }), [
+        ratio,
+        selected,
+        interactive,
+        name,
+        active
+    ]);
+    const setActive = dataCtx?.setActive;
+    const handleMouseEnter = useCallback((event)=>{
+        onMouseEnter?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(name);
+    }, [
+        onMouseEnter,
+        setActive,
+        name
+    ]);
+    const handleMouseLeave = useCallback((event)=>{
+        onMouseLeave?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(null);
+    }, [
+        onMouseLeave,
+        setActive
+    ]);
+    const handleFocus = useCallback((event)=>{
+        onFocus?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(name);
+    }, [
+        onFocus,
+        setActive,
+        name
+    ]);
+    const handleBlur = useCallback((event)=>{
+        onBlur?.(event);
+        if (event.defaultPrevented) return;
+        setActive?.(null);
+    }, [
+        onBlur,
+        setActive
+    ]);
+    const handleKeyDown = useCallback((event)=>{
+        onKeyDown?.(event);
+        if (!interactive || event.defaultPrevented) return;
+        if ('Enter' === event.key || ' ' === event.key) {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    }, [
+        interactive,
+        onKeyDown
+    ]);
+    return /*#__PURE__*/ jsx(PieChartItemContext.Provider, {
+        value: itemValue,
+        children: /*#__PURE__*/ jsx("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "pie-chart-legend-item",
+            "data-testid": testId,
+            "data-name": name,
+            "data-active": active ? 'true' : void 0,
+            "data-selected": selected ? 'true' : void 0,
+            role: interactive ? 'button' : void 0,
+            tabIndex: interactive ? 0 : void 0,
+            "aria-current": selected ? 'true' : void 0,
+            onClick: onClick,
+            onKeyDown: handleKeyDown,
+            onMouseEnter: handleMouseEnter,
+            onMouseLeave: handleMouseLeave,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            className: cn(pieChartLegendItemVariants({
+                interactive,
+                active,
+                selected,
+                dimmed
+            }), className),
+            children: children
+        })
+    });
+};
+PieChartLegendItem.displayName = 'PieChartLegendItem';
+export { PieChartLegendItem };

package/dist/components/SimpleCharts/PieChart/PieChartLegendPercent.d.ts

@@ -0,0 +1,15 @@
+import { type FC, type HTMLAttributes, type Ref } from 'react';
+export type PieChartLegendPercentVariant = 'split' | 'muted' | 'inherit';
+export interface PieChartLegendPercentProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+    /** Number of fractional digits in the percent label. Defaults to `0`. */
+    digits?: number;
+    /**
+     * Color treatment for the value and the `%` symbol. Mirrors `BarListPercent`.
+     * - `split` (default, matches Figma) — value uses `text-text-primary`, symbol uses `text-text-secondary`.
+     * - `muted` — both tokens use `text-text-secondary`.
+     * - `inherit` — both inherit the parent's color (e.g. follow `PieChartLegendValue`).
+     */
+    variant?: PieChartLegendPercentVariant;
+}
+export declare const PieChartLegendPercent: FC<PieChartLegendPercentProps>;

package/dist/components/SimpleCharts/PieChart/PieChartLegendPercent.js

@@ -0,0 +1,34 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useContext } from "react";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { pieChartLegendPercentClasses, pieChartLegendPercentSymbolVariants, pieChartLegendPercentValueVariants } from "./classes.js";
+import { PieChartItemContext } from "./PieChartContext.js";
+const PieChartLegendPercent = ({ digits = 0, variant = 'split', className, children, ref, ...props })=>{
+    const testId = useTestId('legend-percent');
+    const itemCtx = useContext(PieChartItemContext);
+    const percent = (itemCtx?.ratio ?? 0) * 100;
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-legend-percent",
+        "data-testid": testId,
+        className: cn(pieChartLegendPercentClasses, pieChartLegendPercentValueVariants({
+            variant
+        }), className),
+        children: children ?? /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                percent.toFixed(digits),
+                /*#__PURE__*/ jsx("span", {
+                    "data-slot": "pie-chart-legend-percent-symbol",
+                    className: pieChartLegendPercentSymbolVariants({
+                        variant
+                    }),
+                    children: "%"
+                })
+            ]
+        })
+    });
+};
+PieChartLegendPercent.displayName = 'PieChartLegendPercent';
+export { PieChartLegendPercent };

package/dist/components/SimpleCharts/PieChart/PieChartLegendValue.d.ts

@@ -0,0 +1,5 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+export interface PieChartLegendValueProps extends HTMLAttributes<HTMLSpanElement> {
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare const PieChartLegendValue: FC<PieChartLegendValueProps>;

package/dist/components/SimpleCharts/PieChart/PieChartLegendValue.js

@@ -0,0 +1,16 @@
+import { jsx } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { useTestId } from "../../../utils/testId.js";
+import { pieChartLegendValueClasses } from "./classes.js";
+const PieChartLegendValue = ({ className, ref, ...props })=>{
+    const testId = useTestId('legend-value');
+    return /*#__PURE__*/ jsx("span", {
+        ...props,
+        ref: ref,
+        "data-slot": "pie-chart-legend-value",
+        "data-testid": testId,
+        className: cn(pieChartLegendValueClasses, className)
+    });
+};
+PieChartLegendValue.displayName = 'PieChartLegendValue';
+export { PieChartLegendValue };

package/dist/components/SimpleCharts/PieChart/PieChartSkeleton.d.ts

@@ -0,0 +1,8 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import { type TestableProps } from '../../../utils/testId';
+export interface PieChartSkeletonProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
+    ref?: Ref<HTMLDivElement>;
+    /** Number of skeleton rows in the legend column. Defaults to `5`. */
+    rows?: number;
+}
+export declare const PieChartSkeleton: FC<PieChartSkeletonProps>;

package/dist/components/SimpleCharts/PieChart/PieChartSkeleton.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../../utils/cn.js";
+import { TestIdProvider, useTestId } from "../../../utils/testId.js";
+import { Skeleton } from "../../Skeleton/index.js";
+import { pieChartDonutClasses, pieChartLegendClasses, pieChartRootClasses, pieChartSkeletonRowClasses } from "./classes.js";
+const PieChartSkeletonRow = ()=>{
+    const testId = useTestId('skeleton-row');
+    return /*#__PURE__*/ jsx("div", {
+        "data-slot": "pie-chart-skeleton-row",
+        "data-testid": testId,
+        className: pieChartSkeletonRowClasses,
+        children: /*#__PURE__*/ jsx(Skeleton, {
+            width: "100%",
+            height: "24px",
+            rounded: 6
+        })
+    });
+};
+PieChartSkeletonRow.displayName = 'PieChartSkeletonRow';
+const PieChartSkeleton = ({ rows = 5, className, ref, 'data-testid': testId, ...props })=>/*#__PURE__*/ jsx(TestIdProvider, {
+        value: testId,
+        children: /*#__PURE__*/ jsxs("div", {
+            ...props,
+            ref: ref,
+            "data-slot": "pie-chart-skeleton",
+            "data-testid": testId,
+            "aria-busy": "true",
+            "aria-live": "polite",
+            className: cn(pieChartRootClasses, className),
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: cn(pieChartDonutClasses, 'flex items-center justify-center'),
+                    children: /*#__PURE__*/ jsx(Skeleton, {
+                        width: "120px",
+                        height: "120px",
+                        rounded: "full"
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: cn(pieChartLegendClasses, 'gap-8 pl-0 pr-12 py-12'),
+                    children: Array.from({
+                        length: rows
+                    }, (_, i)=>/*#__PURE__*/ jsx(PieChartSkeletonRow, {}, i))
+                })
+            ]
+        })
+    });
+PieChartSkeleton.displayName = 'PieChartSkeleton';
+export { PieChartSkeleton };

package/dist/components/SimpleCharts/PieChart/classes.d.ts

@@ -0,0 +1,22 @@
+export declare const pieChartRootClasses: string;
+export declare const pieChartDonutClasses: string;
+export declare const pieChartCenterClasses: string;
+export declare const pieChartCenterValueClasses: string;
+export declare const pieChartCenterLabelClasses: string;
+export declare const pieChartLegendClasses: string;
+export declare const pieChartLegendItemVariants: (props?: ({
+    interactive?: boolean | null | undefined;
+    active?: boolean | null | undefined;
+    selected?: boolean | null | undefined;
+    dimmed?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pieChartLegendValueClasses: string;
+export declare const pieChartLegendPercentClasses: string;
+export declare const legendDotClasses: string;
+export declare const pieChartLegendPercentValueVariants: (props?: ({
+    variant?: "inherit" | "split" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pieChartLegendPercentSymbolVariants: (props?: ({
+    variant?: "inherit" | "split" | "muted" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const pieChartSkeletonRowClasses: string;

package/dist/components/SimpleCharts/PieChart/classes.js

@@ -0,0 +1,62 @@
+import { cva } from "class-variance-authority";
+const pieChartRootClasses = "relative flex flex-row items-start w-full";
+const pieChartDonutClasses = "relative shrink-0 overflow-visible px-24 py-8";
+const pieChartCenterClasses = "pointer-events-none absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col items-center text-center w-58";
+const pieChartCenterValueClasses = "font-mono font-medium text-text-primary text-base leading-sm w-full";
+const pieChartCenterLabelClasses = "font-mono font-normal text-text-secondary text-xs leading-xs w-full";
+const pieChartLegendClasses = "flex flex-1 min-w-0 flex-col pt-0 pr-4 pb-0 pl-0";
+const pieChartLegendItemVariants = cva("group/pie-chart-legend-item relative flex items-center w-full h-32 px-8 gap-8 rounded-8 transition-colors outline-none", {
+    variants: {
+        interactive: {
+            true: "cursor-pointer focus-visible:bg-states-primary-hover focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-primary",
+            false: ''
+        },
+        active: {
+            true: 'bg-states-primary-hover',
+            false: 'hover:bg-states-primary-hover'
+        },
+        selected: {
+            true: 'bg-states-primary-active',
+            false: ''
+        },
+        dimmed: {
+            true: 'opacity-60',
+            false: ''
+        }
+    },
+    defaultVariants: {
+        interactive: false,
+        active: false,
+        selected: false,
+        dimmed: false
+    }
+});
+const pieChartLegendValueClasses = "ml-auto shrink-0 flex items-center gap-2 text-xs font-mono font-medium text-text-primary whitespace-nowrap pointer-events-none";
+const pieChartLegendPercentClasses = "inline-flex items-center gap-2 font-medium";
+const legendDotClasses = "text-text-tertiary leading-xs";
+const pieChartLegendPercentValueVariants = cva('inline-flex items-center', {
+    variants: {
+        variant: {
+            split: 'text-text-primary',
+            muted: 'text-text-secondary',
+            inherit: 'text-inherit'
+        }
+    },
+    defaultVariants: {
+        variant: 'split'
+    }
+});
+const pieChartLegendPercentSymbolVariants = cva('', {
+    variants: {
+        variant: {
+            split: 'text-text-secondary',
+            muted: '',
+            inherit: ''
+        }
+    },
+    defaultVariants: {
+        variant: 'split'
+    }
+});
+const pieChartSkeletonRowClasses = "relative h-24 w-full";
+export { legendDotClasses, pieChartCenterClasses, pieChartCenterLabelClasses, pieChartCenterValueClasses, pieChartDonutClasses, pieChartLegendClasses, pieChartLegendItemVariants, pieChartLegendPercentClasses, pieChartLegendPercentSymbolVariants, pieChartLegendPercentValueVariants, pieChartLegendValueClasses, pieChartRootClasses, pieChartSkeletonRowClasses };

package/dist/components/SimpleCharts/PieChart/constants.d.ts

@@ -0,0 +1,9 @@
+import type { ChartColor } from '../types';
+export declare const PIE_DONUT_SIZE = 120;
+export declare const PIE_DONUT_OUTER_RADIUS = 60;
+export declare const PIE_DONUT_INNER_RADIUS = 44;
+export declare const PIE_DONUT_CORNER_RADIUS = 4;
+export declare const PIE_DONUT_PADDING_ANGLE = 2;
+export declare const PIE_DONUT_ANIMATION_DURATION = 400;
+export declare const PIE_DONUT_ANIMATION_BEGIN = 0;
+export declare const PIE_SLICE_FILL: Record<ChartColor, string>;

package/dist/components/SimpleCharts/PieChart/constants.js

@@ -0,0 +1,22 @@
+const PIE_DONUT_SIZE = 120;
+const PIE_DONUT_OUTER_RADIUS = 60;
+const PIE_DONUT_INNER_RADIUS = 44;
+const PIE_DONUT_CORNER_RADIUS = 4;
+const PIE_DONUT_PADDING_ANGLE = 2;
+const PIE_DONUT_ANIMATION_DURATION = 400;
+const PIE_DONUT_ANIMATION_BEGIN = 0;
+const PIE_SLICE_FILL = {
+    brand: 'var(--color-w-orange-500)',
+    blue: 'var(--color-blue-500)',
+    green: 'var(--color-green-500)',
+    red: 'var(--color-red-500)',
+    amber: 'var(--color-amber-500)',
+    purple: 'var(--color-purple-500)',
+    slate: 'var(--color-badge-slate-dark-alt)',
+    teal: 'var(--color-teal-500)',
+    cyan: 'var(--color-cyan-500)',
+    indigo: 'var(--color-indigo-500)',
+    pink: 'var(--color-pink-500)',
+    rose: 'var(--color-rose-500)'
+};
+export { PIE_DONUT_ANIMATION_BEGIN, PIE_DONUT_ANIMATION_DURATION, PIE_DONUT_CORNER_RADIUS, PIE_DONUT_INNER_RADIUS, PIE_DONUT_OUTER_RADIUS, PIE_DONUT_PADDING_ANGLE, PIE_DONUT_SIZE, PIE_SLICE_FILL };

package/dist/components/SimpleCharts/PieChart/index.d.ts

@@ -0,0 +1,10 @@
+export { LegendDot, type LegendDotProps } from './LegendDot';
+export { PieChart, type PieChartProps } from './PieChart';
+export { PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, } from './PieChartCenter';
+export type { PieChartDatum } from './PieChartContext';
+export { PieChartDonut, type PieChartDonutProps } from './PieChartDonut';
+export { PieChartLegend, type PieChartLegendProps } from './PieChartLegend';
+export { PieChartLegendItem, type PieChartLegendItemProps } from './PieChartLegendItem';
+export { PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, } from './PieChartLegendPercent';
+export { PieChartLegendValue, type PieChartLegendValueProps } from './PieChartLegendValue';
+export { PieChartSkeleton, type PieChartSkeletonProps } from './PieChartSkeleton';

package/dist/components/SimpleCharts/PieChart/index.js

@@ -0,0 +1,10 @@
+import { LegendDot } from "./LegendDot.js";
+import { PieChart } from "./PieChart.js";
+import { PieChartCenter, PieChartCenterLabel, PieChartCenterValue } from "./PieChartCenter.js";
+import { PieChartDonut } from "./PieChartDonut.js";
+import { PieChartLegend } from "./PieChartLegend.js";
+import { PieChartLegendItem } from "./PieChartLegendItem.js";
+import { PieChartLegendPercent } from "./PieChartLegendPercent.js";
+import { PieChartLegendValue } from "./PieChartLegendValue.js";
+import { PieChartSkeleton } from "./PieChartSkeleton.js";
+export { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton };

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

@@ -1,2 +1,4 @@
 export { BarList, BarListBar, type BarListBarProps, BarListItem, type BarListItemProps, BarListLabel, type BarListLabelProps, BarListPercent, type BarListPercentProps, type BarListProps, BarListSkeleton, type BarListSkeletonProps, BarListValue, type BarListValueProps, } from './BarList';
 export { Chart, ChartActions, type ChartActionsProps, ChartEmpty, type ChartEmptyProps, ChartHeader, type ChartHeaderProps, type ChartProps, ChartTitle, type ChartTitleProps, } from './Chart';
+export { LegendDot, type LegendDotProps, PieChart, PieChartCenter, PieChartCenterLabel, type PieChartCenterLabelProps, type PieChartCenterProps, PieChartCenterValue, type PieChartCenterValueProps, type PieChartDatum, PieChartDonut, type PieChartDonutProps, PieChartLegend, PieChartLegendItem, type PieChartLegendItemProps, PieChartLegendPercent, type PieChartLegendPercentProps, type PieChartLegendPercentVariant, type PieChartLegendProps, PieChartLegendValue, type PieChartLegendValueProps, type PieChartProps, PieChartSkeleton, type PieChartSkeletonProps, } from './PieChart';
+export type { ChartColor } from './types';

package/dist/components/SimpleCharts/index.js

@@ -1,3 +1,4 @@
 import { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue } from "./BarList/index.js";
 import { Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle } from "./Chart/index.js";
-export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle };
+import { LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton } from "./PieChart/index.js";
+export { BarList, BarListBar, BarListItem, BarListLabel, BarListPercent, BarListSkeleton, BarListValue, Chart, ChartActions, ChartEmpty, ChartHeader, ChartTitle, LegendDot, PieChart, PieChartCenter, PieChartCenterLabel, PieChartCenterValue, PieChartDonut, PieChartLegend, PieChartLegendItem, PieChartLegendPercent, PieChartLegendValue, PieChartSkeleton };

package/dist/components/SimpleCharts/lib/clamp01.d.ts

@@ -0,0 +1 @@
+export declare const clamp01: (n: number) => number;

package/dist/components/SimpleCharts/lib/clamp01.js

@@ -0,0 +1,6 @@
+const clamp01 = (n)=>{
+    if (n < 0) return 0;
+    if (n > 1) return 1;
+    return n;
+};
+export { clamp01 };