@wallarm-org/design-system 0.44.1 → 0.45.0-rc-feature-WDS-121-progress.2

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

@@ -0,0 +1,15 @@
+import type { FC, Ref } from 'react';
+import type { TestableProps } from '../../utils/testId';
+import type { ProgressColor, ProgressSize } from './types';
+export interface ProgressProps extends TestableProps {
+    /** Progress value (0–max). Pass `null` for indeterminate state. */
+    value?: number | null;
+    min?: number;
+    max?: number;
+    size?: ProgressSize;
+    color?: ProgressColor;
+    showLabel?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare const Progress: FC<ProgressProps>;

package/dist/components/Progress/Progress.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Progress } from "@ark-ui/react/progress";
+import { cn } from "../../utils/cn.js";
+import { progressRangeVariants, progressTrackVariants } from "./classes.js";
+const Progress_Progress = ({ value = 0, min = 0, max = 100, size = 'md', color = 'w-orange', showLabel = false, className, 'data-testid': testId, ref })=>/*#__PURE__*/ jsxs(Progress.Root, {
+        ref: ref,
+        value: value,
+        min: min,
+        max: max,
+        "data-slot": "progress",
+        "data-testid": testId,
+        className: cn('flex flex-1 items-center gap-8 min-w-118 w-full', className),
+        children: [
+            /*#__PURE__*/ jsx(Progress.Track, {
+                "data-slot": "progress-track",
+                className: progressTrackVariants({
+                    size
+                }),
+                children: /*#__PURE__*/ jsx(Progress.Range, {
+                    "data-slot": "progress-range",
+                    className: progressRangeVariants({
+                        size,
+                        color
+                    })
+                })
+            }),
+            showLabel && /*#__PURE__*/ jsx(Progress.ValueText, {
+                "data-slot": "progress-label",
+                className: "text-text-secondary font-sans-display text-xs font-medium tabular-nums"
+            })
+        ]
+    });
+Progress_Progress.displayName = 'Progress';
+export { Progress_Progress as 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 progressRangeVariants: (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 progressRangeVariants = 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 { progressRangeVariants, 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 { progressRangeVariants, 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 { progressRangeVariants, progressTrackVariants } from "./classes.js";
+import { ProgressColorEnum } from "./constants.js";
+import { Progress } from "./Progress.js";
+export { Progress, ProgressColorEnum, progressRangeVariants, 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/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.44.0",
-  "generatedAt": "2026-05-21T14:47:58.859Z",
+  "version": "0.44.1",
+  "generatedAt": "2026-05-21T20:14:21.154Z",
   "components": [
     {
       "name": "Accordion",
@@ -30537,6 +30537,88 @@
       "subComponents": [],
       "examples": []
     },
+    {
+      "name": "Progress",
+      "importPath": "@wallarm-org/design-system/Progress",
+      "props": [
+        {
+          "name": "value",
+          "type": "number | null | undefined",
+          "required": false,
+          "description": "Progress value (0–max). Pass `null` for indeterminate state.",
+          "defaultValue": "0"
+        },
+        {
+          "name": "min",
+          "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"
+        }
+      ],
+      "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": "Indeterminate",
+          "code": "() => (\n  <div className='w-280'>\n    <Progress value={null} />\n  </div>\n)"
+        }
+      ]
+    },
     {
       "name": "Radio",
       "importPath": "@wallarm-org/design-system/Radio",

package/dist/theme/components/progress.css

@@ -0,0 +1,40 @@
+@keyframes progress-indeterminate {
+    0% {
+        left: 90%;
+        width: 10%;
+    }
+    20% {
+        left: 100%;
+        width: 0%;
+    }
+    25% {
+        left: 100%;
+        width: 5%;
+    }
+    40% {
+        left: 0%;
+        width: 5%;
+    }
+    50% {
+        left: 0%;
+        width: 0%;
+    }
+    65% {
+        left: 0%;
+        width: 50%;
+    }
+    85% {
+        left: 20%;
+        width: 70%;
+    }
+    100% {
+        left: 90%;
+        width: 30%;
+    }
+}
+
+[data-scope='progress'][data-part='range'][data-state='indeterminate'] {
+    position: absolute;
+    transition: none;
+    animation: progress-indeterminate 3.5s infinite;
+}

package/dist/theme/index.css

@@ -20,6 +20,7 @@
 @import './components/tour.css';
 @import './components/skeleton.css';
 @import './components/accordion.css';
+@import './components/progress.css';
 
 [data-scope='scroll-area'][data-part='viewport'] {
     scrollbar-width: none;

package/package.json

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