@wallarm-org/design-system 0.44.0 → 0.45.0-rc-feature-WDS-121-progress.1

package/dist/components/Progress/Progress.d.ts

@@ -0,0 +1,12 @@
+import type { FC, HTMLAttributes, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+import type { ProgressColor, ProgressSize } from './types';
+export interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'>, TestableProps {
+    value?: number;
+    max?: number;
+    size?: ProgressSize;
+    color?: ProgressColor;
+    showLabel?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Progress: FC<ProgressProps>;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,46 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../utils/cn.js";
+import { progressIndicatorVariants, progressTrackVariants } from "./classes.js";
+const Progress = ({ value = 0, max = 100, size = 'md', color = 'w-orange', showLabel = false, className, 'data-testid': testId, ref, ...props })=>{
+    const percentage = Math.min(100, Math.max(0, value / max * 100));
+    const roundedPercentage = Math.round(percentage);
+    return /*#__PURE__*/ jsxs("div", {
+        ...props,
+        ref: ref,
+        "data-slot": "progress",
+        "data-testid": testId,
+        role: "progressbar",
+        "aria-valuenow": value,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn('flex flex-1 items-center gap-8 min-w-118 w-full', className),
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                "data-slot": "progress-track",
+                className: progressTrackVariants({
+                    size
+                }),
+                children: /*#__PURE__*/ jsx("div", {
+                    "data-slot": "progress-indicator",
+                    className: progressIndicatorVariants({
+                        size,
+                        color
+                    }),
+                    style: {
+                        width: `${percentage}%`
+                    }
+                })
+            }),
+            showLabel && /*#__PURE__*/ jsxs("span", {
+                "data-slot": "progress-label",
+                className: "text-text-secondary font-sans-display text-xs font-medium tabular-nums",
+                children: [
+                    roundedPercentage,
+                    "%"
+                ]
+            })
+        ]
+    });
+};
+Progress.displayName = 'Progress';
+export { Progress };

package/dist/components/Progress/classes.d.ts

@@ -0,0 +1,8 @@
+import type { ProgressColor } from './types';
+export declare const progressTrackVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const progressIndicatorVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    color?: ProgressColor | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Progress/classes.js

@@ -0,0 +1,51 @@
+import { cva } from "class-variance-authority";
+const progressColorMap = {
+    slate: 'bg-badge-slate-strong',
+    red: 'bg-badge-red-strong',
+    'w-orange': 'bg-badge-w-orange-strong',
+    amber: 'bg-badge-amber-strong',
+    yellow: 'bg-badge-yellow-strong',
+    lime: 'bg-badge-lime-strong',
+    green: 'bg-badge-green-strong',
+    emerald: 'bg-badge-emerald-strong',
+    teal: 'bg-badge-teal-strong',
+    cyan: 'bg-badge-cyan-strong',
+    sky: 'bg-badge-sky-strong',
+    blue: 'bg-badge-blue-strong',
+    indigo: 'bg-badge-indigo-strong',
+    violet: 'bg-badge-violet-strong',
+    fuchsia: 'bg-badge-fuchsia-strong',
+    pink: 'bg-badge-pink-strong',
+    rose: 'bg-badge-rose-strong',
+    gray: 'bg-badge-gray-strong',
+    zinc: 'bg-badge-zinc-strong',
+    neutral: 'bg-badge-neutral-strong',
+    stone: 'bg-badge-stone-strong'
+};
+const progressTrackVariants = cva('relative w-full overflow-hidden bg-bg-strong-primary', {
+    variants: {
+        size: {
+            sm: 'h-4 rounded-2',
+            md: 'h-8 rounded-4',
+            lg: 'h-12 rounded-6'
+        }
+    },
+    defaultVariants: {
+        size: 'md'
+    }
+});
+const progressIndicatorVariants = cva('h-full transition-all duration-300 ease-out', {
+    variants: {
+        size: {
+            sm: 'rounded-2',
+            md: 'rounded-4',
+            lg: 'rounded-6'
+        },
+        color: progressColorMap
+    },
+    defaultVariants: {
+        size: 'md',
+        color: 'blue'
+    }
+});
+export { progressIndicatorVariants, progressTrackVariants };

package/dist/components/Progress/constants.d.ts

