@wallarm-org/design-system 0.73.0 → 0.74.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.73.0",
+  "version": "0.74.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",

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

@@ -1,30 +0,0 @@
-import type { FC, HTMLAttributes, Ref } from 'react';
-import type { TestableProps } from '../../../utils/testId';
-import type { ChartColor } from '../types';
-export interface HorizontalBarDatum {
-    /** Legend label, React key, and `data-name` hook. */
-    name: string;
-    /** Segment size; proportional to the bar total. */
-    value: number;
-    /** Built-in palette; resolves via `resolveChartColor`. Omitted → auto-assigned by index. */
-    color?: ChartColor;
-    /** Tailwind `bg-*` escape hatch; wins over `color` (inline fill is skipped). */
-    className?: string;
-}
-export interface HorizontalBarProps extends HTMLAttributes<HTMLDivElement>, TestableProps {
-    ref?: Ref<HTMLDivElement>;
-    /** Segments + legend. One array drives both, so colors stay in sync. */
-    data: HorizontalBarDatum[];
-    /** Headline number, rendered as `value.toLocaleString('en-US')`. Omitted → header hidden. */
-    value?: number;
-    /** Delta chip. Rendered as an internal Badge (arrow + number). Omitted → no chip. */
-    delta?: {
-        value: number;
-        trend?: 'up' | 'down';
-    };
-    /** Bar denominator. `> sum(data.value)` → grey remainder tail. Default: `sum(data.value)`. */
-    total?: number;
-    /** Show/hide the legend. Default: true. */
-    legend?: boolean;
-}
-export declare const HorizontalBar: FC<HorizontalBarProps>;

package/dist/components/SimpleCharts/HorizontalBar/HorizontalBar.js

@@ -1,132 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo } from "react";
-import { ArrowDown, ArrowUp } from "../../../icons/index.js";
-import { cn } from "../../../utils/cn.js";
-import { Badge } from "../../Badge/index.js";
-import { resolveChartColor } from "../lib/chartPalette.js";
-import { horizontalBarBarClasses, horizontalBarBarWrapperClasses, horizontalBarHeaderClasses, horizontalBarLegendClasses, horizontalBarLegendDotClasses, horizontalBarLegendItemClasses, horizontalBarLegendLabelClasses, horizontalBarRemainderClasses, horizontalBarRootClasses, horizontalBarSegmentClasses, horizontalBarValueClasses } from "./classes.js";
-import { resolveSegments } from "./lib/resolveSegments.js";
-const formatNumber = (n)=>n.toLocaleString('en-US');
-const HorizontalBar = ({ data, value, delta, total, legend = true, className, ref, 'data-testid': testId, ...props })=>{
-    const segments = useMemo(()=>resolveSegments(data, total), [
-        data,
-        total
-    ]);
-    const slotTestId = (slot)=>testId ? `${testId}--${slot}` : void 0;
-    const legendSegments = useMemo(()=>segments.filter((s)=>!s.isRemainder), [
-        segments
-    ]);
-    const barAriaLabel = useMemo(()=>legend ? void 0 : legendSegments.length ? legendSegments.map((s)=>`${s.key} ${formatNumber(s.value)}`).join(', ') : void 0, [
-        legend,
-        legendSegments
-    ]);
-    const hasDuplicateNames = useMemo(()=>{
-        const seen = new Set();
-        for (const d of data){
-            if (seen.has(d.name)) return true;
-            seen.add(d.name);
-        }
-        return false;
-    }, [
-        data
-    ]);
-    useEffect(()=>{
-        if (hasDuplicateNames && 'production' !== process.env.NODE_ENV) console.warn("[HorizontalBar] `data` contains duplicate `name` values. Names are used as the React key and the `data-name` hook — duplicates cause key collisions and ambiguous selectors. Provide unique names.");
-    }, [
-        hasDuplicateNames
-    ]);
-    const hasBar = data.length > 0;
-    const hasValue = 'number' == typeof value;
-    const hasDelta = !!delta;
-    const deltaDirection = delta ? delta.trend ?? (delta.value >= 0 ? 'up' : 'down') : null;
-    const deltaAbs = delta ? Math.abs(delta.value) : 0;
-    return /*#__PURE__*/ jsxs("div", {
-        ...props,
-        ref: ref,
-        "data-slot": "horizontal-bar",
-        "data-testid": testId,
-        className: cn(horizontalBarRootClasses, className),
-        children: [
-            (hasValue || hasDelta) && /*#__PURE__*/ jsxs("div", {
-                "data-slot": "horizontal-bar-header",
-                "data-testid": slotTestId('header'),
-                className: horizontalBarHeaderClasses,
-                children: [
-                    hasValue && /*#__PURE__*/ jsx("span", {
-                        "data-slot": "horizontal-bar-value",
-                        "data-testid": slotTestId('value'),
-                        className: horizontalBarValueClasses,
-                        children: formatNumber(value)
-                    }),
-                    delta && /*#__PURE__*/ jsxs(Badge, {
-                        type: "secondary",
-                        color: "w-orange",
-                        size: "medium",
-                        role: "img",
-                        "aria-label": `${deltaDirection} ${formatNumber(deltaAbs)}`,
-                        children: [
-                            'up' === deltaDirection ? /*#__PURE__*/ jsx(ArrowUp, {
-                                "aria-hidden": true
-                            }) : /*#__PURE__*/ jsx(ArrowDown, {
-                                "aria-hidden": true
-                            }),
-                            formatNumber(deltaAbs)
-                        ]
-                    })
-                ]
-            }),
-            hasBar && /*#__PURE__*/ jsx("div", {
-                "data-slot": "horizontal-bar-bar-wrapper",
-                className: horizontalBarBarWrapperClasses,
-                children: /*#__PURE__*/ jsx("div", {
-                    "data-slot": "horizontal-bar-bar",
-                    "data-testid": slotTestId('bar'),
-                    "aria-hidden": legend ? 'true' : void 0,
-                    role: barAriaLabel ? 'img' : void 0,
-                    "aria-label": barAriaLabel,
-                    className: horizontalBarBarClasses,
-                    children: segments.map((seg)=>/*#__PURE__*/ jsx("div", {
-                            "data-slot": "horizontal-bar-segment",
-                            "data-testid": slotTestId('segment'),
-                            "data-name": seg.isRemainder ? void 0 : seg.key,
-                            "data-remainder": seg.isRemainder ? 'true' : void 0,
-                            className: cn(horizontalBarSegmentClasses, seg.isRemainder && horizontalBarRemainderClasses, seg.className),
-                            style: {
-                                flexGrow: seg.value,
-                                flexBasis: 0,
-                                backgroundColor: seg.isRemainder || seg.className ? void 0 : resolveChartColor(seg.color)
-                            }
-                        }, seg.key))
-                })
-            }),
-            legend && legendSegments.length > 0 && /*#__PURE__*/ jsx("div", {
-                "data-slot": "horizontal-bar-legend",
-                "data-testid": slotTestId('legend'),
-                className: horizontalBarLegendClasses,
-                children: legendSegments.map((seg)=>/*#__PURE__*/ jsxs("span", {
-                        "data-slot": "horizontal-bar-legend-item",
-                        "data-testid": slotTestId('legend-item'),
-                        "data-name": seg.key,
-                        className: horizontalBarLegendItemClasses,
-                        children: [
-                            /*#__PURE__*/ jsx("span", {
-                                "data-slot": "horizontal-bar-legend-dot",
-                                "data-testid": slotTestId('legend-dot'),
-                                "aria-hidden": "true",
-                                className: cn(horizontalBarLegendDotClasses, seg.className),
-                                style: {
-                                    backgroundColor: seg.className ? void 0 : resolveChartColor(seg.color)
-                                }
-                            }),
-                            /*#__PURE__*/ jsx("span", {
-                                className: horizontalBarLegendLabelClasses,
-                                children: seg.key
-                            })
-                        ]
-                    }, seg.key))
-            })
-        ]
-    });
-};
-HorizontalBar.displayName = 'HorizontalBar';
-export { HorizontalBar };

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

