@wallarm-org/design-system 0.87.0 → 0.88.0

package/dist/components/Table/TableSettingsMenu/TableSettingsMenuItem.d.ts

@@ -3,7 +3,7 @@ export interface TableSettingsMenuItemProps extends Omit<SwitchProps, 'checked'
     /** Column id from the table's column definitions. */
     columnId: string;
 }
-export declare const TableSettingsMenuItem: {
-    ({ columnId, className, "data-testid": testIdProp, ...rest }: TableSettingsMenuItemProps): import("react").JSX.Element | null;
-    displayName: string;
-};
+export declare function TableSettingsMenuItem({ columnId, className, 'data-testid': testIdProp, ...rest }: TableSettingsMenuItemProps): import("react").JSX.Element | null;
+export declare namespace TableSettingsMenuItem {
+    var displayName: string;
+}

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

@@ -2,8 +2,8 @@ import type { Header } from '@tanstack/react-table';
 interface TableSortHandler<T> {
     header: Header<T, unknown>;
 }
-export declare const TableSortHandler: {
-    <T>({ header }: TableSortHandler<T>): import("react").JSX.Element;
-    displayName: string;
-};
+export declare function TableSortHandler<T>({ header }: TableSortHandler<T>): import("react").JSX.Element;
+export declare namespace TableSortHandler {
+    var displayName: string;
+}
 export {};

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

@@ -18,22 +18,7 @@ export interface TableSortTriggerProps<T = unknown> extends Omit<ButtonHTMLAttri
     /** Label rendered next to the sort icon. Visual styling matches the default header text. */
     children?: ReactNode;
 }
-/**
- * Consumer-rendered sort trigger. Replaces the auto-rendered sort icon when
- * present as a direct child of the column's `header` render return — the
- * `TableHeadCell` children-scan suppresses the default `TableSortHandler` and
- * does not wrap the label in its own `<Text>`.
- *
- * All native button attributes (including `data-analytics-id`,
- * `data-analytics-props`, `aria-*`, `id`, `ref`, and any `data-*`) reach the
- * underlying `<button>` so analytics SDKs that walk up via
- * `closest('[data-analytics-id]')` resolve clicks on the icon to the
- * consumer-supplied id.
- *
- * Consumer-passed `onClick` runs first; if it calls `event.preventDefault()`,
- * the internal `toggleSorting` is skipped.
- */
-export declare const TableSortTrigger: {
-    <T>({ column, children, "data-testid": testIdProp, className, onClick, ...rest }: TableSortTriggerProps<T>): import("react").JSX.Element;
-    displayName: string;
-};
+export declare function TableSortTrigger<T>({ column, children, 'data-testid': testIdProp, className, onClick, ...rest }: TableSortTriggerProps<T>): import("react").JSX.Element;
+export declare namespace TableSortTrigger {
+    var displayName: string;
+}

package/dist/components/Table/lib/detectDataChange.d.ts

@@ -1,4 +1,4 @@
 /** Classifies a data change by comparing the previous first/last row ids to the new rows. */
 export declare const detectDataChange: (prevFirstRowId: string | undefined, rows: {
     id: string;
-}[], prevLastRowId?: string) => "prepend" | "replace" | "none";
+}[], prevLastRowId?: string) => 'prepend' | 'replace' | 'none';

package/dist/components/Table/lib/isLastPinnedLeft.d.ts

@@ -2,8 +2,8 @@
  * Checks if a column is the last pinned column on the left side.
  */
 export declare const isLastPinnedLeft: (column: {
-    getIsPinned: () => false | "left" | "right";
+    getIsPinned: () => false | 'left' | 'right';
 }, allColumns: {
-    getIsPinned: () => false | "left" | "right";
+    getIsPinned: () => false | 'left' | 'right';
     id: string;
 }[], columnId: string) => boolean;

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