@@ -0,0 +1,23 @@
+export declare const ProgressColorEnum: {
+    readonly Slate: "slate";
+    readonly Red: "red";
+    readonly WOrange: "w-orange";
+    readonly Amber: "amber";
+    readonly Yellow: "yellow";
+    readonly Lime: "lime";
+    readonly Green: "green";
+    readonly Emerald: "emerald";
+    readonly Teal: "teal";
+    readonly Cyan: "cyan";
+    readonly Sky: "sky";
+    readonly Blue: "blue";
+    readonly Indigo: "indigo";
+    readonly Violet: "violet";
+    readonly Fuchsia: "fuchsia";
+    readonly Pink: "pink";
+    readonly Rose: "rose";
+    readonly Gray: "gray";
+    readonly Zinc: "zinc";
+    readonly Neutral: "neutral";
+    readonly Stone: "stone";
+};

package/dist/components/Progress/constants.js

@@ -0,0 +1,24 @@
+const ProgressColorEnum = {
+    Slate: 'slate',
+    Red: 'red',
+    WOrange: 'w-orange',
+    Amber: 'amber',
+    Yellow: 'yellow',
+    Lime: 'lime',
+    Green: 'green',
+    Emerald: 'emerald',
+    Teal: 'teal',
+    Cyan: 'cyan',
+    Sky: 'sky',
+    Blue: 'blue',
+    Indigo: 'indigo',
+    Violet: 'violet',
+    Fuchsia: 'fuchsia',
+    Pink: 'pink',
+    Rose: 'rose',
+    Gray: 'gray',
+    Zinc: 'zinc',
+    Neutral: 'neutral',
+    Stone: 'stone'
+};
+export { ProgressColorEnum };

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

@@ -0,0 +1,4 @@
+export { progressIndicatorVariants, progressTrackVariants } from './classes';
+export { ProgressColorEnum } from './constants';
+export { Progress, type ProgressProps } from './Progress';
+export type { ProgressColor } from './types';

package/dist/components/Progress/index.js

@@ -0,0 +1,4 @@
+import { progressIndicatorVariants, progressTrackVariants } from "./classes.js";
+import { ProgressColorEnum } from "./constants.js";
+import { Progress } from "./Progress.js";
+export { Progress, ProgressColorEnum, progressIndicatorVariants, progressTrackVariants };

package/dist/components/Progress/types.d.ts

@@ -0,0 +1,3 @@
+import type { ProgressColorEnum } from './constants';
+export type ProgressSize = 'sm' | 'md' | 'lg';
+export type ProgressColor = (typeof ProgressColorEnum)[keyof typeof ProgressColorEnum];

package/dist/components/SimpleCharts/LineChart/LineChart.js

@@ -25,15 +25,15 @@ function LineChart({ data, series, xKey, activeKey: controlledActiveKey, onActiv
         onActiveKeyChange,
         seriesByKey
     });
