@wallarm-org/design-system 0.45.0 → 0.46.0-rc-feature-progress.1

package/dist/components/Progress/Progress.js

@@ -2,9 +2,10 @@ 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, {
+const Progress_Progress = ({ value, min = 0, max = 100, size = 'xs', color = 'brand', showLabel = false, className, 'data-testid': testId, ref })=>/*#__PURE__*/ jsxs(Progress.Root, {
         ref: ref,
         value: value,
+        defaultValue: value,
         min: min,
         max: max,
         "data-slot": "progress",

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

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

package/dist/components/Progress/classes.js

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 const progressColorMap = {
+    brand: 'bg-bg-fill-brand',
     slate: 'bg-badge-slate-strong',
     red: 'bg-badge-red-strong',
     'w-orange': 'bg-badge-w-orange-strong',
@@ -23,6 +24,7 @@ const progressColorMap = {
     stone: 'bg-badge-stone-strong'
 };
 const trackColorMap = {
+    brand: 'bg-bg-brand',
     slate: 'bg-badge-slate-light',
     red: 'bg-badge-red-light',
     'w-orange': 'bg-badge-w-orange-light',
@@ -48,6 +50,7 @@ const trackColorMap = {
 const progressTrackVariants = cva('relative w-full overflow-hidden', {
     variants: {
         size: {
+            xs: 'h-2 rounded-full',
             sm: 'h-4 rounded-2',
             md: 'h-8 rounded-4',
             lg: 'h-12 rounded-6'
@@ -55,13 +58,14 @@ const progressTrackVariants = cva('relative w-full overflow-hidden', {
         color: trackColorMap
     },
     defaultVariants: {
-        size: 'md',
-        color: 'w-orange'
+        size: 'xs',
+        color: 'brand'
     }
 });
 const progressRangeVariants = cva('h-full transition-all duration-300 ease-out', {
     variants: {
         size: {
+            xs: 'rounded-full',
             sm: 'rounded-2',
             md: 'rounded-4',
             lg: 'rounded-6'
@@ -69,8 +73,8 @@ const progressRangeVariants = cva('h-full transition-all duration-300 ease-out',
         color: progressColorMap
     },
     defaultVariants: {
-        size: 'md',
-        color: 'w-orange'
+        size: 'xs',
+        color: 'brand'
     }
 });
 export { progressRangeVariants, progressTrackVariants };

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

@@ -1,4 +1,5 @@
 export declare const ProgressColorEnum: {
+    readonly Brand: "brand";
     readonly Slate: "slate";
     readonly Red: "red";
     readonly WOrange: "w-orange";

package/dist/components/Progress/constants.js

@@ -1,4 +1,5 @@
 const ProgressColorEnum = {
+    Brand: 'brand',
     Slate: 'slate',
     Red: 'red',
     WOrange: 'w-orange',

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

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

package/dist/components/SplashScreen/SplashScreen.js

@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { cn } from "../../utils/cn.js";
 import { Logo } from "../Logo/index.js";
 import { Progress } from "../Progress/index.js";
+import { splashContentVariants, splashLogoVariants, splashProgressVariants } from "./classes.js";
 const SplashScreen = ({ ref, visible = true, className, ...props })=>{
     const [phase, setPhase] = useState(visible ? 'enter-start' : 'exited');
     useEffect(()=>{
@@ -24,21 +25,30 @@ const SplashScreen = ({ ref, visible = true, className, ...props })=>{
         visible
     ]);
     if ('exited' === phase) return null;
+    const animPhase = phase;
     return /*#__PURE__*/ jsx("div", {
         ...props,
         "data-slot": "splash-screen",
         ref: ref,
         className: "h-full w-full flex items-center justify-center",
         children: /*#__PURE__*/ jsxs("div", {
-            className: cn('flex h-max w-max flex-col items-center justify-center gap-12', 'enter-start' === phase && 'opacity-0 translate-y-12', 'entered' === phase && 'opacity-100 translate-y-0 transition-all duration-500 ease-out', 'exiting' === phase && 'opacity-0 transition-opacity duration-300 ease-out', className),
+            className: cn(splashContentVariants({
+                phase: animPhase
+            }), className),
             onTransitionEnd: ()=>{
                 if ('exiting' === phase) setPhase('exited');
             },
             children: [
-                /*#__PURE__*/ jsx(Logo, {}),
+                /*#__PURE__*/ jsx(Logo, {
+                    className: splashLogoVariants({
+                        phase: animPhase
+                    })
+                }),
                 /*#__PURE__*/ jsx(Progress, {
                     value: null,
-                    size: "sm"
+                    className: splashProgressVariants({
+                        phase: animPhase
+                    })
                 })
             ]
         })

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

@@ -0,0 +1,9 @@
+export declare const splashContentVariants: (props?: ({
+    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const splashLogoVariants: (props?: ({
+    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export declare const splashProgressVariants: (props?: ({
+    phase?: "enter-start" | "entered" | "exiting" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/SplashScreen/classes.js

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+const splashContentVariants = cva('flex h-max w-max flex-col items-center justify-center gap-12', {
+    variants: {
+        phase: {
+            'enter-start': 'opacity-0',
+            entered: 'opacity-100 transition-opacity duration-500 ease-out',
+            exiting: 'opacity-0 transition-opacity duration-300 ease-out'
+        }
+    }
+});
+const splashLogoVariants = cva('', {
+    variants: {
+        phase: {
+            'enter-start': 'translate-y-8',
+            entered: 'translate-y-0 transition-transform duration-500 ease-out',
+            exiting: 'translate-y-0 transition-transform duration-500 ease-out'
+        }
+    }
+});
+const splashProgressVariants = cva('', {
+    variants: {
+        phase: {
+            'enter-start': 'translate-y-16',
+            entered: 'translate-y-0 transition-transform duration-500 ease-out',
+            exiting: 'translate-y-0 transition-transform duration-500 ease-out'
+        }
+    }
+});
+export { splashContentVariants, splashLogoVariants, splashProgressVariants };

package/dist/components/Table/TableContext/TableProvider.js

@@ -8,7 +8,7 @@ import { useTableState } from "../hooks/index.js";
 import { TABLE_EXPAND_COLUMN_ID, TABLE_MIN_COLUMN_WIDTH, TABLE_SELECT_COLUMN_ID, TABLE_SKELETON_ROWS, TABLE_VIRTUALIZATION_OVERSCAN, createExpandColumn, createSelectionColumn } from "../lib/index.js";
 import { TableContext } from "./TableContext.js";
 const TableProvider = (props)=>{
-    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onMasterCellClick, activeRowId: activeRowIdProp } = props;
+    const { data, columns, isLoading = false, skeletonCount = TABLE_SKELETON_ROWS, children, getRowId, sorting: sortingProp, onSortingChange, manualSorting = false, rowSelection: rowSelectionProp, onRowSelectionChange, columnSizing: columnSizingProp, onColumnSizingChange, columnPinning: columnPinningProp, onColumnPinningChange, columnOrder: columnOrderProp, onColumnOrderChange, grouping: groupingProp, onGroupingChange, expanded: expandedProp, onExpandedChange, renderGroupRow, getSubRows, renderExpandedRow, columnVisibility: columnVisibilityProp, onColumnVisibilityChange, defaultColumnVisibility, defaultColumnOrder, virtualized, estimateRowHeight, overscan = TABLE_VIRTUALIZATION_OVERSCAN, onEndReached, onEndReachedThreshold, onMasterCellClick, activeRowId: activeRowIdProp } = props;
     const masterCellActiveRowId = activeRowIdProp ?? null;
     const sortingEnabled = !!onSortingChange;
     const selectionEnabled = !!onRowSelectionChange;
@@ -131,9 +131,10 @@ const TableProvider = (props)=>{
         getRowId,
         getSubRows,
         getCoreRowModel: getCoreRowModel(),
-        ...sortingEnabled && {
+        ...sortingEnabled && !manualSorting && {
             getSortedRowModel: getSortedRowModel()
         },
+        manualSorting,
         ...groupingEnabled && {
             getGroupedRowModel: getGroupedRowModel()
         },

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

@@ -155,6 +155,15 @@ export interface TableProps<T> extends TestableProps {
     className?: string;
     sorting?: TableSortingState;
     onSortingChange?: TableOnChangeFn<TableSortingState>;
+    /**
+     * When `true`, disables TanStack's client-side sort. The table renders rows
+     * in the order they appear in `data` and only fires `onSortingChange` on
+     * header clicks. Use this when sorting is performed server-side and the
+     * server returns pre-sorted rows.
+     *
+     * Default: `false` (client-side sort via TanStack's `getSortedRowModel`).
+     */
+    manualSorting?: boolean;
     rowSelection?: TableRowSelectionState;
     onRowSelectionChange?: TableOnChangeFn<TableRowSelectionState>;
     columnSizing?: TableColumnSizingState;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.44.1",
-  "generatedAt": "2026-05-22T12:06:04.874Z",
+  "version": "0.45.1",
+  "generatedAt": "2026-05-25T17:50:50.832Z",
   "components": [
     {
       "name": "Accordion",
@@ -30545,8 +30545,7 @@
           "name": "value",
           "type": "number | null | undefined",
           "required": false,
-          "description": "Progress value (0–max). Pass `null` for indeterminate state.",
-          "defaultValue": "0"
+          "description": "Progress value (0–max). Pass `null` for indeterminate state."
         },
         {
           "name": "min",
@@ -30564,13 +30563,13 @@
           "name": "size",
           "type": "ProgressSize | undefined",
           "required": false,
-          "defaultValue": "md"
+          "defaultValue": "xs"
         },
         {
           "name": "color",
           "type": "ProgressColor | undefined",
           "required": false,
-          "defaultValue": "w-orange"
+          "defaultValue": "brand"
         },
         {
           "name": "showLabel",
@@ -30583,16 +30582,17 @@
         {
           "name": "size",
           "options": [
+            "xs",
             "sm",
             "md",
             "lg"
           ],
-          "defaultValue": "md"
+          "defaultValue": "xs"
         },
         {
           "name": "color",
           "options": [],
-          "defaultValue": "w-orange"
+          "defaultValue": "brand"
         }
       ],
       "subComponents": [],
@@ -30603,15 +30603,15 @@
         },
         {
           "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)"
+          "code": "() => (\n  <div className='w-300'>\n    <HStack gap={12}>\n      <VStack align='end'>\n        <Text truncate>XSmall (default)</Text>\n        <Text truncate>Small</Text>\n        <Text truncate>Medium</Text>\n        <Text truncate>Large</Text>\n      </VStack>\n\n      <VStack fullWidth justify='between' style={{ height: 'stretch' }}>\n        <Progress value={20} size='xs' />\n        <Progress value={40} size='sm' />\n        <Progress value={60} size='md' />\n        <Progress value={80} 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={20} showLabel />\n      <Progress value={40} showLabel size='sm' />\n      <Progress value={60} showLabel size='md' />\n      <Progress value={80} showLabel size='lg' />\n    </VStack>\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": "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            size='sm'\n            className='flex-1'\n          />\n        ))}\n      </VStack>\n    </HStack>\n  </div>\n)"
         },
         {
           "name": "Indeterminate",
@@ -46801,7 +46801,16 @@
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         }
       ],
-      "variants": [],
+      "variants": [
+        {
+          "name": "phase",
+          "options": [
+            "enter-start",
+            "entered",
+            "exiting"
+          ]
+        }
+      ],
       "subComponents": [],
       "examples": [
         {
@@ -49188,6 +49197,12 @@
           "type": "TableSortingState | undefined",
           "required": false
         },
+        {
+          "name": "manualSorting",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "When `true`, disables TanStack's client-side sort. The table renders rows\nin the order they appear in `data` and only fires `onSortingChange` on\nheader clicks. Use this when sorting is performed server-side and the\nserver returns pre-sorted rows.\n\nDefault: `false` (client-side sort via TanStack's `getSortedRowModel`)."
+        },
         {
           "name": "rowSelection",
           "type": "TableRowSelectionState | undefined",
@@ -49339,6 +49354,10 @@
           "name": "Sorting",
           "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n\n  return (\n    <Table\n      data={securityEvents}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n    />\n  );\n}"
         },
+        {
+          "name": "ManualSorting",
+          "code": "() => {\n  const [sorting, setSorting] = useState<TableSortingState>([]);\n  const data = useMemo(() => sortSecurityEvents(sorting), [sorting]);\n\n  return (\n    <Table\n      data={data}\n      columns={securityColumns}\n      getRowId={row => row.id}\n      sorting={sorting}\n      onSortingChange={setSorting}\n      manualSorting\n      data-testid='manual-sort-table'\n    />\n  );\n}"
+        },
         {
           "name": "LoadingState",
           "code": "() => (\n  <Table data={[]} columns={securityColumns} isLoading />\n)"

package/dist/theme/components/progress.css

@@ -1,40 +1,14 @@
 @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%;
+        transform: translateX(-100%);
     }
     100% {
-        left: 90%;
-        width: 30%;
+        transform: translateX(200%);
     }
 }
 
 [data-scope='progress'][data-part='range'][data-state='indeterminate'] {
-    position: absolute;
+    width: 50%;
     transition: none;
-    animation: progress-indeterminate 3.5s infinite;
+    animation: progress-indeterminate 1s ease-in-out infinite;
 }

package/package.json

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