@@ -1,3 +1,3 @@
 export declare const tabsTriggerVariants: (props?: ({
-    size?: "small" | "medium" | null | undefined;
+    size?: "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Text/Text.d.ts

@@ -2,16 +2,16 @@ import type { FC, HTMLAttributes, PropsWithChildren, Ref } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 declare const textVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
-    weight?: "bold" | "light" | "regular" | "medium" | null | undefined;
-    color?: "primary" | "secondary" | "inherit" | "primary-alt" | "secondary-alt" | "tertiary-alt" | "danger" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
+    weight?: "bold" | "light" | "medium" | "regular" | null | undefined;
+    color?: "danger" | "inherit" | "primary" | "primary-alt" | "secondary" | "secondary-alt" | "tertiary-alt" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
     inline?: boolean | null | undefined;
     grow?: boolean | null | undefined;
     truncate?: boolean | null | undefined;
     decoration?: "dashed" | null | undefined;
-    lineHeight?: "none" | "normal" | "tight" | "snug" | "relaxed" | null | undefined;
-    textTransform?: "none" | "uppercase" | "lowercase" | "capitalize" | null | undefined;
+    lineHeight?: "none" | "normal" | "relaxed" | "snug" | "tight" | null | undefined;
+    textTransform?: "capitalize" | "lowercase" | "none" | "uppercase" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type TextNativeProps = Omit<HTMLAttributes<HTMLParagraphElement>, 'className' | 'color'>;
 type TextVariantProps = VariantProps<typeof textVariants>;

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

@@ -1,6 +1,6 @@
 export declare const textareaPaddingVariants: (props?: ({
-    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
+    size?: "default" | "inline-edit" | "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare const textareaHeightVariants: (props?: ({
-    size?: "small" | "medium" | "default" | "inline-edit" | null | undefined;
+    size?: "default" | "inline-edit" | "medium" | "small" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Toast/Toast.d.ts

@@ -14,7 +14,7 @@ export interface ToastData {
 export interface ToastProps {
     toast: ToastData;
 }
-export declare const Toast: {
-    ({ toast }: ToastProps): import("react").JSX.Element;
-    displayName: string;
-};
+export declare function Toast({ toast }: ToastProps): import("react").JSX.Element;
+export declare namespace Toast {
+    var displayName: string;
+}

package/dist/components/Toast/ToastClose.d.ts

@@ -1,4 +1,4 @@
-export declare const ToastClose: {
-    (): import("react").JSX.Element;
-    displayName: string;
-};
+export declare function ToastClose(): import("react").JSX.Element;
+export declare namespace ToastClose {
+    var displayName: string;
+}

package/dist/components/Toast/useToast.d.ts

@@ -11,7 +11,7 @@ export interface UseToastReturn {
     update: (options: UpdateToastOptions) => string;
     dismiss: (options?: DismissToastOptions) => void;
 }
-export declare const useToast: {
-    (): UseToastReturn;
-    displayName: string;
-};
+export declare function useToast(): UseToastReturn;
+export declare namespace useToast {
+    var displayName: string;
+}

package/dist/components/ToggleButton/ToggleButton.d.ts

@@ -3,7 +3,7 @@ import { type VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 import { type ButtonBaseProps } from '../ButtonBase';
 declare const toggleButtonVariants: (props?: ({
-    variant?: "outline" | "ghost" | null | undefined;
+    variant?: "ghost" | "outline" | null | undefined;
     color?: "brand" | "neutral" | null | undefined;
     active?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/Tour/lib/waitForStepEvent.d.ts

@@ -12,6 +12,6 @@ import type { TourStepEffectArgs, WaitForStepEventOptions } from '../types';
  *
  * Returns a cleanup function for early teardown (e.g. dismiss / Back).
  */
-export declare const waitForStepEvent: <T extends HTMLElement = HTMLElement>(event: keyof HTMLElementEventMap, args: Pick<TourStepEffectArgs, "show" | "next"> & {
+export declare const waitForStepEvent: <T extends HTMLElement = HTMLElement>(event: keyof HTMLElementEventMap, args: Pick<TourStepEffectArgs, 'show' | 'next'> & {
     target?: (() => T | null) | undefined;
 }, options?: WaitForStepEventOptions<T>) => VoidFunction;

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

@@ -1,3 +1,3 @@
 export declare const wallyIconVariants: (props?: ({
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
+    size?: "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/icons/SvgIcon.d.ts

@@ -1,7 +1,7 @@
 import type { FC, ReactNode, Ref, SVGProps } from 'react';
 import { type VariantProps } from 'class-variance-authority';
 declare const iconVariants: (props?: ({
-    size?: "inherit" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+    size?: "2xl" | "inherit" | "lg" | "md" | "sm" | "xl" | "xs" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SvgIconNativeProps = SVGProps<SVGSVGElement>;
 type SvgIconVariantProps = VariantProps<typeof iconVariants>;

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.86.0",
-  "generatedAt": "2026-08-07T08:01:47.254Z",
+  "version": "0.87.1",
+  "generatedAt": "2026-08-09T10:59:58.032Z",
   "components": [
     {
       "name": "Accordion",
@@ -33350,6 +33350,18 @@
               "required": false,
               "description": "The ids of the elements in the number input. Useful for composition."
             },
+            {
+              "name": "largeStep",
+              "type": "number | undefined",
+              "required": false,
+              "description": "The amount to increment or decrement the value by when the `Shift` key is held."
+            },
+            {
+              "name": "smallStep",
+              "type": "number | undefined",
+              "required": false,
+              "description": "The amount to increment or decrement the value by when the `Alt` key is held."
+            },
             {
               "name": "allowMouseWheel",
               "type": "boolean | undefined",
@@ -43611,6 +43623,18 @@
           "required": false,
           "description": "The amount to increment or decrement the value by"
         },
+        {
+          "name": "largeStep",
+          "type": "number | undefined",
+          "required": false,
+          "description": "The amount to increment or decrement the value by when the `Shift` key is held."
+        },
+        {
+          "name": "smallStep",
+          "type": "number | undefined",
+          "required": false,
+          "description": "The amount to increment or decrement the value by when the `Alt` key is held."
+        },
         {
           "name": "allowMouseWheel",
           "type": "boolean | undefined",
@@ -47718,8 +47742,7 @@
             {
               "name": "minHeight",
               "type": "PopoverSizeDimension | undefined",
-              "required": false,
-              "defaultValue": "POPOVER_MIN_HEIGHT"
+              "required": false
             },
             {
               "name": "maxHeight",
@@ -83730,6 +83753,12 @@
           "required": false,
           "description": "Whether to unmount on exit.",
           "defaultValue": "true"
+        },
+        {
+          "name": "hideMode",
+          "type": "\"display-none\" | \"activity\"",
+          "required": false,
+          "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+."
         }
       ],
       "variants": [],
@@ -85644,6 +85673,12 @@
               "required": false,
               "description": "Whether to unmount on exit."
             },
+            {
+              "name": "hideMode",
+              "type": "\"display-none\" | \"activity\"",
+              "required": false,
+              "description": "How to hide content when mounted but not present.\n- `'display-none'`: HTML `hidden` attribute. Effects stay alive.\n- `'activity'`: React 19 `<Activity mode=\"hidden\">`. Effects pause. Requires React 19+."
+            },
             {
               "name": "asChild",
               "type": "boolean | undefined",

package/dist/theme/index.css

@@ -35,6 +35,28 @@
     }
 }
 
+/**
+ * Global native-scrollbar styling, matching the ScrollArea component's look
+ * (thin slate thumb, transparent track) for every plain `overflow:
+ * auto/scroll` element that isn't opting into ScrollArea's own JS-drawn
+ * thumb (excluded above via higher-specificity attribute selector). The
+ * thumb is permanently visible: `overflow: auto` already only renders a
+ * scrollbar when content overflows, so that's the only "show it when
+ * scrollable" gate this needs.
+ *
+ * Deliberately uses only the standard `scrollbar-width`/`scrollbar-color`
+ * properties, not `::-webkit-scrollbar-*`. The legacy pseudo-elements would
+ * allow a fully custom (rounded, inset) thumb, but their hover-driven state
+ * changes only repaint reliably when the pointer is over the scrollbar
+ * widget itself, not the rest of the scrollable container — unreliable
+ * enough that a permanently-visible thumb sidesteps the issue entirely.
+ */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--color-badge-slate-dark-alt) 50%, transparent)
+        transparent;
+}
+
 /** Remove when old DS will be removed **/
 :where(:root) {
     cursor: default;

package/dist/utils/hasNonTextEnd.d.ts

@@ -1,2 +1,2 @@
 import { type PropsWithChildren } from 'react';
-export declare const hasNonTextEnd: (children: PropsWithChildren["children"]) => boolean;
+export declare const hasNonTextEnd: (children: PropsWithChildren['children']) => boolean;

package/dist/utils/isIconOnly.d.ts

@@ -1,2 +1,2 @@
 import { type PropsWithChildren } from 'react';
-export declare const isIconOnly: (children: PropsWithChildren["children"]) => boolean;
+export declare const isIconOnly: (children: PropsWithChildren['children']) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "0.87.0",
+  "version": "0.88.0",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",
@@ -82,18 +82,16 @@
     "e2e:docker:report": "playwright show-report ./playwright-report --port=9323"
   },
   "devDependencies": {
-    "@figma/code-connect": "1.4.9",
-    "@internationalized/date": "3.12.2",
+    "@figma/code-connect": "1.5.2",
+    "@internationalized/date": "3.12.3",
     "@rsbuild/core": "catalog:",
     "@rsbuild/plugin-react": "catalog:",
     "@rslib/core": "catalog:",
-    "@shikijs/types": "4.3.1",
+    "@shikijs/types": "4.4.2",
     "@storybook/addon-docs": "10.4.6",
-    "@storybook/addon-mcp": "0.6.0",
     "@storybook/addon-themes": "10.4.6",
-    "@storybook/mcp": "0.7.0",
-    "@tailwindcss/postcss": "4.3.2",
-    "@testing-library/jest-dom": "6.9.1",
+    "@tailwindcss/postcss": "4.3.3",
+    "@testing-library/jest-dom": "7.0.0",
     "@testing-library/react": "catalog:",
     "@testing-library/user-event": "catalog:",
     "@types/node": "catalog:",
@@ -109,39 +107,39 @@
     "@wallarm-org/typescript-config": "workspace:*",
     "@wallarm-org/vitest-config": "workspace:*",
     "glob": "13.0.6",
-    "postcss": "8.5.6",
+    "postcss": "8.5.26",
     "postcss-import": "16.1.1",
     "storybook": "catalog:",
     "storybook-react-rsbuild": "3.3.4",
     "tailwindcss": "catalog:",
     "ts-morph": "28.0.0",
-    "tsx": "4.23.0",
+    "tsx": "4.23.10",
     "tw-animate-css": "catalog:",
     "typescript": "catalog:",
     "vitest": "catalog:"
   },
   "dependencies": {
-    "@ark-ui/react": "5.37.2",
+    "@ark-ui/react": "5.38.0",
     "@dnd-kit/core": "6.3.1",
     "@dnd-kit/sortable": "10.0.0",
     "@dnd-kit/utilities": "3.2.2",
-    "@radix-ui/react-compose-refs": "1.1.3",
-    "@radix-ui/react-slot": "1.3.0",
+    "@radix-ui/react-compose-refs": "1.1.5",
+    "@radix-ui/react-slot": "1.3.3",
     "@react-aria/datepicker": "3.17.1",
     "@react-aria/i18n": "3.13.1",
     "@react-stately/datepicker": "3.17.1",
     "@react-types/datepicker": "3.14.0",
-    "@react-types/shared": "3.36.0",
+    "@react-types/shared": "3.36.1",
     "@tanstack/react-table": "8.21.3",
-    "@tanstack/react-virtual": "3.14.5",
+    "@tanstack/react-virtual": "3.14.9",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.4.0",
     "highlight.js": "11.11.1",
     "prism-react-renderer": "2.4.1",
     "prismjs": "1.30.0",
-    "recharts": "3.9.2",
-    "shiki": "4.3.1",
+    "recharts": "3.10.1",
+    "shiki": "4.4.2",
     "tailwind-merge": "3.6.0"
   },
   "peerDependencies": {