+    const onZoomChangeRef = useRef(onZoomChange);
+    onZoomChangeRef.current = onZoomChange;
     const emitZoom = useCallback((range)=>{
-        onZoomChange?.(range);
-    }, [
-        onZoomChange
-    ]);
+        onZoomChangeRef.current?.(range);
+    }, []);
     const zoom = useLineChartZoomState({
         data,
         xKey,
-        onZoomChange
+        onZoomChangeRef
     });
     const hiddenSet = useMemo(()=>{
         if (!filteredKeys?.length) return EMPTY_HIDDEN_SET;

package/dist/components/SimpleCharts/LineChart/LineChartZoomBrush.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo, useRef } from "react";
+import { useContext, useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { ReferenceArea, usePlotArea } from "recharts";
 import { formatChartDateTime } from "../lib/timeFormatters.js";
@@ -12,22 +12,81 @@ import { LineChartZoomPopoverRange } from "./LineChartZoomPopoverRange.js";
 import { formatRange as formatRange_js_formatRange } from "./lib/formatRange.js";
 const defaultFormatRange = formatRange_js_formatRange((value)=>formatChartDateTime(value) || String(value));
 const POPOVER_OFFSET_X = 12;
+const RECHARTS_SURFACE = '.recharts-surface';
 const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange, confirmLabel = 'Zoom in', container })=>{
     const dataCtx = useContext(LineChartDataContext);
     const zoomCtx = useContext(LineChartZoomContext);
     const popoverRef = useRef(null);
     const plotArea = usePlotArea();
     const rootRef = zoomCtx?.rootRef;
-    const centerY = useMemo(()=>{
-        if (!plotArea || !rootRef?.current) return null;
-        const surface = rootRef.current.querySelector('.recharts-surface');
-        if (!surface) return null;
+    const drag = zoomCtx?.drag ?? null;
+    const pending = zoomCtx?.pending ?? null;
+    const cancelPending = zoomCtx?.cancelPending;
+    const confirmZoom = zoomCtx?.confirmZoom;
+    const isPopoverOpen = null !== drag || null !== pending;
+    const isPending = null !== pending;
+    const [scrollTick, setScrollTick] = useState(0);
+    useEffect(()=>{
+        if (!isPopoverOpen) return;
+        let lastTop = null;
+        let lastLeft = null;
+        const onScroll = ()=>{
+            const surface = rootRef?.current?.querySelector(RECHARTS_SURFACE);
+            if (!surface) return;
+            const { top, left } = surface.getBoundingClientRect();
+            if (top === lastTop && left === lastLeft) return;
+            lastTop = top;
+            lastLeft = left;
+            setScrollTick((n)=>n + 1);
+        };
+        window.addEventListener('scroll', onScroll, {
+            passive: true,
+            capture: true
+        });
+        window.addEventListener('resize', onScroll);
+        return ()=>{
+            window.removeEventListener('scroll', onScroll, {
+                capture: true
+            });
+            window.removeEventListener('resize', onScroll);
+        };
+    }, [
+        isPopoverOpen,
+        rootRef
+    ]);
+    const cachedGeometryRef = useRef(null);
+    const popoverGeometry = useMemo(()=>{
+        if (!isPopoverOpen) {
+            cachedGeometryRef.current = null;
+            return null;
+        }
+        if (!plotArea || !rootRef?.current) return cachedGeometryRef.current;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return cachedGeometryRef.current;
         const rect = surface.getBoundingClientRect();
-        return rect.top + plotArea.y + plotArea.height / 2;
+        const next = {
+            centerY: rect.top + plotArea.y + plotArea.height / 2,
+            left: rect.left
+        };
+        cachedGeometryRef.current = next;
+        return next;
     }, [
+        isPopoverOpen,
         plotArea,
+        rootRef,
+        scrollTick
+    ]);
+    const pendingAnchorLeft = useMemo(()=>{
+        if (!isPending || !rootRef?.current) return null;
+        const surface = rootRef.current.querySelector(RECHARTS_SURFACE);
+        if (!surface) return null;
+        return surface.getBoundingClientRect().left;
+    }, [
+        isPending,
         rootRef
     ]);
+    const centerY = popoverGeometry?.centerY ?? null;
+    const pendingScrollDeltaX = isPending && null !== pendingAnchorLeft && popoverGeometry ? popoverGeometry.left - pendingAnchorLeft : 0;
     const registerEnabled = zoomCtx?.registerEnabled;
     useEffect(()=>{
         if (disabled || !registerEnabled) return;
@@ -36,10 +95,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         disabled,
         registerEnabled
     ]);
-    const drag = zoomCtx?.drag ?? null;
-    const pending = zoomCtx?.pending ?? null;
-    const cancelPending = zoomCtx?.cancelPending;
-    const confirmZoom = zoomCtx?.confirmZoom;
     useZoomPendingListeners({
         enabled: null !== pending,
         rootRef,
@@ -72,7 +127,6 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
     ]);
     if (disabled || !dataCtx || !zoomCtx) return null;
     const popoverPosition = drag ?? pending ?? null;
-    const isPending = null !== pending;
     const popoverContent = range && popoverPosition ? /*#__PURE__*/ jsx("div", {
         ref: popoverRef,
         "data-slot": "line-chart-zoom-cursor-popover",
@@ -80,7 +134,7 @@ const LineChartZoomBrush = ({ disabled = false, formatRange = defaultFormatRange
         className: lineChartZoomCursorPopoverClasses,
         style: {
             top: centerY ?? popoverPosition.clientY,
-            left: popoverPosition.clientX + POPOVER_OFFSET_X,
+            left: popoverPosition.clientX + pendingScrollDeltaX + POPOVER_OFFSET_X,
             transform: 'translateY(-50%)',
             pointerEvents: isPending ? 'auto' : 'none'
         },

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartActiveKey.js

@@ -16,14 +16,15 @@ const useLineChartActiveKey = ({ controlledActiveKey, onActiveKeyChange, seriesB
     ]);
     const lastActiveKeyRef = useRef(void 0);
     lastActiveKeyRef.current = activeKey;
+    const onActiveKeyChangeRef = useRef(onActiveKeyChange);
+    onActiveKeyChangeRef.current = onActiveKeyChange;
     const setActiveKey = useCallback((key)=>{
         if (lastActiveKeyRef.current === key) return;
         lastActiveKeyRef.current = key;
         setInternalActiveKey(key);
-        onActiveKeyChange?.(key);
+        onActiveKeyChangeRef.current?.(key);
     }, [
-        setInternalActiveKey,
-        onActiveKeyChange
+        setInternalActiveKey
     ]);
     return {
         activeKey,

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.d.ts

@@ -1,3 +1,4 @@
+import { type RefObject } from 'react';
 import type { LineChartDatum, LineChartZoomDragState, LineChartZoomPendingState, LineChartZoomRange } from '../LineChartContext';
 interface UseLineChartZoomStateResult {
     enabled: boolean;
@@ -25,13 +26,19 @@ interface UseLineChartZoomStateResult {
  * `useZoomDragListeners` so the popover keeps tracking when the cursor leaves
  * the SVG and a mouseup outside the chart still releases into pending.
  *
+ * Drag updates from recharts (`updateDrag` — carries index+coords) and from
+ * the window listener (`handleDragMove` — coords only) both write into a
+ * single pending-frame buffer and flush together on the next animation frame.
+ * That collapses the two motion paths into one React commit per frame and
+ * keeps state writes off the synchronous mousemove path.
+ *
  * Dataset changes invalidate cached indices on both `drag` and `pending`, so
  * both reset whenever `data` or `xKey` flips — otherwise a stale range could
  * be committed against a refreshed dataset.
  */
-export declare const useLineChartZoomState: ({ data, xKey, onZoomChange, }: {
+export declare const useLineChartZoomState: ({ data, xKey, onZoomChangeRef, }: {
     data: LineChartDatum[];
     xKey: string;
-    onZoomChange: ((range: LineChartZoomRange | null) => void) | undefined;
+    onZoomChangeRef: RefObject<((range: LineChartZoomRange | null) => void) | undefined>;
 }) => UseLineChartZoomStateResult;
 export {};

package/dist/components/SimpleCharts/LineChart/hooks/useLineChartZoomState.js

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useZoomDragListeners } from "./useZoomDragListeners.js";
-const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
+const useLineChartZoomState = ({ data, xKey, onZoomChangeRef })=>{
     const [zoomEnabledCount, setZoomEnabledCount] = useState(0);
     const [zoomDrag, setZoomDrag] = useState(null);
     const [zoomPending, setZoomPending] = useState(null);
@@ -8,35 +8,79 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
         setZoomEnabledCount((n)=>n + 1);
         return ()=>setZoomEnabledCount((n)=>n - 1);
     }, []);
-    const startDrag = useCallback((index, clientX, clientY)=>{
-        setZoomPending(null);
-        setZoomDrag({
-            startIndex: index,
-            endIndex: index,
-            clientX,
-            clientY
-        });
-    }, []);
-    const updateDrag = useCallback((index, clientX, clientY)=>{
+    const pendingDragRef = useRef(null);
+    const rafIdRef = useRef(null);
+    const flushPendingDrag = useCallback(()=>{
+        rafIdRef.current = null;
+        const buffered = pendingDragRef.current;
+        if (!buffered) return;
+        pendingDragRef.current = null;
         setZoomDrag((prev)=>{
             if (!prev) return null;
-            if (prev.endIndex === index && prev.clientX === clientX && prev.clientY === clientY) return prev;
+            const endIndex = buffered.index ?? prev.endIndex;
+            const clientX = buffered.clientX ?? prev.clientX;
+            const clientY = buffered.clientY ?? prev.clientY;
+            if (prev.endIndex === endIndex && prev.clientX === clientX && prev.clientY === clientY) return prev;
             return {
                 startIndex: prev.startIndex,
-                endIndex: index,
+                endIndex,
                 clientX,
                 clientY
             };
         });
     }, []);
+    const scheduleFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) return;
+        rafIdRef.current = requestAnimationFrame(flushPendingDrag);
+    }, [
+        flushPendingDrag
+    ]);
+    const cancelScheduledFlush = useCallback(()=>{
+        if (null !== rafIdRef.current) {
+            cancelAnimationFrame(rafIdRef.current);
+            rafIdRef.current = null;
+        }
+        pendingDragRef.current = null;
+    }, []);
+    const startDrag = useCallback((index, clientX, clientY)=>{
+        cancelScheduledFlush();
+        setZoomPending(null);
+        setZoomDrag({
+            startIndex: index,
+            endIndex: index,
+            clientX,
+            clientY
+        });
+    }, [
+        cancelScheduledFlush
+    ]);
+    const updateDrag = useCallback((index, clientX, clientY)=>{
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            index,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
     const cancelDrag = useCallback(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
-    }, []);
+    }, [
+        cancelScheduledFlush
+    ]);
     const endDrag = useCallback(()=>{
+        const buffered = pendingDragRef.current;
+        cancelScheduledFlush();
         setZoomDrag((currentDrag)=>{
             if (!currentDrag) return null;
-            const lo = Math.min(currentDrag.startIndex, currentDrag.endIndex);
-            const hi = Math.max(currentDrag.startIndex, currentDrag.endIndex);
+            const endIndex = buffered?.index ?? currentDrag.endIndex;
+            const clientX = buffered?.clientX ?? currentDrag.clientX;
+            const clientY = buffered?.clientY ?? currentDrag.clientY;
+            const lo = Math.min(currentDrag.startIndex, endIndex);
+            const hi = Math.max(currentDrag.startIndex, endIndex);
             if (lo === hi) return null;
             const fromDatum = data[lo];
             const toDatum = data[hi];
@@ -49,46 +93,56 @@ const useLineChartZoomState = ({ data, xKey, onZoomChange })=>{
                     from,
                     to
                 },
-                clientX: currentDrag.clientX,
-                clientY: currentDrag.clientY
+                clientX,
+                clientY
             });
             return null;
         });
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
     ]);
     const confirmZoom = useCallback(()=>{
         setZoomPending((currentPending)=>{
-            if (currentPending) onZoomChange?.(currentPending.range);
+            if (currentPending) onZoomChangeRef.current?.(currentPending.range);
             return null;
         });
     }, [
-        onZoomChange
+        onZoomChangeRef
     ]);
     const cancelPending = useCallback(()=>{
         setZoomPending(null);
     }, []);
     useEffect(()=>{
+        cancelScheduledFlush();
         setZoomDrag(null);
         setZoomPending(null);
     }, [
         data,
-        xKey
+        xKey,
+        cancelScheduledFlush
+    ]);
+    useEffect(()=>()=>cancelScheduledFlush(), [
+        cancelScheduledFlush
     ]);
     const isZoomDragging = null !== zoomDrag;
     const handleDragMove = useCallback((clientX, clientY)=>{
-        setZoomDrag((prev)=>{
-            if (!prev) return null;
-            if (prev.clientX === clientX && prev.clientY === clientY) return prev;
-            return {
-                ...prev,
-                clientX,
-                clientY
-            };
-        });
-    }, []);
-    const handleDragEscape = useCallback(()=>setZoomDrag(null), []);
+        pendingDragRef.current = {
+            ...pendingDragRef.current,
+            clientX,
+            clientY
+        };
+        scheduleFlush();
+    }, [
+        scheduleFlush
+    ]);
+    const handleDragEscape = useCallback(()=>{
+        cancelScheduledFlush();
+        setZoomDrag(null);
+    }, [
+        cancelScheduledFlush
+    ]);
     useZoomDragListeners({
         enabled: isZoomDragging,
         onMove: handleDragMove,

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { OverflowTooltip, OverflowTooltipContent, type OverflowTooltipContentPro
 export { type CopyFormatData, formatAsFilter, ParameterPath, type ParameterPathProps, } from './components/ParameterPath';
 export { Popover, PopoverContent, PopoverTrigger } from './components/Popover';
 export { type BreadcrumbSegment, findDrillNode, findFirstLinkPath, type MatchNavResult, matchNav, type NavConfig, type NavConfigDrill, type NavConfigGroup, type NavConfigLink, type NavConfigNode, type NavStackEntry, ProductNav, ProductNavBreadcrumbs, type ProductNavContextValue, ProductNavPanel, type ProductNavProps, type UseProductNavResult, useProductNav, useProductNavContext, } from './components/ProductNav';
+export { Progress, type ProgressColor, type ProgressProps, } from './components/Progress';
 export { Radio, RadioDescription, type RadioDescriptionProps, RadioGroup, type RadioGroupProps, RadioIndicator, RadioLabel, type RadioLabelProps, type RadioProps, } from './components/Radio';
 export { RemoteShell, RemoteShellBreadcrumb, type RemoteShellBreadcrumbProps, RemoteShellContent, type RemoteShellContentProps, RemoteShellPanel, type RemoteShellPanelProps, type RemoteShellProps, } from './components/RemoteShell';
 export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type ResponseCodeCategory, type ResponseCodeProps, } from './components/ResponseCode';

package/dist/index.js

@@ -36,6 +36,7 @@ import { OverflowTooltip, OverflowTooltipContent } from "./components/OverflowTo
 import { ParameterPath, formatAsFilter } from "./components/ParameterPath/index.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./components/Popover/index.js";
 import { ProductNav, ProductNavBreadcrumbs, ProductNavPanel, findDrillNode, findFirstLinkPath, matchNav, useProductNav, useProductNavContext } from "./components/ProductNav/index.js";
+import { Progress } from "./components/Progress/index.js";
 import { Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel } from "./components/Radio/index.js";
 import { RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel } from "./components/RemoteShell/index.js";
 import { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./components/ResponseCode/index.js";
@@ -62,4 +63,4 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "./components/Tooltip/in
 import { TopHeader, TopHeaderActions, TopHeaderLogo } from "./components/TopHeader/index.js";
 import { Tour, beaconStepEffect, useTour, waitForStepEvent } from "./components/Tour/index.js";
 import { TestIdProvider, useTestId } from "./utils/testId.js";
-export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findDrillNode, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, matchNav, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useProductNav, useProductNavContext, useTestId, useTheme, useTour, waitForStepEvent };
+export { Accordion, AccordionActions, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertClose, AlertContent, AlertControls, AlertDescription, AlertIcon, AlertTitle, AppShell, AppShellHeader, AppShellRail, AppShellRemote, Attribute, AttributeActions, AttributeActionsContent, AttributeActionsItem, AttributeActionsTarget, AttributeLabel, AttributeLabelDescription, AttributeLabelInfo, AttributeValue, Badge, Breadcrumbs, BreadcrumbsEllipsis, BreadcrumbsItem, BreadcrumbsScopeSwitcher, BreadcrumbsSeparator, Button, Calendar, CalendarApplyButton, CalendarBody, CalendarContent, CalendarDate, CalendarDateTime, CalendarDayName, CalendarFooter, CalendarFooterControls, CalendarGrid, CalendarGrids, CalendarHeader, CalendarInputHeader, CalendarKeyboardHints, CalendarPresetItem, CalendarPresets, CalendarProvider, CalendarResetButton, CalendarTrigger, Card, CardContent, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxDescription, CheckboxGroup, CheckboxIndicator, CheckboxLabel, Code, Country, CountryFlag, CountryName, DAY_NAMES, DEFAULT_RANGE_PRESETS, DEFAULT_SINGLE_PRESETS, DateFormatProvider, DateInput, DateRangeEndValue, DateRangeInput, DateRangeProvider, DateRangeSeparator, DateRangeStartValue, Drawer, DrawerBody, DrawerClose, DrawerContent, DrawerFooter, DrawerFooterControls, DrawerHeader, DrawerPositioner, DrawerResizeHandle, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuContent, DropdownMenuContextTrigger, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuInput, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDescription, DropdownMenuItemIcon, DropdownMenuItemText, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuTrigger, DropdownMenuTriggerItem, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, FilterInput, FilterInputChip, FilterInputFieldMenu, FilterInputOperatorMenu, Flex, FormatDateTime, HStack, HTTP_METHODS, HTTP_METHOD_COLOR, Heading, HttpMethod, Input, InputGroup, InputGroupAddon, InputGroupText, Ip, IpAddress, IpCountry, IpList, IpPort, IpProvider, Kbd, KbdGroup, Link, Loader, Logo, MONTH_NAMES, NavRail, NavRailBody, NavRailFooter, NavRailItem, NavRailSeparator, NumberInput, NumericBadge, OverflowTooltip, OverflowTooltipContent, ParameterPath, Popover, PopoverContent, PopoverTrigger, ProductNav, ProductNavBreadcrumbs, ProductNavPanel, Progress, RESPONSE_CODE_COLOR, Radio, RadioDescription, RadioGroup, RadioIndicator, RadioLabel, RemoteShell, RemoteShellBreadcrumb, RemoteShellContent, RemoteShellPanel, ResponseCode, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport, SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator, SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, Selection, SelectionAll, SelectionBulkBar, SelectionItem, Separator, Skeleton, SplitButton, Stack, Switch, SwitchControl, SwitchDescription, SwitchLabel, Table, TableActionBar, TableEmptyState, TableSettingsMenu, Tabs, TabsButton, TabsContent, TabsLineActions, TabsList, TabsSeparator, TabsTrigger, Tag, TagClose, TestIdProvider, Text, Textarea, ThemeProvider, Time, TimeInput, Toast, ToastActions, Toaster, ToggleButton, Tooltip, TooltipContent, TooltipTrigger, TopHeader, TopHeaderActions, TopHeaderLogo, Tour, VStack, ZonedDateTime, beaconStepEffect, cardVariants, createTableColumnHelper, datacenters, drawerContentVariants, drawerPositionerVariants, findDrillNode, findFirstLinkPath, formatAsFilter, getLocalTimeZone, getResponseCodeCategory, matchNav, parseDate, parseDateTime, parseTime, parseZonedDateTime, proxyTypes, sourceLabels, toaster, today, useCalendarContext, useDateFormat, useDateRangeContext, useDrawerContext, useProductNav, useProductNavContext, useTestId, useTheme, useTour, waitForStepEvent };

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.43.0",
-  "generatedAt": "2026-05-21T14:01:47.194Z",
+  "version": "0.44.1",
+  "generatedAt": "2026-05-21T17:56:57.484Z",
   "components": [
     {
       "name": "Accordion",
@@ -30537,6 +30537,342 @@
       "subComponents": [],
       "examples": []
     },
+    {
+      "name": "Progress",
+      "importPath": "@wallarm-org/design-system/Progress",
+      "props": [
+        {
+          "name": "value",
+          "type": "number | undefined",
+          "required": false,
+          "defaultValue": "0"
+        },
+        {
+          "name": "max",
+          "type": "number | undefined",
+          "required": false,
+          "defaultValue": "100"
+        },
+        {
+          "name": "size",
+          "type": "ProgressSize | undefined",
+          "required": false,
+          "defaultValue": "md"
+        },
+        {
+          "name": "color",
+          "type": "ProgressColor | undefined",
+          "required": false,
+          "defaultValue": "w-orange"
+        },
+        {
+          "name": "showLabel",
+          "type": "boolean | undefined",
+          "required": false,
+          "defaultValue": "false"
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "defaultValue",
+          "type": "string | number | readonly string[] | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressContentEditableWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "suppressHydrationWarning",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "accessKey",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCapitalize",
+          "type": "\"off\" | \"none\" | \"on\" | \"sentences\" | \"words\" | \"characters\" | (string & {}) | undefined",
+          "required": false
+        },
+        {
+          "name": "autoFocus",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "contentEditable",
+          "type": "Booleanish | \"inherit\" | \"plaintext-only\" | undefined",
+          "required": false
+        },
+        {
+          "name": "contextMenu",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "dir",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "draggable",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "enterKeyHint",
+          "type": "\"enter\" | \"done\" | \"go\" | \"next\" | \"previous\" | \"search\" | \"send\" | undefined",
+          "required": false
+        },
+        {
+          "name": "hidden",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "id",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "lang",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "nonce",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "slot",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "spellCheck",
+          "type": "Booleanish | undefined",
+          "required": false
+        },
+        {
+          "name": "tabIndex",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "title",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "translate",
+          "type": "\"yes\" | \"no\" | undefined",
+          "required": false
+        },
+        {
+          "name": "radioGroup",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "role",
+          "type": "AriaRole | undefined",
+          "required": false
+        },
+        {
+          "name": "about",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "content",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "datatype",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inlist",
+          "type": "any",
+          "required": false
+        },
+        {
+          "name": "prefix",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "property",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rel",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "resource",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "rev",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "typeof",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "vocab",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoCorrect",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "autoSave",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemProp",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemScope",
+          "type": "boolean | undefined",
+          "required": false
+        },
+        {
+          "name": "itemType",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemID",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "itemRef",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "results",
+          "type": "number | undefined",
+          "required": false
+        },
+        {
+          "name": "security",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "unselectable",
+          "type": "\"off\" | \"on\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popover",
+          "type": "\"\" | \"auto\" | \"manual\" | \"hint\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTargetAction",
+          "type": "\"toggle\" | \"show\" | \"hide\" | undefined",
+          "required": false
+        },
+        {
+          "name": "popoverTarget",
+          "type": "string | undefined",
+          "required": false
+        },
+        {
+          "name": "inert",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "@see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/inert"
+        },
+        {
+          "name": "inputMode",
+          "type": "\"none\" | \"search\" | \"text\" | \"tel\" | \"url\" | \"email\" | \"numeric\" | \"decimal\" | undefined",
+          "required": false,
+          "description": "Hints at the type of data that might be entered by the user while editing the element or its contents"
+        },
+        {
+          "name": "is",
+          "type": "string | undefined",
+          "required": false,
+          "description": "Specify that a standard HTML element should behave like a defined custom built-in element"
+        },
+        {
+          "name": "exportparts",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/exportparts}"
+        },
+        {
+          "name": "part",
+          "type": "string | undefined",
+          "required": false,
+          "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+        }
+      ],
+      "variants": [
+        {
+          "name": "size",
+          "options": [
+            "sm",
+            "md",
+            "lg"
+          ],
+          "defaultValue": "md"
+        },
+        {
+          "name": "color",
+          "options": [],
+          "defaultValue": "blue"
+        }
+      ],
+      "subComponents": [],
+      "examples": [
+        {
+          "name": "Basic",
+          "code": "args => (\n  <div className='w-280'>\n    <Progress {...args} />\n  </div>\n)"
+        },
+        {
+          "name": "Sizes",
+          "code": "() => (\n  <div className='w-300'>\n    <HStack gap={12}>\n      <VStack align='end'>\n        <Text truncate>Small</Text>\n        <Text truncate>Medium (default)</Text>\n        <Text truncate>Large</Text>\n      </VStack>\n\n      <VStack fullWidth justify='between' style={{ height: 'stretch' }}>\n        <Progress value={20} size='sm' />\n        <Progress value={40} size='md' />\n        <Progress value={60} size='lg' />\n      </VStack>\n    </HStack>\n  </div>\n)"
+        },
+        {
+          "name": "Colors",
+          "code": "() => (\n  <div className='w-300'>\n    <HStack gap={12}>\n      <VStack align='end'>\n        {Object.entries(ProgressColorEnum).map(([key]) => (\n          <Text key={key}>{key}</Text>\n        ))}\n      </VStack>\n\n      <VStack fullWidth justify='between' style={{ height: 'stretch' }}>\n        {Object.entries(ProgressColorEnum).map(([_, color], index) => (\n          <Progress\n            key={color}\n            value={index + 1}\n            max={Object.entries(ProgressColorEnum).length}\n            color={color}\n            className='flex-1'\n          />\n        ))}\n      </VStack>\n    </HStack>\n  </div>\n)"
+        },
+        {
+          "name": "WithLabel",
+          "code": "() => (\n  <div className='w-280'>\n    <VStack>\n      <Progress value={25} size='sm' showLabel />\n      <Progress value={50} showLabel color='green' />\n      <Progress value={75} showLabel color='pink' size='lg' />\n    </VStack>\n  </div>\n)"
+        }
+      ]
+    },
     {
       "name": "Radio",
       "importPath": "@wallarm-org/design-system/Radio",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.44.0",
+  "version": "0.45.0-rc-feature-WDS-121-progress.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",