@@ -1,11 +0,0 @@
-export declare const horizontalBarRootClasses: string;
-export declare const horizontalBarBarWrapperClasses: string;
-export declare const horizontalBarBarClasses: string;
-export declare const horizontalBarSegmentClasses: string;
-export declare const horizontalBarRemainderClasses: string;
-export declare const horizontalBarHeaderClasses: string;
-export declare const horizontalBarValueClasses: string;
-export declare const horizontalBarLegendClasses: string;
-export declare const horizontalBarLegendItemClasses: string;
-export declare const horizontalBarLegendDotClasses: string;
-export declare const horizontalBarLegendLabelClasses: string;

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

@@ -1,12 +0,0 @@
-const horizontalBarRootClasses = "flex flex-col w-full";
-const horizontalBarBarWrapperClasses = "px-16 py-8 w-full";
-const horizontalBarBarClasses = "flex h-8 w-full overflow-hidden rounded-4";
-const horizontalBarSegmentClasses = "h-full min-w-px";
-const horizontalBarRemainderClasses = "bg-bg-strong-primary";
-const horizontalBarHeaderClasses = "flex items-baseline gap-8 px-16 pt-8";
-const horizontalBarValueClasses = "text-3xl font-medium leading-3xl text-text-primary";
-const horizontalBarLegendClasses = "flex flex-row flex-wrap items-center gap-6 px-12 py-2";
-const horizontalBarLegendItemClasses = "inline-flex items-center gap-4 px-4 py-2";
-const horizontalBarLegendDotClasses = "inline-block size-8 rounded-2 shrink-0";
-const horizontalBarLegendLabelClasses = "text-xs font-mono text-text-primary";
-export { horizontalBarBarClasses, horizontalBarBarWrapperClasses, horizontalBarHeaderClasses, horizontalBarLegendClasses, horizontalBarLegendDotClasses, horizontalBarLegendItemClasses, horizontalBarLegendLabelClasses, horizontalBarRemainderClasses, horizontalBarRootClasses, horizontalBarSegmentClasses, horizontalBarValueClasses };

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

@@ -1,16 +0,0 @@
-const REMAINDER_KEY = '__horizontal-bar-remainder__';
-const HORIZONTAL_BAR_PALETTE = [
-    'red',
-    'brand',
-    'amber',
-    'blue',
-    'green',
-    'purple',
-    'teal',
-    'cyan',
-    'indigo',
-    'pink',
-    'rose',
-    'slate'
-];
-export { HORIZONTAL_BAR_PALETTE, REMAINDER_KEY };

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

@@ -1 +0,0 @@
-export { HorizontalBar, type HorizontalBarDatum, type HorizontalBarProps, } from './HorizontalBar';

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

@@ -1 +0,0 @@
-export { HorizontalBar } from "./HorizontalBar.js";