@wallarm-org/design-system 0.86.0 → 0.87.0

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/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.1",
-  "generatedAt": "2026-08-07T06:49:22.264Z",
+  "version": "0.86.0",
+  "generatedAt": "2026-08-07T08:01:47.254Z",
   "components": [
     {
       "name": "Accordion",
@@ -53952,6 +53952,17 @@
       "props": [],
       "variants": [],
       "subComponents": [
+        {
+          "name": "SelectEmptyState",
+          "props": [
+            {
+              "name": "description",
+              "type": "ReactNode",
+              "required": false,
+              "defaultValue": "No results"
+            }
+          ]
+        },
         {
           "name": "SelectSearchInput",
           "props": [
@@ -54554,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",

package/package.json

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