@wallarm-org/design-system 0.85.1 → 0.87.0

package/dist/components/DropdownMenu/DropdownMenu.d.ts

@@ -20,6 +20,14 @@ interface DropdownMenuProps extends TestableProps {
     onHighlightChange?: (details: Menu.HighlightChangeDetails) => void;
     /** Whether selecting an item closes the menu (default true) */
     closeOnSelect?: boolean;
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and the
+     * other component can't find its own anchor.
+     */
+    ids?: Menu.RootProps['ids'];
 }
 export declare const DropdownMenu: FC<DropdownMenuProps>;
 export {};

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -15,7 +15,7 @@ const SUB_POSITIONING = {
         crossAxis: -9
     }
 };
-const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, 'data-testid': testIdProp, ...props })=>{
+const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint, positioning, highlightedValue, onHighlightChange, closeOnSelect, ids, 'data-testid': testIdProp, ...props })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const parent = useDropdownMenuContext();
@@ -45,6 +45,7 @@ const DropdownMenu = ({ children, open, defaultOpen, onOpenChange, anchorPoint,
         open: open,
         defaultOpen: defaultOpen,
         onOpenChange: handleOpenChange,
+        ids: ids,
         lazyMount: true,
         unmountOnExit: true,
         children: children

package/dist/components/Popover/Popover.d.ts

@@ -1,8 +1,17 @@
 import type { FC, ReactNode } from 'react';
+import { Popover as ArkUiPopover } from '@ark-ui/react';
 import { type TestableProps } from '../../utils/testId';
 export interface PopoverProps extends TestableProps {
     children: ReactNode;
     open?: boolean;
     onOpenChange?: (open: boolean) => void;
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Tooltip`, `DropdownMenu`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and the
+     * other component can't find its own anchor.
+     */
+    ids?: ArkUiPopover.RootProps['ids'];
 }
 export declare const Popover: FC<PopoverProps>;

package/dist/components/Popover/Popover.js

@@ -7,7 +7,7 @@ const POPOVER_POSITIONING_DEFAULT = {
         mainAxis: 12
     }
 };
-const Popover_Popover = ({ children, open, onOpenChange, 'data-testid': testIdProp })=>{
+const Popover_Popover = ({ children, open, onOpenChange, ids, 'data-testid': testIdProp })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const handleOpenChange = ({ open })=>{
@@ -19,6 +19,7 @@ const Popover_Popover = ({ children, open, onOpenChange, 'data-testid': testIdPr
             positioning: POPOVER_POSITIONING_DEFAULT,
             open: open,
             onOpenChange: handleOpenChange,
+            ids: ids,
             lazyMount: true,
             unmountOnExit: true,
             children: children

package/dist/components/Select/SelectEmptyState.d.ts

@@ -1,2 +1,5 @@
-import type { FC } from 'react';
-export declare const SelectEmptyState: FC;
+import type { FC, ReactNode } from 'react';
+export interface SelectEmptyStateProps {
+    description?: ReactNode;
+}
+export declare const SelectEmptyState: FC<SelectEmptyStateProps>;

package/dist/components/Select/SelectEmptyState.js

@@ -1,10 +1,10 @@
 import { jsx } from "react/jsx-runtime";
 import { EmptyState, EmptyStateDescription, EmptyStateMessage } from "../EmptyState/index.js";
-const SelectEmptyState = ()=>/*#__PURE__*/ jsx(EmptyState, {
+const SelectEmptyState = ({ description = 'No results' })=>/*#__PURE__*/ jsx(EmptyState, {
         type: "no-results",
         children: /*#__PURE__*/ jsx(EmptyStateMessage, {
             children: /*#__PURE__*/ jsx(EmptyStateDescription, {
-                children: "No results"
+                children: description
             })
         })
     });

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

@@ -4,6 +4,7 @@ export { SelectButton } from './SelectButton';
 export { SelectButtonTag, SelectButtonTagValue } from './SelectButtonTag';
 export { SelectClearTrigger } from './SelectClearTrigger';
 export { SelectContent } from './SelectContent';
+export { SelectEmptyState, type SelectEmptyStateProps } from './SelectEmptyState';
 export { SelectFooter } from './SelectFooter';
 export { SelectGroup } from './SelectGroup';
 export { SelectGroupLabel } from './SelectGroupLabel';
@@ -17,3 +18,4 @@ export { SelectPositioner } from './SelectPositioner';
 export { SelectSearchInput, type SelectSearchInputProps } from './SelectSearchInput';
 export { SelectSeparator, type SelectSeparatorProps } from './SelectSeparator';
 export type { SelectDataItem } from './types';
+export { type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './useSelectSearch';

package/dist/components/Select/index.js

@@ -4,6 +4,7 @@ export { SelectButton } from "./SelectButton.js";
 export { SelectButtonTag, SelectButtonTagValue } from "./SelectButtonTag/index.js";
 export { SelectClearTrigger } from "./SelectClearTrigger.js";
 export { SelectContent } from "./SelectContent.js";
+export { SelectEmptyState } from "./SelectEmptyState.js";
 export { SelectFooter } from "./SelectFooter.js";
 export { SelectGroup } from "./SelectGroup.js";
 export { SelectGroupLabel } from "./SelectGroupLabel.js";
@@ -16,3 +17,4 @@ export { SelectOptionText } from "./SelectOptionText.js";
 export { SelectPositioner } from "./SelectPositioner.js";
 export { SelectSearchInput } from "./SelectSearchInput.js";
 export { SelectSeparator } from "./SelectSeparator.js";
+export { useSelectSearch } from "./useSelectSearch.js";

package/dist/components/Select/useSelectSearch.d.ts

@@ -0,0 +1,16 @@
+import type { CollectionItem, ListCollection } from '@ark-ui/react/collection';
+export interface UseSelectSearchOptions<T extends CollectionItem> {
+    /**
+     * Overrides the default case-insensitive substring match against the
+     * item's stringified label. Receives the same `itemString` `collection`
+     * already computes via `itemToString`, plus the raw item for matching on
+     * other fields (e.g. `description`).
+     */
+    filterFn?: (itemString: string, item: T, query: string) => boolean;
+}
+export interface UseSelectSearchResult<T extends CollectionItem> {
+    searchValue: string;
+    onSearchChange: (value: string) => void;
+    filteredCollection: ListCollection<T>;
+}
+export declare const useSelectSearch: <T extends CollectionItem>(collection: ListCollection<T>, options?: UseSelectSearchOptions<T>) => UseSelectSearchResult<T>;

package/dist/components/Select/useSelectSearch.js

@@ -0,0 +1,20 @@
+import { useMemo, useState } from "react";
+const defaultFilterFn = (itemString, query)=>itemString.toLowerCase().includes(query.toLowerCase());
+const useSelectSearch = (collection, options)=>{
+    const [searchValue, setSearchValue] = useState('');
+    const filterFn = options?.filterFn;
+    const filteredCollection = useMemo(()=>{
+        if (!searchValue) return collection;
+        return collection.filter((itemString, _index, item)=>filterFn ? filterFn(itemString, item, searchValue) : defaultFilterFn(itemString, searchValue));
+    }, [
+        collection,
+        searchValue,
+        filterFn
+    ]);
+    return {
+        searchValue,
+        onSearchChange: setSearchValue,
+        filteredCollection
+    };
+};
+export { useSelectSearch };

package/dist/components/Table/TableColumnMenu/TableColumnMenu.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useContext, useState } from "react";
+import { createContext, useContext, useId, useState } from "react";
 import { Check, ChevronsDown, Ellipsis } from "../../../icons/index.js";
 import { cn } from "../../../utils/cn.js";
 import { useTestId } from "../../../utils/testId.js";
@@ -22,6 +22,7 @@ const TableColumnMenu = ({ column, children, className, 'data-testid': testIdPro
     const ctx = useTableContext();
     const testId = useTestId('column-menu', testIdProp);
     const [menuOpen, setMenuOpen] = useState(false);
+    const triggerId = useId();
     const isAlwaysPinned = ctx.alwaysPinnedLeft.includes(column.id);
     const canSort = ctx.sortingEnabled && column.getCanSort();
     const canPin = ctx.pinningEnabled && column.getCanPin() && !isAlwaysPinned;
@@ -36,9 +37,15 @@ const TableColumnMenu = ({ column, children, className, 'data-testid': testIdPro
             className: "shrink-0 inline-flex opacity-0 group-hover:opacity-100 has-[>_[data-state=open]]:opacity-100 transition-opacity",
             children: /*#__PURE__*/ jsxs(Tooltip, {
                 disabled: menuOpen,
+                ids: {
+                    trigger: triggerId
+                },
                 children: [
                     /*#__PURE__*/ jsxs(DropdownMenu, {
                         onOpenChange: setMenuOpen,
+                        ids: {
+                            trigger: triggerId
+                        },
                         children: [
                             /*#__PURE__*/ jsx(DropdownMenuTrigger, {
                                 asChild: true,

package/dist/components/Tooltip/Tooltip.d.ts

@@ -14,5 +14,13 @@ export interface TooltipProps extends TestableProps {
     interactive?: boolean;
     disabled?: boolean;
     positioning?: ArkUiTooltip.RootProps['positioning'];
+    /**
+     * Override the trigger element's id. Pass the same id to another
+     * compound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to
+     * compose their triggers on one element via nested `asChild` without an
+     * extra wrapper node — otherwise the outer trigger's id wins and this
+     * tooltip can't find its anchor, mispositioning at the viewport origin.
+     */
+    ids?: ArkUiTooltip.RootProps['ids'];
 }
 export declare const Tooltip: FC<TooltipProps>;

package/dist/components/Tooltip/Tooltip.js

@@ -7,7 +7,7 @@ const TOOLTIP_POSITIONING_DEFAULT = {
     },
     overflowPadding: 8
 };
-const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay, closeDelay, closeOnPointerDown, closeOnEscape, closeOnScroll, interactive, disabled, positioning, 'data-testid': testIdProp })=>{
+const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay, closeDelay, closeOnPointerDown, closeOnEscape, closeOnScroll, interactive, disabled, positioning, ids, 'data-testid': testIdProp })=>{
     const inheritedTestId = useTestId();
     const testId = testIdProp ?? inheritedTestId;
     const handleOpenChange = (details)=>{
@@ -27,6 +27,7 @@ const Tooltip_Tooltip = ({ children, open, defaultOpen, onOpenChange, openDelay,
             interactive: interactive,
             disabled: disabled,
             positioning: positioning ?? TOOLTIP_POSITIONING_DEFAULT,
+            ids: ids,
             lazyMount: true,
             unmountOnExit: true,
             children: children

package/dist/index.d.ts

@@ -62,7 +62,7 @@ export { getResponseCodeCategory, RESPONSE_CODE_COLOR, ResponseCode, type Respon
 export { ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaViewport, type ScrollAreaViewportProps, } from './components/ScrollArea';
 export { SegmentedControl, SegmentedControlButton, type SegmentedControlButtonProps, SegmentedControlItem, type SegmentedControlItemProps, type SegmentedControlProps, SegmentedControlSeparator, type SegmentedControlSeparatorProps, } from './components/SegmentedControl';
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton, } from './components/SegmentedTabs';
-export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, } from './components/Select';
+export { createListCollection, Select, SelectButton, SelectClearTrigger, SelectContent, type SelectDataItem, SelectEmptyState, type SelectEmptyStateProps, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, type UseSelectSearchOptions, type UseSelectSearchResult, useSelectSearch, } from './components/Select';
 export { Selection, SelectionAll, type SelectionAllProps, SelectionBulkBar, type SelectionBulkBarPlacement, type SelectionBulkBarProps, type SelectionContextValue, SelectionItem, type SelectionItemProps, type SelectionProps, useSelectionContext, } from './components/Selection';
 export { Separator, type SeparatorProps } from './components/Separator';
 export { Skeleton, type SkeletonProps } from './components/Skeleton';

package/dist/index.js

@@ -51,7 +51,7 @@ export { RESPONSE_CODE_COLOR, ResponseCode, getResponseCodeCategory } from "./co
 export { ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaScrollbar, ScrollAreaViewport } from "./components/ScrollArea/index.js";
 export { SegmentedControl, SegmentedControlButton, SegmentedControlItem, SegmentedControlSeparator } from "./components/SegmentedControl/index.js";
 export { SegmentedTabs, SegmentedTabsButton, SegmentedTabsContent, SegmentedTabsList, SegmentedTabsSeparator, SegmentedTabsTrigger, SegmentedTabsTriggerButton } from "./components/SegmentedTabs/index.js";
-export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection } from "./components/Select/index.js";
+export { Select, SelectButton, SelectClearTrigger, SelectContent, SelectEmptyState, SelectFooter, SelectGroup, SelectGroupLabel, SelectHeader, SelectInput, SelectOption, SelectOptionDescription, SelectOptionIndicator, SelectOptionText, SelectPositioner, SelectSearchInput, SelectSeparator, createListCollection, useSelectSearch } from "./components/Select/index.js";
 export { Selection, SelectionAll, SelectionBulkBar, SelectionItem, useSelectionContext } from "./components/Selection/index.js";
 export { Separator } from "./components/Separator/index.js";
 export { Skeleton } from "./components/Skeleton/index.js";

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.85.0",
-  "generatedAt": "2026-08-06T10:28:02.611Z",
+  "version": "0.86.0",
+  "generatedAt": "2026-08-07T08:01:47.254Z",
   "components": [
     {
       "name": "Accordion",
@@ -5665,6 +5665,12 @@
               "type": "boolean | undefined",
               "required": false,
               "description": "Whether selecting an item closes the menu (default true)"
+            },
+            {
+              "name": "ids",
+              "type": "complex",
+              "required": false,
+              "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Tooltip`, `Popover`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and the\nother component can't find its own anchor."
             }
           ]
         },
@@ -48333,6 +48339,10 @@
           "name": "Basic",
           "code": "() => (\n  <Popover data-testid='popover'>\n    <PopoverTrigger asChild>\n      <Button variant='outline' color='neutral'>\n        Click me\n      </Button>\n    </PopoverTrigger>\n    <PopoverContent>\n      <VStack gap={12}>\n        <Text size='sm'>This action will remove all and every bit!</Text>\n\n        <Alert color='warning'>\n          <AlertIcon />\n          <AlertContent>\n            <AlertTitle>Message goes here</AlertTitle>\n            <AlertDescription>\n              {'Description goes here \\nDescription goes here \\nDescription goes here'}\n            </AlertDescription>\n            <AlertControls>\n              <Button variant='secondary' color='neutral' size='small'>\n                Button\n              </Button>\n              <Button variant='secondary' color='neutral' size='small'>\n                Button\n              </Button>\n            </AlertControls>\n          </AlertContent>\n        </Alert>\n      </VStack>\n    </PopoverContent>\n  </Popover>\n)"
         },
+        {
+          "name": "WithTooltip",
+          "code": "() => {\n  const triggerId = useId();\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Popover\n      data-testid='with-tooltip-popover'\n      open={open}\n      onOpenChange={setOpen}\n      ids={{ trigger: triggerId }}\n    >\n      {/* Sharing `ids.trigger` lets both machines resolve the same DOM node as\n          their own anchor, so the tooltip positions correctly with no wrapper. */}\n      <Tooltip data-testid='with-tooltip-tooltip' disabled={open} ids={{ trigger: triggerId }}>\n        <PopoverTrigger asChild>\n          <TooltipTrigger asChild>\n            <Button data-testid='popover-tooltip-trigger' variant='outline' color='neutral'>\n              Actions\n            </Button>\n          </TooltipTrigger>\n        </PopoverTrigger>\n        <TooltipContent>More actions</TooltipContent>\n      </Tooltip>\n      <PopoverContent>\n        <Text size='sm'>Popover content</Text>\n      </PopoverContent>\n    </Popover>\n  );\n}"
+        },
         {
           "name": "MinMaxWidth",
           "code": "() => (\n  <VStack gap={32}>\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Min Width\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent>\n        <Text size='xs' weight='medium'>\n          Lorem Ipsum\n        </Text>\n      </PopoverContent>\n    </Popover>\n\n    <Popover>\n      <PopoverTrigger asChild>\n        <Button variant='outline' color='neutral'>\n          Max Width\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent>\n        <Text size='xs' weight='medium'>\n          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has\n          been the industry's standard dummy text ever since the 1500s, when an unknown printer took\n          a galley of type and scrambled it to make a type specimen book. It has survived not only\n          five centuries, but also the leap into electronic typesetting, remaining essentially\n          unchanged. It was popularised in the 1960s with the release of Letraset sheets containing\n          Lorem Ipsum passages, and more recently with desktop publishing software like Aldus\n          PageMaker including versions of Lorem Ipsum. Why do we use it? It is a long established\n          fact that a reader will be distracted by the readable content of a page when looking at\n          its layout.\n        </Text>\n      </PopoverContent>\n    </Popover>\n  </VStack>\n)"
@@ -53942,6 +53952,17 @@
       "props": [],
       "variants": [],
       "subComponents": [
+        {
+          "name": "SelectEmptyState",
+          "props": [
+            {
+              "name": "description",
+              "type": "ReactNode",
+              "required": false,
+              "defaultValue": "No results"
+            }
+          ]
+        },
         {
           "name": "SelectSearchInput",
           "props": [
@@ -54544,7 +54565,7 @@
         },
         {
           "name": "WithSearch",
-          "code": "() => {\n  const [searchValue, setSearchValue] = useState<string>('');\n\n  const collection = createListCollection({\n    items: skillsWithoutIcons,\n    groupBy: item => item.category ?? '',\n    itemToString: item => item.label,\n  });\n\n  return (\n    <div className='w-300'>\n      <Select collection={collection}>\n        <SelectButton />\n\n        <SelectPositioner>\n          <SelectHeader>\n            <SelectSearchInput value={searchValue} onChange={setSearchValue} />\n          </SelectHeader>\n\n          <SelectContent>\n            {collection\n              .filter(skill => skill.toLowerCase().includes(searchValue.toLowerCase()))\n              .group()\n              .map(([category, group], index) => (\n                <SelectGroup key={category}>\n                  <SelectGroupLabel>\n                    {category}\n                    {index === 0 && <SelectClearTrigger>Clear all</SelectClearTrigger>}\n                  </SelectGroupLabel>\n                  {group.map(skill => (\n                    <SelectOption key={skill.value} item={skill}>\n                      <SelectOptionText>{skill.label}</SelectOptionText>\n                      {skill.description && (\n                        <SelectOptionDescription>{skill.description}</SelectOptionDescription>\n                      )}\n                      <SelectOptionIndicator />\n                    </SelectOption>\n                  ))}\n                </SelectGroup>\n              ))}\n          </SelectContent>\n\n          <SelectFooter>\n            <HStack justify='between'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <SquareArrowOutUpRight />\n                See all\n              </Button>\n\n              <HStack justify='end'>\n                <Button variant='ghost' color='neutral' size='small'>\n                  Cancel\n                </Button>\n\n                <Button variant='primary' color='brand' size='small'>\n                  Apply\n                </Button>\n              </HStack>\n            </HStack>\n          </SelectFooter>\n        </SelectPositioner>\n      </Select>\n    </div>\n  );\n}"
+          "code": "() => {\n  const collection = createListCollection({\n    items: skillsWithoutIcons,\n    groupBy: item => item.category ?? '',\n    itemToString: item => item.label,\n  });\n\n  const { searchValue, onSearchChange, filteredCollection } = useSelectSearch(collection);\n\n  return (\n    <div className='w-300'>\n      <Select collection={collection}>\n        <SelectButton />\n\n        <SelectPositioner>\n          <SelectHeader>\n            <SelectSearchInput value={searchValue} onChange={onSearchChange} />\n          </SelectHeader>\n\n          <SelectContent>\n            {filteredCollection.size === 0 ? (\n              <SelectEmptyState description={`No results for \"${searchValue}\"`} />\n            ) : (\n              filteredCollection.group().map(([category, group], index) => (\n                <SelectGroup key={category}>\n                  <SelectGroupLabel>\n                    {category}\n                    {index === 0 && <SelectClearTrigger>Clear all</SelectClearTrigger>}\n                  </SelectGroupLabel>\n                  {group.map(skill => (\n                    <SelectOption key={skill.value} item={skill}>\n                      <SelectOptionText>{skill.label}</SelectOptionText>\n                      {skill.description && (\n                        <SelectOptionDescription>{skill.description}</SelectOptionDescription>\n                      )}\n                      <SelectOptionIndicator />\n                    </SelectOption>\n                  ))}\n                </SelectGroup>\n              ))\n            )}\n          </SelectContent>\n\n          <SelectFooter>\n            <HStack justify='between'>\n              <Button variant='ghost' color='neutral' size='small'>\n                <SquareArrowOutUpRight />\n                See all\n              </Button>\n\n              <HStack justify='end'>\n                <Button variant='ghost' color='neutral' size='small'>\n                  Cancel\n                </Button>\n\n                <Button variant='primary' color='brand' size='small'>\n                  Apply\n                </Button>\n              </HStack>\n            </HStack>\n          </SelectFooter>\n        </SelectPositioner>\n      </Select>\n    </div>\n  );\n}"
         },
         {
           "name": "WithFormField",
@@ -82150,6 +82171,12 @@
           "name": "positioning",
           "type": "PositioningOptions | undefined",
           "required": false
+        },
+        {
+          "name": "ids",
+          "type": "Partial<{ trigger: string | ((value?: string | undefined) => string); content: string; arrow: string; positioner: string; }> | undefined",
+          "required": false,
+          "description": "Override the trigger element's id. Pass the same id to another\ncompound component's `ids.trigger` (e.g. `Popover`, `DropdownMenu`) to\ncompose their triggers on one element via nested `asChild` without an\nextra wrapper node — otherwise the outer trigger's id wins and this\ntooltip can't find its anchor, mispositioning at the viewport origin."
         }
       ],
       "variants": [],

package/package.json

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